feat(web): add a setting to share the right panel width across threads

apps/web/src/components/ChatView.tsx

@@ -3955,7 +3955,10 @@ export default function ChatView(props: ChatViewProps) {
         <ChatRightPanel
           sheet={shouldUsePlanSidebarSheet}
           workspaceLayoutElement={workspaceLayoutElement}
-          widthStorageKey={`t3code:preview-panel-width:${activeThreadKey}`}
+          // `undefined` selects the hook's single app-wide key.
+          widthStorageKey={
+            settings.sharedPanelWidth ? undefined : `t3code:preview-panel-width:${activeThreadKey}`
+          }
           sheetAnimationDurationMs={panelAnimationsActive ? panelAnimationDurationMs : 0}
           onCloseSheet={closePreviewPanelStable}
           open={rightPanelOpen}

apps/web/src/components/chat/ChatRightPanel.tsx

@@ -2,11 +2,14 @@ import { usePreviewPanelInlineSize } from "../../hooks/usePreviewPanelInlineSize
 import { RightPanelSheet } from "../RightPanelSheet";
 import { RightPanelTabs, type RightPanelTabsProps } from "../RightPanelTabs";
 
-type ChatRightPanelProps = Omit<RightPanelTabsProps, "mode" | "inlineSize" | "maximized"> & {
+type ChatRightPanelProps = Omit<
+  RightPanelTabsProps,
+  "mode" | "inlineSize" | "maximized" | "widthStorageKey"
+> & {
   readonly sheet: boolean;
   readonly maximized: boolean;
   readonly workspaceLayoutElement: HTMLElement | null;
-  readonly widthStorageKey: string;
+  readonly widthStorageKey: string | undefined;
   readonly sheetAnimationDurationMs: number;
   readonly onCloseSheet: () => void;
 };

apps/web/src/components/settings/AppearanceSettingsPanel.tsx

@@ -257,6 +257,28 @@ export function AppearanceSettingsPanel() {
           }
         />
 
+        <SettingsRow
+          {...searchableSetting("shared-panel-width")}
+          description="Use one right panel width in every thread. When off, each thread keeps its own width."
+          resetAction={
+            settings.sharedPanelWidth !== DEFAULT_UNIFIED_SETTINGS.sharedPanelWidth ? (
+              <SettingResetButton
+                label="shared panel width"
+                onClick={() =>
+                  updateSettings({ sharedPanelWidth: DEFAULT_UNIFIED_SETTINGS.sharedPanelWidth })
+                }
+              />
+            ) : null
+          }
+          control={
+            <Switch
+              checked={settings.sharedPanelWidth}
+              onCheckedChange={(checked) => updateSettings({ sharedPanelWidth: Boolean(checked) })}
+              aria-label="Use the same right panel width in every thread"
+            />
+          }
+        />
+
         <SettingsRow
           {...searchableSetting("chat-width")}
           description="Set how wide messages and the composer can grow on large screens."

apps/web/src/components/settings/SettingsPanels.tsx

@@ -514,6 +514,9 @@ export function useSettingsRestore(onRestored?: () => void) {
     DEFAULT_UNIFIED_SETTINGS.persistComposerContextStrip
       ? ["Composer context"]
       : []),
+    ...(settings.sharedPanelWidth !== DEFAULT_UNIFIED_SETTINGS.sharedPanelWidth
+      ? ["Shared panel width"]
+      : []),
     ...getChangedTypographySettingLabels(settings),
     ...(settings.diffFilesCollapsed !== DEFAULT_UNIFIED_SETTINGS.diffFilesCollapsed
       ? ["Default diff file state"]
@@ -648,6 +651,7 @@ export function useSettingsRestore(onRestored?: () => void) {
       inAppNotificationsEnabled: DEFAULT_UNIFIED_SETTINGS.inAppNotificationsEnabled,
       wordWrap: DEFAULT_UNIFIED_SETTINGS.wordWrap,
       persistComposerContextStrip: DEFAULT_UNIFIED_SETTINGS.persistComposerContextStrip,
+      sharedPanelWidth: DEFAULT_UNIFIED_SETTINGS.sharedPanelWidth,
       diffFilesCollapsed: DEFAULT_UNIFIED_SETTINGS.diffFilesCollapsed,
       diffIgnoreWhitespace: DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace,
       diffLayout: DEFAULT_UNIFIED_SETTINGS.diffLayout,

apps/web/src/components/settings/settingsSearch.ts

@@ -427,6 +427,12 @@ export const SETTINGS_SEARCH_ITEMS = [
     title: "Composer context",
     to: "/settings/appearance",
   },
+  {
+    id: "shared-panel-width",
+    title: "Shared panel width",
+    to: "/settings/appearance",
+    searchTerms: ["right side panel diff changes browser resize size every all threads"],
+  },
   {
     id: "project-grouping",
     title: msg("Project grouping"),

apps/web/src/hooks/useLocalStorage.ts

@@ -157,7 +157,7 @@ export function writeLocalStorageValue<T, E>(
   value: T | ((val: T) => T),
   initialValue: T,
   schema: Schema.Codec<T, E>,
-): void {
+): boolean {
   try {
     let valueToStore: T;
     if (typeof value === "function") {
@@ -186,8 +186,10 @@ export function writeLocalStorageValue<T, E>(
       setLocalStorageItem(key, valueToStore, schema);
     }
     dispatchLocalStorageChange(key);
+    return true;
   } catch (error) {
     console.error("[LOCALSTORAGE] Could not update stored value.", error);
+    return false;
   }
 }
 

apps/web/src/hooks/useResizableWidth.browser.test.tsx

@@ -21,6 +21,13 @@ function Panel({ defaultWidth }: { defaultWidth: number }) {
   );
 }
 
+function dragLeftBy(handle: Element, distance: number) {
+  const init = { bubbles: true, button: 0, pointerId: 1 };
+  handle.dispatchEvent(new PointerEvent("pointerdown", { ...init, clientX: 500 }));
+  handle.dispatchEvent(new PointerEvent("pointermove", { ...init, clientX: 500 - distance }));
+  handle.dispatchEvent(new PointerEvent("pointerup", { ...init, clientX: 500 - distance }));
+}
+
 describe("useResizableWidth", () => {
   it("follows a responsive default until the user saves a width", async () => {
     const previous = localStorage.getItem(STORAGE_KEY);
@@ -82,4 +89,42 @@ describe("useResizableWidth", () => {
       else localStorage.setItem(STORAGE_KEY, previous);
     }
   });
+
+  it("follows a width another tab stores under the same key", async () => {
+    using _storage = { [Symbol.dispose]: () => localStorage.removeItem(STORAGE_KEY) };
+    // This hook only needs browser storage and React; no navigation is involved.
+    await using screen = await render(<Panel defaultWidth={400} />, { router: false });
+    await expect.element(screen.getByText("400")).toBeInTheDocument();
+
+    // Another tab's write reaches this one only as a storage event.
+    await act(() => {
+      localStorage.setItem(STORAGE_KEY, "500");
+      window.dispatchEvent(new StorageEvent("storage", { key: STORAGE_KEY }));
+    });
+    await expect.element(screen.getByText("500")).toBeInTheDocument();
+  });
+
+  it("keeps a width storage rejected for the next drag and a new default", async () => {
+    using _storage = { [Symbol.dispose]: () => localStorage.removeItem(STORAGE_KEY) };
+    // This hook only needs browser storage and React; no navigation is involved.
+    await using screen = await render(<Panel defaultWidth={400} />, { router: false });
+    // Synthetic pointer ids are not active pointers, so the browser would reject capture.
+    using _capture = vi
+      .spyOn(HTMLElement.prototype, "setPointerCapture")
+      .mockImplementation(() => {});
+    using _write = vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new DOMException("Storage is full.", "QuotaExceededError");
+    });
+    using _log = vi.spyOn(console, "error").mockImplementation(() => {});
+    const handle = screen.getByRole("separator").element();
+
+    await act(() => dragLeftBy(handle, 100));
+    await expect.element(screen.getByText("500")).toBeInTheDocument();
+
+    await act(() => dragLeftBy(handle, 50));
+    await expect.element(screen.getByText("550")).toBeInTheDocument();
+
+    await screen.rerender(<Panel defaultWidth={200} />);
+    await expect.element(screen.getByText("550")).toBeInTheDocument();
+  });
 });

apps/web/src/hooks/useResizableWidth.ts

@@ -1,11 +1,12 @@
 import * as Schema from "effect/Schema";
 import { type PointerEvent as ReactPointerEvent, useLayoutEffect, useState } from "react";
 
-import { getLocalStorageItem, setLocalStorageItem } from "./useLocalStorage";
+import { useLocalStorage, writeLocalStorageValue } from "./useLocalStorage";
 import { useResizeDrag } from "./useResizeDrag";
 import { useStableCallback } from "./useStableCallback";
 
-const WidthSchema = Schema.Finite;
+// Null while no width is saved, so an unsaved width survives a responsive default changing.
+const StoredWidthSchema = Schema.NullOr(Schema.Finite);
 
 /** The host must size itself from this custom property. */
 export const RESIZABLE_WIDTH_PROPERTY = "--resizable-width";
@@ -40,34 +41,26 @@ export function useResizableWidth(options: UseResizableWidthOptions): {
     return Math.max(minWidth, Math.min(maxWidth, value));
   };
 
-  const readWidth = (): number | null => {
-    if (typeof window === "undefined") return null;
-    try {
-      const stored = getLocalStorageItem(storageKey, WidthSchema);
-      return stored === null ? null : clamp(stored);
-    } catch (error) {
-      console.error("Could not read persisted panel width.", error);
-      return null;
-    }
-  };
-  const [widthState, setWidthState] = useState(() => ({ storageKey, width: readWidth() }));
-  if (widthState.storageKey !== storageKey) {
-    setWidthState({ storageKey, width: readWidth() });
-  }
-
-  const clampedWidth = clamp(widthState.width ?? defaultWidth);
+  // Panels that share a key follow each other's drags, in this tab and in others.
+  const [storedWidth] = useLocalStorage(storageKey, null, StoredWidthSchema);
+  // Resizing remains usable for this session when browser storage is unavailable.
+  const [unsaved, setUnsaved] = useState<{
+    readonly storageKey: string;
+    readonly storedWidth: number | null;
+    readonly width: number;
+  } | null>(null);
+  const clampedWidth = clamp(
+    unsaved?.storageKey === storageKey && unsaved.storedWidth === storedWidth
+      ? unsaved.width
+      : (storedWidth ?? defaultWidth),
+  );
   const restoreWidth = useStableCallback((host: HTMLElement | null) => {
     host?.style.setProperty(RESIZABLE_WIDTH_PROPERTY, `${clampedWidth}px`);
   });
 
   const commitWidth = (nextStorageKey: string, nextWidth: number) => {
-    // Resizing remains usable for this session when browser storage is unavailable.
-    setWidthState({ storageKey: nextStorageKey, width: nextWidth });
-    try {
-      setLocalStorageItem(nextStorageKey, nextWidth, WidthSchema);
-    } catch (error) {
-      console.error("Could not persist panel width.", error);
-    }
+    const saved = writeLocalStorageValue(nextStorageKey, nextWidth, null, StoredWidthSchema);
+    setUnsaved(saved ? null : { storageKey: nextStorageKey, storedWidth, width: nextWidth });
   };
 
   const drag = useResizeDrag<HTMLElement>((event) => {

packages/contracts/src/settings.ts

@@ -499,6 +499,7 @@ export const ClientSettingsSchema = Schema.Struct({
   persistComposerContextStrip: Schema.Boolean.pipe(
     Schema.withDecodingDefault(Effect.succeed(false)),
   ),
+  sharedPanelWidth: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
 
   favorites: ModelFavorites.pipe(Schema.withDecodingDefault(Effect.succeed([]))),
   providerModelPreferences: ProviderModelPreferences.pipe(
@@ -2039,6 +2040,7 @@ export const ClientSettingsPatch = Schema.Struct({
   fontFamilyTerminal: Schema.optionalKey(FontFamilyPreference),
   fontSmoothing: Schema.optionalKey(Schema.Boolean),
   persistComposerContextStrip: Schema.optionalKey(Schema.Boolean),
+  sharedPanelWidth: Schema.optionalKey(Schema.Boolean),
   favorites: Schema.optionalKey(ModelFavorites),
   providerModelPreferences: Schema.optionalKey(ProviderModelPreferences),
   pullRequestMergeMethodOverrides: Schema.optionalKey(