feat(frontend): add ESLint and Prettier with Svelte support

- Install eslint, prettier and related plugins
- Add lint and format npm scripts
- Configure eslint.config.js with Svelte + TypeScript rules
- Configure .prettierrc with Svelte plugin
- Fix code to comply with lint rules:
  - Use resolve() for navigation links
  - Use SvelteMap for reactive maps
  - Use writable  instead of  +
  - Remove unused imports and variables

Note: ignoreGoto is set to true due to eslint-plugin-svelte#1327

frontend/src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/state';
+	import { resolve } from '$app/paths';
 	import { m } from '$lib/paraglide/messages.js';
 	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 
@@ -9,13 +10,13 @@
 	let mobileMenuOpen = $state(false);
 
 	const navItems = $derived([
-		{ href: '/', label: m.nav_dashboard(), icon: '🏠' },
-		{ href: '/products', label: m.nav_products(), icon: '🧴' },
-		{ href: '/routines', label: m.nav_routines(), icon: '📋' },
-		{ href: '/routines/grooming-schedule', label: m.nav_grooming(), icon: '🪒' },
-		{ href: '/health/medications', label: m.nav_medications(), icon: '💊' },
-		{ href: '/health/lab-results', label: m["nav_labResults"](), icon: '🔬' },
-		{ href: '/skin', label: m.nav_skin(), icon: '✨' }
+		{ href: resolve('/'), label: m.nav_dashboard(), icon: '🏠' },
+		{ href: resolve('/products'), label: m.nav_products(), icon: '🧴' },
+		{ href: resolve('/routines'), label: m.nav_routines(), icon: '📋' },
+		{ href: resolve('/routines/grooming-schedule'), label: m.nav_grooming(), icon: '🪒' },
+		{ href: resolve('/health/medications'), label: m.nav_medications(), icon: '💊' },
+		{ href: resolve('/health/lab-results'), label: m["nav_labResults"](), icon: '🔬' },
+		{ href: resolve('/skin'), label: m.nav_skin(), icon: '✨' }
 	]);
 
 	function isActive(href: string) {

frontend/src/routes/health/lab-results/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import type { ActionData, PageData } from './$types';
 	import { m } from '$lib/paraglide/messages.js';
-	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
 	import { Input } from '$lib/components/ui/input';
@@ -16,7 +17,6 @@
 		TableHeader,
 		TableRow
 	} from '$lib/components/ui/table';
-	import { goto } from '$app/navigation';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -33,6 +33,12 @@
 	let showForm = $state(false);
 	let selectedFlag = $state('');
 	let filterFlag = $derived(data.flag ?? '');
+
+	function onFlagChange(v: string) {
+		const base = resolve('/health/lab-results');
+		const url = v ? base + '?flag=' + v : base;
+		goto(url, { replaceState: true });
+	}
 </script>
 
 <svelte:head><title>{m["labResults_title"]()} — innercontext</title></svelte:head>
@@ -61,9 +67,7 @@
 		<Select
 			type="single"
 			value={filterFlag}
-			onValueChange={(v) => {
-				goto(v ? `/health/lab-results?flag=${v}` : '/health/lab-results');
-			}}
+			onValueChange={onFlagChange}
 		>
 			<SelectTrigger class="w-32">{filterFlag || m["labResults_flagAll"]()}</SelectTrigger>
 			<SelectContent>

frontend/src/routes/products/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import type { Product } from '$lib/types';
+	import { resolve } from '$app/paths';
+	import { SvelteMap } from 'svelte/reactivity';
 	import { m } from '$lib/paraglide/messages.js';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
@@ -37,7 +39,7 @@
 			return bc !== 0 ? bc : a.name.localeCompare(b.name);
 		});
 
-		const map = new Map<string, Product[]>();
+		const map = new SvelteMap<string, Product[]>();
 		for (const p of items) {
 			if (!map.has(p.category)) map.set(p.category, []);
 			map.get(p.category)!.push(p);
@@ -64,8 +66,8 @@
 			<p class="text-muted-foreground">{m.products_count({ count: totalCount })}</p>
 		</div>
 		<div class="flex gap-2">
-			<Button href="/products/suggest" variant="outline">✨ {m["products_suggest"]()}</Button>
-			<Button href="/products/new">{m["products_addNew"]()}</Button>
+			<Button href={resolve('/products/suggest')} variant="outline">✨ {m["products_suggest"]()}</Button>
+			<Button href={resolve('/products/new')}>{m["products_addNew"]()}</Button>
 		</div>
 	</div>
 

frontend/src/routes/products/[id]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { resolve } from '$app/paths';
 	import type { ActionData, PageData } from './$types';
 	import { m } from '$lib/paraglide/messages.js';
 	import { Badge } from '$lib/components/ui/badge';
@@ -21,7 +22,7 @@
 
 <div class="max-w-2xl space-y-6">
 	<div>
-		<a href="/products" class="text-sm text-muted-foreground hover:underline">{m["products_backToList"]()}</a>
+		<a href={resolve('/products')} class="text-sm text-muted-foreground hover:underline">{m["products_backToList"]()}</a>
 		<h2 class="mt-1 text-2xl font-bold tracking-tight">{product.name}</h2>
 	</div>
 

frontend/src/routes/products/new/+page.server.ts

@@ -184,9 +184,8 @@ export const actions: Actions = {
 		const contextRules = parseContextRules(form);
 		if (contextRules) payload.context_rules = contextRules;
 
-		let product;
 		try {
-			product = await createProduct(payload);
+			await createProduct(payload);
 		} catch (e) {
 			return fail(500, { error: (e as Error).message });
 		}

frontend/src/routes/products/new/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { resolve } from '$app/paths';
 	import type { ActionData } from './$types';
 	import { m } from '$lib/paraglide/messages.js';
 	import { Button } from '$lib/components/ui/button';
@@ -20,7 +21,7 @@
 
 <div class="max-w-2xl space-y-6">
 	<div class="flex items-center gap-4">
-		<a href="/products" class="text-sm text-muted-foreground hover:underline">{m["products_backToList"]()}</a>
+		<a href={resolve('/products')} class="text-sm text-muted-foreground hover:underline">{m["products_backToList"]()}</a>
 		<h2 class="text-2xl font-bold tracking-tight">{m["products_newTitle"]()}</h2>
 	</div>
 

frontend/src/routes/products/suggest/+page.server.ts

@@ -1,4 +1,3 @@
-import type { ActionData } from './$types';
 import { fail } from '@sveltejs/kit';
 import type { Actions } from './$types';
 

frontend/src/routes/products/suggest/+page.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import { resolve } from '$app/paths';
-	import type { ActionData, PageData } from './$types';
 	import type { ProductSuggestion } from '$lib/types';
 	import { m } from '$lib/paraglide/messages.js';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
 
-	let { data, form }: { data: PageData; form: ActionData } = $props();
-
 	let suggestions = $state<ProductSuggestion[] | null>(null);
 	let reasoning = $state('');
 	let loading = $state(false);

frontend/src/routes/routines/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
+	import { resolve } from '$app/paths';
 	import { m } from '$lib/paraglide/messages.js';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
@@ -28,8 +29,8 @@
 			<p class="text-muted-foreground">{m.routines_count({ count: data.routines.length })}</p>
 		</div>
 		<div class="flex flex-wrap gap-2">
-			<Button href="/routines/suggest" variant="outline">{m["routines_suggestAI"]()}</Button>
-			<Button href="/routines/new">{m["routines_addNew"]()}</Button>
+			<Button href={resolve('/routines/suggest')} variant="outline">{m["routines_suggestAI"]()}</Button>
+			<Button href={resolve('/routines/new')}>{m["routines_addNew"]()}</Button>
 		</div>
 	</div>
 

frontend/src/routes/routines/[id]/+page.svelte

@@ -19,15 +19,13 @@
 		SelectTrigger
 	} from '$lib/components/ui/select';
 	import { Separator } from '$lib/components/ui/separator';
+	import { SvelteMap } from 'svelte/reactivity';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 	let { routine, products } = $derived(data);
 
 	// ── Steps local state (synced from server data) ───────────────
-	let steps = $state<RoutineStep[]>([]);
-	$effect(() => {
-		steps = [...(routine.steps ?? [])].sort((a, b) => a.order_index - b.order_index);
-	});
+	let steps = $derived([...(routine.steps ?? [])].sort((a, b) => a.order_index - b.order_index));
 
 	const nextOrderIndex = $derived(
 		steps.length ? Math.max(...steps.map((s) => s.order_index)) + 1 : 0
@@ -122,7 +120,7 @@
 	}
 
 	const groupedProducts = $derived.by(() => {
-		const groups = new Map<string, typeof products>();
+		const groups = new SvelteMap<string, typeof products>();
 		for (const p of products) {
 			const key = p.category ?? 'other';
 			if (!groups.has(key)) groups.set(key, []);

frontend/src/routes/routines/suggest/+page.svelte

@@ -2,7 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { resolve } from '$app/paths';
 	import { SvelteSet } from 'svelte/reactivity';
-	import type { ActionData, PageData } from './$types';
+	import type { PageData } from './$types';
 	import type { BatchSuggestion, RoutineSuggestion, SuggestedStep } from '$lib/types';
 	import { m } from '$lib/paraglide/messages.js';
 	import { Badge } from '$lib/components/ui/badge';
@@ -13,7 +13,7 @@
 	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select';
 	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs';
 
-	let { data, form }: { data: PageData; form: ActionData } = $props();
+	let { data }: { data: PageData } = $props();
 
 	const productMap = $derived(Object.fromEntries(data.products.map((p) => [p.id, p])));