From c43b1dca87f3f2576d46c6dab993157c35b1f836 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 13:33:26 +0200
Subject: [PATCH] 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>
---
 src/lib/components/ImageUploadBox.svelte | 190 +++++++++++++++++++++++
 src/lib/components/RecipeEditor.svelte   | 177 +--------------------
 2 files changed, 198 insertions(+), 169 deletions(-)
 create mode 100644 src/lib/components/ImageUploadBox.svelte

diff --git a/src/lib/components/ImageUploadBox.svelte b/src/lib/components/ImageUploadBox.svelte
new file mode 100644
index 0000000..3e66872
--- /dev/null
+++ 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>
diff --git a/src/lib/components/RecipeEditor.svelte b/src/lib/components/RecipeEditor.svelte
index cc12717..7fa9977 100644
--- a/src/lib/components/RecipeEditor.svelte
+++ b/src/lib/components/RecipeEditor.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
+  import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
   import type { Recipe, Ingredient, Step } from '$lib/types';
-  import { confirmAction } from '$lib/client/confirm.svelte';
-  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
-  import { requireOnline } from '$lib/client/require-online';
+  import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
 
   type Props = {
     recipe: Recipe;
@@ -27,67 +25,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));
@@ -189,50 +126,13 @@
 </script>
 
 <div class="editor">
-  <section class="block image-block">
+  <section class="block">
     <h2>Bild</h2>
-    <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>
+    <ImageUploadBox
+      recipeId={recipe.id!}
+      imagePath={recipe.image_path}
+      onchange={(p) => onimagechange?.(p)}
+    />
   </section>
 
   <div class="meta">
@@ -396,67 +296,6 @@
     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;