fix: before/after works for compose (source fallback), hidden for text-only; add reuse result as new Studio input

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XNQ8ghPfzAfsyVYd6HgFb6

src/components/LibraryApp.tsx

@@ -53,6 +53,8 @@ export default function LibraryApp() {
     if (r.ok) notify('Alternative wird erzeugt — erscheint gleich hier.'); else notify(r.error || 'Fehler.');
     setTimeout(load, 2500);
   };
+  // Ergebnis als neue Vorlage ins Studio übernehmen und weiterbearbeiten.
+  const reuse = (id: string) => { window.location.href = `/?reuse=${id}`; };
 
   const newFolder = async () => {
     const name = prompt('Name des Ordners?'); if (!name) return;
@@ -143,8 +145,9 @@ export default function LibraryApp() {
                   {v.delivery_status === 'failed' && <span className="dbadge err">Picdrop ✕</span>}
                 </div>
                 <div className="reihe knapp">
-                  <button className="mini" onClick={() => setCompare(v)}>Vorher/Nachher</button>
+                  {v.mode !== 'generate' && <button className="mini" onClick={() => setCompare(v)}>Vorher/Nachher</button>}
                   <a className="mini" href={`/api/items/${v.id}/file?download=1`}>Laden</a>
+                  <button className="mini stark2" onClick={() => reuse(v.id)} title="Ergebnis im Studio weiterbearbeiten">Weiterbearbeiten</button>
                   <button className="mini" onClick={() => alternative(v.id)} title="Weitere Fassung erzeugen">+ Alternative</button>
                   <select className="mini-select" value={v.folder_id || ''} onChange={(e) => setFolder(v.id, e.target.value || null)}>
                     <option value="">Kein Ordner</option>
@@ -166,7 +169,7 @@ export default function LibraryApp() {
             <input type="range" min={0} max={100} defaultValue={50}
               onChange={(e) => { const o = document.getElementById('ov'); if (o) o.style.clipPath = `inset(0 0 0 ${e.target.value}%)`; }} />
           </div>
-          <div className="lupe-fuss">{compare.filename} · {compare.output_px}px — Regler: links Original, rechts Ergebnis</div>
+          <div className="lupe-fuss">{compare.filename} · {compare.output_px}px — Regler: links {compare.mode === 'compose' ? 'Vorlage' : 'Original'}, rechts Ergebnis</div>
         </div>
       )}
       {toast && <div className="toast">{toast}</div>}
@@ -208,6 +211,7 @@ function LibStyles() {
     .name{margin-top:8px;width:100%;font-size:12.5px;padding:6px 8px;font-family:var(--font-mono);border:1px solid var(--line);border-radius:3px;background:#fff;}
     .meta{font-size:11px;color:var(--soft);margin-top:5px;}
     .mini.stark{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
+    .mini.stark2{border-color:var(--accent);color:var(--accent);font-weight:600;}
     .dbadge{display:inline-block;margin-left:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--soft);padding:1px 6px;border-radius:20px;}
     .dbadge.ok{background:var(--accent-bg);color:var(--accent);}
     .dbadge.err{color:var(--err);}

src/components/StudioApp.tsx

@@ -115,6 +115,25 @@ export default function StudioApp({ recipes }: { recipes: any[] }) {
     }).catch(() => {});
   }, []);
 
+  // Ergebnis aus der Bibliothek übernehmen: ?reuse=<itemId> lädt es als Vorlage.
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const reuseId = params.get('reuse');
+    if (!reuseId) return;
+    (async () => {
+      const id = crypto.randomUUID();
+      setPics((p) => [...p, { id, src: `/api/items/${reuseId}/file?thumb=1`, name: 'weiterbearbeiten.png', uploading: true }]);
+      try {
+        const j = await fetch(`/api/items/${reuseId}/reuse`, { method: 'POST' }).then((r) => r.json());
+        setPics((p) => p.map((x) => x.id === id
+          ? { ...x, uploading: false, source_path: j.source_path, name: j.filename || x.name, error: j.error } : x));
+      } catch {
+        setPics((p) => p.map((x) => x.id === id ? { ...x, uploading: false, error: 'Konnte Bild nicht laden' } : x));
+      }
+      history.replaceState(null, '', '/');
+    })();
+  }, []);
+
   function toggleTask(id: string) {
     setTasks((t) => {
       let next = t.includes(id) ? t.filter((x) => x !== id) : [...t, id];