Bild uebernehmen: sichtbare Rueckmeldung und Nachholen bei fehlender Kopie

Zwei Ursachen dafuer, dass der Knopf folgenlos wirkte.

Sichtbar: Uebernehmen schreibt nur ins Formular, das Artikelbild wechselt erst
beim Speichern - es gab aber nichts, woran man das erkannt haette. Die Spalte
"Bisher" zeigt jetzt sofort das uebernommene Bild mit Kennzeichnung, der Knopf
heisst danach "Uebernommen", und eine Meldung erklaert den naechsten Schritt.

Tatsaechlich folgenlos war der haeufigste Fall: Stimmte die Bildadresse
laengst und nur der Abruf war damals fehlgeschlagen, aenderte sich beim
Speichern nichts - und die Bedingung fragte genau nach einer Aenderung. Sie
richtet sich jetzt danach, woher die vorhandene Kopie stammt. Fehlt sie, wird
geholt.

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

web/src/components/OffVergleich.jsx

@@ -11,7 +11,8 @@ import ProduktBild from "./ProduktBild";
  * felder: [{ schluessel, titel, eigen, fremd, anzeigeEigen?, anzeigeFremd? }]
  */
 export default function OffVergleich({
-  felder, bildEigenId, bildFremdUrl, onUebernehmen, onAlle, onSchliessen,
+  felder, bildEigenId, bildFremdUrl, bildUebernommen,
+  onUebernehmen, onAlle, onSchliessen,
 }) {
   const leer = (wert) => wert === null || wert === undefined || wert === "";
   const abweichend = felder.filter((f) => !leer(f.fremd) && String(f.fremd) !== String(f.eigen));
@@ -62,7 +63,19 @@ export default function OffVergleich({
 
             <tr className={bildAbweichend ? "" : "muted"}>
               <td data-label="Feld">Bild</td>
-              <td data-label="Bisher"><ProduktBild productId={bildEigenId} className="off-bild" /></td>
+              <td data-label="Bisher">
+                {/* Nach dem Übernehmen steht hier schon das neue Bild. Ohne das
+                    sah der Knopf wirkungslos aus: Das Artikelbild wechselt erst
+                    beim Speichern, weil der Server es dann erst holt. */}
+                {bildUebernommen
+                  ? (
+                    <span className="off-neu">
+                      <img className="off-bild" src={bildFremdUrl} alt="" />
+                      <span className="badge">neu</span>
+                    </span>
+                  )
+                  : <ProduktBild productId={bildEigenId} className="off-bild" />}
+              </td>
               <td data-label="Open Food Facts">
                 {/* Vorschau kommt hier direkt von OFF – lokal gibt es das Bild
                     ja gerade noch nicht. Übernommen und gespeichert, holt der
@@ -74,7 +87,7 @@ export default function OffVergleich({
               <td className="num">
                 <button type="button" className="btn sm" disabled={!bildAbweichend}
                   onClick={() => onUebernehmen("image_url")}>
-                  Übernehmen
+                  {bildUebernommen ? "Übernommen" : "Übernehmen"}
                 </button>
               </td>
             </tr>

web/src/pages/ProductForm.jsx

@@ -176,6 +176,9 @@ export default function ProductForm() {
     if (!offDaten) return;
     if (schluessel === "image_url") {
       set("image_url", offDaten.image_url || "");
+      // Das Bild selbst wechselt erst beim Speichern - ohne Hinweis wirkt der
+      // Knopf folgenlos.
+      toast("Bild übernommen. Mit „Speichern“ wird es geholt.");
       return;
     }
     if (schluessel === "package_size") {
@@ -384,6 +387,7 @@ export default function ProductForm() {
               felder={offFelder()}
               bildEigenId={id}
               bildFremdUrl={offDaten.image_url || ""}
+              bildUebernommen={Boolean(offDaten.image_url) && form.image_url === offDaten.image_url}
               onUebernehmen={uebernehmen}
               onAlle={alleUebernehmen}
               onSchliessen={() => setOffDaten(null)}

web/src/styles.css

@@ -230,6 +230,7 @@ input::placeholder { color: var(--muted); opacity: 0.7; }
   width: 56px; aspect-ratio: 3 / 4; object-fit: contain;
   background: var(--surface-2); border-radius: 4px; display: block;
 }
+.off-neu { display: flex; align-items: center; gap: var(--sp-2); }
 .field-inline { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-4); }
 /* Labels in einer Inline-Reihe duerfen keinen eigenen Abstand haben, sonst
    rutschen daneben stehende Buttons optisch nach unten. */