diff --git a/src/lib/components/ui/CommandPalette.svelte b/src/lib/components/ui/CommandPalette.svelte
new file mode 100644
index 0000000..47e3089
--- /dev/null
+++ b/src/lib/components/ui/CommandPalette.svelte
@@ -0,0 +1,111 @@
+
+
+{#if open}
+
+
+
+
+
+
+
+
+
+
+
+ {#each filtered as cmd, i (cmd.id)}
+ -
+
+
+ {/each}
+
+ {#if filtered.length === 0}
+ - No commands found
+ {/if}
+
+
+
+
+ ↑↓ navigate
+ ↵ select
+
+
+
+{/if}
diff --git a/src/routes/(app)/diary/[date]/+page.svelte b/src/routes/(app)/diary/[date]/+page.svelte
index 9e64b7e..28ebecd 100644
--- a/src/routes/(app)/diary/[date]/+page.svelte
+++ b/src/routes/(app)/diary/[date]/+page.svelte
@@ -5,16 +5,49 @@
import { getCachedDiary, cacheDiary } from '$lib/offline/db';
import { addDays, formatDisplay, today } from '$lib/utils/date';
import { goto } from '$app/navigation';
+ import { onMount } from 'svelte';
import MacroSummary from '$lib/components/diary/MacroSummary.svelte';
import MealCard from '$lib/components/diary/MealCard.svelte';
import DateNav from '$lib/components/diary/DateNav.svelte';
import CalendarPicker from '$lib/components/diary/CalendarPicker.svelte';
import Sheet from '$lib/components/ui/Sheet.svelte';
+ import CommandPalette from '$lib/components/ui/CommandPalette.svelte';
+ import type { Command } from '$lib/components/ui/CommandPalette.svelte';
const date = $derived(page.params.date);
const queryClient = useQueryClient();
let calendarOpen = $state(false);
+ let commandOpen = $state(false);
+
+ const commands = $derived([
+ ...(diaryQuery.data?.meals ?? []).map(meal => ({
+ id: `entry-${meal.id}`,
+ label: `Add entry → ${meal.name}`,
+ keywords: ['e', 'entry', 'food', 'add'],
+ action: () => goto(`/diary/${date}/add-entry?meal_id=${meal.id}`)
+ })),
+ {
+ id: 'add-meal',
+ label: 'Add meal',
+ keywords: ['m', 'meal'],
+ action: () => goto(`/diary/${date}/add-meal?diary_id=${diaryQuery.data?.id}`)
+ }
+ ]);
+
+ onMount(() => {
+ function handleKeydown(e: KeyboardEvent) {
+ const tag = (e.target as HTMLElement).tagName;
+ const editable = (e.target as HTMLElement).isContentEditable;
+ if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || editable) return;
+ if (e.key === '/') {
+ e.preventDefault();
+ commandOpen = true;
+ }
+ }
+ document.addEventListener('keydown', handleKeydown);
+ return () => document.removeEventListener('keydown', handleKeydown);
+ });
const diaryQuery = createQuery(() => ({
queryKey: ['diary', date],
@@ -127,4 +160,6 @@
calendarOpen = false}>
+
+ commandOpen = false} />