Close preview without clearing selection. Toggle preview on click. (#10425)

PavelLaptev · web-flow · commit 30a369d5f552 · 2025-09-26T08:45:12.000Z
* feat(selection): add clearPreview to clear only the preview pane

* don't clear selection for commits and branches

* feat(selection): add toggle behavior to list selection and pass click flag

* feat(ui): clear source lane when dropping commits

to prevent auto-opening

* feat(ui): add allowUnselect prop to file lists to control deselection behavior

* fix(stack): reset previous id on context change for auto-sele
diff --git a/apps/desktop/src/components/BranchCard.svelte b/apps/desktop/src/components/BranchCard.svelte
@@ -154,7 +154,7 @@
 >
 	{#if args.type === 'stack-branch'}
 		{@const moveHandler = args.stackId
-			? new MoveCommitDzHandler(stackService, args.stackId, projectId)
+			? new MoveCommitDzHandler(stackService, args.stackId, projectId, uiState)
 			: undefined}
 		{#if !args.prNumber && args.stackId}
 			<PrNumberUpdater {projectId} stackId={args.stackId} {branchName} />
diff --git a/apps/desktop/src/components/BranchCommitList.svelte b/apps/desktop/src/components/BranchCommitList.svelte
@@ -106,7 +106,11 @@
 	let integrationModal = $state<Modal>();
 
 	async function handleCommitClick(commitId: string, upstream: boolean) {
-		if (selectedCommitId !== commitId) {
+		const currentSelection = laneState.selection.current;
+		// Toggle: if this exact commit is already selected, clear the selection
+		if (currentSelection?.commitId === commitId && currentSelection?.branchName === branchName) {
+			laneState.selection.set(undefined);
+		} else {
 			laneState.selection.set({ branchName, commitId, upstream });
 		}
 		projectState.stackId.set(stackId);
diff --git a/apps/desktop/src/components/BranchList.svelte b/apps/desktop/src/components/BranchList.svelte
@@ -186,7 +186,13 @@
 					trackingBranch={branch.remoteTrackingBranch ?? undefined}
 					readonly={!!branch.remoteTrackingBranch}
 					onclick={() => {
-						uiState.lane(laneId).selection.set({ branchName });
+						const currentSelection = uiState.lane(laneId).selection.current;
+						// Toggle: if this branch is already selected, clear the selection
+						if (currentSelection?.branchName === branchName && !currentSelection?.commitId) {
+							uiState.lane(laneId).selection.set(undefined);
+						} else {
+							uiState.lane(laneId).selection.set({ branchName });
+						}
 						onselect?.();
 					}}
 				>
diff --git a/apps/desktop/src/components/ChangedFiles.svelte b/apps/desktop/src/components/ChangedFiles.svelte
@@ -29,6 +29,7 @@
 		autoselect?: boolean;
 		ancestorMostConflictedCommitId?: string;
 		ontoggle?: (collapsed: boolean) => void;
+		allowUnselect?: boolean;
 	};
 
 	const {
@@ -46,7 +47,8 @@
 		resizer,
 		autoselect,
 		ancestorMostConflictedCommitId,
-		ontoggle
+		ontoggle,
+		allowUnselect = true
 	}: Props = $props();
 
 	const idSelection = inject(FILE_SELECTION_MANAGER);
@@ -91,6 +93,7 @@
 				{conflictEntries}
 				{draggableFiles}
 				{ancestorMostConflictedCommitId}
+				{allowUnselect}
 				hideLastFileBorder={false}
 			/>
 		{:else}
diff --git a/apps/desktop/src/components/FileList.svelte b/apps/desktop/src/components/FileList.svelte
@@ -37,6 +37,7 @@
 		ancestorMostConflictedCommitId?: string;
 		hideLastFileBorder?: boolean;
 		onselect?: (change: TreeChange) => void;
+		allowUnselect?: boolean;
 	};
 
 	const {
@@ -50,7 +51,8 @@
 		draggableFiles,
 		ancestorMostConflictedCommitId,
 		hideLastFileBorder = true,
-		onselect
+		onselect,
+		allowUnselect = true
 	}: Props = $props();
 
 	const focusManager = inject(FOCUS_MANAGER);
@@ -181,7 +183,17 @@
 	function handleKeyDown(change: TreeChange, idx: number, e: KeyboardEvent) {
 		if (e.key === 'Enter' || e.key === ' ' || e.key === 'l') {
 			e.stopPropagation();
-			selectFilesInList(e, change, changes, idSelection, selectedFileIds, true, idx, selectionId);
+			selectFilesInList(
+				e,
+				change,
+				changes,
+				idSelection,
+				selectedFileIds,
+				true,
+				idx,
+				selectionId,
+				allowUnselect
+			);
 			onselect?.(change);
 			return true;
 		}
@@ -250,7 +262,17 @@
 		}}
 		onclick={(e) => {
 			e.stopPropagation();
-			selectFilesInList(e, change, changes, idSelection, selectedFileIds, true, idx, selectionId);
+			selectFilesInList(
+				e,
+				change,
+				changes,
+				idSelection,
+				selectedFileIds,
+				true,
+				idx,
+				selectionId,
+				allowUnselect
+			);
 			onselect?.(change);
 		}}
 		{conflictEntries}
diff --git a/apps/desktop/src/components/SnapshotCard.svelte b/apps/desktop/src/components/SnapshotCard.svelte
@@ -225,6 +225,7 @@
 								listMode="list"
 								hideLastFileBorder={false}
 								onselect={(change) => onDiffClick(change.path)}
+								allowUnselect={false}
 							/>
 						</ScrollableContainer>
 					</SnapshotAttachment>
diff --git a/apps/desktop/src/components/StackView.svelte b/apps/desktop/src/components/StackView.svelte
@@ -59,6 +59,8 @@
 
 	let lanesSrollableEl = $state<HTMLDivElement>();
 
+	let isDetailsViewForcesClosed = $state(false);
+
 	const stackService = inject(STACK_SERVICE);
 	const diffService = inject(DIFF_SERVICE);
 	const uncommittedService = inject(UNCOMMITTED_SERVICE);
@@ -229,6 +231,11 @@
 		selection.set(undefined);
 	}
 
+	function onclosePreviewOnly() {
+		// Close the details view but keep the selection intact
+		isDetailsViewForcesClosed = true;
+	}
+
 	const startCommitVisible = $derived(uncommittedService.startCommitVisible(stackId));
 
 	function onerror(err: unknown) {
@@ -250,7 +257,33 @@
 		return undefined;
 	}
 
-	let isDetailsViewOpen = $derived(!!(branchName || commitId || assignedKey || selectedFile));
+	let isDetailsViewOpen = $derived(
+		!!(branchName || commitId || assignedKey || selectedFile) && !isDetailsViewForcesClosed
+	);
+
+	// 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
@@ -299,7 +332,7 @@
 		scrollContainer={selectionPreviewScrollContainer}
 		selectionId={createWorktreeSelection({ stackId })}
 		onclose={() => {
-			idSelection.clear(createWorktreeSelection({ stackId: stackId }));
+			idSelection.clearPreview(createWorktreeSelection({ stackId: stackId }));
 		}}
 		draggableFiles
 	/>
@@ -317,7 +350,7 @@
 {/snippet}
 
 {#snippet branchView(branchName: string)}
-	<BranchView {stackId} {laneId} {projectId} {branchName} {onerror} {onclose} />
+	<BranchView {stackId} {laneId} {projectId} {branchName} {onerror} onclose={onclosePreviewOnly} />
 {/snippet}
 
 {#snippet commitView(branchName: string, commitId: string)}
@@ -333,7 +366,7 @@
 		}}
 		draggableFiles
 		{onerror}
-		{onclose}
+		onclose={onclosePreviewOnly}
 	/>
 {/snippet}
 
@@ -375,6 +408,7 @@
 					defaultValue: 16
 				}}
 				autoselect
+				allowUnselect={false}
 			/>
 		{/snippet}
 	</ReduxResult>
@@ -408,6 +442,7 @@
 					maxHeight: 32,
 					defaultValue: 16
 				}}
+				allowUnselect={false}
 			/>
 		{/snippet}
 	</ReduxResult>
@@ -436,7 +471,7 @@
 	use:focusable={{
 		onKeydown: (event) => {
 			if (event.key === 'Escape' && isDetailsViewOpen) {
-				selection.set(undefined);
+				onclosePreviewOnly();
 				event.preventDefault();
 				event.stopPropagation();
 				return true;
diff --git a/apps/desktop/src/components/UnappliedBranchView.svelte b/apps/desktop/src/components/UnappliedBranchView.svelte
@@ -107,6 +107,7 @@
 					{selectionId}
 					changes={changes.changes}
 					stats={changes.stats}
+					allowUnselect={false}
 				/>
 			{/snippet}
 		</ReduxResult>
diff --git a/apps/desktop/src/components/UnappliedCommitView.svelte b/apps/desktop/src/components/UnappliedCommitView.svelte
@@ -46,6 +46,7 @@
 					{projectId}
 					selectionId={createCommitSelection({ commitId })}
 					changes={changes.changes}
+					allowUnselect={false}
 				/>
 			{/snippet}
 		</ReduxResult>
diff --git a/apps/desktop/src/components/WorkspaceView.svelte b/apps/desktop/src/components/WorkspaceView.svelte
@@ -107,7 +107,7 @@
 			draggableFiles
 			scrollContainer={selectionPreviewScrollContainer}
 			onclose={() => {
-				idSelection.clear(selectionId);
+				idSelection.clearPreview(selectionId);
 			}}
 		/>
 	</ConfigurableScrollableContainer>
diff --git a/apps/desktop/src/components/codegen/CodegenPage.svelte b/apps/desktop/src/components/codegen/CodegenPage.svelte
@@ -756,6 +756,7 @@
 									showCheckboxes={false}
 									draggableFiles={false}
 									hideLastFileBorder={true}
+									allowUnselect={false}
 								/>
 							{:else}
 								<div class="right-sidebar__changes-placeholder">
diff --git a/apps/desktop/src/lib/commits/dropHandler.ts b/apps/desktop/src/lib/commits/dropHandler.ts
@@ -34,7 +34,8 @@ export class MoveCommitDzHandler implements DropzoneHandler {
 	constructor(
 		private stackService: StackService,
 		private stackId: string,
-		private projectId: string
+		private projectId: string,
+		private uiState?: UiState
 	) {}
 
 	accepts(data: unknown): boolean {
@@ -55,6 +56,14 @@ export class MoveCommitDzHandler implements DropzoneHandler {
 	}
 
 	ondrop(data: CommitDropData): void {
+		// Clear the selection from the source lane if this commit was selected
+		if (this.uiState) {
+			const sourceSelection = untrack(() => this.uiState!.lane(data.stackId).selection.current);
+			if (sourceSelection?.commitId === data.commit.id) {
+				this.uiState.lane(data.stackId).selection.set(undefined);
+			}
+		}
+
 		this.stackService
 			.moveCommit({
 				projectId: this.projectId,
diff --git a/apps/desktop/src/lib/selection/fileSelectionManager.svelte.ts b/apps/desktop/src/lib/selection/fileSelectionManager.svelte.ts
@@ -120,6 +120,11 @@ export class FileSelectionManager {
 		selection.lastAdded.set(undefined);
 	}
 
+	clearPreview(selectionId: SelectionId) {
+		const selection = this.getById(selectionId);
+		selection.lastAdded.set(undefined);
+	}
+
 	keys(selectionId: SelectionId) {
 		const selection = this.getById(selectionId);
 		return Array.from(selection.entries);
diff --git a/apps/desktop/src/lib/selection/fileSelectionUtils.ts b/apps/desktop/src/lib/selection/fileSelectionUtils.ts
@@ -176,7 +176,7 @@ export function updateSelection({
 			break;
 		case KeyName.Escape:
 			preventDefault();
-			fileIdSelection.clear(selectionId);
+			fileIdSelection.clearPreview(selectionId);
 			targetElement.blur();
 			break;
 	}

Original file line number	Diff line number	Diff line change
`@@ -154,7 +154,7 @@`
`154`	`154`	`>`
`155`	`155`	`{#if args.type === 'stack-branch'}`
`156`	`156`	`{@const moveHandler = args.stackId`
`157`		`- ? new MoveCommitDzHandler(stackService, args.stackId, projectId)`
	`157`	`+ ? new MoveCommitDzHandler(stackService, args.stackId, projectId, uiState)`
`158`	`158`	`: undefined}`
`159`	`159`	`{#if !args.prNumber && args.stackId}`
`160`	`160`	`<PrNumberUpdater {projectId} stackId={args.stackId} {branchName} />`