feat(web): ⌘K command palette

bits-ui Command in a dialog: jump to sections, heaps, folders (from the
already-warm sidebar queries), plus dark-mode and shortcut-overlay
actions. Global ⌘K binding in the layout works from any route and while
inputs hold focus.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-03 13:22:31 +02:00
parent 4f04c1f7b0
commit 9ba8d625bc
3 changed files with 225 additions and 0 deletions

View File

@@ -21,6 +21,8 @@
import PreviewModal from '$lib/components/preview/PreviewModal.svelte';
import MoveToFolderDialog from '$lib/components/layout/MoveToFolderDialog.svelte';
import ShortcutsDialog from '$lib/components/layout/ShortcutsDialog.svelte';
import CommandPalette from '$lib/components/layout/CommandPalette.svelte';
import { togglePalette } from '$lib/stores/view.svelte';
let { children } = $props();
@@ -59,8 +61,18 @@
else stopIndexerWatch();
});
// ⌘K lives at the window level (not gridKeyNav) so the palette opens
// from any route and even while a form field holds focus.
function onGlobalKey(e: KeyboardEvent) {
if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
e.preventDefault();
togglePalette();
}
}
</script>
<svelte:window onkeydown={onGlobalKey} />
<svelte:head>
<title>Mulimage</title>
</svelte:head>
@@ -125,6 +137,8 @@
<MoveToFolderDialog />
<!-- Keyboard-shortcut reference, toggled by `?` via gridKeyNav. -->
<ShortcutsDialog />
<!-- ⌘K palette — jump to sections/heaps/folders + global actions. -->
<CommandPalette />
{:else}
{@render children?.()}
{/if}