doman/fooder-app
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[ts] lint

Browse source
This commit is contained in:
Piotr Domański 2026-04-16 11:37:28 +02:00
parent 8656e92c5d
commit 4eef8a0f05
34 changed files with 2561 additions and 2062 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/lib/components/diary/CalendarPicker.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { today } from '$lib/utils/date'; import { today } from "$lib/utils/date";
interface Props { interface Props {
selected: string; selected: string;
@ -14,21 +14,28 @@
let viewMonth = $state(parseInt(selected.slice(5, 7)) - 1); // 0-based let viewMonth = $state(parseInt(selected.slice(5, 7)) - 1); // 0-based
function prevMonth() { function prevMonth() {
if (viewMonth === 0) { viewYear--; viewMonth = 11; } if (viewMonth === 0) {
else viewMonth--; viewYear--;
viewMonth = 11;
} else viewMonth--;
} }
function nextMonth() { function nextMonth() {
if (viewMonth === 11) { viewYear++; viewMonth = 0; } if (viewMonth === 11) {
else viewMonth++; viewYear++;
viewMonth = 0;
} else viewMonth++;
} }
const monthLabel = $derived( const monthLabel = $derived(
new Date(viewYear, viewMonth, 1).toLocaleDateString(undefined, { month: 'long', year: 'numeric' }) new Date(viewYear, viewMonth, 1).toLocaleDateString(undefined, {
month: "long",
year: "numeric",
}),
); );
function iso(year: number, month: number, day: number): string { function iso(year: number, month: number, day: number): string {
return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
} }
const cells = $derived.by(() => { const cells = $derived.by(() => {
@ -37,7 +44,8 @@
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate(); const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
const result: (string | null)[] = []; const result: (string | null)[] = [];
for (let i = 0; i < startDow; i++) result.push(null); for (let i = 0; i < startDow; i++) result.push(null);
for (let d = 1; d <= daysInMonth; d++) result.push(iso(viewYear, viewMonth, d)); for (let d = 1; d <= daysInMonth; d++)
result.push(iso(viewYear, viewMonth, d));
return result; return result;
}); });
</script> </script>
@ -48,8 +56,18 @@
onclick={prevMonth} onclick={prevMonth}
class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
/>
</svg> </svg>
</button> </button>
<span class="font-medium text-sm">{monthLabel}</span> <span class="font-medium text-sm">{monthLabel}</span>
@ -57,14 +75,24 @@
onclick={nextMonth} onclick={nextMonth}
class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="grid grid-cols-7 mb-1"> <div class="grid grid-cols-7 mb-1">
{#each ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] as h} {#each ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] as h}
<div class="text-center text-xs text-zinc-600 py-1">{h}</div> <div class="text-center text-xs text-zinc-600 py-1">{h}</div>
{/each} {/each}
</div> </div>

18
src/lib/components/diary/DateNav.svelte
View file

@ -18,13 +18,20 @@
aria-label="Previous day" aria-label="Previous day"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg 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="M15 19l-7-7 7-7" /> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
/>
</svg> </svg>
</button> </button>
<button <button
onclick={onDateClick} onclick={onDateClick}
class="text-center {onDateClick ? 'hover:opacity-70 transition-opacity' : 'cursor-default'}" class="text-center {onDateClick
? 'hover:opacity-70 transition-opacity'
: 'cursor-default'}"
> >
<span class="font-semibold text-lg">{label}</span> <span class="font-semibold text-lg">{label}</span>
{#if !isToday} {#if !isToday}
@ -39,7 +46,12 @@
aria-label="Next day" aria-label="Next day"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg 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="M9 5l7 7-7 7" /> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg> </svg>
</button> </button>
</div> </div>

29
src/lib/components/diary/EntryRow.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Entry } from '$lib/types/api'; import type { Entry } from "$lib/types/api";
import { kcal, g } from '$lib/utils/format'; import { kcal, g } from "$lib/utils/format";
interface Props { interface Props {
entry: Entry; entry: Entry;
@ -15,12 +15,14 @@
role="button" role="button"
tabindex="0" tabindex="0"
onclick={() => onEdit(entry)} onclick={() => onEdit(entry)}
onkeydown={(e) => e.key === 'Enter' && onEdit(entry)} onkeydown={(e) => e.key === "Enter" && onEdit(entry)}
class="w-full flex items-center justify-between py-2.5 cursor-pointer group" class="w-full flex items-center justify-between py-2.5 cursor-pointer group"
> >
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate">{entry.product.name}</p> <p class="text-sm font-medium truncate">{entry.product.name}</p>
<p class="text-xs text-zinc-500">{entry.grams}g · {kcal(entry.calories)} kcal</p> <p class="text-xs text-zinc-500">
{entry.grams}g · {kcal(entry.calories)} kcal
</p>
</div> </div>
<div class="flex items-center gap-3 ml-3"> <div class="flex items-center gap-3 ml-3">
@ -32,12 +34,25 @@
</div> </div>
<button <button
onclick={(e) => { e.stopPropagation(); onDelete(entry.id); }} onclick={(e) => {
e.stopPropagation();
onDelete(entry.id);
}}
class="w-7 h-7 flex items-center justify-center rounded-full text-zinc-600 hover:text-red-400 hover:bg-red-400/10 transition-colors" class="w-7 h-7 flex items-center justify-center rounded-full text-zinc-600 hover:text-red-400 hover:bg-red-400/10 transition-colors"
aria-label="Delete entry" aria-label="Delete entry"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg> </svg>
</button> </button>
</div> </div>

144
src/lib/components/diary/MacroSummary.svelte
View file

@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import type { Diary } from '$lib/types/api'; import type { Diary } from "$lib/types/api";
import { kcal, g } from '$lib/utils/format'; import { kcal, g } from "$lib/utils/format";
import { updateDiary } from '$lib/api/diary'; import { updateDiary } from "$lib/api/diary";
import { updateUserSettings } from '$lib/api/settings'; import { updateUserSettings } from "$lib/api/settings";
import { useQueryClient } from '@tanstack/svelte-query'; import { useQueryClient } from "@tanstack/svelte-query";
import Sheet from '$lib/components/ui/Sheet.svelte'; import Sheet from "$lib/components/ui/Sheet.svelte";
interface Props { interface Props {
diary: Diary; diary: Diary;
@ -16,17 +16,39 @@
const queryClient = useQueryClient(); const queryClient = useQueryClient();
// Calorie ring // Calorie ring
const pct = $derived(diary.calories_goal > 0 const pct = $derived(
diary.calories_goal > 0
? Math.min(100, Math.round((diary.calories / diary.calories_goal) * 100)) ? Math.min(100, Math.round((diary.calories / diary.calories_goal) * 100))
: 0); : 0,
);
const circumference = 2 * Math.PI * 40; const circumference = 2 * Math.PI * 40;
const dash = $derived(circumference * (pct / 100)); const dash = $derived(circumference * (pct / 100));
const macroRows = $derived([ const macroRows = $derived([
{ label: 'Protein', value: g(diary.protein), goal: diary.protein_goal, color: 'bg-blue-500' }, {
{ label: 'Carbs', value: g(diary.carb), goal: diary.carb_goal, color: 'bg-yellow-500' }, label: "Protein",
{ label: 'Fat', value: g(diary.fat), goal: diary.fat_goal, color: 'bg-orange-500' }, value: g(diary.protein),
{ label: 'Fiber', value: g(diary.fiber), goal: diary.fiber_goal, color: 'bg-green-500' }, goal: diary.protein_goal,
color: "bg-blue-500",
},
{
label: "Carbs",
value: g(diary.carb),
goal: diary.carb_goal,
color: "bg-yellow-500",
},
{
label: "Fat",
value: g(diary.fat),
goal: diary.fat_goal,
color: "bg-orange-500",
},
{
label: "Fiber",
value: g(diary.fiber),
goal: diary.fiber_goal,
color: "bg-green-500",
},
]); ]);
// Goal editing sheet // Goal editing sheet
@ -63,7 +85,7 @@
saving = true; saving = true;
try { try {
await updateDiary(date, form); await updateDiary(date, form);
await queryClient.invalidateQueries({ queryKey: ['diary', date] }); await queryClient.invalidateQueries({ queryKey: ["diary", date] });
lastSavedForm = { ...form }; lastSavedForm = { ...form };
sheetOpen = false; sheetOpen = false;
syncSettingsOpen = true; syncSettingsOpen = true;
@ -82,23 +104,35 @@
<div class="bg-zinc-900 rounded-2xl p-4 relative"> <div class="bg-zinc-900 rounded-2xl p-4 relative">
<!-- Mobile: ring left, bars right. Desktop: ring top-center, bars below --> <!-- Mobile: ring left, bars right. Desktop: ring top-center, bars below -->
<div class="flex items-center gap-5 lg:flex-col lg:items-stretch lg:gap-4"> <div class="flex items-center gap-5 lg:flex-col lg:items-stretch lg:gap-4">
<!-- Calorie ring --> <!-- Calorie ring -->
<div class="relative w-24 h-24 shrink-0 lg:w-32 lg:h-32 lg:mx-auto"> <div class="relative w-24 h-24 shrink-0 lg:w-32 lg:h-32 lg:mx-auto">
<svg class="w-full h-full -rotate-90" viewBox="0 0 100 100"> <svg class="w-full h-full -rotate-90" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="none" stroke="#27272a" stroke-width="10" />
<circle <circle
cx="50" cy="50" r="40" fill="none" cx="50"
stroke="#16a34a" stroke-width="10" cy="50"
r="40"
fill="none"
stroke="#27272a"
stroke-width="10"
/>
<circle
cx="50"
cy="50"
r="40"
fill="none"
stroke="#16a34a"
stroke-width="10"
stroke-linecap="round" stroke-linecap="round"
stroke-dasharray="{dash} {circumference}" stroke-dasharray="{dash} {circumference}"
class="transition-all duration-500" class="transition-all duration-500"
/> />
</svg> </svg>
<div class="absolute inset-0 flex flex-col items-center justify-center"> <div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-xl font-bold leading-none lg:text-2xl">{kcal(diary.calories)}</span> <span class="text-xl font-bold leading-none lg:text-2xl"
>{kcal(diary.calories)}</span
>
<span class="text-xs text-zinc-500"> <span class="text-xs text-zinc-500">
{diary.calories_goal > 0 ? `/ ${kcal(diary.calories_goal)}` : 'kcal'} {diary.calories_goal > 0 ? `/ ${kcal(diary.calories_goal)}` : "kcal"}
</span> </span>
</div> </div>
</div> </div>
@ -110,13 +144,15 @@
<div class="flex justify-between text-xs text-zinc-400 mb-1"> <div class="flex justify-between text-xs text-zinc-400 mb-1">
<span>{macro.label}</span> <span>{macro.label}</span>
<span class="font-medium text-zinc-200"> <span class="font-medium text-zinc-200">
{macro.value}g{macro.goal > 0 ? ` / ${macro.goal}g` : ''} {macro.value}g{macro.goal > 0 ? ` / ${macro.goal}g` : ""}
</span> </span>
</div> </div>
<div class="h-1.5 bg-zinc-800 rounded-full overflow-hidden"> <div class="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
<div <div
class="h-full {macro.color} rounded-full transition-all duration-500" class="h-full {macro.color} rounded-full transition-all duration-500"
style="width: {macro.goal > 0 ? Math.min(100, (macro.value / macro.goal) * 100) : 0}%" style="width: {macro.goal > 0
? Math.min(100, (macro.value / macro.goal) * 100)
: 0}%"
></div> ></div>
</div> </div>
</div> </div>
@ -125,39 +161,63 @@
<!-- Edit goals button --> <!-- Edit goals button -->
<button <button
onclick={() => sheetOpen = true} onclick={() => (sheetOpen = true)}
class="self-start shrink-0 w-7 h-7 flex items-center justify-center rounded-full text-zinc-600 hover:text-zinc-300 hover:bg-zinc-800 transition-colors lg:absolute lg:top-3 lg:right-3" class="self-start shrink-0 w-7 h-7 flex items-center justify-center rounded-full text-zinc-600 hover:text-zinc-300 hover:bg-zinc-800 transition-colors lg:absolute lg:top-3 lg:right-3"
aria-label="Edit day goals" aria-label="Edit day goals"
> >
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> class="w-3.5 h-3.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
<Sheet open={syncSettingsOpen} onclose={() => syncSettingsOpen = false} title="Update global settings?"> <Sheet
<p class="text-sm text-zinc-400 mb-5">Override your default macro goals in user settings with these values as well?</p> open={syncSettingsOpen}
onclose={() => (syncSettingsOpen = false)}
title="Update global settings?"
>
<p class="text-sm text-zinc-400 mb-5">
Override your default macro goals in user settings with these values as
well?
</p>
<div class="flex gap-3"> <div class="flex gap-3">
<button <button
onclick={() => syncSettingsOpen = false} onclick={() => (syncSettingsOpen = false)}
class="flex-1 bg-zinc-800 hover:bg-zinc-700 rounded-xl py-3 text-sm font-medium transition-colors" class="flex-1 bg-zinc-800 hover:bg-zinc-700 rounded-xl py-3 text-sm font-medium transition-colors"
>No</button> >No</button
>
<button <button
onclick={handleSyncToSettings} onclick={handleSyncToSettings}
class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors" class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors"
>Yes</button> >Yes</button
>
</div> </div>
</Sheet> </Sheet>
<Sheet open={sheetOpen} onclose={() => sheetOpen = false} title="Day goals"> <Sheet open={sheetOpen} onclose={() => (sheetOpen = false)} title="Day goals">
<form onsubmit={handleSave} class="space-y-4"> <form onsubmit={handleSave} class="space-y-4">
<!-- Calories: null = auto-calculated by server from macros --> <!-- Calories: null = auto-calculated by server from macros -->
<div> <div>
<div class="flex items-center justify-between mb-1.5"> <div class="flex items-center justify-between mb-1.5">
<label class="text-sm text-zinc-400">Calories <span class="text-zinc-600">(kcal)</span></label> <label class="text-sm text-zinc-400"
>Calories <span class="text-zinc-600">(kcal)</span></label
>
{#if form.calories_goal === null} {#if form.calories_goal === null}
<span class="text-xs font-medium text-zinc-500 bg-zinc-800 px-2 py-0.5 rounded-full">auto</span> <span
class="text-xs font-medium text-zinc-500 bg-zinc-800 px-2 py-0.5 rounded-full"
>auto</span
>
{/if} {/if}
</div> </div>
<input <input
@ -167,21 +227,21 @@
value={form.calories_goal ?? diary.calories_goal} value={form.calories_goal ?? diary.calories_goal}
oninput={(e) => { oninput={(e) => {
const v = e.currentTarget.value; const v = e.currentTarget.value;
form.calories_goal = v === '' ? null : Number(v); form.calories_goal = v === "" ? null : Number(v);
}} }}
class="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-2.5 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors" class="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-2.5 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
/> />
<p class="text-xs text-zinc-600 mt-1">Clear to auto-calculate from macro goals</p> <p class="text-xs text-zinc-600 mt-1">
Clear to auto-calculate from macro goals
</p>
</div> </div>
{#each [ {#each [{ label: "Protein", key: "protein_goal" as const, unit: "g" }, { label: "Carbs", key: "carb_goal" as const, unit: "g" }, { label: "Fat", key: "fat_goal" as const, unit: "g" }, { label: "Fiber", key: "fiber_goal" as const, unit: "g" }] as field}
{ label: 'Protein', key: 'protein_goal' as const, unit: 'g' },
{ label: 'Carbs', key: 'carb_goal' as const, unit: 'g' },
{ label: 'Fat', key: 'fat_goal' as const, unit: 'g' },
{ label: 'Fiber', key: 'fiber_goal' as const, unit: 'g' },
] as field}
<div> <div>
<label class="block text-sm text-zinc-400 mb-1.5">{field.label} <span class="text-zinc-600">({field.unit})</span></label> <label class="block text-sm text-zinc-400 mb-1.5"
>{field.label}
<span class="text-zinc-600">({field.unit})</span></label
>
<input <input
type="number" type="number"
min="0" min="0"
@ -197,7 +257,7 @@
disabled={saving} disabled={saving}
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors" class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
> >
{saving ? 'Saving…' : 'Save'} {saving ? "Saving…" : "Save"}
</button> </button>
</form> </form>
</Sheet> </Sheet>

142
src/lib/components/diary/MealCard.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import type { Meal } from '$lib/types/api'; import type { Meal } from "$lib/types/api";
import { kcal, g } from '$lib/utils/format'; import { kcal, g } from "$lib/utils/format";
import EntryRow from './EntryRow.svelte'; import EntryRow from "./EntryRow.svelte";
import { useQueryClient } from '@tanstack/svelte-query'; import { useQueryClient } from "@tanstack/svelte-query";
import { deleteMeal, renameMeal, saveMealAsPreset } from '$lib/api/meals'; import { deleteMeal, renameMeal, saveMealAsPreset } from "$lib/api/meals";
import { deleteEntry } from '$lib/api/entries'; import { deleteEntry } from "$lib/api/entries";
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import Sheet from '$lib/components/ui/Sheet.svelte'; import Sheet from "$lib/components/ui/Sheet.svelte";
interface Props { interface Props {
meal: Meal; meal: Meal;
@ -19,10 +19,10 @@
let collapsed = $state(false); let collapsed = $state(false);
let saving = $state(false); let saving = $state(false);
let renameOpen = $state(false); let renameOpen = $state(false);
let renameName = $state(''); let renameName = $state("");
let renaming = $state(false); let renaming = $state(false);
let presetOpen = $state(false); let presetOpen = $state(false);
let presetName = $state(''); let presetName = $state("");
function openRename() { function openRename() {
renameName = meal.name; renameName = meal.name;
@ -35,7 +35,7 @@
renaming = true; renaming = true;
try { try {
await renameMeal(date, meal.id, renameName.trim()); await renameMeal(date, meal.id, renameName.trim());
queryClient.invalidateQueries({ queryKey: ['diary', date] }); queryClient.invalidateQueries({ queryKey: ["diary", date] });
renameOpen = false; renameOpen = false;
} finally { } finally {
renaming = false; renaming = false;
@ -45,7 +45,7 @@
async function handleDeleteMeal() { async function handleDeleteMeal() {
if (!confirm(`Delete meal "${meal.name}"?`)) return; if (!confirm(`Delete meal "${meal.name}"?`)) return;
await deleteMeal(date, meal.id); await deleteMeal(date, meal.id);
queryClient.invalidateQueries({ queryKey: ['diary', date] }); queryClient.invalidateQueries({ queryKey: ["diary", date] });
} }
function openPresetSheet() { function openPresetSheet() {
@ -58,7 +58,7 @@
saving = true; saving = true;
try { try {
await saveMealAsPreset(date, meal.id, presetName.trim() || meal.name); await saveMealAsPreset(date, meal.id, presetName.trim() || meal.name);
queryClient.invalidateQueries({ queryKey: ['presets'] }); queryClient.invalidateQueries({ queryKey: ["presets"] });
presetOpen = false; presetOpen = false;
} finally { } finally {
saving = false; saving = false;
@ -67,30 +67,44 @@
async function handleDeleteEntry(entryId: number) { async function handleDeleteEntry(entryId: number) {
await deleteEntry(date, meal.id, entryId); await deleteEntry(date, meal.id, entryId);
queryClient.invalidateQueries({ queryKey: ['diary', date] }); queryClient.invalidateQueries({ queryKey: ["diary", date] });
} }
function handleEditEntry(entry: import('$lib/types/api').Entry) { function handleEditEntry(entry: import("$lib/types/api").Entry) {
goto(`/diary/${date}/edit-entry/${entry.id}`); goto(`/diary/${date}/edit-entry/${entry.id}`);
} }
</script> </script>
<div class="bg-zinc-900 rounded-2xl overflow-hidden"> <div class="bg-zinc-900 rounded-2xl overflow-hidden">
<!-- Meal header --> <!-- Meal header -->
<div class="flex items-center justify-between px-4 py-3 border-b border-zinc-800"> <div
class="flex items-center justify-between px-4 py-3 border-b border-zinc-800"
>
<button <button
onclick={() => collapsed = !collapsed} onclick={() => (collapsed = !collapsed)}
class="flex-1 flex items-center gap-2 text-left min-w-0" class="flex-1 flex items-center gap-2 text-left min-w-0"
> >
<svg <svg
class="w-4 h-4 text-zinc-500 shrink-0 transition-transform {collapsed ? '-rotate-90' : ''}" class="w-4 h-4 text-zinc-500 shrink-0 transition-transform {collapsed
fill="none" stroke="currentColor" viewBox="0 0 24 24" ? '-rotate-90'
: ''}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg> </svg>
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="font-medium truncate">{meal.name}</p> <p class="font-medium truncate">{meal.name}</p>
<p class="text-xs text-zinc-500">{kcal(meal.calories)} kcal · P {g(meal.protein)}g · C {g(meal.carb)}g · Fat {g(meal.fat)}g · Fib {g(meal.fiber)}g</p> <p class="text-xs text-zinc-500">
{kcal(meal.calories)} kcal · P {g(meal.protein)}g · C {g(meal.carb)}g
· Fat {g(meal.fat)}g · Fib {g(meal.fiber)}g
</p>
</div> </div>
</button> </button>
@ -101,8 +115,18 @@
class="flex items-center gap-1 px-2.5 h-7 rounded-full bg-green-600 hover:bg-green-500 text-white transition-colors text-xs font-medium" class="flex items-center gap-1 px-2.5 h-7 rounded-full bg-green-600 hover:bg-green-500 text-white transition-colors text-xs font-medium"
aria-label="Add food" aria-label="Add food"
> >
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" /> class="w-3.5 h-3.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
d="M12 4v16m8-8H4"
/>
</svg> </svg>
Add Add
</button> </button>
@ -113,8 +137,18 @@
class="w-8 h-8 flex items-center justify-center rounded-full text-zinc-500 hover:text-blue-400 hover:bg-blue-400/10 transition-colors" class="w-8 h-8 flex items-center justify-center rounded-full text-zinc-500 hover:text-blue-400 hover:bg-blue-400/10 transition-colors"
aria-label="Rename meal" aria-label="Rename meal"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg> </svg>
</button> </button>
@ -126,12 +160,32 @@
aria-label="Save as preset" aria-label="Save as preset"
> >
{#if saving} {#if saving}
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> class="w-4 h-4 animate-spin"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg> </svg>
{:else} {:else}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /> class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
/>
</svg> </svg>
{/if} {/if}
</button> </button>
@ -142,8 +196,18 @@
class="w-8 h-8 flex items-center justify-center rounded-full text-zinc-600 hover:text-red-400 hover:bg-red-400/10 transition-colors" class="w-8 h-8 flex items-center justify-center rounded-full text-zinc-600 hover:text-red-400 hover:bg-red-400/10 transition-colors"
aria-label="Delete meal" aria-label="Delete meal"
> >
<svg class="w-4 h-4" 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-4 h-4"
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> </svg>
</button> </button>
</div> </div>
@ -171,7 +235,11 @@
{/if} {/if}
</div> </div>
<Sheet open={presetOpen} onclose={() => presetOpen = false} title="Save as preset"> <Sheet
open={presetOpen}
onclose={() => (presetOpen = false)}
title="Save as preset"
>
<form onsubmit={handleSavePreset} class="space-y-4"> <form onsubmit={handleSavePreset} class="space-y-4">
<div> <div>
<label class="block text-sm text-zinc-400 mb-1.5">Preset name</label> <label class="block text-sm text-zinc-400 mb-1.5">Preset name</label>
@ -188,12 +256,16 @@
disabled={saving || !presetName.trim()} disabled={saving || !presetName.trim()}
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors" class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
> >
{saving ? 'Saving…' : 'Save preset'} {saving ? "Saving…" : "Save preset"}
</button> </button>
</form> </form>
</Sheet> </Sheet>
<Sheet open={renameOpen} onclose={() => renameOpen = false} title="Rename meal"> <Sheet
open={renameOpen}
onclose={() => (renameOpen = false)}
title="Rename meal"
>
<form onsubmit={handleRename} class="space-y-4"> <form onsubmit={handleRename} class="space-y-4">
<input <input
type="text" type="text"
@ -207,7 +279,7 @@
disabled={renaming || !renameName.trim()} disabled={renaming || !renameName.trim()}
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors" class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
> >
{renaming ? 'Saving…' : 'Save'} {renaming ? "Saving…" : "Save"}
</button> </button>
</form> </form>
</Sheet> </Sheet>

115
src/lib/components/ui/BarcodeScanner.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from "svelte";
interface Props { interface Props {
ondetect: (barcode: string) => void; ondetect: (barcode: string) => void;
@ -18,19 +18,26 @@
onMount(async () => { onMount(async () => {
// Use native BarcodeDetector if available, otherwise load polyfill (Safari, Firefox) // Use native BarcodeDetector if available, otherwise load polyfill (Safari, Firefox)
let BarcodeDetectorImpl: typeof BarcodeDetector; let BarcodeDetectorImpl: typeof BarcodeDetector;
if ('BarcodeDetector' in window) { if ("BarcodeDetector" in window) {
BarcodeDetectorImpl = BarcodeDetector; BarcodeDetectorImpl = BarcodeDetector;
} else { } else {
const { BarcodeDetector: Polyfill } = await import('barcode-detector/ponyfill'); const { BarcodeDetector: Polyfill } = await import(
"barcode-detector/ponyfill"
);
BarcodeDetectorImpl = Polyfill as unknown as typeof BarcodeDetector; BarcodeDetectorImpl = Polyfill as unknown as typeof BarcodeDetector;
} }
try { try {
stream = await navigator.mediaDevices.getUserMedia({ stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } } video: {
facingMode: "environment",
width: { ideal: 1280 },
height: { ideal: 720 },
},
}); });
} catch { } catch {
error = 'Camera access denied. Please allow camera permission and try again.'; error =
"Camera access denied. Please allow camera permission and try again.";
return; return;
} }
@ -38,7 +45,17 @@
videoEl.srcObject = stream; videoEl.srcObject = stream;
await videoEl.play(); await videoEl.play();
detector = new BarcodeDetectorImpl({ formats: ['ean_13', 'ean_8', 'upc_a', 'upc_e', 'code_128', 'code_39', 'qr_code'] }); detector = new BarcodeDetectorImpl({
formats: [
"ean_13",
"ean_8",
"upc_a",
"upc_e",
"code_128",
"code_39",
"qr_code",
],
});
scanLoop(); scanLoop();
}); });
@ -46,7 +63,7 @@
function cleanup() { function cleanup() {
if (animFrame !== null) cancelAnimationFrame(animFrame); if (animFrame !== null) cancelAnimationFrame(animFrame);
stream?.getTracks().forEach(t => t.stop()); stream?.getTracks().forEach((t) => t.stop());
} }
async function scanLoop() { async function scanLoop() {
@ -74,15 +91,30 @@
<!-- Full-screen scanner overlay --> <!-- Full-screen scanner overlay -->
<div class="fixed inset-0 z-50 bg-black flex flex-col"> <div class="fixed inset-0 z-50 bg-black flex flex-col">
<!-- Top bar --> <!-- Top bar -->
<div class="flex items-center justify-between px-4 pt-[calc(1rem+var(--safe-top))] pb-4"> <div
class="flex items-center justify-between px-4 pt-[calc(1rem+var(--safe-top))] pb-4"
>
<span class="text-sm font-medium text-white">Scan barcode</span> <span class="text-sm font-medium text-white">Scan barcode</span>
<button <button
onclick={() => { cleanup(); onclose(); }} onclick={() => {
cleanup();
onclose();
}}
class="w-9 h-9 flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors" class="w-9 h-9 flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors"
aria-label="Close scanner" aria-label="Close scanner"
> >
<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="M6 18L18 6M6 6l12 12" /> 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="M6 18L18 6M6 6l12 12"
/>
</svg> </svg>
</button> </button>
</div> </div>
@ -90,8 +122,18 @@
{#if error} {#if error}
<div class="flex-1 flex items-center justify-center px-8 text-center"> <div class="flex-1 flex items-center justify-center px-8 text-center">
<div> <div>
<svg class="w-12 h-12 text-zinc-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01M5.07 19H19a2 2 0 001.75-2.97L13.75 4a2 2 0 00-3.5 0L3.25 16.03A2 2 0 005.07 19z" /> class="w-12 h-12 text-zinc-500 mx-auto mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M12 9v2m0 4h.01M5.07 19H19a2 2 0 001.75-2.97L13.75 4a2 2 0 00-3.5 0L3.25 16.03A2 2 0 005.07 19z"
/>
</svg> </svg>
<p class="text-white text-sm">{error}</p> <p class="text-white text-sm">{error}</p>
</div> </div>
@ -117,18 +159,40 @@
<div class="absolute inset-0 bg-transparent mix-blend-normal"></div> <div class="absolute inset-0 bg-transparent mix-blend-normal"></div>
<!-- Corner brackets --> <!-- Corner brackets -->
<div class="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-green-400 rounded-tl"></div> <div
<div class="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-green-400 rounded-tr"></div> class="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-green-400 rounded-tl"
<div class="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-green-400 rounded-bl"></div> ></div>
<div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-green-400 rounded-br"></div> <div
class="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-green-400 rounded-tr"
></div>
<div
class="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-green-400 rounded-bl"
></div>
<div
class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-green-400 rounded-br"
></div>
<!-- Scanning line --> <!-- Scanning line -->
{#if !detected} {#if !detected}
<div class="absolute left-1 right-1 h-0.5 bg-green-400/80 rounded animate-scan"></div> <div
class="absolute left-1 right-1 h-0.5 bg-green-400/80 rounded animate-scan"
></div>
{:else} {:else}
<div class="absolute inset-0 bg-green-400/20 rounded flex items-center justify-center"> <div
<svg class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="absolute inset-0 bg-green-400/20 rounded flex items-center justify-center"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" /> >
<svg
class="w-8 h-8 text-green-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
d="M5 13l4 4L19 7"
/>
</svg> </svg>
</div> </div>
{/if} {/if}
@ -145,8 +209,13 @@
<style> <style>
@keyframes scan { @keyframes scan {
0%, 100% { top: 8px; } 0%,
50% { top: calc(100% - 8px); } 100% {
top: 8px;
}
50% {
top: calc(100% - 8px);
}
} }
.animate-scan { .animate-scan {
animation: scan 1.8s ease-in-out infinite; animation: scan 1.8s ease-in-out infinite;

37
src/lib/components/ui/Sheet.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from "svelte";
interface Props { interface Props {
open: boolean; open: boolean;
onclose: () => void; onclose: () => void;
title?: string; title?: string;
children: import('svelte').Snippet; children: import("svelte").Snippet;
} }
let { open, onclose, title, children }: Props = $props(); let { open, onclose, title, children }: Props = $props();
@ -17,15 +17,18 @@
if (!vv) return; if (!vv) return;
function update() { function update() {
bottomOffset = Math.max(0, window.innerHeight - vv!.offsetTop - vv!.height); bottomOffset = Math.max(
0,
window.innerHeight - vv!.offsetTop - vv!.height,
);
} }
vv.addEventListener('resize', update); vv.addEventListener("resize", update);
vv.addEventListener('scroll', update); vv.addEventListener("scroll", update);
return () => { return () => {
vv.removeEventListener('resize', update); vv.removeEventListener("resize", update);
vv.removeEventListener('scroll', update); vv.removeEventListener("scroll", update);
}; };
}); });
@ -34,7 +37,7 @@
} }
function handleKey(e: KeyboardEvent) { function handleKey(e: KeyboardEvent) {
if (e.key === 'Escape') onclose(); if (e.key === "Escape") onclose();
} }
</script> </script>
@ -68,12 +71,22 @@
<style> <style>
@keyframes slide-up { @keyframes slide-up {
from { transform: translateY(100%); } from {
to { transform: translateY(0); } transform: translateY(100%);
}
to {
transform: translateY(0);
}
} }
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; transform: translate(-50%, -48%); } from {
to { opacity: 1; transform: translate(-50%, -50%); } opacity: 0;
transform: translate(-50%, -48%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
} }
.animate-slide-up { .animate-slide-up {
animation: slide-up 0.22s cubic-bezier(0.32, 0.72, 0, 1); animation: slide-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);

24
src/lib/components/ui/TopBar.svelte
View file

@ -1,30 +1,42 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
interface Props { interface Props {
title: string; title: string;
back?: string | (() => void); back?: string | (() => void);
action?: import('svelte').Snippet; action?: import("svelte").Snippet;
} }
let { title, back, action }: Props = $props(); let { title, back, action }: Props = $props();
function handleBack() { function handleBack() {
if (!back) return; if (!back) return;
if (typeof back === 'function') back(); if (typeof back === "function") back();
else goto(back); else goto(back);
} }
</script> </script>
<header class="flex items-center gap-3 px-2 pt-[calc(0.75rem+var(--safe-top))] pb-3 bg-zinc-950 sticky top-0 z-10 border-b border-zinc-800"> <header
class="flex items-center gap-3 px-2 pt-[calc(0.75rem+var(--safe-top))] pb-3 bg-zinc-950 sticky top-0 z-10 border-b border-zinc-800"
>
{#if back} {#if back}
<button <button
onclick={handleBack} onclick={handleBack}
class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors shrink-0 lg:hidden" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors shrink-0 lg:hidden"
aria-label="Go back" aria-label="Go back"
> >
<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="M15 19l-7-7 7-7" /> 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="M15 19l-7-7 7-7"
/>
</svg> </svg>
</button> </button>
{/if} {/if}

206
src/routes/(app)/+layout.svelte
View file

@ -1,27 +1,27 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import { auth } from '$lib/auth/store.svelte'; import { auth } from "$lib/auth/store.svelte";
import { logout } from '$lib/api/auth'; import { logout } from "$lib/api/auth";
import { useQueryClient } from '@tanstack/svelte-query'; import { useQueryClient } from "@tanstack/svelte-query";
import { page } from '$app/state'; import { page } from "$app/state";
import { onMount } from 'svelte'; import { onMount } from "svelte";
import { network } from '$lib/offline/network.svelte'; import { network } from "$lib/offline/network.svelte";
import { syncOfflineQueue } from '$lib/offline/sync'; import { syncOfflineQueue } from "$lib/offline/sync";
import { getMutationQueueLength } from '$lib/offline/db'; import { getMutationQueueLength } from "$lib/offline/db";
let { children } = $props(); let { children } = $props();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
onMount(async () => { onMount(async () => {
if (!auth.isAuthenticated) goto('/login'); if (!auth.isAuthenticated) goto("/login");
// Restore pending count from IndexedDB in case of page reload while offline // Restore pending count from IndexedDB in case of page reload while offline
const queued = await getMutationQueueLength(); const queued = await getMutationQueueLength();
network.setPendingCount(queued); network.setPendingCount(queued);
// Sync on reconnect // Sync on reconnect
window.addEventListener('online', handleReconnect); window.addEventListener("online", handleReconnect);
return () => window.removeEventListener('online', handleReconnect); return () => window.removeEventListener("online", handleReconnect);
}); });
async function handleReconnect() { async function handleReconnect() {
@ -41,12 +41,12 @@ import { page } from '$app/state';
function handleLogout() { function handleLogout() {
logout(); logout();
queryClient.clear(); queryClient.clear();
goto('/login'); goto("/login");
} }
const isDiary = $derived(page.url.pathname.startsWith('/diary')); const isDiary = $derived(page.url.pathname.startsWith("/diary"));
const isPresets = $derived(page.url.pathname.startsWith('/presets')); const isPresets = $derived(page.url.pathname.startsWith("/presets"));
const isSettings = $derived(page.url.pathname.startsWith('/settings')); const isSettings = $derived(page.url.pathname.startsWith("/settings"));
</script> </script>
{#if auth.isAuthenticated} {#if auth.isAuthenticated}
@ -59,21 +59,45 @@ import { page } from '$app/state';
style="padding-top: calc(0.5rem + var(--safe-top))" style="padding-top: calc(0.5rem + var(--safe-top))"
> >
{#if network.syncing} {#if network.syncing}
<svg class="w-3.5 h-3.5 animate-spin shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> class="w-3.5 h-3.5 animate-spin shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg> </svg>
Syncing changes… Syncing changes…
{:else} {:else}
<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728M15.536 8.464a5 5 0 010 7.072M3 3l18 18" /> class="w-3.5 h-3.5 shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 5.636a9 9 0 010 12.728M15.536 8.464a5 5 0 010 7.072M3 3l18 18"
/>
</svg> </svg>
Offline{network.pendingCount > 0 ? ` · ${network.pendingCount} change${network.pendingCount === 1 ? '' : 's'} pending sync` : ''} Offline{network.pendingCount > 0
? ` · ${network.pendingCount} change${network.pendingCount === 1 ? "" : "s"} pending sync`
: ""}
{/if} {/if}
</div> </div>
{/if} {/if}
<!-- Sidebar (desktop only) --> <!-- Sidebar (desktop only) -->
<aside class="hidden lg:flex flex-col w-52 shrink-0 fixed inset-y-0 border-r border-zinc-800 bg-zinc-950 px-3 py-6 z-20"> <aside
class="hidden lg:flex flex-col w-52 shrink-0 fixed inset-y-0 border-r border-zinc-800 bg-zinc-950 px-3 py-6 z-20"
>
<div class="px-2 mb-8"> <div class="px-2 mb-8">
<span class="text-lg font-bold text-green-400">fooder</span> <span class="text-lg font-bold text-green-400">fooder</span>
</div> </div>
@ -82,30 +106,71 @@ import { page } from '$app/state';
<a <a
href="/diary/today" href="/diary/today"
class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium transition-colors class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium transition-colors
{isDiary ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900'}" {isDiary
? 'bg-zinc-800 text-zinc-100'
: 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900'}"
> >
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> class="w-4 h-4 shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg> </svg>
Diary Diary
</a> </a>
<a <a
href="/presets" href="/presets"
class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium transition-colors class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium transition-colors
{isPresets ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900'}" {isPresets
? 'bg-zinc-800 text-zinc-100'
: 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900'}"
> >
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /> class="w-4 h-4 shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
/>
</svg> </svg>
Presets Presets
</a> </a>
<a <a
href="/settings" href="/settings"
class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium transition-colors class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium transition-colors
{isSettings ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900'}" {isSettings
? 'bg-zinc-800 text-zinc-100'
: 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900'}"
> >
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> class="w-4 h-4 shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg> </svg>
Settings Settings
</a> </a>
@ -115,8 +180,18 @@ import { page } from '$app/state';
onclick={handleLogout} onclick={handleLogout}
class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900 transition-colors" class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900 transition-colors"
> >
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /> class="w-4 h-4 shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg> </svg>
Log out Log out
</button> </button>
@ -128,14 +203,26 @@ import { page } from '$app/state';
</div> </div>
<!-- Bottom tab bar (mobile only) --> <!-- Bottom tab bar (mobile only) -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 z-20 bg-zinc-950 border-t border-zinc-800 flex items-center pb-[var(--safe-bottom)]"> <nav
class="lg:hidden fixed bottom-0 left-0 right-0 z-20 bg-zinc-950 border-t border-zinc-800 flex items-center pb-[var(--safe-bottom)]"
>
<a <a
href="/diary/today" href="/diary/today"
class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium transition-colors class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium transition-colors
{isDiary ? 'text-green-400' : 'text-zinc-500 hover:text-zinc-300'}" {isDiary ? 'text-green-400' : 'text-zinc-500 hover:text-zinc-300'}"
> >
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg> </svg>
Diary Diary
</a> </a>
@ -144,8 +231,18 @@ import { page } from '$app/state';
class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium transition-colors class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium transition-colors
{isPresets ? 'text-green-400' : 'text-zinc-500 hover:text-zinc-300'}" {isPresets ? 'text-green-400' : 'text-zinc-500 hover:text-zinc-300'}"
> >
<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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /> 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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
/>
</svg> </svg>
Presets Presets
</a> </a>
@ -154,8 +251,23 @@ import { page } from '$app/state';
class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium transition-colors class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium transition-colors
{isSettings ? 'text-green-400' : 'text-zinc-500 hover:text-zinc-300'}" {isSettings ? 'text-green-400' : 'text-zinc-500 hover:text-zinc-300'}"
> >
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg> </svg>
Settings Settings
</a> </a>
@ -163,8 +275,18 @@ import { page } from '$app/state';
onclick={handleLogout} onclick={handleLogout}
class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors" class="flex-1 flex flex-col items-center gap-1 py-3 text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors"
> >
<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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /> 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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg> </svg>
Log out Log out
</button> </button>

6
src/routes/(app)/diary/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import { today } from '$lib/utils/date'; import { today } from "$lib/utils/date";
import { onMount } from 'svelte'; import { onMount } from "svelte";
onMount(() => { onMount(() => {
goto(`/diary/${today()}`, { replaceState: true }); goto(`/diary/${today()}`, { replaceState: true });

119
src/routes/(app)/diary/[date]/+page.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from "$app/state";
import { createQuery, useQueryClient } from '@tanstack/svelte-query'; import { createQuery, useQueryClient } from "@tanstack/svelte-query";
import { getDiary, createDiary } from '$lib/api/diary'; import { getDiary, createDiary } from "$lib/api/diary";
import { getCachedDiary, cacheDiary } from '$lib/offline/db'; import { getCachedDiary, cacheDiary } from "$lib/offline/db";
import { addDays, formatDisplay, today } from '$lib/utils/date'; import { addDays, formatDisplay, today } from "$lib/utils/date";
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import { network } from '$lib/offline/network.svelte'; import { network } from "$lib/offline/network.svelte";
import { onMount } from 'svelte'; import { onMount } from "svelte";
import MacroSummary from '$lib/components/diary/MacroSummary.svelte'; import MacroSummary from "$lib/components/diary/MacroSummary.svelte";
import MealCard from '$lib/components/diary/MealCard.svelte'; import MealCard from "$lib/components/diary/MealCard.svelte";
import DateNav from '$lib/components/diary/DateNav.svelte'; import DateNav from "$lib/components/diary/DateNav.svelte";
import CalendarPicker from '$lib/components/diary/CalendarPicker.svelte'; import CalendarPicker from "$lib/components/diary/CalendarPicker.svelte";
import Sheet from '$lib/components/ui/Sheet.svelte'; import Sheet from "$lib/components/ui/Sheet.svelte";
import CommandPalette from '$lib/components/ui/CommandPalette.svelte'; import CommandPalette from "$lib/components/ui/CommandPalette.svelte";
import type { Command } from '$lib/components/ui/CommandPalette.svelte'; import type { Command } from "$lib/components/ui/CommandPalette.svelte";
const date = $derived(page.params.date!); const date = $derived(page.params.date!);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -23,45 +23,48 @@
let creating = $state(false); let creating = $state(false);
const commands = $derived<Command[]>([ const commands = $derived<Command[]>([
...(diaryQuery.data?.meals ?? []).map(meal => ({ ...(diaryQuery.data?.meals ?? []).map((meal) => ({
id: `entry-${meal.id}`, id: `entry-${meal.id}`,
label: `Add entry → ${meal.name}`, label: `Add entry → ${meal.name}`,
keywords: ['e', 'entry', 'food', 'add'], keywords: ["e", "entry", "food", "add"],
action: () => goto(`/diary/${date}/add-entry?meal_id=${meal.id}`) action: () => goto(`/diary/${date}/add-entry?meal_id=${meal.id}`),
})), })),
{ {
id: 'add-meal', id: "add-meal",
label: 'Add meal', label: "Add meal",
keywords: ['m', 'meal'], keywords: ["m", "meal"],
action: () => goto(`/diary/${date}/add-meal`) action: () => goto(`/diary/${date}/add-meal`),
} },
]); ]);
onMount(() => { onMount(() => {
function handleKeydown(e: KeyboardEvent) { function handleKeydown(e: KeyboardEvent) {
const tag = (e.target as HTMLElement).tagName; const tag = (e.target as HTMLElement).tagName;
const editable = (e.target as HTMLElement).isContentEditable; const editable = (e.target as HTMLElement).isContentEditable;
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || editable) return; if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || editable)
if (e.key === '/' || e.key === ':') { return;
if (e.key === "/" || e.key === ":") {
e.preventDefault(); e.preventDefault();
commandOpen = true; commandOpen = true;
} }
} }
document.addEventListener('keydown', handleKeydown); document.addEventListener("keydown", handleKeydown);
return () => document.removeEventListener('keydown', handleKeydown); return () => document.removeEventListener("keydown", handleKeydown);
}); });
const diaryQuery = createQuery(() => ({ const diaryQuery = createQuery(() => ({
queryKey: ['diary', date], queryKey: ["diary", date],
queryFn: async () => { queryFn: async () => {
if (!network.online) { if (!network.online) {
// Prefer in-memory cache — it contains any optimistic updates // Prefer in-memory cache — it contains any optimistic updates
const inMemory = queryClient.getQueryData<import('$lib/types/api').Diary>(['diary', date]); const inMemory = queryClient.getQueryData<
import("$lib/types/api").Diary
>(["diary", date]);
if (inMemory) return inMemory; if (inMemory) return inMemory;
// Fall back to IndexedDB (survives page reload) // Fall back to IndexedDB (survives page reload)
const cached = await getCachedDiary(date); const cached = await getCachedDiary(date);
if (cached) return cached; if (cached) return cached;
throw new Error('Offline and no cached data'); throw new Error("Offline and no cached data");
} }
// Online: fetch fresh data — this overwrites both TQ cache and IndexedDB, // Online: fetch fresh data — this overwrites both TQ cache and IndexedDB,
// replacing any temporary negative-ID entries from optimistic updates // replacing any temporary negative-ID entries from optimistic updates
@ -80,20 +83,22 @@
} catch { } catch {
// Network failed despite network.online being true — fall back to cache // Network failed despite network.online being true — fall back to cache
network.setOffline(); network.setOffline();
const inMemory = queryClient.getQueryData<import('$lib/types/api').Diary>(['diary', date]); const inMemory = queryClient.getQueryData<
import("$lib/types/api").Diary
>(["diary", date]);
if (inMemory) return inMemory; if (inMemory) return inMemory;
const cached = await getCachedDiary(date); const cached = await getCachedDiary(date);
if (cached) return cached; if (cached) return cached;
throw new Error('Offline and no cached data'); throw new Error("Offline and no cached data");
}
} }
},
})); }));
async function handleCreate() { async function handleCreate() {
creating = true; creating = true;
try { try {
await createDiary(date); await createDiary(date);
queryClient.invalidateQueries({ queryKey: ['diary', date] }); queryClient.invalidateQueries({ queryKey: ["diary", date] });
} finally { } finally {
creating = false; creating = false;
} }
@ -111,22 +116,28 @@
<div class="flex flex-col h-screen"> <div class="flex flex-col h-screen">
<!-- Header --> <!-- Header -->
<header class="px-4 pt-[calc(0.75rem+var(--safe-top))] pb-3 bg-zinc-950 sticky top-0 z-10 border-b border-zinc-800"> <header
class="px-4 pt-[calc(0.75rem+var(--safe-top))] pb-3 bg-zinc-950 sticky top-0 z-10 border-b border-zinc-800"
>
<DateNav <DateNav
{date} {date}
label={formatDisplay(date)} label={formatDisplay(date)}
onPrev={() => goDate(-1)} onPrev={() => goDate(-1)}
onNext={() => goDate(1)} onNext={() => goDate(1)}
isToday={date === today()} isToday={date === today()}
onDateClick={() => calendarOpen = true} onDateClick={() => (calendarOpen = true)}
/> />
</header> </header>
<!-- Content --> <!-- Content -->
<main class="flex-1 overflow-y-auto px-4 py-4 pb-[calc(5rem+var(--safe-bottom))] lg:pb-6"> <main
class="flex-1 overflow-y-auto px-4 py-4 pb-[calc(5rem+var(--safe-bottom))] lg:pb-6"
>
{#if diaryQuery.isPending} {#if diaryQuery.isPending}
<!-- Skeleton --> <!-- Skeleton -->
<div class="animate-pulse space-y-4 lg:grid lg:grid-cols-[300px_1fr] lg:gap-6 lg:space-y-0 lg:items-start"> <div
class="animate-pulse space-y-4 lg:grid lg:grid-cols-[300px_1fr] lg:gap-6 lg:space-y-0 lg:items-start"
>
<div class="h-28 bg-zinc-800 rounded-2xl"></div> <div class="h-28 bg-zinc-800 rounded-2xl"></div>
<div class="space-y-4"> <div class="space-y-4">
<div class="h-40 bg-zinc-800 rounded-2xl"></div> <div class="h-40 bg-zinc-800 rounded-2xl"></div>
@ -136,7 +147,9 @@
{:else if diaryQuery.isError} {:else if diaryQuery.isError}
<div class="text-center text-zinc-500 mt-20"> <div class="text-center text-zinc-500 mt-20">
<p class="text-lg">Could not load diary</p> <p class="text-lg">Could not load diary</p>
<p class="text-sm mt-1">{diaryQuery.error?.message ?? 'Unknown error'}</p> <p class="text-sm mt-1">
{diaryQuery.error?.message ?? "Unknown error"}
</p>
<button <button
onclick={() => diaryQuery.refetch()} onclick={() => diaryQuery.refetch()}
class="mt-4 px-4 py-2 bg-zinc-800 rounded-xl text-sm" class="mt-4 px-4 py-2 bg-zinc-800 rounded-xl text-sm"
@ -153,13 +166,15 @@
disabled={creating} disabled={creating}
class="mt-4 px-5 py-2.5 bg-green-600 hover:bg-green-500 disabled:opacity-50 text-white rounded-xl text-sm font-medium transition-colors" class="mt-4 px-5 py-2.5 bg-green-600 hover:bg-green-500 disabled:opacity-50 text-white rounded-xl text-sm font-medium transition-colors"
> >
{creating ? 'Creating…' : 'Create diary'} {creating ? "Creating…" : "Create diary"}
</button> </button>
</div> </div>
{:else if diaryQuery.data} {:else if diaryQuery.data}
{@const diary = diaryQuery.data} {@const diary = diaryQuery.data}
<div class="space-y-4 lg:grid lg:grid-cols-[300px_1fr] lg:gap-6 lg:space-y-0 lg:items-start"> <div
class="space-y-4 lg:grid lg:grid-cols-[300px_1fr] lg:gap-6 lg:space-y-0 lg:items-start"
>
<!-- Left: macros summary (sticky on desktop) --> <!-- Left: macros summary (sticky on desktop) -->
<div class="lg:sticky lg:top-[4.5rem]"> <div class="lg:sticky lg:top-[4.5rem]">
<MacroSummary {diary} {date} /> <MacroSummary {diary} {date} />
@ -193,15 +208,29 @@
class="lg:hidden fixed bottom-[calc(4rem+var(--safe-bottom))] right-4 z-30 w-14 h-14 rounded-full bg-green-600 hover:bg-green-500 shadow-lg flex items-center justify-center transition-colors" class="lg:hidden fixed bottom-[calc(4rem+var(--safe-bottom))] right-4 z-30 w-14 h-14 rounded-full bg-green-600 hover:bg-green-500 shadow-lg flex items-center justify-center transition-colors"
aria-label="Add entry" aria-label="Add entry"
> >
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg> </svg>
</button> </button>
{/if} {/if}
<Sheet open={calendarOpen} onclose={() => calendarOpen = false}> <Sheet open={calendarOpen} onclose={() => (calendarOpen = false)}>
<CalendarPicker selected={date} onSelect={handleDateSelect} /> <CalendarPicker selected={date} onSelect={handleDateSelect} />
</Sheet> </Sheet>
<CommandPalette {commands} open={commandOpen} onclose={() => commandOpen = false} /> <CommandPalette
{commands}
open={commandOpen}
onclose={() => (commandOpen = false)}
/>
</div> </div>

100
src/routes/(app)/diary/[date]/add-meal/+page.svelte
View file

@ -1,37 +1,41 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from "$app/state";
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import { createQuery, useQueryClient } from '@tanstack/svelte-query'; import { createQuery, useQueryClient } from "@tanstack/svelte-query";
import { createMealFromPreset } from '$lib/api/meals'; import { createMealFromPreset } from "$lib/api/meals";
import { offlineAddMeal } from '$lib/offline/mutations'; import { offlineAddMeal } from "$lib/offline/mutations";
import { network } from '$lib/offline/network.svelte'; import { network } from "$lib/offline/network.svelte";
import { listPresets } from '$lib/api/presets'; import { listPresets } from "$lib/api/presets";
import type { Preset } from '$lib/types/api'; import type { Preset } from "$lib/types/api";
import TopBar from '$lib/components/ui/TopBar.svelte'; import TopBar from "$lib/components/ui/TopBar.svelte";
import { kcal, g } from '$lib/utils/format'; import { kcal, g } from "$lib/utils/format";
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 queryClient = useQueryClient(); const queryClient = useQueryClient();
type Tab = 'new' | 'preset'; type Tab = "new" | "preset";
let tab = $state<Tab>('new'); let tab = $state<Tab>("new");
let mealName = $state(''); let mealName = $state("");
let presetQ = $state(''); let presetQ = $state("");
let presetDebounced = $state(''); let presetDebounced = $state("");
let presetTimer: ReturnType<typeof setTimeout>; let presetTimer: ReturnType<typeof setTimeout>;
let submitting = $state(false); let submitting = $state(false);
let error = $state(''); let error = $state("");
function handlePresetSearch(v: string) { function handlePresetSearch(v: string) {
presetQ = v; presetQ = v;
clearTimeout(presetTimer); clearTimeout(presetTimer);
presetTimer = setTimeout(() => { presetDebounced = v; }, 300); presetTimer = setTimeout(() => {
presetDebounced = v;
}, 300);
} }
const presetsQuery = createQuery(() => ({ const presetsQuery = createQuery(() => ({
queryKey: ['presets'], queryKey: ["presets"],
queryFn: () => listPresets(30) queryFn: () => listPresets(30),
})); }));
async function handleCreateNew(e: SubmitEvent) { async function handleCreateNew(e: SubmitEvent) {
@ -50,13 +54,13 @@
async function handleFromPreset(preset: Preset) { async function handleFromPreset(preset: Preset) {
submitting = true; submitting = true;
error = ''; error = "";
try { try {
await createMealFromPreset(date, preset.id, preset.name); await createMealFromPreset(date, preset.id, preset.name);
await queryClient.invalidateQueries({ queryKey: ['diary', date] }); await queryClient.invalidateQueries({ queryKey: ["diary", date] });
goto(`/diary/${date}`); goto(`/diary/${date}`);
} catch { } catch {
error = 'Failed to add preset'; error = "Failed to add preset";
submitting = false; submitting = false;
} }
} }
@ -67,11 +71,12 @@
<!-- Tabs --> <!-- Tabs -->
<div class="flex border-b border-zinc-800 bg-zinc-950"> <div class="flex border-b border-zinc-800 bg-zinc-950">
{#each [{ id: 'new', label: 'New meal' }, { id: 'preset', label: 'From preset', offlineDisabled: true }] as t} {#each [{ id: "new", label: "New meal" }, { id: "preset", label: "From preset", offlineDisabled: true }] as t}
<button <button
onclick={() => tab = t.id as Tab} onclick={() => (tab = t.id as Tab)}
disabled={t.offlineDisabled && !network.online} disabled={t.offlineDisabled && !network.online}
class="flex-1 py-3 text-sm font-medium transition-colors border-b-2 disabled:opacity-40 {tab === t.id class="flex-1 py-3 text-sm font-medium transition-colors border-b-2 disabled:opacity-40 {tab ===
t.id
? 'border-green-500 text-green-400' ? 'border-green-500 text-green-400'
: 'border-transparent text-zinc-500 hover:text-zinc-300'}" : 'border-transparent text-zinc-500 hover:text-zinc-300'}"
> >
@ -81,10 +86,12 @@
</div> </div>
<main class="flex-1 overflow-y-auto"> <main class="flex-1 overflow-y-auto">
{#if tab === 'new'} {#if tab === "new"}
<form onsubmit={handleCreateNew} class="px-4 py-6 space-y-4"> <form onsubmit={handleCreateNew} class="px-4 py-6 space-y-4">
<div> <div>
<label for="meal-name" class="block text-sm text-zinc-400 mb-2">Meal name <span class="text-zinc-600">(optional)</span></label> <label for="meal-name" class="block text-sm text-zinc-400 mb-2"
>Meal name <span class="text-zinc-600">(optional)</span></label
>
<input <input
id="meal-name" id="meal-name"
type="text" type="text"
@ -99,10 +106,13 @@
disabled={submitting} disabled={submitting}
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors" class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
> >
{submitting ? 'Creating…' : network.online ? 'Create meal' : 'Create meal (offline)'} {submitting
? "Creating…"
: network.online
? "Create meal"
: "Create meal (offline)"}
</button> </button>
</form> </form>
{:else} {:else}
<!-- Preset search --> <!-- Preset search -->
<div class="px-4 py-3 border-b border-zinc-800"> <div class="px-4 py-3 border-b border-zinc-800">
@ -126,14 +136,18 @@
<div class="h-16 bg-zinc-900 rounded-xl animate-pulse"></div> <div class="h-16 bg-zinc-900 rounded-xl animate-pulse"></div>
{/each} {/each}
</div> </div>
{:else if (presetsQuery.data ?? []).filter(p => !presetDebounced || p.name.toLowerCase().includes(presetDebounced.toLowerCase())).length === 0} {:else if (presetsQuery.data ?? []).filter((p) => !presetDebounced || p.name
.toLowerCase()
.includes(presetDebounced.toLowerCase())).length === 0}
<div class="text-center text-zinc-500 mt-16 px-6"> <div class="text-center text-zinc-500 mt-16 px-6">
<p>No presets yet</p> <p>No presets yet</p>
<p class="text-sm mt-1">Save a meal as preset from the diary view</p> <p class="text-sm mt-1">Save a meal as preset from the diary view</p>
</div> </div>
{:else} {:else}
<ul class="divide-y divide-zinc-800/50"> <ul class="divide-y divide-zinc-800/50">
{#each (presetsQuery.data ?? []).filter(p => !presetDebounced || p.name.toLowerCase().includes(presetDebounced.toLowerCase())) as preset (preset.id)} {#each (presetsQuery.data ?? []).filter((p) => !presetDebounced || p.name
.toLowerCase()
.includes(presetDebounced.toLowerCase())) as preset (preset.id)}
<li> <li>
<button <button
onclick={() => handleFromPreset(preset)} onclick={() => handleFromPreset(preset)}
@ -142,10 +156,24 @@
> >
<div> <div>
<p class="font-medium">{preset.name}</p> <p class="font-medium">{preset.name}</p>
<p class="text-xs text-zinc-500 mt-0.5">{kcal(preset.calories)} kcal · P {g(preset.protein)}g · C {g(preset.carb)}g · F {g(preset.fat)}g</p> <p class="text-xs text-zinc-500 mt-0.5">
{kcal(preset.calories)} kcal · P {g(preset.protein)}g · C {g(
preset.carb,
)}g · F {g(preset.fat)}g
</p>
</div> </div>
<svg class="w-4 h-4 text-zinc-600 ml-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> class="w-4 h-4 text-zinc-600 ml-3 shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg> </svg>
</button> </button>
</li> </li>

51
src/routes/(app)/products/new/+page.svelte
View file

@ -1,29 +1,38 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from "$app/state";
import { createProduct } from '$lib/api/products'; import { createProduct } from "$lib/api/products";
import TopBar from '$lib/components/ui/TopBar.svelte'; import TopBar from "$lib/components/ui/TopBar.svelte";
let name = $state(page.url.searchParams.get('name') ?? ''); let name = $state(page.url.searchParams.get("name") ?? "");
let barcode = $state(page.url.searchParams.get('barcode') ?? ''); let barcode = $state(page.url.searchParams.get("barcode") ?? "");
let protein = $state(0); let protein = $state(0);
let carb = $state(0); let carb = $state(0);
let fat = $state(0); let fat = $state(0);
let fiber = $state(0); let fiber = $state(0);
let submitting = $state(false); let submitting = $state(false);
let error = $state(''); let error = $state("");
// calories = protein×4 + carb×4 + fat×9 + fiber×2 // calories = protein×4 + carb×4 + fat×9 + fiber×2
const calories = $derived(Math.round(protein * 4 + carb * 4 + fat * 9 + fiber * 2)); const calories = $derived(
Math.round(protein * 4 + carb * 4 + fat * 9 + fiber * 2),
);
async function handleSubmit(e: SubmitEvent) { async function handleSubmit(e: SubmitEvent) {
e.preventDefault(); e.preventDefault();
submitting = true; submitting = true;
error = ''; error = "";
try { try {
await createProduct({ name, protein, carb, fat, fiber, ...(barcode ? { barcode } : {}) }); await createProduct({
name,
protein,
carb,
fat,
fiber,
...(barcode ? { barcode } : {}),
});
history.back(); history.back();
} catch { } catch {
error = 'Failed to save product'; error = "Failed to save product";
submitting = false; submitting = false;
} }
} }
@ -51,7 +60,9 @@
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div> <div>
<label for="protein" class="block text-sm text-zinc-400 mb-2">Protein (g)</label> <label for="protein" class="block text-sm text-zinc-400 mb-2"
>Protein (g)</label
>
<input <input
id="protein" id="protein"
type="number" type="number"
@ -64,7 +75,9 @@
/> />
</div> </div>
<div> <div>
<label for="carb" class="block text-sm text-zinc-400 mb-2">Carbs (g)</label> <label for="carb" class="block text-sm text-zinc-400 mb-2"
>Carbs (g)</label
>
<input <input
id="carb" id="carb"
type="number" type="number"
@ -77,7 +90,9 @@
/> />
</div> </div>
<div> <div>
<label for="fat" class="block text-sm text-zinc-400 mb-2">Fat (g)</label> <label for="fat" class="block text-sm text-zinc-400 mb-2"
>Fat (g)</label
>
<input <input
id="fat" id="fat"
type="number" type="number"
@ -90,7 +105,9 @@
/> />
</div> </div>
<div> <div>
<label for="fiber" class="block text-sm text-zinc-400 mb-2">Fiber (g)</label> <label for="fiber" class="block text-sm text-zinc-400 mb-2"
>Fiber (g)</label
>
<input <input
id="fiber" id="fiber"
type="number" type="number"
@ -104,7 +121,9 @@
</div> </div>
</div> </div>
<div class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center justify-between"> <div
class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center justify-between"
>
<span class="text-sm text-zinc-400">Calories</span> <span class="text-sm text-zinc-400">Calories</span>
<span class="font-semibold">{calories} kcal</span> <span class="font-semibold">{calories} kcal</span>
</div> </div>
@ -118,7 +137,7 @@
disabled={submitting || !name.trim()} disabled={submitting || !name.trim()}
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors" class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
> >
{submitting ? 'Saving…' : 'Save product'} {submitting ? "Saving…" : "Save product"}
</button> </button>
</form> </form>
</main> </main>

84
src/routes/(app)/settings/+page.svelte
View file

@ -1,22 +1,22 @@
<script lang="ts"> <script lang="ts">
import { createQuery, useQueryClient } from '@tanstack/svelte-query'; import { createQuery, useQueryClient } from "@tanstack/svelte-query";
import { getUserSettings, updateUserSettings } from '$lib/api/settings'; import { getUserSettings, updateUserSettings } from "$lib/api/settings";
import { updateDiary } from '$lib/api/diary'; import { updateDiary } from "$lib/api/diary";
import TopBar from '$lib/components/ui/TopBar.svelte'; import TopBar from "$lib/components/ui/TopBar.svelte";
import Sheet from '$lib/components/ui/Sheet.svelte'; import Sheet from "$lib/components/ui/Sheet.svelte";
import { today } from '$lib/utils/date'; import { today } from "$lib/utils/date";
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const settingsQuery = createQuery(() => ({ const settingsQuery = createQuery(() => ({
queryKey: ['user-settings'], queryKey: ["user-settings"],
queryFn: getUserSettings, queryFn: getUserSettings,
staleTime: 5 * 60 * 1000, staleTime: 5 * 60 * 1000,
})); }));
let saving = $state(false); let saving = $state(false);
let saved = $state(false); let saved = $state(false);
let error = $state(''); let error = $state("");
let syncDiaryOpen = $state(false); let syncDiaryOpen = $state(false);
let lastSavedForm: typeof form | null = null; let lastSavedForm: typeof form | null = null;
@ -49,16 +49,18 @@
async function handleSave(e: SubmitEvent) { async function handleSave(e: SubmitEvent) {
e.preventDefault(); e.preventDefault();
saving = true; saving = true;
error = ''; error = "";
try { try {
await updateUserSettings(form); await updateUserSettings(form);
queryClient.invalidateQueries({ queryKey: ['user-settings'] }); queryClient.invalidateQueries({ queryKey: ["user-settings"] });
lastSavedForm = { ...form }; lastSavedForm = { ...form };
saved = true; saved = true;
setTimeout(() => { saved = false; }, 2000); setTimeout(() => {
saved = false;
}, 2000);
syncDiaryOpen = true; syncDiaryOpen = true;
} catch { } catch {
error = 'Failed to save settings'; error = "Failed to save settings";
} finally { } finally {
saving = false; saving = false;
} }
@ -67,7 +69,7 @@
async function handleSyncToDiary() { async function handleSyncToDiary() {
if (!lastSavedForm) return; if (!lastSavedForm) return;
await updateDiary(today(), lastSavedForm); await updateDiary(today(), lastSavedForm);
queryClient.invalidateQueries({ queryKey: ['diary', today()] }); queryClient.invalidateQueries({ queryKey: ["diary", today()] });
syncDiaryOpen = false; syncDiaryOpen = false;
} }
</script> </script>
@ -87,39 +89,49 @@
{:else} {:else}
<form onsubmit={handleSave} class="space-y-6"> <form onsubmit={handleSave} class="space-y-6">
<section> <section>
<h2 class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-3">Daily goals</h2> <h2
class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-3"
>
Daily goals
</h2>
<div class="space-y-3"> <div class="space-y-3">
<!-- Calories: null = auto-calculated by server from macros --> <!-- Calories: null = auto-calculated by server from macros -->
<div class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center gap-4"> <div
class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center gap-4"
>
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<p class="text-sm font-medium">Calories</p> <p class="text-sm font-medium">Calories</p>
{#if form.calories_goal === null} {#if form.calories_goal === null}
<span class="text-xs font-medium text-zinc-500 bg-zinc-800 border border-zinc-700 px-1.5 py-0.5 rounded-full">auto</span> <span
class="text-xs font-medium text-zinc-500 bg-zinc-800 border border-zinc-700 px-1.5 py-0.5 rounded-full"
>auto</span
>
{/if} {/if}
</div> </div>
<p class="text-xs text-zinc-500">kcal · clear to auto-calculate</p> <p class="text-xs text-zinc-500">
kcal · clear to auto-calculate
</p>
</div> </div>
<input <input
type="number" type="number"
min="0" min="0"
step="1" step="1"
value={form.calories_goal ?? settingsQuery.data?.calories_goal ?? ''} value={form.calories_goal ??
settingsQuery.data?.calories_goal ??
""}
oninput={(e) => { oninput={(e) => {
const v = e.currentTarget.value; const v = e.currentTarget.value;
form.calories_goal = v === '' ? null : Number(v); form.calories_goal = v === "" ? null : Number(v);
}} }}
class="w-24 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-right text-sm text-zinc-100 focus:outline-none focus:border-green-500 transition-colors" class="w-24 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-right text-sm text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
/> />
</div> </div>
{#each [ {#each [{ label: "Protein", key: "protein_goal" as const, unit: "g" }, { label: "Carbs", key: "carb_goal" as const, unit: "g" }, { label: "Fat", key: "fat_goal" as const, unit: "g" }, { label: "Fiber", key: "fiber_goal" as const, unit: "g" }] as field}
{ label: 'Protein', key: 'protein_goal' as const, unit: 'g' }, <div
{ label: 'Carbs', key: 'carb_goal' as const, unit: 'g' }, class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center gap-4"
{ label: 'Fat', key: 'fat_goal' as const, unit: 'g' }, >
{ label: 'Fiber', key: 'fiber_goal' as const, unit: 'g' },
] as field}
<div class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center gap-4">
<div class="flex-1"> <div class="flex-1">
<p class="text-sm font-medium">{field.label}</p> <p class="text-sm font-medium">{field.label}</p>
<p class="text-xs text-zinc-500">{field.unit} per day</p> <p class="text-xs text-zinc-500">{field.unit} per day</p>
@ -146,23 +158,31 @@
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors
{saved ? 'bg-zinc-700 hover:bg-zinc-700' : ''}" {saved ? 'bg-zinc-700 hover:bg-zinc-700' : ''}"
> >
{saving ? 'Saving…' : saved ? 'Saved!' : 'Save'} {saving ? "Saving…" : saved ? "Saved!" : "Save"}
</button> </button>
</form> </form>
{/if} {/if}
</main> </main>
</div> </div>
<Sheet open={syncDiaryOpen} onclose={() => syncDiaryOpen = false} title="Update today's diary?"> <Sheet
<p class="text-sm text-zinc-400 mb-5">Override today's diary macro goals with these values as well?</p> open={syncDiaryOpen}
onclose={() => (syncDiaryOpen = false)}
title="Update today's diary?"
>
<p class="text-sm text-zinc-400 mb-5">
Override today's diary macro goals with these values as well?
</p>
<div class="flex gap-3"> <div class="flex gap-3">
<button <button
onclick={() => syncDiaryOpen = false} onclick={() => (syncDiaryOpen = false)}
class="flex-1 bg-zinc-800 hover:bg-zinc-700 rounded-xl py-3 text-sm font-medium transition-colors" class="flex-1 bg-zinc-800 hover:bg-zinc-700 rounded-xl py-3 text-sm font-medium transition-colors"
>No</button> >No</button
>
<button <button
onclick={handleSyncToDiary} onclick={handleSyncToDiary}
class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors" class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors"
>Yes</button> >Yes</button
>
</div> </div>
</Sheet> </Sheet>

14
src/routes/+layout.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import "../app.css";
import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'; import { QueryClient, QueryClientProvider } from "@tanstack/svelte-query";
import { tryRestoreSession } from '$lib/api/auth'; import { tryRestoreSession } from "$lib/api/auth";
import { onMount } from 'svelte'; import { onMount } from "svelte";
let { children } = $props(); let { children } = $props();
@ -10,9 +10,9 @@
defaultOptions: { defaultOptions: {
queries: { queries: {
staleTime: 30_000, staleTime: 30_000,
retry: 1 retry: 1,
} },
} },
}); });
let ready = $state(false); let ready = $state(false);

10
src/routes/+page.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import { auth } from '$lib/auth/store.svelte'; import { auth } from "$lib/auth/store.svelte";
import { today } from '$lib/utils/date'; import { today } from "$lib/utils/date";
import { onMount } from 'svelte'; import { onMount } from "svelte";
onMount(() => { onMount(() => {
if (auth.isAuthenticated) { if (auth.isAuthenticated) {
goto(`/diary/${today()}`, { replaceState: true }); goto(`/diary/${today()}`, { replaceState: true });
} else { } else {
goto('/login', { replaceState: true }); goto("/login", { replaceState: true });
} }
}); });
</script> </script>