Fix file list multiselect and keyboard cursor interaction

- fix dated file list logic
- meta + up/down to move cursor only
- replace `onKeyDown` with simpler `onAction` focusables
- add a `use:focusable` to codegen page
- file list cursor follows selection
- `focusParent()` can traverse all ancestors

Author: mtsgrd

apps/desktop/src/components/BranchHeader.svelte

@@ -58,12 +58,7 @@
 <div
 	class="header-wrapper"
 	use:focusable={{
-		onKeydown: (e) => {
-			if (e.key === 'Enter' || e.key === ' ') {
-				e.stopPropagation();
-				onclick?.();
-			}
-		},
+		onAction: () => onclick?.(),
 		onActive: (value) => (active = value)
 	}}
 >

apps/desktop/src/components/CommitRow.svelte

@@ -100,15 +100,7 @@
 	class:disabled
 	{onclick}
 	use:focusable={{
-		onKeydown: (e) => {
-			if (disabled) return false;
-
-			if (e.key === 'Enter' || e.key === ' ') {
-				e.stopPropagation();
-				onclick?.();
-				return true;
-			}
-		}
+		onAction: () => onclick?.()
 	}}
 >
 	{#if selected}

apps/desktop/src/components/FileList.svelte

@@ -19,6 +19,7 @@
 	import { chunk } from '$lib/utils/array';
 	import { inject, injectOptional } from '@gitbutler/core/context';
 	import { FileListItem } from '@gitbutler/ui';
+	import { FOCUS_MANAGER } from '@gitbutler/ui/focus/focusManager';
 	import { focusable } from '@gitbutler/ui/focus/focusable';
 
 	import type { ConflictEntriesObj } from '$lib/files/conflicts';
@@ -52,6 +53,7 @@
 	}: Props = $props();
 
 	const idSelection = inject(ID_SELECTION);
+	const focusManager = inject(FOCUS_MANAGER);
 	const aiService = inject(AI_SERVICE);
 	const actionService = inject(ACTION_SERVICE);
 	const modeService = injectOptional(MODE_SERVICE, undefined);
@@ -91,6 +93,7 @@
 	const aiGenEnabled = $derived(projectAiGenEnabled(projectId));
 
 	const canUseGBAI = $derived(aiGenEnabled && aiConfigurationValid);
+	const selectedFileIds = $derived(idSelection.values(selectionId));
 
 	$effect(() => {
 		aiService.validateGitButlerAPIConfiguration().then((value) => {
@@ -177,7 +180,7 @@
 	function handleKeyDown(change: TreeChange, idx: number, e: KeyboardEvent) {
 		if (e.key === 'Enter' || e.key === ' ' || e.key === 'l') {
 			e.stopPropagation();
-			selectFilesInList(e, change, changes, idSelection, true, idx, selectionId);
+			selectFilesInList(e, change, changes, idSelection, selectedFileIds, true, idx, selectionId);
 			onselect?.();
 			return true;
 		}
@@ -194,25 +197,26 @@
 			return;
 		}
 
-		// If we want to keep the behavior where focus can change while
-		// not automatically selecting the item, then we should remove
-		// that code from `updateSelection` rather than checkinf for
-		// modifier keys here.
-		if (e.shiftKey || e.metaKey) {
+		if (!e.metaKey) {
 			updateSelection({
 				allowMultiple: true,
 				metaKey: e.metaKey,
 				shiftKey: e.shiftKey,
 				key: e.key,
 				targetElement: e.currentTarget as HTMLElement,
 				files: changes,
-				selectedFileIds: idSelection.values(selectionId),
+				selectedFileIds,
 				fileIdSelection: idSelection,
 				selectionId: selectionId,
 				preventDefault: () => e.preventDefault()
 			});
+			return true;
 		}
 	}
+	const lastAdded = $derived(idSelection.getById(selectionId).lastAdded);
+	$effect(() => {
+		if ($lastAdded) focusManager.focusNthSibling($lastAdded.index);
+	});
 </script>
 
 {#snippet fileTemplate(change: TreeChange, idx: number, depth: number = 0)}
@@ -231,10 +235,10 @@
 		draggable={draggableFiles}
 		executable={!!isExecutable}
 		showCheckbox={showCheckboxes}
-		focusableOpts={{ onKeydown: (e) => handleKeyDown(change, idx, e) }}
+		focusableOpts={{ onKeydown: (e) => handleKeyDown(change, idx, e), autoAction: true }}
 		onclick={(e) => {
 			e.stopPropagation();
-			selectFilesInList(e, change, changes, idSelection, true, idx, selectionId);
+			selectFilesInList(e, change, changes, idSelection, selectedFileIds, true, idx, selectionId);
 			onselect?.();
 		}}
 		{conflictEntries}

apps/desktop/src/components/SnapshotCard.svelte

@@ -230,13 +230,7 @@
 							{#each files as file, idx}
 								<div
 									use:focusable={{
-										onKeydown: (e) => {
-											if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight') {
-												onDiffClick(file.path);
-												e.stopPropagation();
-												return true;
-											}
-										}
+										onAction: () => onDiffClick(file.path)
 									}}
 								>
 									<FileListItem

apps/desktop/src/components/codegen/CodegenSidebarEntry.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Badge, Icon, TimeAgo, Tooltip, InfoButton } from '@gitbutler/ui';
+	import { focusable } from '@gitbutler/ui/focus/focusable';
 	import { slide } from 'svelte/transition';
 	import type { ClaudeStatus } from '$lib/codegen/types';
 	import type { Snippet } from 'svelte';
@@ -35,7 +36,7 @@
 	let isOpen = $state(false);
 </script>
 
-<div class="codegen-entry-wrapper">
+<div class="codegen-entry-wrapper" use:focusable>
 	<div class="codegen-entry">
 		<button class="codegen-entry-header" class:selected type="button" {onclick}>
 			{#if selected}

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

@@ -19,14 +19,14 @@ function getNextFile(files: TreeChange[], currentId: string): TreeChange | undef
 	const fileIndex = files.findIndex((f) => f.path === currentId);
 	if (fileIndex === -1) return undefined;
 
-	const nextFileIndex = (fileIndex + 1) % files.length;
+	const nextFileIndex = fileIndex + 1;
 	return files[nextFileIndex];
 }
 
 function getPreviousFile(files: TreeChange[], currentId: string): TreeChange | undefined {
 	const fileIndex = files.findIndex((f) => f.path === currentId);
 	if (fileIndex === -1) return undefined;
-	const previousFileIndex = (fileIndex - 1 + files.length) % files.length;
+	const previousFileIndex = fileIndex - 1;
 	return files[previousFileIndex];
 }
 
@@ -96,11 +96,6 @@ export function updateSelection({
 	) {
 		const file = getFileFunc?.(files, id) ?? getFile(files, id);
 		if (file) {
-			// if file is already selected, do nothing
-			if (selectedFileIds.find((f) => f.path === file.path)) {
-				return;
-			}
-
 			const fileIndex = files.findIndex((f) => f.path === file.path);
 			if (fileIndex === -1) return; // should never happen
 			fileIdSelection.add(file.path, selectionId, fileIndex);
@@ -192,6 +187,7 @@ export function selectFilesInList(
 	change: TreeChange,
 	sortedFiles: TreeChange[],
 	idSelection: IdSelection,
+	selectedFileIds: SelectedFile[],
 	allowMultiple: boolean,
 	index: number,
 	selectionId: SelectionId,
@@ -205,6 +201,11 @@ export function selectFilesInList(
 	if (e.ctrlKey || e.metaKey) {
 		if (isAlreadySelected) {
 			idSelection.remove(change.path, selectionId);
+			selectedFileIds.splice(selectedFileIds.findIndex((f) => f.path === change.path));
+			const previous = selectedFileIds.at(-1);
+			if (previous) {
+				idSelection.add(previous.path, selectionId, selectedFileIds.length - 1);
+			}
 		} else {
 			idSelection.add(change.path, selectionId, index);
 		}