feat: Add optional note field to ingredient parsing and update related components

frontend/app/recipes/write/WriteRecipePage.tsx

@@ -43,6 +43,7 @@ const UNIT_OPTIONS = [
   { value: 'st', label: 'st (styck)' },
   { value: 'tsk', label: 'tsk (tesked)' },
   { value: 'msk', label: 'msk (matsked)' },
+  { value: 'krm', label: 'krm (kryddmått)' },
 ];
 
 type Step = 'input' | 'review' | 'saving';
@@ -60,6 +61,7 @@ export default function WriteRecipePage() {
   const [isParsing, setIsParsing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showDebugPanel, setShowDebugPanel] = useState(false);
 
   useEffect(() => {
     // Hämta produkter från databas
@@ -310,6 +312,65 @@ 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' }}>
+          {/* Debug Panel - Import Output */}
+          <details
+            open={showDebugPanel}
+            onChange={(e) => setShowDebugPanel((e.target as HTMLDetailsElement).open)}
+            style={{
+              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>
+                <pre
+                  style={{
+                    background: 'white',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    padding: '0.75rem',
+                    fontSize: '0.8rem',
+                    overflow: 'auto',
+                    maxHeight: '200px',
+                    margin: 0,
+                    fontFamily: 'monospace',
+                    color: '#333',
+                  }}
+                >
+                  {markdown}
+                </pre>
+              </div>
+
+              {/* Parse Results as JSON */}
+              <div>
+                <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', color: '#555' }}>Parse Result:</h4>
+                <pre
+                  style={{
+                    background: 'white',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    padding: '0.75rem',
+                    fontSize: '0.75rem',
+                    overflow: 'auto',
+                    maxHeight: '250px',
+                    margin: 0,
+                    fontFamily: 'monospace',
+                    color: '#333',
+                  }}
+                >
+                  {JSON.stringify(parsed, null, 2)}
+                </pre>
+              </div>
+            </div>
+          </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>