Merge cleanup-batch-post-review — Tier 1 + 2 UAT-Fixes

Sechs atomare Commits aus der Post-Review-Roadmap:
- I: RecipeEditor form-lokale Snapshots via untrack() (10 svelte-check
  WARNINGs weg)
- H: Bild-Upload/Delete auf asyncFetch Wrapper
- F: --pill-radius CSS-Variable (15 Sites dedupliziert)
- G: requireProfile(message?) mit optionalem Parameter
- Preview-Guard wenn ?url= fehlt (UAT-Finding)
- Kommentar-Delete-Button fuer eigene Kommentare (UAT-Finding)

Alles 184/184 Tests gruen, svelte-check 0 Warnings, UAT auf
kochwas-dev durchgeklickt.

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

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;
 }

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;

src/lib/components/RecipeEditor.svelte

@@ -1,7 +1,9 @@
 <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';
+  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
   import { requireOnline } from '$lib/client/require-online';
 
   type Props = {
@@ -25,7 +27,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);
 
@@ -47,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);
@@ -79,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 {
@@ -94,12 +88,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 +106,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() {

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;
   }

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;

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 {

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;

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;

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;

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 {

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() {

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;
   }

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
@@ -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;

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'
@@ -185,7 +182,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;