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

package/{notes-app → notes/app}/src/pages/MainPage.tsx

@@ -3,6 +3,7 @@ import { Link, useSearchParams } from "react-router-dom";
 import { useAuth } from "@/contexts/AuthContext";
 import { useToast } from "@/contexts/ToastContext";
 import { useEditSession } from "@/hooks/useEditSession";
+import { usePeriodicSync } from "@/hooks/usePeriodicSync";
 import { useAutoSave } from "@/hooks/useAutoSave";
 import {
   apiFetch,
@@ -29,19 +30,49 @@ import { useCollaboration } from "@/hooks/useCollaboration";
 import { useComments } from "@/hooks/useComments";
 import CollabStatus from "@/components/CollabStatus";
 import CommentPanel from "@/components/CommentPanel";
+import CommentSelectionPopover from "@/components/CommentSelectionPopover";
+import type { CommentAnchor } from "@/lib/commentAnchor";
+import { getWindowSelectionAnchor } from "@/lib/commentAnchor";
 import EditToolbar from "@/components/EditToolbar";
 import FileInfoPanel from "@/components/FileInfoPanel";
+import PanelResizeHandle from "@/components/PanelResizeHandle";
 import { FilePlus, FolderPlus, ChevronsDownUp, Users, Settings, LogOut, X, GitBranch, Menu, CircleDot, FolderTree, Plus, ArrowLeft, MessageSquare, Info } from "lucide-react";
 import TreeNode from "@/components/TreeNode";
 import FileContentView from "@/components/FileContentView";
 import BranchSelectorModal from "@/components/BranchSelectorModal";
 import IssueList from "@/components/IssueList";
+import type { IssueDetail, IssueSummary } from "@/lib/api";
 import type { TreeEntry, FileContent, ApiState, FileStyles } from "@/types";
 import { getFileExt } from "@/types";
 import { insertChildEntry, moveEntry, removeEntry } from "@/lib/tree-utils";
 import { createdFileToContent, createdFileToTreeEntry } from "@/lib/created-file";
 import { DEFAULT_BASE_REF, hasContentDiff, resolveBranchLabels, resolveOriginalContent } from "@/lib/branch-diff";
 import { clearDraft, loadDraft, saveDraft } from "@/lib/draft-storage";
+import {
+  buildMainPageSearchParams,
+  parseIssueSearchParam,
+  type IssueUrlSelection,
+} from "@/lib/issue-url-sync";
+import {
+  issueDetailToSummary,
+  shouldClearOptimisticForSelection,
+  type OptimisticSettleMode,
+} from "@/lib/issue-list-utils";
+import {
+  LEFT_SIDEBAR_LAYOUT,
+  RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS,
+  RESIZABLE_RIGHT_PANEL_ASIDE_CLASS,
+  RIGHT_PANEL_LAYOUT,
+  panelResizeWithoutHandle,
+  resolveMdUpPanelResize,
+} from "@/lib/resizable-panel";
+import {
+  GITHUB_SYNC_POLL_INTERVAL_MS,
+  shouldDispatchIssueListBackgroundSync,
+  shouldSyncGithub,
+} from "@/lib/github-sync";
+import { useResizablePanelWidth } from "@/hooks/useResizablePanelWidth";
+import { resolvePanelWidthStyle, useMdUpLayout } from "@/hooks/useMdUpLayout";
 
 const MarkdownEditor = lazy(() => import("@/components/MarkdownEditor"));
 const SpreadsheetEditor = lazy(() => import("@/components/SpreadsheetEditor"));
@@ -64,21 +95,32 @@ async function fetchFileContent(path: string, ref: string | null, signal: AbortS
 export default function MainPage() {
   const { user, canEdit, logout } = useAuth();
   const { showToast } = useToast();
-  const editSession = useEditSession();
 
   const [searchParams, setSearchParams] = useSearchParams();
 
   const [tree, setTree] = useState<TreeEntry[]>([]);
   const [apiState, setApiState] = useState<ApiState>("loading");
+  const githubSyncEnabled = shouldSyncGithub(apiState);
   const [errorMsg, setErrorMsg] = useState("");
   const [selectedFile, setSelectedFile] = useState<string | null>(
     () => searchParams.get("file"),
   );
+  const [sidebarTab, setSidebarTab] = useState<SidebarTab>(() => {
+    if (searchParams.get("file")) return "files";
+    return parseIssueSearchParam(searchParams.get("issue")) !== null ? "issues" : "files";
+  });
+  const [selectedIssue, setSelectedIssue] = useState<number | "new" | null>(() =>
+    searchParams.get("file") ? null : parseIssueSearchParam(searchParams.get("issue")),
+  );
+  // IssueList が自前の periodic sync を実行している状態（Issues タブ表示 + live）。
+  // 詳細 poll 起因の一覧背景再取得の重複抑制判定と IssueList の syncEnabled で単一ソース化する（#932）
+  const issueListPeriodicSyncing = githubSyncEnabled && sidebarTab === "issues";
   const [fileContent, setFileContent] = useState<FileContent | null>(null);
   const [baseFileContent, setBaseFileContent] = useState<FileContent | null>(null);
   const [baseFileError, setBaseFileError] = useState<string | null>(null);
   const [fileLoading, setFileLoading] = useState(false);
   const [editing, setEditing] = useState(false);
+  const editSession = useEditSession({ syncEnabled: githubSyncEnabled && editing });
   const [treeFilter, setTreeFilter] = useState("");
   const [collapseKey, setCollapseKey] = useState(0);
   const [activeDir, setActiveDir] = useState("docs");
@@ -138,20 +180,55 @@ export default function MainPage() {
 
   const treeAbortRef = useRef<AbortController | null>(null);
   const treeSyncTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const loadBranches = useCallback(() => {
-    setBranchesLoading(true);
-    fetchProposalsApi()
+  // ブランチ選択モーダルの proposals 取得: foreground（手動 refresh・初回）と background poll で
+  // seq を分離し、並走時に古い応答が新しい proposals を上書きしないようにする（#936、#934 と同型）
+  const loadBranchesSeq = useRef(0);
+  const pollBranchesSeq = useRef(0);
+
+  // foreground 取得開始時は poll seq も進め、in-flight の background poll を無効化する
+  const beginLoadBranches = useCallback(() => {
+    loadBranchesSeq.current += 1;
+    pollBranchesSeq.current += 1;
+    return loadBranchesSeq.current;
+  }, []);
+
+  // background poll は poll seq のみ進め、in-flight の foreground 取得は無効化しない
+  const beginPollBranches = useCallback(() => {
+    pollBranchesSeq.current += 1;
+    return pollBranchesSeq.current;
+  }, []);
+
+  const loadBranches = useCallback((options?: { background?: boolean }) => {
+    const background = options?.background ?? false;
+    const requestId = background ? beginPollBranches() : beginLoadBranches();
+    const isStale = () =>
+      background
+        ? requestId !== pollBranchesSeq.current
+        : requestId !== loadBranchesSeq.current;
+    if (!background) {
+      setBranchesLoading(true);
+    }
+    // Promise を返し、usePeriodicSync の in-flight ガード（#937）で並列 poll を防ぐ
+    return fetchProposalsApi()
       .then((data) => {
+        if (isStale()) return;
         const openBranches = data.filter((p) => p.state === "open" && !p.merged);
         setBranches(openBranches);
       })
       .catch((err) => {
-        setBranches([]);
-        showToast(getErrorMessage(err, "ブランチ一覧の取得に失敗しました"), "error");
+        if (isStale()) return;
+        if (!background) {
+          setBranches([]);
+          showToast(getErrorMessage(err, "ブランチ一覧の取得に失敗しました"), "error");
+        }
       })
-      .finally(() => setBranchesLoading(false));
-  }, [showToast]);
+      .finally(() => {
+        if (isStale()) return;
+        if (!background) {
+          setBranchesLoading(false);
+        }
+      });
+  }, [showToast, beginLoadBranches, beginPollBranches]);
 
   const loadTree = useCallback((ref?: string) => {
     treeAbortRef.current?.abort();
@@ -190,7 +267,17 @@ export default function MainPage() {
       });
   }, [showToast]);
 
-  const initialFileLoaded = useRef(false);
+  const initialDeepLinkLoaded = useRef(false);
+
+  const syncIssueToUrl = useCallback(
+    (issue: IssueUrlSelection) => {
+      setSearchParams(
+        buildMainPageSearchParams({ issue, preserve: searchParams }),
+        { replace: true },
+      );
+    },
+    [searchParams, setSearchParams],
+  );
 
   useEffect(() => {
     loadTree(viewingRef ?? undefined);
@@ -282,6 +369,7 @@ export default function MainPage() {
     setBaseFileContent(null);
     setBaseFileError(null);
     setEditing(false);
+    setShowOriginal(false);
     setShowDiff(false);
     setEditedContent(null);
     autoSave.reset();
@@ -297,10 +385,14 @@ export default function MainPage() {
     autoSave.reset();
     pendingStylesRef.current = null;
     setSelectedFile(path);
+    setSelectedIssue(null);
     setBaseFileContent(null);
     setBaseFileError(null);
     setActiveDir(path.substring(0, path.lastIndexOf("/")) || "docs");
-    setSearchParams({ file: path }, { replace: true });
+    setSearchParams(
+      buildMainPageSearchParams({ file: path, preserve: searchParams }),
+      { replace: true },
+    );
     setFileLoading(true);
     setEditing(false);
     setShowOriginal(false);
@@ -343,17 +435,45 @@ export default function MainPage() {
       .finally(() => {
         if (!controller.signal.aborted) setFileLoading(false);
       });
-  }, [autoSave, editSession.session?.branchName, showToast, setSearchParams, viewingRef]);
+  }, [autoSave, editSession.session?.branchName, showToast, setSearchParams, searchParams, viewingRef]);
 
   useEffect(() => {
-    if (initialFileLoaded.current) return;
+    if (initialDeepLinkLoaded.current) return;
     if (apiState !== "ready" && apiState !== "mock") return;
+
     const fileParam = searchParams.get("file");
+    const issueParam = parseIssueSearchParam(searchParams.get("issue"));
+
     if (fileParam && !fileContent) {
-      initialFileLoaded.current = true;
+      initialDeepLinkLoaded.current = true;
       handleFileSelect(fileParam);
+      return;
     }
-  }, [apiState, searchParams, fileContent, handleFileSelect]);
+
+    if (issueParam !== null && selectedIssue === null && !selectedFile) {
+      initialDeepLinkLoaded.current = true;
+      setSidebarTab("issues");
+      setSelectedIssue(issueParam);
+    }
+  }, [apiState, searchParams, fileContent, selectedIssue, selectedFile, handleFileSelect]);
+
+  useEffect(() => {
+    if (searchParams.get("file")) return;
+
+    const issueParam = parseIssueSearchParam(searchParams.get("issue"));
+    if (issueParam !== null) {
+      setSidebarTab("issues");
+      setSelectedIssue((current) => (current === issueParam ? current : issueParam));
+      setSelectedFile(null);
+      setFileContent(null);
+      setEditing(false);
+      return;
+    }
+
+    if (!searchParams.get("issue")) {
+      setSelectedIssue((current) => (current === null ? current : null));
+    }
+  }, [searchParams]);
 
   const handleSave = useCallback(
     async (newContent: string, styles?: FileStyles | null) => {
@@ -427,7 +547,10 @@ export default function MainPage() {
         setBaseFileContent(createdFileToContent(created));
         setBaseFileError(null);
         setActiveDir(parentPath);
-        setSearchParams({ file: created.path }, { replace: true });
+        setSearchParams(
+          buildMainPageSearchParams({ file: created.path, preserve: searchParams }),
+          { replace: true },
+        );
         setFileLoading(false);
         setEditing(false);
         setShowOriginal(false);
@@ -441,7 +564,7 @@ export default function MainPage() {
         showToast(`作成に失敗しました: ${getErrorMessage(e)}`, "error");
       }
     },
-    [dialog, showToast, autoSave, setSearchParams, loadTree],
+    [dialog, showToast, autoSave, setSearchParams, searchParams, loadTree],
   );
 
   const handleCreateFolder = useCallback(
@@ -617,14 +740,195 @@ export default function MainPage() {
   const diffButtonLabel = baseFileError ? "差分確認不可" : contentHasDiff ? "差分あり" : "差分";
   const [showCommentPanel, setShowCommentPanel] = useState(false);
   const [showFileInfoPanel, setShowFileInfoPanel] = useState(false);
+  const [commentAnchor, setCommentAnchor] = useState<CommentAnchor | null>(null);
+  const [viewSelectionPopover, setViewSelectionPopover] = useState<{
+    top: number;
+    left: number;
+    anchor: CommentAnchor;
+  } | null>(null);
   const comments = useComments(selectedFile);
 
+  const commentHighlights = useMemo(
+    () =>
+      comments.comments
+        .filter(
+          (c) =>
+            c.parent_id === null &&
+            c.anchor_text &&
+            c.position_from != null &&
+            c.position_to != null &&
+            c.resolved_at === null,
+        )
+        .map((c) => ({
+          anchor_text: c.anchor_text as string,
+          position_from: c.position_from as number,
+          position_to: c.position_to as number,
+        })),
+    [comments.comments],
+  );
+
+  const handleCommentAnchor = useCallback((anchor: CommentAnchor) => {
+    setCommentAnchor(anchor);
+    setShowCommentPanel(true);
+    setShowFileInfoPanel(false);
+    setViewSelectionPopover(null);
+  }, []);
+
+  const handleViewModeSelection = useCallback(() => {
+    if (!fileContent) return;
+    const ext = getFileExt(fileContent.path);
+    if (ext !== "md" && ext !== "mdx") return;
+
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+      setViewSelectionPopover(null);
+      return;
+    }
+
+    const anchor = getWindowSelectionAnchor(fileContent.content);
+    if (!anchor) {
+      setViewSelectionPopover(null);
+      return;
+    }
+
+    const rect = selection.getRangeAt(0).getBoundingClientRect();
+    setViewSelectionPopover({
+      top: rect.top,
+      left: rect.left + rect.width / 2,
+      anchor,
+    });
+  }, [fileContent]);
+
+  useEffect(() => {
+    setCommentAnchor(null);
+    setViewSelectionPopover(null);
+  }, [selectedFile, editing]);
+
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [sidebarTab, setSidebarTab] = useState<SidebarTab>("files");
-  const [selectedIssue, setSelectedIssue] = useState<number | "new" | null>(null);
+  const leftSidebarLayout = useResizablePanelWidth({
+    ...LEFT_SIDEBAR_LAYOUT,
+    edge: "inline-end",
+  });
+  const rightPanelLayout = useResizablePanelWidth({
+    ...RIGHT_PANEL_LAYOUT,
+    edge: "inline-start",
+  });
+  const mdUpLayout = useMdUpLayout();
+  const leftPanelResize = resolveMdUpPanelResize(
+    mdUpLayout,
+    leftSidebarLayout.width,
+    LEFT_SIDEBAR_LAYOUT.minWidth,
+    LEFT_SIDEBAR_LAYOUT.maxWidth,
+    leftSidebarLayout.onResizePointerDown,
+    leftSidebarLayout.applyWidth,
+  );
+  const rightPanelResize = resolveMdUpPanelResize(
+    mdUpLayout,
+    rightPanelLayout.width,
+    RIGHT_PANEL_LAYOUT.minWidth,
+    RIGHT_PANEL_LAYOUT.maxWidth,
+    rightPanelLayout.onResizePointerDown,
+    rightPanelLayout.applyWidth,
+  );
+  const secondaryRightPanelResize =
+    rightPanelResize && showOriginal && fileContent
+      ? panelResizeWithoutHandle(rightPanelResize)
+      : rightPanelResize;
+  const toggleFileInfoPanel = useCallback(() => {
+    setShowFileInfoPanel((prev) => {
+      const next = !prev;
+      if (next) {
+        setShowCommentPanel(false);
+        setCommentAnchor(null);
+      }
+      return next;
+    });
+  }, []);
+  const toggleCommentPanel = useCallback(() => {
+    setShowCommentPanel((prev) => {
+      const next = !prev;
+      if (next) {
+        setShowFileInfoPanel(false);
+      } else {
+        setCommentAnchor(null);
+      }
+      return next;
+    });
+  }, []);
   const [issueListReloadTrigger, setIssueListReloadTrigger] = useState(0);
+  const [issueListBackgroundSyncTrigger, setIssueListBackgroundSyncTrigger] = useState(0);
+  const [optimisticIssue, setOptimisticIssue] = useState<IssueSummary | null>(null);
+  const [optimisticSettleMode, setOptimisticSettleMode] = useState<OptimisticSettleMode>("presence");
   const [newIssueKey, setNewIssueKey] = useState(0);
 
+  const handleIssueCreated = useCallback(
+    (issue: IssueSummary) => {
+      setSidebarTab("issues");
+      setSelectedIssue(issue.number);
+      syncIssueToUrl(issue.number);
+      // 新規作成は一覧未出現 → 番号出現で解除する presence モード（#932）
+      setOptimisticSettleMode("presence");
+      setOptimisticIssue(issue);
+      setIssueListReloadTrigger((key) => key + 1);
+    },
+    [syncIssueToUrl],
+  );
+
+  const handleOptimisticIssueSettled = useCallback((issueNumber: number) => {
+    setOptimisticIssue((current) => (current?.number === issueNumber ? null : current));
+  }, []);
+
+  const handleLabelsMutated = useCallback(() => {
+    setIssueListReloadTrigger((key) => key + 1);
+  }, []);
+
+  const handleIssueExternalChange = useCallback(
+    (issue: IssueDetail, options?: { background?: boolean }) => {
+      if (options?.background) {
+        // IssueList が periodic sync 中は一覧全体を毎周期再取得するため、ここでの追加再取得は
+        // 同一周期内の GET /api/issues 二重 dispatch となる。重複時は抑制する（#932）
+        if (shouldDispatchIssueListBackgroundSync({ issueListSyncing: issueListPeriodicSyncing })) {
+          setIssueListBackgroundSyncTrigger((key) => key + 1);
+        } else {
+          // 背景再取得を抑制している間は、詳細 poll が取得済みの IssueDetail を optimistic merge に
+          // 渡し、追加 GET /api/issues なしで選択中 Issue の一覧行を即時更新する（#945）。
+          // 次の periodic tick が実体を取り込むと snapshot モードの判定で onOptimisticSettled が解除する。
+          setOptimisticSettleMode("snapshot");
+          setOptimisticIssue(issueDetailToSummary(issue));
+        }
+      } else {
+        setIssueListReloadTrigger((key) => key + 1);
+      }
+    },
+    [issueListPeriodicSyncing],
+  );
+
+  // snapshot optimistic は選択中 Issue 専用。別 Issue へ移動したら破棄し、古い行は
+  // IssueList 自前の periodic sync に委ねる（#945 second-pass: スロットの固着回避）
+  useEffect(() => {
+    if (shouldClearOptimisticForSelection(optimisticIssue, optimisticSettleMode, selectedIssue)) {
+      setOptimisticIssue(null);
+    }
+  }, [optimisticIssue, optimisticSettleMode, selectedIssue]);
+
+  usePeriodicSync({
+    enabled: githubSyncEnabled && branchModalOpen,
+    intervalMs: GITHUB_SYNC_POLL_INTERVAL_MS,
+    onSync: () => loadBranches({ background: true }),
+  });
+
+  const openSidebar = useCallback(
+    (tab?: SidebarTab) => {
+      if (tab) {
+        setSidebarTab(tab);
+      } else if (selectedIssue != null && !selectedFile) {
+        setSidebarTab("issues");
+      }
+      setSidebarOpen(true);
+    },
+    [selectedIssue, selectedFile],
+  );
+
   const handleFileSelectResponsive = useCallback(
     (path: string) => {
       handleFileSelect(path);
@@ -645,14 +949,11 @@ export default function MainPage() {
         />
       )}
 
-      {/* Sidebar — fixed drawer on mobile, static on md+ */}
+      {/* Sidebar — fixed drawer on mobile, relative on md+ */}
       <aside
-        className={`
-          fixed inset-y-0 left-0 z-40 w-64 bg-gray-800 border-r border-gray-700 flex flex-col
-          transform transition-transform duration-200 ease-in-out
-          md:static md:translate-x-0
-          ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
-        `}
+        data-testid="left-sidebar"
+        className={`${RESIZABLE_LEFT_SIDEBAR_ASIDE_CLASS} ${sidebarOpen ? "translate-x-0" : "-translate-x-full max-md:rtl:translate-x-full"}`}
+        style={resolvePanelWidthStyle(leftSidebarLayout.width, mdUpLayout)}
       >
         <div className="p-3 border-b border-gray-700 flex items-center justify-between">
           <div className="flex items-center gap-1">
@@ -703,7 +1004,7 @@ export default function MainPage() {
           <button
             type="button"
             onClick={() => setSidebarTab("files")}
-            className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors ${
+            className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-2 sm:py-2 min-h-11 sm:min-h-0 touch-manipulation text-xs font-medium transition-colors ${
               sidebarTab === "files"
                 ? "text-blue-400 border-b-2 border-blue-400"
                 : "text-gray-500 hover:text-gray-300"
@@ -715,7 +1016,7 @@ export default function MainPage() {
           <button
             type="button"
             onClick={() => setSidebarTab("issues")}
-            className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors ${
+            className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-2 sm:py-2 min-h-11 sm:min-h-0 touch-manipulation text-xs font-medium transition-colors ${
               sidebarTab === "issues"
                 ? "text-blue-400 border-b-2 border-blue-400"
                 : "text-gray-500 hover:text-gray-300"
@@ -843,9 +1144,9 @@ export default function MainPage() {
         )}
 
         {sidebarTab === "issues" && (
-          <>
+          <div className="flex-1 min-h-0 flex flex-col">
             {canEdit && (
-              <div className="px-2 pt-2">
+              <div className="px-2 pt-2 shrink-0">
                 <button
                   type="button"
                   onClick={() => {
@@ -853,9 +1154,10 @@ export default function MainPage() {
                     setNewIssueKey((k) => k + 1);
                     setSelectedFile(null);
                     setFileContent(null);
+                    syncIssueToUrl("new");
                     setSidebarOpen(false);
                   }}
-                  className="w-full px-2 py-1.5 rounded flex items-center justify-center gap-1.5 text-xs text-green-300 bg-green-900/20 border border-green-700/40 hover:bg-green-900/40 transition-colors"
+                  className="w-full px-2 py-2.5 sm:py-1.5 min-h-11 sm:min-h-0 touch-manipulation rounded flex items-center justify-center gap-1.5 text-xs text-green-300 bg-green-900/20 border border-green-700/40 hover:bg-green-900/40 transition-colors"
                 >
                   <Plus className="w-3.5 h-3.5" />
                   新規 Issue
@@ -865,15 +1167,32 @@ export default function MainPage() {
             <IssueList
               selectedIssue={typeof selectedIssue === "number" ? selectedIssue : null}
               reloadTrigger={issueListReloadTrigger}
+              backgroundSyncTrigger={issueListBackgroundSyncTrigger}
+              optimisticIssue={optimisticIssue}
+              optimisticSettleMode={optimisticSettleMode}
+              onOptimisticSettled={handleOptimisticIssueSettled}
+              syncEnabled={issueListPeriodicSyncing}
               onSelect={(num) => {
                 setSelectedIssue(num);
                 setSelectedFile(null);
                 setFileContent(null);
                 setEditing(false);
+                syncIssueToUrl(num);
                 setSidebarOpen(false);
               }}
             />
-          </>
+          </div>
+        )}
+        {leftPanelResize && (
+          <PanelResizeHandle
+            edge="inline-end"
+            onPointerDown={leftPanelResize.onPointerDown}
+            width={leftPanelResize.width}
+            minWidth={leftPanelResize.minWidth}
+            maxWidth={leftPanelResize.maxWidth}
+            onWidthChange={leftPanelResize.onWidthChange}
+            ariaLabel="左サイドバーの幅を変更"
+          />
         )}
       </aside>
 
@@ -883,12 +1202,18 @@ export default function MainPage() {
         <div className="border-b border-gray-700 px-2 sm:px-4 py-2 bg-gray-800 flex flex-wrap items-center gap-1.5 sm:gap-2">
           <button
             type="button"
-            onClick={() => setSidebarOpen(true)}
-            className="text-gray-400 hover:text-gray-200 md:hidden shrink-0"
-            title="ファイルツリー"
-            aria-label="ファイルツリー"
+            onClick={() => openSidebar(selectedIssue != null && !selectedFile ? "issues" : undefined)}
+            className="text-gray-400 hover:text-gray-200 md:hidden shrink-0 min-h-11 min-w-11 touch-manipulation flex items-center justify-center rounded hover:bg-gray-700/60"
+            title={selectedIssue != null && !selectedFile ? "Issue 一覧" : "サイドバー"}
+            aria-label={
+              selectedIssue != null && !selectedFile ? "Issue 一覧を開く" : "サイドバーを開く"
+            }
           >
-            <Menu className="w-4 h-4" />
+            {selectedIssue != null && !selectedFile ? (
+              <ArrowLeft className="w-4 h-4" />
+            ) : (
+              <Menu className="w-4 h-4" />
+            )}
           </button>
           <span className="text-sm text-gray-400 flex-1 truncate">
             {selectedFile
@@ -935,7 +1260,7 @@ export default function MainPage() {
           {fileContent && (
             <button
               type="button"
-              onClick={() => setShowFileInfoPanel((v) => !v)}
+              onClick={toggleFileInfoPanel}
               className={`flex items-center gap-1 px-3 py-1 rounded text-sm transition-colors ${
                 showFileInfoPanel
                   ? "bg-gray-600 text-white"
@@ -949,7 +1274,7 @@ export default function MainPage() {
           {fileContent && (
             <button
               type="button"
-              onClick={() => setShowCommentPanel((v) => !v)}
+              onClick={toggleCommentPanel}
               className={`flex items-center gap-1 px-3 py-1 rounded text-sm transition-colors ${
                 showCommentPanel
                   ? "bg-gray-600 text-white"
@@ -982,21 +1307,6 @@ export default function MainPage() {
             error={editSession.error}
             canEdit={canEdit}
             onCreatePr={editSession.createPr}
-            onSubmitPr={editSession.submitPr}
-            onConvertToDraft={editSession.convertToDraft}
-            onDiscardChanges={async () => {
-              const ok = await editSession.discardChanges();
-              if (ok) {
-                setEditing(false);
-                setSelectedFile(null);
-                setFileContent(null);
-                setBaseFileContent(null);
-                setBaseFileError(null);
-                setSearchParams({}, { replace: true });
-                autoSave.reset();
-              }
-              return ok;
-            }}
             onClearError={editSession.clearError}
           />
         )}
@@ -1017,11 +1327,14 @@ export default function MainPage() {
                 <IssueDetailView
                   key={selectedIssue === "new" ? `new-${newIssueKey}` : String(selectedIssue)}
                   issueNumber={selectedIssue}
-                  onCreated={(num) => {
-                    setSelectedIssue(num);
-                    setIssueListReloadTrigger((k) => k + 1);
+                  onCreated={handleIssueCreated}
+                  onLabelsMutated={handleLabelsMutated}
+                  onExternalChange={handleIssueExternalChange}
+                  syncEnabled={githubSyncEnabled}
+                  onClose={() => {
+                    setSelectedIssue(null);
+                    syncIssueToUrl(null);
                   }}
-                  onClose={() => setSelectedIssue(null)}
                 />
               </Suspense>
             )}
@@ -1040,7 +1353,7 @@ export default function MainPage() {
             )}
 
             {fileContent && !fileLoading && !editing && (
-              <div className="p-3 sm:p-6">
+              <div className="p-3 sm:p-6" onMouseUp={handleViewModeSelection}>
                 <FileContentView path={fileContent.path} content={fileContent.content} encoding={fileContent.encoding} />
               </div>
             )}
@@ -1073,6 +1386,8 @@ export default function MainPage() {
                       ydoc={collab.ydoc}
                       provider={collab.provider}
                       collabUser={collabUserStyle}
+                      onCommentAnchor={handleCommentAnchor}
+                      commentHighlights={commentHighlights}
                     />
                   )}
                   {(ext === "csv" || ext === "xlsx" || ext === "xls") && (
@@ -1112,7 +1427,21 @@ export default function MainPage() {
 
           {/* Original content reference panel */}
           {showOriginal && fileContent && (
-            <aside className="absolute inset-0 md:static md:w-96 z-20 border-l border-gray-700 bg-gray-800 flex flex-col shrink-0">
+            <aside
+              className={RESIZABLE_RIGHT_PANEL_ASIDE_CLASS}
+              style={resolvePanelWidthStyle(rightPanelLayout.width, mdUpLayout)}
+            >
+              {rightPanelResize && (
+                <PanelResizeHandle
+                  edge="inline-start"
+                  onPointerDown={rightPanelResize.onPointerDown}
+                  width={rightPanelResize.width}
+                  minWidth={rightPanelResize.minWidth}
+                  maxWidth={rightPanelResize.maxWidth}
+                  onWidthChange={rightPanelResize.onWidthChange}
+                  ariaLabel="参照パネルの幅を変更"
+                />
+              )}
               <div className="flex items-center justify-between px-3 py-2 border-b border-gray-700">
                 <h3 className="text-sm font-semibold text-gray-300">{baseBranch} のソース</h3>
                 <button
@@ -1147,7 +1476,13 @@ export default function MainPage() {
               filePath={selectedFile}
               currentUser={user}
               comments={comments}
-              onClose={() => setShowCommentPanel(false)}
+              pendingAnchor={commentAnchor}
+              onClearAnchor={() => setCommentAnchor(null)}
+              panelResize={secondaryRightPanelResize}
+              onClose={() => {
+                setShowCommentPanel(false);
+                setCommentAnchor(null);
+              }}
             />
           )}
 
@@ -1156,6 +1491,8 @@ export default function MainPage() {
             <FileInfoPanel
               fileContent={fileContent}
               collabUsers={collab.users}
+              panelResize={secondaryRightPanelResize}
+              syncEnabled={githubSyncEnabled}
               onClose={() => setShowFileInfoPanel(false)}
             />
           )}
@@ -1213,6 +1550,14 @@ export default function MainPage() {
         onSelect={handleBranchSelect}
         onRefresh={loadBranches}
       />
+
+      {viewSelectionPopover && !editing && (
+        <CommentSelectionPopover
+          top={viewSelectionPopover.top}
+          left={viewSelectionPopover.left}
+          onAddComment={() => handleCommentAnchor(viewSelectionPopover.anchor)}
+        />
+      )}
     </div>
   );
 }