Make keyboard navigation simple

- enter/space to click
- flat movement, up/down or left/right

Author: mtsgrd

apps/desktop/src/components/BranchCommitList.svelte

@@ -52,6 +52,7 @@
 		lastBranch: boolean;
 		branchDetails: BranchDetails;
 		stackingReorderDropzoneManager: ReorderCommitDzFactory;
+		active?: boolean;
 
 		handleUncommit: (commitId: string, branchName: string) => Promise<void>;
 		startEditingCommitMessage: (branchName: string, commitId: string) => void;
@@ -73,6 +74,7 @@
 		firstBranch,
 		lastBranch,
 		stackingReorderDropzoneManager,
+		active,
 		handleUncommit,
 		startEditingCommitMessage,
 		handleEditPatch,
@@ -272,7 +274,7 @@
 				use:focusable={{
 					id: DefinedFocusable.CommitList,
 					list: true,
-					disabled: localAndRemoteCommits.length <= 1
+					skip: true
 				}}
 			>
 				{#if hasRemoteCommits}
@@ -293,6 +295,7 @@
 								{first}
 								{lastCommit}
 								{selected}
+								{active}
 								onclick={() => handleCommitClick(commit.id, true)}
 								disableCommitActions={false}
 							/>
@@ -431,6 +434,7 @@
 								{lastBranch}
 								{selected}
 								{tooltip}
+								{active}
 								onclick={() => handleCommitClick(commit.id, false)}
 								disableCommitActions={false}
 							>

apps/desktop/src/components/BranchHeader.svelte

@@ -61,9 +61,8 @@
 	use:focusable={{
 		id: DefinedFocusable.Branch,
 		linkToIds: DEFAULT_LINKS,
-		list: true,
 		onKeydown: (e) => {
-			if (e.key === 'Enter' || (!e.metaKey && e.key === 'ArrowRight')) {
+			if (e.key === 'Enter' || e.key === ' ') {
 				e.stopPropagation();
 				onclick?.();
 			}

apps/desktop/src/components/BranchList.svelte

@@ -33,10 +33,11 @@
 		stackId?: string;
 		laneId: string;
 		branches: BranchDetails[];
+		active: boolean;
 		onselect?: () => void;
 	};
 
-	const { projectId, branches, stackId, laneId, onselect }: Props = $props();
+	const { projectId, branches, stackId, laneId, active, onselect }: Props = $props();
 	const stackService = inject(STACK_SERVICE);
 	const uiState = inject(UI_STATE);
 	const modeService = inject(MODE_SERVICE);
@@ -310,6 +311,7 @@
 							{branchName}
 							{branchDetails}
 							{stackingReorderDropzoneManager}
+							{active}
 							{handleUncommit}
 							{startEditingCommitMessage}
 							{handleEditPatch}

apps/desktop/src/components/BranchesView.svelte

@@ -383,12 +383,7 @@
 					</div>
 
 					{#if current.commitId || (current.branchName && ((current.inWorkspace && current.stackId) || !current.isTarget)) || current.prNumber}
-						<div
-							class="commit-column"
-							bind:this={commitColumn}
-							class:non-local-pr={isNonLocalPr}
-							use:focusable
-						>
+						<div class="commit-column" bind:this={commitColumn} class:non-local-pr={isNonLocalPr}>
 							{#if current.commitId}
 								<UnappliedCommitView {projectId} commitId={current.commitId} />
 								<Resizer

apps/desktop/src/components/Chrome.svelte

@@ -6,6 +6,7 @@
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import { inject } from '@gitbutler/core/context';
+	import { focusable } from '@gitbutler/ui/focus/focusable';
 	import type { Snippet } from 'svelte';
 
 	const {
@@ -20,9 +21,9 @@
 
 <ReduxResult {projectId} result={projectResult.current}>
 	{#snippet children(project, { projectId })}
-		<div class="chrome">
+		<div class="chrome" use:focusable={{ list: true, activate: true }}>
 			<ChromeHeader {projectId} projectTitle={project.title} actionsDisabled={sidebarDisabled} />
-			<div class="chrome-body">
+			<div class="chrome-body" use:focusable={{ skip: true }}>
 				<EnsureAuthorInfo {projectId} />
 				<ChromeSidebar {projectId} disabled={sidebarDisabled} />
 				<div class="chrome-content">

apps/desktop/src/components/ChromeHeader.svelte

@@ -23,6 +23,7 @@
 		TestId,
 		Tooltip
 	} from '@gitbutler/ui';
+	import { focusable } from '@gitbutler/ui/focus/focusable';
 
 	type Props = {
 		projectId: string;
@@ -113,6 +114,7 @@
 	class:mac={backend.platformName === 'macos'}
 	data-tauri-drag-region
 	class:single-branch={singleBranchMode}
+	use:focusable={{ activate: true }}
 >
 	<div class="chrome-left" data-tauri-drag-region>
 		<div class="chrome-left-buttons" class:macos={backend.platformName === 'macos'}>

apps/desktop/src/components/ChromeSidebar.svelte

@@ -28,6 +28,7 @@
 		Icon,
 		TestId
 	} from '@gitbutler/ui';
+	import { focusable } from '@gitbutler/ui/focus/focusable';
 
 	import { slide } from 'svelte/transition';
 
@@ -45,7 +46,7 @@
 	const { openGeneralSettings, openProjectSettings } = useSettingsModal();
 </script>
 
-<div class="sidebar">
+<div class="sidebar" use:focusable>
 	<div class="top">
 		<div>
 			{#if isWorkspacePath()}

apps/desktop/src/components/CommitRow.svelte

@@ -74,12 +74,12 @@
 		isOpen,
 		disabled,
 		hasConflicts,
+		active,
 		onclick,
 		menu,
 		...args
 	}: Props = $props();
 
-	let active = $state(false);
 	let container = $state<HTMLDivElement>();
 </script>
 
@@ -106,13 +106,12 @@
 		onKeydown: (e) => {
 			if (disabled) return false;
 
-			if (e.key === 'Enter' || e.key === ' ' || (!e.metaKey && e.key === 'ArrowRight')) {
+			if (e.key === 'Enter' || e.key === ' ') {
 				e.stopPropagation();
 				onclick?.();
 				return true;
 			}
-		},
-		onActive: (value) => (active = value)
+		}
 	}}
 >
 	{#if selected}

apps/desktop/src/components/Drawer.svelte

@@ -83,13 +83,13 @@
 	class:transparent
 	class:grow
 	class:noshrink
-	use:focusable={{ list: true }}
 >
 	<div
 		bind:this={headerDiv}
 		class="drawer-header"
 		class:bottom-border={!$collapsed}
 		bind:clientHeight={headerHeight}
+		use:focusable
 	>
 		{#if !disableFold}
 			<button

apps/desktop/src/components/FileList.svelte

@@ -176,7 +176,7 @@
 	});
 
 	function handleKeyDown(change: TreeChange, idx: number, e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === 'l') {
+		if (e.key === 'Enter' || e.key === ' ' || e.key === 'l') {
 			e.stopPropagation();
 			selectFilesInList(e, change, changes, idSelection, true, idx, selectionId);
 			onselect?.();
@@ -251,6 +251,7 @@
 	use:focusable={{
 		id: DefinedFocusable.FileList,
 		list: true,
+		skip: true,
 		onActive: (value) => (active = value)
 	}}
 >