feat(ui): add command palette and commit selection sync

Introduce a global command palette for quick access to common repository
actions, branches, files, and commits. Wire it into the main shell so it
can open settings, help, and other dialogs while keeping keyboard access
consistent.

Also add commit selection state to the history view so the active commit
is highlighted and brought into view when chosen from either the palette
or the history panel.
This commit is contained in:
Christoph Brandau
2026-08-13 07:53:19 +02:00
parent 1fa57eea6f
commit 3eb554fee7
4 changed files with 245 additions and 2 deletions
+15
View File
@@ -44,6 +44,7 @@
isLoadingMore: boolean;
loadMoreError: string;
expandedCommitHashes: Set<string>;
selectedCommitHash: string;
onLoadMore: () => void | Promise<void>;
onRestoreCommit: (commit: GitCommit) => void;
onPreviewCommitFile: (commit: GitCommit, file: GitCommitFile) => void;
@@ -51,6 +52,7 @@
onCreateBranchFromCommit: (commit: GitCommit) => void;
onCherryPickCommit: (commit: GitCommit) => void;
onRevertCommit: (commit: GitCommit) => void;
onSelectCommit: (commit: GitCommit) => void;
}
let {
@@ -65,6 +67,7 @@
isLoadingMore = false,
loadMoreError = "",
expandedCommitHashes = new Set(),
selectedCommitHash = "",
onLoadMore = () => {},
onRestoreCommit = () => {},
onPreviewCommitFile = () => {},
@@ -72,6 +75,7 @@
onCreateBranchFromCommit = () => {},
onCherryPickCommit = () => {},
onRevertCommit = () => {},
onSelectCommit = () => {},
}: Props = $props();
let hiddenGraphBranches = $state<Set<string>>(new Set());
@@ -501,6 +505,15 @@
}
});
$effect(() => {
if (!selectedCommitHash) return;
queueMicrotask(() => {
panelElement
?.querySelector<HTMLElement>(`[data-commit-hash="${CSS.escape(selectedCommitHash)}"]`)
?.scrollIntoView({ block: "center", behavior: "smooth" });
});
});
$effect(() => {
const defaultBranch = activeBranch && localBranchNames.includes(activeBranch)
? activeBranch
@@ -577,6 +590,8 @@
{@const rowSyncClass = syncClassForBranches(row?.branchLabels ?? [])}
<article
class="commit-row graph-row"
class:selected={selectedCommitHash === item.hash}
data-commit-hash={item.hash}
class:graph-ahead-row={rowSyncClass === "ahead"}
class:graph-behind-row={rowSyncClass === "behind"}
class:merge-row={item.parents.length > 1}