From 5a1ffee3bb2034c7e6ce244984925010631cc1e6 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 11:38:35 +0200
Subject: [PATCH 1/6] refactor(editor): untrack() fuer form-lokale Snapshots
 (Item I)

Alle 10 pre-existing svelte-check WARNINGs ("state_referenced_locally")
in RecipeEditor.svelte und recipes/[id]/+page.svelte addressiert.

Die betroffenen `let foo = $state(recipe.bar)`-Pattern sind
intentional Snapshots: der Editor soll User-Edits behalten und nicht
von prop-Updates ueberschrieben werden. untrack() macht die Intent
explizit und silenced die Warnung sauber statt sie unter den Teppich
zu kehren.

Scope: imagePath, title, description, servings, prepMin, cookMin,
totalMin, ingredients, steps (RecipeEditor) + recipeState
(recipes/[id]/+page).

Gate: svelte-check 0 Warnings (war 10), Tests 184/184.

Refs docs/superpowers/plans/2026-04-19-post-review-roadmap.md Item I.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeEditor.svelte | 33 +++++++++++++++-----------
 src/routes/recipes/[id]/+page.svelte   |  4 ++--
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/RecipeEditor.svelte b/src/lib/components/RecipeEditor.svelte
index 9aee916..e1eecc8 100644
--- a/src/lib/components/RecipeEditor.svelte
+++ b/src/lib/components/RecipeEditor.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
   import type { Recipe, Ingredient, Step } from '$lib/types';
   import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
@@ -25,7 +26,7 @@
 
   let { recipe, saving = false, onsave, oncancel, onimagechange }: Props = $props();
 
-  let imagePath = $state<string | null>(recipe.image_path);
+  let imagePath = $state<string | null>(untrack(() => recipe.image_path));
   let uploading = $state(false);
   let fileInput: HTMLInputElement | null = $state(null);
 
@@ -94,12 +95,14 @@
     }
   }
 
-  let title = $state(recipe.title);
-  let description = $state(recipe.description ?? '');
-  let servings = $state<number | ''>(recipe.servings_default ?? '');
-  let prepMin = $state<number | ''>(recipe.prep_time_min ?? '');
-  let cookMin = $state<number | ''>(recipe.cook_time_min ?? '');
-  let totalMin = $state<number | ''>(recipe.total_time_min ?? '');
+  // Form-lokaler Zustand: Initialwerte aus dem Prop snapshotten (untrack),
+  // damit User-Edits nicht von prop-Updates ueberschrieben werden.
+  let title = $state(untrack(() => recipe.title));
+  let description = $state(untrack(() => recipe.description ?? ''));
+  let servings = $state<number | ''>(untrack(() => recipe.servings_default ?? ''));
+  let prepMin = $state<number | ''>(untrack(() => recipe.prep_time_min ?? ''));
+  let cookMin = $state<number | ''>(untrack(() => recipe.cook_time_min ?? ''));
+  let totalMin = $state<number | ''>(untrack(() => recipe.total_time_min ?? ''));
 
   type DraftIng = {
     qty: string;
@@ -110,15 +113,17 @@
   type DraftStep = { text: string };
 
   let ingredients = $state<DraftIng[]>(
-    recipe.ingredients.map((i) => ({
-      qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
-      unit: i.unit ?? '',
-      name: i.name,
-      note: i.note ?? ''
-    }))
+    untrack(() =>
+      recipe.ingredients.map((i) => ({
+        qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
+        unit: i.unit ?? '',
+        name: i.name,
+        note: i.note ?? ''
+      }))
+    )
   );
   let steps = $state<DraftStep[]>(
-    recipe.steps.map((s) => ({ text: s.text }))
+    untrack(() => recipe.steps.map((s) => ({ text: s.text })))
   );
 
   function addIngredient() {
diff --git a/src/routes/recipes/[id]/+page.svelte b/src/routes/recipes/[id]/+page.svelte
index 7c8c15b..e08a89b 100644
--- a/src/routes/recipes/[id]/+page.svelte
+++ b/src/routes/recipes/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy, tick } from 'svelte';
+  import { onMount, onDestroy, tick, untrack } from 'svelte';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import {
@@ -41,7 +41,7 @@
 
   let editMode = $state(false);
   let saving = $state(false);
-  let recipeState = $state(data.recipe);
+  let recipeState = $state(untrack(() => data.recipe));
 
   // Einmalige Pulse-Animation beim Aktivieren (nicht beim Wieder-Abwählen).
   // Per tick()-Zwischenschritt "aus → an" erzwingen, damit die Animation

From 98a8022ddfb25b296735dda0f84eb7ddec284568 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 11:39:42 +0200
Subject: [PATCH 2/6] refactor(editor): Bild-Upload/Delete auf asyncFetch (Item
 H)

RecipeEditor war noch die letzte Stelle im UI, die das
handgeschriebene "if (!res.ok) { alertAction(...) }"-Pattern
benutzte, welches wir in review-fixes-2026-04-18 ueberall sonst
durch asyncFetch() ersetzt hatten.

Netto: -14 Zeilen, konsistenter Fehlermessage-Fallback (body.message
> res.status), eine Import-Zeile weniger (alertAction raus, asyncFetch
rein).

Gate: svelte-check clean, 184/184 Tests, Upload/Delete-Flow per
Hand zu testen beim naechsten Editor-Touch.

Refs docs/superpowers/plans/2026-04-19-post-review-roadmap.md Item H.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeEditor.svelte | 35 +++++++++++---------------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/RecipeEditor.svelte b/src/lib/components/RecipeEditor.svelte
index e1eecc8..cc12717 100644
--- a/src/lib/components/RecipeEditor.svelte
+++ b/src/lib/components/RecipeEditor.svelte
@@ -2,7 +2,8 @@
   import { untrack } from 'svelte';
   import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
   import type { Recipe, Ingredient, Step } from '$lib/types';
-  import { alertAction, confirmAction } from '$lib/client/confirm.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 = {
@@ -48,18 +49,12 @@
     try {
       const fd = new FormData();
       fd.append('file', file);
-      const res = await fetch(`/api/recipes/${recipe.id}/image`, {
-        method: 'POST',
-        body: fd
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        await alertAction({
-          title: 'Upload fehlgeschlagen',
-          message: body.message ?? `HTTP ${res.status}`
-        });
-        return;
-      }
+      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);
@@ -80,14 +75,12 @@
     if (!requireOnline('Das Entfernen')) return;
     uploading = true;
     try {
-      const res = await fetch(`/api/recipes/${recipe.id}/image`, { method: 'DELETE' });
-      if (!res.ok) {
-        await alertAction({
-          title: 'Entfernen fehlgeschlagen',
-          message: `HTTP ${res.status}`
-        });
-        return;
-      }
+      const res = await asyncFetch(
+        `/api/recipes/${recipe.id}/image`,
+        { method: 'DELETE' },
+        'Entfernen fehlgeschlagen'
+      );
+      if (!res) return;
       imagePath = null;
       onimagechange?.(null);
     } finally {

From 5a291a53dd0c71f86b6e9264ec5163327d86b7cb Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 11:43:19 +0200
Subject: [PATCH 3/6] refactor(ui): --pill-radius CSS-Variable (Item F)

border-radius: 999px war 15x im CSS dupliziert. Ausgelagert als
:root --pill-radius Variable im globalen :root-Block in +layout.svelte,
Call-Sites auf var(--pill-radius) umgestellt.

Bewusst NICHT angefasst (plan war "nur Werte die mehrfach vorkommen"):
- z-index: 10 Distinct Values in 14 Sites, bilden ein implizites
  Layer-System. Konsolidieren = behavior-change-Risiko ohne konkreten
  Nutzen. Wenn kuenftig einheitliche Modal-/Popover-Layer noetig,
  separate Phase.
- setTimeout(): 3 Sites, jeder mit eigener Semantik (Debounce/Print/
  Spinner). Kein DRY-Nutzen durch Extraktion.

Gate: svelte-check 0 Warnings, 184/184 Tests, Build clean, kein
sichtbarer Unterschied (einzige Aenderung: selber Wert ueber Variable).

Refs docs/superpowers/plans/2026-04-19-post-review-roadmap.md Item F.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/ProfileSwitcher.svelte | 2 +-
 src/lib/components/RecipeView.svelte      | 2 +-
 src/lib/components/SyncIndicator.svelte   | 2 +-
 src/lib/components/UpdateToast.svelte     | 6 +++---
 src/routes/+layout.svelte                 | 9 ++++++---
 src/routes/+page.svelte                   | 4 ++--
 src/routes/admin/+layout.svelte           | 2 +-
 src/routes/admin/profiles/+page.svelte    | 2 +-
 src/routes/recipes/+page.svelte           | 2 +-
 src/routes/wishlist/+page.svelte          | 2 +-
 10 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/ProfileSwitcher.svelte b/src/lib/components/ProfileSwitcher.svelte
index d68db80..9f674d6 100644
--- a/src/lib/components/ProfileSwitcher.svelte
+++ b/src/lib/components/ProfileSwitcher.svelte
@@ -99,7 +99,7 @@
     align-items: center;
     gap: 0.4rem;
     padding: 0.5rem 0.9rem;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     border: 1px solid #cfd9d1;
     background: white;
     font-size: 0.95rem;
diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte
index d4938b5..e9ef736 100644
--- a/src/lib/components/RecipeView.svelte
+++ b/src/lib/components/RecipeView.svelte
@@ -204,7 +204,7 @@
   .pill {
     padding: 0.15rem 0.55rem;
     background: #eaf4ed;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.8rem;
     color: #2b6a3d;
   }
diff --git a/src/lib/components/SyncIndicator.svelte b/src/lib/components/SyncIndicator.svelte
index e3b7354..df97167 100644
--- a/src/lib/components/SyncIndicator.svelte
+++ b/src/lib/components/SyncIndicator.svelte
@@ -77,7 +77,7 @@
     padding: 0.3rem 0.65rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #555;
     font-size: 0.78rem;
     cursor: pointer;
diff --git a/src/lib/components/UpdateToast.svelte b/src/lib/components/UpdateToast.svelte
index bcf383b..6634345 100644
--- a/src/lib/components/UpdateToast.svelte
+++ b/src/lib/components/UpdateToast.svelte
@@ -28,7 +28,7 @@
     padding: 0.6rem 0.85rem 0.6rem 1.1rem;
     background: #1a1a1a;
     color: white;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     z-index: 500;
     max-width: calc(100% - 2rem);
@@ -58,7 +58,7 @@
     background: #2b6a3d;
     color: white;
     border: 0;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.88rem;
     cursor: pointer;
     font-weight: 600;
@@ -75,7 +75,7 @@
     padding: 4px;
     display: inline-flex;
     align-items: center;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     flex-shrink: 0;
   }
   .dismiss:hover {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6450400..bf32315 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -386,6 +386,9 @@
 </main>
 
 <style>
+  :global(:root) {
+    --pill-radius: 999px;
+  }
   :global(html, body) {
     margin: 0;
     padding: 0;
@@ -429,7 +432,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     text-decoration: none;
     flex-shrink: 0;
@@ -621,7 +624,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     text-decoration: none;
     font-size: 1.15rem;
     position: relative;
@@ -636,7 +639,7 @@
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     background: #c53030;
     color: white;
     font-size: 0.7rem;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 504923e..e906e02 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -653,7 +653,7 @@
     padding: 0.4rem 0.85rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     font-size: 0.88rem;
     cursor: pointer;
@@ -760,7 +760,7 @@
     right: 0.4rem;
     width: 28px;
     height: 28px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     border: 0;
     background: rgba(255, 255, 255, 0.9);
     color: #444;
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index febb7ed..31d0377 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -42,7 +42,7 @@
     padding: 0.5rem 0.95rem 0.5rem 0.8rem;
     background: white;
     border: 1px solid #e4eae7;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     text-decoration: none;
     color: #444;
     font-size: 0.95rem;
diff --git a/src/routes/admin/profiles/+page.svelte b/src/routes/admin/profiles/+page.svelte
index b398589..528822e 100644
--- a/src/routes/admin/profiles/+page.svelte
+++ b/src/routes/admin/profiles/+page.svelte
@@ -185,7 +185,7 @@
     padding: 0.15rem 0.5rem;
     background: #eaf4ed;
     color: #2b6a3d;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.75rem;
   }
   .actions {
diff --git a/src/routes/recipes/+page.svelte b/src/routes/recipes/+page.svelte
index 35422a1..a4015d6 100644
--- a/src/routes/recipes/+page.svelte
+++ b/src/routes/recipes/+page.svelte
@@ -441,7 +441,7 @@
     padding: 0.6rem 0.9rem;
     font-size: 0.95rem;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     background: white;
     min-height: 44px;
   }
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 20d9f2b..448ef33 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -185,7 +185,7 @@
     padding: 0.4rem 0.85rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     font-size: 0.88rem;
     cursor: pointer;

From 02b9cdbc6884a49240ab7a471ee744ede7491f59 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 11:45:00 +0200
Subject: [PATCH 4/6] refactor(client): requireProfile(message?) + Wunschliste
 migriert (Item G)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Option B aus dem Roadmap-Plan. requireProfile bekommt einen optionalen
message-Parameter mit dem bisherigen Text als Default — die 5 Bestands-
Aufrufe aendern sich nicht, die Wunschliste nutzt die Custom-Message
„um mitzuwünschen" sauber ueber den Helper statt mit dupliziertem
alertAction-Block.

Netto: -3 Zeilen in wishlist/+page.svelte, eine Duplikation weniger,
Helper dokumentiert jetzt explizit den Message-Override-Use-Case.

Gate: svelte-check 0 Warnings, 184/184 Tests, Wunschliste zeigt
korrekte Message beim Klick ohne Profil.

Refs docs/superpowers/plans/2026-04-19-post-review-roadmap.md Item G.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/client/profile.svelte.ts | 12 +++++++-----
 src/routes/wishlist/+page.svelte | 17 +++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/lib/client/profile.svelte.ts b/src/lib/client/profile.svelte.ts
index d8ba289..256fc6c 100644
--- a/src/lib/client/profile.svelte.ts
+++ b/src/lib/client/profile.svelte.ts
@@ -66,12 +66,14 @@ export const profileStore = new ProfileStore();
  * Returns the active profile, or null after showing the standard
  * "kein Profil gewählt" dialog. Use as the first line of any per-profile
  * action so we don't repeat the guard at every call-site.
+ *
+ * `message` ueberschreibt den Default, wenn eine Aktion einen spezifischen
+ * Hinweis braucht (z. B. „um mitzuwünschen" auf der Wunschliste).
  */
-export async function requireProfile(): Promise<Profile | null> {
+export async function requireProfile(
+  message = 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
+): Promise<Profile | null> {
   if (profileStore.active) return profileStore.active;
-  await alertAction({
-    title: 'Kein Profil gewählt',
-    message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
-  });
+  await alertAction({ title: 'Kein Profil gewählt', message });
   return null;
 }
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 448ef33..6cea129 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { Utensils, Trash2, CookingPot } from 'lucide-svelte';
-  import { profileStore } from '$lib/client/profile.svelte';
+  import { profileStore, requireProfile } from '$lib/client/profile.svelte';
   import { wishlistStore } from '$lib/client/wishlist.svelte';
-  import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
   import { requireOnline } from '$lib/client/require-online';
   import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
 
@@ -35,15 +35,12 @@
   });
 
   async function toggleMine(entry: WishlistEntry) {
-    if (!profileStore.active) {
-      await alertAction({
-        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", um mitzuwünschen.'
-      });
-      return;
-    }
+    const profile = await requireProfile(
+      'Tippe oben rechts auf „Profil wählen", um mitzuwünschen.'
+    );
+    if (!profile) return;
     if (!requireOnline('Die Wunschlisten-Aktion')) return;
-    const profileId = profileStore.active.id;
+    const profileId = profile.id;
     if (entry.on_my_wishlist) {
       await fetch(`/api/wishlist/${entry.recipe_id}?profile_id=${profileId}`, {
         method: 'DELETE'

From c1789f902eb2c1d52c36f0ff35e78f010b898628 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 11:55:18 +0200
Subject: [PATCH 5/6] fix(preview): Guard wenn ?url=-Parameter fehlt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/preview ohne Query zeigte endlos "Vorschau wird geladen…", weil
loading initial true war und der $effect bei leerem u nichts tat.

Jetzt: beim leeren u wird errored gesetzt (mit Hinweis, dass das
der falsche Einstieg in die Route ist), so zeigt die bestehende
error-box den passenden Text an.

Im UAT 2026-04-19 aufgefallen, dort als MINOR eingeordnet.
Hier direkt mitgenommen weil 6-Zeilen-Fix.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/routes/preview/+page.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/routes/preview/+page.svelte b/src/routes/preview/+page.svelte
index 865504a..c8c3b28 100644
--- a/src/routes/preview/+page.svelte
+++ b/src/routes/preview/+page.svelte
@@ -33,7 +33,12 @@
   $effect(() => {
     const u = ($page.url.searchParams.get('url') ?? '').trim();
     targetUrl = u;
-    if (u) void load(u);
+    if (u) {
+      void load(u);
+    } else {
+      loading = false;
+      errored = 'Kein ?url=-Parameter. Suche zuerst ein Rezept und klicke auf einen Treffer.';
+    }
   });
 
   async function save() {

From e953ca7870d889735db0c96528cf49793b2c27b7 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 11:56:41 +0200
Subject: [PATCH 6/6] feat(comments): Trash-Button zum Loeschen eigener
 Kommentare
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der DELETE-Endpunkt fuer Kommentare existierte schon, hatte aber
keine UI-Exposition — Nutzer konnten ihre eigenen Kommentare nur
via API-Call loeschen. Das war beim UAT 2026-04-19 aufgefallen.

Jetzt: pro Kommentar wird nur fuer den Autor (comment.profile_id
=== profileStore.active.id) ein kleiner Trash2-Button in der
Ecke angezeigt. Mit confirmAction-Dialog, weil das Loeschen
nicht undo-bar ist.

Nutzt asyncFetch fuer den DELETE-Call — konsistent mit dem
Rest des Page-Scripts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/routes/recipes/[id]/+page.svelte | 52 ++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/routes/recipes/[id]/+page.svelte b/src/routes/recipes/[id]/+page.svelte
index e08a89b..2623ea0 100644
--- a/src/routes/recipes/[id]/+page.svelte
+++ b/src/routes/recipes/[id]/+page.svelte
@@ -194,6 +194,28 @@
     }
   }
 
+  async function deleteComment(id: number) {
+    const ok = await confirmAction({
+      title: 'Kommentar löschen?',
+      message: 'Der Eintrag verschwindet ohne Umweg.',
+      confirmLabel: 'Löschen',
+      destructive: true
+    });
+    if (!ok) return;
+    if (!requireOnline('Das Löschen')) return;
+    const res = await asyncFetch(
+      `/api/recipes/${data.recipe.id}/comments`,
+      {
+        method: 'DELETE',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ comment_id: id })
+      },
+      'Löschen fehlgeschlagen'
+    );
+    if (!res) return;
+    comments = comments.filter((c) => c.id !== id);
+  }
+
   async function deleteRecipe() {
     const ok = await confirmAction({
       title: 'Rezept löschen?',
@@ -466,6 +488,16 @@
         <div class="author">{c.author}</div>
         <div class="text">{c.text}</div>
         <div class="date">{new Date(c.created_at).toLocaleString('de-DE')}</div>
+        {#if profileStore.active?.id === c.profile_id}
+          <button
+            type="button"
+            class="comment-del"
+            aria-label="Kommentar löschen"
+            onclick={() => void deleteComment(c.id)}
+          >
+            <Trash2 size="14" />
+          </button>
+        {/if}
       </li>
     {/each}
   </ul>
@@ -673,6 +705,26 @@
     border: 1px solid #e4eae7;
     border-radius: 12px;
     padding: 0.75rem 0.9rem;
+    position: relative;
+  }
+  .comment-del {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    color: #888;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  .comment-del:hover {
+    background: #f3f5f3;
+    color: #b42626;
   }
   .comments .author {
     font-weight: 600;