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} + +
+ + +
+
+ +
+ + + + + esc +
+ + + + + +
+ ↑↓ 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} />