UI state: Persist preview open

Track the state of whether the preview panel is open in a separate UI state variable, that is persisted alongside the selection.

The preview state is not completely disjointed from the selection (you cannot select one thing and preview another within the context of a stack).

Author: estib-vega

apps/desktop/src/components/BranchCommitList.svelte

@@ -111,7 +111,7 @@
 		if (currentSelection?.commitId === commitId && currentSelection?.branchName === branchName) {
 			laneState.selection.set(undefined);
 		} else {
-			laneState.selection.set({ branchName, commitId, upstream });
+			laneState.selection.set({ branchName, commitId, upstream, previewOpen: true });
 		}
 		projectState.stackId.set(stackId);
 		onselect?.();
@@ -330,7 +330,10 @@
 								stackId,
 								$runHooks,
 								dzCommit,
-								(newId) => uiState.lane(stackId).selection.set({ branchName, commitId: newId }),
+								(newId) => {
+									const previewOpen = selection.current?.previewOpen ?? false;
+									uiState.lane(stackId).selection.set({ branchName, commitId: newId, previewOpen });
+								},
 								uiState
 							)
 						: undefined}

apps/desktop/src/components/BranchList.svelte

@@ -74,7 +74,7 @@
 	}
 
 	function startEditingCommitMessage(branchName: string, commitId: string) {
-		laneState.selection.set({ branchName, commitId });
+		laneState.selection.set({ branchName, commitId, previewOpen: true });
 		projectState.exclusiveAction.set({
 			type: 'edit-commit-message',
 			stackId,
@@ -110,7 +110,7 @@
 		if (selectedCommit && selectedCommit.result.status === QueryStatus.rejected) {
 			const branchName = selection.current?.branchName;
 			if (branchName) {
-				selection.set({ branchName, commitId: undefined });
+				selection.set({ branchName, commitId: undefined, previewOpen: false });
 			}
 		}
 	});
@@ -214,7 +214,7 @@
 						if (currentSelection?.branchName === branchName && !currentSelection?.commitId) {
 							uiState.lane(laneId).selection.set(undefined);
 						} else {
-							uiState.lane(laneId).selection.set({ branchName });
+							uiState.lane(laneId).selection.set({ branchName, previewOpen: true });
 						}
 						onselect?.();
 					}}

apps/desktop/src/components/BranchView.svelte

@@ -161,7 +161,11 @@
 										onclick={() => {
 											// Open commit preview by setting selection
 											const laneState = uiState.lane(laneId);
-											laneState.selection.set({ branchName, commitId: commit.id });
+											laneState.selection.set({
+												branchName,
+												commitId: commit.id,
+												previewOpen: true
+											});
 										}}
 									/>
 								{/each}

apps/desktop/src/components/CommitView.svelte

@@ -117,7 +117,9 @@
 			message: commitMessage
 		});
 
-		uiState.lane(ensureValue(stackId)).selection.set({ branchName, commitId: newCommitId });
+		uiState
+			.lane(ensureValue(stackId))
+			.selection.set({ branchName, commitId: newCommitId, previewOpen: true });
 		setMode('view');
 	}
 

apps/desktop/src/components/FeedItemKind.svelte

@@ -33,7 +33,8 @@
 		const laneState = uiState.lane(stackId);
 		laneState.selection.set({
 			branchName,
-			commitId
+			commitId,
+			previewOpen: true
 		});
 		projectState.stackId.set(stackId);
 	}
@@ -42,7 +43,8 @@
 		const projectState = uiState.project(projectId);
 		const laneState = uiState.lane(stackId);
 		laneState.selection.set({
-			branchName
+			branchName,
+			previewOpen: true
 		});
 		projectState.stackId.set(stackId);
 	}

apps/desktop/src/components/FileContextMenu.svelte

@@ -177,8 +177,9 @@
 		idSelection.removeMany(selectedFiles);
 
 		if (newCommitId && branchName) {
+			const previewOpen = uiState.lane(stackId).selection.current?.previewOpen ?? false;
 			// Update the selection to the new commit
-			uiState.lane(stackId).selection.set({ branchName, commitId: newCommitId });
+			uiState.lane(stackId).selection.set({ branchName, commitId: newCommitId, previewOpen });
 		}
 		contextMenu.close();
 	}

apps/desktop/src/components/StackView.svelte

@@ -59,8 +59,6 @@
 
 	let lanesSrollableEl = $state<HTMLDivElement>();
 
-	let isDetailsViewForcesClosed = $state(false);
-
 	const stackService = inject(STACK_SERVICE);
 	const diffService = inject(DIFF_SERVICE);
 	const uncommittedService = inject(UNCOMMITTED_SERVICE);
@@ -106,6 +104,7 @@
 	const commitId = $derived(selection.current?.commitId);
 	const branchName = $derived(selection.current?.branchName);
 	const upstream = $derived(selection.current?.upstream);
+	const previewOpen = $derived(selection.current?.previewOpen);
 
 	const activeSelectionId: SelectionId | undefined = $derived.by(() => {
 		if (commitId) {
@@ -232,8 +231,10 @@
 	}
 
 	function onclosePreviewOnly() {
-		// Close the details view but keep the selection intact
-		isDetailsViewForcesClosed = true;
+		const source = selection.current;
+		if (source) {
+			selection.set({ ...source, previewOpen: false });
+		}
 	}
 
 	const startCommitVisible = $derived(uncommittedService.startCommitVisible(stackId));
@@ -258,32 +259,9 @@
 	}
 
 	let isDetailsViewOpen = $derived(
-		!!(branchName || commitId || assignedKey || selectedFile) && !isDetailsViewForcesClosed
+		(!!(branchName || commitId || selectedFile) && previewOpen) || !!assignedKey
 	);
 
-	// Track the current selection to detect when it changes
-	let previousSelection = $state<{ branchName?: string; commitId?: string }>({});
-
-	// Reset the forced closed state when selection changes to a different branch/commit
-	$effect(() => {
-		const currentSelection = { branchName, commitId };
-
-		// Check if selection actually changed
-		if (
-			currentSelection.branchName !== previousSelection.branchName ||
-			currentSelection.commitId !== previousSelection.commitId
-		) {
-			// Selection changed, allow details view to open again
-			isDetailsViewForcesClosed = false;
-			previousSelection = { ...currentSelection };
-
-			// Clear file selections from the previous context to allow auto-selection
-			// to work properly for the new context
-			if (activeSelectionId) {
-				idSelection.clear(activeSelectionId);
-			}
-		}
-	});
 	const DETAILS_RIGHT_PADDING_REM = 1.125;
 
 	// Function to update CSS custom property for details view width

apps/desktop/src/lib/stacks/macros.ts

@@ -40,7 +40,8 @@ export default class StackMacros {
 		if (outcome.newCommit) {
 			this.uiState.lane(stack.id).selection.set({
 				branchName,
-				commitId: outcome.newCommit
+				commitId: outcome.newCommit,
+				previewOpen: true
 			});
 
 			this.uiState.project(this.projectId).stackId.set(stack.id);
@@ -116,9 +117,12 @@ export default class StackMacros {
 			throw new Error('No new commit id found for the moved changes');
 		}
 
+		const previewOpen =
+			this.uiState.lane(destinationStackId).selection.current?.previewOpen ?? false;
 		this.uiState.lane(destinationStackId).selection.set({
 			branchName,
-			commitId: newCommitId
+			commitId: newCommitId,
+			previewOpen
 		});
 		this.uiState.project(this.projectId).stackId.set(destinationStackId);
 	}

apps/desktop/src/lib/stacks/stackService.svelte.ts

@@ -726,8 +726,10 @@ export class StackService {
 			},
 			onError: (_, args) => {
 				const state = this.uiState.lane(args.laneId);
+				const previewOpen = state.selection.current?.previewOpen ?? false;
 				state.selection.set({
-					branchName: args.branchName
+					branchName: args.branchName,
+					previewOpen
 				});
 			}
 		});

apps/desktop/src/lib/state/uiState.svelte.ts

@@ -19,6 +19,7 @@ export type StackSelection = {
 	branchName: string;
 	commitId?: string;
 	upstream?: boolean;
+	previewOpen: boolean;
 };
 
 export type NewCommitMessage = {
@@ -403,7 +404,8 @@ function updateStackSelection(uiState: UiState, stackId: string, details: StackD
 	// If the selected commit is not in the branch, clear the commit selection
 	if (!selection.upstream && !branchCommitIds.includes(selection.commitId)) {
 		laneState.selection.set({
-			branchName: selection.branchName
+			branchName: selection.branchName,
+			previewOpen: false
 		});
 
 		return;
@@ -415,7 +417,8 @@ function updateStackSelection(uiState: UiState, stackId: string, details: StackD
 	// If the selection is for an upstream commit and the commit is not in the upstream commits, clear the selection
 	if (selection.upstream && !upstreamCommitIds.includes(selection.commitId)) {
 		laneState.selection.set({
-			branchName: selection.branchName
+			branchName: selection.branchName,
+			previewOpen: false
 		});
 
 		return;