@ripla/godd-mcp 1.0.4-canary.8 → 1.0.4

package/notes/app/src/lib/issue-url-sync.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from "vitest";
+import {
+  buildMainPageSearchParams,
+  parseIssueSearchParam,
+  issueSelectionToSearchParam,
+  searchParamsToString,
+} from "./issue-url-sync";
+
+describe("parseIssueSearchParam", () => {
+  it("parses positive issue numbers", () => {
+    expect(parseIssueSearchParam("794")).toBe(794);
+  });
+
+  it("parses new issue sentinel", () => {
+    expect(parseIssueSearchParam("new")).toBe("new");
+  });
+
+  it("returns null for invalid values", () => {
+    expect(parseIssueSearchParam(null)).toBeNull();
+    expect(parseIssueSearchParam("")).toBeNull();
+    expect(parseIssueSearchParam("0")).toBeNull();
+    expect(parseIssueSearchParam("-1")).toBeNull();
+    expect(parseIssueSearchParam("abc")).toBeNull();
+  });
+});
+
+describe("issueSelectionToSearchParam", () => {
+  it("serializes issue selections", () => {
+    expect(issueSelectionToSearchParam(123)).toBe("123");
+    expect(issueSelectionToSearchParam("new")).toBe("new");
+    expect(issueSelectionToSearchParam(null)).toBeNull();
+  });
+});
+
+describe("buildMainPageSearchParams", () => {
+  it("builds issue-only deep link", () => {
+    const params = buildMainPageSearchParams({ issue: 794 });
+    expect(searchParamsToString(params)).toBe("?issue=794");
+  });
+
+  it("builds new-issue deep link", () => {
+    const params = buildMainPageSearchParams({ issue: "new" });
+    expect(searchParamsToString(params)).toBe("?issue=new");
+  });
+
+  it("prefers file over issue when both provided", () => {
+    const params = buildMainPageSearchParams({
+      file: "docs/README.md",
+      issue: 794,
+    });
+    expect(params.get("file")).toBe("docs/README.md");
+    expect(params.get("issue")).toBe("794");
+  });
+
+  it("preserves unrelated query params", () => {
+    const preserve = new URLSearchParams("x=1&file=old&issue=1");
+    const params = buildMainPageSearchParams({
+      issue: 42,
+      preserve,
+    });
+    expect(params.get("x")).toBe("1");
+    expect(params.get("issue")).toBe("42");
+    expect(params.has("file")).toBe(false);
+  });
+
+  it("clears issue and file when neither is set", () => {
+    const preserve = new URLSearchParams("file=a&issue=1&x=1");
+    const params = buildMainPageSearchParams({ preserve });
+    expect(params.get("x")).toBe("1");
+    expect(params.has("file")).toBe(false);
+    expect(params.has("issue")).toBe(false);
+  });
+});

package/notes/app/src/lib/issue-url-sync.ts

@@ -0,0 +1,43 @@
+export type IssueUrlSelection = number | "new" | null;
+
+export function parseIssueSearchParam(value: string | null): IssueUrlSelection {
+  if (!value) return null;
+  if (value === "new") return "new";
+  const parsed = Number(value);
+  if (Number.isInteger(parsed) && parsed > 0) return parsed;
+  return null;
+}
+
+export function issueSelectionToSearchParam(selection: IssueUrlSelection): string | null {
+  if (selection === null) return null;
+  if (selection === "new") return "new";
+  return String(selection);
+}
+
+export function buildMainPageSearchParams(options: {
+  file?: string | null;
+  issue?: IssueUrlSelection;
+  preserve?: URLSearchParams;
+}): URLSearchParams {
+  const params = new URLSearchParams();
+  if (options.preserve) {
+    for (const [key, value] of options.preserve) {
+      if (key !== "file" && key !== "issue") {
+        params.append(key, value);
+      }
+    }
+  }
+  if (options.file) {
+    params.set("file", options.file);
+  }
+  const issueValue = issueSelectionToSearchParam(options.issue ?? null);
+  if (issueValue) {
+    params.set("issue", issueValue);
+  }
+  return params;
+}
+
+export function searchParamsToString(params: URLSearchParams): string {
+  const qs = params.toString();
+  return qs ? `?${qs}` : "";
+}

package/notes/app/src/lib/main-page-default-view.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import {
+  buildDefaultViewSearchParams,
+  isDefaultMainContentView,
+} from "@/lib/main-page-default-view";
+
+describe("buildDefaultViewSearchParams", () => {
+  it("clears file and issue deep links", () => {
+    const preserve = new URLSearchParams("file=docs/a.md&issue=42&tab=settings");
+    const params = buildDefaultViewSearchParams(preserve);
+    expect(params.get("file")).toBeNull();
+    expect(params.get("issue")).toBeNull();
+    expect(params.get("tab")).toBe("settings");
+  });
+});
+
+describe("isDefaultMainContentView", () => {
+  it("returns true when no file or issue is selected", () => {
+    expect(
+      isDefaultMainContentView({
+        selectedFile: null,
+        fileContent: null,
+        selectedIssue: null,
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false when an issue remains selected without a file", () => {
+    expect(
+      isDefaultMainContentView({
+        selectedFile: null,
+        fileContent: null,
+        selectedIssue: 812,
+      }),
+    ).toBe(false);
+  });
+});

package/notes/app/src/lib/main-page-default-view.ts

@@ -0,0 +1,15 @@
+import { buildMainPageSearchParams } from "@/lib/issue-url-sync";
+
+/** Search params for MainPage default home (file tree tab, no file/issue selection). */
+export function buildDefaultViewSearchParams(preserve?: URLSearchParams): URLSearchParams {
+  return buildMainPageSearchParams({ preserve });
+}
+
+/** True when the main pane should show the default empty file-tree prompt. */
+export function isDefaultMainContentView(input: {
+  selectedFile: string | null;
+  fileContent: unknown | null;
+  selectedIssue: number | "new" | null;
+}): boolean {
+  return !input.selectedFile && !input.fileContent && input.selectedIssue == null;
+}

package/notes/app/src/lib/resizable-panel.test.ts

@@ -0,0 +1,199 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import {
+  LEFT_SIDEBAR_LAYOUT,
+  RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS,
+  RESIZABLE_RIGHT_PANEL_ASIDE_CLASS,
+  RIGHT_PANEL_LAYOUT,
+  clampPanelWidth,
+  computeResizedWidth,
+  isRtlContext,
+  loadStoredPanelWidth,
+  panelResizeWithoutHandle,
+  resolveMdUpPanelResize,
+  saveStoredPanelWidth,
+} from "@/lib/resizable-panel";
+
+describe("RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS", () => {
+  it("md+ で relative 配置し static を使わない", () => {
+    expect(RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS).toContain("md:relative");
+    expect(RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS).not.toContain("md:static");
+    expect(RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS).toContain("md:inset-auto");
+  });
+
+  it("#1009: 位置・border は論理プロパティ（start-0 / border-e）で物理 left/border-r を使わない", () => {
+    expect(RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS).toContain("start-0");
+    expect(RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS).toContain("border-e");
+    expect(RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS).not.toContain("left-0");
+    expect(RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS).not.toContain("border-r");
+  });
+});
+
+describe("resolveMdUpPanelResize", () => {
+  it("md+ のときリサイズ binding を返す", () => {
+    const onPointerDown = () => {};
+    const onWidthChange = () => {};
+    expect(
+      resolveMdUpPanelResize(true, 320, 240, 560, onPointerDown, onWidthChange),
+    ).toEqual({
+      width: 320,
+      minWidth: 240,
+      maxWidth: 560,
+      onPointerDown,
+      onWidthChange,
+    });
+  });
+
+  it("モバイルでは undefined を返す", () => {
+    expect(
+      resolveMdUpPanelResize(false, 320, 240, 560, () => {}, () => {}),
+    ).toBeUndefined();
+  });
+});
+
+describe("panelResizeWithoutHandle", () => {
+  it("showResizeHandle: false を付与し幅 binding は維持する", () => {
+    const binding = {
+      width: 320,
+      minWidth: 240,
+      maxWidth: 560,
+      onPointerDown: () => {},
+      onWidthChange: () => {},
+    };
+    expect(panelResizeWithoutHandle(binding)).toEqual({
+      ...binding,
+      showResizeHandle: false,
+    });
+  });
+});
+
+describe("RESIZABLE_RIGHT_PANEL_ASIDE_CLASS", () => {
+  it("md+ で relative 配置し static を使わない", () => {
+    expect(RESIZABLE_RIGHT_PANEL_ASIDE_CLASS).toContain("md:relative");
+    expect(RESIZABLE_RIGHT_PANEL_ASIDE_CLASS).not.toContain("md:static");
+    expect(RESIZABLE_RIGHT_PANEL_ASIDE_CLASS).toContain("md:inset-auto");
+  });
+
+  it("#1009: border は論理プロパティ（border-s）で物理 border-l を使わない", () => {
+    expect(RESIZABLE_RIGHT_PANEL_ASIDE_CLASS).toContain("border-s");
+    expect(RESIZABLE_RIGHT_PANEL_ASIDE_CLASS).not.toContain("border-l");
+  });
+});
+
+describe("isRtlContext", () => {
+  it("最も近い [dir=rtl] 祖先で true", () => {
+    const root = document.createElement("div");
+    root.setAttribute("dir", "rtl");
+    const child = document.createElement("span");
+    root.appendChild(child);
+    expect(isRtlContext(child)).toBe(true);
+  });
+
+  it("dir 指定が無ければ LTR 既定で false", () => {
+    const el = document.createElement("div");
+    expect(isRtlContext(el)).toBe(false);
+  });
+
+  it("より近い [dir=ltr] が rtl 祖先を上書きする", () => {
+    const root = document.createElement("div");
+    root.setAttribute("dir", "rtl");
+    const inner = document.createElement("div");
+    inner.setAttribute("dir", "ltr");
+    const child = document.createElement("span");
+    inner.appendChild(child);
+    root.appendChild(inner);
+    expect(isRtlContext(child)).toBe(false);
+  });
+
+  it("dir 値は大小文字非依存（RTL も rtl 扱い）", () => {
+    const root = document.createElement("div");
+    root.setAttribute("dir", "RTL");
+    const child = document.createElement("span");
+    root.appendChild(child);
+    expect(isRtlContext(child)).toBe(true);
+  });
+
+  it("null/undefined では false", () => {
+    expect(isRtlContext(null)).toBe(false);
+    expect(isRtlContext(undefined)).toBe(false);
+  });
+});
+
+describe("clampPanelWidth", () => {
+  it("min/max の範囲内に収める", () => {
+    expect(clampPanelWidth(100, 200, 400)).toBe(200);
+    expect(clampPanelWidth(500, 200, 400)).toBe(400);
+    expect(clampPanelWidth(321.6, 200, 400)).toBe(322);
+  });
+});
+
+describe("computeResizedWidth", () => {
+  it("inline-end エッジ（LTR）は右ドラッグで拡大・左ドラッグで縮小する", () => {
+    expect(
+      computeResizedWidth(256, 100, 140, "inline-end", 200, 480),
+    ).toBe(296);
+    expect(
+      computeResizedWidth(256, 100, 60, "inline-end", 200, 480),
+    ).toBe(216);
+  });
+
+  it("inline-start エッジ（LTR）は左ドラッグで拡大・右ドラッグで縮小する", () => {
+    expect(
+      computeResizedWidth(320, 900, 860, "inline-start", 240, 560),
+    ).toBe(360);
+    expect(
+      computeResizedWidth(320, 900, 940, "inline-start", 240, 560),
+    ).toBe(280);
+  });
+
+  it("#1009 RTL: inline-end エッジは物理符号が反転する（左ドラッグで拡大）", () => {
+    expect(
+      computeResizedWidth(256, 100, 60, "inline-end", 200, 480, true),
+    ).toBe(296);
+    expect(
+      computeResizedWidth(256, 100, 140, "inline-end", 200, 480, true),
+    ).toBe(216);
+  });
+
+  it("#1009 RTL: inline-start エッジは物理符号が反転する（右ドラッグで拡大）", () => {
+    expect(
+      computeResizedWidth(320, 900, 940, "inline-start", 240, 560, true),
+    ).toBe(360);
+    expect(
+      computeResizedWidth(320, 900, 860, "inline-start", 240, 560, true),
+    ).toBe(280);
+  });
+});
+
+describe("panel width storage", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("保存した幅を読み込む", () => {
+    saveStoredPanelWidth(LEFT_SIDEBAR_LAYOUT.storageKey, 300);
+    expect(
+      loadStoredPanelWidth(
+        LEFT_SIDEBAR_LAYOUT.storageKey,
+        LEFT_SIDEBAR_LAYOUT.defaultWidth,
+        LEFT_SIDEBAR_LAYOUT.minWidth,
+        LEFT_SIDEBAR_LAYOUT.maxWidth,
+      ),
+    ).toBe(300);
+  });
+
+  it("不正値は default にフォールバックする", () => {
+    window.localStorage.setItem(RIGHT_PANEL_LAYOUT.storageKey, "invalid");
+    expect(
+      loadStoredPanelWidth(
+        RIGHT_PANEL_LAYOUT.storageKey,
+        RIGHT_PANEL_LAYOUT.defaultWidth,
+        RIGHT_PANEL_LAYOUT.minWidth,
+        RIGHT_PANEL_LAYOUT.maxWidth,
+      ),
+    ).toBe(RIGHT_PANEL_LAYOUT.defaultWidth);
+  });
+});

package/notes/app/src/lib/resizable-panel.ts

@@ -0,0 +1,136 @@
+import type { PointerEvent as ReactPointerEvent } from "react";
+
+export const LEFT_SIDEBAR_LAYOUT = {
+  storageKey: "notes-layout-left-sidebar-width",
+  defaultWidth: 256,
+  minWidth: 200,
+  maxWidth: 480,
+} as const;
+
+export const RIGHT_PANEL_LAYOUT = {
+  storageKey: "notes-layout-right-panel-width",
+  defaultWidth: 320,
+  minWidth: 240,
+  maxWidth: 560,
+} as const;
+
+export const PANEL_RESIZE_KEYBOARD_STEP_PX = 16;
+
+/** キーボード連打時の localStorage 書き込みを間引く debounce（ms） */
+export const PANEL_WIDTH_SAVE_DEBOUNCE_MS = 300;
+
+export type PanelResizeProps = {
+  width: number;
+  minWidth: number;
+  maxWidth: number;
+  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onWidthChange: (width: number) => void;
+  /** false のとき幅スタイルのみ適用しリサイズハンドルは非表示（右パネル複数表示時の a11y 用） */
+  showResizeHandle?: boolean;
+};
+
+/** 幅 binding は維持し、フォーカス可能な slider を1つに抑える */
+export function panelResizeWithoutHandle(binding: PanelResizeProps): PanelResizeProps {
+  return { ...binding, showResizeHandle: false };
+}
+
+/** md+ のみパネルリサイズ binding を返す（ハンドル表示条件の単一化） */
+export function resolveMdUpPanelResize(
+  mdUpLayout: boolean,
+  width: number,
+  minWidth: number,
+  maxWidth: number,
+  onPointerDown: PanelResizeProps["onPointerDown"],
+  onWidthChange: PanelResizeProps["onWidthChange"],
+): PanelResizeProps | undefined {
+  if (!mdUpLayout) return undefined;
+  return { width, minWidth, maxWidth, onPointerDown, onWidthChange };
+}
+
+/**
+ * md+ では relative でリサイズハンドルの containing block を確保する（static 不可）。
+ * 位置・border は論理プロパティ（`start-0` / `border-e`）で記述し `dir="rtl"` で左右が反転する（#1009）。
+ */
+export const RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS =
+  "fixed inset-y-0 start-0 z-40 w-[min(100vw,16rem)] md:w-auto bg-gray-800 border-e border-gray-700 flex flex-col shrink-0 transform transition-transform duration-200 ease-in-out md:relative md:inset-auto md:translate-x-0";
+
+/**
+ * md+ では relative でリサイズハンドルの containing block を確保する（static 不可）。
+ * border は論理プロパティ（`border-s`）で記述し `dir="rtl"` で反転する（#1009）。
+ */
+export const RESIZABLE_RIGHT_PANEL_ASIDE_CLASS =
+  "absolute inset-0 md:relative md:inset-auto md:w-auto z-20 border-s border-gray-700 bg-gray-800 flex flex-col shrink-0";
+
+export function clampPanelWidth(width: number, minWidth: number, maxWidth: number): number {
+  return Math.min(maxWidth, Math.max(minWidth, Math.round(width)));
+}
+
+export function loadStoredPanelWidth(
+  storageKey: string,
+  defaultWidth: number,
+  minWidth: number,
+  maxWidth: number,
+): number {
+  if (typeof window === "undefined") return defaultWidth;
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (raw == null) return defaultWidth;
+    const parsed = Number(raw);
+    if (!Number.isFinite(parsed)) return defaultWidth;
+    return clampPanelWidth(parsed, minWidth, maxWidth);
+  } catch {
+    return defaultWidth;
+  }
+}
+
+export function saveStoredPanelWidth(storageKey: string, width: number): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(storageKey, String(width));
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+/** リサイズハンドルが属する論理エッジ（`dir` で物理左右が反転する） */
+export type ResizeEdge = "inline-start" | "inline-end";
+
+/**
+ * ポインタ移動量から新しいパネル幅を求める。
+ *
+ * 幅が広がる物理ドラッグ方向は「論理エッジ × 書字方向」で決まる:
+ * - inline-end エッジ（左サイドバー右端）: LTR は右(+delta)で拡大、RTL は左(-delta)で拡大
+ * - inline-start エッジ（右パネル左端）: LTR は左(-delta)で拡大、RTL は右(+delta)で拡大
+ * `isRtl` で物理符号を反転し、`dir="rtl"` の物理ドラッグ方向と整合させる（#1009）。
+ */
+export function computeResizedWidth(
+  startWidth: number,
+  startPointerX: number,
+  currentPointerX: number,
+  edge: ResizeEdge,
+  minWidth: number,
+  maxWidth: number,
+  isRtl = false,
+): number {
+  const delta = currentPointerX - startPointerX;
+  const widenSign = (edge === "inline-end" ? 1 : -1) * (isRtl ? -1 : 1);
+  const next = startWidth + widenSign * delta;
+  return clampPanelWidth(next, minWidth, maxWidth);
+}
+
+/**
+ * 要素の書字方向が RTL かを判定する。
+ * 最も近い `[dir]` 祖先の明示値（大小文字非依存）を優先し、`rtl`/`ltr` 明示が無い場合
+ * （未指定 / `dir="auto"` / CSS `direction` のみ）は解決済み方向にフォールバックして CSS の
+ * 論理プロパティ反転と JS の符号反転を一致させる（#1009）。明示 dir を先に見るため jsdom でも判定可能。
+ */
+export function isRtlContext(el: Element | null | undefined): boolean {
+  if (el == null) return false;
+  const explicit = el.closest("[dir]")?.getAttribute("dir")?.toLowerCase();
+  if (explicit === "rtl") return true;
+  if (explicit === "ltr") return false;
+  if (typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+    return window.getComputedStyle(el).direction === "rtl";
+  }
+  return false;
+}

package/notes/app/src/pages/LoginPage.test.tsx

@@ -0,0 +1,17 @@
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { mockAuthContext } from "@/test/mocks";
+import { renderWithProviders } from "@/test/render";
+import LoginPage from "./LoginPage";
+
+// user: null から isAuthenticated/canEdit が false に導出される（未認証状態）
+vi.mock("@/contexts/AuthContext", () => ({
+  useAuth: () => mockAuthContext({ user: null }),
+}));
+
+describe("LoginPage", () => {
+  it("renders title", () => {
+    renderWithProviders(<LoginPage />);
+    expect(screen.getByText("GoDD Notes")).toBeTruthy();
+  });
+});