From 195d1ddbc68c840421f7561a51c49a187b1f4e09 Mon Sep 17 00:00:00 2001
From: Nils-Johan Gynther <nils-johan.gynther@neoleaf.se>
Date: Thu, 16 Apr 2026 18:24:44 +0200
Subject: [PATCH] feat: add support for prefilled image URL in recipe creation
 and display

---
 frontend/app/recipes/create/page.tsx          |  3 +++
 .../app/recipes/write/WriteRecipePage.tsx     | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/frontend/app/recipes/create/page.tsx b/frontend/app/recipes/create/page.tsx
index bd8a7667..7c4b3e7e 100644
--- a/frontend/app/recipes/create/page.tsx
+++ b/frontend/app/recipes/create/page.tsx
@@ -44,6 +44,9 @@ export default function CreateRecipePage() {
         // Omdirigera till /recipes/write med förifylld Markdown
         // Vi använder sessionStorage för att passa data mellan sidor
         sessionStorage.setItem('prefilled_markdown', data.markdown);
+        if (data.imageUrl) {
+          sessionStorage.setItem('prefilled_image_url', data.imageUrl);
+        }
         router.push('/recipes/write');
       }
     } catch (err) {
diff --git a/frontend/app/recipes/write/WriteRecipePage.tsx b/frontend/app/recipes/write/WriteRecipePage.tsx
index 257b8adc..9c0bd4d3 100644
--- a/frontend/app/recipes/write/WriteRecipePage.tsx
+++ b/frontend/app/recipes/write/WriteRecipePage.tsx
@@ -58,6 +58,11 @@ export default function WriteRecipePage() {
 
     // Kontrollera om det finns förifylld Markdown från snabbimport
     const prefilledMarkdown = sessionStorage.getItem('prefilled_markdown');
+    const prefilledImageUrl = sessionStorage.getItem('prefilled_image_url');
+    if (prefilledImageUrl) {
+      setImageUrl(prefilledImageUrl);
+      sessionStorage.removeItem('prefilled_image_url');
+    }
     if (prefilledMarkdown) {
       setMarkdown(prefilledMarkdown);
       sessionStorage.removeItem('prefilled_markdown');
@@ -174,6 +179,7 @@ export default function WriteRecipePage() {
       name: editedName,
       description: editedDescription || undefined,
       instructions: editedInstructions || undefined,
+      imageUrl: imageUrl || undefined,
       ingredients: validIngredients.map((ing) => ({
         productId: ing.selectedProductId,
         quantity: Number(ing.editedQuantity),
@@ -305,6 +311,24 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
             <div style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
               <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
 
+              {imageUrl && (
+                <div>
+                  <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Bild</label>
+                  <img
+                    src={imageUrl}
+                    alt="Receptbild"
+                    style={{ width: '100%', maxHeight: '220px', objectFit: 'cover', borderRadius: '6px', border: '1px solid #ddd' }}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setImageUrl(null)}
+                    style={{ marginTop: '0.4rem', fontSize: '0.8rem', color: '#dc2626', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
+                  >
+                    Ta bort bild
+                  </button>
+                </div>
+              )}
+
               <div>
                 <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Receptnamn *</label>
                 <input