Web-UI: professionelles Redesign (Icons statt Emojis) + neue Features

Design:
- Neues Icon-Set (Inline-SVG, Feather-Stil), keine Emojis mehr
- Kohaerentes Design-System (Sidebar-Layout, Palette, Spacing, Light/Dark)
- Alle Seiten ueberarbeitet (Login, Dashboard, Produkte, Formular, Ein-/Auslagern,
  Lagerorte, Benutzer, Einkaufsliste)

Neue Features:
- Gruppen-Verwaltung (anlegen/bearbeiten/loeschen, Produktzahl + Bestand,
  Gruppen-Mindestbestand) inkl. Einkaufsliste
- Einfache Gruppen-Auto-Zuordnung aus OFF-Kategorie im Produktformular
- Verlauf-Seite (Bewegungen: wer/was/wann) via neuem /movements-Endpoint
- Einstellungen-Seite (Ablauf-Warnfrist)
- Lagerorte mit optional uebergeordnetem Ort (verschachtelbar)

Backend:
- groups: PATCH + Anreicherung (product_count, stock)
- views: /shopping-list/groups, /movements
- schemas: GroupUpdate, GroupShoppingItem, MovementOut

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

web/src/pages/History.jsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { api } from "../api";
+import Icon from "../components/Icon";
+import { fmt, unitShort } from "../units";
+
+const TYPE_LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" };
+
+export default function History() {
+  const [movements, setMovements] = useState([]);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    api.listMovements(150).then(setMovements).catch((e) => setError(e.message));
+  }, []);
+
+  return (
+    <div>
+      <div className="page-head">
+        <div>
+          <h1>Verlauf</h1>
+          <div className="sub">Wer hat wann was ein- und ausgelagert</div>
+        </div>
+      </div>
+      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
+
+      <div className="card" style={{ padding: 0 }}>
+        <div className="table-wrap">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Zeitpunkt</th>
+                <th>Aktion</th>
+                <th>Produkt</th>
+                <th className="num">Menge</th>
+                <th>Benutzer</th>
+              </tr>
+            </thead>
+            <tbody>
+              {movements.map((m) => (
+                <tr key={m.id}>
+                  <td className="muted">{new Date(m.created_at).toLocaleString("de-DE")}</td>
+                  <td>
+                    <span className={`badge ${m.type === "in" ? "ok" : m.type === "out" ? "warn" : ""}`}>
+                      <Icon name={m.type === "in" ? "checkin" : m.type === "out" ? "checkout" : "edit"} size={13} />
+                      {TYPE_LABEL[m.type] || m.type}
+                    </span>
+                  </td>
+                  <td>{m.product_name}</td>
+                  <td className="num">{fmt(m.quantity)} {unitShort(m.base_unit)}</td>
+                  <td className="muted">{m.username || "–"}</td>
+                </tr>
+              ))}
+              {movements.length === 0 && (
+                <tr><td colSpan={5} className="empty">Noch keine Bewegungen.</td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}