Zutaten von Hand zuordnen - und Vorrania merkt es sich

Der unscharfe Abgleich muss raten und wird das immer tun: "Lime Curd" hat
mit "Zitronencreme" kein Wort gemeinsam, und manchmal liegt er daneben.
Bisher war das eine Sackgasse - die Zutat blieb unzugeordnet, bei jedem
Aufruf neu.

Jetzt traegt jede Zutatenzeile einen Knopf "Zuordnen". Entschieden wird
gegen Artikel UND Gruppen, gemerkt unter dem normalisierten Namen des
Lebensmittels: "Schlagsahne", "schlagsahne" und "SCHLAGSAHNE " treffen
dieselbe Zeile. Ab dann gilt die Entscheidung fuer jedes Rezept, in dem
diese Zutat vorkommt - eine Zutat wird hoechstens einmal zugeordnet.

Schluessel ist der Name, nicht die Mealie-ID: IDs sind UUIDs, die beim
Neuanlegen eines Lebensmittels wechseln, und nur ueber den Namen greift
die Zuordnung auch fuer Zutaten ohne verknuepftes Lebensmittel ("2 Eier").

Im Auswahldialog stehen oben die Vorschlaege, die der Abgleich selbst
gefunden hat - meist ist der Richtige darunter, nur nicht an erster
Stelle -, darunter die freie Suche ueber alles. Die Basiseinheit steht
dabei, damit nicht wieder Milliliter auf ein Gramm-Produkt wandern.

Beim Raten bleiben Gegenstaende aussen vor; von Hand darf alles gewaehlt
werden ausser Einzelstuecken. Backpapier ist kein Lebensmittel und steht
trotzdem in Rezepten, waehrend ein Einzelstueck nie eine Zutat ist.

Zeigt das Ziel ins Leere, weil der Artikel geloescht wurde, faellt die
Zeile beim Laden still heraus: Auf SQLite greift kein Fremdschluessel,
und ein geloeschter Artikel darf kein Rezept mehr sprengen.

Die Zuordnungs-Routen stehen bewusst vor /recipes/{slug}, sonst liest
FastAPI "zuordnungen" als Rezept-Slug und fragt Mealie danach. Ein Test
wacht ueber die Reihenfolge, weil ein Umsortieren der Datei den Fehler
sonst still einbauen wuerde.

16 neue Tests, Suite bei 487.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/pages/Rezepte.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import Icon from "../components/Icon";
+import ZuordnungDialog from "../components/ZuordnungDialog";
 import { fmt } from "../units";
 
 /**
@@ -38,6 +39,8 @@ export default function Rezepte() {
   const [portionen, setPortionen] = useState("");
   const [fehler, setFehler] = useState(null);
   const [laedt, setLaedt] = useState(true);
+  // Welche Zutat gerade von Hand zugeordnet wird (null = keine).
+  const [zuordnen, setZuordnen] = useState(null);
 
   async function ladeListe(q = "") {
     setLaedt(true);
@@ -61,6 +64,12 @@ export default function Rezepte() {
     } catch (err) { setFehler(err.message); }
   }
 
+  // Nach einer Zuordnung muss der Abgleich neu laufen: Die Zutat hat jetzt ein
+  // Ziel, einen Bestand und einen Zustand.
+  async function neuRechnen() {
+    if (slug) await oeffne(slug, Number(String(portionen).replace(",", ".")) || undefined);
+  }
+
   function setzePortionen(wert) {
     setPortionen(wert);
     const zahl = Number(String(wert).replace(",", "."));
@@ -157,9 +166,18 @@ export default function Rezepte() {
                           {z.ziel_name && (
                             <div className="muted small">
                               {z.art === "group" ? "Gruppe " : ""}{z.ziel_name}
+                              {z.manuell && " · von Hand zugeordnet"}
                             </div>
                           )}
                           {z.hinweis && <div className="muted small">{z.hinweis}</div>}
+                          {z.food && (
+                            <button type="button" className="btn sm ghost"
+                              style={{ marginTop: "var(--sp-1)" }}
+                              onClick={() => setZuordnen(z)}>
+                              <Icon name="edit" size={14} />
+                              {z.ziel_id ? "Zuordnung ändern" : "Zuordnen"}
+                            </button>
+                          )}
                         </td>
                         <td data-label="Gebraucht">
                           {z.menge != null ? `${fmt(z.menge)} ${z.einheit}`.trim() : "–"}
@@ -193,6 +211,11 @@ export default function Rezepte() {
           )}
         </div>
       </div>
+
+      {zuordnen && (
+        <ZuordnungDialog zutat={zuordnen} onClose={() => setZuordnen(null)}
+          onDone={neuRechnen} onError={setFehler} />
+      )}
     </div>
   );
 }