Diff panel: per-thread state, full-width toggle, and per-file collapse

Move diff-panel UI state from URL search params and component-local
useState into the Zustand UI store. State that is meaningful per
thread is keyed by scopedThreadKey so two threads can have different
diff panels open / expanded / collapsed independently. Wider state
(render mode, line wrap) lives in the store globally so it survives
the remount that expand/collapse causes.

Per-thread (persisted to localStorage):
- diff panel open/closed (replaces ?diff=1 in URL)
- full-width vs split-pane (new toolbar toggle)
- per-file collapse (new chevron on each file header)

Global session (in store, not persisted to disk):
- render mode (split/stacked)
- line wrap, hydrated once from settings.diffWordWrap

The per-file collapse swaps the FileDiff out for a small
CollapsedFileHeader rather than hiding content via CSS — the
library's Virtualizer reserves vertical space from hunk metadata, so
a CSS hide leaves a tall empty box and triggers ResizeObserver
thrashing during scroll. The collapsed header inlines the same
change-type SVG paths the library renders inside its shadow DOM so
the new/modified/deleted/renamed icon is identical between collapsed
and expanded views.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: AfzalH

apps/web/src/components/ChatView.tsx

@@ -36,14 +36,14 @@ import { projectScriptCwd, projectScriptRuntimeEnv } from "@t3tools/shared/proje
 import { truncate } from "@t3tools/shared/String";
 import { Debouncer } from "@tanstack/react-pacer";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { useShallow } from "zustand/react/shallow";
 import { useGitStatus } from "~/lib/gitStatusState";
 import { usePrimaryEnvironmentId } from "../environments/primary";
 import { readEnvironmentApi } from "../environmentApi";
 import { isElectron } from "../env";
 import { readLocalApi } from "../localApi";
-import { parseDiffRouteSearch, stripDiffSearchParams } from "../diffRouteSearch";
+import { stripDiffSearchParams } from "../diffRouteSearch";
 import {
   collapseExpandedComposerCursor,
   parseStandaloneComposerSlashCommand,
@@ -620,10 +620,6 @@ export default function ChatView(props: ChatViewProps) {
   const timestampFormat = settings.timestampFormat;
   const autoOpenPlanSidebar = settings.autoOpenPlanSidebar;
   const navigate = useNavigate();
-  const rawSearch = useSearch({
-    strict: false,
-    select: (params) => parseDiffRouteSearch(params),
-  });
   const { resolvedTheme } = useTheme();
   // Granular store selectors — avoid subscribing to prompt changes.
   const composerRuntimeMode = useComposerDraftStore(
@@ -794,13 +790,16 @@ export default function ChatView(props: ChatViewProps) {
     composerInteractionMode ?? activeThread?.interactionMode ?? DEFAULT_INTERACTION_MODE;
   const isLocalDraftThread = !isServerThread && localDraftThread !== undefined;
   const canCheckoutPullRequestIntoThread = isLocalDraftThread;
-  const diffOpen = rawSearch.diff === "1";
   const activeThreadId = activeThread?.id ?? null;
   const activeThreadRef = useMemo(
     () => (activeThread ? scopeThreadRef(activeThread.environmentId, activeThread.id) : null),
     [activeThread],
   );
   const activeThreadKey = activeThreadRef ? scopedThreadKey(activeThreadRef) : null;
+  const diffOpen = useUiStateStore((store) =>
+    activeThreadKey ? store.threadDiffOpenById[activeThreadKey] === true : false,
+  );
+  const setThreadDiffOpen = useUiStateStore((store) => store.setThreadDiffOpen);
   const existingOpenTerminalThreadKeys = useMemo(() => {
     const existingThreadKeys = new Set<string>([...serverThreadKeys, ...draftThreadKeys]);
     return openTerminalThreadKeys.filter((nextThreadKey) => existingThreadKeys.has(nextThreadKey));
@@ -1498,25 +1497,14 @@ export default function ChatView(props: ChatViewProps) {
     [keybindings, nonTerminalShortcutLabelOptions],
   );
   const onToggleDiff = useCallback(() => {
-    if (!isServerThread) {
+    if (!isServerThread || !activeThreadKey) {
       return;
     }
     if (!diffOpen) {
       onDiffPanelOpen?.();
     }
-    void navigate({
-      to: "/$environmentId/$threadId",
-      params: {
-        environmentId,
-        threadId,
-      },
-      replace: true,
-      search: (previous) => {
-        const rest = stripDiffSearchParams(previous);
-        return diffOpen ? { ...rest, diff: undefined } : { ...rest, diff: "1" };
-      },
-    });
-  }, [diffOpen, environmentId, isServerThread, navigate, onDiffPanelOpen, threadId]);
+    setThreadDiffOpen(activeThreadKey, !diffOpen);
+  }, [activeThreadKey, diffOpen, isServerThread, onDiffPanelOpen, setThreadDiffOpen]);
 
   const envLocked = Boolean(
     activeThread &&
@@ -3237,10 +3225,11 @@ export default function ChatView(props: ChatViewProps) {
   }, []);
   const onOpenTurnDiff = useCallback(
     (turnId: TurnId, filePath?: string) => {
-      if (!isServerThread) {
+      if (!isServerThread || !activeThreadKey) {
         return;
       }
       onDiffPanelOpen?.();
+      setThreadDiffOpen(activeThreadKey, true);
       void navigate({
         to: "/$environmentId/$threadId",
         params: {
@@ -3250,12 +3239,20 @@ export default function ChatView(props: ChatViewProps) {
         search: (previous) => {
           const rest = stripDiffSearchParams(previous);
           return filePath
-            ? { ...rest, diff: "1", diffTurnId: turnId, diffFilePath: filePath }
-            : { ...rest, diff: "1", diffTurnId: turnId };
+            ? { ...rest, diffTurnId: turnId, diffFilePath: filePath }
+            : { ...rest, diffTurnId: turnId };
         },
       });
     },
-    [environmentId, isServerThread, navigate, onDiffPanelOpen, threadId],
+    [
+      activeThreadKey,
+      environmentId,
+      isServerThread,
+      navigate,
+      onDiffPanelOpen,
+      setThreadDiffOpen,
+      threadId,
+    ],
   );
   // Both the Map and the revert handler are read from refs at call-time so
   // the callback reference is fully stable and never busts context identity.