[autofocus] fix

src/lib/components/ui/CommandPalette.svelte

@@ -15,29 +15,34 @@
 
   let { commands, open, onclose }: Props = $props();
 
-	let query = $state('');
+  let query = $state("");
   let selectedIdx = $state(0);
   let inputEl = $state<HTMLInputElement | null>(null);
 
   const filtered = $derived(
     query.trim()
-			? commands.filter(c =>
+      ? commands.filter(
+          (c) =>
             c.label.toLowerCase().includes(query.toLowerCase()) ||
-				c.keywords?.some(k => k.toLowerCase().includes(query.toLowerCase()))
+            c.keywords?.some((k) =>
+              k.toLowerCase().includes(query.toLowerCase()),
+            ),
         )
-			: commands
+      : commands,
   );
 
   $effect(() => {
     if (open) {
-			query = '';
+      query = "";
       selectedIdx = 0;
-			setTimeout(() => inputEl?.focus(), 50);
     }
   });
 
   // Reset selection when filter changes
-	$effect(() => { filtered; selectedIdx = 0; });
+  $effect(() => {
+    filtered;
+    selectedIdx = 0;
+  });
 
   function execute(cmd: Command) {
     onclose();
@@ -45,10 +50,22 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') { onclose(); return; }
+    if (e.key === "Escape") {
-		if (e.key === 'ArrowDown') { e.preventDefault(); selectedIdx = Math.min(selectedIdx + 1, filtered.length - 1); }
+      onclose();
-		if (e.key === 'ArrowUp') { e.preventDefault(); selectedIdx = Math.max(selectedIdx - 1, 0); }
+      return;
-		if (e.key === 'Enter' && filtered[selectedIdx]) { e.preventDefault(); execute(filtered[selectedIdx]); }
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      selectedIdx = Math.min(selectedIdx + 1, filtered.length - 1);
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      selectedIdx = Math.max(selectedIdx - 1, 0);
+    }
+    if (e.key === "Enter" && filtered[selectedIdx]) {
+      e.preventDefault();
+      execute(filtered[selectedIdx]);
+    }
   }
 </script>
 
@@ -60,21 +77,39 @@
   ></div>
 
   <!-- Palette -->
-	<div class="fixed top-[20%] left-1/2 -translate-x-1/2 z-50 w-full max-w-md px-4 pointer-events-none">
+  <div
-		<div class="bg-zinc-900 border border-zinc-700 rounded-2xl shadow-2xl overflow-hidden pointer-events-auto">
+    class="fixed top-[20%] left-1/2 -translate-x-1/2 z-50 w-full max-w-md px-4 pointer-events-none"
+  >
+    <div
+      class="bg-zinc-900 border border-zinc-700 rounded-2xl shadow-2xl overflow-hidden pointer-events-auto"
+    >
       <!-- Input -->
       <div class="flex items-center gap-2.5 px-4 py-3 border-b border-zinc-800">
-				<svg class="w-4 h-4 text-zinc-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          class="w-4 h-4 text-zinc-500 shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
         </svg>
         <input
           bind:this={inputEl}
           bind:value={query}
+          autofocus
           onkeydown={handleKeydown}
           placeholder="Type a command…"
           class="flex-1 bg-transparent text-zinc-100 placeholder-zinc-500 focus:outline-none text-sm"
         />
-				<kbd class="text-xs text-zinc-600 border border-zinc-700 rounded px-1.5 py-0.5">esc</kbd>
+        <kbd
+          class="text-xs text-zinc-600 border border-zinc-700 rounded px-1.5 py-0.5"
+          >esc</kbd
+        >
       </div>
 
       <!-- Commands -->
@@ -83,13 +118,18 @@
           <li>
             <button
               onclick={() => execute(cmd)}
-							onmouseenter={() => selectedIdx = i}
+              onmouseenter={() => (selectedIdx = i)}
-							class="w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors {i === selectedIdx ? 'bg-zinc-800' : 'hover:bg-zinc-800/50'}"
+              class="w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors {i ===
+              selectedIdx
+                ? 'bg-zinc-800'
+                : 'hover:bg-zinc-800/50'}"
             >
               <div class="flex-1 min-w-0">
                 <p class="text-sm text-zinc-100">{cmd.label}</p>
                 {#if cmd.description}
-									<p class="text-xs text-zinc-500 mt-0.5 truncate">{cmd.description}</p>
+                  <p class="text-xs text-zinc-500 mt-0.5 truncate">
+                    {cmd.description}
+                  </p>
                 {/if}
               </div>
             </button>
@@ -97,14 +137,22 @@
         {/each}
 
         {#if filtered.length === 0}
-					<li class="px-4 py-4 text-sm text-zinc-500 text-center">No commands found</li>
+          <li class="px-4 py-4 text-sm text-zinc-500 text-center">
+            No commands found
+          </li>
         {/if}
       </ul>
 
       <!-- Footer hint -->
-			<div class="px-4 py-2 border-t border-zinc-800 flex gap-4 text-xs text-zinc-600">
+      <div
-				<span><kbd class="border border-zinc-700 rounded px-1">↑↓</kbd> navigate</span>
+        class="px-4 py-2 border-t border-zinc-800 flex gap-4 text-xs text-zinc-600"
-				<span><kbd class="border border-zinc-700 rounded px-1">↵</kbd> select</span>
+      >
+        <span
+          ><kbd class="border border-zinc-700 rounded px-1">↑↓</kbd> navigate</span
+        >
+        <span
+          ><kbd class="border border-zinc-700 rounded px-1">↵</kbd> select</span
+        >
       </div>
     </div>
   </div>

src/lib/components/ui/Sheet.svelte

@@ -10,6 +10,25 @@
 
 	let { open, onclose, title, children }: Props = $props();
 
+	let bottomOffset = $state(0);
+
+	onMount(() => {
+		const vv = window.visualViewport;
+		if (!vv) return;
+
+		function update() {
+			bottomOffset = Math.max(0, window.innerHeight - vv!.offsetTop - vv!.height);
+		}
+
+		vv.addEventListener('resize', update);
+		vv.addEventListener('scroll', update);
+
+		return () => {
+			vv.removeEventListener('resize', update);
+			vv.removeEventListener('scroll', update);
+		};
+	});
+
 	function handleBackdrop(e: MouseEvent) {
 		if (e.target === e.currentTarget) onclose();
 	}
@@ -32,8 +51,9 @@
 	<!-- Sheet (mobile bottom sheet / desktop centered modal) -->
 	<div
 		class="fixed z-50 bg-zinc-900 px-4 pt-4
-			bottom-0 left-0 right-0 rounded-t-2xl pb-[calc(1.5rem+var(--safe-bottom))] max-w-lg mx-auto animate-slide-up
+			left-0 right-0 rounded-t-2xl pb-[calc(1.5rem+var(--safe-bottom))] max-w-lg mx-auto animate-slide-up
 			lg:bottom-auto lg:left-1/2 lg:top-1/2 lg:-translate-x-1/2 lg:-translate-y-1/2 lg:rounded-2xl lg:max-w-md lg:w-full lg:pb-6 lg:animate-fade-in"
+		style="bottom: {bottomOffset}px"
 	>
 		<!-- Handle (mobile only) -->
 		<div class="w-10 h-1 bg-zinc-700 rounded-full mx-auto mb-4 lg:hidden"></div>

src/routes/(app)/diary/[date]/add-entry/+page.svelte

@@ -13,7 +13,9 @@
   import { kcal, g } from "$lib/utils/format";
   import { today } from "$lib/utils/date";
 
-  const date = $derived(page.params.date === 'today' ? today() : page.params.date!);
+  const date = $derived(
+    page.params.date === "today" ? today() : page.params.date!,
+  );
   const mealId = $derived(Number(page.url.searchParams.get("meal_id")));
   const queryClient = useQueryClient();
 
@@ -31,16 +33,8 @@
   let scanError = $state<string | null>(null);
 
   let searchInput = $state<HTMLInputElement | null>(null);
-  $effect(() => {
-    if (searchInput) setTimeout(() => searchInput?.focus(), 50);
-  });
 
   let gramsInput = $state<HTMLInputElement | null>(null);
-  $effect(() => {
-    if (selectedProduct && gramsInput) {
-      setTimeout(() => gramsInput?.focus(), 50);
-    }
-  });
 
   function handleSearch(value: string) {
     q = value;
@@ -147,6 +141,7 @@
         </svg>
         <input
           bind:this={searchInput}
+          autofocus
           type="search"
           placeholder="Search foods…"
           value={q}
@@ -300,7 +295,6 @@
           onpointerdown={(e) => e.preventDefault()}
           onclick={() => {
             grams = Math.max(1, grams - 10);
-            gramsInput?.focus();
           }}
           class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center"
           >−</button
@@ -312,6 +306,7 @@
           min="1"
           max="5000"
           inputmode="decimal"
+          autofocus
           onfocus={(e) => e.currentTarget.select()}
           onkeydown={(e) => {
             if (e.key === "Enter") handleAddEntry();
@@ -322,7 +317,6 @@
           onpointerdown={(e) => e.preventDefault()}
           onclick={() => {
             grams = grams + 10;
-            gramsInput?.focus();
           }}
           class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center"
           >+</button

src/routes/(app)/diary/[date]/edit-entry/[entry_id]/+page.svelte

@@ -1,42 +1,48 @@
 <script lang="ts">
-	import { page } from '$app/state';
+  import { page } from "$app/state";
-	import { goto } from '$app/navigation';
+  import { goto } from "$app/navigation";
-	import { useQueryClient } from '@tanstack/svelte-query';
+  import { useQueryClient } from "@tanstack/svelte-query";
-	import { deleteEntry } from '$lib/api/entries';
+  import { deleteEntry } from "$lib/api/entries";
-	import { offlineEditEntry } from '$lib/offline/mutations';
+  import { offlineEditEntry } from "$lib/offline/mutations";
-	import { network } from '$lib/offline/network.svelte';
+  import { network } from "$lib/offline/network.svelte";
-	import TopBar from '$lib/components/ui/TopBar.svelte';
+  import TopBar from "$lib/components/ui/TopBar.svelte";
-	import { today } from '$lib/utils/date';
+  import { today } from "$lib/utils/date";
 
-	const date = $derived(page.params.date === 'today' ? today() : page.params.date!);
+  const date = $derived(
+    page.params.date === "today" ? today() : page.params.date!,
+  );
   const entryId = $derived(Number(page.params.entry_id));
   const queryClient = useQueryClient();
 
   // Read entry from cache — diary was already fetched on the diary page
   const cachedDiary = $derived(
-		queryClient.getQueryData<import('$lib/types/api').Diary>(['diary', date])
+    queryClient.getQueryData<import("$lib/types/api").Diary>(["diary", date]),
   );
   const entry = $derived(
-		cachedDiary?.meals.flatMap(m => m.entries).find(e => e.id === entryId)
+    cachedDiary?.meals.flatMap((m) => m.entries).find((e) => e.id === entryId),
   );
 
   let grams = $state(entry?.grams ?? 100);
-	$effect(() => { if (entry) grams = entry.grams; });
+  $effect(() => {
+    if (entry) grams = entry.grams;
+  });
 
   let saving = $state(false);
   let deleting = $state(false);
 
   let gramsInput = $state<HTMLInputElement | null>(null);
-	$effect(() => {
-		if (entry && gramsInput) gramsInput.focus();
-	});
 
-	const preview = $derived(entry ? {
+  const preview = $derived(
-		calories: Math.round(entry.product.calories * grams / 100),
+    entry
-		protein: Math.round(entry.product.protein * grams / 100 * 10) / 10,
+      ? {
-		carb: Math.round(entry.product.carb * grams / 100 * 10) / 10,
+          calories: Math.round((entry.product.calories * grams) / 100),
-		fat: Math.round(entry.product.fat * grams / 100 * 10) / 10,
+          protein:
-	} : null);
+            Math.round(((entry.product.protein * grams) / 100) * 10) / 10,
+          carb: Math.round(((entry.product.carb * grams) / 100) * 10) / 10,
+          fat: Math.round(((entry.product.fat * grams) / 100) * 10) / 10,
+        }
+      : null,
+  );
 
   async function handleSave() {
     if (!entry) return;
@@ -52,11 +58,11 @@
   }
 
   async function handleDelete() {
-		if (!confirm('Remove this entry?')) return;
+    if (!confirm("Remove this entry?")) return;
     deleting = true;
     try {
       await deleteEntry(date, entry!.meal_id, entryId);
-			await queryClient.invalidateQueries({ queryKey: ['diary', date] });
+      await queryClient.invalidateQueries({ queryKey: ["diary", date] });
       goto(`/diary/${date}`);
     } catch {
       goto(`/diary/${date}`);
@@ -75,8 +81,18 @@
         class="w-10 h-10 flex items-center justify-center rounded-full text-zinc-500 hover:text-red-400 hover:bg-red-400/10 transition-colors"
         aria-label="Delete entry"
       >
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          class="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
         </svg>
       </button>
     {/snippet}
@@ -92,7 +108,8 @@
       <div class="bg-zinc-900 rounded-2xl px-4 py-4">
         <p class="font-semibold capitalize">{entry.product.name}</p>
         <p class="text-xs text-zinc-500 mt-1">
-					{entry.product.calories} kcal · P {entry.product.protein}g · C {entry.product.carb}g · F {entry.product.fat}g
+          {entry.product.calories} kcal · P {entry.product.protein}g · C {entry
+            .product.carb}g · F {entry.product.fat}g
           <span class="text-zinc-600">per 100g</span>
         </p>
       </div>
@@ -100,12 +117,7 @@
       <!-- Macro preview -->
       {#if preview}
         <div class="grid grid-cols-4 gap-2">
-					{#each [
+          {#each [{ label: "kcal", value: preview.calories }, { label: "protein", value: preview.protein + "g" }, { label: "carbs", value: preview.carb + "g" }, { label: "fat", value: preview.fat + "g" }] as m}
-						{ label: 'kcal', value: preview.calories },
-						{ label: 'protein', value: preview.protein + 'g' },
-						{ label: 'carbs', value: preview.carb + 'g' },
-						{ label: 'fat', value: preview.fat + 'g' },
-					] as m}
             <div class="bg-zinc-900 rounded-xl p-2.5 text-center">
               <p class="text-base font-semibold">{m.value}</p>
               <p class="text-xs text-zinc-500 mt-0.5">{m.label}</p>
@@ -120,9 +132,12 @@
         <div class="flex items-center gap-3">
           <button
             onpointerdown={(e) => e.preventDefault()}
-						onclick={() => { grams = Math.max(1, grams - 10); gramsInput?.focus(); }}
+            onclick={() => {
+              grams = Math.max(1, grams - 10);
+            }}
             class="w-12 h-12 rounded-xl bg-zinc-900 hover:bg-zinc-800 transition-colors text-xl font-medium flex items-center justify-center"
-					>−</button>
+            >−</button
+          >
           <input
             bind:this={gramsInput}
             type="number"
@@ -130,15 +145,21 @@
             min="1"
             max="5000"
             inputmode="decimal"
+            autofocus
             onfocus={(e) => e.currentTarget.select()}
-						onkeydown={(e) => { if (e.key === 'Enter') handleSave(); }}
+            onkeydown={(e) => {
+              if (e.key === "Enter") handleSave();
+            }}
             class="flex-1 bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-center text-2xl font-semibold focus:outline-none focus:border-green-500 transition-colors"
           />
           <button
             onpointerdown={(e) => e.preventDefault()}
-						onclick={() => { grams = grams + 10; gramsInput?.focus(); }}
+            onclick={() => {
+              grams = grams + 10;
+            }}
             class="w-12 h-12 rounded-xl bg-zinc-900 hover:bg-zinc-800 transition-colors text-xl font-medium flex items-center justify-center"
-					>+</button>
+            >+</button
+          >
         </div>
       </div>
     </main>
@@ -149,7 +170,11 @@
         disabled={saving || grams < 1 || grams === entry.grams}
         class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-40 rounded-xl py-3.5 font-semibold transition-colors"
       >
-				{saving ? 'Saving…' : network.online ? 'Save changes' : 'Save changes (offline)'}
+        {saving
+          ? "Saving…"
+          : network.online
+            ? "Save changes"
+            : "Save changes (offline)"}
       </button>
     </div>
   {/if}

src/routes/(app)/presets/+page.svelte

@@ -547,7 +547,6 @@
             onpointerdown={(e) => e.preventDefault()}
             onclick={() => {
               editGrams = Math.max(1, editGrams - 10);
-              editGramsInput?.focus();
             }}
             class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center"
             >−</button
@@ -557,6 +556,7 @@
             type="number"
             bind:value={editGrams}
             min="1"
+            autofocus
             inputmode="decimal"
             onfocus={(e) => e.currentTarget.select()}
             class="flex-1 bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-2.5 text-center text-xl font-semibold focus:outline-none focus:border-green-500 transition-colors"
@@ -566,7 +566,6 @@
             onpointerdown={(e) => e.preventDefault()}
             onclick={() => {
               editGrams = editGrams + 10;
-              editGramsInput?.focus();
             }}
             class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center"
             >+</button
@@ -655,7 +654,6 @@
               onpointerdown={(e) => e.preventDefault()}
               onclick={() => {
                 addGrams = Math.max(1, addGrams - 10);
-                addGramsInput?.focus();
               }}
               class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center"
               >−</button
@@ -675,7 +673,6 @@
               onpointerdown={(e) => e.preventDefault()}
               onclick={() => {
                 addGrams = addGrams + 10;
-                addGramsInput?.focus();
               }}
               class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center"
               >+</button