Finalize multilingual routing and translations

app/root/page.tsx

@@ -1,22 +1,19 @@
-import {
-  ArrowLeft,
-  BarChart3,
-  Boxes,
-  FolderKanban,
-  LayoutDashboard,
-  LockKeyhole,
-  LogOut,
-  Power,
-  ShieldAlert,
-  Users2,
-} from "lucide-react";
-import { revalidatePath } from "next/cache";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
+import { ArrowLeft, ExternalLink, LockKeyhole, LogOut } from "lucide-react";
 import Link from "next/link";
+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 { Container } from "@/components/layout/container";
 import { MotionFade } from "@/components/motion-fade";
-import { routing } from "@/i18n/routing";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { getLocalizedPath } from "@/lib/locale";
+import { AppCard } from "@/components/ui/app-card";
+import { Button } from "@/components/ui/button";
+import { CardContent, CardDescription, CardHeader } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   clearAdminSessionCookie,
   getAdminLockState,
@@ -27,17 +24,8 @@ import {
   resetAdminFailedAttempts,
   setAdminSessionCookie,
 } from "@/lib/admin-auth";
-import { getMaintenanceMode, setMaintenanceMode } from "@/lib/app-config";
-import { resolveLocale } from "@/lib/site-data";
-import { AppHeader } from "@/src/components/layout/app-header";
-import { AppShell } from "@/src/components/layout/app-shell";
-import { AppSidebar } from "@/src/components/layout/app-sidebar";
-import { Badge } from "@/src/components/ui/badge";
-import { Button } from "@/src/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/src/components/ui/card";
-import { Input } from "@/src/components/ui/input";
-import { Label } from "@/src/components/ui/label";
-
+import { getMaintenanceMode } from "@/lib/app-config";
+import { getRootNavigation } from "@/lib/root-navigation";
 
 type RootPageProps = {
   searchParams?: {
@@ -47,9 +35,34 @@ type RootPageProps = {
 
 export const dynamic = "force-dynamic";
 
+const copy = {
+  title: "Uebersicht",
+  subtitle: "Interner Bereich fuer Kennzahlen und zentrale Navigation.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  maintenanceTitle: "Wartungsmodus",
+  maintenanceVisitorsClosed: "Website fuer Besucher geschlossen",
+  maintenanceDescription:
+    "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
+  maintenanceOpen: "Website fuer Besucher offen",
+  maintenanceAction: "Zur Wartungsseite",
+  uiKitTitle: "UI Kit",
+  uiKitDescription: "Globale Referenz fuer Cards, Buttons, Inputs und Surface Levels.",
+  uiKitAction: "Zur UI Kit",
+  loginTitle: "Root Login",
+  loginText: "Nur autorisierte Nutzer duerfen diesen Bereich verwenden.",
+  passwordLabel: "Passwort",
+  loginButton: "Einloggen",
+  invalidLogin: "Falsches Passwort.",
+  lockedLogin: "Zu viele Fehlversuche. Bitte spaeter erneut versuchen.",
+  configMissing: "ADMIN_PASSWORD und ADMIN_AUTH_SECRET fehlen in env.",
+  basicAuthMissing: "ROOT_BASIC_AUTH_USER und ROOT_BASIC_AUTH_PASS fehlen in env.",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+  uiKit: "UI Kit",
+};
+
 export default async function RootPage({ searchParams }: RootPageProps) {
-  const requestLocale = cookies().get("NEXT_LOCALE")?.value;
-  const localeKey = resolveLocale(requestLocale ?? "de");
   const authConfigured = isAdminAuthConfigured();
   const basicConfigured = Boolean(
     process.env.ROOT_BASIC_AUTH_USER && process.env.ROOT_BASIC_AUTH_PASS,
@@ -89,121 +102,39 @@ export default async function RootPage({ searchParams }: RootPageProps) {
     redirect("/root");
   }
 
-  async function updateMaintenanceMode(formData: FormData) {
-    "use server";
-
-    if (!isAdminAuthenticated()) {
-      redirect("/root");
-    }
-
-    const nextValue = formData.get("enabled") === "true";
-
-    await setMaintenanceMode(nextValue);
-    revalidatePath("/", "layout");
-    revalidatePath("/root");
-    for (const appLocale of routing.locales) {
-      revalidatePath(`/${appLocale}`, "layout");
-      revalidatePath(`/${appLocale}/coming-soon`);
-    }
-    redirect("/root");
-  }
-
-  const copy =
-    resolveLocale(requestLocale ?? localeKey) === "de"
-      ? {
-          title: "Root",
-          subtitle: "Interner Bereich fuer Kennzahlen und Wartungssteuerung.",
-          activeUsers: "Aktive Nutzer",
-          projects: "Laufende Projekte",
-          products: "Aktive Produkte",
-          conversion: "Conversion",
-          updates: "Letzte Updates",
-          updateOne: "Kontaktformular wurde ueberarbeitet.",
-          updateTwo: "Neue Produktseite fuer Growth Kit vorbereitet.",
-          updateThree: "Portfolio-Daten fuer Q2 aktualisiert.",
-          maintenanceTitle: "Wartungsmodus",
-          maintenanceText:
-            "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
-          maintenanceOn: "Aktiv",
-          maintenanceOff: "Inaktiv",
-          enableMaintenance: "Wartungsmodus aktivieren",
-          disableMaintenance: "Wartungsmodus deaktivieren",
-          loginTitle: "Root Login",
-          loginText: "Nur autorisierte Nutzer duerfen diesen Bereich verwenden.",
-          passwordLabel: "Passwort",
-          loginButton: "Einloggen",
-          invalidLogin: "Falsches Passwort.",
-          lockedLogin: "Zu viele Fehlversuche. Bitte spaeter erneut versuchen.",
-          configMissing: "ADMIN_PASSWORD und ADMIN_AUTH_SECRET fehlen in env.",
-          basicAuthMissing:
-            "ROOT_BASIC_AUTH_USER und ROOT_BASIC_AUTH_PASS fehlen in env.",
-          logout: "Ausloggen",
-          backToSite: "Zur Website",
-        }
-      : {
-          title: "Root",
-          subtitle: "Internal area for metrics and maintenance controls.",
-          activeUsers: "Active users",
-          projects: "Running projects",
-          products: "Active products",
-          conversion: "Conversion",
-          updates: "Latest updates",
-          updateOne: "Contact form layout updated.",
-          updateTwo: "New Growth Kit product page prepared.",
-          updateThree: "Portfolio data updated for Q2.",
-          maintenanceTitle: "Maintenance mode",
-          maintenanceText:
-            "When enabled, all site routes are redirected to the coming soon page.",
-          maintenanceOn: "Enabled",
-          maintenanceOff: "Disabled",
-          enableMaintenance: "Enable maintenance mode",
-          disableMaintenance: "Disable maintenance mode",
-          loginTitle: "Root login",
-          loginText: "Only authorized users can access this area.",
-          passwordLabel: "Password",
-          loginButton: "Sign in",
-          invalidLogin: "Invalid password.",
-          lockedLogin: "Too many failed attempts. Please try again later.",
-          configMissing: "ADMIN_PASSWORD and ADMIN_AUTH_SECRET are missing in env.",
-          basicAuthMissing:
-            "ROOT_BASIC_AUTH_USER and ROOT_BASIC_AUTH_PASS are missing in env.",
-          logout: "Sign out",
-          backToSite: "Back to site",
-        };
-
   if (!authenticated) {
     return (
-      <div className="mx-auto flex w-full max-w-xl flex-col gap-6 px-4 py-12 sm:px-6 lg:px-8">
+      <Container size="narrow" className="py-12">
         <MotionFade>
-          <Card>
+          <AppCard level={3}>
             <CardHeader>
               <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
-                <LockKeyhole className="h-4 w-4" />
+                <LockKeyhole className="h-4 w-4 text-brand-primary" />
                 {copy.loginTitle}
               </p>
               <CardDescription>{copy.loginText}</CardDescription>
             </CardHeader>
             <CardContent>
               {!authConfigured ? (
-                <p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                <p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                   {copy.configMissing}
                 </p>
               ) : null}
 
               {!basicConfigured ? (
-                <p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                <p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                   {copy.basicAuthMissing}
                 </p>
               ) : null}
 
               {searchParams?.error === "invalid" ? (
-                <p className="mb-4 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300">
+                <p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
                   {copy.invalidLogin}
                 </p>
               ) : null}
 
               {searchParams?.error === "locked" || lockState.locked ? (
-                <p className="mb-4 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300">
+                <p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
                   {copy.lockedLogin}
                 </p>
               ) : null}
@@ -211,30 +142,22 @@ export default async function RootPage({ searchParams }: RootPageProps) {
               <form action={loginAction} className="space-y-3">
                 <Label htmlFor="password">{copy.passwordLabel}</Label>
                 <Input id="password" type="password" name="password" required />
-                <Button type="submit" disabled={!authConfigured || !basicConfigured || lockState.locked}>
-                  <LockKeyhole className="mr-2 h-4 w-4" />
+                <Button
+                  type="submit"
+                  disabled={!authConfigured || !basicConfigured || lockState.locked}
+                >
+                  <LockKeyhole className="h-4 w-4" />
                   {copy.loginButton}
                 </Button>
               </form>
             </CardContent>
-          </Card>
+          </AppCard>
         </MotionFade>
-      </div>
+      </Container>
     );
   }
 
-  const stats = [
-    { label: copy.activeUsers, value: "1,280", icon: Users2 },
-    { label: copy.projects, value: "24", icon: FolderKanban },
-    { label: copy.products, value: "8", icon: Boxes },
-    { label: copy.conversion, value: "4.8%", icon: BarChart3 },
-  ];
-
-  const sidebarItems = [
-    { label: copy.title, href: "/root", icon: LayoutDashboard, active: true },
-    { label: copy.maintenanceTitle, href: "#maintenance", icon: ShieldAlert },
-    { label: copy.updates, href: "#updates", icon: FolderKanban },
-  ];
+  const sidebarItems = getRootNavigation(copy, "overview");
 
   return (
     <AppShell
@@ -244,12 +167,23 @@ export default async function RootPage({ searchParams }: RootPageProps) {
           description={copy.subtitle}
           items={sidebarItems}
           footer={
-            <form action={logoutAction}>
-              <Button type="submit" variant="outline" className="w-full justify-start">
-                <LogOut className="mr-2 h-4 w-4" />
-                {copy.logout}
+            <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>
+              <form action={logoutAction}>
+                <Button type="submit" variant="destructive" className="w-full justify-start">
+                  <LogOut className="h-4 w-4" />
+                  {copy.logout}
+                </Button>
+              </form>
+            </div>
           }
         />
       }
@@ -258,73 +192,59 @@ export default async function RootPage({ searchParams }: RootPageProps) {
           title={copy.title}
           description={copy.subtitle}
           actions={
-            <>
-              <Badge variant={maintenanceEnabled ? "warning" : "success"}>
-                {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
-              </Badge>
-              <Button asChild variant="outline">
-                <Link href={`/${localeKey}`}>
-                  <ArrowLeft className="mr-2 h-4 w-4" />
-                  {copy.backToSite}
+            maintenanceEnabled ? (
+              <Button asChild variant="destructive">
+                <Link href="/root/maintenance">
+                  {copy.maintenanceVisitorsClosed}
                 </Link>
               </Button>
-            </>
+            ) : null
           }
         />
       }
     >
       <div className="grid gap-6">
-        <MotionFade delay={0.05}>
-          <Card id="maintenance">
-            <CardHeader>
-              <CardTitle className="text-xl">{copy.maintenanceTitle}</CardTitle>
-              <CardDescription>{copy.maintenanceText}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form action={updateMaintenanceMode}>
-                <input type="hidden" name="enabled" value={maintenanceEnabled ? "false" : "true"} />
-                <Button type="submit">
-                  <Power className="mr-2 h-4 w-4" />
-                  {maintenanceEnabled ? copy.disableMaintenance : copy.enableMaintenance}
+        <section className="grid gap-4 lg:grid-cols-2">
+          <MotionFade delay={0.05}>
+            <AppCard level={2}>
+              <CardHeader>
+                <CardDescription>{copy.maintenanceTitle}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-lg font-semibold text-foreground">
+                  {maintenanceEnabled ? copy.maintenanceVisitorsClosed : copy.maintenanceOpen}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {copy.maintenanceDescription}
+                </p>
+                <Button asChild variant={maintenanceEnabled ? "destructive" : "outline"}>
+                  <Link href="/root/maintenance">
+                    {copy.maintenanceAction}
+                    <ExternalLink className="h-4 w-4" />
+                  </Link>
                 </Button>
-              </form>
-            </CardContent>
-          </Card>
-        </MotionFade>
+              </CardContent>
+            </AppCard>
+          </MotionFade>
 
-        <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          {stats.map((item, index) => {
-            const Icon = item.icon;
-            return (
-              <MotionFade key={item.label} delay={index * 0.05}>
-                <Card>
-                  <CardContent className="p-5">
-                    <Icon className="h-5 w-5 text-muted-foreground" />
-                    <p className="mt-3 text-sm text-muted-foreground">{item.label}</p>
-                    <p className="mt-1 text-2xl font-semibold text-foreground">{item.value}</p>
-                  </CardContent>
-                </Card>
-              </MotionFade>
-            );
-          })}
+          <MotionFade delay={0.1}>
+            <AppCard level={2}>
+              <CardHeader>
+                <CardDescription>{copy.uiKitTitle}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-lg font-semibold text-foreground">{copy.uiKitTitle}</p>
+                <p className="text-sm text-muted-foreground">{copy.uiKitDescription}</p>
+                <Button asChild variant="outline">
+                  <Link href="/root/ui-kit">
+                    {copy.uiKitAction}
+                    <ExternalLink className="h-4 w-4" />
+                  </Link>
+                </Button>
+              </CardContent>
+            </AppCard>
+          </MotionFade>
         </section>
-
-        <MotionFade delay={0.1}>
-          <Card id="updates">
-            <CardHeader>
-              <CardTitle className="text-xl">{copy.updates}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ul className="space-y-3">
-                {[copy.updateOne, copy.updateTwo, copy.updateThree].map((item) => (
-                  <li key={item} className="rounded-[var(--radius-input)] border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </CardContent>
-          </Card>
-        </MotionFade>
       </div>
     </AppShell>
   );