From 7c0fb27b52c9c4c10dee7ba8f27ae40dffe3be39 Mon Sep 17 00:00:00 2001
From: Hendrik <hsiegeln@gmx.net>
Date: Fri, 17 Apr 2026 15:47:28 +0200
Subject: [PATCH] fix(ui): make preview error more actionable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Explains that the page was likely a forum/listing, not a recipe, and
offers 'Zurück zur Trefferliste' plus 'Seite im Browser öffnen' as escape hatches.

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

diff --git a/src/routes/preview/+page.svelte b/src/routes/preview/+page.svelte
index 557cfa8..bb32fac 100644
--- a/src/routes/preview/+page.svelte
+++ b/src/routes/preview/+page.svelte
@@ -57,11 +57,20 @@
   <p class="muted">Vorschau wird geladen…</p>
 {:else if errored}
   <section class="error-box">
-    <h2>Vorschau nicht möglich</h2>
-    <p>{errored}</p>
-    <p class="hint">
-      <button type="button" class="link" onclick={() => history.back()}>← Zurück</button>
+    <h2>Diese Seite enthält kein Rezept</h2>
+    <p class="detail">{errored}</p>
+    <p class="explain">
+      Wahrscheinlich hast du eine Forum- oder Übersichtsseite erwischt, kein einzelnes
+      Rezept. Geh zurück und wähle einen anderen Treffer.
     </p>
+    <div class="actions">
+      <button type="button" class="back-btn" onclick={() => history.back()}>
+        ← Zurück zur Trefferliste
+      </button>
+      <a class="src-link" href={targetUrl} target="_blank" rel="noopener">
+        Seite im Browser öffnen ↗
+      </a>
+    </div>
   </section>
 {:else if recipe}
   <div class="banner">
@@ -87,25 +96,57 @@
     margin: 3rem 0;
   }
   .error-box {
-    text-align: center;
-    padding: 2rem 1rem;
-    background: #fdf3f3;
-    border: 1px solid #f1b4b4;
+    padding: 1.5rem 1.25rem;
+    background: #fff6d7;
+    border: 1px solid #e6d48a;
     border-radius: 12px;
     margin-top: 1rem;
   }
   .error-box h2 {
-    color: #c53030;
+    color: #6d5400;
     margin: 0 0 0.5rem;
+    font-size: 1.15rem;
   }
-  .link {
-    background: none;
+  .detail {
+    color: #6d5400;
+    font-family: monospace;
+    font-size: 0.85rem;
+    background: rgba(255, 255, 255, 0.55);
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    margin: 0 0 0.75rem;
+  }
+  .explain {
+    color: #5c4800;
+    line-height: 1.45;
+    margin: 0 0 1rem;
+  }
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .back-btn {
+    padding: 0.7rem 1rem;
+    min-height: 44px;
+    background: #2b6a3d;
+    color: white;
     border: 0;
-    color: #666;
+    border-radius: 10px;
     cursor: pointer;
-    padding: 0;
-    font: inherit;
-    text-decoration: underline;
+    font-size: 0.95rem;
+  }
+  .src-link {
+    padding: 0.7rem 1rem;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    background: white;
+    border: 1px solid #cfd9d1;
+    border-radius: 10px;
+    text-decoration: none;
+    color: #444;
+    font-size: 0.95rem;
   }
   .banner {
     display: flex;