Make focusables more like we discussed

- only navigate files, commits, and branches
- press "f" to show button key combos
- cmd + hotkeys displayed contextually

Author: mtsgrd

apps/desktop/src/components/BranchHeader.svelte

@@ -59,7 +59,8 @@
 	class="header-wrapper"
 	use:focusable={{
 		onAction: () => onclick?.(),
-		onActive: (value) => (active = value)
+		onActive: (value) => (active = value),
+		focusable: true
 	}}
 >
 	<div

apps/desktop/src/components/BranchList.svelte

@@ -252,6 +252,7 @@
 							{branchName}
 							{projectId}
 							{stackId}
+							{active}
 							multipleBranches={branches.length > 1}
 							isFirstBranchInStack={firstBranch}
 							isLastBranchInStack={lastBranch}

apps/desktop/src/components/ChromeHeader.svelte

@@ -114,7 +114,7 @@
 	class:mac={backend.platformName === 'macos'}
 	data-tauri-drag-region
 	class:single-branch={singleBranchMode}
-	use:focusable={{ activate: true }}
+	use:focusable
 >
 	<div class="chrome-left" data-tauri-drag-region>
 		<div class="chrome-left-buttons" class:macos={backend.platformName === 'macos'}>

apps/desktop/src/components/ChromeSidebar.svelte

@@ -57,6 +57,7 @@
 				kind="outline"
 				onclick={() => goto(workspacePath(projectId))}
 				width={34}
+				hotkey="⌘1"
 				class={['btn-square', isWorkspacePath() && 'btn-active']}
 				tooltip="Workspace"
 				{disabled}
@@ -95,6 +96,7 @@
 				onclick={() => goto(branchesPath(projectId))}
 				width={34}
 				class={['btn-square', isBranchesPath() && 'btn-active']}
+				hotkey="⌘2"
 				tooltip="Branches"
 				{disabled}
 			>
@@ -156,8 +158,8 @@
 				onclick={() => goto(historyPath(projectId))}
 				width={34}
 				class={['btn-square', isHistoryPath() && 'btn-active']}
+				hotkey="⌘3"
 				tooltip="Operations history"
-				tooltipHotkey="⇧⌘H"
 				{disabled}
 			>
 				{#snippet custom()}
@@ -207,6 +209,7 @@
 					onclick={() => goto(codegenPath(projectId))}
 					width={34}
 					class={['btn-square', isCodegenPath() && 'btn-active']}
+					hotkey="⌘4"
 					tooltip="Codegen"
 					tooltipAlign="start"
 					{disabled}
@@ -451,11 +454,13 @@
 	}
 	.bottom__primary-actions {
 		display: flex;
+		position: relative;
 		flex-direction: column;
 		gap: 8px;
 	}
 	.bottom__ghost-actions {
 		display: flex;
+		position: relative;
 		flex-direction: column;
 		gap: 2px;
 	}

apps/desktop/src/components/CommitMessageEditor.svelte

@@ -243,6 +243,7 @@
 		onExitFloatingModeClick={() => {
 			useFloatingBox.set(false);
 		}}
+		onCancel={handleCancel}
 	>
 		{@render editorContent()}
 	</FloatingCommitBox>

apps/desktop/src/components/CommitRow.svelte

@@ -100,7 +100,8 @@
 	class:disabled
 	{onclick}
 	use:focusable={{
-		onAction: () => onclick?.()
+		onAction: () => onclick?.(),
+		focusable: true
 	}}
 >
 	{#if selected}

apps/desktop/src/components/FileList.svelte

@@ -22,6 +22,7 @@
 	import { FOCUS_MANAGER } from '@gitbutler/ui/focus/focusManager';
 	import { focusable } from '@gitbutler/ui/focus/focusable';
 
+	import { untrack } from 'svelte';
 	import type { ConflictEntriesObj } from '$lib/files/conflicts';
 
 	type Props = {
@@ -213,9 +214,17 @@
 		}
 		return false;
 	}
-	const lastAdded = $derived(idSelection.getById(selectionId).lastAdded);
+	const currentSelection = $derived(idSelection.getById(selectionId));
+	const lastAdded = $derived(currentSelection.lastAdded);
+	const lastAddedIndex = $derived($lastAdded?.index);
 	$effect(() => {
-		if ($lastAdded) focusManager.focusNthSibling($lastAdded.index);
+		if (lastAddedIndex) {
+			untrack(() => {
+				if (active) {
+					focusManager.focusNthSibling(lastAddedIndex);
+				}
+			});
+		}
 	});
 </script>
 
@@ -235,7 +244,10 @@
 		draggable={draggableFiles}
 		executable={isExecutable}
 		showCheckbox={showCheckboxes}
-		focusableOpts={{ onKeydown: (e) => handleKeyDown(change, idx, e), autoAction: true }}
+		focusableOpts={{
+			onKeydown: (e) => handleKeyDown(change, idx, e),
+			focusable: true
+		}}
 		onclick={(e) => {
 			e.stopPropagation();
 			selectFilesInList(e, change, changes, idSelection, selectedFileIds, true, idx, selectionId);

apps/desktop/src/components/FloatingCommitBox.svelte

@@ -11,9 +11,10 @@
 		children: Snippet;
 		title: string;
 		onExitFloatingModeClick: () => void;
+		onCancel?: () => void;
 	}
 
-	const { children, title, onExitFloatingModeClick }: Props = $props();
+	const { children, title, onExitFloatingModeClick, onCancel }: Props = $props();
 
 	const uiState = inject(UI_STATE);
 
@@ -38,6 +39,7 @@
 		uiState.global.floatingBoxPosition.set(snapPosition);
 	}}
 	dragHandleElement={headerElRef}
+	{onCancel}
 >
 	<div class="modal-header" bind:this={headerElRef}>
 		<div class="drag-handle">

apps/desktop/src/components/FocusCursor.svelte

@@ -72,7 +72,7 @@
 
 <style lang="postcss">
 	:global(.focus-cursor) {
-		z-index: var(--z-blocker);
+		z-index: var(--z-modal);
 		position: absolute;
 
 		/* Focus outline frame */

apps/desktop/src/components/PushButton.svelte

@@ -33,6 +33,7 @@
 		multipleBranches: boolean;
 		isLastBranchInStack?: boolean;
 		isFirstBranchInStack?: boolean;
+		active?: boolean;
 	};
 
 	const {
@@ -41,7 +42,8 @@
 		stackId,
 		multipleBranches,
 		isFirstBranchInStack,
-		isLastBranchInStack
+		isLastBranchInStack,
+		active
 	}: Props = $props();
 
 	const stackService = inject(STACK_SERVICE);
@@ -151,6 +153,7 @@
 			style="neutral"
 			{loading}
 			disabled={buttonDisabled}
+			hotkey={active ? '⌘P' : undefined}
 			tooltip={getButtonTooltip(
 				hasThingsToPush,
 				hasConflicts,