feat: Enhance ingredient parsing to support mixed fractions and add description extraction in recipe parsers

backend/src/quick-import/parsers/base.parser.ts

@@ -59,15 +59,25 @@ export abstract class RecipeParser {
       cleaned = cleaned.replace(/\s*\([^)]*\)/, '').trim();
     }
 
-    // Hantera bråkdelar: "1/2" eller "1 / 2"
+    // Hantera bråkdelar: "1/2" eller "1 1/2" eller "1 1 / 2"
-    const fractionMatch = cleaned.match(/^([\d.]+)\s*\/\s*([\d.]+)/);
+    // Regex: (optional whole)? numerator / denominator
+    const fractionMatch = cleaned.match(/^(\d+)?\s*(\d+)\s*\/\s*([\d.]+)/);
     let quantity = 0;
     let remainingText = cleaned;
 
     if (fractionMatch) {
-      const numerator = parseFloat(fractionMatch[1]);
+      if (fractionMatch[1]) {
-      const denominator = parseFloat(fractionMatch[2]);
+        // Heltal + bråk: "1 1/2"
-      quantity = numerator / denominator;
+        const whole = parseFloat(fractionMatch[1]);
+        const numerator = parseFloat(fractionMatch[2]);
+        const denominator = parseFloat(fractionMatch[3]);
+        quantity = whole + (numerator / denominator);
+      } else {
+        // Bara bråk: "1/2"
+        const numerator = parseFloat(fractionMatch[2]);
+        const denominator = parseFloat(fractionMatch[3]);
+        quantity = numerator / denominator;
+      }
       remainingText = cleaned.substring(fractionMatch[0].length).trim();
     } else {
       const numberMatch = remainingText.match(/^([\d.,]+)/);

backend/src/quick-import/parsers/generic.parser.ts

@@ -42,6 +42,7 @@ export class GenericRecipeParser extends RecipeParser {
 
   private extractFromJsonLd(recipe: any): ParsedRecipe {
     const name = recipe.name || '';
+    const description = recipe.description || '';
 
     const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     if (recipe.recipeIngredient && Array.isArray(recipe.recipeIngredient)) {
@@ -71,6 +72,7 @@ export class GenericRecipeParser extends RecipeParser {
 
     return {
       name,
+      description,
       ingredients,
       instructions,
     };
@@ -90,6 +92,15 @@ export class GenericRecipeParser extends RecipeParser {
       name = titleMatch[1].trim();
     }
 
+    // Försöka extrahera beskrivning från meta-taggar
+    let description = '';
+    const descMatch = html.match(
+      /<meta\s+name="description"\s+content="([^"]+)"/i
+    );
+    if (descMatch) {
+      description = descMatch[1].trim();
+    }
+
     // Försöka extrahera ingredienser från vanliga strukturer
     const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     
@@ -129,6 +140,7 @@ export class GenericRecipeParser extends RecipeParser {
 
     return {
       name,
+      description,
       ingredients,
       instructions,
     };

backend/src/quick-import/parsers/ica.parser.ts

@@ -45,6 +45,9 @@ export class IcaRecipeParser extends RecipeParser {
     // Extrahera titel
     const name = recipe.name || '';
 
+    // Extrahera beskrivning
+    const description = recipe.description || '';
+
     // Extrahera ingredienser
     const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     if (recipe.recipeIngredient && Array.isArray(recipe.recipeIngredient)) {
@@ -75,6 +78,7 @@ export class IcaRecipeParser extends RecipeParser {
 
     return {
       name,
+      description,
       ingredients,
       instructions,
     };
@@ -96,6 +100,15 @@ export class IcaRecipeParser extends RecipeParser {
       }
     }
 
+    // Extrahera beskrivning från meta-taggar
+    let description = '';
+    const descMatch = html.match(
+      /<meta\s+name="description"\s+content="([^"]+)"/i
+    );
+    if (descMatch) {
+      description = descMatch[1].trim();
+    }
+
     const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     const ingredientRegex =
       /<li[^>]*class="[^"]*ingredient[^"]*"[^>]*>([^<]+)<\/li>/gi;
@@ -117,6 +130,7 @@ export class IcaRecipeParser extends RecipeParser {
 
     return {
       name,
+      description,
       ingredients,
       instructions,
     };

backend/src/recipes/recipes.service.ts

@@ -529,7 +529,7 @@ function parseRecipeMarkdown(markdown: string): ParsedRecipe {
       const heading = trimmed.replace(/^##\s+/, '').trim().toLowerCase();
       if (/ingrediens/.test(heading)) {
         currentSection = 'ingredients';
-      } else if (/instruktion|tillagning|gör så här|steg/.test(heading)) {
+      } else if (/instruktion|tillagning|gör så här|steg|tillväg|metod/.test(heading)) {
         currentSection = 'instructions';
       } else {
         currentSection = 'none';
@@ -570,12 +570,21 @@ function parseRecipeMarkdown(markdown: string): ParsedRecipe {
  * Parsar en ingrediensrad, t.ex.:
  *   "400 g kycklingfilé"
  *   "2 dl grädde (eller crème fraiche)"
+ *   "1 1/2 dl crème fraiche"
+ *   "1 polka- eller gulbeta"
  *   "1 kruka basilika"
  *   "salt"
  */
 function parseIngredientLine(text: string): ParsedIngredient {
   const trimmed = text.trim();
 
+  // Kända enheter
+  const knownUnits = [
+    'g', 'kg', 'hg', 'mg', 'ml', 'dl', 'l', 'tl',
+    'st', 'tsk', 'msk', 'krm', 'matsled', 'tesled',
+    'pris', 'portion', 'burk', 'förp', 'paket',
+  ];
+
   // Extrahera eventuell parentes-not i slutet
   let note: string | null = null;
   let main = trimmed;
@@ -585,13 +594,44 @@ function parseIngredientLine(text: string): ParsedIngredient {
     main = trimmed.slice(0, parenMatch.index).trim();
   }
 
+  // Försök matcha bråk först: "1 1/2 dl crème fraiche" eller "1/2 dl"
+  const fractionMatch = main.match(/^(\d+)?\s*(\d+)\s*\/\s*([\d.]+)\s+(\S+)\s+(.*)$/);
+  if (fractionMatch) {
+    let quantity = 0;
+    if (fractionMatch[1]) {
+      quantity = parseFloat(fractionMatch[1]) + parseFloat(fractionMatch[2]) / parseFloat(fractionMatch[3]);
+    } else {
+      quantity = parseFloat(fractionMatch[2]) / parseFloat(fractionMatch[3]);
+    }
+    const candidateUnit = fractionMatch[4].toLowerCase();
+    if (knownUnits.includes(candidateUnit)) {
+      return {
+        quantity,
+        unit: candidateUnit,
+        rawName: fractionMatch[5].trim(),
+        note,
+      };
+    }
+  }
+
   // Försök matcha "kvantitet enhet namn" — t.ex. "400 g kycklingfilé" eller "2.5 dl grädde"
   const fullMatch = main.match(/^(\d+(?:[.,]\d+)?)\s+(\S+)\s+(.+)$/);
   if (fullMatch) {
+    const candidateUnit = fullMatch[2].toLowerCase();
+    // Validera att det andra ordet är en känd enhet
+    if (knownUnits.includes(candidateUnit)) {
+      return {
+        quantity: parseNumber(fullMatch[1]),
+        unit: candidateUnit,
+        rawName: fullMatch[3].trim(),
+        note,
+      };
+    }
+    // Om inte känd enhet, behandla som "kvantitet namn" utan enhet
     return {
       quantity: parseNumber(fullMatch[1]),
-      unit: fullMatch[2],
+      unit: 'st',
-      rawName: fullMatch[3].trim(),
+      rawName: fullMatch[2] + ' ' + fullMatch[3],
       note,
     };
   }

frontend/app/recipes/write/WriteRecipePage.tsx

@@ -311,243 +311,263 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
 
       {/* STEG 2: Granskning */}
       {step === 'review' && parsed && (
-        <section style={{ display: 'grid', gap: '1.5rem' }}>
+        <section style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '1.5rem' }}>
-          {/* Debug Panel - Import Output */}
+          {/* Vänster: Receptdetaljer + Ingredienser */}
-          <details
+          <div style={{ display: 'grid', gap: '1.5rem' }}>
-            open={showDebugPanel}
+            {/* Receptdetaljer */}
-            onChange={(e) => setShowDebugPanel((e.target as HTMLDetailsElement).open)}
+            <div style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
-            style={{
+              <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
-              border: '1px solid #ddd',
+
-              borderRadius: '8px',
-              padding: '1rem',
-              background: '#f9f9f9',
-            }}
-          >
-            <summary style={{ cursor: 'pointer', fontWeight: 600, fontSize: '0.95rem', color: '#666' }}>
-              🔍 Import Debug Output {showDebugPanel ? '▼' : '▶'}
-            </summary>
-            <div style={{ marginTop: '1rem', display: 'grid', gap: '1rem' }}>
-              {/* Raw Markdown */}
               <div>
-                <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', color: '#555' }}>Raw Markdown:</h4>
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Receptnamn *</label>
+                <input
+                  type="text"
+                  value={editedName}
+                  onChange={(e) => setEditedName(e.target.value)}
+                  required
+                  style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', boxSizing: 'border-box' }}
+                />
+              </div>
+
+              <div>
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Beskrivning</label>
+                <textarea
+                  value={editedDescription}
+                  onChange={(e) => setEditedDescription(e.target.value)}
+                  style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '80px', fontFamily: 'inherit', boxSizing: 'border-box' }}
+                />
+              </div>
+
+              <div>
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Instruktioner</label>
+                <textarea
+                  value={editedInstructions}
+                  onChange={(e) => setEditedInstructions(e.target.value)}
+                  style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '150px', fontFamily: 'monospace', boxSizing: 'border-box' }}
+                />
+              </div>
+            </div>
+
+            {/* Ingredienser */}
+            <div style={{ display: 'grid', gap: '0.75rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+              <h2 style={{ margin: 0, fontSize: '1.1rem' }}>
+                Ingredienser{' '}
+                <span style={{ fontWeight: 400, fontSize: '0.875rem', color: '#666' }}>
+                  — välj produkt från databasen för varje rad
+                </span>
+              </h2>
+
+              {ingredients.map((ing, index) => (
+                <div
+                  key={index}
+                  style={{ display: 'grid', gap: '0.5rem', padding: '0.75rem', background: '#f9f9f9', borderRadius: '6px', border: '1px solid #eee' }}
+                >
+                  {/* Rå text från Markdown */}
+                  <div style={{ fontSize: '0.85rem', color: '#888', fontStyle: 'italic' }}>
+                    Tolkad som: <strong style={{ color: '#555' }}>{ing.rawName}</strong>
+                    {ing.suggestions.length > 0 && (
+                      <span style={{ marginLeft: '0.5rem', color: '#0070f3' }}>
+                        (bästa match: {ing.suggestions[0].productName}, {ing.suggestions[0].score}%)
+                      </span>
+                    )}
+                  </div>
+
+                  <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'end' }}>
+                    {/* Produktval */}
+                    <div>
+                      <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Produkt *</label>
+                      <select
+                        value={ing.selectedProductId}
+                        onChange={(e) => updateIngredient(index, 'selectedProductId', Number(e.target.value))}
+                        style={{ width: '100%', padding: '0.5rem', border: ing.selectedProductId === 0 ? '1px solid #f59e0b' : '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', background: ing.selectedProductId === 0 ? '#fffbeb' : 'white' }}
+                      >
+                        <option value={0}>— Välj produkt —</option>
+                        {/* Förslag från backend (sorterade efter matchningspoäng) */}
+                        {ing.suggestions.length > 0 && (
+                          <optgroup label="Föreslagna matchningar">
+                            {ing.suggestions.map((s) => (
+                              <option key={s.productId} value={s.productId}>
+                                {s.productName} ({s.score}%)
+                              </option>
+                            ))}
+                          </optgroup>
+                        )}
+                        <optgroup label="Alla produkter">
+                          {allProducts.map((p) => (
+                            <option key={p.id} value={p.id}>
+                              {p.canonicalName || p.name}
+                            </option>
+                          ))}
+                        </optgroup>
+                      </select>
+                    </div>
+
+                    {/* Mängd */}
+                    <div>
+                      <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Mängd</label>
+                      <input
+                        type="number"
+                        value={ing.editedQuantity}
+                        onChange={(e) => updateIngredient(index, 'editedQuantity', e.target.value)}
+                        min="0.01"
+                        step="0.01"
+                        style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', boxSizing: 'border-box' }}
+                      />
+                    </div>
+
+                    {/* Enhet */}
+                    <div>
+                      <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Enhet</label>
+                      <select
+                        value={ing.editedUnit}
+                        onChange={(e) => updateIngredient(index, 'editedUnit', e.target.value)}
+                        style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem' }}
+                      >
+                        {UNIT_OPTIONS.map((u) => (
+                          <option key={u.value} value={u.value}>{u.label}</option>
+                        ))}
+                      </select>
+                    </div>
+
+                    {/* Ta bort */}
+                    <button
+                      onClick={() => removeIngredient(index)}
+                      title="Ta bort ingrediens"
+                      style={{ padding: '0.5rem 0.75rem', background: '#fee2e2', color: '#dc2626', border: '1px solid #fca5a5', borderRadius: '4px', cursor: 'pointer', fontSize: '0.9rem', alignSelf: 'end' }}
+                    >
+                      ✕
+                    </button>
+                  </div>
+
+                  {/* Anteckning */}
+                  <div>
+                    <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', color: '#666' }}>Anteckning</label>
+                    <input
+                      type="text"
+                      value={ing.editedNote}
+                      onChange={(e) => updateIngredient(index, 'editedNote', e.target.value)}
+                      placeholder="Valfri anteckning..."
+                      style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.85rem', boxSizing: 'border-box' }}
+                    />
+                  </div>
+                </div>
+              ))}
+
+              {ingredients.length === 0 && (
+                <p style={{ color: '#888', fontStyle: 'italic', margin: 0 }}>
+                  Inga ingredienser tolkades från Markdown-texten.
+                </p>
+              )}
+            </div>
+
+            {/* Knappar */}
+            <div style={{ display: 'flex', gap: '1rem' }}>
+              <button
+                onClick={handleSave}
+                disabled={isSaving || !editedName.trim() || ingredients.filter((i) => i.selectedProductId > 0).length === 0}
+                style={{
+                  padding: '0.75rem 1.5rem',
+                  background: '#0070f3',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: isSaving ? 'not-allowed' : 'pointer',
+                  opacity: isSaving ? 0.6 : 1,
+                  fontSize: '1rem',
+                  fontWeight: 500,
+                }}
+              >
+                {isSaving ? 'Sparar...' : 'Spara recept'}
+              </button>
+              <button
+                onClick={() => setStep('input')}
+                style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
+              >
+                ← Redigera
+              </button>
+              <button
+                onClick={() => router.push('/recipes')}
+                style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
+              >
+                Avbryt
+              </button>
+            </div>
+          </div>
+
+          {/* Höger: Debug Panel (Sticky) */}
+          <div style={{ position: 'sticky', top: '1rem', height: 'fit-content' }}>
+            <details
+              open={showDebugPanel}
+              onChange={(e) => setShowDebugPanel((e.target as HTMLDetailsElement).open)}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: '8px',
+                padding: '0.75rem',
+                background: '#f9f9f9',
+              }}
+            >
+              <summary style={{ cursor: 'pointer', fontWeight: 600, fontSize: '0.9rem', color: '#666', userSelect: 'none' }}>
+                🔍 Import Debug {showDebugPanel ? '▼' : '▶'}
+              </summary>
+
+              {/* Raw Markdown */}
+              <details
+                style={{
+                  marginTop: '0.75rem',
+                  paddingTop: '0.75rem',
+                  borderTop: '1px solid #ddd',
+                }}
+              >
+                <summary style={{ cursor: 'pointer', fontSize: '0.8rem', fontWeight: 500, color: '#555', userSelect: 'none' }}>
+                  Raw Markdown
+                </summary>
                 <pre
                   style={{
                     background: 'white',
                     border: '1px solid #ddd',
                     borderRadius: '4px',
-                    padding: '0.75rem',
+                    padding: '0.5rem',
-                    fontSize: '0.8rem',
+                    fontSize: '0.7rem',
                     overflow: 'auto',
                     maxHeight: '200px',
-                    margin: 0,
+                    margin: '0.5rem 0 0',
                     fontFamily: 'monospace',
                     color: '#333',
                   }}
                 >
                   {markdown}
                 </pre>
-              </div>
+              </details>
 
-              {/* Parse Results as JSON */}
+              {/* Parse Result */}
-              <div>
+              <details
-                <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', color: '#555' }}>Parse Result:</h4>
+                style={{
+                  marginTop: '0.5rem',
+                  paddingTop: '0.5rem',
+                  borderTop: '1px solid #ddd',
+                }}
+              >
+                <summary style={{ cursor: 'pointer', fontSize: '0.8rem', fontWeight: 500, color: '#555', userSelect: 'none' }}>
+                  Parse Result
+                </summary>
                 <pre
                   style={{
                     background: 'white',
                     border: '1px solid #ddd',
                     borderRadius: '4px',
-                    padding: '0.75rem',
+                    padding: '0.5rem',
-                    fontSize: '0.75rem',
+                    fontSize: '0.65rem',
                     overflow: 'auto',
-                    maxHeight: '250px',
+                    maxHeight: '200px',
-                    margin: 0,
+                    margin: '0.5rem 0 0',
                     fontFamily: 'monospace',
                     color: '#333',
                   }}
                 >
                   {JSON.stringify(parsed, null, 2)}
                 </pre>
-              </div>
+              </details>
-            </div>
+            </details>
-          </details>
-
-          {/* Receptdetaljer */}
-          <div style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
-            <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
-
-            <div>
-              <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Receptnamn *</label>
-              <input
-                type="text"
-                value={editedName}
-                onChange={(e) => setEditedName(e.target.value)}
-                required
-                style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', boxSizing: 'border-box' }}
-              />
-            </div>
-
-            <div>
-              <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Beskrivning</label>
-              <textarea
-                value={editedDescription}
-                onChange={(e) => setEditedDescription(e.target.value)}
-                style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '80px', fontFamily: 'inherit', boxSizing: 'border-box' }}
-              />
-            </div>
-
-            <div>
-              <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Instruktioner</label>
-              <textarea
-                value={editedInstructions}
-                onChange={(e) => setEditedInstructions(e.target.value)}
-                style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '150px', fontFamily: 'monospace', boxSizing: 'border-box' }}
-              />
-            </div>
-          </div>
-
-          {/* Ingredienser */}
-          <div style={{ display: 'grid', gap: '0.75rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
-            <h2 style={{ margin: 0, fontSize: '1.1rem' }}>
-              Ingredienser{' '}
-              <span style={{ fontWeight: 400, fontSize: '0.875rem', color: '#666' }}>
-                — välj produkt från databasen för varje rad
-              </span>
-            </h2>
-
-            {ingredients.map((ing, index) => (
-              <div
-                key={index}
-                style={{ display: 'grid', gap: '0.5rem', padding: '0.75rem', background: '#f9f9f9', borderRadius: '6px', border: '1px solid #eee' }}
-              >
-                {/* Rå text från Markdown */}
-                <div style={{ fontSize: '0.85rem', color: '#888', fontStyle: 'italic' }}>
-                  Tolkad som: <strong style={{ color: '#555' }}>{ing.rawName}</strong>
-                  {ing.suggestions.length > 0 && (
-                    <span style={{ marginLeft: '0.5rem', color: '#0070f3' }}>
-                      (bästa match: {ing.suggestions[0].productName}, {ing.suggestions[0].score}%)
-                    </span>
-                  )}
-                </div>
-
-                <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'end' }}>
-                  {/* Produktval */}
-                  <div>
-                    <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Produkt *</label>
-                    <select
-                      value={ing.selectedProductId}
-                      onChange={(e) => updateIngredient(index, 'selectedProductId', Number(e.target.value))}
-                      style={{ width: '100%', padding: '0.5rem', border: ing.selectedProductId === 0 ? '1px solid #f59e0b' : '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', background: ing.selectedProductId === 0 ? '#fffbeb' : 'white' }}
-                    >
-                      <option value={0}>— Välj produkt —</option>
-                      {/* Förslag från backend (sorterade efter matchningspoäng) */}
-                      {ing.suggestions.length > 0 && (
-                        <optgroup label="Föreslagna matchningar">
-                          {ing.suggestions.map((s) => (
-                            <option key={s.productId} value={s.productId}>
-                              {s.productName} ({s.score}%)
-                            </option>
-                          ))}
-                        </optgroup>
-                      )}
-                      <optgroup label="Alla produkter">
-                        {allProducts.map((p) => (
-                          <option key={p.id} value={p.id}>
-                            {p.canonicalName || p.name}
-                          </option>
-                        ))}
-                      </optgroup>
-                    </select>
-                  </div>
-
-                  {/* Mängd */}
-                  <div>
-                    <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Mängd</label>
-                    <input
-                      type="number"
-                      value={ing.editedQuantity}
-                      onChange={(e) => updateIngredient(index, 'editedQuantity', e.target.value)}
-                      min="0.01"
-                      step="0.01"
-                      style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', boxSizing: 'border-box' }}
-                    />
-                  </div>
-
-                  {/* Enhet */}
-                  <div>
-                    <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Enhet</label>
-                    <select
-                      value={ing.editedUnit}
-                      onChange={(e) => updateIngredient(index, 'editedUnit', e.target.value)}
-                      style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem' }}
-                    >
-                      {UNIT_OPTIONS.map((u) => (
-                        <option key={u.value} value={u.value}>{u.label}</option>
-                      ))}
-                    </select>
-                  </div>
-
-                  {/* Ta bort */}
-                  <button
-                    onClick={() => removeIngredient(index)}
-                    title="Ta bort ingrediens"
-                    style={{ padding: '0.5rem 0.75rem', background: '#fee2e2', color: '#dc2626', border: '1px solid #fca5a5', borderRadius: '4px', cursor: 'pointer', fontSize: '0.9rem', alignSelf: 'end' }}
-                  >
-                    ✕
-                  </button>
-                </div>
-
-                {/* Anteckning */}
-                <div>
-                  <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', color: '#666' }}>Anteckning</label>
-                  <input
-                    type="text"
-                    value={ing.editedNote}
-                    onChange={(e) => updateIngredient(index, 'editedNote', e.target.value)}
-                    placeholder="Valfri anteckning..."
-                    style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.85rem', boxSizing: 'border-box' }}
-                  />
-                </div>
-              </div>
-            ))}
-
-            {ingredients.length === 0 && (
-              <p style={{ color: '#888', fontStyle: 'italic', margin: 0 }}>
-                Inga ingredienser tolkades från Markdown-texten.
-              </p>
-            )}
-          </div>
-
-          {/* Knappar */}
-          <div style={{ display: 'flex', gap: '1rem' }}>
-            <button
-              onClick={handleSave}
-              disabled={isSaving || !editedName.trim() || ingredients.filter((i) => i.selectedProductId > 0).length === 0}
-              style={{
-                padding: '0.75rem 1.5rem',
-                background: '#0070f3',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: isSaving ? 'not-allowed' : 'pointer',
-                opacity: isSaving ? 0.6 : 1,
-                fontSize: '1rem',
-                fontWeight: 500,
-              }}
-            >
-              {isSaving ? 'Sparar...' : 'Spara recept'}
-            </button>
-            <button
-              onClick={() => setStep('input')}
-              style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
-            >
-              ← Redigera
-            </button>
-            <button
-              onClick={() => router.push('/recipes')}
-              style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
-            >
-              Avbryt
-            </button>
           </div>
         </section>
       )}