feat(ui): admin-only root link and shared header navigation

app/root/page.tsx

@@ -1,7 +1,9 @@
 import {
+  ArrowLeft,
   BarChart3,
   Boxes,
   FolderKanban,
+  LayoutDashboard,
   LockKeyhole,
   LogOut,
   Power,
@@ -11,8 +13,10 @@ import {
 import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 import { MotionFade } from "@/components/motion-fade";
+import { routing } from "@/i18n/routing";
 import {
   clearAdminSessionCookie,
   getAdminLockState,
@@ -23,9 +27,17 @@ import {
   resetAdminFailedAttempts,
   setAdminSessionCookie,
 } from "@/lib/admin-auth";
-import { routing } from "@/i18n/routing";
 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";
+
 
 type RootPageProps = {
   searchParams?: {
@@ -126,6 +138,7 @@ export default async function RootPage({ searchParams }: RootPageProps) {
           basicAuthMissing:
             "ROOT_BASIC_AUTH_USER und ROOT_BASIC_AUTH_PASS fehlen in env.",
           logout: "Ausloggen",
+          backToSite: "Zur Website",
         }
       : {
           title: "Root",
@@ -155,63 +168,56 @@ export default async function RootPage({ searchParams }: RootPageProps) {
           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">
         <MotionFade>
-          <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-            <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-              <LockKeyhole className="h-4 w-4" />
-              {copy.loginTitle}
-            </p>
-            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">{copy.loginText}</p>
-
-            {!authConfigured ? (
-              <p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300">
-                {copy.configMissing}
-              </p>
-            ) : null}
-
-            {!basicConfigured ? (
-              <p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300">
-                {copy.basicAuthMissing}
-              </p>
-            ) : null}
-
-            {searchParams?.error === "invalid" ? (
-              <p className="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300">
-                {copy.invalidLogin}
-              </p>
-            ) : null}
-
-            {searchParams?.error === "locked" || lockState.locked ? (
-              <p className="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300">
-                {copy.lockedLogin}
-              </p>
-            ) : null}
-
-            <form action={loginAction} className="mt-5 space-y-3">
-              <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                {copy.passwordLabel}
-              </label>
-              <input
-                type="password"
-                name="password"
-                required
-                className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none ring-zinc-300 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:ring-zinc-700"
-              />
-              <button
-                type="submit"
-                className="inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
-                disabled={!authConfigured || !basicConfigured || lockState.locked}
-              >
+          <Card>
+            <CardHeader>
+              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
                 <LockKeyhole className="h-4 w-4" />
-                {copy.loginButton}
-              </button>
-            </form>
-          </section>
+                {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">
+                  {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">
+                  {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">
+                  {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">
+                  {copy.lockedLogin}
+                </p>
+              ) : null}
+
+              <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" />
+                  {copy.loginButton}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
         </MotionFade>
       </div>
     );
@@ -224,102 +230,102 @@ export default async function RootPage({ searchParams }: RootPageProps) {
     { 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 },
+  ];
+
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
-      <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
-              {copy.title}
-            </h1>
+    <AppShell
+      sidebar={
+        <AppSidebar
+          title={copy.title}
+          description={copy.subtitle}
+          items={sidebarItems}
+          footer={
             <form action={logoutAction}>
-              <button
-                type="submit"
-                className="inline-flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-900"
-              >
-                <LogOut className="h-4 w-4" />
+              <Button type="submit" variant="outline" className="w-full justify-start">
+                <LogOut className="mr-2 h-4 w-4" />
                 {copy.logout}
-              </button>
+              </Button>
             </form>
-          </div>
-          <p className="mt-4 max-w-3xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
-            {copy.subtitle}
-          </p>
+          }
+        />
+      }
+      header={
+        <AppHeader
+          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}
+                </Link>
+              </Button>
+            </>
+          }
+        />
+      }
+    >
+      <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}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </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>
+            );
+          })}
         </section>
-      </MotionFade>
 
-      <MotionFade delay={0.05}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <div className="flex flex-wrap items-start justify-between gap-4">
-            <div>
-              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                <ShieldAlert className="h-4 w-4" />
-                {copy.maintenanceTitle}
-              </p>
-              <p className="mt-2 max-w-2xl text-sm text-zinc-600 dark:text-zinc-300">
-                {copy.maintenanceText}
-              </p>
-            </div>
-            <span
-              className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${
-                maintenanceEnabled
-                  ? "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200"
-                  : "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200"
-              }`}
-            >
-              {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
-            </span>
-          </div>
-
-          <form action={updateMaintenanceMode} className="mt-5">
-            <input
-              type="hidden"
-              name="enabled"
-              value={maintenanceEnabled ? "false" : "true"}
-            />
-            <button
-              type="submit"
-              className="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:border-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
-            >
-              <Power className="h-4 w-4" />
-              {maintenanceEnabled ? copy.disableMaintenance : copy.enableMaintenance}
-            </button>
-          </form>
-        </section>
-      </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}>
-              <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-                <Icon className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
-                <p className="mt-3 text-sm text-zinc-500 dark:text-zinc-400">{item.label}</p>
-                <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
-                  {item.value}
-                </p>
-              </article>
-            </MotionFade>
-          );
-        })}
-      </section>
-
-      <MotionFade delay={0.1}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{copy.updates}</h2>
-          <ul className="mt-4 space-y-3">
-            {[copy.updateOne, copy.updateTwo, copy.updateThree].map((item) => (
-              <li
-                key={item}
-                className="rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200"
-              >
-                {item}
-              </li>
-            ))}
-          </ul>
-        </section>
-      </MotionFade>
-    </div>
+        <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>
   );
 }