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/App.jsx

@@ -1,16 +1,31 @@
 import { NavLink, Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { useAuth } from "./auth";
+import Icon from "./components/Icon";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
 import Products from "./pages/Products";
 import ProductForm from "./pages/ProductForm";
 import CheckIn from "./pages/CheckIn";
 import CheckOut from "./pages/CheckOut";
+import Groups from "./pages/Groups";
 import Locations from "./pages/Locations";
 import Users from "./pages/Users";
 import ShoppingList from "./pages/ShoppingList";
+import History from "./pages/History";
+import Settings from "./pages/Settings";
 
-function Layout({ children }) {
+const navClass = ({ isActive }) => (isActive ? "nav-link active" : "nav-link");
+
+function NavItem({ to, icon, label, end }) {
+  return (
+    <NavLink to={to} end={end} className={navClass}>
+      <Icon name={icon} size={17} />
+      <span className="label">{label}</span>
+    </NavLink>
+  );
+}
+
+function Sidebar() {
   const { user, isAdmin, logout } = useAuth();
   const navigate = useNavigate();
 
@@ -19,39 +34,55 @@ function Layout({ children }) {
     navigate("/login");
   }
 
-  const link = ({ isActive }) => (isActive ? "nav-link active" : "nav-link");
-
   return (
-    <div className="app">
-      <header className="topbar">
-        <div className="brand">🥫 Project-Good</div>
-        <nav className="nav">
-          <NavLink to="/" end className={link}>Übersicht</NavLink>
-          <NavLink to="/checkin" className={link}>Einlagern</NavLink>
-          <NavLink to="/checkout" className={link}>Auslagern</NavLink>
-          <NavLink to="/products" className={link}>Produkte</NavLink>
-          <NavLink to="/shopping" className={link}>Einkaufsliste</NavLink>
-          {isAdmin && <NavLink to="/locations" className={link}>Lagerorte</NavLink>}
-          {isAdmin && <NavLink to="/users" className={link}>Benutzer</NavLink>}
-        </nav>
-        <div className="userbox">
-          <span className="username">
-            {user?.username} {isAdmin && <span className="badge">Admin</span>}
-          </span>
-          <button className="btn ghost" onClick={handleLogout}>Abmelden</button>
+    <aside className="sidebar">
+      <div className="sidebar-brand">
+        <span className="mark"><Icon name="box" size={18} /></span>
+        Project-Good
+      </div>
+      <nav className="sidebar-nav">
+        <NavItem to="/" end icon="dashboard" label="Übersicht" />
+        <NavItem to="/checkin" icon="checkin" label="Einlagern" />
+        <NavItem to="/checkout" icon="checkout" label="Auslagern" />
+        <NavItem to="/products" icon="package" label="Produkte" />
+        <NavItem to="/groups" icon="tag" label="Gruppen" />
+        <NavItem to="/shopping" icon="cart" label="Einkaufsliste" />
+        <NavItem to="/history" icon="history" label="Verlauf" />
+        {isAdmin && (
+          <>
+            <div className="nav-section">Verwaltung</div>
+            <NavItem to="/locations" icon="location" label="Lagerorte" />
+            <NavItem to="/users" icon="users" label="Benutzer" />
+            <NavItem to="/settings" icon="settings" label="Einstellungen" />
+          </>
+        )}
+      </nav>
+      <div className="sidebar-foot">
+        <div className="sidebar-user">
+          <span className="name">{user?.username}</span>
+          <span className="role">{isAdmin ? "Administrator" : "Benutzer"}</span>
         </div>
-      </header>
-      <main className="content">{children}</main>
-    </div>
+        <button className="btn-icon" onClick={handleLogout} title="Abmelden">
+          <Icon name="logout" size={18} />
+        </button>
+      </div>
+    </aside>
   );
 }
 
 function Protected({ children, adminOnly = false }) {
   const { user, isAdmin, loading } = useAuth();
-  if (loading) return <div className="center muted">Lädt…</div>;
+  if (loading) return <div className="center muted" style={{ padding: 60 }}>Lädt…</div>;
   if (!user) return <Navigate to="/login" replace />;
   if (adminOnly && !isAdmin) return <Navigate to="/" replace />;
-  return <Layout>{children}</Layout>;
+  return (
+    <div className="app-shell">
+      <Sidebar />
+      <div className="main">
+        <div className="content">{children}</div>
+      </div>
+    </div>
+  );
 }
 
 export default function App() {
@@ -69,9 +100,12 @@ export default function App() {
       <Route path="/products" element={<Protected><Products /></Protected>} />
       <Route path="/products/new" element={<Protected adminOnly><ProductForm /></Protected>} />
       <Route path="/products/:id" element={<Protected><ProductForm /></Protected>} />
+      <Route path="/groups" element={<Protected><Groups /></Protected>} />
       <Route path="/shopping" element={<Protected><ShoppingList /></Protected>} />
+      <Route path="/history" element={<Protected><History /></Protected>} />
       <Route path="/locations" element={<Protected adminOnly><Locations /></Protected>} />
       <Route path="/users" element={<Protected adminOnly><Users /></Protected>} />
+      <Route path="/settings" element={<Protected adminOnly><Settings /></Protected>} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );