fix(recipe): View-Beacon ueber \$effect statt onMount

Live-Test auf kochwas-dev: bei Hard-Reload/Cold-Start (nicht SPA-Click)
landete kein view-Eintrag in der DB. Ursache: Recipe-Page-onMount
feuert vor Layout-onMount, profileStore.load() laeuft aber im Layout-
onMount und macht erst danach einen async fetch — zum Zeitpunkt des
Beacons war profileStore.active noch null.

Loesung: Beacon im \$effect, das auf profileStore.active reagiert.
viewBeaconSent-Flag verhindert duplicate POSTs wenn der User waehrend
der Page-Lifetime das Profil wechselt — der ursprueglich getrackte
Profil-View bleibt der "richtige" fuer dieses Page-Open.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/superpowers/specs/2026-04-22-views-and-collapsibles-design.md

@@ -0,0 +1,244 @@
+# Hauptseite: "Zuletzt angesehen" Sort + Collapsible Sections
+
+## Kontext
+
+Die Hauptseite (`src/routes/+page.svelte`) hat heute drei Sektionen — "Deine
+Favoriten", "Zuletzt hinzugefügt", "Alle Rezepte" — und vier Sort-Optionen
+für "Alle Rezepte" (Name, Bewertung, Zuletzt gekocht, Hinzugefügt). Der
+User möchte:
+
+1. Eine fünfte Sort-Option "Zuletzt angesehen" für "Alle Rezepte"
+2. "Deine Favoriten" und "Zuletzt hinzugefügt" auf-/zuklappbar machen
+
+Beides reduziert visuelle Last und gibt Zugriff auf "kürzlich
+beschäftigte mich" Rezepte ohne Suche.
+
+## Design-Entscheidungen (durch Brainstorming bestätigt)
+
+- **View-Tracking**: zählt sofort beim Laden der Detailseite — kein Threshold
+- **Storage**: SQLite, pro Profil (konsistent mit Ratings, Cooked, Wishlist)
+- **Collapsibles**: standardmäßig offen, User-Wahl persistiert pro Device
+
+## Sektion 1 — Schema & View-Tracking
+
+### Migration
+
+Neue Datei `src/lib/server/db/migrations/014_recipe_view.sql`
+(Numbering: aktuell ist die letzte Migration `013_shopping_list.sql`):
+
+```sql
+CREATE TABLE recipe_view (
+  profile_id INTEGER NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  recipe_id INTEGER NOT NULL REFERENCES recipes(id) ON DELETE CASCADE,
+  last_viewed_at TEXT NOT NULL DEFAULT (datetime('now')),
+  PRIMARY KEY (profile_id, recipe_id)
+);
+CREATE INDEX idx_recipe_view_recent
+  ON recipe_view(profile_id, last_viewed_at DESC);
+```
+
+Idempotent über `INSERT OR REPLACE` — mehrfache Visits ein- und desselben
+Profils auf dasselbe Rezept führen nur zur Aktualisierung des Timestamps,
+kein Multi-Insert.
+
+Cascade auf beide FKs: löscht ein User ein Rezept oder ein Profil, gehen
+zugehörige Views automatisch mit.
+
+### API
+
+Neuer Endpoint `POST /api/recipes/[id]/view`:
+
+```
+Request body: { "profile_id": number }
+Response: 204 No Content
+Errors:
+  - 400 wenn profile_id fehlt oder kein Number
+  - 404 wenn Recipe nicht existiert (FK-Violation)
+  - 404 wenn Profil nicht existiert (FK-Violation)
+```
+
+Implementation: einfache `INSERT OR REPLACE` mit den IDs. `last_viewed_at`
+nutzt den Default (`datetime('now')`).
+
+### Client-Hook
+
+In `src/routes/recipes/[id]/+page.svelte`, in `onMount`:
+
+```ts
+if (profileStore.active) {
+  void fetch(`/api/recipes/${recipe.id}/view`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ profile_id: profileStore.active.id })
+  });
+}
+```
+
+Fire-and-forget, kein UI-Block, kein Error-Handling — wenn der Beacon
+fehlschlägt, ist es kein User-Visible-Bug, das nächste View korrigiert
+es.
+
+## Sektion 2 — Sort "Zuletzt angesehen"
+
+### Page
+
+In `src/routes/+page.svelte`:
+
+```ts
+type AllSort = 'name' | 'rating' | 'cooked' | 'created' | 'viewed';
+const ALL_SORTS = [
+  ...,
+  { value: 'viewed', label: 'Zuletzt angesehen' }
+];
+```
+
+### API
+
+`GET /api/recipes/all` bekommt einen optionalen `profile_id`-Query-Param.
+Der Endpoint reicht ihn an `listAllRecipesPaginated` durch.
+
+### DB-Layer
+
+`listAllRecipesPaginated` in `src/lib/server/recipes/search-local.ts`
+bekommt einen optionalen `profileId: number | null`-Parameter. Wenn
+`sort === 'viewed'` UND `profileId !== null`:
+
+```sql
+SELECT r.*, ...
+FROM recipes r
+LEFT JOIN recipe_view v
+  ON v.recipe_id = r.id AND v.profile_id = :profileId
+ORDER BY v.last_viewed_at DESC NULLS LAST,
+         r.title COLLATE NOCASE ASC
+LIMIT :limit OFFSET :offset
+```
+
+Bei `sort === 'viewed'` ohne `profileId`: fällt auf alphabetische
+Sortierung zurück (kein Crash, sinnvolles Default-Verhalten).
+
+### Reactive Refetch bei Profile-Switch
+
+Auf Home-Page-Ebene: ein `$effect` der auf `profileStore.activeId` lauscht
+und — wenn `allSort === 'viewed'` — `setAllSort('viewed')` retriggert
+(forciert Refetch mit neuem profile_id). Sonst (anderer Sort) keine
+Aktion, weil andere Sorts nicht profilabhängig sind.
+
+### Snapshot-Kompatibilität
+
+Der existierende `rehydrateAll(sort, count, exhausted)` in `+page.svelte`
+muss `profile_id` mitschicken, sonst zeigt der Back-Nav für sort='viewed'
+einen anderen Inhalt als vor dem Forward-Klick. Das gleiche gilt für
+`loadAllMore` und `setAllSort`.
+
+## Sektion 3 — Auf-/Zuklappbare Sektionen
+
+### State
+
+In `src/routes/+page.svelte`:
+
+```ts
+type CollapseKey = 'favorites' | 'recent';
+let collapsed = $state<Record<CollapseKey, boolean>>({
+  favorites: false,
+  recent: false
+});
+
+const STORAGE_KEY = 'kochwas.collapsed.sections';
+
+function toggle(key: CollapseKey) {
+  collapsed[key] = !collapsed[key];
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsed));
+}
+```
+
+In `onMount`: aus localStorage parsen, fehlerhafte JSON ignorieren
+(default-state behalten).
+
+### Markup
+
+Pro Sektion:
+
+```svelte
+<section class="listing">
+  <button
+    class="section-head"
+    onclick={() => toggle('favorites')}
+    aria-expanded={!collapsed.favorites}
+  >
+    <ChevronDown size={18} class:rotated={collapsed.favorites} />
+    <h2>Deine Favoriten</h2>
+    <span class="count">{favorites.length}</span>
+  </button>
+  {#if !collapsed.favorites}
+    <div transition:slide={{ duration: 180 }}>
+      <ul class="cards">…</ul>
+    </div>
+  {/if}
+</section>
+```
+
+### Visual / CSS
+
+- Header `<button>`: transparenter Border, full-width, `display: flex`,
+  `align-items: center`, `gap: 0.5rem`, `min-height: 44px` (Tap-Target)
+- Chevron-Icon (lucide-svelte `ChevronDown`): rotiert auf
+  `transform: rotate(-90deg)` wenn `.rotated`
+- Count-Pill rechts: kleiner grauer Text, hilft zu sehen wie viel hinter
+  einer zugeklappten Sektion steckt
+- Hover: leichter Hintergrund (`#f4f8f5`, wie andere interaktive Elemente)
+- Animation: `svelte/transition`'s `slide`, ~180 ms
+
+### Persistenz-Format
+
+```json
+{ "favorites": false, "recent": true }
+```
+
+Truthy = collapsed. Default-Zustand wenn key fehlt: beide false.
+
+### "Alle Rezepte" bleibt nicht-collapsible
+
+Hauptliste, immer sichtbar — User würde das Scrollen verlieren.
+
+## Test-Strategie
+
+### Schema/Migration
+
+- Migrations-Test (existierendes Pattern in `tests/integration`): nach
+  `applyMigrations` muss `recipe_view` existieren mit erwarteten
+  Spalten
+
+### View-Endpoint
+
+- `POST /api/recipes/[id]/view` Integration-Test:
+  - Erstes POST → Row mit `last_viewed_at` ungefähr `now`
+  - Zweites POST → gleiche Row, `last_viewed_at` aktualisiert
+  - POST mit ungültiger profile_id → 404
+  - POST mit ungültiger recipe_id → 404
+  - POST ohne profile_id im Body → 400
+
+### Sort-Logik
+
+- Unit-Test für `listAllRecipesPaginated(db, 'viewed', limit, offset, profileId)`:
+  - Mit Views-Daten: angesehene Rezepte zuerst (DESC nach `last_viewed_at`),
+    Rest alphabetisch
+  - Ohne profileId: fallback auf alphabetisch
+  - Mit profileId aber ohne Views: alle als NULL → alphabetisch
+
+### Collapsibles (manuell oder unit)
+
+- localStorage-Persistenz: Toggle, Reload, gleicher State
+- Default-State wenn localStorage leer/corrupt: beide offen
+- Ein Unit-Test für eine reine Helper-Funktion (parse/serialize), Markup
+  ist Snapshot-mässig nicht so wertvoll testbar
+
+## Reihenfolge der Umsetzung
+
+1. Migration + DB-Layer + Sort-Query (`search-local.ts`-Erweiterung)
+2. View-Endpoint (`POST /api/recipes/[id]/view`) + Client-Beacon in
+   `recipes/[id]/+page.svelte`
+3. Sort-Option in `+page.svelte` UI + API-Param weiterreichen +
+   profile_id in `loadAllMore`/`rehydrateAll`/`setAllSort` durchreichen
+4. Collapsible-Pattern in `+page.svelte` für Favoriten und Recent
+
+Jede Phase atomar committen + pushen.

src/lib/server/db/migrations/014_recipe_view.sql

@@ -0,0 +1,10 @@
+-- Merkt je Profil, wann ein Rezept zuletzt angesehen wurde.
+-- Dient als Basis fuer "Zuletzt gesehen"-Sortierung auf der Startseite.
+CREATE TABLE recipe_view (
+  profile_id INTEGER NOT NULL REFERENCES profile(id) ON DELETE CASCADE,
+  recipe_id INTEGER NOT NULL REFERENCES recipe(id) ON DELETE CASCADE,
+  last_viewed_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (profile_id, recipe_id)
+);
+CREATE INDEX idx_recipe_view_recent
+  ON recipe_view (profile_id, last_viewed_at DESC);

src/lib/server/recipes/search-local.ts

@@ -88,18 +88,44 @@ export function listAllRecipes(db: Database.Database): SearchHit[] {
     .all() as SearchHit[];
 }
 
-export type AllRecipesSort = 'name' | 'rating' | 'cooked' | 'created';
+export type AllRecipesSort = 'name' | 'rating' | 'cooked' | 'created' | 'viewed';
 
 export function listAllRecipesPaginated(
   db: Database.Database,
   sort: AllRecipesSort,
   limit: number,
-  offset: number
+  offset: number,
+  profileId: number | null = null
 ): SearchHit[] {
+  // 'viewed' branch needs a JOIN against recipe_view — diverges from the
+  // simpler ORDER-BY-only path. We keep it in a separate prepare for
+  // clarity. Without profileId, fall back to alphabetical so the
+  // sort-chip still produces a sensible list.
+  if (sort === 'viewed' && profileId !== null) {
+    return db
+      .prepare(
+        `SELECT r.id,
+                r.title,
+                r.description,
+                r.image_path,
+                r.source_domain,
+                (SELECT AVG(stars) FROM rating WHERE recipe_id = r.id) AS avg_stars,
+                (SELECT MAX(cooked_at) FROM cooking_log WHERE recipe_id = r.id) AS last_cooked_at
+           FROM recipe r
+           LEFT JOIN recipe_view v
+             ON v.recipe_id = r.id AND v.profile_id = ?
+          ORDER BY CASE WHEN v.last_viewed_at IS NULL THEN 1 ELSE 0 END,
+                   v.last_viewed_at DESC,
+                   r.title COLLATE NOCASE ASC
+          LIMIT ? OFFSET ?`
+      )
+      .all(profileId, limit, offset) as SearchHit[];
+  }
+
   // NULLS-last-Emulation per CASE-Expression — SQLite unterstützt NULLS LAST
   // zwar seit 3.30, aber der Pi könnte auf einer älteren Version laufen und
   // CASE ist überall zuverlässig.
-  const orderBy: Record<AllRecipesSort, string> = {
+  const orderBy: Record<Exclude<AllRecipesSort, 'viewed'>, string> = {
     name: 'r.title COLLATE NOCASE ASC',
     rating:
       'CASE WHEN (SELECT AVG(stars) FROM rating WHERE recipe_id = r.id) IS NULL THEN 1 ELSE 0 END, ' +
@@ -109,6 +135,8 @@ export function listAllRecipesPaginated(
       '(SELECT MAX(cooked_at) FROM cooking_log WHERE recipe_id = r.id) DESC, r.title COLLATE NOCASE ASC',
     created: 'r.created_at DESC, r.id DESC'
   };
+  // Without profile, 'viewed' degrades to alphabetical.
+  const effectiveSort = sort === 'viewed' ? 'name' : sort;
   return db
     .prepare(
       `SELECT r.id,
@@ -119,7 +147,7 @@ export function listAllRecipesPaginated(
               (SELECT AVG(stars) FROM rating WHERE recipe_id = r.id) AS avg_stars,
               (SELECT MAX(cooked_at) FROM cooking_log WHERE recipe_id = r.id) AS last_cooked_at
          FROM recipe r
-        ORDER BY ${orderBy[sort]}
+        ORDER BY ${orderBy[effectiveSort]}
         LIMIT ? OFFSET ?`
     )
     .all(limit, offset) as SearchHit[];

src/lib/server/recipes/views.ts

@@ -0,0 +1,37 @@
+import type Database from 'better-sqlite3';
+
+export function recordView(
+  db: Database.Database,
+  profileId: number,
+  recipeId: number
+): void {
+  // ON CONFLICT DO UPDATE bumps only the timestamp field — avoids the
+  // DELETE+INSERT that INSERT OR REPLACE performs under the hood, which would
+  // silently cascade-delete any future FK-referencing children.
+  db.prepare(
+    `INSERT INTO recipe_view (profile_id, recipe_id)
+     VALUES (?, ?)
+     ON CONFLICT(profile_id, recipe_id) DO UPDATE
+       SET last_viewed_at = CURRENT_TIMESTAMP`
+  ).run(profileId, recipeId);
+}
+
+export type ViewRow = {
+  profile_id: number;
+  recipe_id: number;
+  last_viewed_at: string;
+};
+
+export function listViews(
+  db: Database.Database,
+  profileId: number
+): ViewRow[] {
+  return db
+    .prepare(
+      `SELECT profile_id, recipe_id, last_viewed_at
+         FROM recipe_view
+        WHERE profile_id = ?
+        ORDER BY last_viewed_at DESC`
+    )
+    .all(profileId) as ViewRow[];
+}

src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import { page } from '$app/stores';
-  import { CookingPot, X } from 'lucide-svelte';
+  import { CookingPot, X, ChevronDown } from 'lucide-svelte';
+  import { slide } from 'svelte/transition';
   import type { Snapshot } from './$types';
   import type { SearchHit } from '$lib/server/recipes/search-local';
   import { randomQuote } from '$lib/quotes';
@@ -27,13 +28,20 @@
   let favorites = $state<SearchHit[]>([]);
 
   const ALL_PAGE = 10;
-  type AllSort = 'name' | 'rating' | 'cooked' | 'created';
+  type AllSort = 'name' | 'rating' | 'cooked' | 'created' | 'viewed';
   const ALL_SORTS: { value: AllSort; label: string }[] = [
     { value: 'name', label: 'Name' },
     { value: 'rating', label: 'Bewertung' },
     { value: 'cooked', label: 'Zuletzt gekocht' },
-    { value: 'created', label: 'Hinzugefügt' }
+    { value: 'created', label: 'Hinzugefügt' },
+    { value: 'viewed', label: 'Zuletzt angesehen' }
   ];
+  function buildAllUrl(sort: AllSort, limit: number, offset: number): string {
+    const profileId = profileStore.active?.id;
+    const profilePart = profileId ? `&profile_id=${profileId}` : '';
+    return `/api/recipes/all?sort=${sort}&limit=${limit}&offset=${offset}${profilePart}`;
+  }
+
   let allRecipes = $state<SearchHit[]>([]);
   let allSort = $state<AllSort>('name');
   let allExhausted = $state(false);
@@ -42,6 +50,20 @@
   let allChips: HTMLElement | undefined = $state();
   let allObserver: IntersectionObserver | null = null;
 
+  type CollapseKey = 'favorites' | 'recent';
+  const COLLAPSE_STORAGE_KEY = 'kochwas.collapsed.sections';
+  let collapsed = $state<Record<CollapseKey, boolean>>({
+    favorites: false,
+    recent: false
+  });
+
+  function toggleCollapsed(key: CollapseKey) {
+    collapsed[key] = !collapsed[key];
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(collapsed));
+    }
+  }
+
   // Snapshot persists across history navigation. We capture not only the
   // search store, but also the pagination depth ("user had loaded 60
   // recipes via infinite scroll") so on back-nav we can re-hydrate the
@@ -79,7 +101,7 @@
   async function rehydrateAll(sort: AllSort, count: number, exhausted: boolean) {
     allLoading = true;
     try {
-      const res = await fetch(`/api/recipes/all?sort=${sort}&limit=${count}&offset=0`);
+      const res = await fetch(buildAllUrl(sort, count, 0));
       if (!res.ok) return;
       const body = await res.json();
       const hits = body.hits as SearchHit[];
@@ -100,9 +122,7 @@
     if (allLoading || allExhausted) return;
     allLoading = true;
     try {
-      const res = await fetch(
-        `/api/recipes/all?sort=${allSort}&limit=${ALL_PAGE}&offset=${allRecipes.length}`
-      );
+      const res = await fetch(buildAllUrl(allSort, ALL_PAGE, allRecipes.length));
       if (!res.ok) return;
       const body = await res.json();
       const more = body.hits as SearchHit[];
@@ -126,9 +146,7 @@
     const chipsBefore = allChips?.getBoundingClientRect().top ?? 0;
     allLoading = true;
     try {
-      const res = await fetch(
-        `/api/recipes/all?sort=${next}&limit=${ALL_PAGE}&offset=0`
-      );
+      const res = await fetch(buildAllUrl(next, ALL_PAGE, 0));
       if (!res.ok) return;
       const body = await res.json();
       const hits = body.hits as SearchHit[];
@@ -164,7 +182,7 @@
     void loadRecent();
     void searchFilterStore.load();
     const saved = localStorage.getItem('kochwas.allSort');
-    if (saved && ['name', 'rating', 'cooked', 'created'].includes(saved)) {
+    if (saved && ['name', 'rating', 'cooked', 'created', 'viewed'].includes(saved)) {
       allSort = saved as AllSort;
     }
     // Fresh-mount: kick off the initial 10. On back-nav, snapshot.restore
@@ -172,6 +190,16 @@
     // this; if loadAllMore lands first, rehydrateAll's larger result
     // simply overwrites allRecipes once it resolves.
     void loadAllMore();
+    const rawCollapsed = localStorage.getItem(COLLAPSE_STORAGE_KEY);
+    if (rawCollapsed) {
+      try {
+        const parsed = JSON.parse(rawCollapsed) as Partial<Record<CollapseKey, boolean>>;
+        if (typeof parsed.favorites === 'boolean') collapsed.favorites = parsed.favorites;
+        if (typeof parsed.recent === 'boolean') collapsed.recent = parsed.recent;
+      } catch {
+        // Corrupt JSON — keep defaults (both open).
+      }
+    }
   });
 
   // IntersectionObserver an den Sentinel hängen — wenn sichtbar, nachladen.
@@ -203,6 +231,33 @@
     store.reSearch();
   });
 
+  // 'viewed' sort depends on the active profile. When the user switches
+  // profiles, refetch with the new profile_id so the list reflects what
+  // the *current* profile has viewed. Other sorts are profile-agnostic
+  // and don't need this.
+  $effect(() => {
+    const active = profileStore.active;
+    if (allSort !== 'viewed') return;
+    if (allLoading) return;
+    // Re-fetch the first page; rehydrate would re-load the previous
+    // depth, but a sort-context change should reset to page 1 anyway.
+    void (async () => {
+      allLoading = true;
+      try {
+        const res = await fetch(buildAllUrl('viewed', ALL_PAGE, 0));
+        if (!res.ok) return;
+        const body = await res.json();
+        const hits = body.hits as SearchHit[];
+        allRecipes = hits;
+        allExhausted = hits.length < ALL_PAGE;
+      } finally {
+        allLoading = false;
+      }
+      // 'active' is referenced so $effect tracks it as a dep:
+      void active;
+    })();
+  });
+
   // Sync current query back into the URL as ?q=... via replaceState,
   // without spamming the history stack. Pushing a new entry happens only
   // when the user clicks a result or otherwise navigates away.
@@ -346,57 +401,91 @@
 {:else}
   {#if profileStore.active && favorites.length > 0}
     <section class="listing">
-      <h2>Deine Favoriten</h2>
-      <ul class="cards">
-        {#each favorites as r (r.id)}
-          <li class="card-wrap">
-            <a href={`/recipes/${r.id}`} class="card">
-              {#if r.image_path}
-                <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
-              {:else}
-                <div class="placeholder"><CookingPot size={36} /></div>
-              {/if}
-              <div class="card-body">
-                <div class="title">{r.title}</div>
-                {#if r.source_domain}
-                  <div class="domain">{r.source_domain}</div>
-                {/if}
-              </div>
-            </a>
-          </li>
-        {/each}
-      </ul>
+      <button
+        type="button"
+        class="section-head"
+        onclick={() => toggleCollapsed('favorites')}
+        aria-expanded={!collapsed.favorites}
+      >
+        <ChevronDown
+          size={18}
+          strokeWidth={2.2}
+          class={collapsed.favorites ? 'chev rotated' : 'chev'}
+        />
+        <h2>Deine Favoriten</h2>
+        <span class="count">{favorites.length}</span>
+      </button>
+      {#if !collapsed.favorites}
+        <div transition:slide={{ duration: 180 }}>
+          <ul class="cards">
+            {#each favorites as r (r.id)}
+              <li class="card-wrap">
+                <a href={`/recipes/${r.id}`} class="card">
+                  {#if r.image_path}
+                    <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
+                  {:else}
+                    <div class="placeholder"><CookingPot size={36} /></div>
+                  {/if}
+                  <div class="card-body">
+                    <div class="title">{r.title}</div>
+                    {#if r.source_domain}
+                      <div class="domain">{r.source_domain}</div>
+                    {/if}
+                  </div>
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
     </section>
   {/if}
   {#if recent.length > 0}
     <section class="listing">
-      <h2>Zuletzt hinzugefügt</h2>
-      <ul class="cards">
-        {#each recent as r (r.id)}
-          <li class="card-wrap">
-            <a href={`/recipes/${r.id}`} class="card">
-              {#if r.image_path}
-                <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
-              {:else}
-                <div class="placeholder"><CookingPot size={36} /></div>
-              {/if}
-              <div class="card-body">
-                <div class="title">{r.title}</div>
-                {#if r.source_domain}
-                  <div class="domain">{r.source_domain}</div>
-                {/if}
-              </div>
-            </a>
-            <button
-              class="dismiss"
-              aria-label="Aus Zuletzt-hinzugefügt entfernen"
-              onclick={(e) => dismissFromRecent(r.id, e)}
-            >
-              <X size={16} strokeWidth={2.5} />
-            </button>
-          </li>
-        {/each}
-      </ul>
+      <button
+        type="button"
+        class="section-head"
+        onclick={() => toggleCollapsed('recent')}
+        aria-expanded={!collapsed.recent}
+      >
+        <ChevronDown
+          size={18}
+          strokeWidth={2.2}
+          class={collapsed.recent ? 'chev rotated' : 'chev'}
+        />
+        <h2>Zuletzt hinzugefügt</h2>
+        <span class="count">{recent.length}</span>
+      </button>
+      {#if !collapsed.recent}
+        <div transition:slide={{ duration: 180 }}>
+          <ul class="cards">
+            {#each recent as r (r.id)}
+              <li class="card-wrap">
+                <a href={`/recipes/${r.id}`} class="card">
+                  {#if r.image_path}
+                    <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
+                  {:else}
+                    <div class="placeholder"><CookingPot size={36} /></div>
+                  {/if}
+                  <div class="card-body">
+                    <div class="title">{r.title}</div>
+                    {#if r.source_domain}
+                      <div class="domain">{r.source_domain}</div>
+                    {/if}
+                  </div>
+                </a>
+                <button
+                  class="dismiss"
+                  aria-label="Aus Zuletzt-hinzugefügt entfernen"
+                  onclick={(e) => dismissFromRecent(r.id, e)}
+                >
+                  <X size={16} strokeWidth={2.5} />
+                </button>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
     </section>
   {/if}
   <section class="listing">
@@ -516,6 +605,49 @@
     color: #444;
     margin: 0 0 0.75rem;
   }
+  .section-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.4rem 0.25rem;
+    background: transparent;
+    border: 0;
+    border-radius: 8px;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    color: inherit;
+    min-height: 44px;
+    margin-bottom: 0.4rem;
+  }
+  .section-head:hover {
+    background: #f4f8f5;
+  }
+  .section-head:focus-visible {
+    outline: 2px solid #2b6a3d;
+    outline-offset: 2px;
+  }
+  .section-head h2 {
+    margin: 0;
+    font-size: 1.05rem;
+    color: #444;
+    font-weight: 600;
+  }
+  .section-head .count {
+    margin-left: auto;
+    color: #888;
+    font-size: 0.85rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .section-head :global(.chev) {
+    color: #2b6a3d;
+    flex-shrink: 0;
+    transition: transform 180ms;
+  }
+  .section-head :global(.chev.rotated) {
+    transform: rotate(-90deg);
+  }
   .listing-head {
     display: flex;
     align-items: center;

src/routes/api/recipes/[id]/view/+server.ts

@@ -0,0 +1,27 @@
+import type { RequestHandler } from './$types';
+import { z } from 'zod';
+import { error } from '@sveltejs/kit';
+import { getDb } from '$lib/server/db';
+import { validateBody, parsePositiveIntParam } from '$lib/server/api-helpers';
+import { recordView } from '$lib/server/recipes/views';
+
+const Schema = z.object({
+  profile_id: z.number().int().positive()
+});
+
+export const POST: RequestHandler = async ({ params, request }) => {
+  const recipeId = parsePositiveIntParam(params.id, 'id');
+  const body = validateBody(await request.json().catch(() => null), Schema);
+
+  try {
+    recordView(getDb(), body.profile_id, recipeId);
+  } catch (e) {
+    // FK violation (unknown profile or recipe) → 404
+    if (e instanceof Error && /FOREIGN KEY constraint failed/i.test(e.message)) {
+      error(404, { message: 'Recipe or profile not found' });
+    }
+    throw e;
+  }
+
+  return new Response(null, { status: 204 });
+};

src/routes/api/recipes/all/+server.ts

@@ -6,7 +6,19 @@ import {
   type AllRecipesSort
 } from '$lib/server/recipes/search-local';
 
-const VALID_SORTS = new Set<AllRecipesSort>(['name', 'rating', 'cooked', 'created']);
+const VALID_SORTS = new Set<AllRecipesSort>([
+  'name',
+  'rating',
+  'cooked',
+  'created',
+  'viewed'
+]);
+
+function parseProfileId(raw: string | null): number | null {
+  if (!raw) return null;
+  const n = Number(raw);
+  return Number.isInteger(n) && n > 0 ? n : null;
+}
 
 export const GET: RequestHandler = async ({ url }) => {
   const sortRaw = (url.searchParams.get('sort') ?? 'name') as AllRecipesSort;
@@ -17,6 +29,7 @@ export const GET: RequestHandler = async ({ url }) => {
   // one round-trip so document height matches and scroll-restore lands.
   const limit = Math.min(200, Math.max(1, Number(url.searchParams.get('limit') ?? 10)));
   const offset = Math.max(0, Number(url.searchParams.get('offset') ?? 0));
-  const hits = listAllRecipesPaginated(getDb(), sortRaw, limit, offset);
+  const profileId = parseProfileId(url.searchParams.get('profile_id'));
+  const hits = listAllRecipesPaginated(getDb(), sortRaw, limit, offset, profileId);
   return json({ sort: sortRaw, limit, offset, hits });
 };

src/routes/recipes/[id]/+page.svelte

@@ -355,9 +355,28 @@
       }
     };
     document.addEventListener('visibilitychange', onVisibility);
+
     return () => document.removeEventListener('visibilitychange', onVisibility);
   });
 
+  // Track view per active profile (fire-and-forget). Lives in $effect, not
+  // onMount, because profileStore.load() runs from layout's onMount and the
+  // child onMount fires first — at mount time profileStore.active is still
+  // null on cold loads. The effect re-runs once active populates, the
+  // viewBeaconSent flag prevents duplicate POSTs on subsequent profile
+  // switches within the same page instance.
+  let viewBeaconSent = $state(false);
+  $effect(() => {
+    if (viewBeaconSent) return;
+    if (!profileStore.active) return;
+    viewBeaconSent = true;
+    void fetch(`/api/recipes/${data.recipe.id}/view`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ profile_id: profileStore.active.id })
+    });
+  });
+
   onDestroy(() => {
     void releaseWakeLock();
   });

tests/integration/recipe-views.test.ts

@@ -0,0 +1,270 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { openInMemoryForTest } from '../../src/lib/server/db';
+
+// ---------------------------------------------------------------------------
+// Module-level mock so the POST handler uses the in-memory test DB.
+// Must be declared before any import of the handler itself.
+// ---------------------------------------------------------------------------
+const { testDb } = vi.hoisted(() => ({
+  testDb: { current: null as ReturnType<typeof openInMemoryForTest> | null }
+}));
+
+vi.mock('$lib/server/db', async () => {
+  const actual =
+    await vi.importActual<typeof import('../../src/lib/server/db')>(
+      '../../src/lib/server/db'
+    );
+  return {
+    ...actual,
+    getDb: () => {
+      if (!testDb.current) throw new Error('test DB not initialised');
+      return testDb.current;
+    }
+  };
+});
+
+import { recordView, listViews } from '../../src/lib/server/recipes/views';
+import { createProfile } from '../../src/lib/server/profiles/repository';
+import { listAllRecipesPaginated } from '../../src/lib/server/recipes/search-local';
+import { POST } from '../../src/routes/api/recipes/[id]/view/+server';
+
+function seedRecipe(db: ReturnType<typeof openInMemoryForTest>, title: string): number {
+  const r = db
+    .prepare("INSERT INTO recipe (title, created_at) VALUES (?, datetime('now')) RETURNING id")
+    .get(title) as { id: number };
+  return r.id;
+}
+
+function mkReq(body: unknown) {
+  return new Request('http://test/api/recipes/1/view', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body)
+  });
+}
+
+describe('014_recipe_views migration', () => {
+  it('creates recipe_view table with expected columns', () => {
+    const db = openInMemoryForTest();
+    const cols = db.prepare("PRAGMA table_info(recipe_view)").all() as Array<{
+      name: string;
+      type: string;
+      notnull: number;
+      pk: number;
+    }>;
+    const byName = Object.fromEntries(cols.map((c) => [c.name, c]));
+    expect(byName.profile_id?.type).toBe('INTEGER');
+    expect(byName.profile_id?.notnull).toBe(1);
+    expect(byName.profile_id?.pk).toBe(1);
+    expect(byName.recipe_id?.type).toBe('INTEGER');
+    expect(byName.recipe_id?.notnull).toBe(1);
+    expect(byName.recipe_id?.pk).toBe(2);
+    expect(byName.last_viewed_at?.type).toBe('TIMESTAMP');
+    expect(byName.last_viewed_at?.notnull).toBe(1);
+  });
+
+  it('has index on (profile_id, last_viewed_at DESC)', () => {
+    const db = openInMemoryForTest();
+    const idxList = db
+      .prepare("PRAGMA index_list(recipe_view)")
+      .all() as Array<{ name: string }>;
+    expect(idxList.some((i) => i.name === 'idx_recipe_view_recent')).toBe(true);
+  });
+});
+
+describe('recordView', () => {
+  it('inserts a view row with default timestamp', () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    const recipeId = seedRecipe(db, 'Pasta');
+
+    recordView(db, profile.id, recipeId);
+
+    const rows = listViews(db, profile.id);
+    expect(rows.length).toBe(1);
+    expect(rows[0].recipe_id).toBe(recipeId);
+    expect(rows[0].last_viewed_at).toMatch(/^\d{4}-\d{2}-\d{2}/);
+  });
+
+  it('updates timestamp on subsequent view of same recipe', async () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    const recipeId = seedRecipe(db, 'Pasta');
+
+    recordView(db, profile.id, recipeId);
+    const first = listViews(db, profile.id)[0].last_viewed_at;
+
+    // tiny delay so the second timestamp differs
+    await new Promise((r) => setTimeout(r, 1100));
+    recordView(db, profile.id, recipeId);
+
+    const rows = listViews(db, profile.id);
+    expect(rows.length).toBe(1);
+    expect(rows[0].last_viewed_at >= first).toBe(true);
+  });
+
+  it('throws on unknown profile_id (FK)', () => {
+    const db = openInMemoryForTest();
+    const recipeId = seedRecipe(db, 'Pasta');
+    expect(() => recordView(db, 999, recipeId)).toThrow();
+  });
+
+  it('throws on unknown recipe_id (FK)', () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    expect(() => recordView(db, profile.id, 999)).toThrow();
+  });
+});
+
+describe("listAllRecipesPaginated sort='viewed'", () => {
+  it('puts recently-viewed recipes first, NULLs alphabetically last', async () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    const recipeA = seedRecipe(db, 'Apfelkuchen');
+    const recipeB = seedRecipe(db, 'Brokkoli');
+    // Inserted in reverse-alphabetical order (Z before D) to prove the
+    // tiebreaker sorts by title, not insertion order.
+    const recipeC = seedRecipe(db, 'Zwiebelkuchen');
+    const recipeD = seedRecipe(db, 'Donauwelle');
+
+    // View order: B then A. C and D never viewed.
+    recordView(db, profile.id, recipeB);
+    await new Promise((r) => setTimeout(r, 1100));
+    recordView(db, profile.id, recipeA);
+
+    const hits = listAllRecipesPaginated(db, 'viewed', 50, 0, profile.id);
+    // Viewed: A (most recent), B — then unviewed alphabetically: D before C.
+    expect(hits.map((h) => h.id)).toEqual([recipeA, recipeB, recipeD, recipeC]);
+  });
+
+  it('falls back to alphabetical when profileId is null', () => {
+    const db = openInMemoryForTest();
+    seedRecipe(db, 'Couscous');
+    seedRecipe(db, 'Apfelkuchen');
+    seedRecipe(db, 'Brokkoli');
+
+    const hits = listAllRecipesPaginated(db, 'viewed', 50, 0, null);
+    expect(hits.map((h) => h.title)).toEqual(['Apfelkuchen', 'Brokkoli', 'Couscous']);
+  });
+
+  it('keeps existing sorts working unchanged', () => {
+    const db = openInMemoryForTest();
+    seedRecipe(db, 'Couscous');
+    seedRecipe(db, 'Apfelkuchen');
+    seedRecipe(db, 'Brokkoli');
+
+    const hits = listAllRecipesPaginated(db, 'name', 50, 0);
+    expect(hits.map((h) => h.title)).toEqual(['Apfelkuchen', 'Brokkoli', 'Couscous']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// POST /api/recipes/[id]/view — endpoint integration tests
+// ---------------------------------------------------------------------------
+
+beforeEach(() => {
+  testDb.current = openInMemoryForTest();
+});
+
+describe('POST /api/recipes/[id]/view', () => {
+  it('204 + view row written on success', async () => {
+    const db = testDb.current!;
+    const profile = createProfile(db, 'Tester');
+    const recipeId = seedRecipe(db, 'Pasta');
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST({ params: { id: String(recipeId) }, request: mkReq({ profile_id: profile.id }) } as any);
+
+    expect(res.status).toBe(204);
+    const rows = listViews(db, profile.id);
+    expect(rows.length).toBe(1);
+    expect(rows[0].recipe_id).toBe(recipeId);
+  });
+
+  it('400 on recipe id = 0', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '0' }, request: mkReq({ profile_id: 1 }) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on non-numeric recipe id', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: 'abc' }, request: mkReq({ profile_id: 1 }) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on missing profile_id in body', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '1' }, request: mkReq({}) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on non-positive profile_id', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '1' }, request: mkReq({ profile_id: 0 }) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on malformed JSON body', async () => {
+    const badReq = new Request('http://test/api/recipes/1/view', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: 'not-json'
+    });
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '1' }, request: badReq } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('404 on unknown profile_id (FK violation)', async () => {
+    const recipeId = seedRecipe(testDb.current!, 'Pasta');
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: String(recipeId) }, request: mkReq({ profile_id: 999 }) } as any)
+    ).rejects.toMatchObject({ status: 404 });
+  });
+
+  it('404 on unknown recipe_id (FK violation)', async () => {
+    const profile = createProfile(testDb.current!, 'Tester');
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '99999' }, request: mkReq({ profile_id: profile.id }) } as any)
+    ).rejects.toMatchObject({ status: 404 });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// GET /api/recipes/all — sort=viewed + profile_id
+// ---------------------------------------------------------------------------
+
+import { GET as allGet } from '../../src/routes/api/recipes/all/+server';
+
+describe('GET /api/recipes/all sort=viewed', () => {
+  it('passes profile_id through and returns viewed-order hits', async () => {
+    const db = openInMemoryForTest();
+    testDb.current = db;
+    const profile = createProfile(db, 'Test');
+    const a = seedRecipe(db, 'Apfel');
+    const b = seedRecipe(db, 'Birne');
+    recordView(db, profile.id, b);
+    await new Promise((r) => setTimeout(r, 1100));
+    recordView(db, profile.id, a);
+
+    const url = new URL(`http://localhost/api/recipes/all?sort=viewed&profile_id=${profile.id}&limit=10`);
+    const res = await allGet({ url } as never);
+    expect(res.status).toBe(200);
+    const body = await res.json();
+    expect(body.sort).toBe('viewed');
+    expect(body.hits.map((h: { id: number }) => h.id)).toEqual([a, b]);
+  });
+
+  it('400 on invalid sort', async () => {
+    const url = new URL('http://localhost/api/recipes/all?sort=invalid');
+    await expect(allGet({ url } as never)).rejects.toMatchObject({ status: 400 });
+  });
+});