Web: Produkte in Lebensmittel/Gegenstaende getrennt; Spalten-Labels; Produktformular aufgeraeumt

1) Zwei getrennte Sidebar-Eintraege 'Lebensmittel' und 'Gegenstaende' (Products mit fixedType) statt einem 'Produkte' mit Umschalter - so vermischt sich nichts. 2) Spalten-Waehler zeigt sprechende Labels ('Bild' statt 'thumb', 'Aktionen', ...). 3) Produktformular: leerer Grow-Platzhalter unter 'Typ' entfernt und 'Neue Kategorie' direkt neben das Kategorie-Dropdown gruppiert; Formular wieder auf Lesebreite (kein content--wide), da das Layout-Problem intern war.

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

web/src/pages/ItemList.jsx

@@ -45,7 +45,7 @@ export default function ItemList() {
     ? `${(it.price_cents / 100).toFixed(2)} ${it.currency || ""}`.trim() : "");
 
   const columns = [
-    { key: "thumb", header: "", fixed: true, width: 56,
+    { key: "thumb", header: "", label: "Bild", fixed: true, width: 56,
       render: (it) => <ProduktThumb productId={it.product_id} alt={it.product_name} /> },
     { key: "uid", header: "UID", width: 110, filterText: (it) => it.uid, sortValue: (it) => it.uid,
       render: (it) => <span className="strong nowrap">{it.uid}</span> },
@@ -86,7 +86,7 @@ export default function ItemList() {
       render: (it) => preis(it) || "–" },
     { key: "note", header: "Notiz", width: 160, filterText: (it) => it.note || "",
       render: (it) => <span className="muted">{it.note || "–"}</span> },
-    { key: "open", header: "", fixed: true, width: 84, align: "num",
+    { key: "open", header: "", label: "Produkt öffnen", fixed: true, width: 84, align: "num",
       render: (it) => <Link to={`/products/${it.product_id}`}>Produkt</Link> },
   ];