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

2
src/app.d.ts vendored
View file

@ -10,4 +10,4 @@ declare global {
}
}
export {};
export { };

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

@ -1,5 +1,5 @@
<script lang="ts">
import { today } from '$lib/utils/date';
import { today } from "$lib/utils/date";
interface Props {
selected: string;
@ -14,21 +14,28 @@
let viewMonth = $state(parseInt(selected.slice(5, 7)) - 1); // 0-based
function prevMonth() {
if (viewMonth === 0) { viewYear--; viewMonth = 11; }
else viewMonth--;
if (viewMonth === 0) {
viewYear--;
viewMonth = 11;
} else viewMonth--;
}
function nextMonth() {
if (viewMonth === 11) { viewYear++; viewMonth = 0; }
else viewMonth++;
if (viewMonth === 11) {
viewYear++;
viewMonth = 0;
} else viewMonth++;
}
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 {
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(() => {
@ -37,7 +44,8 @@
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
const result: (string | 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;
});
</script>
@ -48,8 +56,18 @@
onclick={prevMonth}
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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
<svg
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>
</button>
<span class="font-medium text-sm">{monthLabel}</span>
@ -57,14 +75,24 @@
onclick={nextMonth}
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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
<svg
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>
</button>
</div>
<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>
{/each}
</div>

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

@ -18,13 +18,20 @@
aria-label="Previous day"
>
<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>
</button>
<button
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>
{#if !isToday}
@ -39,7 +46,12 @@
aria-label="Next day"
>
<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>
</button>
</div>

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

@ -1,6 +1,6 @@
<script lang="ts">
import type { Entry } from '$lib/types/api';
import { kcal, g } from '$lib/utils/format';
import type { Entry } from "$lib/types/api";
import { kcal, g } from "$lib/utils/format";
interface Props {
entry: Entry;
@ -15,12 +15,14 @@
role="button"
tabindex="0"
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"
>
<div class="flex-1 min-w-0">
<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 class="flex items-center gap-3 ml-3">
@ -32,12 +34,25 @@
</div>
<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"
aria-label="Delete entry"
>
<svg 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
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>
</button>
</div>

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

@ -1,10 +1,10 @@
<script lang="ts">
import type { Diary } from '$lib/types/api';
import { kcal, g } from '$lib/utils/format';
import { updateDiary } from '$lib/api/diary';
import { updateUserSettings } from '$lib/api/settings';
import { useQueryClient } from '@tanstack/svelte-query';
import Sheet from '$lib/components/ui/Sheet.svelte';
import type { Diary } from "$lib/types/api";
import { kcal, g } from "$lib/utils/format";
import { updateDiary } from "$lib/api/diary";
import { updateUserSettings } from "$lib/api/settings";
import { useQueryClient } from "@tanstack/svelte-query";
import Sheet from "$lib/components/ui/Sheet.svelte";
interface Props {
diary: Diary;
@ -16,17 +16,39 @@
const queryClient = useQueryClient();
// 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))
: 0);
: 0,
);
const circumference = 2 * Math.PI * 40;
const dash = $derived(circumference * (pct / 100));
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: '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' },
{
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: "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
@ -63,7 +85,7 @@
saving = true;
try {
await updateDiary(date, form);
await queryClient.invalidateQueries({ queryKey: ['diary', date] });
await queryClient.invalidateQueries({ queryKey: ["diary", date] });
lastSavedForm = { ...form };
sheetOpen = false;
syncSettingsOpen = true;
@ -82,23 +104,35 @@
<div class="bg-zinc-900 rounded-2xl p-4 relative">
<!-- 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">
<!-- Calorie ring -->
<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">
<circle cx="50" 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"
cx="50"
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-dasharray="{dash} {circumference}"
class="transition-all duration-500"
/>
</svg>
<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">
{diary.calories_goal > 0 ? `/ ${kcal(diary.calories_goal)}` : 'kcal'}
{diary.calories_goal > 0 ? `/ ${kcal(diary.calories_goal)}` : "kcal"}
</span>
</div>
</div>
@ -110,13 +144,15 @@
<div class="flex justify-between text-xs text-zinc-400 mb-1">
<span>{macro.label}</span>
<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>
</div>
<div class="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
<div
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>
@ -125,39 +161,63 @@
<!-- Edit goals 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"
aria-label="Edit day goals"
>
<svg 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
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>
</button>
</div>
</div>
<Sheet 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>
<Sheet
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">
<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"
>No</button>
>No</button
>
<button
onclick={handleSyncToSettings}
class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors"
>Yes</button>
>Yes</button
>
</div>
</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">
<!-- Calories: null = auto-calculated by server from macros -->
<div>
<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}
<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}
</div>
<input
@ -167,21 +227,21 @@
value={form.calories_goal ?? diary.calories_goal}
oninput={(e) => {
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"
/>
<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>
{#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}
{#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}
<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
type="number"
min="0"
@ -197,7 +257,7 @@
disabled={saving}
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>
</form>
</Sheet>

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

@ -1,12 +1,12 @@
<script lang="ts">
import type { Meal } from '$lib/types/api';
import { kcal, g } from '$lib/utils/format';
import EntryRow from './EntryRow.svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import { deleteMeal, renameMeal, saveMealAsPreset } from '$lib/api/meals';
import { deleteEntry } from '$lib/api/entries';
import { goto } from '$app/navigation';
import Sheet from '$lib/components/ui/Sheet.svelte';
import type { Meal } from "$lib/types/api";
import { kcal, g } from "$lib/utils/format";
import EntryRow from "./EntryRow.svelte";
import { useQueryClient } from "@tanstack/svelte-query";
import { deleteMeal, renameMeal, saveMealAsPreset } from "$lib/api/meals";
import { deleteEntry } from "$lib/api/entries";
import { goto } from "$app/navigation";
import Sheet from "$lib/components/ui/Sheet.svelte";
interface Props {
meal: Meal;
@ -19,10 +19,10 @@
let collapsed = $state(false);
let saving = $state(false);
let renameOpen = $state(false);
let renameName = $state('');
let renameName = $state("");
let renaming = $state(false);
let presetOpen = $state(false);
let presetName = $state('');
let presetName = $state("");
function openRename() {
renameName = meal.name;
@ -35,7 +35,7 @@
renaming = true;
try {
await renameMeal(date, meal.id, renameName.trim());
queryClient.invalidateQueries({ queryKey: ['diary', date] });
queryClient.invalidateQueries({ queryKey: ["diary", date] });
renameOpen = false;
} finally {
renaming = false;
@ -45,7 +45,7 @@
async function handleDeleteMeal() {
if (!confirm(`Delete meal "${meal.name}"?`)) return;
await deleteMeal(date, meal.id);
queryClient.invalidateQueries({ queryKey: ['diary', date] });
queryClient.invalidateQueries({ queryKey: ["diary", date] });
}
function openPresetSheet() {
@ -58,7 +58,7 @@
saving = true;
try {
await saveMealAsPreset(date, meal.id, presetName.trim() || meal.name);
queryClient.invalidateQueries({ queryKey: ['presets'] });
queryClient.invalidateQueries({ queryKey: ["presets"] });
presetOpen = false;
} finally {
saving = false;
@ -67,30 +67,44 @@
async function handleDeleteEntry(entryId: number) {
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}`);
}
</script>
<div class="bg-zinc-900 rounded-2xl overflow-hidden">
<!-- 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
onclick={() => collapsed = !collapsed}
onclick={() => (collapsed = !collapsed)}
class="flex-1 flex items-center gap-2 text-left min-w-0"
>
<svg
class="w-4 h-4 text-zinc-500 shrink-0 transition-transform {collapsed ? '-rotate-90' : ''}"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
class="w-4 h-4 text-zinc-500 shrink-0 transition-transform {collapsed
? '-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>
<div class="min-w-0 flex-1">
<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>
</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"
aria-label="Add food"
>
<svg 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
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>
Add
</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"
aria-label="Rename meal"
>
<svg 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
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>
</button>
@ -126,12 +160,32 @@
aria-label="Save as preset"
>
{#if saving}
<svg 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
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>
{:else}
<svg 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
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>
{/if}
</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"
aria-label="Delete meal"
>
<svg 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
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>
</button>
</div>
@ -171,7 +235,11 @@
{/if}
</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">
<div>
<label class="block text-sm text-zinc-400 mb-1.5">Preset name</label>
@ -188,12 +256,16 @@
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"
>
{saving ? 'Saving…' : 'Save preset'}
{saving ? "Saving…" : "Save preset"}
</button>
</form>
</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">
<input
type="text"
@ -207,7 +279,7 @@
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"
>
{renaming ? 'Saving…' : 'Save'}
{renaming ? "Saving…" : "Save"}
</button>
</form>
</Sheet>

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

@ -1,5 +1,5 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { onMount, onDestroy } from "svelte";
interface Props {
ondetect: (barcode: string) => void;
@ -18,19 +18,26 @@
onMount(async () => {
// Use native BarcodeDetector if available, otherwise load polyfill (Safari, Firefox)
let BarcodeDetectorImpl: typeof BarcodeDetector;
if ('BarcodeDetector' in window) {
if ("BarcodeDetector" in window) {
BarcodeDetectorImpl = BarcodeDetector;
} else {
const { BarcodeDetector: Polyfill } = await import('barcode-detector/ponyfill');
const { BarcodeDetector: Polyfill } = await import(
"barcode-detector/ponyfill"
);
BarcodeDetectorImpl = Polyfill as unknown as typeof BarcodeDetector;
}
try {
stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } }
video: {
facingMode: "environment",
width: { ideal: 1280 },
height: { ideal: 720 },
},
});
} catch {
error = 'Camera access denied. Please allow camera permission and try again.';
error =
"Camera access denied. Please allow camera permission and try again.";
return;
}
@ -38,7 +45,17 @@
videoEl.srcObject = stream;
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();
});
@ -46,7 +63,7 @@
function cleanup() {
if (animFrame !== null) cancelAnimationFrame(animFrame);
stream?.getTracks().forEach(t => t.stop());
stream?.getTracks().forEach((t) => t.stop());
}
async function scanLoop() {
@ -74,15 +91,30 @@
<!-- Full-screen scanner overlay -->
<div class="fixed inset-0 z-50 bg-black flex flex-col">
<!-- 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>
<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"
aria-label="Close scanner"
>
<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="M6 18L18 6M6 6l12 12" />
<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="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
@ -90,8 +122,18 @@
{#if error}
<div class="flex-1 flex items-center justify-center px-8 text-center">
<div>
<svg 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
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>
<p class="text-white text-sm">{error}</p>
</div>
@ -117,18 +159,40 @@
<div class="absolute inset-0 bg-transparent mix-blend-normal"></div>
<!-- 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 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>
<div
class="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-green-400 rounded-tl"
></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 -->
{#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}
<div class="absolute inset-0 bg-green-400/20 rounded flex items-center justify-center">
<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" />
<div
class="absolute inset-0 bg-green-400/20 rounded flex items-center justify-center"
>
<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>
</div>
{/if}
@ -145,8 +209,13 @@
<style>
@keyframes scan {
0%, 100% { top: 8px; }
50% { top: calc(100% - 8px); }
0%,
100% {
top: 8px;
}
50% {
top: calc(100% - 8px);
}
}
.animate-scan {
animation: scan 1.8s ease-in-out infinite;

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

@ -1,11 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount } from "svelte";
interface Props {
open: boolean;
onclose: () => void;
title?: string;
children: import('svelte').Snippet;
children: import("svelte").Snippet;
}
let { open, onclose, title, children }: Props = $props();
@ -17,15 +17,18 @@
if (!vv) return;
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('scroll', update);
vv.addEventListener("resize", update);
vv.addEventListener("scroll", update);
return () => {
vv.removeEventListener('resize', update);
vv.removeEventListener('scroll', update);
vv.removeEventListener("resize", update);
vv.removeEventListener("scroll", update);
};
});
@ -34,7 +37,7 @@
}
function handleKey(e: KeyboardEvent) {
if (e.key === 'Escape') onclose();
if (e.key === "Escape") onclose();
}
</script>
@ -68,12 +71,22 @@
<style>
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes fade-in {
from { opacity: 0; transform: translate(-50%, -48%); }
to { opacity: 1; transform: translate(-50%, -50%); }
from {
opacity: 0;
transform: translate(-50%, -48%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
.animate-slide-up {
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">
import { goto } from '$app/navigation';
import { goto } from "$app/navigation";
interface Props {
title: string;
back?: string | (() => void);
action?: import('svelte').Snippet;
action?: import("svelte").Snippet;
}
let { title, back, action }: Props = $props();
function handleBack() {
if (!back) return;
if (typeof back === 'function') back();
if (typeof back === "function") back();
else goto(back);
}
</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}
<button
onclick={handleBack}
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"
>
<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" />
<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"
/>
</svg>
</button>
{/if}

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

@ -1,27 +1,27 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { auth } from '$lib/auth/store.svelte';
import { logout } from '$lib/api/auth';
import { useQueryClient } from '@tanstack/svelte-query';
import { page } from '$app/state';
import { onMount } from 'svelte';
import { network } from '$lib/offline/network.svelte';
import { syncOfflineQueue } from '$lib/offline/sync';
import { getMutationQueueLength } from '$lib/offline/db';
import { goto } from "$app/navigation";
import { auth } from "$lib/auth/store.svelte";
import { logout } from "$lib/api/auth";
import { useQueryClient } from "@tanstack/svelte-query";
import { page } from "$app/state";
import { onMount } from "svelte";
import { network } from "$lib/offline/network.svelte";
import { syncOfflineQueue } from "$lib/offline/sync";
import { getMutationQueueLength } from "$lib/offline/db";
let { children } = $props();
const queryClient = useQueryClient();
onMount(async () => {
if (!auth.isAuthenticated) goto('/login');
if (!auth.isAuthenticated) goto("/login");
// Restore pending count from IndexedDB in case of page reload while offline
const queued = await getMutationQueueLength();
network.setPendingCount(queued);
// Sync on reconnect
window.addEventListener('online', handleReconnect);
return () => window.removeEventListener('online', handleReconnect);
window.addEventListener("online", handleReconnect);
return () => window.removeEventListener("online", handleReconnect);
});
async function handleReconnect() {
@ -41,12 +41,12 @@ import { page } from '$app/state';
function handleLogout() {
logout();
queryClient.clear();
goto('/login');
goto("/login");
}
const isDiary = $derived(page.url.pathname.startsWith('/diary'));
const isPresets = $derived(page.url.pathname.startsWith('/presets'));
const isSettings = $derived(page.url.pathname.startsWith('/settings'));
const isDiary = $derived(page.url.pathname.startsWith("/diary"));
const isPresets = $derived(page.url.pathname.startsWith("/presets"));
const isSettings = $derived(page.url.pathname.startsWith("/settings"));
</script>
{#if auth.isAuthenticated}
@ -59,21 +59,45 @@ import { page } from '$app/state';
style="padding-top: calc(0.5rem + var(--safe-top))"
>
{#if network.syncing}
<svg 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
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>
Syncing changes…
{:else}
<svg 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
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>
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}
</div>
{/if}
<!-- 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">
<span class="text-lg font-bold text-green-400">fooder</span>
</div>
@ -82,30 +106,71 @@ import { page } from '$app/state';
<a
href="/diary/today"
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">
<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
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>
Diary
</a>
<a
href="/presets"
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">
<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
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>
Presets
</a>
<a
href="/settings"
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">
<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
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>
Settings
</a>
@ -115,8 +180,18 @@ import { page } from '$app/state';
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"
>
<svg 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
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>
Log out
</button>
@ -128,14 +203,26 @@ import { page } from '$app/state';
</div>
<!-- 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
href="/diary/today"
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'}"
>
<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 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
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>
Diary
</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
{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">
<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
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>
Presets
</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
{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">
<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
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>
Settings
</a>
@ -163,8 +275,18 @@ import { page } from '$app/state';
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"
>
<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="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
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>
Log out
</button>

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

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

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

@ -1,19 +1,19 @@
<script lang="ts">
import { page } from '$app/state';
import { createQuery, useQueryClient } from '@tanstack/svelte-query';
import { getDiary, createDiary } from '$lib/api/diary';
import { getCachedDiary, cacheDiary } from '$lib/offline/db';
import { addDays, formatDisplay, today } from '$lib/utils/date';
import { goto } from '$app/navigation';
import { network } from '$lib/offline/network.svelte';
import { onMount } from 'svelte';
import MacroSummary from '$lib/components/diary/MacroSummary.svelte';
import MealCard from '$lib/components/diary/MealCard.svelte';
import DateNav from '$lib/components/diary/DateNav.svelte';
import CalendarPicker from '$lib/components/diary/CalendarPicker.svelte';
import Sheet from '$lib/components/ui/Sheet.svelte';
import CommandPalette from '$lib/components/ui/CommandPalette.svelte';
import type { Command } from '$lib/components/ui/CommandPalette.svelte';
import { page } from "$app/state";
import { createQuery, useQueryClient } from "@tanstack/svelte-query";
import { getDiary, createDiary } from "$lib/api/diary";
import { getCachedDiary, cacheDiary } from "$lib/offline/db";
import { addDays, formatDisplay, today } from "$lib/utils/date";
import { goto } from "$app/navigation";
import { network } from "$lib/offline/network.svelte";
import { onMount } from "svelte";
import MacroSummary from "$lib/components/diary/MacroSummary.svelte";
import MealCard from "$lib/components/diary/MealCard.svelte";
import DateNav from "$lib/components/diary/DateNav.svelte";
import CalendarPicker from "$lib/components/diary/CalendarPicker.svelte";
import Sheet from "$lib/components/ui/Sheet.svelte";
import CommandPalette from "$lib/components/ui/CommandPalette.svelte";
import type { Command } from "$lib/components/ui/CommandPalette.svelte";
const date = $derived(page.params.date!);
const queryClient = useQueryClient();
@ -23,45 +23,48 @@
let creating = $state(false);
const commands = $derived<Command[]>([
...(diaryQuery.data?.meals ?? []).map(meal => ({
...(diaryQuery.data?.meals ?? []).map((meal) => ({
id: `entry-${meal.id}`,
label: `Add entry → ${meal.name}`,
keywords: ['e', 'entry', 'food', 'add'],
action: () => goto(`/diary/${date}/add-entry?meal_id=${meal.id}`)
keywords: ["e", "entry", "food", "add"],
action: () => goto(`/diary/${date}/add-entry?meal_id=${meal.id}`),
})),
{
id: 'add-meal',
label: 'Add meal',
keywords: ['m', 'meal'],
action: () => goto(`/diary/${date}/add-meal`)
}
id: "add-meal",
label: "Add meal",
keywords: ["m", "meal"],
action: () => goto(`/diary/${date}/add-meal`),
},
]);
onMount(() => {
function handleKeydown(e: KeyboardEvent) {
const tag = (e.target as HTMLElement).tagName;
const editable = (e.target as HTMLElement).isContentEditable;
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || editable) return;
if (e.key === '/' || e.key === ':') {
if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || editable)
return;
if (e.key === "/" || e.key === ":") {
e.preventDefault();
commandOpen = true;
}
}
document.addEventListener('keydown', handleKeydown);
return () => document.removeEventListener('keydown', handleKeydown);
document.addEventListener("keydown", handleKeydown);
return () => document.removeEventListener("keydown", handleKeydown);
});
const diaryQuery = createQuery(() => ({
queryKey: ['diary', date],
queryKey: ["diary", date],
queryFn: async () => {
if (!network.online) {
// 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;
// Fall back to IndexedDB (survives page reload)
const cached = await getCachedDiary(date);
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,
// replacing any temporary negative-ID entries from optimistic updates
@ -80,20 +83,22 @@
} catch {
// Network failed despite network.online being true — fall back to cache
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;
const cached = await getCachedDiary(date);
if (cached) return cached;
throw new Error('Offline and no cached data');
}
throw new Error("Offline and no cached data");
}
},
}));
async function handleCreate() {
creating = true;
try {
await createDiary(date);
queryClient.invalidateQueries({ queryKey: ['diary', date] });
queryClient.invalidateQueries({ queryKey: ["diary", date] });
} finally {
creating = false;
}
@ -111,22 +116,28 @@
<div class="flex flex-col h-screen">
<!-- 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
{date}
label={formatDisplay(date)}
onPrev={() => goDate(-1)}
onNext={() => goDate(1)}
isToday={date === today()}
onDateClick={() => calendarOpen = true}
onDateClick={() => (calendarOpen = true)}
/>
</header>
<!-- 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}
<!-- 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="space-y-4">
<div class="h-40 bg-zinc-800 rounded-2xl"></div>
@ -136,7 +147,9 @@
{:else if diaryQuery.isError}
<div class="text-center text-zinc-500 mt-20">
<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
onclick={() => diaryQuery.refetch()}
class="mt-4 px-4 py-2 bg-zinc-800 rounded-xl text-sm"
@ -153,13 +166,15 @@
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"
>
{creating ? 'Creating…' : 'Create diary'}
{creating ? "Creating…" : "Create diary"}
</button>
</div>
{:else if 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) -->
<div class="lg:sticky lg:top-[4.5rem]">
<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"
aria-label="Add entry"
>
<svg 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
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>
</button>
{/if}
<Sheet open={calendarOpen} onclose={() => calendarOpen = false}>
<Sheet open={calendarOpen} onclose={() => (calendarOpen = false)}>
<CalendarPicker selected={date} onSelect={handleDateSelect} />
</Sheet>
<CommandPalette {commands} open={commandOpen} onclose={() => commandOpen = false} />
<CommandPalette
{commands}
open={commandOpen}
onclose={() => (commandOpen = false)}
/>
</div>

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

@ -1,37 +1,41 @@
<script lang="ts">
import { page } from '$app/state';
import { goto } from '$app/navigation';
import { createQuery, useQueryClient } from '@tanstack/svelte-query';
import { createMealFromPreset } from '$lib/api/meals';
import { offlineAddMeal } from '$lib/offline/mutations';
import { network } from '$lib/offline/network.svelte';
import { listPresets } from '$lib/api/presets';
import type { Preset } from '$lib/types/api';
import TopBar from '$lib/components/ui/TopBar.svelte';
import { kcal, g } from '$lib/utils/format';
import { today } from '$lib/utils/date';
import { page } from "$app/state";
import { goto } from "$app/navigation";
import { createQuery, useQueryClient } from "@tanstack/svelte-query";
import { createMealFromPreset } from "$lib/api/meals";
import { offlineAddMeal } from "$lib/offline/mutations";
import { network } from "$lib/offline/network.svelte";
import { listPresets } from "$lib/api/presets";
import type { Preset } from "$lib/types/api";
import TopBar from "$lib/components/ui/TopBar.svelte";
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 queryClient = useQueryClient();
type Tab = 'new' | 'preset';
let tab = $state<Tab>('new');
let mealName = $state('');
let presetQ = $state('');
let presetDebounced = $state('');
type Tab = "new" | "preset";
let tab = $state<Tab>("new");
let mealName = $state("");
let presetQ = $state("");
let presetDebounced = $state("");
let presetTimer: ReturnType<typeof setTimeout>;
let submitting = $state(false);
let error = $state('');
let error = $state("");
function handlePresetSearch(v: string) {
presetQ = v;
clearTimeout(presetTimer);
presetTimer = setTimeout(() => { presetDebounced = v; }, 300);
presetTimer = setTimeout(() => {
presetDebounced = v;
}, 300);
}
const presetsQuery = createQuery(() => ({
queryKey: ['presets'],
queryFn: () => listPresets(30)
queryKey: ["presets"],
queryFn: () => listPresets(30),
}));
async function handleCreateNew(e: SubmitEvent) {
@ -50,13 +54,13 @@
async function handleFromPreset(preset: Preset) {
submitting = true;
error = '';
error = "";
try {
await createMealFromPreset(date, preset.id, preset.name);
await queryClient.invalidateQueries({ queryKey: ['diary', date] });
await queryClient.invalidateQueries({ queryKey: ["diary", date] });
goto(`/diary/${date}`);
} catch {
error = 'Failed to add preset';
error = "Failed to add preset";
submitting = false;
}
}
@ -67,11 +71,12 @@
<!-- Tabs -->
<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
onclick={() => tab = t.id as Tab}
onclick={() => (tab = t.id as Tab)}
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-transparent text-zinc-500 hover:text-zinc-300'}"
>
@ -81,10 +86,12 @@
</div>
<main class="flex-1 overflow-y-auto">
{#if tab === 'new'}
{#if tab === "new"}
<form onsubmit={handleCreateNew} class="px-4 py-6 space-y-4">
<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
id="meal-name"
type="text"
@ -99,10 +106,13 @@
disabled={submitting}
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>
</form>
{:else}
<!-- Preset search -->
<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>
{/each}
</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">
<p>No presets yet</p>
<p class="text-sm mt-1">Save a meal as preset from the diary view</p>
</div>
{:else}
<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>
<button
onclick={() => handleFromPreset(preset)}
@ -142,10 +156,24 @@
>
<div>
<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>
<svg 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
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>
</button>
</li>

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

@ -1,29 +1,38 @@
<script lang="ts">
import { page } from '$app/state';
import { createProduct } from '$lib/api/products';
import TopBar from '$lib/components/ui/TopBar.svelte';
import { page } from "$app/state";
import { createProduct } from "$lib/api/products";
import TopBar from "$lib/components/ui/TopBar.svelte";
let name = $state(page.url.searchParams.get('name') ?? '');
let barcode = $state(page.url.searchParams.get('barcode') ?? '');
let name = $state(page.url.searchParams.get("name") ?? "");
let barcode = $state(page.url.searchParams.get("barcode") ?? "");
let protein = $state(0);
let carb = $state(0);
let fat = $state(0);
let fiber = $state(0);
let submitting = $state(false);
let error = $state('');
let error = $state("");
// 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) {
e.preventDefault();
submitting = true;
error = '';
error = "";
try {
await createProduct({ name, protein, carb, fat, fiber, ...(barcode ? { barcode } : {}) });
await createProduct({
name,
protein,
carb,
fat,
fiber,
...(barcode ? { barcode } : {}),
});
history.back();
} catch {
error = 'Failed to save product';
error = "Failed to save product";
submitting = false;
}
}
@ -51,7 +60,9 @@
<div class="grid grid-cols-2 gap-3">
<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
id="protein"
type="number"
@ -64,7 +75,9 @@
/>
</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
id="carb"
type="number"
@ -77,7 +90,9 @@
/>
</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
id="fat"
type="number"
@ -90,7 +105,9 @@
/>
</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
id="fiber"
type="number"
@ -104,7 +121,9 @@
</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="font-semibold">{calories} kcal</span>
</div>
@ -118,7 +137,7 @@
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"
>
{submitting ? 'Saving…' : 'Save product'}
{submitting ? "Saving…" : "Save product"}
</button>
</form>
</main>

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

@ -1,22 +1,22 @@
<script lang="ts">
import { createQuery, useQueryClient } from '@tanstack/svelte-query';
import { getUserSettings, updateUserSettings } from '$lib/api/settings';
import { updateDiary } from '$lib/api/diary';
import TopBar from '$lib/components/ui/TopBar.svelte';
import Sheet from '$lib/components/ui/Sheet.svelte';
import { today } from '$lib/utils/date';
import { createQuery, useQueryClient } from "@tanstack/svelte-query";
import { getUserSettings, updateUserSettings } from "$lib/api/settings";
import { updateDiary } from "$lib/api/diary";
import TopBar from "$lib/components/ui/TopBar.svelte";
import Sheet from "$lib/components/ui/Sheet.svelte";
import { today } from "$lib/utils/date";
const queryClient = useQueryClient();
const settingsQuery = createQuery(() => ({
queryKey: ['user-settings'],
queryKey: ["user-settings"],
queryFn: getUserSettings,
staleTime: 5 * 60 * 1000,
}));
let saving = $state(false);
let saved = $state(false);
let error = $state('');
let error = $state("");
let syncDiaryOpen = $state(false);
let lastSavedForm: typeof form | null = null;
@ -49,16 +49,18 @@
async function handleSave(e: SubmitEvent) {
e.preventDefault();
saving = true;
error = '';
error = "";
try {
await updateUserSettings(form);
queryClient.invalidateQueries({ queryKey: ['user-settings'] });
queryClient.invalidateQueries({ queryKey: ["user-settings"] });
lastSavedForm = { ...form };
saved = true;
setTimeout(() => { saved = false; }, 2000);
setTimeout(() => {
saved = false;
}, 2000);
syncDiaryOpen = true;
} catch {
error = 'Failed to save settings';
error = "Failed to save settings";
} finally {
saving = false;
}
@ -67,7 +69,7 @@
async function handleSyncToDiary() {
if (!lastSavedForm) return;
await updateDiary(today(), lastSavedForm);
queryClient.invalidateQueries({ queryKey: ['diary', today()] });
queryClient.invalidateQueries({ queryKey: ["diary", today()] });
syncDiaryOpen = false;
}
</script>
@ -87,39 +89,49 @@
{:else}
<form onsubmit={handleSave} class="space-y-6">
<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">
<!-- 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 items-center gap-2">
<p class="text-sm font-medium">Calories</p>
{#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}
</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>
<input
type="number"
min="0"
step="1"
value={form.calories_goal ?? settingsQuery.data?.calories_goal ?? ''}
value={form.calories_goal ??
settingsQuery.data?.calories_goal ??
""}
oninput={(e) => {
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"
/>
</div>
{#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}
<div class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center gap-4">
{#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}
<div
class="bg-zinc-900 rounded-xl px-4 py-3 flex items-center gap-4"
>
<div class="flex-1">
<p class="text-sm font-medium">{field.label}</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
{saved ? 'bg-zinc-700 hover:bg-zinc-700' : ''}"
>
{saving ? 'Saving…' : saved ? 'Saved!' : 'Save'}
{saving ? "Saving…" : saved ? "Saved!" : "Save"}
</button>
</form>
{/if}
</main>
</div>
<Sheet 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>
<Sheet
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">
<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"
>No</button>
>No</button
>
<button
onclick={handleSyncToDiary}
class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors"
>Yes</button>
>Yes</button
>
</div>
</Sheet>

14
src/routes/+layout.svelte
View file

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

10
src/routes/+page.svelte
View file

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