| author |  Leonel Rivas <encriptandost@gmail.com> 2026-08-08 14:02:51-07:00 |
| committer |  GitHub <noreply@github.com> 2026-08-08 17:02:51-04:00 |
| log | 89ee692bf0436505d008c1d70215e70836eba4e2 |
| tree | 4cdc065aa2725df741f2ff3dc7954193cd9b45a7 |
| parent | a20923ce463335e89e92f5983d98a180536e8e7d |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): persist diff view mode (#5731)
3 files changed, 36 insertions(+), 3 deletions(-)
apps
web
src
apps/web/src/components/DiffPanel.tsx+2-2
| ... | ... | @@ -76,7 +76,6 @@ import { reviewEnvironment } from "../state/review"; |
| 76 | 76 | import { vcsEnvironment } from "../state/vcs"; |
| 77 | 77 | import { buildBaseRefChoices, filterBaseRefChoices } from "../lib/baseRefChoices"; |
| 78 | 78 | |
| 79 | type DiffRenderMode = "stacked" | "split"; | |
| 80 | 79 | type DiffThemeType = "light" | "dark"; |
| 81 | 80 | const AUTOMATIC_BASE_REF = "__automatic_base_ref__"; |
| 82 | 81 | |
| ... | ... | @@ -312,7 +311,8 @@ export default function DiffPanel({ |
| 312 | 311 | const { resolvedTheme } = useTheme(); |
| 313 | 312 | const settings = useClientSettings(); |
| 314 | 313 | const [initialGitScope] = useState(initialGitScopeProp); |
| 315 | const [diffRenderMode, setDiffRenderMode] = useState<DiffRenderMode>("stacked"); | |
| 314 | const diffRenderMode = useDiffPanelStore((state) => state.diffRenderMode); | |
| 315 | const setDiffRenderMode = useDiffPanelStore((state) => state.setDiffRenderMode); | |
| 316 | 316 | const [wordWrap, setWordWrap] = useState(settings.wordWrap); |
| 317 | 317 | const [diffIgnoreWhitespace, setDiffIgnoreWhitespace] = useState(settings.diffIgnoreWhitespace); |
| 318 | 318 | const [baseRefQuery, setBaseRefQuery] = useState(""); |
apps/web/src/diffPanelStore.test.ts+27-1
| ... | ... | @@ -7,7 +7,33 @@ import { selectThreadDiffPanelSelection, useDiffPanelStore } from "./diffPanelSt |
| 7 | 7 | const THREAD_REF = scopeThreadRef(EnvironmentId.make("environment-1"), ThreadId.make("thread-1")); |
| 8 | 8 | |
| 9 | 9 | describe("diffPanelStore", () => { |
| 10 | beforeEach(() => useDiffPanelStore.setState({ byThreadKey: {}, branchBaseRefByThreadKey: {} })); | |
| 10 | beforeEach(() => | |
| 11 | useDiffPanelStore.setState({ | |
| 12 | byThreadKey: {}, | |
| 13 | branchBaseRefByThreadKey: {}, | |
| 14 | diffRenderMode: "stacked", | |
| 15 | }), | |
| 16 | ); | |
| 17 | ||
| 18 | it("keeps the selected render mode in panel and persisted state", async () => { | |
| 19 | useDiffPanelStore.getState().setDiffRenderMode("split"); | |
| 20 | ||
| 21 | expect(useDiffPanelStore.getState().diffRenderMode).toBe("split"); | |
| 22 | expect( | |
| 23 | useDiffPanelStore.persist.getOptions().partialize?.(useDiffPanelStore.getState()), | |
| 24 | ).toMatchObject({ diffRenderMode: "split" }); | |
| 25 | ||
| 26 | const { name, storage } = useDiffPanelStore.persist.getOptions(); | |
| 27 | if (!name) throw new Error("Expected diff panel persistence to have a storage name"); | |
| 28 | const persisted = await storage?.getItem(name); | |
| 29 | expect(persisted?.state).toMatchObject({ diffRenderMode: "split" }); | |
| 30 | ||
| 31 | useDiffPanelStore.setState({ diffRenderMode: "stacked" }); | |
| 32 | if (persisted) await storage?.setItem(name, persisted); | |
| 33 | await useDiffPanelStore.persist.rehydrate(); | |
| 34 | ||
| 35 | expect(useDiffPanelStore.getState().diffRenderMode).toBe("split"); | |
| 36 | }); | |
| 11 | 37 | |
| 12 | 38 | it("defaults each thread to branch changes when the working tree is clean", () => { |
| 13 | 39 | expect( |
apps/web/src/diffPanelStore.ts+7
| ... | ... | @@ -10,12 +10,16 @@ export type DiffPanelSelection = |
| 10 | 10 | | { kind: "unstaged" } |
| 11 | 11 | | { kind: "turn"; turnId: TurnId; filePath: string | null; revealRequestId: number }; |
| 12 | 12 | |
| 13 | export type DiffRenderMode = "stacked" | "split"; | |
| 14 | ||
| 13 | 15 | const DEFAULT_SELECTION: DiffPanelSelection = { kind: "branch", baseRef: null }; |
| 14 | 16 | const DEFAULT_WORKING_TREE_SELECTION: DiffPanelSelection = { kind: "unstaged" }; |
| 15 | 17 | |
| 16 | 18 | interface DiffPanelStoreState { |
| 17 | 19 | byThreadKey: Record<string, DiffPanelSelection>; |
| 18 | 20 | branchBaseRefByThreadKey: Record<string, string | null>; |
| 21 | diffRenderMode: DiffRenderMode; | |
| 22 | setDiffRenderMode: (mode: DiffRenderMode) => void; | |
| 19 | 23 | selectGitScope: (ref: ScopedThreadRef, scope: "branch" | "unstaged") => void; |
| 20 | 24 | selectBranchBaseRef: (ref: ScopedThreadRef, baseRef: string | null) => void; |
| 21 | 25 | selectTurn: (ref: ScopedThreadRef, turnId: TurnId, filePath?: string) => void; |
| ... | ... | @@ -33,6 +37,8 @@ export const useDiffPanelStore = create<DiffPanelStoreState>()( |
| 33 | 37 | (set) => ({ |
| 34 | 38 | byThreadKey: {}, |
| 35 | 39 | branchBaseRefByThreadKey: {}, |
| 40 | diffRenderMode: "stacked", | |
| 41 | setDiffRenderMode: (diffRenderMode) => set({ diffRenderMode }), | |
| 36 | 42 | selectGitScope: (ref, scope) => |
| 37 | 43 | set((state) => { |
| 38 | 44 | const threadKey = scopedThreadKey(ref); |
| ... | ... | @@ -126,6 +132,7 @@ export const useDiffPanelStore = create<DiffPanelStoreState>()( |
| 126 | 132 | partialize: (state) => ({ |
| 127 | 133 | byThreadKey: state.byThreadKey, |
| 128 | 134 | branchBaseRefByThreadKey: state.branchBaseRefByThreadKey, |
| 135 | diffRenderMode: state.diffRenderMode, | |
| 129 | 136 | }), |
| 130 | 137 | }, |
| 131 | 138 | ), |