Web: alle Kategorie-Auswahlen als aufklappbarer Baum

Statt der nativen "— —"-Dropdowns nutzen jetzt auch Produktformular
(Kategorie + Inline-"Neue Kategorie"-Elternwahl), Einlagern-Maske und
Produkte-Filter den CategorySelect-Baum. CategorySelect um optionale
Zusatz-Eintraege (extraOptions) erweitert, damit der Produkte-Filter
"Alle Kategorien"/"Ohne Kategorie" weiter anbietet.

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

web/src/pages/CheckIn.jsx

@@ -7,6 +7,7 @@ import { ProduktThumb } from "../components/ProduktBild";
 import { useToast } from "../toast";
 import { suggestionToProduct } from "../offUtils";
 import { asTree } from "../categoryTree";
+import CategorySelect from "../components/CategorySelect";
 import { buildUnitOptions, fmt, fromMonthInput, isExpired, monthInputToLastDay } from "../units";
 
 const emptyLine = () => ({ quantity: "", best_before: "" });
@@ -138,12 +139,12 @@ export default function CheckIn() {
         <div className="row">
           <label className="grow">
             Kategorie
-            <select value={newCategoryId} onChange={(e) => setNewCategoryId(e.target.value)}>
-              <option value="">– keine –</option>
-              {asTree(categories).map((c) => (
-                <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
-              ))}
-            </select>
+            <CategorySelect
+              value={newCategoryId === "" ? null : Number(newCategoryId)}
+              nodes={asTree(categories)}
+              rootLabel="– keine –"
+              onChange={(id) => setNewCategoryId(id == null ? "" : String(id))}
+            />
             <span className="muted small">Nur für den Überblick in der Artikelliste.</span>
           </label>
           <label className="grow">

web/src/pages/ProductForm.jsx

@@ -10,6 +10,7 @@ import ProduktBild from "../components/ProduktBild";
 import { useToast } from "../toast";
 import { useSettings } from "../settings";
 import { asTree } from "../categoryTree";
+import CategorySelect from "../components/CategorySelect";
 import { DynamicFields, FIELD_TYPES } from "../fields";
 import ObjektBestand from "../components/ObjektBestand";
 import Einzelstuecke from "../components/Einzelstuecke";
@@ -696,15 +697,13 @@ export default function ProductForm() {
               <span className="tip" title="Nur Kategorien des gewählten Typs. Gegenstands-Kategorien zeigen Menge je Lagerort, Lebensmittel MHD/Chargen.">
                 Kategorie
               </span>
-              <select value={form.category_id} onChange={(e) => set("category_id", e.target.value)}
-                disabled={readOnly}>
-                <option value="">– keine –</option>
-                {asTree(categories).filter((c) => c.tracking === modus).map((c) => (
-                  <option key={c.id} value={c.id}>
-                    {"— ".repeat(c.depth)}{c.name}
-                  </option>
-                ))}
-              </select>
+              <CategorySelect
+                value={form.category_id === "" ? null : Number(form.category_id)}
+                nodes={asTree(categories).filter((c) => c.tracking === modus)}
+                rootLabel="– keine –"
+                disabled={readOnly}
+                onChange={(id) => set("category_id", id == null ? "" : String(id))}
+              />
             </label>
             {isAdmin && (
               <div className="grow" style={{ display: "flex", alignItems: "flex-end" }}>
@@ -729,13 +728,12 @@ export default function ProductForm() {
                     onChange={(e) => setNewCat({ ...newCat, name: e.target.value })} />
                 </label>
                 <label className="grow">Untergeordnet (optional)
-                  <select value={newCat.parent_id}
-                    onChange={(e) => setNewCat({ ...newCat, parent_id: e.target.value })}>
-                    <option value="">– oberste Ebene –</option>
-                    {asTree(categories).filter((c) => c.tracking === modus).map((c) => (
-                      <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
-                    ))}
-                  </select>
+                  <CategorySelect
+                    value={newCat.parent_id === "" ? null : Number(newCat.parent_id)}
+                    nodes={asTree(categories).filter((c) => c.tracking === modus)}
+                    rootLabel="– oberste Ebene –"
+                    onChange={(id) => setNewCat({ ...newCat, parent_id: id == null ? "" : String(id) })}
+                  />
                 </label>
               </div>
               <button type="button" className="btn primary" onClick={createCategoryInline}>

web/src/pages/Products.jsx

@@ -6,6 +6,7 @@ import Icon from "../components/Icon";
 import { ProduktThumb } from "../components/ProduktBild";
 import { fmt, gebinde, unitShort } from "../units";
 import { asTree } from "../categoryTree";
+import CategorySelect from "../components/CategorySelect";
 
 // Wie viele Basiseinheiten eine "Artikeleinheit" umfasst (Gebinde oder Produkteinheit).
 function unitCount(p) {
@@ -83,14 +84,14 @@ export default function Products() {
         <label className="grow" style={{ margin: 0 }}>
           <input placeholder="Produkt suchen…" value={q} onChange={(e) => setQ(e.target.value)} />
         </label>
-        <label style={{ margin: 0 }}>
-          <select value={categoryId} onChange={(e) => { setCategoryId(e.target.value); load(e.target.value); }}>
-            <option value="">Alle Kategorien</option>
-            <option value="0">Ohne Kategorie</option>
-            {asTree(categories).filter((c) => !typ || c.tracking === typ).map((c) => (
-              <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
-            ))}
-          </select>
+        <label style={{ margin: 0, width: 230 }}>
+          <CategorySelect
+            value={categoryId}
+            nodes={asTree(categories).filter((c) => !typ || c.tracking === typ)}
+            rootLabel="Alle Kategorien"
+            extraOptions={[{ value: 0, label: "Ohne Kategorie" }]}
+            onChange={(id) => { const v = id == null ? "" : String(id); setCategoryId(v); load(v); }}
+          />
         </label>
         <button className="btn"><Icon name="search" size={16} />Suchen</button>
       </form>