fix(e2e): serviceWorkers=block behebt Chromium-Crash-Cascade

Die Remote-Suite hatte `serviceWorkers: allow` gesetzt, jeder Test registriert einen frischen SW im neuen Context. Nach 20-30 Specs akkumuliert das im Single-Worker-Run genug Browser-State, dass Chromium mitten in der Suite crasht — alle folgenden Tests fallen dann mit "browser.newContext closed" als Cascade. 'block' entfernt den SW komplett. Diese Suite testet nur Live-API- Verhalten gegen den Server, keine PWA-Features (dafuer ist offline.spec.ts lokal zustaendig). Full-Run jetzt stabil 42/42, Laufzeit zusaetzlich ~3s schneller. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
refactor(view): TimeDisplay als eigenstaendige Component
2026-04-19 14:09:32 +02:00 · 2026-04-19 13:50:46 +02:00 · 2026-04-19 13:45:56 +02:00 · 2026-04-19 13:40:10 +02:00 · 2026-04-19 13:33:26 +02:00 · 2026-04-19 13:28:30 +02:00
14 changed files with 2915 additions and 700 deletions
--- a/docs/superpowers/plans/2026-04-19-editor-split.md
+++ b/docs/superpowers/plans/2026-04-19-editor-split.md
@@ -0,0 +1,897 @@
 # Editor-Split Implementation Plan
 > **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` (recommended) or `superpowers:executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
 **Goal:** Split the monolithic `RecipeEditor.svelte` (628 L) and pull one readability-oriented block out of `RecipeView.svelte` (398 L) by extracting 4 focused Svelte components: `ImageUploadBox`, `IngredientRow`, `StepList`, `TimeDisplay`. No behavior changes, just structure.
 **Architecture:** Parent-owned state stays in the parent (`RecipeEditor` still owns `ingredients: DraftIng[]`, `steps: DraftStep[]`). Sub-components receive props + callbacks and render their own template + scoped CSS. Shared draft types land in `src/lib/components/recipe-editor-types.ts` so sub-components and parent agree on the shape. `RecipeView.TimeDisplay` is pure presentational with no state.
 **Tech Stack:** Svelte 5 runes (`$props`, `$state`, `$derived`), TypeScript-strict, no new runtime deps.
 ---
 ## Why this is worth doing
 - `RecipeEditor.svelte:42-89` (Bild-Upload) and `RecipeEditor.svelte:313-334` (Zubereitung) are each self-contained logic-islands with their own state and handlers. Extracting them caps the file a Claude can reason about in one shot.
 - `IngredientRow` renders 10 lines of template with 5 ARIA labels and 6 grid-columns — a natural single-responsibility unit.
 - `TimeDisplay` is pure formatting; owning it as a component lets future phases (preview, card hover) reuse it.
 ## What we are NOT doing
 - No refactor of `RecipeView`'s tabs / servings-stepper / ingredient-display. Those work fine as-is; roadmap only names the 4 above.
 - No component unit tests (kochwas has none for components; the e2e `recipe-detail.spec.ts` still covers View behavior, and edit-flow is manually smoked).
 - No `<style global>` extraction. Small CSS duplication (`.add`, `.del` buttons) is accepted.
 - No prop-type sharing via `<script module>` blocks. A `.ts` sibling file is simpler.
 ## Design Snapshot
 **Shared types** — `src/lib/components/recipe-editor-types.ts`:
 ```ts
 export type DraftIng = {
  qty: string;
  unit: string;
  name: string;
  note: string;
 };
 export type DraftStep = { text: string };
 ```
 **Component APIs (locked before implementation):**
 ```ts
 // ImageUploadBox.svelte
 type Props = {
  recipeId: number;
  imagePath: string | null;   // initial value; component owns its own state after
  onchange: (path: string | null) => void;
 };
 // IngredientRow.svelte
 type Props = {
  ing: DraftIng;              // passed by reference — bind:value=ing.* works transparently
  idx: number;
  total: number;              // for "last row? disable move-down"
  onmove: (dir: -1 | 1) => void;
  onremove: () => void;
 };
 // StepList.svelte
 type Props = {
  steps: DraftStep[];         // passed by reference
  onadd: () => void;
  onremove: (idx: number) => void;
 };
 // TimeDisplay.svelte
 type Props = {
  prepTimeMin: number | null;
  cookTimeMin: number | null;
  totalTimeMin: number | null;
 };
 ```
 **Render-wrapping pattern:** The parent keeps the `<section class="block"><h2>…</h2> … </section>` wrappers. Sub-components render bare content (no outer utility-class wrapper), so the parent's scoped `.block` / `h2` styling continues to apply.
 ---
 ## Task 1: Extract `ImageUploadBox`
 **Files:**
 - Create: `src/lib/components/ImageUploadBox.svelte`
 - Modify: `src/lib/components/RecipeEditor.svelte`
 - [ ] **Step 1: Create the new component**
 ```svelte
 <!-- src/lib/components/ImageUploadBox.svelte -->
 <script lang="ts">
  import { ImagePlus, ImageOff } from 'lucide-svelte';
  import { confirmAction } from '$lib/client/confirm.svelte';
  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
  import { requireOnline } from '$lib/client/require-online';
  type Props = {
    recipeId: number;
    imagePath: string | null;
    onchange: (path: string | null) => void;
  };
  let { recipeId, imagePath: initial, onchange }: Props = $props();
  let imagePath = $state<string | null>(initial);
  let uploading = $state(false);
  let fileInput: HTMLInputElement | null = $state(null);
  const imageSrc = $derived(
    imagePath === null
      ? null
      : /^https?:\/\//i.test(imagePath)
        ? imagePath
        : `/images/${imagePath}`
  );
  async function onFileChosen(event: Event) {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    input.value = '';
    if (!file) return;
    if (!requireOnline('Der Bild-Upload')) return;
    uploading = true;
    try {
      const fd = new FormData();
      fd.append('file', file);
      const res = await asyncFetch(
        `/api/recipes/${recipeId}/image`,
        { method: 'POST', body: fd },
        'Upload fehlgeschlagen'
      );
      if (!res) return;
      const body = await res.json();
      imagePath = body.image_path;
      onchange(imagePath);
    } finally {
      uploading = false;
    }
  }
  async function removeImage() {
    if (imagePath === null) return;
    const ok = await confirmAction({
      title: 'Bild entfernen?',
      message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
      confirmLabel: 'Entfernen',
      destructive: true
    });
    if (!ok) return;
    if (!requireOnline('Das Entfernen')) return;
    uploading = true;
    try {
      const res = await asyncFetch(
        `/api/recipes/${recipeId}/image`,
        { method: 'DELETE' },
        'Entfernen fehlgeschlagen'
      );
      if (!res) return;
      imagePath = null;
      onchange(null);
    } finally {
      uploading = false;
    }
  }
 </script>
 <div class="image-row">
  <div class="image-preview" class:empty={!imageSrc}>
    {#if imageSrc}
      <img src={imageSrc} alt="" />
    {:else}
      <span class="placeholder">Kein Bild</span>
    {/if}
  </div>
  <div class="image-actions">
    <button
      class="btn"
      type="button"
      onclick={() => fileInput?.click()}
      disabled={uploading}
    >
      <ImagePlus size={16} strokeWidth={2} />
      <span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
    </button>
    {#if imagePath}
      <button class="btn ghost" type="button" onclick={removeImage} disabled={uploading}>
        <ImageOff size={16} strokeWidth={2} />
        <span>Entfernen</span>
      </button>
    {/if}
    {#if uploading}
      <span class="upload-status">Lade …</span>
    {/if}
  </div>
  <input
    bind:this={fileInput}
    type="file"
    accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
    class="file-input"
    onchange={onFileChosen}
  />
 </div>
 <p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
 <style>
  .image-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .image-preview {
    width: 160px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: #eef3ef;
    border: 1px solid #e4eae7;
    flex-shrink: 0;
  }
  .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .image-preview.empty {
    display: grid;
    place-items: center;
    color: #999;
    font-size: 0.85rem;
  }
  .image-preview .placeholder {
    padding: 0 0.5rem;
    text-align: center;
  }
  .image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .upload-status {
    color: #666;
    font-size: 0.9rem;
  }
  .file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .image-hint {
    margin: 0.6rem 0 0;
    color: #888;
    font-size: 0.8rem;
  }
  .btn {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #cfd9d1;
    background: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .btn.ghost {
    color: #666;
  }
  .btn:disabled {
    opacity: 0.6;
    cursor: progress;
  }
 </style>
 ```
 - [ ] **Step 2: Wire up `RecipeEditor.svelte`**
 Remove lines 30–89 (imagePath/uploading/fileInput state, imageSrc derived, onFileChosen, removeImage).
 Remove these imports at the top:
 ```ts
 import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
 import { confirmAction } from '$lib/client/confirm.svelte';
 import { asyncFetch } from '$lib/client/api-fetch-wrapper';
 import { requireOnline } from '$lib/client/require-online';
 ```
 Replace with (Task 1 needs only Plus + Trash2 + Chevrons — the image-specific imports move to the sub-component; `confirmAction`/`asyncFetch`/`requireOnline` stay for future tasks):
 ```ts
 import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
 import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
 ```
 Remove the image-related CSS (`.image-row`, `.image-preview*`, `.image-actions`, `.image-actions .btn`, `.upload-status`, `.file-input`, `.image-hint`, `.image-block` — those live in the sub-component now).
 Replace the Bild section in the template:
 ```svelte
 <section class="block">
  <h2>Bild</h2>
  <ImageUploadBox
    recipeId={recipe.id}
    imagePath={recipe.image_path}
    onchange={(p) => onimagechange?.(p)}
  />
 </section>
 ```
 - [ ] **Step 3: Run checks**
 ```bash
 npm run check
 npm test
 ```
 Expected: 0 errors, 196/196 tests pass.
 - [ ] **Step 4: Manual smoke**
 ```bash
 npm run dev
 ```
 Open any saved recipe → edit → upload an image → verify it shows up and `onimagechange` fires (parent's state updates). Remove the image → confirms the confirm-dialog and removes. Bail out if either flow breaks.
 - [ ] **Step 5: Commit**
 ```bash
 git add src/lib/components/ImageUploadBox.svelte src/lib/components/RecipeEditor.svelte
 git commit -m "$(cat <<'EOF'
 refactor(editor): ImageUploadBox als eigenstaendige Component
 Isoliert den Bild-Upload-Flow (File-Input, Preview, Entfernen-Dialog)
 aus dem RecipeEditor. Parent haelt nur noch den <section>-Wrapper und
 reicht recipe.id + image_path rein, kriegt Aenderungen per onchange
 callback zurueck.
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 EOF
 )"
 ```
 ---
 ## Task 2: Extract types + `IngredientRow`
 **Files:**
 - Create: `src/lib/components/recipe-editor-types.ts`
 - Create: `src/lib/components/IngredientRow.svelte`
 - Modify: `src/lib/components/RecipeEditor.svelte`
 - [ ] **Step 1: Types file**
 ```ts
 // src/lib/components/recipe-editor-types.ts
 export type DraftIng = {
  qty: string;
  unit: string;
  name: string;
  note: string;
 };
 export type DraftStep = { text: string };
 ```
 - [ ] **Step 2: IngredientRow component**
 ```svelte
 <!-- src/lib/components/IngredientRow.svelte -->
 <script lang="ts">
  import { Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
  import type { DraftIng } from './recipe-editor-types';
  type Props = {
    ing: DraftIng;
    idx: number;
    total: number;
    onmove: (dir: -1 | 1) => void;
    onremove: () => void;
  };
  let { ing, idx, total, onmove, onremove }: Props = $props();
 </script>
 <li class="ing-row">
  <div class="move">
    <button
      class="move-btn"
      type="button"
      aria-label="Zutat nach oben"
      disabled={idx === 0}
      onclick={() => onmove(-1)}
    >
      <ChevronUp size={14} strokeWidth={2.5} />
    </button>
    <button
      class="move-btn"
      type="button"
      aria-label="Zutat nach unten"
      disabled={idx === total - 1}
      onclick={() => onmove(1)}
    >
      <ChevronDown size={14} strokeWidth={2.5} />
    </button>
  </div>
  <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
  <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
  <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
  <input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
  <button class="del" type="button" aria-label="Zutat entfernen" onclick={onremove}>
    <Trash2 size={16} strokeWidth={2} />
  </button>
 </li>
 <style>
  .ing-row {
    display: grid;
    grid-template-columns: 28px 70px 70px 1fr 1fr 40px;
    gap: 0.35rem;
    align-items: center;
  }
  .move {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .move-btn {
    width: 28px;
    height: 20px;
    border: 1px solid #cfd9d1;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .move-btn:hover:not(:disabled) {
    background: #f4f8f5;
  }
  .move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .ing-row input {
    padding: 0.5rem 0.55rem;
    border: 1px solid #cfd9d1;
    border-radius: 8px;
    font-size: 0.9rem;
    min-height: 38px;
    font-family: inherit;
    min-width: 0;
  }
  .del {
    width: 40px;
    height: 40px;
    border: 1px solid #f1b4b4;
    background: white;
    color: #c53030;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .del:hover {
    background: #fdf3f3;
  }
  @media (max-width: 560px) {
    .ing-row {
      grid-template-columns: 28px 70px 1fr 40px;
      grid-template-areas:
        'move qty name del'
        'move unit unit del'
        'note note note note';
    }
    .ing-row .move {
      grid-area: move;
    }
    .ing-row .qty {
      grid-area: qty;
    }
    .ing-row .unit {
      grid-area: unit;
    }
    .ing-row .name {
      grid-area: name;
    }
    .ing-row .note {
      grid-area: note;
    }
    .ing-row .del {
      grid-area: del;
    }
  }
 </style>
 ```
 - [ ] **Step 3: Wire up `RecipeEditor.svelte`**
 Replace the local `DraftIng` / `DraftStep` type declarations (lines 100–106) with:
 ```ts
 import type { DraftIng, DraftStep } from '$lib/components/recipe-editor-types';
 import IngredientRow from '$lib/components/IngredientRow.svelte';
 ```
 In the template, swap the `<li class="ing-row">` block for:
 ```svelte
 {#each ingredients as ing, idx (idx)}
  <IngredientRow
    {ing}
    {idx}
    total={ingredients.length}
    onmove={(dir) => moveIngredient(idx, dir)}
    onremove={() => removeIngredient(idx)}
  />
 {/each}
 ```
 Remove the CSS for `.ing-row`, `.move`, `.move-btn`, `.ing-row input`, `.del`, and the `@media (max-width: 560px)` block — all now live in `IngredientRow.svelte`.
 Remove the unused imports `ChevronUp`, `ChevronDown`, `Trash2` from RecipeEditor (they moved to the sub-component, but wait — `Trash2` is also used for step-remove. Keep `Trash2`, remove the two Chevrons).
 - [ ] **Step 4: Run checks**
 ```bash
 npm run check
 npm test
 ```
 - [ ] **Step 5: Manual smoke**
 Open any recipe in edit mode. Add an ingredient, type into all 4 fields, reorder up/down, remove one. Verify save persists the ordering.
 - [ ] **Step 6: Commit**
 ```bash
 git add src/lib/components/recipe-editor-types.ts src/lib/components/IngredientRow.svelte src/lib/components/RecipeEditor.svelte
 git commit -m "$(cat <<'EOF'
 refactor(editor): IngredientRow + shared types
 IngredientRow rendert eine einzelne editierbare Zutat-Zeile. DraftIng
 und DraftStep sind jetzt in recipe-editor-types.ts, damit Parent und
 Sub-Components auf dieselbe Form referenzieren.
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 EOF
 )"
 ```
 ---
 ## Task 3: Extract `StepList`
 **Files:**
 - Create: `src/lib/components/StepList.svelte`
 - Modify: `src/lib/components/RecipeEditor.svelte`
 - [ ] **Step 1: StepList component**
 ```svelte
 <!-- src/lib/components/StepList.svelte -->
 <script lang="ts">
  import { Plus, Trash2 } from 'lucide-svelte';
  import type { DraftStep } from './recipe-editor-types';
  type Props = {
    steps: DraftStep[];
    onadd: () => void;
    onremove: (idx: number) => void;
  };
  let { steps, onadd, onremove }: Props = $props();
 </script>
 <ol class="step-list">
  {#each steps as step, idx (idx)}
    <li class="step-row">
      <span class="num">{idx + 1}</span>
      <textarea
        bind:value={step.text}
        rows="3"
        placeholder="Schritt beschreiben …"
      ></textarea>
      <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => onremove(idx)}>
        <Trash2 size={16} strokeWidth={2} />
      </button>
    </li>
  {/each}
 </ol>
 <button class="add" type="button" onclick={onadd}>
  <Plus size={16} strokeWidth={2} />
  <span>Schritt hinzufügen</span>
 </button>
 <style>
  .step-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .step-row {
    display: grid;
    grid-template-columns: 32px 1fr 40px;
    gap: 0.5rem;
    align-items: start;
  }
  .num {
    width: 32px;
    height: 32px;
    background: #2b6a3d;
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.25rem;
  }
  .step-row textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid #cfd9d1;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
  }
  .del {
    width: 40px;
    height: 40px;
    border: 1px solid #f1b4b4;
    background: white;
    color: #c53030;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .del:hover {
    background: #fdf3f3;
  }
  .add {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border: 1px dashed #cfd9d1;
    background: white;
    color: #2b6a3d;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
  }
  .add:hover {
    background: #f4f8f5;
  }
 </style>
 ```
 - [ ] **Step 2: Wire up `RecipeEditor.svelte`**
 Add import:
 ```ts
 import StepList from '$lib/components/StepList.svelte';
 ```
 Replace the entire Zubereitung `<section class="block">` template block (starting `<section class="block">` with `<h2>Zubereitung</h2>` through the add-step button):
 ```svelte
 <section class="block">
  <h2>Zubereitung</h2>
  <StepList {steps} onadd={addStep} onremove={removeStep} />
 </section>
 ```
 **CSS audit — what stays and what goes in the parent:**
 Parent's template after Tasks 1–3 still contains:
 - `<section class="block"><h2>Bild</h2><ImageUploadBox .../></section>` — no `.block` inner styles needed beyond what's in parent.
 - `<div class="meta">` — still here. Keep `.meta`, `.field`, `.row`, `.small`, `.lbl`.
 - `<section class="block"><h2>Zutaten</h2><ul class="ing-list">{#each ..}<IngredientRow/>{/each}</ul><button class="add">...</button></section>` — still uses `.ing-list` and `.add`.
 - `<section class="block"><h2>Zubereitung</h2><StepList/></section>` — no inner CSS.
 - `<div class="foot"><button class="btn ghost">...</button><button class="btn primary">...</button></div>` — keeps `.foot`, `.btn`, `.btn.ghost`, `.btn.primary`, `.btn:disabled`.
 So parent CSS after Task 3 keeps: `.editor`, `.meta`, `.field`, `.lbl`, `.row`, `.small`, `.block`, `.block h2`, `.ing-list` (the `<ul>` wrapper), `.add` (for "Zutat hinzufügen"), `.foot`, `.btn` and variants.
 Drop from parent CSS in Task 3: `.step-list`, `.step-row`, `.num`, `.step-row textarea`, `.del`.
 - [ ] **Step 3: Run checks**
 ```bash
 npm run check
 npm test
 ```
 - [ ] **Step 4: Manual smoke**
 Open any recipe → edit → add a step, type, remove, save. Verify steps persist with correct ordering.
 - [ ] **Step 5: Commit**
 ```bash
 git add src/lib/components/StepList.svelte src/lib/components/RecipeEditor.svelte
 git commit -m "$(cat <<'EOF'
 refactor(editor): StepList als eigenstaendige Component
 Zubereitungs-Liste mit Add + Remove als Sub-Component. Parent steuert
 nur noch den Wrapper und reicht steps + die zwei Callbacks rein.
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 EOF
 )"
 ```
 ---
 ## Task 4: Extract `TimeDisplay` (RecipeView)
 **Files:**
 - Create: `src/lib/components/TimeDisplay.svelte`
 - Modify: `src/lib/components/RecipeView.svelte`
 - [ ] **Step 1: TimeDisplay component**
 ```svelte
 <!-- src/lib/components/TimeDisplay.svelte -->
 <script lang="ts">
  type Props = {
    prepTimeMin: number | null;
    cookTimeMin: number | null;
    totalTimeMin: number | null;
  };
  let { prepTimeMin, cookTimeMin, totalTimeMin }: Props = $props();
  const summary = $derived.by(() => {
    const parts: string[] = [];
    if (prepTimeMin) parts.push(`Vorb. ${prepTimeMin} min`);
    if (cookTimeMin) parts.push(`Kochen ${cookTimeMin} min`);
    if (!prepTimeMin && !cookTimeMin && totalTimeMin)
      parts.push(`Gesamt ${totalTimeMin} min`);
    return parts.join(' · ');
  });
 </script>
 {#if summary}
  <p class="times">{summary}</p>
 {/if}
 <style>
  .times {
    margin: 0 0 0.25rem;
    color: #666;
    font-size: 0.9rem;
  }
 </style>
 ```
 - [ ] **Step 2: Wire up `RecipeView.svelte`**
 Add import:
 ```ts
 import TimeDisplay from '$lib/components/TimeDisplay.svelte';
 ```
 Remove the local `timeSummary()` function (lines 45–52).
 Replace the `{#if timeSummary()}<p class="times">...</p>{/if}` block in the template with:
 ```svelte
 <TimeDisplay
  prepTimeMin={recipe.prep_time_min}
  cookTimeMin={recipe.cook_time_min}
  totalTimeMin={recipe.total_time_min}
 />
 ```
 Remove the `.times` CSS from RecipeView (it's in the sub-component now).
 - [ ] **Step 3: Run checks**
 ```bash
 npm run check
 npm test
 ```
 - [ ] **Step 4: Manual smoke**
 Open any recipe → verify the time line still shows the same content (Vorb. / Kochen / Gesamt).
 - [ ] **Step 5: Commit**
 ```bash
 git add src/lib/components/TimeDisplay.svelte src/lib/components/RecipeView.svelte
 git commit -m "$(cat <<'EOF'
 refactor(view): TimeDisplay als eigenstaendige Component
 timeSummary-Formatierung in eine wiederverwendbare Component
 gezogen. RecipeView liefert nur noch die drei Werte — zukuenftige
 Call-Sites (Preview, Hover-Cards) koennen dieselbe Logik reusen.
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 EOF
 )"
 ```
 ---
 ## Task 5: Self-review + push
 - [ ] **Step 1: Line-count audit**
 ```bash
 wc -l src/lib/components/RecipeEditor.svelte src/lib/components/RecipeView.svelte src/lib/components/ImageUploadBox.svelte src/lib/components/IngredientRow.svelte src/lib/components/StepList.svelte src/lib/components/TimeDisplay.svelte
 ```
 Expected shape (approximate, ±10%):
 - `RecipeEditor.svelte`: 628 → ~330–370
 - `RecipeView.svelte`: 398 → ~380
 - `ImageUploadBox.svelte`: ~160
 - `IngredientRow.svelte`: ~110
 - `StepList.svelte`: ~100
 - `TimeDisplay.svelte`: ~30
 - [ ] **Step 2: Full test + typecheck**
 ```bash
 npm test
 npm run check
 ```
 Both green.
 - [ ] **Step 3: Git log review**
 ```bash
 git log --oneline main..HEAD
 ```
 Expected 4 commits:
 1. `refactor(editor): ImageUploadBox als eigenstaendige Component`
 2. `refactor(editor): IngredientRow + shared types`
 3. `refactor(editor): StepList als eigenstaendige Component`
 4. `refactor(view): TimeDisplay als eigenstaendige Component`
 - [ ] **Step 4: Remote E2E after push**
 ```bash
 git push -u origin editor-split
 ```
 CI builds branch-tagged image. After deploy to `kochwas-dev.siegeln.net`:
 ```bash
 npm run test:e2e:remote
 ```
 Expected: 40/42 green (same as Search-State-Store baseline). `recipe-detail.spec.ts` (6 tests) specifically exercises the View side — must be clean.
 Manual UAT pass on `https://kochwas-dev.siegeln.net/`:
 - Edit a recipe → upload + remove image.
 - Add / reorder / remove an ingredient → save → verify persistence on reload.
 - Add / remove a step → save → verify.
 - Check time-summary rendering on any recipe with prep/cook/total times set.
 - [ ] **Step 5: Merge to main**
 Once UAT is clean:
 ```bash
 git checkout main
 git merge --no-ff editor-split
 git push origin main
 ```
 ---
 ## Risk Notes
 - **Prop-reference mutability.** `IngredientRow` and `StepList` receive `ing` / `steps` by reference and use `bind:value` on their own `<input>` / `<textarea>` elements. Svelte 5 handles this correctly — writes propagate to the parent's `$state` array. Verified pattern with existing `searchFilterStore` usage and similar bind-through-prop in older Svelte 5 components in this codebase.
 - **Confirm-dialog scope.** `ImageUploadBox` imports `confirmAction` directly rather than using a prop-callback. Consistent with the rest of the codebase (`confirmAction` is a global).
 - **Scoped CSS duplication.** `.del` and `.add` button styles exist in multiple sub-components. Accepted — the alternative (global button classes) is out of scope for this phase.
 - **No component unit tests.** Risk: a structural mistake (bad prop passing, missing callback wiring) wouldn't be caught by logic-layer tests. Mitigation: manual smoke test + `npm run check` type-safety + existing e2e coverage on RecipeView side.
 ## Deferred — NOT in this plan
 - **Component unit tests with `@testing-library/svelte`:** Would add Vitest+browser setup. Worth doing in a separate phase once the project acquires a second component-refactor candidate.
 - **Edit-flow E2E spec:** `tests/e2e/remote/recipe-edit.spec.ts` would cover the editor end-to-end. Valuable, but out of scope here — this phase is structural extraction, not test coverage expansion.
 - **Extract `RecipeHero` / `ServingsStepper` / `TabSwitcher` from RecipeView:** Not on the roadmap. Add to a future phase if RecipeView grows further.
--- a/docs/superpowers/plans/2026-04-19-search-state-store.md
+++ b/docs/superpowers/plans/2026-04-19-search-state-store.md
@@ -0,0 +1,971 @@
 # Search-State-Store Implementation Plan
 > **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
 **Goal:** Extract the duplicated live-search state machine from `src/routes/+page.svelte` and `src/routes/+layout.svelte` into a single reusable `SearchStore` class in `src/lib/client/search.svelte.ts`, so both the home search and the header dropdown drive their UI from the same logic.
 **Architecture:** Factory-class store (one instance per consumer, like `new SearchStore()` — not a shared singleton). Holds all `$state` fields currently inlined in the Svelte components (query, hits, webHits, searching flags, error, pagination state), plus imperative methods (`runDebounced`, `loadMore`, `reSearch`, `reset`, `captureSnapshot`, `restoreSnapshot`). Consumers keep UI-specific concerns (URL sync, dropdown open/close, snapshot hookup) in their component — the store owns only fetch/pagination/debounce.
 **Tech Stack:** Svelte 5 runes (`$state` in class fields), TypeScript-strict, Vitest + jsdom, fetch injection for tests.
 ---
 ## Design Snapshot
 **API surface (locked before implementation):**
 ```ts
 // src/lib/client/search.svelte.ts
 import type { SearchHit } from '$lib/server/recipes/search-local';
 import type { WebHit } from '$lib/server/search/searxng';
 export type SearchSnapshot = {
  query: string;
  hits: SearchHit[];
  webHits: WebHit[];
  searchedFor: string | null;
  webError: string | null;
  localExhausted: boolean;
  webPageno: number;
  webExhausted: boolean;
 };
 export type SearchStoreOptions = {
  pageSize?: number;              // default 30
  debounceMs?: number;            // default 300
  filterDebounceMs?: number;      // default 150 (shorter for filter-change re-search)
  minQueryLength?: number;        // default 4 (query.trim().length > 3)
  filterParam?: () => string;     // e.g. () => searchFilterStore.queryParam → "foo,bar" or ""
  fetchImpl?: typeof fetch;       // injected for tests
 };
 export class SearchStore {
  query = $state('');
  hits = $state<SearchHit[]>([]);
  webHits = $state<WebHit[]>([]);
  searching = $state(false);
  webSearching = $state(false);
  webError = $state<string | null>(null);
  searchedFor = $state<string | null>(null);
  localExhausted = $state(false);
  webPageno = $state(0);
  webExhausted = $state(false);
  loadingMore = $state(false);
  constructor(opts?: SearchStoreOptions);
  /** Call from `$effect(() => { store.query; store.runDebounced(); })`. Handles debounce + race-guard. */
  runDebounced(): void;
  /** Immediate (no debounce). Used by form `submit`. */
  runSearch(q: string): Promise<void>;
  /** Filter-change re-search — shorter debounce. */
  reSearch(): void;
  /** Paginate locally, then fall back to web. Idempotent while in-flight. */
  loadMore(): Promise<void>;
  /** Clear query + results + cancel any pending debounce (e.g. `afterNavigate`). */
  reset(): void;
  /** For SvelteKit `Snapshot<>` API. */
  captureSnapshot(): SearchSnapshot;
  restoreSnapshot(s: SearchSnapshot): void;
 }
 ```
 **Behavior invariants (copied 1:1 from the current code — do NOT change):**
 - Query threshold: `trim().length > 3` triggers search, `<= 3` clears results.
 - Race-guard: after every `await fetch(...)`, bail if `this.query.trim() !== q`.
 - When `hits.length === 0` after local search → auto-fire web search page 1.
 - `loadMore`: first drains local (offset pagination), then switches to web (pageno pagination).
 - Dedup: local by `id`, web by `url`.
 - `webError`: keep the message text so UI can render it.
 **What stays OUT of the store:**
 - URL sync (`history.replaceState` with `?q=`) → stays in `+page.svelte`.
 - Dropdown visibility (`navOpen`) → stays in `+layout.svelte`.
 - `afterNavigate`-reset wiring → stays in `+layout.svelte`, just calls `store.reset()`.
 - SvelteKit `Snapshot<>` wiring → stays in `+page.svelte`, delegates to store.
 - Filter-change re-search `$effect` → stays in `+page.svelte`, just calls `store.reSearch()`.
 ---
 ## Task 1: Failing Unit Tests for SearchStore
 **Files:**
 - Create: `tests/unit/search-store.test.ts`
 - [ ] **Step 1: Write test file with full behavior coverage (runs red until Task 2)**
 ```ts
 // @vitest-environment jsdom
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { SearchStore } from '../../src/lib/client/search.svelte';
 type FetchMock = ReturnType<typeof vi.fn>;
 function mockFetch(responses: Array<{ ok?: boolean; status?: number; body: unknown }>): FetchMock {
  const calls = [...responses];
  return vi.fn(async () => {
    const r = calls.shift();
    if (!r) throw new Error('fetch called more times than expected');
    return {
      ok: r.ok ?? true,
      status: r.status ?? 200,
      json: async () => r.body
    } as Response;
  });
 }
 describe('SearchStore', () => {
  beforeEach(() => {
    vi.useRealTimers();
  });
  it('keeps results empty while query is <= 3 chars (debounced)', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
    store.query = 'abc';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(100);
    expect(store.searching).toBe(false);
    expect(fetchImpl).not.toHaveBeenCalled();
  });
  it('fires local search after debounce when query > 3 chars', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [{ id: 1, title: 'Pasta', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50, pageSize: 30 });
    store.query = 'pasta';
    store.runDebounced();
    expect(store.searching).toBe(true);
    await vi.advanceTimersByTimeAsync(100);
    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
    expect(fetchImpl.mock.calls[0][0]).toMatch(/\/api\/recipes\/search\?q=pasta&limit=30/);
    expect(store.hits).toHaveLength(1);
    expect(store.searchedFor).toBe('pasta');
    expect(store.localExhausted).toBe(true); // 1 hit < pageSize → exhausted
  });
  it('falls back to web search when local returns zero hits', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { body: { hits: [{ url: 'https://chefkoch.de/x', title: 'Foo', domain: 'chefkoch.de', snippet: null, thumbnail: null }] } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
    store.query = 'pizza';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(100);
    await vi.waitFor(() => expect(store.webHits).toHaveLength(1));
    expect(fetchImpl).toHaveBeenCalledTimes(2);
    expect(fetchImpl.mock.calls[1][0]).toMatch(/\/api\/recipes\/search\/web\?q=pizza&pageno=1/);
    expect(store.webPageno).toBe(1);
  });
  it('races-guards: stale response discarded when query changed mid-flight', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [{ id: 99, title: 'Stale', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
    store.query = 'stale-query';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    store.query = 'different'; // user kept typing
    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
    expect(store.hits).toEqual([]); // stale discarded
  });
  it('loadMore: drains local first (offset pagination)', async () => {
    vi.useFakeTimers();
    const page1 = Array.from({ length: 30 }, (_, i) => ({ id: i, title: `r${i}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
    const page2 = Array.from({ length: 5 }, (_, i) => ({ id: i + 30, title: `r${i + 30}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
    const fetchImpl = mockFetch([
      { body: { hits: page1 } },
      { body: { hits: page2 } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
    store.query = 'meal';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(store.hits).toHaveLength(30));
    expect(store.localExhausted).toBe(false);
    await store.loadMore();
    expect(store.hits).toHaveLength(35);
    expect(fetchImpl.mock.calls[1][0]).toMatch(/offset=30/);
    expect(store.localExhausted).toBe(true);
  });
  it('loadMore: switches to web pagination after local exhausted', async () => {
    vi.useFakeTimers();
    const local = [{ id: 1, title: 'local', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }];
    const webP1 = [{ url: 'https://a.com', title: 'A', domain: 'a.com', snippet: null, thumbnail: null }];
    const webP2 = [{ url: 'https://b.com', title: 'B', domain: 'b.com', snippet: null, thumbnail: null }];
    const fetchImpl = mockFetch([
      { body: { hits: local } },
      { body: { hits: webP1 } },   // auto-fallback? No — local has 1 hit, so no fallback.
      { body: { hits: webP2 } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
    store.query = 'soup';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
    expect(store.localExhausted).toBe(true);
    await store.loadMore(); // web pageno=1
    expect(store.webHits).toHaveLength(1);
    await store.loadMore(); // web pageno=2
    expect(store.webHits).toHaveLength(2);
    expect(store.webPageno).toBe(2);
  });
  it('web search error sets webError and marks webExhausted', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { ok: false, status: 502, body: { message: 'SearXNG unreachable' } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
    store.query = 'anything';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(store.webError).toBe('SearXNG unreachable'));
    expect(store.webExhausted).toBe(true);
  });
  it('reset(): clears query, results, and pending debounce', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([]);
    const store = new SearchStore({ fetchImpl, debounceMs: 100 });
    store.query = 'foobar';
    store.runDebounced();
    store.reset();
    await vi.advanceTimersByTimeAsync(200);
    expect(store.query).toBe('');
    expect(store.hits).toEqual([]);
    expect(fetchImpl).not.toHaveBeenCalled();
  });
  it('captureSnapshot / restoreSnapshot: round-trips without re-fetching', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
    const snap: SearchSnapshot = {
      query: 'lasagne',
      hits: [{ id: 7, title: 'Lasagne', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }],
      webHits: [],
      searchedFor: 'lasagne',
      webError: null,
      localExhausted: true,
      webPageno: 0,
      webExhausted: false
    };
    store.restoreSnapshot(snap);
    expect(store.query).toBe('lasagne');
    expect(store.hits).toHaveLength(1);
    store.runDebounced(); // should NOT re-fetch after restore
    await vi.advanceTimersByTimeAsync(100);
    expect(fetchImpl).not.toHaveBeenCalled();
    const round = store.captureSnapshot();
    expect(round).toEqual(snap);
  });
  it('filterParam option: gets appended to both local and web requests', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { body: { hits: [] } }
    ]);
    const store = new SearchStore({
      fetchImpl,
      debounceMs: 10,
      filterParam: () => '&domains=chefkoch.de'
    });
    store.query = 'curry';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalledTimes(2));
    expect(fetchImpl.mock.calls[0][0]).toMatch(/&domains=chefkoch\.de/);
    expect(fetchImpl.mock.calls[1][0]).toMatch(/&domains=chefkoch\.de/);
  });
  it('reSearch: immediate re-run with current query on filter change', async () => {
    vi.useFakeTimers();
    let filter = '';
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { body: { hits: [] } },
      { body: { hits: [{ id: 1, title: 'filtered', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
    ]);
    const store = new SearchStore({
      fetchImpl,
      debounceMs: 10,
      filterDebounceMs: 5,
      filterParam: () => filter
    });
    store.query = 'broth';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    // Simulate filter change
    filter = '&domains=chefkoch.de';
    store.reSearch();
    await vi.advanceTimersByTimeAsync(10);
    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
    // Last call should have filter param
    const last = fetchImpl.mock.calls.at(-1)?.[0] as string;
    expect(last).toMatch(/&domains=chefkoch\.de/);
  });
 });
 ```
 - [ ] **Step 2: Run tests to verify all fail with "SearchStore is not a constructor" or "Cannot find module"**
 ```bash
 npm test -- search-store.test
 ```
 Expected: 12 tests, all failing because `src/lib/client/search.svelte.ts` doesn't exist yet.
 ---
 ## Task 2: Implement SearchStore to pass tests
 **Files:**
 - Create: `src/lib/client/search.svelte.ts`
 - [ ] **Step 1: Scaffold the class + types**
 Create `src/lib/client/search.svelte.ts` with this content:
 ```ts
 import type { SearchHit } from '$lib/server/recipes/search-local';
 import type { WebHit } from '$lib/server/search/searxng';
 export type SearchSnapshot = {
  query: string;
  hits: SearchHit[];
  webHits: WebHit[];
  searchedFor: string | null;
  webError: string | null;
  localExhausted: boolean;
  webPageno: number;
  webExhausted: boolean;
 };
 export type SearchStoreOptions = {
  pageSize?: number;
  debounceMs?: number;
  filterDebounceMs?: number;
  minQueryLength?: number;
  filterParam?: () => string;
  fetchImpl?: typeof fetch;
 };
 export class SearchStore {
  query = $state('');
  hits = $state<SearchHit[]>([]);
  webHits = $state<WebHit[]>([]);
  searching = $state(false);
  webSearching = $state(false);
  webError = $state<string | null>(null);
  searchedFor = $state<string | null>(null);
  localExhausted = $state(false);
  webPageno = $state(0);
  webExhausted = $state(false);
  loadingMore = $state(false);
  private readonly pageSize: number;
  private readonly debounceMs: number;
  private readonly filterDebounceMs: number;
  private readonly minQueryLength: number;
  private readonly filterParam: () => string;
  private readonly fetchImpl: typeof fetch;
  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
  private skipNextDebounce = false;
  constructor(opts: SearchStoreOptions = {}) {
    this.pageSize = opts.pageSize ?? 30;
    this.debounceMs = opts.debounceMs ?? 300;
    this.filterDebounceMs = opts.filterDebounceMs ?? 150;
    this.minQueryLength = opts.minQueryLength ?? 4;
    this.filterParam = opts.filterParam ?? (() => '');
    this.fetchImpl = opts.fetchImpl ?? ((...a) => fetch(...a));
  }
 }
 ```
 - [ ] **Step 2: Implement `runDebounced`, `runSearch`, private `runWebSearch`**
 Add to the class:
 ```ts
  runDebounced(): void {
    // Consumer pattern:
    //   $effect(() => { store.query; store.runDebounced(); });
    // The bare `store.query` read registers the reactive dep; this method
    // then reads `this.query` live to kick off / debounce the search.
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    if (this.skipNextDebounce) {
      this.skipNextDebounce = false;
      return;
    }
    const q = this.query.trim();
    if (q.length < this.minQueryLength) {
      this.resetResults();
      return;
    }
    this.searching = true;
    this.webHits = [];
    this.webSearching = false;
    this.webError = null;
    this.debounceTimer = setTimeout(() => {
      void this.runSearch(q);
    }, this.debounceMs);
  }
  async runSearch(q: string): Promise<void> {
    this.localExhausted = false;
    this.webPageno = 0;
    this.webExhausted = false;
    try {
      const res = await this.fetchImpl(
        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}${this.filterParam()}`
      );
      const body = (await res.json()) as { hits: SearchHit[] };
      if (this.query.trim() !== q) return;
      this.hits = body.hits;
      this.searchedFor = q;
      if (this.hits.length < this.pageSize) this.localExhausted = true;
      if (this.hits.length === 0) {
        await this.runWebSearch(q, 1);
      }
    } finally {
      if (this.query.trim() === q) this.searching = false;
    }
  }
  private async runWebSearch(q: string, pageno: number): Promise<void> {
    this.webSearching = true;
    try {
      const res = await this.fetchImpl(
        `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${pageno}${this.filterParam()}`
      );
      if (this.query.trim() !== q) return;
      if (!res.ok) {
        const err = (await res.json().catch(() => ({}))) as { message?: string };
        this.webError = err.message ?? `HTTP ${res.status}`;
        this.webExhausted = true;
        return;
      }
      const body = (await res.json()) as { hits: WebHit[] };
      this.webHits = pageno === 1 ? body.hits : [...this.webHits, ...body.hits];
      this.webPageno = pageno;
      if (body.hits.length === 0) this.webExhausted = true;
    } finally {
      if (this.query.trim() === q) this.webSearching = false;
    }
  }
 ```
 - [ ] **Step 3: Implement `loadMore`**
 ```ts
  async loadMore(): Promise<void> {
    if (this.loadingMore) return;
    const q = this.query.trim();
    if (!q) return;
    this.loadingMore = true;
    try {
      if (!this.localExhausted) {
        const res = await this.fetchImpl(
          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}&offset=${this.hits.length}${this.filterParam()}`
        );
        const body = (await res.json()) as { hits: SearchHit[] };
        if (this.query.trim() !== q) return;
        const more = body.hits;
        const seen = new Set(this.hits.map((h) => h.id));
        const deduped = more.filter((h) => !seen.has(h.id));
        this.hits = [...this.hits, ...deduped];
        if (more.length < this.pageSize) this.localExhausted = true;
      } else if (!this.webExhausted) {
        const nextPage = this.webPageno + 1;
        const wasEmpty = this.webHits.length === 0;
        if (wasEmpty) this.webSearching = true;
        try {
          const res = await this.fetchImpl(
            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${this.filterParam()}`
          );
          if (this.query.trim() !== q) return;
          if (!res.ok) {
            const err = (await res.json().catch(() => ({}))) as { message?: string };
            this.webError = err.message ?? `HTTP ${res.status}`;
            this.webExhausted = true;
            return;
          }
          const body = (await res.json()) as { hits: WebHit[] };
          const more = body.hits;
          const seen = new Set(this.webHits.map((h) => h.url));
          const deduped = more.filter((h) => !seen.has(h.url));
          if (deduped.length === 0) {
            this.webExhausted = true;
          } else {
            this.webHits = [...this.webHits, ...deduped];
            this.webPageno = nextPage;
          }
        } finally {
          if (this.query.trim() === q) this.webSearching = false;
        }
      }
    } finally {
      this.loadingMore = false;
    }
  }
 ```
 - [ ] **Step 4: Implement `reSearch`, `reset`, `resetResults`, snapshot methods**
 ```ts
  reSearch(): void {
    const q = this.query.trim();
    if (q.length < this.minQueryLength) return;
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    this.searching = true;
    this.webHits = [];
    this.webSearching = false;
    this.webError = null;
    this.debounceTimer = setTimeout(() => void this.runSearch(q), this.filterDebounceMs);
  }
  reset(): void {
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    this.debounceTimer = null;
    this.query = '';
    this.resetResults();
  }
  private resetResults(): void {
    this.hits = [];
    this.webHits = [];
    this.searchedFor = null;
    this.searching = false;
    this.webSearching = false;
    this.webError = null;
    this.localExhausted = false;
    this.webPageno = 0;
    this.webExhausted = false;
  }
  captureSnapshot(): SearchSnapshot {
    return {
      query: this.query,
      hits: this.hits,
      webHits: this.webHits,
      searchedFor: this.searchedFor,
      webError: this.webError,
      localExhausted: this.localExhausted,
      webPageno: this.webPageno,
      webExhausted: this.webExhausted
    };
  }
  restoreSnapshot(s: SearchSnapshot): void {
    this.skipNextDebounce = true;
    this.query = s.query;
    this.hits = s.hits;
    this.webHits = s.webHits;
    this.searchedFor = s.searchedFor;
    this.webError = s.webError;
    this.localExhausted = s.localExhausted;
    this.webPageno = s.webPageno;
    this.webExhausted = s.webExhausted;
  }
 ```
 - [ ] **Step 5: Run tests, iterate until all green**
 ```bash
 npm test -- search-store.test
 ```
 Expected: all 12 tests pass.
 - [ ] **Step 6: `npm run check`**
 ```bash
 npm run check
 ```
 Expected: 0 errors, 0 warnings in `search.svelte.ts`.
 - [ ] **Step 7: Commit**
 ```bash
 git add src/lib/client/search.svelte.ts tests/unit/search-store.test.ts
 git commit -m "feat(search): SearchStore fuer Live-Search mit Web-Fallback
 Extrahiert die duplizierte Such-Logik aus +page.svelte und
 +layout.svelte in eine gemeinsame Klasse. Pure Datenschicht
 mit injizierbarem fetch — UI-Concerns (URL-Sync, Dropdown,
 Snapshot) bleiben in den Komponenten."
 ```
 ---
 ## Task 3: Migrate `+layout.svelte` header dropdown
 **Why first:** Smaller surface than `+page.svelte`, no snapshot API, no URL sync. If the store is wrong, here we find out with less code at risk.
 **Files:**
 - Modify: `src/routes/+layout.svelte:20-200`
 - [ ] **Step 1: Add import**
 At the top of `<script>`:
 ```ts
 import { SearchStore } from '$lib/client/search.svelte';
 import { searchFilterStore } from '$lib/client/search-filter.svelte';
 ```
 (Latter is already imported — just confirm.)
 - [ ] **Step 2: Replace the 11 `$state` declarations (navQuery, navHits, navWebHits, navSearching, navWebSearching, navWebError, navLocalExhausted, navWebPageno, navWebExhausted, navLoadingMore, debounceTimer) with one store instance.**
 Keep these (UI-only): `navOpen`, `navContainer`, `menuOpen`, `menuContainer`.
 New:
 ```ts
 const navStore = new SearchStore({
  pageSize: 30,
  filterParam: () => {
    const p = searchFilterStore.queryParam;
    return p ? `&domains=${encodeURIComponent(p)}` : '';
  }
 });
 ```
 Remove the local `filterParam()` helper — the store owns it now.
 - [ ] **Step 3: Replace the big `$effect` (lines 52–109) with a 3-line `$effect`**
 ```ts
 $effect(() => {
  // Bare reads register the reactive deps; then kick the store.
  const q = navStore.query;
  navStore.runDebounced();
  // navOpen follows query length: open while typing, close when cleared.
  navOpen = q.trim().length > 3;
 });
 ```
 - [ ] **Step 4: Replace `loadMoreNav` function (lines 111–159) with a pass-through**
 ```ts
 function loadMoreNav() {
  return navStore.loadMore();
 }
 ```
 Or inline `onclick={() => navStore.loadMore()}` at the call-site — pick the less disruptive option when looking at the template.
 - [ ] **Step 5: Replace `submitNav` (lines 161–167)**
 ```ts
 function submitNav(e: SubmitEvent) {
  e.preventDefault();
  const q = navStore.query.trim();
  if (!q) return;
  navOpen = false;
  void goto(`/?q=${encodeURIComponent(q)}`);
 }
 ```
 - [ ] **Step 6: Replace `pickHit` (lines 185–190)**
 ```ts
 function pickHit() {
  navOpen = false;
  navStore.reset();
 }
 ```
 - [ ] **Step 7: Update `afterNavigate` (lines 192+)**
 ```ts
 afterNavigate(() => {
  navStore.reset();
  navOpen = false;
  menuOpen = false;
  // ... rest of existing body (wishlist refresh etc.)
 });
 ```
 - [ ] **Step 8: Update the template**
 Every `navQuery` → `navStore.query`, every `navHits` → `navStore.hits`, etc. This is a mechanical rename — use find+replace scoped to `src/routes/+layout.svelte` only.
 Mapping:
 - `navQuery` → `navStore.query`
 - `navHits` → `navStore.hits`
 - `navWebHits` → `navStore.webHits`
 - `navSearching` → `navStore.searching`
 - `navWebSearching` → `navStore.webSearching`
 - `navWebError` → `navStore.webError`
 - `navLocalExhausted` → `navStore.localExhausted`
 - `navWebPageno` → `navStore.webPageno` (if referenced in template)
 - `navWebExhausted` → `navStore.webExhausted`
 - `navLoadingMore` → `navStore.loadingMore`
 `bind:value={navQuery}` on the `<input>` → `bind:value={navStore.query}`.
 - [ ] **Step 9: Run checks**
 ```bash
 npm run check
 npm test
 ```
 Both must be clean.
 - [ ] **Step 10: Smoke-test dev server manually**
 ```bash
 npm run dev
 ```
 Open a recipe page → type in header dropdown → verify: dropdown opens, shows local hits, falls back to web for unknown query, "+ weitere Ergebnisse" paginates, clicking a hit closes the dropdown, navigating back/forward clears the dropdown.
 - [ ] **Step 11: Commit**
 ```bash
 git add src/routes/+layout.svelte
 git commit -m "refactor(layout): Header-Dropdown nutzt SearchStore
 Ersetzt die 11 lokalen \$state und den Debounce-Effect durch
 eine SearchStore-Instanz. Nav-Open-Toggle bleibt lokal, weil
 UI-Concern."
 ```
 ---
 ## Task 4: Migrate `+page.svelte` home
 **Why after Task 3:** The store is now field-tested. Home adds snapshot + URL sync + filter-change re-search on top.
 **Files:**
 - Modify: `src/routes/+page.svelte:1-371`
 - [ ] **Step 1: Add imports**
 ```ts
 import { SearchStore, type SearchSnapshot } from '$lib/client/search.svelte';
 ```
 - [ ] **Step 2: Remove the duplicated `$state` block (lines 17–32)**
 Delete: `query`, `hits`, `webHits`, `searching`, `webSearching`, `webError`, `searchedFor`, `localExhausted`, `webPageno`, `webExhausted`, `loadingMore`, `skipNextSearch`, `debounceTimer`.
 Keep: `quote`, `recent`, `favorites` (not search-related), and all `all*` state (All-Recipes listing — unrelated to search).
 Add:
 ```ts
 const store = new SearchStore({
  pageSize: LOCAL_PAGE,
  filterParam: () => {
    const p = searchFilterStore.queryParam;
    return p ? `&domains=${encodeURIComponent(p)}` : '';
  }
 });
 ```
 Remove the local `filterParam()` helper (lines 224–227).
 - [ ] **Step 3: Rewire the `Snapshot<>` API (lines 50–83)**
 ```ts
 export const snapshot: Snapshot<SearchSnapshot> = {
  capture: () => store.captureSnapshot(),
  restore: (s) => store.restoreSnapshot(s)
 };
 ```
 Delete the old `SearchSnapshot` local type alias (it's now imported).
 - [ ] **Step 4: Replace the two search `$effect`s (filter-change + query-change) with two one-liners**
 Remove lines 188–199 (filter-change effect) and lines 322–347 (query-change effect).
 Add:
 ```ts
 $effect(() => {
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  store.query; // register reactive dep
  store.runDebounced();
 });
 $effect(() => {
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  searchFilterStore.active;
  store.reSearch();
 });
 ```
 - [ ] **Step 5: Keep the URL-sync `$effect` as-is, but read from `store.query`**
 ```ts
 $effect(() => {
  if (typeof window === 'undefined') return;
  const q = store.query.trim();
  const url = new URL(window.location.href);
  const current = url.searchParams.get('q') ?? '';
  if (q === current) return;
  if (q) url.searchParams.set('q', q);
  else url.searchParams.delete('q');
  history.replaceState(history.state, '', url.toString());
 });
 ```
 - [ ] **Step 6: Update `onMount` URL-restore**
 ```ts
 const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
 if (urlQ) store.query = urlQ;
 ```
 - [ ] **Step 7: Delete `runSearch` and `loadMore` local functions (lines 229–320)**
 The store provides both. Template references `loadMore` → change to `store.loadMore()`.
 - [ ] **Step 8: Update `submit`**
 ```ts
 function submit(e: SubmitEvent) {
  e.preventDefault();
  const q = store.query.trim();
  if (q.length <= 3) return;
  void store.runSearch(q);
 }
 ```
 - [ ] **Step 9: Update the template (same mechanical rename as Task 3)**
 `query` → `store.query`, `hits` → `store.hits`, etc. for all 11 fields.
 `bind:value={query}` → `bind:value={store.query}`.
 `activeSearch` derived stays: `const activeSearch = $derived(store.query.trim().length > 3);`
 - [ ] **Step 10: Run checks**
 ```bash
 npm run check
 npm test
 ```
 - [ ] **Step 11: Verify file is shorter than before**
 ```bash
 wc -l src/routes/+page.svelte
 ```
 Expected: under 700 lines (was 808). Target from roadmap: under 700 L.
 ```bash
 wc -l src/routes/+layout.svelte
 ```
 Expected: under 600 lines (was 681). Target from roadmap: under 600 L.
 - [ ] **Step 12: Smoke-test dev manually**
 - Type "lasagne" in home → local hits appear.
 - Type "pizza margherita" → web fallback.
 - Deep-link `/?q=lasagne` → query restored, results visible.
 - Navigate to recipe → back → home query + results preserved (snapshot).
 - Change domain filter while query is active → results re-fetch with new filter.
 - [ ] **Step 13: Commit**
 ```bash
 git add src/routes/+page.svelte
 git commit -m "refactor(home): Live-Search auf SearchStore migriert
 Entfernt 11 duplizierte \$state, runSearch, loadMore und beide
 Debounce-Effekte. URL-Sync, Snapshot und Filter-Re-Search bleiben
 hier — aber alle delegieren an den Store."
 ```
 ---
 ## Task 5: Remote E2E smoke (optional — only if CI deploy happens)
 **Trigger:** Only run this task if CI builds the `search-state-store` branch and deploys to `kochwas-dev.siegeln.net`. Otherwise skip to Task 6.
 **Files:**
 - Run: existing `tests/e2e/remote/search.spec.ts`
 - [ ] **Step 1: Run remote suite**
 ```bash
 npm run test:e2e:remote -- search.spec.ts
 ```
 Expected: 4/4 pass (existing coverage is sufficient — no new specs needed for a pure refactor).
 ---
 ## Task 6: Self-review + merge prep
 **Files:**
 - Review: all changed files
 - [ ] **Step 1: `npm test` full suite**
 ```bash
 npm test
 ```
 Expected: all pass (previous count + 12 new SearchStore tests).
 - [ ] **Step 2: `npm run check` full repo**
 ```bash
 npm run check
 ```
 Expected: 0 errors, 0 warnings.
 - [ ] **Step 3: `git diff main...HEAD` review**
 ```bash
 git diff main...HEAD --stat
 git log main..HEAD --oneline
 ```
 Expected commits:
 1. `feat(search): SearchStore fuer Live-Search mit Web-Fallback`
 2. `refactor(layout): Header-Dropdown nutzt SearchStore`
 3. `refactor(home): Live-Search auf SearchStore migriert`
 - [ ] **Step 4: Push branch**
 ```bash
 git push -u origin search-state-store
 ```
 CI builds branch-tagged image → user tests on `kochwas-dev.siegeln.net` → merges to main when clean.
 ---
 ## Risk Notes
 - **Svelte 5 `$state` in classes:** Standard pattern in this repo (`SearchFilterStore`, `PWAStore`). Works.
 - **Two instances of `SearchStore` simultaneously:** Each has its own timer + state. No shared mutable state between them — verified because the store has no static fields.
 - **Snapshot restore racing with `runDebounced`:** Handled via `skipNextDebounce` flag. Same mechanism as the current `skipNextSearch` in `+page.svelte`.
 - **Filter change on home while query is empty:** `reSearch()` early-exits when `q.length < minQueryLength`. Safe.
 - **`afterNavigate` firing during an in-flight search:** `reset()` clears timer and mutates `query`. Any in-flight fetch will race-guard-fail on the next `if (this.query.trim() !== q) return;`. Results get dropped, which is the desired behavior.
 ## Deferred — NOT in this plan
 - **Search-Store-Tests mit echtem Browser-`$effect`:** Would need `@sveltejs/vite-plugin-svelte` test setup with component mount. Current Vitest setup is Node-only. Skip — the injected-fetch unit tests cover the state machine.
 - **Shared store instance (singleton) instead of per-consumer:** Rejected during design — would couple home and header search semantically.
 - **Web-Hit-Cache im Store:** Out of scope. The roadmap explicitly scopes this phase to state extraction, not perf work.
--- a/playwright.remote.config.ts
+++ b/playwright.remote.config.ts
@@ -23,8 +23,10 @@ export default defineConfig({
    headless: true,
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
-    // Service-Worker zulassen, aber keine Offline-Manipulation — die
+    // Service-Worker blocken: Diese Suite testet Live-API-Verhalten gegen
-    // Tests hier pruefen Live-Verhalten gegen den Server.
+    // den Server, keine PWA-Features (dafuer offline.spec.ts lokal). Die
-    serviceWorkers: 'allow'
+    // frische SW-Registrierung pro Context akkumulierte im Single-Worker-
    // Run Browser-State und crashte Chromium zufaellig nach 20-30 Specs.
    serviceWorkers: 'block'
  }
 });
--- a/src/lib/client/search.svelte.ts
+++ b/src/lib/client/search.svelte.ts
@@ -0,0 +1,225 @@
 import type { SearchHit } from '$lib/server/recipes/search-local';
 import type { WebHit } from '$lib/server/search/searxng';
 export type SearchSnapshot = {
  query: string;
  hits: SearchHit[];
  webHits: WebHit[];
  searchedFor: string | null;
  webError: string | null;
  localExhausted: boolean;
  webPageno: number;
  webExhausted: boolean;
 };
 export type SearchStoreOptions = {
  pageSize?: number;
  debounceMs?: number;
  filterDebounceMs?: number;
  minQueryLength?: number;
  filterParam?: () => string;
  fetchImpl?: typeof fetch;
 };
 export class SearchStore {
  query = $state('');
  hits = $state<SearchHit[]>([]);
  webHits = $state<WebHit[]>([]);
  searching = $state(false);
  webSearching = $state(false);
  webError = $state<string | null>(null);
  searchedFor = $state<string | null>(null);
  localExhausted = $state(false);
  webPageno = $state(0);
  webExhausted = $state(false);
  loadingMore = $state(false);
  private readonly pageSize: number;
  private readonly debounceMs: number;
  private readonly filterDebounceMs: number;
  private readonly minQueryLength: number;
  private readonly filterParam: () => string;
  private readonly fetchImpl: typeof fetch;
  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
  private skipNextDebounce = false;
  constructor(opts: SearchStoreOptions = {}) {
    this.pageSize = opts.pageSize ?? 30;
    this.debounceMs = opts.debounceMs ?? 300;
    this.filterDebounceMs = opts.filterDebounceMs ?? 150;
    this.minQueryLength = opts.minQueryLength ?? 4;
    this.filterParam = opts.filterParam ?? (() => '');
    this.fetchImpl = opts.fetchImpl ?? ((...a) => fetch(...a));
  }
  runDebounced(): void {
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    if (this.skipNextDebounce) {
      this.skipNextDebounce = false;
      return;
    }
    const q = this.query.trim();
    if (q.length < this.minQueryLength) {
      this.resetResults();
      return;
    }
    this.searching = true;
    this.webHits = [];
    this.webSearching = false;
    this.webError = null;
    this.debounceTimer = setTimeout(() => {
      void this.runSearch(q);
    }, this.debounceMs);
  }
  async runSearch(q: string): Promise<void> {
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    this.debounceTimer = null;
    this.localExhausted = false;
    this.webPageno = 0;
    this.webExhausted = false;
    try {
      const res = await this.fetchImpl(
        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}${this.filterParam()}`
      );
      const body = (await res.json()) as { hits: SearchHit[] };
      if (this.query.trim() !== q) return;
      this.hits = body.hits;
      this.searchedFor = q;
      if (this.hits.length < this.pageSize) this.localExhausted = true;
      if (this.hits.length === 0) {
        await this.runWebSearch(q, 1);
      }
    } finally {
      if (this.query.trim() === q) this.searching = false;
    }
  }
  private async runWebSearch(q: string, pageno: number): Promise<void> {
    this.webSearching = true;
    try {
      const res = await this.fetchImpl(
        `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${pageno}${this.filterParam()}`
      );
      if (this.query.trim() !== q) return;
      if (!res.ok) {
        const err = (await res.json().catch(() => ({}))) as { message?: string };
        this.webError = err.message ?? `HTTP ${res.status}`;
        this.webExhausted = true;
        return;
      }
      const body = (await res.json()) as { hits: WebHit[] };
      this.webHits = pageno === 1 ? body.hits : [...this.webHits, ...body.hits];
      this.webPageno = pageno;
      if (body.hits.length === 0) this.webExhausted = true;
    } finally {
      if (this.query.trim() === q) this.webSearching = false;
    }
  }
  async loadMore(): Promise<void> {
    if (this.loadingMore) return;
    const q = this.query.trim();
    if (!q) return;
    this.loadingMore = true;
    try {
      if (!this.localExhausted) {
        const res = await this.fetchImpl(
          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}&offset=${this.hits.length}${this.filterParam()}`
        );
        const body = (await res.json()) as { hits: SearchHit[] };
        if (this.query.trim() !== q) return;
        const more = body.hits;
        const seen = new Set(this.hits.map((h) => h.id));
        const deduped = more.filter((h) => !seen.has(h.id));
        this.hits = [...this.hits, ...deduped];
        if (more.length < this.pageSize) this.localExhausted = true;
      } else if (!this.webExhausted) {
        const nextPage = this.webPageno + 1;
        const wasEmpty = this.webHits.length === 0;
        if (wasEmpty) this.webSearching = true;
        try {
          const res = await this.fetchImpl(
            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${this.filterParam()}`
          );
          if (this.query.trim() !== q) return;
          if (!res.ok) {
            const err = (await res.json().catch(() => ({}))) as { message?: string };
            this.webError = err.message ?? `HTTP ${res.status}`;
            this.webExhausted = true;
            return;
          }
          const body = (await res.json()) as { hits: WebHit[] };
          const more = body.hits;
          const seen = new Set(this.webHits.map((h) => h.url));
          const deduped = more.filter((h) => !seen.has(h.url));
          if (deduped.length === 0) {
            this.webExhausted = true;
          } else {
            this.webHits = [...this.webHits, ...deduped];
            this.webPageno = nextPage;
          }
        } finally {
          if (this.query.trim() === q) this.webSearching = false;
        }
      }
    } finally {
      this.loadingMore = false;
    }
  }
  reSearch(): void {
    const q = this.query.trim();
    if (q.length < this.minQueryLength) return;
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    this.searching = true;
    this.webHits = [];
    this.webSearching = false;
    this.webError = null;
    this.debounceTimer = setTimeout(() => void this.runSearch(q), this.filterDebounceMs);
  }
  reset(): void {
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    this.debounceTimer = null;
    this.query = '';
    this.resetResults();
  }
  private resetResults(): void {
    this.hits = [];
    this.webHits = [];
    this.searchedFor = null;
    this.searching = false;
    this.webSearching = false;
    this.webError = null;
    this.localExhausted = false;
    this.webPageno = 0;
    this.webExhausted = false;
  }
  captureSnapshot(): SearchSnapshot {
    return {
      query: this.query,
      hits: this.hits,
      webHits: this.webHits,
      searchedFor: this.searchedFor,
      webError: this.webError,
      localExhausted: this.localExhausted,
      webPageno: this.webPageno,
      webExhausted: this.webExhausted
    };
  }
  restoreSnapshot(s: SearchSnapshot): void {
    this.skipNextDebounce = true;
    this.query = s.query;
    this.hits = s.hits;
    this.webHits = s.webHits;
    this.searchedFor = s.searchedFor;
    this.webError = s.webError;
    this.localExhausted = s.localExhausted;
    this.webPageno = s.webPageno;
    this.webExhausted = s.webExhausted;
  }
 }
--- a/src/lib/components/ImageUploadBox.svelte
+++ b/src/lib/components/ImageUploadBox.svelte
@@ -0,0 +1,190 @@
 <script lang="ts">
  import { untrack } from 'svelte';
  import { ImagePlus, ImageOff } from 'lucide-svelte';
  import { confirmAction } from '$lib/client/confirm.svelte';
  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
  import { requireOnline } from '$lib/client/require-online';
  type Props = {
    recipeId: number;
    imagePath: string | null;
    onchange: (path: string | null) => void;
  };
  let { recipeId, imagePath: initial, onchange }: Props = $props();
  let imagePath = $state<string | null>(untrack(() => initial));
  let uploading = $state(false);
  let fileInput: HTMLInputElement | null = $state(null);
  const imageSrc = $derived(
    imagePath === null
      ? null
      : /^https?:\/\//i.test(imagePath)
        ? imagePath
        : `/images/${imagePath}`
  );
  async function onFileChosen(event: Event) {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    input.value = '';
    if (!file) return;
    if (!requireOnline('Der Bild-Upload')) return;
    uploading = true;
    try {
      const fd = new FormData();
      fd.append('file', file);
      const res = await asyncFetch(
        `/api/recipes/${recipeId}/image`,
        { method: 'POST', body: fd },
        'Upload fehlgeschlagen'
      );
      if (!res) return;
      const body = await res.json();
      imagePath = body.image_path;
      onchange(imagePath);
    } finally {
      uploading = false;
    }
  }
  async function removeImage() {
    if (imagePath === null) return;
    const ok = await confirmAction({
      title: 'Bild entfernen?',
      message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
      confirmLabel: 'Entfernen',
      destructive: true
    });
    if (!ok) return;
    if (!requireOnline('Das Entfernen')) return;
    uploading = true;
    try {
      const res = await asyncFetch(
        `/api/recipes/${recipeId}/image`,
        { method: 'DELETE' },
        'Entfernen fehlgeschlagen'
      );
      if (!res) return;
      imagePath = null;
      onchange(null);
    } finally {
      uploading = false;
    }
  }
 </script>
 <div class="image-row">
  <div class="image-preview" class:empty={!imageSrc}>
    {#if imageSrc}
      <img src={imageSrc} alt="" />
    {:else}
      <span class="placeholder">Kein Bild</span>
    {/if}
  </div>
  <div class="image-actions">
    <button
      class="btn"
      type="button"
      onclick={() => fileInput?.click()}
      disabled={uploading}
    >
      <ImagePlus size={16} strokeWidth={2} />
      <span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
    </button>
    {#if imagePath}
      <button class="btn ghost" type="button" onclick={removeImage} disabled={uploading}>
        <ImageOff size={16} strokeWidth={2} />
        <span>Entfernen</span>
      </button>
    {/if}
    {#if uploading}
      <span class="upload-status">Lade …</span>
    {/if}
  </div>
  <input
    bind:this={fileInput}
    type="file"
    accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
    class="file-input"
    onchange={onFileChosen}
  />
 </div>
 <p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
 <style>
  .image-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .image-preview {
    width: 160px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: #eef3ef;
    border: 1px solid #e4eae7;
    flex-shrink: 0;
  }
  .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .image-preview.empty {
    display: grid;
    place-items: center;
    color: #999;
    font-size: 0.85rem;
  }
  .image-preview .placeholder {
    padding: 0 0.5rem;
    text-align: center;
  }
  .image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .upload-status {
    color: #666;
    font-size: 0.9rem;
  }
  .file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .image-hint {
    margin: 0.6rem 0 0;
    color: #888;
    font-size: 0.8rem;
  }
  .btn {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #cfd9d1;
    background: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .btn.ghost {
    color: #666;
  }
  .btn:disabled {
    opacity: 0.6;
    cursor: progress;
  }
 </style>
--- a/src/lib/components/IngredientRow.svelte
+++ b/src/lib/components/IngredientRow.svelte
@@ -0,0 +1,129 @@
 <script lang="ts">
  import { Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
  import type { DraftIng } from './recipe-editor-types';
  type Props = {
    ing: DraftIng;
    idx: number;
    total: number;
    onmove: (dir: -1 | 1) => void;
    onremove: () => void;
  };
  let { ing, idx, total, onmove, onremove }: Props = $props();
 </script>
 <li class="ing-row">
  <div class="move">
    <button
      class="move-btn"
      type="button"
      aria-label="Zutat nach oben"
      disabled={idx === 0}
      onclick={() => onmove(-1)}
    >
      <ChevronUp size={14} strokeWidth={2.5} />
    </button>
    <button
      class="move-btn"
      type="button"
      aria-label="Zutat nach unten"
      disabled={idx === total - 1}
      onclick={() => onmove(1)}
    >
      <ChevronDown size={14} strokeWidth={2.5} />
    </button>
  </div>
  <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
  <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
  <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
  <input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
  <button class="del" type="button" aria-label="Zutat entfernen" onclick={onremove}>
    <Trash2 size={16} strokeWidth={2} />
  </button>
 </li>
 <style>
  .ing-row {
    display: grid;
    grid-template-columns: 28px 70px 70px 1fr 1fr 40px;
    gap: 0.35rem;
    align-items: center;
  }
  .move {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .move-btn {
    width: 28px;
    height: 20px;
    border: 1px solid #cfd9d1;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .move-btn:hover:not(:disabled) {
    background: #f4f8f5;
  }
  .move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .ing-row input {
    padding: 0.5rem 0.55rem;
    border: 1px solid #cfd9d1;
    border-radius: 8px;
    font-size: 0.9rem;
    min-height: 38px;
    font-family: inherit;
    min-width: 0;
  }
  .del {
    width: 40px;
    height: 40px;
    border: 1px solid #f1b4b4;
    background: white;
    color: #c53030;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .del:hover {
    background: #fdf3f3;
  }
  @media (max-width: 560px) {
    .ing-row {
      grid-template-columns: 28px 70px 1fr 40px;
      grid-template-areas:
        'move qty name del'
        'move unit unit del'
        'note note note note';
    }
    .ing-row .move {
      grid-area: move;
    }
    .ing-row .qty {
      grid-area: qty;
    }
    .ing-row .unit {
      grid-area: unit;
    }
    .ing-row .name {
      grid-area: name;
    }
    .ing-row .note {
      grid-area: note;
    }
    .ing-row .del {
      grid-area: del;
    }
  }
 </style>
--- a/src/lib/components/RecipeEditor.svelte
+++ b/src/lib/components/RecipeEditor.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
  import { untrack } from 'svelte';
-  import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
+  import { Plus } from 'lucide-svelte';
  import type { Recipe, Ingredient, Step } from '$lib/types';
-  import { confirmAction } from '$lib/client/confirm.svelte';
+  import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
-  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
+  import IngredientRow from '$lib/components/IngredientRow.svelte';
-  import { requireOnline } from '$lib/client/require-online';
+  import StepList from '$lib/components/StepList.svelte';
  import type { DraftIng, DraftStep } from '$lib/components/recipe-editor-types';
  type Props = {
    recipe: Recipe;
@@ -27,67 +28,6 @@
  let { recipe, saving = false, onsave, oncancel, onimagechange }: Props = $props();
  let imagePath = $state<string | null>(untrack(() => recipe.image_path));
  let uploading = $state(false);
  let fileInput: HTMLInputElement | null = $state(null);
  const imageSrc = $derived(
    imagePath === null
      ? null
      : /^https?:\/\//i.test(imagePath)
        ? imagePath
        : `/images/${imagePath}`
  );
  async function onFileChosen(event: Event) {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    input.value = '';
    if (!file) return;
    if (!requireOnline('Der Bild-Upload')) return;
    uploading = true;
    try {
      const fd = new FormData();
      fd.append('file', file);
      const res = await asyncFetch(
        `/api/recipes/${recipe.id}/image`,
        { method: 'POST', body: fd },
        'Upload fehlgeschlagen'
      );
      if (!res) return;
      const body = await res.json();
      imagePath = body.image_path;
      onimagechange?.(imagePath);
    } finally {
      uploading = false;
    }
  }
  async function removeImage() {
    if (imagePath === null) return;
    const ok = await confirmAction({
      title: 'Bild entfernen?',
      message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
      confirmLabel: 'Entfernen',
      destructive: true
    });
    if (!ok) return;
    if (!requireOnline('Das Entfernen')) return;
    uploading = true;
    try {
      const res = await asyncFetch(
        `/api/recipes/${recipe.id}/image`,
        { method: 'DELETE' },
        'Entfernen fehlgeschlagen'
      );
      if (!res) return;
      imagePath = null;
      onimagechange?.(null);
    } finally {
      uploading = false;
    }
  }
  // Form-lokaler Zustand: Initialwerte aus dem Prop snapshotten (untrack),
  // damit User-Edits nicht von prop-Updates ueberschrieben werden.
  let title = $state(untrack(() => recipe.title));
@@ -97,14 +37,6 @@
  let cookMin = $state<number | ''>(untrack(() => recipe.cook_time_min ?? ''));
  let totalMin = $state<number | ''>(untrack(() => recipe.total_time_min ?? ''));
  type DraftIng = {
    qty: string;
    unit: string;
    name: string;
    note: string;
  };
  type DraftStep = { text: string };
  let ingredients = $state<DraftIng[]>(
    untrack(() =>
      recipe.ingredients.map((i) => ({
@@ -189,50 +121,13 @@
 </script>
 <div class="editor">
-  <section class="block image-block">
+  <section class="block">
    <h2>Bild</h2>
-    <div class="image-row">
+    <ImageUploadBox
-      <div class="image-preview" class:empty={!imageSrc}>
+      recipeId={recipe.id!}
-        {#if imageSrc}
+      imagePath={recipe.image_path}
-          <img src={imageSrc} alt="" />
+      onchange={(p) => onimagechange?.(p)}
-        {:else}
+    />
          <span class="placeholder">Kein Bild</span>
        {/if}
      </div>
      <div class="image-actions">
        <button
          class="btn"
          type="button"
          onclick={() => fileInput?.click()}
          disabled={uploading}
        >
          <ImagePlus size={16} strokeWidth={2} />
          <span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
        </button>
        {#if imagePath}
          <button
            class="btn ghost"
            type="button"
            onclick={removeImage}
            disabled={uploading}
          >
            <ImageOff size={16} strokeWidth={2} />
            <span>Entfernen</span>
          </button>
        {/if}
        {#if uploading}
          <span class="upload-status">Lade …</span>
        {/if}
      </div>
      <input
        bind:this={fileInput}
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
        class="file-input"
        onchange={onFileChosen}
      />
    </div>
    <p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
  </section>
  <div class="meta">
@@ -273,35 +168,13 @@
    <h2>Zutaten</h2>
    <ul class="ing-list">
      {#each ingredients as ing, idx (idx)}
-        <li class="ing-row">
+        <IngredientRow
-          <div class="move">
+          {ing}
-            <button
+          {idx}
-              class="move-btn"
+          total={ingredients.length}
-              type="button"
+          onmove={(dir) => moveIngredient(idx, dir)}
-              aria-label="Zutat nach oben"
+          onremove={() => removeIngredient(idx)}
-              disabled={idx === 0}
+        />
              onclick={() => moveIngredient(idx, -1)}
            >
              <ChevronUp size={14} strokeWidth={2.5} />
            </button>
            <button
              class="move-btn"
              type="button"
              aria-label="Zutat nach unten"
              disabled={idx === ingredients.length - 1}
              onclick={() => moveIngredient(idx, 1)}
            >
              <ChevronDown size={14} strokeWidth={2.5} />
            </button>
          </div>
          <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
          <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
          <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
          <input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
          <button class="del" type="button" aria-label="Zutat entfernen" onclick={() => removeIngredient(idx)}>
            <Trash2 size={16} strokeWidth={2} />
          </button>
        </li>
      {/each}
    </ul>
    <button class="add" type="button" onclick={addIngredient}>
@@ -312,25 +185,7 @@
  <section class="block">
    <h2>Zubereitung</h2>
-    <ol class="step-list">
+    <StepList {steps} onadd={addStep} onremove={removeStep} />
      {#each steps as step, idx (idx)}
        <li class="step-row">
          <span class="num">{idx + 1}</span>
          <textarea
            bind:value={step.text}
            rows="3"
            placeholder="Schritt beschreiben …"
          ></textarea>
          <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => removeStep(idx)}>
            <Trash2 size={16} strokeWidth={2} />
          </button>
        </li>
      {/each}
    </ol>
    <button class="add" type="button" onclick={addStep}>
      <Plus size={16} strokeWidth={2} />
      <span>Schritt hinzufügen</span>
    </button>
  </section>
  <div class="foot">
@@ -396,74 +251,12 @@
    border-radius: 12px;
    padding: 1rem;
  }
  .image-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .image-preview {
    width: 160px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: #eef3ef;
    border: 1px solid #e4eae7;
    flex-shrink: 0;
  }
  .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .image-preview.empty {
    display: grid;
    place-items: center;
    color: #999;
    font-size: 0.85rem;
  }
  .image-preview .placeholder {
    padding: 0 0.5rem;
    text-align: center;
  }
  .image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .image-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    min-height: 40px;
    font-size: 0.9rem;
  }
  .upload-status {
    color: #666;
    font-size: 0.9rem;
  }
  .file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .image-hint {
    margin: 0.6rem 0 0;
    color: #888;
    font-size: 0.8rem;
  }
  .block h2 {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
    color: #2b6a3d;
  }
-  .ing-list,
+  .ing-list {
  .step-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
@@ -471,88 +264,6 @@
    flex-direction: column;
    gap: 0.4rem;
  }
  .ing-row {
    display: grid;
    grid-template-columns: 28px 70px 70px 1fr 1fr 40px;
    gap: 0.35rem;
    align-items: center;
  }
  .move {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .move-btn {
    width: 28px;
    height: 20px;
    border: 1px solid #cfd9d1;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .move-btn:hover:not(:disabled) {
    background: #f4f8f5;
  }
  .move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .ing-row input {
    padding: 0.5rem 0.55rem;
    border: 1px solid #cfd9d1;
    border-radius: 8px;
    font-size: 0.9rem;
    min-height: 38px;
    font-family: inherit;
    min-width: 0;
  }
  .step-row {
    display: grid;
    grid-template-columns: 32px 1fr 40px;
    gap: 0.5rem;
    align-items: start;
  }
  .num {
    width: 32px;
    height: 32px;
    background: #2b6a3d;
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.25rem;
  }
  .step-row textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid #cfd9d1;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
  }
  .del {
    width: 40px;
    height: 40px;
    border: 1px solid #f1b4b4;
    background: white;
    color: #c53030;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .del:hover {
    background: #fdf3f3;
  }
  .add {
    display: inline-flex;
    align-items: center;
@@ -598,31 +309,4 @@
    opacity: 0.6;
    cursor: progress;
  }
  @media (max-width: 560px) {
    .ing-row {
      grid-template-columns: 28px 70px 1fr 40px;
      grid-template-areas:
        'move qty name del'
        'move unit unit del'
        'note note note note';
    }
    .ing-row .move {
      grid-area: move;
    }
    .ing-row .qty {
      grid-area: qty;
    }
    .ing-row .unit {
      grid-area: unit;
    }
    .ing-row .name {
      grid-area: name;
    }
    .ing-row .note {
      grid-area: note;
    }
    .ing-row .del {
      grid-area: del;
    }
  }
 </style>
--- a/src/lib/components/RecipeView.svelte
+++ b/src/lib/components/RecipeView.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
  import { scaleIngredients } from '$lib/recipes/scaler';
  import type { Recipe } from '$lib/types';
  import TimeDisplay from '$lib/components/TimeDisplay.svelte';
  type Props = {
    recipe: Recipe;
@@ -41,15 +42,6 @@
    if (Number.isInteger(q)) return String(q);
    return q.toLocaleString('de-DE', { maximumFractionDigits: 2 });
  }
  function timeSummary(): string {
    const parts: string[] = [];
    if (recipe.prep_time_min) parts.push(`Vorb. ${recipe.prep_time_min} min`);
    if (recipe.cook_time_min) parts.push(`Kochen ${recipe.cook_time_min} min`);
    if (!recipe.prep_time_min && !recipe.cook_time_min && recipe.total_time_min)
      parts.push(`Gesamt ${recipe.total_time_min} min`);
    return parts.join(' · ');
  }
 </script>
 {#if banner}
@@ -79,9 +71,11 @@
          {/each}
        {/if}
      </div>
-      {#if timeSummary()}
+      <TimeDisplay
-        <p class="times">{timeSummary()}</p>
+        prepTimeMin={recipe.prep_time_min}
-      {/if}
+        cookTimeMin={recipe.cook_time_min}
        totalTimeMin={recipe.total_time_min}
      />
      {#if recipe.source_url}
        <p class="src">
          Quelle: <a href={recipe.source_url} target="_blank" rel="noopener">{recipe.source_domain}</a>
@@ -212,11 +206,6 @@
    font-size: 0.8rem;
    color: #888;
  }
  .times {
    margin: 0 0 0.25rem;
    color: #666;
    font-size: 0.9rem;
  }
  .src {
    margin: 0;
    font-size: 0.85rem;
--- a/src/lib/components/StepList.svelte
+++ b/src/lib/components/StepList.svelte
@@ -0,0 +1,101 @@
 <script lang="ts">
  import { Plus, Trash2 } from 'lucide-svelte';
  import type { DraftStep } from './recipe-editor-types';
  type Props = {
    steps: DraftStep[];
    onadd: () => void;
    onremove: (idx: number) => void;
  };
  let { steps, onadd, onremove }: Props = $props();
 </script>
 <ol class="step-list">
  {#each steps as step, idx (idx)}
    <li class="step-row">
      <span class="num">{idx + 1}</span>
      <textarea
        bind:value={step.text}
        rows="3"
        placeholder="Schritt beschreiben …"
      ></textarea>
      <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => onremove(idx)}>
        <Trash2 size={16} strokeWidth={2} />
      </button>
    </li>
  {/each}
 </ol>
 <button class="add" type="button" onclick={onadd}>
  <Plus size={16} strokeWidth={2} />
  <span>Schritt hinzufügen</span>
 </button>
 <style>
  .step-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .step-row {
    display: grid;
    grid-template-columns: 32px 1fr 40px;
    gap: 0.5rem;
    align-items: start;
  }
  .num {
    width: 32px;
    height: 32px;
    background: #2b6a3d;
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.25rem;
  }
  .step-row textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid #cfd9d1;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
  }
  .del {
    width: 40px;
    height: 40px;
    border: 1px solid #f1b4b4;
    background: white;
    color: #c53030;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .del:hover {
    background: #fdf3f3;
  }
  .add {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border: 1px dashed #cfd9d1;
    background: white;
    color: #2b6a3d;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
  }
  .add:hover {
    background: #f4f8f5;
  }
 </style>
--- a/src/lib/components/TimeDisplay.svelte
+++ b/src/lib/components/TimeDisplay.svelte
@@ -0,0 +1,30 @@
 <script lang="ts">
  type Props = {
    prepTimeMin: number | null;
    cookTimeMin: number | null;
    totalTimeMin: number | null;
  };
  let { prepTimeMin, cookTimeMin, totalTimeMin }: Props = $props();
  const summary = $derived.by(() => {
    const parts: string[] = [];
    if (prepTimeMin) parts.push(`Vorb. ${prepTimeMin} min`);
    if (cookTimeMin) parts.push(`Kochen ${cookTimeMin} min`);
    if (!prepTimeMin && !cookTimeMin && totalTimeMin)
      parts.push(`Gesamt ${totalTimeMin} min`);
    return parts.join(' · ');
  });
 </script>
 {#if summary}
  <p class="times">{summary}</p>
 {/if}
 <style>
  .times {
    margin: 0 0 0.25rem;
    color: #666;
    font-size: 0.9rem;
  }
 </style>
--- a/src/lib/components/recipe-editor-types.ts
+++ b/src/lib/components/recipe-editor-types.ts
@@ -0,0 +1,8 @@
 export type DraftIng = {
  qty: string;
  unit: string;
  name: string;
  note: string;
 };
 export type DraftStep = { text: string };
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -17,26 +17,20 @@
  import { network } from '$lib/client/network.svelte';
  import { installPrompt } from '$lib/client/install-prompt.svelte';
  import { registerServiceWorker } from '$lib/client/sw-register';
-  import type { SearchHit } from '$lib/server/recipes/search-local';
+  import { SearchStore } from '$lib/client/search.svelte';
  import type { WebHit } from '$lib/server/search/searxng';
  let { children } = $props();
-  const NAV_PAGE_SIZE = 30;
+  const navStore = new SearchStore({
    pageSize: 30,
    filterParam: () => {
      const p = searchFilterStore.queryParam;
      return p ? `&domains=${encodeURIComponent(p)}` : '';
    }
  });
  let navQuery = $state('');
  let navHits = $state<SearchHit[]>([]);
  let navWebHits = $state<WebHit[]>([]);
  let navSearching = $state(false);
  let navWebSearching = $state(false);
  let navWebError = $state<string | null>(null);
  let navOpen = $state(false);
  let navLocalExhausted = $state(false);
  let navWebPageno = $state(0);
  let navWebExhausted = $state(false);
  let navLoadingMore = $state(false);
  let navContainer: HTMLElement | undefined = $state();
  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
  let menuOpen = $state(false);
  let menuContainer: HTMLElement | undefined = $state();
@@ -44,123 +38,21 @@
    $page.url.pathname.startsWith('/recipes/') || $page.url.pathname === '/preview'
  );
  function filterParam(): string {
    const p = searchFilterStore.queryParam;
    return p ? `&domains=${encodeURIComponent(p)}` : '';
  }
  $effect(() => {
-    const q = navQuery.trim();
+    // Bare reads register the reactive deps; then kick the store.
-    if (debounceTimer) clearTimeout(debounceTimer);
+    const q = navStore.query;
-    if (q.length <= 3) {
+    navStore.runDebounced();
-      navHits = [];
+    // navOpen follows query length: open while typing, close when cleared.
-      navWebHits = [];
+    navOpen = q.trim().length > 3;
      navSearching = false;
      navWebSearching = false;
      navWebError = null;
      navOpen = false;
      navLocalExhausted = false;
      navWebPageno = 0;
      navWebExhausted = false;
      return;
    }
    navSearching = true;
    navWebHits = [];
    navWebSearching = false;
    navWebError = null;
    navOpen = true;
    navLocalExhausted = false;
    navWebPageno = 0;
    navWebExhausted = false;
    debounceTimer = setTimeout(async () => {
      try {
        const res = await fetch(
          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${NAV_PAGE_SIZE}${filterParam()}`
        );
        const body = await res.json();
        if (navQuery.trim() !== q) return;
        navHits = body.hits;
        if (navHits.length < NAV_PAGE_SIZE) navLocalExhausted = true;
        if (navHits.length === 0) {
          navWebSearching = true;
          try {
            const wres = await fetch(
              `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1${filterParam()}`
            );
            if (navQuery.trim() !== q) return;
            if (!wres.ok) {
              const err = await wres.json().catch(() => ({}));
              navWebError = err.message ?? `HTTP ${wres.status}`;
              navWebExhausted = true;
            } else {
              const wbody = await wres.json();
              navWebHits = wbody.hits;
              navWebPageno = 1;
              if (navWebHits.length === 0) navWebExhausted = true;
            }
          } finally {
            if (navQuery.trim() === q) navWebSearching = false;
          }
        }
      } finally {
        if (navQuery.trim() === q) navSearching = false;
      }
    }, 300);
  });
-  async function loadMoreNav() {
+  function loadMoreNav() {
-    if (navLoadingMore) return;
+    return navStore.loadMore();
    const q = navQuery.trim();
    if (!q) return;
    navLoadingMore = true;
    try {
      if (!navLocalExhausted) {
        const res = await fetch(
          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${NAV_PAGE_SIZE}&offset=${navHits.length}${filterParam()}`
        );
        const body = await res.json();
        if (navQuery.trim() !== q) return;
        const more = body.hits as SearchHit[];
        const seen = new Set(navHits.map((h) => h.id));
        const deduped = more.filter((h) => !seen.has(h.id));
        navHits = [...navHits, ...deduped];
        if (more.length < NAV_PAGE_SIZE) navLocalExhausted = true;
      } else if (!navWebExhausted) {
        const nextPage = navWebPageno + 1;
        navWebSearching = navWebHits.length === 0;
        try {
          const wres = await fetch(
            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${filterParam()}`
          );
          if (navQuery.trim() !== q) return;
          if (!wres.ok) {
            const err = await wres.json().catch(() => ({}));
            navWebError = err.message ?? `HTTP ${wres.status}`;
            navWebExhausted = true;
            return;
          }
          const wbody = await wres.json();
          const more = wbody.hits as WebHit[];
          const seen = new Set(navWebHits.map((h) => h.url));
          const deduped = more.filter((h) => !seen.has(h.url));
          if (deduped.length === 0) {
            navWebExhausted = true;
          } else {
            navWebHits = [...navWebHits, ...deduped];
            navWebPageno = nextPage;
          }
        } finally {
          if (navQuery.trim() === q) navWebSearching = false;
        }
      }
    } finally {
      navLoadingMore = false;
    }
  }
  function submitNav(e: SubmitEvent) {
    e.preventDefault();
-    const q = navQuery.trim();
+    const q = navStore.query.trim();
    if (!q) return;
    navOpen = false;
    void goto(`/?q=${encodeURIComponent(q)}`);
@@ -184,15 +76,11 @@
  function pickHit() {
    navOpen = false;
-    navQuery = '';
+    navStore.reset();
    navHits = [];
    navWebHits = [];
  }
  afterNavigate(() => {
-    navQuery = '';
+    navStore.reset();
    navHits = [];
    navWebHits = [];
    navOpen = false;
    menuOpen = false;
    // Badge nach jeder Client-Navigation frisch halten — sonst kann er
@@ -239,9 +127,9 @@
          <SearchFilter inline />
          <input
            type="search"
-            bind:value={navQuery}
+            bind:value={navStore.query}
            onfocus={() => {
-              if (navHits.length > 0 || navQuery.trim().length > 3) navOpen = true;
+              if (navStore.hits.length > 0 || navStore.query.trim().length > 3) navOpen = true;
            }}
            placeholder="Rezept suchen…"
            autocomplete="off"
@@ -251,12 +139,12 @@
        </form>
        {#if navOpen}
          <div class="dropdown" role="listbox">
-            {#if navSearching && navHits.length === 0 && navWebHits.length === 0}
+            {#if navStore.searching && navStore.hits.length === 0 && navStore.webHits.length === 0}
              <SearchLoader scope="local" size="sm" />
            {:else}
-              {#if navHits.length > 0}
+              {#if navStore.hits.length > 0}
                <ul class="dd-list">
-                  {#each navHits as r (r.id)}
+                  {#each navStore.hits as r (r.id)}
                    <li>
                      <a
                        href={`/recipes/${r.id}`}
@@ -282,14 +170,14 @@
                </ul>
              {/if}
-              {#if navWebHits.length > 0}
+              {#if navStore.webHits.length > 0}
-                {#if navHits.length > 0}
+                {#if navStore.hits.length > 0}
                  <p class="dd-section">Aus dem Internet</p>
                {:else}
                  <p class="dd-section">Keine lokalen Rezepte – aus dem Internet:</p>
                {/if}
                <ul class="dd-list">
-                  {#each navWebHits as w (w.url)}
+                  {#each navStore.webHits as w (w.url)}
                    <li>
                      <a
                        href={`/preview?url=${encodeURIComponent(w.url)}`}
@@ -313,23 +201,23 @@
                </ul>
              {/if}
-              {#if navWebSearching}
+              {#if navStore.webSearching}
                <SearchLoader scope="web" size="sm" />
-              {:else if navWebError && navWebHits.length === 0}
+              {:else if navStore.webError && navStore.webHits.length === 0}
                <p class="dd-status dd-error">Internet-Suche zurzeit nicht möglich.</p>
-              {:else if navHits.length === 0 && navWebHits.length === 0 && !navSearching}
+              {:else if navStore.hits.length === 0 && navStore.webHits.length === 0 && !navStore.searching}
                <p class="dd-status">Auch im Internet nichts gefunden.</p>
              {/if}
-              {#if !(navLocalExhausted && navWebExhausted) && (navHits.length > 0 || navWebHits.length > 0)}
+              {#if !(navStore.localExhausted && navStore.webExhausted) && (navStore.hits.length > 0 || navStore.webHits.length > 0)}
                <button
                  class="dd-web"
                  type="button"
                  onclick={loadMoreNav}
-                  disabled={navLoadingMore || navWebSearching}
+                  disabled={navStore.loadingMore || navStore.webSearching}
                >
                  <span
-                    >{navLoadingMore || navWebSearching
+                    >{navStore.loadingMore || navStore.webSearching
                      ? 'Lade …'
                      : '+ weitere Ergebnisse'}</span
                  >
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,32 +4,27 @@
  import { CookingPot, X } from 'lucide-svelte';
  import type { Snapshot } from './$types';
  import type { SearchHit } from '$lib/server/recipes/search-local';
  import type { WebHit } from '$lib/server/search/searxng';
  import { randomQuote } from '$lib/quotes';
  import SearchLoader from '$lib/components/SearchLoader.svelte';
  import SearchFilter from '$lib/components/SearchFilter.svelte';
  import { profileStore } from '$lib/client/profile.svelte';
  import { searchFilterStore } from '$lib/client/search-filter.svelte';
  import { requireOnline } from '$lib/client/require-online';
  import { SearchStore, type SearchSnapshot } from '$lib/client/search.svelte';
  const LOCAL_PAGE = 30;
-  let query = $state('');
+  const store = new SearchStore({
    pageSize: LOCAL_PAGE,
    filterParam: () => {
      const p = searchFilterStore.queryParam;
      return p ? `&domains=${encodeURIComponent(p)}` : '';
    }
  });
  let quote = $state('');
  let recent = $state<SearchHit[]>([]);
  let favorites = $state<SearchHit[]>([]);
  let hits = $state<SearchHit[]>([]);
  let webHits = $state<WebHit[]>([]);
  let searching = $state(false);
  let webSearching = $state(false);
  let webError = $state<string | null>(null);
  let searchedFor = $state<string | null>(null);
  let localExhausted = $state(false);
  let webPageno = $state(0);
  let webExhausted = $state(false);
  let loadingMore = $state(false);
  let skipNextSearch = false;
  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
  const ALL_PAGE = 10;
  type AllSort = 'name' | 'rating' | 'cooked' | 'created';
@@ -47,39 +42,9 @@
  let allChips: HTMLElement | undefined = $state();
  let allObserver: IntersectionObserver | null = null;
  type SearchSnapshot = {
    query: string;
    hits: SearchHit[];
    webHits: WebHit[];
    searchedFor: string | null;
    webError: string | null;
    localExhausted: boolean;
    webPageno: number;
    webExhausted: boolean;
  };
  export const snapshot: Snapshot<SearchSnapshot> = {
-    capture: () => ({
+    capture: () => store.captureSnapshot(),
-      query,
+    restore: (s) => store.restoreSnapshot(s)
      hits,
      webHits,
      searchedFor,
      webError,
      localExhausted,
      webPageno,
      webExhausted
    }),
    restore: (v) => {
      query = v.query;
      hits = v.hits;
      webHits = v.webHits;
      searchedFor = v.searchedFor;
      webError = v.webError;
      localExhausted = v.localExhausted;
      webPageno = v.webPageno;
      webExhausted = v.webExhausted;
      skipNextSearch = true;
    }
  };
  async function loadRecent() {
@@ -152,7 +117,7 @@
    // Restore query from URL so history.back() from preview/recipe
    // brings the user back to the same search results.
    const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
-    if (urlQ) query = urlQ;
+    if (urlQ) store.query = urlQ;
    void loadRecent();
    void searchFilterStore.load();
    const saved = localStorage.getItem('kochwas.allSort');
@@ -188,14 +153,7 @@
  $effect(() => {
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    searchFilterStore.active;
-    const q = query.trim();
+    store.reSearch();
    if (!q || q.length <= 3) return;
    if (debounceTimer) clearTimeout(debounceTimer);
    searching = true;
    webHits = [];
    webSearching = false;
    webError = null;
    debounceTimer = setTimeout(() => void runSearch(q), 150);
  });
  // Sync current query back into the URL as ?q=... via replaceState,
@@ -203,7 +161,7 @@
  // when the user clicks a result or otherwise navigates away.
  $effect(() => {
    if (typeof window === 'undefined') return;
-    const q = query.trim();
+    const q = store.query.trim();
    const url = new URL(window.location.href);
    const current = url.searchParams.get('q') ?? '';
    if (q === current) return;
@@ -221,138 +179,17 @@
    void loadFavorites(active.id);
  });
  function filterParam(): string {
    const p = searchFilterStore.queryParam;
    return p ? `&domains=${encodeURIComponent(p)}` : '';
  }
  async function runSearch(q: string) {
    localExhausted = false;
    webPageno = 0;
    webExhausted = false;
    try {
      const res = await fetch(
        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}${filterParam()}`
      );
      const body = await res.json();
      if (query.trim() !== q) return;
      hits = body.hits;
      searchedFor = q;
      if (hits.length < LOCAL_PAGE) localExhausted = true;
      if (hits.length === 0) {
        // Gar keine lokalen Treffer → erste Web-Seite gleich laden,
        // damit der User nicht extra auf „+ weitere" klicken muss.
        webSearching = true;
        try {
          const wres = await fetch(
            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1${filterParam()}`
          );
          if (query.trim() !== q) return;
          if (!wres.ok) {
            const err = await wres.json().catch(() => ({}));
            webError = err.message ?? `HTTP ${wres.status}`;
            webExhausted = true;
          } else {
            const wbody = await wres.json();
            webHits = wbody.hits;
            webPageno = 1;
            if (wbody.hits.length === 0) webExhausted = true;
          }
        } finally {
          if (query.trim() === q) webSearching = false;
        }
      }
    } finally {
      if (query.trim() === q) searching = false;
    }
  }
  async function loadMore() {
    if (loadingMore) return;
    const q = query.trim();
    if (!q) return;
    loadingMore = true;
    try {
      if (!localExhausted) {
        // Noch mehr lokale Treffer holen.
        const res = await fetch(
          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}&offset=${hits.length}${filterParam()}`
        );
        const body = await res.json();
        if (query.trim() !== q) return;
        const more = body.hits as SearchHit[];
        const seen = new Set(hits.map((h) => h.id));
        const deduped = more.filter((h) => !seen.has(h.id));
        hits = [...hits, ...deduped];
        if (more.length < LOCAL_PAGE) localExhausted = true;
      } else if (!webExhausted) {
        // Lokale erschöpft → auf Web umschalten / weiterblättern.
        const nextPage = webPageno + 1;
        webSearching = webHits.length === 0;
        try {
          const wres = await fetch(
            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${filterParam()}`
          );
          if (query.trim() !== q) return;
          if (!wres.ok) {
            const err = await wres.json().catch(() => ({}));
            webError = err.message ?? `HTTP ${wres.status}`;
            webExhausted = true;
            return;
          }
          const wbody = await wres.json();
          const more = wbody.hits as WebHit[];
          const seen = new Set(webHits.map((h) => h.url));
          const deduped = more.filter((h) => !seen.has(h.url));
          if (deduped.length === 0) {
            webExhausted = true;
          } else {
            webHits = [...webHits, ...deduped];
            webPageno = nextPage;
          }
        } finally {
          if (query.trim() === q) webSearching = false;
        }
      }
    } finally {
      loadingMore = false;
    }
  }
  $effect(() => {
-    const q = query.trim();
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    if (debounceTimer) clearTimeout(debounceTimer);
+    store.query; // register reactive dep
-    if (skipNextSearch) {
+    store.runDebounced();
      // Snapshot-Restore hat hits/webHits/searchedFor wiederhergestellt —
      // nicht erneut fetchen.
      skipNextSearch = false;
      return;
    }
    if (q.length <= 3) {
      hits = [];
      webHits = [];
      searchedFor = null;
      searching = false;
      webSearching = false;
      webError = null;
      return;
    }
    searching = true;
    webHits = [];
    webSearching = false;
    webError = null;
    debounceTimer = setTimeout(() => {
      void runSearch(q);
    }, 300);
  });
  function submit(e: SubmitEvent) {
    e.preventDefault();
-    const q = query.trim();
+    const q = store.query.trim();
    if (q.length <= 3) return;
-    if (debounceTimer) clearTimeout(debounceTimer);
+    void store.runSearch(q);
    searching = true;
    void runSearch(q);
  }
  async function dismissFromRecent(recipeId: number, e: MouseEvent) {
@@ -367,7 +204,7 @@
    });
  }
-  const activeSearch = $derived(query.trim().length > 3);
+  const activeSearch = $derived(store.query.trim().length > 3);
 </script>
 <section class="hero">
@@ -378,7 +215,7 @@
      <SearchFilter inline />
      <input
        type="search"
-        bind:value={query}
+        bind:value={store.query}
        placeholder="Rezept suchen…"
        autocomplete="off"
        inputmode="search"
@@ -390,12 +227,12 @@
 {#if activeSearch}
  <section class="results">
-    {#if searching && hits.length === 0 && webHits.length === 0}
+    {#if store.searching && store.hits.length === 0 && store.webHits.length === 0}
      <SearchLoader scope="local" />
    {:else}
-      {#if hits.length > 0}
+      {#if store.hits.length > 0}
        <ul class="cards">
-          {#each hits as r (r.id)}
+          {#each store.hits as r (r.id)}
            <li>
              <a href={`/recipes/${r.id}`} class="card">
                {#if r.image_path}
@@ -413,20 +250,20 @@
            </li>
          {/each}
        </ul>
-      {:else if searchedFor === query.trim() && !webSearching && webHits.length === 0 && !webError}
+      {:else if store.searchedFor === store.query.trim() && !store.webSearching && store.webHits.length === 0 && !store.webError}
-        <p class="muted no-local-msg">Keine lokalen Rezepte für „{searchedFor}".</p>
+        <p class="muted no-local-msg">Keine lokalen Rezepte für „{store.searchedFor}".</p>
      {/if}
-      {#if webHits.length > 0}
+      {#if store.webHits.length > 0}
-        {#if hits.length > 0}
+        {#if store.hits.length > 0}
          <h3 class="sep">Aus dem Internet</h3>
-        {:else if searchedFor === query.trim()}
+        {:else if store.searchedFor === store.query.trim()}
          <p class="muted no-local-msg">
-            Keine lokalen Rezepte für „{searchedFor}" — Ergebnisse aus dem Internet:
+            Keine lokalen Rezepte für „{store.searchedFor}" — Ergebnisse aus dem Internet:
          </p>
        {/if}
        <ul class="cards">
-          {#each webHits as w (w.url)}
+          {#each store.webHits as w (w.url)}
            <li>
              <a class="card" href={`/preview?url=${encodeURIComponent(w.url)}`}>
                {#if w.thumbnail}
@@ -444,16 +281,16 @@
        </ul>
      {/if}
-      {#if webSearching}
+      {#if store.webSearching}
        <SearchLoader scope="web" />
-      {:else if webError && webHits.length === 0}
+      {:else if store.webError && store.webHits.length === 0}
-        <p class="error">Internet-Suche zurzeit nicht möglich: {webError}</p>
+        <p class="error">Internet-Suche zurzeit nicht möglich: {store.webError}</p>
      {/if}
-      {#if searchedFor === query.trim() && !(localExhausted && webExhausted) && !(searching && hits.length === 0)}
+      {#if store.searchedFor === store.query.trim() && !(store.localExhausted && store.webExhausted) && !(store.searching && store.hits.length === 0)}
        <div class="more-cta">
-          <button class="more-btn" onclick={loadMore} disabled={loadingMore || webSearching}>
+          <button class="more-btn" onclick={() => store.loadMore()} disabled={store.loadingMore || store.webSearching}>
-            {loadingMore || webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
+            {store.loadingMore || store.webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
          </button>
        </div>
      {/if}
--- a/tests/unit/search-store.test.ts
+++ b/tests/unit/search-store.test.ts
@@ -0,0 +1,264 @@
 // @vitest-environment jsdom
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { SearchStore, type SearchSnapshot } from '../../src/lib/client/search.svelte';
 type FetchMock = ReturnType<typeof vi.fn>;
 function mockFetch(responses: Array<{ ok?: boolean; status?: number; body: unknown }>): FetchMock {
  const calls = [...responses];
  return vi.fn(async () => {
    const r = calls.shift();
    if (!r) throw new Error('fetch called more times than expected');
    return {
      ok: r.ok ?? true,
      status: r.status ?? 200,
      json: async () => r.body
    } as Response;
  });
 }
 describe('SearchStore', () => {
  beforeEach(() => {
    vi.useRealTimers();
  });
  it('keeps results empty while query is <= 3 chars (debounced)', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
    store.query = 'abc';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(100);
    expect(store.searching).toBe(false);
    expect(fetchImpl).not.toHaveBeenCalled();
  });
  it('fires local search after debounce when query > 3 chars', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [{ id: 1, title: 'Pasta', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50, pageSize: 30 });
    store.query = 'pasta';
    store.runDebounced();
    expect(store.searching).toBe(true);
    await vi.advanceTimersByTimeAsync(100);
    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
    expect(fetchImpl.mock.calls[0][0]).toMatch(/\/api\/recipes\/search\?q=pasta&limit=30/);
    expect(store.hits).toHaveLength(1);
    expect(store.searchedFor).toBe('pasta');
    expect(store.localExhausted).toBe(true);
  });
  it('falls back to web search when local returns zero hits', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { body: { hits: [{ url: 'https://chefkoch.de/x', title: 'Foo', domain: 'chefkoch.de', snippet: null, thumbnail: null }] } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
    store.query = 'pizza';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(100);
    await vi.waitFor(() => expect(store.webHits).toHaveLength(1));
    expect(fetchImpl).toHaveBeenCalledTimes(2);
    expect(fetchImpl.mock.calls[1][0]).toMatch(/\/api\/recipes\/search\/web\?q=pizza&pageno=1/);
    expect(store.webPageno).toBe(1);
  });
  it('race-guard: stale fetch response discarded when query was cleared/changed', async () => {
    vi.useFakeTimers();
    let resolveFetch!: (v: Response) => void;
    const fetchImpl = vi.fn(
      () =>
        new Promise<Response>((resolve) => {
          resolveFetch = resolve;
        })
    );
    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
    store.query = 'stale-query';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    expect(fetchImpl).toHaveBeenCalledTimes(1);
    // User keeps typing BEFORE the response arrives — race-guard should kick in
    // when the fetch finally resolves.
    store.query = 'different';
    resolveFetch({
      ok: true,
      status: 200,
      json: async () => ({
        hits: [
          {
            id: 99,
            title: 'Stale',
            description: null,
            image_path: null,
            source_domain: null,
            avg_stars: null,
            last_cooked_at: null
          }
        ]
      })
    } as Response);
    // Flush microtasks so the awaited response + race-guard run.
    await vi.runOnlyPendingTimersAsync();
    await Promise.resolve();
    await Promise.resolve();
    expect(store.hits).toEqual([]);
    expect(store.searchedFor).toBeNull();
  });
  it('loadMore: drains local first (offset pagination)', async () => {
    vi.useFakeTimers();
    const page1 = Array.from({ length: 30 }, (_, i) => ({ id: i, title: `r${i}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
    const page2 = Array.from({ length: 5 }, (_, i) => ({ id: i + 30, title: `r${i + 30}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
    const fetchImpl = mockFetch([
      { body: { hits: page1 } },
      { body: { hits: page2 } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
    store.query = 'meal';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(store.hits).toHaveLength(30));
    expect(store.localExhausted).toBe(false);
    await store.loadMore();
    expect(store.hits).toHaveLength(35);
    expect(fetchImpl.mock.calls[1][0]).toMatch(/offset=30/);
    expect(store.localExhausted).toBe(true);
  });
  it('loadMore: switches to web pagination after local exhausted', async () => {
    vi.useFakeTimers();
    const local = [{ id: 1, title: 'local', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }];
    const webP1 = [{ url: 'https://a.com', title: 'A', domain: 'a.com', snippet: null, thumbnail: null }];
    const webP2 = [{ url: 'https://b.com', title: 'B', domain: 'b.com', snippet: null, thumbnail: null }];
    const fetchImpl = mockFetch([
      { body: { hits: local } },
      { body: { hits: webP1 } },
      { body: { hits: webP2 } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
    store.query = 'soup';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
    expect(store.localExhausted).toBe(true);
    await store.loadMore();
    expect(store.webHits).toHaveLength(1);
    await store.loadMore();
    expect(store.webHits).toHaveLength(2);
    expect(store.webPageno).toBe(2);
  });
  it('web search error sets webError and marks webExhausted', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { ok: false, status: 502, body: { message: 'SearXNG unreachable' } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
    store.query = 'anything';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(store.webError).toBe('SearXNG unreachable'));
    expect(store.webExhausted).toBe(true);
  });
  it('reset(): clears query, results, and pending debounce', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([]);
    const store = new SearchStore({ fetchImpl, debounceMs: 100 });
    store.query = 'foobar';
    store.runDebounced();
    store.reset();
    await vi.advanceTimersByTimeAsync(200);
    expect(store.query).toBe('');
    expect(store.hits).toEqual([]);
    expect(fetchImpl).not.toHaveBeenCalled();
  });
  it('captureSnapshot / restoreSnapshot: round-trips without re-fetching', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([]);
    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
    const snap: SearchSnapshot = {
      query: 'lasagne',
      hits: [{ id: 7, title: 'Lasagne', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }],
      webHits: [],
      searchedFor: 'lasagne',
      webError: null,
      localExhausted: true,
      webPageno: 0,
      webExhausted: false
    };
    store.restoreSnapshot(snap);
    expect(store.query).toBe('lasagne');
    expect(store.hits).toHaveLength(1);
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(100);
    expect(fetchImpl).not.toHaveBeenCalled();
    const round = store.captureSnapshot();
    expect(round).toEqual(snap);
  });
  it('filterParam option: gets appended to both local and web requests', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { body: { hits: [] } }
    ]);
    const store = new SearchStore({
      fetchImpl,
      debounceMs: 10,
      filterParam: () => '&domains=chefkoch.de'
    });
    store.query = 'curry';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalledTimes(2));
    expect(fetchImpl.mock.calls[0][0]).toMatch(/&domains=chefkoch\.de/);
    expect(fetchImpl.mock.calls[1][0]).toMatch(/&domains=chefkoch\.de/);
  });
  it('runSearch(q) cancels pending debounce to avoid double-fetch', async () => {
    vi.useFakeTimers();
    const fetchImpl = mockFetch([
      { body: { hits: [{ id: 1, title: 'immediate', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
    ]);
    const store = new SearchStore({ fetchImpl, debounceMs: 300 });
    store.query = 'meal';
    store.runDebounced(); // schedules the 300ms timer
    // Before the timer fires, call runSearch immediately (e.g. form submit).
    await store.runSearch('meal');
    expect(fetchImpl).toHaveBeenCalledTimes(1);
    // Now advance past the original debounce — timer must not still fire.
    await vi.advanceTimersByTimeAsync(400);
    expect(fetchImpl).toHaveBeenCalledTimes(1);
  });
  it('reSearch: immediate re-run with current query on filter change', async () => {
    vi.useFakeTimers();
    let filter = '';
    const fetchImpl = mockFetch([
      { body: { hits: [] } },
      { body: { hits: [] } },
      { body: { hits: [{ id: 1, title: 'filtered', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
    ]);
    const store = new SearchStore({
      fetchImpl,
      debounceMs: 10,
      filterDebounceMs: 5,
      filterParam: () => filter
    });
    store.query = 'broth';
    store.runDebounced();
    await vi.advanceTimersByTimeAsync(15);
    filter = '&domains=chefkoch.de';
    store.reSearch();
    await vi.advanceTimersByTimeAsync(10);
    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
    const last = fetchImpl.mock.calls.at(-1)?.[0] as string;
    expect(last).toMatch(/&domains=chefkoch\.de/);
  });
 });
Author	SHA1	Message	Date
hsiegeln	30a409fd16	fix(e2e): serviceWorkers=block behebt Chromium-Crash-Cascade All checks were successful Build & Publish Docker Image / build-and-push (push) Successful in 1m20s Details Die Remote-Suite hatte `serviceWorkers: allow` gesetzt, jeder Test registriert einen frischen SW im neuen Context. Nach 20-30 Specs akkumuliert das im Single-Worker-Run genug Browser-State, dass Chromium mitten in der Suite crasht — alle folgenden Tests fallen dann mit "browser.newContext closed" als Cascade. 'block' entfernt den SW komplett. Diese Suite testet nur Live-API- Verhalten gegen den Server, keine PWA-Features (dafuer ist offline.spec.ts lokal zustaendig). Full-Run jetzt stabil 42/42, Laufzeit zusaetzlich ~3s schneller. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 14:09:32 +02:00
hsiegeln	504fbb6cc6	refactor(view): TimeDisplay als eigenstaendige Component All checks were successful Build & Publish Docker Image / build-and-push (push) Successful in 1m21s Details timeSummary-Formatierung in eine wiederverwendbare Component gezogen. RecipeView liefert nur noch die drei Werte — zukuenftige Call-Sites (Preview, Hover-Cards) koennen dieselbe Logik reusen. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:50:46 +02:00
hsiegeln	d50841c5a6	refactor(editor): StepList als eigenstaendige Component Zubereitungs-Liste mit Add + Remove als Sub-Component. Parent steuert nur noch den Wrapper und reicht steps + die zwei Callbacks rein. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:45:56 +02:00
hsiegeln	defbb5e24d	refactor(editor): IngredientRow + shared types IngredientRow rendert eine einzelne editierbare Zutat-Zeile. DraftIng und DraftStep sind jetzt in recipe-editor-types.ts, damit Parent und Sub-Components auf dieselbe Form referenzieren. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:40:10 +02:00
hsiegeln	c43b1dca87	refactor(editor): ImageUploadBox als eigenstaendige Component Isoliert den Bild-Upload-Flow (File-Input, Preview, Entfernen-Dialog) aus dem RecipeEditor. Parent haelt nur noch den <section>-Wrapper und reicht recipe.id + image_path rein, kriegt Aenderungen per onchange callback zurueck. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:33:26 +02:00
hsiegeln	015cb432fb	docs(plans): Editor-Split Implementierungsplan (Tier 4 Item B) 5-Task-Plan fuer 4 Sub-Components: ImageUploadBox, IngredientRow, StepList, TimeDisplay. Parent-owned state bleibt im Parent, Sub- Components rendern bare Content damit Parent-Scoped-CSS greift. Keine Component-Unit-Tests (etablierter Codebase-Stil), Manual- Smoke + existierende e2e-Specs decken Regression. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:28:30 +02:00
hsiegeln	f273942286	Merge search-state-store — Tier 2 Post-Review-Roadmap All checks were successful Build & Publish Docker Image / build-and-push (push) Successful in 30s Details SearchStore extrahiert aus +page.svelte (808→645) und +layout.svelte (681→569). 12 neue Unit-Tests (196 total), 40/42 E2E grün (1 Flake, 1 Skip). Keine Regression in UAT auf kochwas-dev.	2026-04-19 13:18:04 +02:00
hsiegeln	c45ef2a613	fix(search): runSearch bricht pending Debounce ab All checks were successful Build & Publish Docker Image / build-and-push (push) Successful in 1m20s Details Enter waehrend Debounce-Fenster feuerte bislang eine zweite Fetch fuer dieselbe Query. Race-Guard greift nicht, weil q identisch ist. runSearch clearTimeout am Anfang behebt's, neuer Unit-Test sichert es. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:03:42 +02:00
hsiegeln	e7067971a5	refactor(home): Live-Search auf SearchStore migriert Entfernt die duplizierten $state-Felder, runSearch, loadMore und beide Debounce-Effekte. URL-Sync, Snapshot und Filter-Re-Search bleiben hier — delegieren aber an den Store. All-Recipes-Infinite- Scroll unberuehrt (separate UI-Concern). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:57:58 +02:00
hsiegeln	0ca42f3329	refactor(layout): Header-Dropdown nutzt SearchStore Ersetzt die 10 lokalen $state-Felder, den Debounce-$effect und die lokalen Search-Funktionen durch eine SearchStore-Instanz. Nav-Open- Toggle, Click-outside und Menu-State bleiben lokal — UI-Concerns. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:51:11 +02:00
hsiegeln	4b17f19038	docs(plans): Plan-Doc auf runDebounced() ohne Parameter angleichen Consumer-Patterns (Task 3/4) aktualisiert: $effect liest store.query explizit und ruft runDebounced() parameterlos — matcht die live Impl nach Commit `4edddc3`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:48:50 +02:00
hsiegeln	4edddc38e3	refactor(search): runDebounced ohne missweisenden Parameter Der _q-Parameter wurde nie benutzt — Consumer sollen stattdessen store.query im \$effect lesen, dann runDebounced() callen. Weniger Footgun, explizitere Call-Site. Tests-Rename: "mid-flight" → "cleared/changed", beschreibt was der Test tatsaechlich absichert. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:47:40 +02:00
hsiegeln	fc47c78397	fix(search): Race-Guard-Test korrekt auf in-flight abzielen Der vorherige Test setzte query NACH dem Fetch-Abschluss und erzwang dafuer einen setter-Side-Effect, der bei normalem Tippen die Treffer waehrend des Debounce-Fensters fuer 300ms leer geblitzt haette. Jetzt: echter Race-Test mit manuell aufloesbarem fetch. Setter-Nebenwirkung entfernt, query ist wieder plain \$state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:41:43 +02:00
hsiegeln	58ce19c160	feat(search): SearchStore fuer Live-Search mit Web-Fallback Extrahiert die duplizierte Such-Logik aus +page.svelte und +layout.svelte in eine gemeinsame Klasse. Pure Datenschicht mit injizierbarem fetch — UI-Concerns (URL-Sync, Dropdown, Snapshot) bleiben in den Komponenten. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:38:33 +02:00
hsiegeln	7fd90643c5	docs(plans): Search-State-Store Implementierungsplan 6-Task-Plan fuer Tier 2 der Post-Review-Roadmap. Extrahiert die duplizierte Such-Logik aus +page.svelte und +layout.svelte in eine gemeinsame SearchStore-Klasse mit TDD (12 Unit-Tests), Header- Dropdown-Migration vor Home-Migration, und UAT-Smoke. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:32:50 +02:00