feat(recipes): add CreateRecipeClient component for quick recipe import

refactor(recipes): integrate Navigation component into various recipe pages

frontend/app/import/ImportTabsClient.tsx

@@ -3,7 +3,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useRef, useState, useEffect } from 'react';
-import Navigation from '../Navigation';
 import ReceiptImportClient from '../kvitto/ReceiptImportClient';
 import { parseErrorResponse } from '../../lib/error-handler';
 
@@ -14,7 +13,6 @@ type Product = { id: number; name: string; canonicalName: string | null };
 export default function ImportTabsClient({ activeTab }: { activeTab: Tab }) {
   return (
     <main style={{ padding: '1rem', maxWidth: '900px', margin: '0 auto' }}>
-      <Navigation />
       <h1 style={{ marginBottom: '1rem' }}>Importera</h1>
 
       {/* Flikar */}

frontend/app/import/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import Navigation from '../Navigation';
 import ImportTabsClient from './ImportTabsClient';
 
 type Props = {
@@ -14,5 +15,10 @@ export async function generateMetadata({ searchParams }: Props): Promise<Metadat
 export default async function ImportPage({ searchParams }: Props) {
   const { tab } = await searchParams;
   const activeTab = tab === 'recept' ? 'recept' : 'kvitto';
-  return <ImportTabsClient activeTab={activeTab} />;
+  return (
+    <>
+      <Navigation />
+      <ImportTabsClient activeTab={activeTab} />
+    </>
+  );
 }

frontend/app/recipes/create/CreateRecipeClient.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { parseErrorResponse } from '../../../lib/error-handler';
+import { useRouter } from 'next/navigation';
+
+export default function CreateRecipeClient() {
+  const router = useRouter();
+  const [quickImportUrl, setQuickImportUrl] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleQuickImport = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      const input = quickImportUrl.trim();
+      if (!input) {
+        setError('Vänligen ange en URL eller filsökväg');
+        setIsLoading(false);
+        return;
+      }
+
+      // Försök importera från URL eller fil
+      const res = await fetch('/api/quick-import-proxy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ input }),
+      });
+
+      if (!res.ok) {
+        const errorMessage = await parseErrorResponse(res);
+        setError(errorMessage || 'Importen misslyckades. Kontrollera att länken eller filsökvägen är korrekt.');
+        setIsLoading(false);
+        return;
+      }
+
+      const data = await res.json();
+      if (data.markdown) {
+        sessionStorage.setItem('prefilled_markdown', data.markdown);
+        if (data.imageUrl) {
+          sessionStorage.setItem('prefilled_image_url', data.imageUrl);
+        }
+        router.push('/recipes/write');
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Något oväntad gick fel';
+      setError(`Fel: ${message}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main style={{ padding: '1rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '1.5rem' }}>Lägg till nytt recept</h1>
+
+      {/* SNABBIMPORT-SEKTION */}
+      <div
+        style={{
+          background: '#fef3c7',
+          border: '2px solid #f59e0b',
+          borderRadius: '8px',
+          padding: '1.5rem',
+          marginBottom: '2rem',
+        }}
+      >
+        <h2 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: '#92400e' }}>
+          ⚡ Snabbimport
+        </h2>
+        <p style={{ margin: '0 0 1rem 0', color: '#92400e', fontSize: '0.9rem' }}>
+          Klistra in en ICA-receptlänk eller filsökväg för att importera direkt:
+        </p>
+
+        <form onSubmit={handleQuickImport} style={{ display: 'grid', gap: '0.75rem' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '0.5rem' }}>
+            <input
+              type="text"
+              value={quickImportUrl}
+              onChange={(e) => setQuickImportUrl(e.target.value)}
+              placeholder="https://www.ica.se/recept/... eller C:\recepter\file.pdf"
+              style={{
+                padding: '0.75rem',
+                border: '1px solid #d97706',
+                borderRadius: '4px',
+                fontSize: '0.95rem',
+                boxSizing: 'border-box',
+              }}
+              disabled={isLoading}
+            />
+            <button
+              type="submit"
+              disabled={isLoading || !quickImportUrl.trim()}
+              style={{
+                padding: '0.75rem 1.5rem',
+                background: '#f59e0b',
+                color: '#fff',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: isLoading || !quickImportUrl.trim() ? 'not-allowed' : 'pointer',
+                opacity: isLoading || !quickImportUrl.trim() ? 0.6 : 1,
+                fontSize: '0.95rem',
+                fontWeight: 600,
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {isLoading ? 'Laddar...' : '→'}
+            </button>
+          </div>
+
+          {error && (
+            <p
+              style={{
+                margin: '0.5rem 0 0 0',
+                color: '#991b1b',
+                background: '#fee2e2',
+                padding: '0.75rem',
+                borderRadius: '4px',
+                fontSize: '0.85rem',
+              }}
+            >
+              ⚠️ {error}
+            </p>
+          )}
+
+          <p style={{ margin: '0.75rem 0 0 0', color: '#92400e', fontSize: '0.8rem' }}>
+            Stöds: ICA-recept, PDF-filer
+          </p>
+        </form>
+      </div>
+
+      {/* ELLER-SEPARATOR */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1rem',
+          margin: '2rem 0',
+          color: '#999',
+        }}
+      >
+        <div style={{ flex: 1, height: '1px', background: '#ddd' }} />
+        <span style={{ fontSize: '0.9rem', fontWeight: 500 }}>eller</span>
+        <div style={{ flex: 1, height: '1px', background: '#ddd' }} />
+      </div>
+
+      {/* KLASSISKA ALTERNATIV */}
+      <p style={{ marginBottom: '2rem', color: '#666' }}>
+        Välj ett sätt att lägga till ett recept:
+      </p>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
+          gap: '1.5rem',
+        }}
+      >
+        {/* Skriv in recept */}
+        <Link
+          href="/recipes/write"
+          style={{
+            padding: '2rem',
+            border: '2px solid #0070f3',
+            borderRadius: '8px',
+            textDecoration: 'none',
+            background: 'linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%)',
+            transition: 'all 0.2s',
+            cursor: 'pointer',
+          }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
+            (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(0,112,243,0.2)';
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
+            (e.currentTarget as HTMLElement).style.boxShadow = 'none';
+          }}
+        >
+          <h2 style={{ margin: '0 0 0.5rem 0', color: '#0070f3', fontSize: '1.3rem' }}>
+            ✏️ Skriv in recept
+          </h2>
+          <p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
+            Skriv in receptet med ingredienser och instruktioner
+          </p>
+        </Link>
+
+        {/* Importera från fil/länk */}
+        <Link
+          href="/recipes/import"
+          style={{
+            padding: '2rem',
+            border: '2px solid #10b981',
+            borderRadius: '8px',
+            textDecoration: 'none',
+            background: 'linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%)',
+            transition: 'all 0.2s',
+            cursor: 'pointer',
+          }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
+            (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(16,185,129,0.2)';
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
+            (e.currentTarget as HTMLElement).style.boxShadow = 'none';
+          }}
+        >
+          <h2 style={{ margin: '0 0 0.5rem 0', color: '#10b981', fontSize: '1.3rem' }}>
+            📥 Importera från fil
+          </h2>
+          <p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
+            Ladda upp PDF, länk eller annan filtyp
+          </p>
+        </Link>
+      </div>
+    </main>
+  );
+}

frontend/app/recipes/create/page.tsx

@@ -1,226 +1,11 @@
-'use client';
-
-import Link from 'next/link';
-import { useState } from 'react';
 import Navigation from '../../Navigation';
-import { parseErrorResponse } from '../../../lib/error-handler';
+import CreateRecipeClient from './CreateRecipeClient';
-import { useRouter } from 'next/navigation';
-
-export default function CreateRecipePage() {
-  const router = useRouter();
-  const [quickImportUrl, setQuickImportUrl] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleQuickImport = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setIsLoading(true);
-
-    try {
-      const input = quickImportUrl.trim();
-      if (!input) {
-        setError('Vänligen ange en URL eller filsökväg');
-        setIsLoading(false);
-        return;
-      }
-
-      // Försök importera från URL eller fil
-      const res = await fetch('/api/quick-import-proxy', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ input }),
-      });
-
-      if (!res.ok) {
-        const errorMessage = await parseErrorResponse(res);
-        setError(errorMessage || 'Importen misslyckades. Kontrollera att länken eller filsökvägen är korrekt.');
-        setIsLoading(false);
-        return;
-      }
-
-      const data = await res.json();
-      if (data.markdown) {
-        // 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) {
-      const message = err instanceof Error ? err.message : 'Något oväntad gick fel';
-      setError(`Fel: ${message}`);
-    } finally {
-      setIsLoading(false);
-    }
-  };
 
+export default function Page() {
   return (
-    <main style={{ padding: '1rem', maxWidth: '800px', margin: '0 auto' }}>
+    <>
       <Navigation />
-      <h1 style={{ marginBottom: '1.5rem' }}>Lägg till nytt recept</h1>
+      <CreateRecipeClient />
-
+    </>
-      {/* SNABBIMPORT-SEKTION */}
-      <div
-        style={{
-          background: '#fef3c7',
-          border: '2px solid #f59e0b',
-          borderRadius: '8px',
-          padding: '1.5rem',
-          marginBottom: '2rem',
-        }}
-      >
-        <h2 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: '#92400e' }}>
-          ⚡ Snabbimport
-        </h2>
-        <p style={{ margin: '0 0 1rem 0', color: '#92400e', fontSize: '0.9rem' }}>
-          Klistra in en ICA-receptlänk eller filsökväg för att importera direkt:
-        </p>
-
-        <form onSubmit={handleQuickImport} style={{ display: 'grid', gap: '0.75rem' }}>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '0.5rem' }}>
-            <input
-              type="text"
-              value={quickImportUrl}
-              onChange={(e) => setQuickImportUrl(e.target.value)}
-              placeholder="https://www.ica.se/recept/... eller C:\recepter\file.pdf"
-              style={{
-                padding: '0.75rem',
-                border: '1px solid #d97706',
-                borderRadius: '4px',
-                fontSize: '0.95rem',
-                boxSizing: 'border-box',
-              }}
-              disabled={isLoading}
-            />
-            <button
-              type="submit"
-              disabled={isLoading || !quickImportUrl.trim()}
-              style={{
-                padding: '0.75rem 1.5rem',
-                background: '#f59e0b',
-                color: '#fff',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: isLoading || !quickImportUrl.trim() ? 'not-allowed' : 'pointer',
-                opacity: isLoading || !quickImportUrl.trim() ? 0.6 : 1,
-                fontSize: '0.95rem',
-                fontWeight: 600,
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {isLoading ? 'Laddar...' : '→'}
-            </button>
-          </div>
-
-          {error && (
-            <p
-              style={{
-                margin: '0.5rem 0 0 0',
-                color: '#991b1b',
-                background: '#fee2e2',
-                padding: '0.75rem',
-                borderRadius: '4px',
-                fontSize: '0.85rem',
-              }}
-            >
-              ⚠️ {error}
-            </p>
-          )}
-
-          <p style={{ margin: '0.75rem 0 0 0', color: '#92400e', fontSize: '0.8rem' }}>
-            Stöds: ICA-recept, PDF-filer
-          </p>
-        </form>
-      </div>
-
-      {/* ELLER-SEPARATOR */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '1rem',
-          margin: '2rem 0',
-          color: '#999',
-        }}
-      >
-        <div style={{ flex: 1, height: '1px', background: '#ddd' }} />
-        <span style={{ fontSize: '0.9rem', fontWeight: 500 }}>eller</span>
-        <div style={{ flex: 1, height: '1px', background: '#ddd' }} />
-      </div>
-
-      {/* KLASSISKA ALTERNATIV */}
-      <p style={{ marginBottom: '2rem', color: '#666' }}>
-        Välj ett sätt att lägga till ett recept:
-      </p>
-
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
-          gap: '1.5rem',
-        }}
-      >
-        {/* Skriv in recept */}
-        <Link
-          href="/recipes/write"
-          style={{
-            padding: '2rem',
-            border: '2px solid #0070f3',
-            borderRadius: '8px',
-            textDecoration: 'none',
-            background: 'linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%)',
-            transition: 'all 0.2s',
-            cursor: 'pointer',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
-            (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(0,112,243,0.2)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
-            (e.currentTarget as HTMLElement).style.boxShadow = 'none';
-          }}
-        >
-          <h2 style={{ margin: '0 0 0.5rem 0', color: '#0070f3', fontSize: '1.3rem' }}>
-            ✏️ Skriv in recept
-          </h2>
-          <p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
-            Skriv in receptet med ingredienser och instruktioner
-          </p>
-        </Link>
-
-        {/* Importera från fil/länk */}
-        <Link
-          href="/recipes/import"
-          style={{
-            padding: '2rem',
-            border: '2px solid #10b981',
-            borderRadius: '8px',
-            textDecoration: 'none',
-            background: 'linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%)',
-            transition: 'all 0.2s',
-            cursor: 'pointer',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
-            (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(16,185,129,0.2)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
-            (e.currentTarget as HTMLElement).style.boxShadow = 'none';
-          }}
-        >
-          <h2 style={{ margin: '0 0 0.5rem 0', color: '#10b981', fontSize: '1.3rem' }}>
-            📥 Importera från fil
-          </h2>
-          <p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
-            Ladda upp PDF, länk eller annan filtyp
-          </p>
-        </Link>
-      </div>
-    </main>
   );
 }

frontend/app/recipes/import/ImportFilePage.tsx

@@ -3,7 +3,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import Navigation from '../../Navigation';
 import { parseErrorResponse } from '../../../lib/error-handler';
 
 export default function ImportFilePage() {
@@ -84,7 +83,6 @@ export default function ImportFilePage() {
 
   return (
     <main style={{ padding: '1rem', maxWidth: '900px', margin: '0 auto' }}>
-      <Navigation />
       <h1 style={{ marginBottom: '0.5rem' }}>Importera från fil eller länk</h1>
       <p style={{ color: '#666', marginBottom: '1.5rem' }}>
         Ladda upp en PDF eller bild för OCR, eller ange en receptlänk.

frontend/app/recipes/import/ImportRecipePage.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/navigation';
 import { fetchJson } from '../../../lib/api';
 import { parseErrorResponse } from '../../../lib/error-handler';
 import type { Product } from '../../../features/inventory/types';
-import Navigation from '../../Navigation';
 import { UNIT_OPTIONS } from '../../../lib/units';
 
 type ProductSuggestion = {
@@ -157,7 +156,6 @@ export default function ImportRecipePage() {
 
   return (
     <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
-      <Navigation />
       <h1 style={{ marginBottom: '0.5rem' }}>Importera recept från Markdown</h1>
 
       {/* Steg-indikator */}

frontend/app/recipes/write/WriteRecipePage.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/navigation';
 import { fetchJson } from '../../../lib/api';
 import { parseErrorResponse } from '../../../lib/error-handler';
 import type { Product } from '../../../features/inventory/types';
-import Navigation from '../../Navigation';
 import { UNIT_OPTIONS } from '../../../lib/units';
 
 type ProductSuggestion = {
@@ -214,7 +213,6 @@ export default function WriteRecipePage() {
 
   return (
     <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
-      <Navigation />
       <h1 style={{ marginBottom: '0.5rem' }}>Skriv in recept</h1>
       <p style={{ color: '#666', marginBottom: '1.5rem' }}>Skriv receptet i Markdown-format — nama, ingredienser och instruktioner.</p>
 

frontend/app/recipes/write/page.tsx

@@ -1,5 +1,11 @@
+import Navigation from '../../Navigation';
 import WriteRecipePage from './WriteRecipePage';
 
 export default function Page() {
-  return <WriteRecipePage />;
+  return (
+    <>
+      <Navigation />
+      <WriteRecipePage />
+    </>
+  );
 }