Auto-select first file in changed files

Author: mtsgrd

apps/desktop/src/components/ChangedFiles.svelte

@@ -5,13 +5,14 @@
 	import Resizer from '$components/Resizer.svelte';
 	import emptyFolderSvg from '$lib/assets/empty-state/empty-folder.svg?raw';
 	import { IntelligentScrollingService } from '$lib/intelligentScrolling/service';
+	import { IdSelection } from '$lib/selection/idSelection.svelte';
 	import { inject } from '@gitbutler/shared/context';
 	import Badge from '@gitbutler/ui/Badge.svelte';
 	import EmptyStatePlaceholder from '@gitbutler/ui/EmptyStatePlaceholder.svelte';
+	import { untrack, type ComponentProps } from 'svelte';
 	import type { ConflictEntriesObj } from '$lib/files/conflicts';
 	import type { TreeChange } from '$lib/hunks/change';
 	import type { SelectionId } from '$lib/selection/key';
-	import type { ComponentProps } from 'svelte';
 
 	type Props = {
 		projectId: string;
@@ -25,6 +26,7 @@
 		grow?: boolean;
 		noshrink?: boolean;
 		resizer?: Partial<ComponentProps<typeof Resizer>>;
+		autoselect?: boolean;
 		ontoggle?: (collapsed: boolean) => void;
 	};
 
@@ -39,13 +41,26 @@
 		draggableFiles,
 		grow,
 		noshrink,
-		ontoggle,
-		resizer
+		resizer,
+		autoselect,
+		ontoggle
 	}: Props = $props();
 
-	const [intelligentScrollingService] = inject(IntelligentScrollingService);
+	const [idSelection, intelligentScrollingService] = inject(
+		IdSelection,
+		IntelligentScrollingService
+	);
 
 	let listMode: 'list' | 'tree' = $state('tree');
+
+	$effect(() => {
+		if (autoselect && selectionId) {
+			// Prevent effect from running when `changes` updates.
+			untrack(() => {
+				idSelection.set(changes[0]!.path, selectionId, 0);
+			});
+		}
+	});
 </script>
 
 <Drawer {grow} {ontoggle} {resizer} {noshrink}>

apps/desktop/src/components/FileList.svelte

@@ -7,7 +7,7 @@
 	import { AIService } from '$lib/ai/service';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { conflictEntryHint } from '$lib/conflictEntryPresence';
-	import { abbreviateFolders, changesToFileTree, sortLikeFileTree } from '$lib/files/filetreeV3';
+	import { abbreviateFolders, changesToFileTree } from '$lib/files/filetreeV3';
 	import { type TreeChange, type Modification } from '$lib/hunks/change';
 	import { showToast } from '$lib/notifications/toasts';
 	import { IdSelection } from '$lib/selection/idSelection.svelte';
@@ -28,6 +28,7 @@
 		active?: boolean;
 		conflictEntries?: ConflictEntriesObj;
 		draggableFiles?: boolean;
+		allowUnselect?: boolean;
 		onselect?: () => void;
 	};
 
@@ -41,6 +42,7 @@
 		stackId,
 		conflictEntries,
 		draggableFiles,
+		allowUnselect,
 		onselect
 	}: Props = $props();
 
@@ -50,8 +52,7 @@
 	const [branchChanges] = actionService.branchChanges;
 	let currentDisplayIndex = $state(0);
 
-	const sortedChanges = $derived(sortLikeFileTree(changes));
-	const fileChunks: TreeChange[][] = $derived(chunk(sortedChanges, 100));
+	const fileChunks: TreeChange[][] = $derived(chunk(changes, 100));
 	const visibleFiles: TreeChange[] = $derived(fileChunks.slice(0, currentDisplayIndex + 1).flat());
 	let aiConfigurationValid = $state(false);
 
@@ -145,7 +146,7 @@
 			shiftKey: e.shiftKey,
 			key: e.key,
 			targetElement: e.currentTarget as HTMLElement,
-			files: sortedChanges,
+			files: changes,
 			selectedFileIds: idSelection.values(selectionId),
 			fileIdSelection: idSelection,
 			selectionId: selectionId,
@@ -185,7 +186,7 @@
 		isLast={idx === visibleFiles.length - 1}
 		selected={idSelection.has(change.path, selectionId)}
 		onclick={(e) => {
-			selectFilesInList(e, change, sortedChanges, idSelection, true, idx, selectionId);
+			selectFilesInList(e, change, changes, idSelection, true, idx, selectionId, allowUnselect);
 			onselect?.();
 		}}
 		{conflictEntries}
@@ -207,15 +208,8 @@
 		{#if listMode === 'tree'}
 			<!-- We need to use sortedChanges here because otherwise we will end up
 		with incorrect indexes -->
-			{@const node = abbreviateFolders(changesToFileTree(sortedChanges))}
-			<FileTreeNode
-				isRoot
-				{stackId}
-				{node}
-				{showCheckboxes}
-				changes={sortedChanges}
-				{fileTemplate}
-			/>
+			{@const node = abbreviateFolders(changesToFileTree(changes))}
+			<FileTreeNode isRoot {stackId} {node} {showCheckboxes} {changes} {fileTemplate} />
 		{:else}
 			<LazyloadContainer
 				minTriggerCount={80}

apps/desktop/src/components/StackView.svelte

@@ -342,6 +342,7 @@
 					order: 1,
 					unsetMaxHeight: previewKey ? unsetMaxHeight : undefined
 				}}
+				autoselect
 			/>
 		{/snippet}
 	</ReduxResult>

apps/desktop/src/components/UnappliedBranchView.svelte

@@ -116,6 +116,7 @@
 							projectId={env.projectId}
 							stackId={env.stackId}
 							active
+							autoselect
 							{selectionId}
 							{changes}
 						/>

apps/desktop/src/components/UnappliedCommitView.svelte

@@ -66,6 +66,7 @@
 				<ChangedFiles
 					title="Changed files"
 					active
+					autoselect
 					{projectId}
 					selectionId={{ type: 'commit', commitId }}
 					changes={changes.changes}

apps/desktop/src/components/WorktreeChanges.svelte

@@ -108,6 +108,7 @@
 	<div data-testid={TestId.UncommittedChanges_FileList} class="uncommitted-changes">
 		<FileList
 			draggableFiles
+			allowUnselect
 			selectionId={{ type: 'worktree', stackId }}
 			showCheckboxes={isCommitting}
 			changes={changes.current}

apps/desktop/src/lib/selection/idSelectionUtils.ts

@@ -194,7 +194,8 @@ export function selectFilesInList(
 	idSelection: IdSelection,
 	allowMultiple: boolean,
 	index: number,
-	selectionId: SelectionId
+	selectionId: SelectionId,
+	allowUnselect?: boolean
 ) {
 	// e.stopPropagation();
 	const isAlreadySelected = idSelection.has(change.path, selectionId);
@@ -216,7 +217,9 @@ export function selectFilesInList(
 	} else {
 		// if only one file is selected and it is already selected, unselect it
 		if (isTheOnlyOneSelected) {
-			idSelection.clear(selectionId);
+			if (allowUnselect) {
+				idSelection.clear(selectionId);
+			}
 		} else {
 			idSelection.set(change.path, selectionId, index);
 		}

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

@@ -1,5 +1,6 @@
 import { StackOrder } from '$lib/branches/branch';
 import { ConflictEntries, type ConflictEntriesObj } from '$lib/files/conflicts';
+import { sortLikeFileTree } from '$lib/files/filetreeV3';
 import { showToast } from '$lib/notifications/toasts';
 import { hasTauriExtra } from '$lib/state/backendQuery';
 import { ClientState, type BackendApi } from '$lib/state/clientState.svelte';
@@ -452,7 +453,7 @@ export class StackService {
 			{ projectId, commitId },
 			{
 				transform: (result) => ({
-					changes: changesSelectors.selectAll(result.changes),
+					changes: sortLikeFileTree(changesSelectors.selectAll(result.changes)),
 					conflictEntries: result.conflictEntries
 				})
 			}