feat: vollständiges Dashboard-Redesign mit HeroUI - monolithische App.tsx aufgelöst, 16 Seiten, Context-API, collapsible Sidebar, neues Dashboard-Layout

frontend/src/components/layout/AppLayout.tsx

@@ -0,0 +1,39 @@
+import { Spinner } from '@heroui/react';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+import { useApp } from '../../context/AppContext';
+
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  const { loading, guilds } = useApp();
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner color="primary" label="Dashboard wird geladen..." size="lg" />
+      </div>
+    );
+  }
+
+  if (!guilds.length) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-default-500">Keine Server verfügbar</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <div className="hidden shrink-0 lg:block">
+        <Sidebar />
+      </div>
+
+      <main className="flex flex-1 flex-col overflow-y-auto">
+        <div className="mx-auto w-full max-w-[1520px] px-6 py-6">
+          <Header />
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}