Gruppen hierarchisch: in allen Auswahlfeldern und in der Artikelliste

Die Gruppen-Dropdowns waren flache, alphabetische Listen - man sah nicht, dass
"Grillwurst" unter "Wurst" haengt. Ein gemeinsamer Helfer (gruppenOptionen)
rollt den Graphen zum Baum aus und rueckt ein; eine Gruppe mit mehreren
Obergruppen erscheint unter jeder, denn genau das ist ihr Sinn, und ausgewaehlt
wird ohnehin dieselbe ID.

Eingerueckt wird mit GESCHUETZTEN Leerzeichen - normale fasst der Browser in
einem <option> zusammen, die Einrueckung waere sonst wirkungslos.

Betroffen: Gruppen-Auswahl im Artikelformular (beide Zweige), beim Einlagern,
die Ziel-Auswahl der Mindestbestaende und die Obergruppen-Mehrfachauswahl (die
beim Suchen bewusst abflacht, weil eine Einrueckung ohne die Eltern in die Irre
fuehrt). In der App dasselbe in beiden Gruppen-Pickern.

Die Gruppen-Spalte der Artikelliste zeigt jetzt den Weg von oben statt eines
Etiketts - "Wurst → Grillwurst", mit gedaempften Vorfahren wie bei der
Kategorie. Gefiltert wird ueber ALLE Wege: wer auf "Wurst" filtert, sieht auch
die Artikel aus den Untergruppen. Dafuer gibt es gruppenInfoMap als Gegenstueck
zu categoryInfoMap, das mit mehreren Wegen je Gruppe umgehen kann.

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

web/src/pages/MinStock.jsx

@@ -4,6 +4,7 @@ import { useAuth } from "../auth";
 import { useConfirm } from "../confirm";
 import Icon from "../components/Icon";
 import { locationOptions, locationPathById } from "../locationPath";
+import { gruppenOptionen } from "../groupGraph";
 import { anzahlWort, fmt, gebinde, grpFactor, grpPkgMode, grpUnit, kindShort } from "../units";
 
 // Anzeigeeinheit eines Produkts: die im Formular gewählte Einheit (Gramm,
@@ -366,14 +367,20 @@ export default function MinStock() {
               {draft.kind === "product" ? "Lebensmittel / Verbrauchsgegenstand" : "Gruppe"}
               <select value={draft.targetId} onChange={(e) => setDraft({ ...draft, targetId: e.target.value })}>
                 <option value="">– wählen –</option>
-                {zielListe.map((t) => (
-                  <option key={t.id} value={t.id}>
-                    {t.name}
-                    {draft.kind === "product" && t.brand ? ` · ${t.brand}` : ""}
-                    {draft.kind === "group" && t.child_ids?.length
-                      ? ` (inkl. ${anzahlWort(t.child_ids.length, "Untergruppe", "Untergruppen")})` : ""}
-                  </option>
-                ))}
+                {/* Gruppen als Baum, damit sichtbar ist, was unter was hängt. */}
+                {draft.kind === "group"
+                  ? gruppenOptionen(groups).map((o) => (
+                      <option key={o.key} value={o.id}>
+                        {o.label}
+                        {o.gruppe.child_ids?.length
+                          ? ` (inkl. ${anzahlWort(o.gruppe.child_ids.length, "Untergruppe", "Untergruppen")})` : ""}
+                      </option>
+                    ))
+                  : zielListe.map((t) => (
+                      <option key={t.id} value={t.id}>
+                        {t.name}{t.brand ? ` · ${t.brand}` : ""}
+                      </option>
+                    ))}
               </select>
             </label>
           </div>