Refactor root admin dashboard UI

components/root/root-dashboard-shell.tsx

@@ -1,10 +1,19 @@
 import type { ReactNode } from "react";
-import { ArrowLeft, LogOut } from "lucide-react";
+import {
+  ArrowLeft,
+  FolderKanban,
+  ImageIcon,
+  LayoutDashboard,
+  LogOut,
+  PlusSquare,
+  ShieldAlert,
+  SwatchBook,
+  Tags,
+} from "lucide-react";
 import Link from "next/link";
 
-import { AppHeader } from "@/components/layout/app-header";
-import { AppShell } from "@/components/layout/app-shell";
-import { AppSidebar } from "@/components/layout/app-sidebar";
+import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
+import { MotionFade } from "@/components/motion-fade";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 import { getLocalizedPath } from "@/lib/locale";
@@ -30,6 +39,7 @@ type RootDashboardShellProps = {
   headerTitle: string;
   headerDescription: string;
   headerActions?: ReactNode;
+  toolbar?: ReactNode;
   children: ReactNode;
 };
 
@@ -41,47 +51,85 @@ export function RootDashboardShell({
   headerTitle,
   headerDescription,
   headerActions,
+  toolbar,
   children,
 }: RootDashboardShellProps) {
-  const sidebarItems = getRootNavigation(copy, active, portfolioChild);
+  const sidebarItems = getRootNavigation(copy, active, portfolioChild).filter(
+    (item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
+  );
+  const headerIcon =
+    active === "overview"
+      ? LayoutDashboard
+      : active === "maintenance"
+        ? ShieldAlert
+        : active === "ui-kit"
+          ? SwatchBook
+          : active === "media"
+            ? ImageIcon
+            : portfolioChild === "categories"
+              ? Tags
+              : portfolioChild === "new-project"
+                ? PlusSquare
+                : FolderKanban;
+  const sharedActions = (
+    <>
+      <ThemeToggle ariaLabel="Theme wechseln" />
+      <Button asChild variant="outline" size="sm">
+        <Link href={getLocalizedPath("de")}>
+          <ArrowLeft className="h-4 w-4" />
+          {copy.backToSite}
+        </Link>
+      </Button>
+      <form action={logoutAction}>
+        <Button type="submit" variant="ghost" size="sm" className="text-destructive hover:bg-destructive/10 hover:text-destructive">
+          <LogOut className="h-4 w-4" />
+          {copy.logout}
+        </Button>
+      </form>
+    </>
+  );
 
   return (
-    <AppShell
-      sidebar={
-        <AppSidebar
-          title={copy.title}
-          description={copy.subtitle}
-          items={sidebarItems}
-          footer={
-            <div className="space-y-2">
-              <div className="flex items-center gap-2">
-                <ThemeToggle ariaLabel="Theme wechseln" />
-              </div>
-              <Button asChild variant="outline" className="w-full justify-start">
-                <Link href={getLocalizedPath("de")}>
-                  <ArrowLeft className="h-4 w-4" />
-                  {copy.backToSite}
-                </Link>
-              </Button>
-              <form action={logoutAction}>
-                <Button type="submit" variant="destructive" className="w-full justify-start">
-                  <LogOut className="h-4 w-4" />
-                  {copy.logout}
-                </Button>
-              </form>
-            </div>
-          }
-        />
+    <DashboardLayout
+      title={headerTitle}
+      description={headerDescription}
+      icon={headerIcon}
+      items={sidebarItems}
+      sidebarFooter={
+        <>
+          <Button
+            asChild
+            variant={active === "maintenance" ? "default" : "outline"}
+            className="w-full justify-between"
+          >
+            <Link href="/root/maintenance">
+              {copy.maintenance}
+              <ShieldAlert className="h-4 w-4" />
+            </Link>
+          </Button>
+          <Button
+            asChild
+            variant={active === "ui-kit" ? "default" : "outline"}
+            className="w-full justify-between"
+          >
+            <Link href="/root/ui-kit">
+              {copy.uiKit}
+              <SwatchBook className="h-4 w-4" />
+            </Link>
+          </Button>
+        </>
       }
-      header={
-        <AppHeader
-          title={headerTitle}
-          description={headerDescription}
-          actions={headerActions}
-        />
+      headerActions={
+        <div className="flex flex-wrap items-center justify-end gap-2">
+          {headerActions}
+          {sharedActions}
+        </div>
       }
     >
-      {children}
-    </AppShell>
+      <div className="space-y-6">
+        {toolbar ? <MotionFade delay={0.05}>{toolbar}</MotionFade> : null}
+        {children}
+      </div>
+    </DashboardLayout>
   );
 }