Artikelbild: nur noch an einer Stelle, hochkant, und beim Import beruecksichtigt

Das alte Bild in der Chargen-Karte entfaellt - seit dem neuen Bild neben den
Kennfeldern stand es doppelt auf der Seite.

Der Rahmen ist jetzt hochkant (3:4) statt quadratisch. Lebensmittelverpackungen
sind fast immer hoeher als breit; im Quadrat blieben links und rechts leere
Streifen.

Beim Import wurde image_url komplett verworfen, obwohl das JSON-Backup sie
enthaelt - eingelesene Artikel blieben deshalb dauerhaft ohne Bild. Die Adresse
wird jetzt uebernommen (bei bestehenden Artikeln nur ergaenzend, nie
ueberschreibend); die lokale Kopie holt der Bildabruf beim ersten Ansehen.
Bewusst nicht waehrend des Imports: Ein Backup mit 200 Artikeln wuerde sonst
200 Downloads in einer Anfrage abarbeiten.

Ausserdem holen jetzt auch Artikelliste, Ein- und Auslagern ihr Vorschaubild
aus der eigenen Datenbank statt direkt von Open Food Facts. Einzige Ausnahme
bleibt der OFF-Vorschlag beim Scannen: Dort existiert der Artikel noch nicht.

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

web/src/components/ProduktBild.jsx

@@ -1,16 +1,14 @@
 import { useEffect, useState } from "react";
 import { authorizedObjectUrl } from "../api";
+import Icon from "./Icon";
 
 /**
- * Artikelbild aus der eigenen Datenbank.
- *
- * Rendert nichts, solange kein Bild vorliegt – ein Platzhalter für einen
- * Artikel, der nie ein Bild bekommen wird, wäre nur Lärm.
+ * Lädt das Artikelbild aus der eigenen Datenbank.
  *
  * Die Objekt-URL wird beim Verlassen wieder freigegeben, sonst hält der Browser
  * jedes angesehene Bild bis zum Neuladen der Seite im Speicher.
  */
-export default function ProduktBild({ productId, alt, className = "" }) {
+function useBildUrl(productId) {
   const [url, setUrl] = useState(null);
 
   useEffect(() => {
@@ -37,6 +35,31 @@ export default function ProduktBild({ productId, alt, className = "" }) {
     };
   }, [productId]);
 
+  return url;
+}
+
+/**
+ * Grosses Artikelbild für die Artikelseite.
+ *
+ * Rendert nichts, solange kein Bild vorliegt – ein leerer Rahmen neben einem
+ * Artikel, der nie ein Bild bekommen wird, wäre nur Lärm.
+ */
+export default function ProduktBild({ productId, alt, className = "" }) {
+  const url = useBildUrl(productId);
   if (!url) return null;
   return <img className={`produkt-bild ${className}`.trim()} src={url} alt={alt || ""} />;
 }
+
+/**
+ * Kleines Vorschaubild für Listen und Auswahlen.
+ *
+ * Hier gibt es sehr wohl einen Platzhalter: In einer Tabellenspalte müssen alle
+ * Zeilen gleich hoch bleiben, sonst springt die Liste.
+ */
+export function ProduktThumb({ productId, alt }) {
+  const url = useBildUrl(productId);
+  if (!url) {
+    return <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>;
+  }
+  return <img className="thumb" src={url} alt={alt || ""} />;
+}