Refactor root admin dashboard UI

app/root/maintenance/page.tsx

@@ -1,27 +1,23 @@
-import { ArrowLeft, LogOut, Power } from "lucide-react";
-import Link from "next/link";
+import { Power } from "lucide-react";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 
-import { AppHeader } from "@/components/layout/app-header";
-import { AppShell } from "@/components/layout/app-shell";
-import { AppSidebar } from "@/components/layout/app-sidebar";
-import { ThemeToggle } from "@/components/theme-toggle";
+import { MotionFade } from "@/components/motion-fade";
+import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { routing } from "@/i18n/routing";
 import { getLocalizedPath } from "@/lib/locale";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getMaintenanceMode, setMaintenanceMode } from "@/lib/app-config";
-import { getRootNavigation } from "@/lib/root-navigation";
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { CardContent } from "@/components/ui/card";
 
 export const dynamic = "force-dynamic";
 
 const copy = {
   title: "Wartungsmodus",
-  subtitle: "Steuerung fuer den globalen Maintenance Status.",
+  subtitle: "Steuerung fuer den globalen Wartungsstatus.",
   overview: "Uebersicht",
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
@@ -75,67 +71,37 @@ export default async function RootMaintenancePage() {
     redirect("/root/maintenance");
   }
 
-  const sidebarItems = getRootNavigation(copy, "maintenance");
-
   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>
-          }
-        />
-      }
-      header={
-        <AppHeader
-          title={copy.title}
-          description={copy.subtitle}
-          actions={
-            <Badge variant={maintenanceEnabled ? "warning" : "success"}>
-              {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
-            </Badge>
-          }
-        />
+    <RootDashboardShell
+      copy={copy}
+      active="maintenance"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+      headerActions={
+        <Badge variant={maintenanceEnabled ? "warning" : "success"}>
+          {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
+        </Badge>
       }
     >
-      <AppCard>
-        <CardHeader>
-          <CardTitle className="text-xl">{copy.title}</CardTitle>
-          <CardDescription>{copy.maintenanceText}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form action={updateMaintenanceMode}>
-            <input
-              type="hidden"
-              name="enabled"
-              value={maintenanceEnabled ? "false" : "true"}
-            />
-            <Button type="submit">
-              <Power className="h-4 w-4" />
-              {maintenanceEnabled ? copy.disableMaintenance : copy.enableMaintenance}
-            </Button>
-          </form>
-        </CardContent>
-      </AppCard>
-    </AppShell>
+      <MotionFade delay={0.1}>
+        <AppCard>
+          <CardContent className="space-y-4 p-6">
+            <p className="text-sm text-muted-foreground">{copy.maintenanceText}</p>
+            <form action={updateMaintenanceMode}>
+              <input
+                type="hidden"
+                name="enabled"
+                value={maintenanceEnabled ? "false" : "true"}
+              />
+              <Button type="submit">
+                <Power className="h-4 w-4" />
+                {maintenanceEnabled ? copy.disableMaintenance : copy.enableMaintenance}
+              </Button>
+            </form>
+          </CardContent>
+        </AppCard>
+      </MotionFade>
+    </RootDashboardShell>
   );
 }