Improve admin save UX and portfolio navigation

2026-03-07 19:20:58 +01:00
parent 3d1976a7a5
commit ee21e8b823
19 changed files with 652 additions and 424 deletions
@@ -0,0 +1,39 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+import { routing } from "@/i18n/routing";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getLocalizedPath } from "@/lib/locale";
+import { setMaintenanceMode } from "@/lib/app-config";
+
+function ensureAdmin() {
+  if (!isAdminAuthenticated()) {
+    clearAdminSessionCookie();
+    redirect("/root");
+  }
+}
+
+export async function updateMaintenanceModeAction(formData: FormData) {
+  ensureAdmin();
+
+  const nextValue = formData.get("enabled") === "true";
+  const redirectPath = String(formData.get("redirectPath") ?? "/root");
+  const redirectUrl = new URL(redirectPath, "http://localhost");
+  redirectUrl.searchParams.set("__saved", "maintenance");
+
+  await setMaintenanceMode(nextValue);
+  revalidatePath("/", "layout");
+  revalidatePath("/coming-soon");
+  revalidatePath("/root");
+  revalidatePath("/root/maintenance");
+  revalidatePath(redirectPath);
+
+  for (const appLocale of routing.locales) {
+    revalidatePath(getLocalizedPath(appLocale), "layout");
+    revalidatePath(getLocalizedPath(appLocale, "/coming-soon"));
+  }
+
+  redirect(`${redirectUrl.pathname}${redirectUrl.search}`);
+}
@@ -1,18 +1,12 @@
-import { Power } from "lucide-react";
-import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";

-import { FormSaveButton } from "@/components/root/form-save-button";
 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 { getMaintenanceMode } from "@/lib/app-config";
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
 import { CardContent } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";

 export const dynamic = "force-dynamic";

@@ -28,8 +22,7 @@ const copy = {
  maintenanceText: "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
  maintenanceOn: "Aktiv",
  maintenanceOff: "Inaktiv",
-  selectLabel: "Status",
-  selectHint: "Aenderung wird erst nach Speichern uebernommen.",
+  selectHint: "Aenderung erfolgt jetzt direkt ueber den Schalter in der Sidebar und wird mit dem Save Button oben gespeichert.",
  logout: "Ausloggen",
  backToSite: "Zur Website",
 };
@@ -42,7 +35,6 @@ export default async function RootMaintenancePage() {
  }

  const maintenanceEnabled = await getMaintenanceMode();
-
  async function logoutAction() {
    "use server";

@@ -50,29 +42,6 @@ export default async function RootMaintenancePage() {
    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("/coming-soon");
-    revalidatePath("/root");
-    revalidatePath("/root/maintenance");
-
-    for (const appLocale of routing.locales) {
-      revalidatePath(getLocalizedPath(appLocale), "layout");
-      revalidatePath(getLocalizedPath(appLocale, "/coming-soon"));
-    }
-
-    redirect("/root/maintenance");
-  }
-
  return (
    <RootDashboardShell
      copy={copy}
@@ -80,38 +49,17 @@ export default async function RootMaintenancePage() {
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
-      headerActions={
-        <>
-          <Badge variant={maintenanceEnabled ? "warning" : "success"}>
-            {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
-          </Badge>
-          <FormSaveButton formId="maintenance-form" />
-        </>
-      }
    >
      <MotionFade delay={0.1}>
        <AppCard>
          <CardContent className="space-y-4 p-6">
            <p className="text-sm text-muted-foreground">{copy.maintenanceText}</p>
-            <form id="maintenance-form" action={updateMaintenanceMode} className="space-y-3">
-              <div className="space-y-2">
-                <Label htmlFor="enabled">{copy.selectLabel}</Label>
-                <select
-                  id="enabled"
-                  name="enabled"
-                  defaultValue={maintenanceEnabled ? "true" : "false"}
-                  className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
-                >
-                  <option value="false">{copy.maintenanceOff}</option>
-                  <option value="true">{copy.maintenanceOn}</option>
-                </select>
-                <p className="text-xs text-muted-foreground">{copy.selectHint}</p>
-              </div>
-              <div className="inline-flex items-center gap-2 rounded-nested border border-border bg-surface-1 px-3 py-2 text-sm text-foreground">
-                <Power className="h-4 w-4 text-brand-primary" />
+            <div className="flex flex-wrap items-center gap-3">
+              <Badge variant={maintenanceEnabled ? "warning" : "success"}>
                {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
-              </div>
-            </form>
+              </Badge>
+              <p className="text-xs text-muted-foreground">{copy.selectHint}</p>
+            </div>
          </CardContent>
        </AppCard>
      </MotionFade>
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";

 import { MotionFade } from "@/components/motion-fade";
+import { FlashMessage } from "@/components/root/flash-message";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
@@ -74,17 +75,13 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
      <div className="space-y-6">
        {searchParams?.success ? (
          <MotionFade delay={0.1}>
-            <p className="rounded-nested border border-status-success/30 bg-status-success/10 px-4 py-3 text-sm text-status-success">
-              {searchParams.success}
-            </p>
+            <FlashMessage type="success" message={searchParams.success} />
          </MotionFade>
        ) : null}

        {searchParams?.error ? (
          <MotionFade delay={0.12}>
-            <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-              {searchParams.error}
-            </p>
+            <FlashMessage type="error" message={searchParams.error} />
          </MotionFade>
        ) : null}

@@ -277,13 +277,6 @@ export default async function RootPage({ searchParams }: RootPageProps) {
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
-      sidebarTopContent={
-        maintenanceEnabled ? (
-          <p className="px-1 text-xs font-medium text-destructive">
-            {copy.maintenanceVisitorsShort}
-          </p>
-        ) : null
-      }
    >
      <div className="space-y-6">
        <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
@@ -574,7 +574,7 @@ export async function deleteProjectAction(formData: FormData) {
    });

    if (!project) {
-      redirect(withMessage("/root/portfolio/projects", "error", "Project not found."));
+      redirect(withMessage("/root/portfolio", "error", "Project not found."));
    }

    await prisma.portfolioProject.delete({
@@ -591,12 +591,12 @@ export async function deleteProjectAction(formData: FormData) {
      revalidatePath(getLocalizedPath(locale, `/portfolio/${project.slug}`));
    }

-    redirect(withMessage("/root/portfolio/projects", "success", "Project deleted."));
+    redirect(withMessage("/root/portfolio", "success", "Project deleted."));
  } catch (error) {
    if (isRedirectError(error)) {
      throw error;
    }

-    redirect(withMessage("/root/portfolio/projects", "error", "Unable to delete project."));
+    redirect(withMessage("/root/portfolio", "error", "Unable to delete project."));
  }
 }
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";

 import { MotionFade } from "@/components/motion-fade";
+import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioSubnav } from "@/components/root/portfolio-subnav";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { AppCard } from "@/components/ui/app-card";
@@ -74,22 +75,19 @@ export default async function RootPortfolioCategoriesPage({
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
+      saveFormSelector="[data-topbar-save-form='category']"
      toolbar={<PortfolioSubnav active="categories" />}
    >
      <div className="space-y-6">
        {searchParams?.success ? (
          <MotionFade delay={0.1}>
-            <p className="rounded-nested border border-status-success/30 bg-status-success/10 px-4 py-3 text-sm text-status-success">
-              {searchParams.success}
-            </p>
+            <FlashMessage type="success" message={searchParams.success} />
          </MotionFade>
        ) : null}

        {searchParams?.error ? (
          <MotionFade delay={0.12}>
-            <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-              {searchParams.error}
-            </p>
+            <FlashMessage type="error" message={searchParams.error} />
          </MotionFade>
        ) : null}

@@ -100,7 +98,12 @@ export default async function RootPortfolioCategoriesPage({
              <CardDescription>Eine Kategorie wird genau einem oder mehreren Projekten zugeordnet.</CardDescription>
            </CardHeader>
            <CardContent>
-              <form action={upsertCategoryAction} className="grid gap-4 md:grid-cols-2">
+              <form
+                id="portfolio-category-create-form"
+                action={upsertCategoryAction}
+                className="grid gap-4 md:grid-cols-2"
+                data-topbar-save-form="category"
+              >
              <input type="hidden" name="redirectPath" value="/root/portfolio/categories" />
              <div className="space-y-2">
                <Label htmlFor="create-slug">Slug</Label>
@@ -162,7 +165,12 @@ export default async function RootPortfolioCategoriesPage({
            <MotionFade key={category.id} delay={0.18 + index * 0.03}>
              <AppCard>
                <CardContent className="p-6">
-                  <form action={upsertCategoryAction} className="grid gap-4 md:grid-cols-2">
+                  <form
+                    id={`portfolio-category-form-${category.id}`}
+                    action={upsertCategoryAction}
+                    className="grid gap-4 md:grid-cols-2"
+                    data-topbar-save-form="category"
+                  >
                  <input type="hidden" name="id" value={category.id} />
                  <input type="hidden" name="redirectPath" value="/root/portfolio/categories" />

@@ -1,18 +1,20 @@
-import { Boxes, FolderKanban, ImageIcon, Layers3, Plus, Tags } from "lucide-react";
+import { Boxes, ExternalLink, FolderKanban, Layers3, Plus, Tags } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";

-import { PortfolioSubnav } from "@/components/root/portfolio-subnav";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { MotionFade } from "@/components/motion-fade";
+import { FlashMessage } from "@/components/root/flash-message";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
-import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import {
  getAdminPortfolioCategories,
  getAdminPortfolioProjects,
+  getLocalizedValue,
 } from "@/lib/portfolio";
+import { getLocalizedPath } from "@/lib/locale";

 export const dynamic = "force-dynamic";

@@ -29,14 +31,32 @@ const copy = {
  totalCategories: "Kategorien",
  totalProjects: "Projekte",
  publishedProjects: "Veroeffentlicht",
-  categoriesAction: "Kategorien verwalten",
-  projectsAction: "Projekte verwalten",
  newProject: "Neues Projekt",
  newCategory: "Neue Kategorie",
-  media: "Media",
+  category: "Kategorie",
+  all: "Alle",
+  status: "Status",
+  draft: "Entwurf",
+  published: "Veroeffentlicht",
+  filter: "Filtern",
+  sort: "Sortierung",
+  previewSet: "Preview Link gesetzt",
+  previewMissing: "Kein Preview Link",
+  editProject: "Projekt bearbeiten",
+  openProject: "Projekt ansehen",
+  empty: "Keine Projekte fuer die aktuellen Filter gefunden.",
 };

-export default async function RootPortfolioPage() {
+type RootPortfolioPageProps = {
+  searchParams?: {
+    category?: string;
+    status?: "all" | "draft" | "published";
+    success?: string;
+    error?: string;
+  };
+};
+
+export default async function RootPortfolioPage({ searchParams }: RootPortfolioPageProps) {
  if (!isAdminAuthenticated()) {
    redirect("/root");
  }
@@ -48,9 +68,15 @@ export default async function RootPortfolioPage() {
    redirect("/root");
  }

+  const selectedStatus = searchParams?.status === "draft" || searchParams?.status === "published"
+    ? searchParams.status
+    : "all";
  const [categories, projects] = await Promise.all([
    getAdminPortfolioCategories(),
-    getAdminPortfolioProjects(),
+    getAdminPortfolioProjects({
+      categoryId: searchParams?.category || undefined,
+      status: selectedStatus,
+    }),
  ]);
  const publishedProjects = projects.filter((project) => project.isPublished).length;

@@ -62,7 +88,6 @@ export default async function RootPortfolioPage() {
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
-      toolbar={<PortfolioSubnav active="overview" />}
      headerActions={
        <div className="flex flex-wrap gap-3">
          <Button asChild>
@@ -81,6 +106,18 @@ export default async function RootPortfolioPage() {
      }
    >
      <div className="space-y-6">
+        {searchParams?.success ? (
+          <MotionFade delay={0.08}>
+            <FlashMessage type="success" message={searchParams.success} />
+          </MotionFade>
+        ) : null}
+
+        {searchParams?.error ? (
+          <MotionFade delay={0.1}>
+            <FlashMessage type="error" message={searchParams.error} />
+          </MotionFade>
+        ) : null}
+
        <section className="grid gap-4 md:grid-cols-3">
          {[
            {
@@ -119,55 +156,113 @@ export default async function RootPortfolioPage() {
          })}
        </section>

-        <section className="grid gap-4 lg:grid-cols-3">
-          <MotionFade delay={0.18}>
-            <AppCard>
-              <CardHeader>
-                <CardTitle>{copy.totalCategories}</CardTitle>
-                <CardDescription>Sortieren, aktivieren und neue Portfolio Gruppen anlegen.</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button asChild variant="outline">
-                  <Link href="/root/portfolio/categories">{copy.categoriesAction}</Link>
-                </Button>
-              </CardContent>
-            </AppCard>
-          </MotionFade>
+        <MotionFade delay={0.15}>
+          <AppCard>
+            <CardContent className="p-6">
+              <form className="grid gap-4 md:grid-cols-3">
+                <div className="space-y-2">
+                  <label htmlFor="category" className="text-sm font-medium text-foreground">
+                    {copy.category}
+                  </label>
+                  <select
+                    id="category"
+                    name="category"
+                    defaultValue={searchParams?.category ?? ""}
+                    className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
+                  >
+                    <option value="">{copy.all}</option>
+                    {categories.map((category) => (
+                      <option key={category.id} value={category.id}>
+                        {category.name.de}
+                      </option>
+                    ))}
+                  </select>
+                </div>

-          <MotionFade delay={0.22}>
-            <AppCard>
-              <CardHeader>
-                <CardTitle>{copy.totalProjects}</CardTitle>
-                <CardDescription>Entwuerfe, veroeffentlichte Projekte und flexible Abschnitte pflegen.</CardDescription>
-              </CardHeader>
-              <CardContent className="flex gap-3">
-                <Button asChild variant="outline">
-                  <Link href="/root/portfolio/projects">{copy.projectsAction}</Link>
-                </Button>
-                <Button asChild>
-                  <Link href="/root/portfolio/projects/new">{copy.newProject}</Link>
-                </Button>
-              </CardContent>
-            </AppCard>
-          </MotionFade>
+                <div className="space-y-2">
+                  <label htmlFor="status" className="text-sm font-medium text-foreground">
+                    {copy.status}
+                  </label>
+                  <select
+                    id="status"
+                    name="status"
+                    defaultValue={selectedStatus}
+                    className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
+                  >
+                    <option value="all">{copy.all}</option>
+                    <option value="draft">{copy.draft}</option>
+                    <option value="published">{copy.published}</option>
+                  </select>
+                </div>

-          <MotionFade delay={0.26}>
-            <AppCard>
-              <CardHeader>
-                <CardTitle>{copy.media}</CardTitle>
-                <CardDescription>Alle Cover und Projektdateien an einem Ort pruefen.</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button asChild variant="outline">
-                  <Link href="/root/media">
-                    <ImageIcon className="h-4 w-4" />
-                    {copy.media}
-                  </Link>
-                </Button>
-              </CardContent>
-            </AppCard>
-          </MotionFade>
-        </section>
+                <div className="flex items-end">
+                  <Button type="submit" variant="outline">
+                    {copy.filter}
+                  </Button>
+                </div>
+              </form>
+            </CardContent>
+          </AppCard>
+        </MotionFade>
+
+        <div className="grid gap-4">
+          {projects.map((project, index) => (
+            <MotionFade key={project.id} delay={0.18 + index * 0.03}>
+              <AppCard interactive>
+                <CardHeader className="flex flex-row items-center justify-between gap-4">
+                  <div>
+                    <CardTitle>{getLocalizedValue(project.title, "de")}</CardTitle>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {project.category.name.de}
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                    <span className="rounded-pill border border-border px-3 py-1">
+                      {project.isPublished ? copy.published : copy.draft}
+                    </span>
+                    <span className="rounded-pill border border-border px-3 py-1">
+                      {project.projectYear}
+                    </span>
+                    <span className="rounded-pill border border-border px-3 py-1">
+                      {copy.sort} {project.sortOrder}
+                    </span>
+                  </div>
+                </CardHeader>
+                <CardContent className="flex flex-wrap items-center justify-between gap-4">
+                  <div className="space-y-1 text-sm text-muted-foreground">
+                    <p>{project.slug}</p>
+                    <p>{project.previewUrl ? copy.previewSet : copy.previewMissing}</p>
+                  </div>
+                  <div className="flex flex-wrap gap-3">
+                    <Button asChild variant="outline">
+                      <Link
+                        href={getLocalizedPath("de", `/portfolio/${project.slug}`)}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <ExternalLink className="h-4 w-4" />
+                        {copy.openProject}
+                      </Link>
+                    </Button>
+                    <Button asChild>
+                      <Link href={`/root/portfolio/projects/${project.id}`}>{copy.editProject}</Link>
+                    </Button>
+                  </div>
+                </CardContent>
+              </AppCard>
+            </MotionFade>
+          ))}
+
+          {projects.length === 0 ? (
+            <MotionFade delay={0.18}>
+              <AppCard>
+                <CardContent className="p-6 text-sm text-muted-foreground">
+                  {copy.empty}
+                </CardContent>
+              </AppCard>
+            </MotionFade>
+          ) : null}
+        </div>
      </div>
    </RootDashboardShell>
  );
@@ -1,8 +1,8 @@
 import { redirect } from "next/navigation";

 import { MotionFade } from "@/components/motion-fade";
+import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioProjectForm } from "@/components/root/portfolio-project-form";
-import { PortfolioSubnav } from "@/components/root/portfolio-subnav";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
@@ -67,7 +67,7 @@ export default async function RootPortfolioProjectPage({
  ]);

  if (!project) {
-    redirect("/root/portfolio/projects?error=Project+not+found.");
+    redirect("/root/portfolio?error=Project+not+found.");
  }

  return (
@@ -78,22 +78,18 @@ export default async function RootPortfolioProjectPage({
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
-      toolbar={<PortfolioSubnav active="projects" />}
+      saveFormId="portfolio-project-form"
    >
      <div className="space-y-6">
        {searchParams?.success ? (
          <MotionFade delay={0.1}>
-            <p className="rounded-nested border border-status-success/30 bg-status-success/10 px-4 py-3 text-sm text-status-success">
-              {searchParams.success}
-            </p>
+            <FlashMessage type="success" message={searchParams.success} />
          </MotionFade>
        ) : null}

        {searchParams?.error ? (
          <MotionFade delay={0.12}>
-            <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-              {searchParams.error}
-            </p>
+            <FlashMessage type="error" message={searchParams.error} />
          </MotionFade>
        ) : null}

@@ -103,6 +99,7 @@ export default async function RootPortfolioProjectPage({
            categories={categories}
            mediaOptions={mediaOptions}
            project={project}
+            formId="portfolio-project-form"
            redirectPath={`/root/portfolio/projects/${project.id}`}
            submitLabel={copy.saveProject}
          />
@@ -1,8 +1,8 @@
 import { redirect } from "next/navigation";

 import { MotionFade } from "@/components/motion-fade";
+import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioProjectForm } from "@/components/root/portfolio-project-form";
-import { PortfolioSubnav } from "@/components/root/portfolio-subnav";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getMediaOptions } from "@/lib/media";
@@ -58,14 +58,12 @@ export default async function RootNewPortfolioProjectPage({
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
-      toolbar={<PortfolioSubnav active="projects" />}
+      saveFormId="portfolio-project-form"
    >
      <div className="space-y-6">
        {searchParams?.error ? (
          <MotionFade delay={0.1}>
-            <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-              {searchParams.error}
-            </p>
+            <FlashMessage type="error" message={searchParams.error} />
          </MotionFade>
        ) : null}

@@ -74,6 +72,7 @@ export default async function RootNewPortfolioProjectPage({
            action={saveProjectAction}
            categories={categories}
            mediaOptions={mediaOptions}
+            formId="portfolio-project-form"
            redirectPath="/root/portfolio/projects/new"
            submitLabel="Projekt anlegen"
          />
@@ -1,47 +1,7 @@
-import { Plus } from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";

-import { MotionFade } from "@/components/motion-fade";
-import { PortfolioSubnav } from "@/components/root/portfolio-subnav";
-import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
-import { AppCard } from "@/components/ui/app-card";
-import { Button } from "@/components/ui/button";
-import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
-import {
-  getAdminPortfolioCategories,
-  getAdminPortfolioProjects,
-  getLocalizedValue,
-} from "@/lib/portfolio";
-
 export const dynamic = "force-dynamic";

-const copy = {
-  title: "Portfolio Projekte",
-  subtitle: "Alle Projekte mit Status, Kategorie und Reihenfolge.",
-  overview: "Uebersicht",
-  maintenance: "Wartungsmodus",
-  uiKit: "UI Kit",
-  media: "Media",
-  siteSettings: "SEO",
-  portfolio: "Portfolio",
-  logout: "Ausloggen",
-  backToSite: "Zur Website",
-  newProject: "Neues Projekt",
-  category: "Kategorie",
-  all: "Alle",
-  status: "Status",
-  draft: "Entwurf",
-  published: "Veroeffentlicht",
-  filter: "Filtern",
-  sort: "Sortierung",
-  previewSet: "Preview Link gesetzt",
-  previewMissing: "Kein Preview Link",
-  editProject: "Projekt bearbeiten",
-  empty: "Keine Projekte fuer die aktuellen Filter gefunden.",
-};
-
 type RootPortfolioProjectsPageProps = {
  searchParams?: {
    category?: string;
@@ -54,161 +14,23 @@ type RootPortfolioProjectsPageProps = {
 export default async function RootPortfolioProjectsPage({
  searchParams,
 }: RootPortfolioProjectsPageProps) {
-  if (!isAdminAuthenticated()) {
-    redirect("/root");
+  const params = new URLSearchParams();
+
+  if (searchParams?.category) {
+    params.set("category", searchParams.category);
  }

-  async function logoutAction() {
-    "use server";
-
-    clearAdminSessionCookie();
-    redirect("/root");
+  if (searchParams?.status) {
+    params.set("status", searchParams.status);
  }

-  const selectedStatus = searchParams?.status === "draft" || searchParams?.status === "published"
-    ? searchParams.status
-    : "all";
-  const [categories, projects] = await Promise.all([
-    getAdminPortfolioCategories(),
-    getAdminPortfolioProjects({
-      categoryId: searchParams?.category || undefined,
-      status: selectedStatus,
-    }),
-  ]);
+  if (searchParams?.success) {
+    params.set("success", searchParams.success);
+  }

-  return (
-    <RootDashboardShell
-      copy={copy}
-      active="portfolio"
-      portfolioChild="projects"
-      logoutAction={logoutAction}
-      headerTitle={copy.title}
-      headerDescription={copy.subtitle}
-      toolbar={<PortfolioSubnav active="projects" />}
-      headerActions={
-        <MotionFade delay={0.04}>
-          <Button asChild>
-            <Link href="/root/portfolio/projects/new">
-              <Plus className="h-4 w-4" />
-              {copy.newProject}
-            </Link>
-          </Button>
-        </MotionFade>
-      }
-    >
-      <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.1}>
-            <p className="rounded-nested border border-status-success/30 bg-status-success/10 px-4 py-3 text-sm text-status-success">
-              {searchParams.success}
-            </p>
-          </MotionFade>
-        ) : null}
+  if (searchParams?.error) {
+    params.set("error", searchParams.error);
+  }

-        {searchParams?.error ? (
-          <MotionFade delay={0.12}>
-            <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-              {searchParams.error}
-            </p>
-          </MotionFade>
-        ) : null}
-
-        <MotionFade delay={0.15}>
-          <AppCard>
-            <CardContent className="p-6">
-              <form className="grid gap-4 md:grid-cols-3">
-              <div className="space-y-2">
-                <label htmlFor="category" className="text-sm font-medium text-foreground">
-                  {copy.category}
-                </label>
-                <select
-                  id="category"
-                  name="category"
-                  defaultValue={searchParams?.category ?? ""}
-                  className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
-                >
-                  <option value="">{copy.all}</option>
-                  {categories.map((category) => (
-                    <option key={category.id} value={category.id}>
-                      {category.name.de}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="space-y-2">
-                <label htmlFor="status" className="text-sm font-medium text-foreground">
-                  {copy.status}
-                </label>
-                <select
-                  id="status"
-                  name="status"
-                  defaultValue={selectedStatus}
-                  className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
-                >
-                  <option value="all">{copy.all}</option>
-                  <option value="draft">{copy.draft}</option>
-                  <option value="published">{copy.published}</option>
-                </select>
-              </div>
-
-              <div className="flex items-end">
-                <Button type="submit" variant="outline">
-                  {copy.filter}
-                </Button>
-              </div>
-              </form>
-            </CardContent>
-          </AppCard>
-        </MotionFade>
-
-        <div className="grid gap-4">
-          {projects.map((project, index) => (
-            <MotionFade key={project.id} delay={0.18 + index * 0.03}>
-              <AppCard interactive>
-                <CardHeader className="flex flex-row items-center justify-between gap-4">
-                <div>
-                  <CardTitle>{getLocalizedValue(project.title, "de")}</CardTitle>
-                  <p className="mt-1 text-sm text-muted-foreground">
-                    {project.category.name.de}
-                  </p>
-                </div>
-                <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                  <span className="rounded-pill border border-border px-3 py-1">
-                    {project.isPublished ? copy.published : copy.draft}
-                  </span>
-                  <span className="rounded-pill border border-border px-3 py-1">
-                    {project.projectYear}
-                  </span>
-                  <span className="rounded-pill border border-border px-3 py-1">
-                    {copy.sort} {project.sortOrder}
-                  </span>
-                </div>
-                </CardHeader>
-                <CardContent className="flex flex-wrap items-center justify-between gap-4">
-                <div className="space-y-1 text-sm text-muted-foreground">
-                  <p>{project.slug}</p>
-                  <p>{project.previewUrl ? copy.previewSet : copy.previewMissing}</p>
-                </div>
-                <Button asChild>
-                  <Link href={`/root/portfolio/projects/${project.id}`}>{copy.editProject}</Link>
-                </Button>
-                </CardContent>
-              </AppCard>
-            </MotionFade>
-          ))}
-
-          {projects.length === 0 ? (
-            <MotionFade delay={0.18}>
-              <AppCard>
-                <CardContent className="p-6 text-sm text-muted-foreground">
-                  {copy.empty}
-                </CardContent>
-              </AppCard>
-            </MotionFade>
-          ) : null}
-        </div>
-      </div>
-    </RootDashboardShell>
-  );
+  redirect(params.toString() ? `/root/portfolio?${params.toString()}` : "/root/portfolio");
 }
@@ -2,7 +2,7 @@ import { MediaKind } from "@prisma/client";
 import { redirect } from "next/navigation";

 import { MotionFade } from "@/components/motion-fade";
-import { FormSaveButton } from "@/components/root/form-save-button";
+import { FlashMessage } from "@/components/root/flash-message";
 import { SiteSettingsForm } from "@/components/root/site-settings-form";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
@@ -63,22 +63,18 @@ export default async function RootSiteSettingsPage({
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
-      headerActions={<FormSaveButton formId="site-settings-form" />}
+      saveFormId="site-settings-form"
    >
      <div className="space-y-6">
        {searchParams?.success ? (
          <MotionFade delay={0.1}>
-            <p className="rounded-nested border border-status-success/30 bg-status-success/10 px-4 py-3 text-sm text-status-success">
-              {searchParams.success}
-            </p>
+            <FlashMessage type="success" message={searchParams.success} />
          </MotionFade>
        ) : null}

        {searchParams?.error ? (
          <MotionFade delay={0.12}>
-            <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-              {searchParams.error}
-            </p>
+            <FlashMessage type="error" message={searchParams.error} />
          </MotionFade>
        ) : null}

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
-import type { LucideIcon } from "lucide-react";
+import { ChevronDown, ChevronRight, type LucideIcon } from "lucide-react";

 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
@@ -10,6 +10,7 @@ type DashboardSidebarItem = {
  href: string;
  icon: LucideIcon;
  active?: boolean;
+  expanded?: boolean;
  children?: DashboardSidebarItem[];
 };

@@ -23,6 +24,8 @@ type DashboardSidebarProps = {
 export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSidebarProps) {
  function renderItem(item: DashboardSidebarItem, nested = false) {
    const Icon = item.icon;
+    const hasChildren = Boolean(item.children?.length);
+    const ChevronIcon = item.expanded ? ChevronDown : ChevronRight;

    return (
      <div key={item.href} className="space-y-1">
@@ -37,9 +40,10 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
          )}
        >
          <Icon className="h-4 w-4" />
-          <span>{item.label}</span>
+          <span className="flex-1">{item.label}</span>
+          {hasChildren ? <ChevronIcon className="h-4 w-4 opacity-70" /> : null}
        </Link>
-        {item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
+        {item.expanded && item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
      </div>
    );
  }
@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+import { cn } from "@/lib/utils";
+
+type FlashMessageProps = {
+  type: "success" | "error";
+  message: string;
+  clearDelayMs?: number;
+};
+
+export function FlashMessage({
+  type,
+  message,
+  clearDelayMs = 4000,
+}: FlashMessageProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    setVisible(true);
+  }, [message, pathname, searchParams]);
+
+  useEffect(() => {
+    if (!message) {
+      return undefined;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setVisible(false);
+
+      const nextParams = new URLSearchParams(searchParams.toString());
+      nextParams.delete("success");
+      nextParams.delete("error");
+
+      const nextQuery = nextParams.toString();
+      router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
+        scroll: false,
+      });
+    }, clearDelayMs);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [clearDelayMs, message, pathname, router, searchParams]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <p
+      className={cn(
+        "rounded-nested border px-4 py-3 text-sm",
+        type === "success"
+          ? "border-status-success/30 bg-status-success/10 text-status-success"
+          : "border-destructive/30 bg-destructive/10 text-destructive",
+      )}
+    >
+      {message}
+    </p>
+  );
+}
@@ -1,12 +1,16 @@
 "use client";

-import { Save } from "lucide-react";
-import { useEffect, useState } from "react";
+import { LoaderCircle, Save } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";

 import { Button } from "@/components/ui/button";

 type FormSaveButtonProps = {
-  formId: string;
+  formId?: string;
+  formIds?: string[];
+  formSelector?: string;
+  formSelectors?: string[];
  label?: string;
 };

@@ -21,41 +25,220 @@ function serializeForm(form: HTMLFormElement) {

 export function FormSaveButton({
  formId,
+  formIds,
+  formSelector,
+  formSelectors,
  label = "Speichern",
 }: FormSaveButtonProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [activeFormId, setActiveFormId] = useState<string | null>(formId ?? null);
  const [isDirty, setIsDirty] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const baselineRef = useRef<Map<string, string>>(new Map());
+  const activeFormIdRef = useRef<string | null>(formId ?? null);
+  const pendingSubmissionRef = useRef<{
+    formId: string;
+    originUrl: string;
+  } | null>(null);
+
+  const currentUrl = `${pathname}?${searchParams.toString()}`;

  useEffect(() => {
-    const form = document.getElementById(formId);
-
-    if (!(form instanceof HTMLFormElement)) {
+    if (!formId && !formIds?.length && !formSelector && !formSelectors?.length) {
+      activeFormIdRef.current = null;
+      pendingSubmissionRef.current = null;
+      setActiveFormId(null);
      setIsDirty(false);
+      setIsSubmitting(false);
+    }
+  }, [formId, formIds, formSelector, formSelectors]);
+
+  useEffect(() => {
+    const formsById = [formId, ...(formIds ?? [])]
+      .filter((value): value is string => Boolean(value))
+      .map((id) => document.getElementById(id))
+      .filter((form): form is HTMLFormElement => form instanceof HTMLFormElement);
+    const formsBySelector = [formSelector, ...(formSelectors ?? [])]
+      .filter((value): value is string => Boolean(value))
+      .flatMap((selector) => Array.from(document.querySelectorAll(selector)))
+      .filter((form): form is HTMLFormElement => form instanceof HTMLFormElement);
+    const forms = Array.from(new Map([...formsById, ...formsBySelector].map((form) => [form.id, form])).values());
+
+    if (forms.length === 0) {
+      baselineRef.current.clear();
+      activeFormIdRef.current = formId ?? null;
+      setActiveFormId(formId ?? null);
+      setIsDirty(false);
+      setIsSubmitting(false);
      return undefined;
    }

-    const initialSnapshot = serializeForm(form);
+    const availableIds = forms.map((form) => form.id).filter(Boolean);
+    const fallbackFormId = availableIds[0] ?? null;

-    const updateDirtyState = () => {
-      setIsDirty(serializeForm(form) !== initialSnapshot);
+    const readDirtyState = (nextActiveFormId: string | null) => {
+      if (!nextActiveFormId) {
+        setIsDirty(false);
+        return;
+      }
+
+      const nextForm = forms.find((form) => form.id === nextActiveFormId);
+
+      if (!nextForm) {
+        setIsDirty(false);
+        return;
+      }
+
+      setIsDirty(serializeForm(nextForm) !== baselineRef.current.get(nextActiveFormId));
    };

-    updateDirtyState();
+    const syncBaseline = (form: HTMLFormElement) => {
+      baselineRef.current.set(form.id, serializeForm(form));
+      readDirtyState(form.id === activeFormIdRef.current ? form.id : activeFormIdRef.current ?? fallbackFormId);
+      setIsSubmitting(false);
+    };

-    form.addEventListener("input", updateDirtyState);
-    form.addEventListener("change", updateDirtyState);
-    form.addEventListener("reset", updateDirtyState);
+    const handleFormActivity = (form: HTMLFormElement) => {
+      activeFormIdRef.current = form.id;
+      setActiveFormId(form.id);
+      setIsSubmitting(false);
+      setIsDirty(serializeForm(form) !== baselineRef.current.get(form.id));
+    };
+
+    const handleSubmit = (form: HTMLFormElement, event: SubmitEvent) => {
+      if (pendingSubmissionRef.current) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      activeFormIdRef.current = form.id;
+      pendingSubmissionRef.current = {
+        formId: form.id,
+        originUrl: currentUrl,
+      };
+      setActiveFormId(form.id);
+      setIsSubmitting(true);
+      setIsDirty(false);
+    };
+
+    for (const form of forms) {
+      if (!form.id) {
+        continue;
+      }
+
+      syncBaseline(form);
+
+      const onFocusIn = () => handleFormActivity(form);
+      const onInput = () => handleFormActivity(form);
+      const onChange = () => handleFormActivity(form);
+      const onReset = () => syncBaseline(form);
+      const onSubmit = (event: Event) => handleSubmit(form, event as SubmitEvent);
+
+      form.addEventListener("focusin", onFocusIn);
+      form.addEventListener("input", onInput);
+      form.addEventListener("change", onChange);
+      form.addEventListener("reset", onReset);
+      form.addEventListener("submit", onSubmit);
+
+      (form as HTMLFormElement & {
+        __saveButtonHandlers?: {
+          onFocusIn: () => void;
+          onInput: () => void;
+          onChange: () => void;
+          onReset: () => void;
+          onSubmit: (event: Event) => void;
+        };
+      }).__saveButtonHandlers = { onFocusIn, onInput, onChange, onReset, onSubmit };
+    }
+
+    const nextActive =
+      activeFormIdRef.current && availableIds.includes(activeFormIdRef.current)
+        ? activeFormIdRef.current
+        : fallbackFormId;
+    activeFormIdRef.current = nextActive;
+    setActiveFormId(nextActive);
+    readDirtyState(nextActive);

    return () => {
-      form.removeEventListener("input", updateDirtyState);
-      form.removeEventListener("change", updateDirtyState);
-      form.removeEventListener("reset", updateDirtyState);
+      for (const form of forms) {
+        const handlers = (form as HTMLFormElement & {
+          __saveButtonHandlers?: {
+            onFocusIn: () => void;
+            onInput: () => void;
+            onChange: () => void;
+            onReset: () => void;
+            onSubmit: (event: Event) => void;
+          };
+        }).__saveButtonHandlers;
+
+        if (!handlers) {
+          continue;
+        }
+
+        form.removeEventListener("focusin", handlers.onFocusIn);
+        form.removeEventListener("input", handlers.onInput);
+        form.removeEventListener("change", handlers.onChange);
+        form.removeEventListener("reset", handlers.onReset);
+        form.removeEventListener("submit", handlers.onSubmit);
+        delete (
+          form as HTMLFormElement & {
+            __saveButtonHandlers?: {
+              onFocusIn: () => void;
+              onInput: () => void;
+              onChange: () => void;
+              onReset: () => void;
+              onSubmit: (event: Event) => void;
+            };
+          }
+        ).__saveButtonHandlers;
+      }
    };
-  }, [formId]);
+  }, [currentUrl, formId, formIds, formSelector, formSelectors, pathname, searchParams]);
+
+  useEffect(() => {
+    const pendingSubmission = pendingSubmissionRef.current;
+
+    if (!pendingSubmission) {
+      return;
+    }
+
+    const hasError = searchParams.has("error");
+    const hasSuccess = searchParams.has("success") || searchParams.has("__saved");
+    const navigated = currentUrl !== pendingSubmission.originUrl;
+
+    if (hasError) {
+      pendingSubmissionRef.current = null;
+      setIsSubmitting(false);
+      return;
+    }
+
+    if (!hasSuccess && !navigated) {
+      return;
+    }
+
+    pendingSubmissionRef.current = null;
+    router.refresh();
+
+    if (!searchParams.has("__saved")) {
+      return;
+    }
+
+    const nextParams = new URLSearchParams(searchParams.toString());
+    nextParams.delete("__saved");
+
+    const nextQuery = nextParams.toString();
+    router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
+      scroll: false,
+    });
+  }, [currentUrl, pathname, router, searchParams]);

  return (
-    <Button type="submit" form={formId} disabled={!isDirty}>
-      <Save className="h-4 w-4" />
-      {label}
+    <Button type="submit" form={activeFormId ?? undefined} disabled={!activeFormId || !isDirty || isSubmitting}>
+      {isSubmitting ? <LoaderCircle className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+      {isSubmitting ? "Speichert..." : label}
    </Button>
  );
 }
@@ -48,6 +48,7 @@ type PortfolioProjectFormProps = {
  categories: PortfolioCategoryView[];
  mediaOptions: MediaOption[];
  project?: PortfolioProjectView | null;
+  formId: string;
  redirectPath: string;
  submitLabel: string;
 };
@@ -120,6 +121,7 @@ export function PortfolioProjectForm({
  categories,
  mediaOptions,
  project,
+  formId,
  redirectPath,
  submitLabel,
 }: PortfolioProjectFormProps) {
@@ -190,7 +192,7 @@ export function PortfolioProjectForm({
  );

  return (
-    <form action={action} className="space-y-6">
+    <form id={formId} action={action} className="space-y-6">
      <input type="hidden" name="id" value={project?.id ?? ""} />
      <input type="hidden" name="redirectPath" value={redirectPath} />
      <input type="hidden" name="currentCoverImagePath" value={project?.coverImagePath ?? ""} />
@@ -5,7 +5,7 @@ import { CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";

 type PortfolioSubnavProps = {
-  active: "overview" | "categories" | "projects";
+  active: "overview" | "categories";
 };

 const items = [
@@ -19,11 +19,6 @@ const items = [
    label: "Kategorien",
    href: "/root/portfolio/categories",
  },
-  {
-    key: "projects",
-    label: "Projekte",
-    href: "/root/portfolio/projects",
-  },
 ] as const;

 export function PortfolioSubnav({ active }: PortfolioSubnavProps) {
@@ -15,12 +15,16 @@ import Link from "next/link";

 import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
 import { MotionFade } from "@/components/motion-fade";
+import { FormSaveButton } from "@/components/root/form-save-button";
+import { SidebarMaintenanceControl } from "@/components/root/sidebar-maintenance-control";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { getSiteSettingsMediaBindings } from "@/lib/app-config";
+import { getMaintenanceMode, getSiteSettingsMediaBindings } from "@/lib/app-config";
 import { getLocalizedPath } from "@/lib/locale";
 import { getRootNavigation } from "@/lib/root-navigation";

+import { updateMaintenanceModeAction } from "@/app/root/maintenance/actions";
+
 type RootDashboardCopy = {
  title: string;
  subtitle: string;
@@ -41,6 +45,9 @@ type RootDashboardShellProps = {
  logoutAction: () => Promise<void>;
  headerTitle: string;
  headerDescription: string;
+  saveFormId?: string;
+  saveFormSelector?: string;
+  saveButtonLabel?: string;
  headerActions?: ReactNode;
  sidebarTopContent?: ReactNode;
  toolbar?: ReactNode;
@@ -54,12 +61,18 @@ export async function RootDashboardShell({
  logoutAction,
  headerTitle,
  headerDescription,
+  saveFormId,
+  saveFormSelector,
+  saveButtonLabel,
  headerActions,
  sidebarTopContent,
  toolbar,
  children,
 }: RootDashboardShellProps) {
-  const mediaBindings = await getSiteSettingsMediaBindings();
+  const [mediaBindings, maintenanceEnabled] = await Promise.all([
+    getSiteSettingsMediaBindings(),
+    getMaintenanceMode(),
+  ]);
  const sidebarItems = getRootNavigation(copy, active, portfolioChild).filter(
    (item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
  );
@@ -81,6 +94,11 @@ export async function RootDashboardShell({
                : FolderKanban;
  const sharedActions = (
    <>
+      <FormSaveButton
+        formIds={saveFormId ? ["sidebar-maintenance-form", saveFormId] : ["sidebar-maintenance-form"]}
+        formSelectors={saveFormSelector ? [saveFormSelector] : undefined}
+        label={saveButtonLabel ?? "Speichern"}
+      />
      <ThemeToggle ariaLabel="Theme wechseln" />
    </>
  );
@@ -105,16 +123,13 @@ export async function RootDashboardShell({
      }
      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>
+          <SidebarMaintenanceControl
+            action={updateMaintenanceModeAction}
+            initialEnabled={maintenanceEnabled}
+            label={copy.maintenance}
+            onLabel="Besucher gesperrt"
+            offLabel="Website offen"
+          />
          <Button
            asChild
            variant={active === "ui-kit" ? "default" : "outline"}
@@ -0,0 +1,75 @@
+"use client";
+
+import { ShieldAlert } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+type SidebarMaintenanceControlProps = {
+  action: (formData: FormData) => Promise<void>;
+  initialEnabled: boolean;
+  label: string;
+  onLabel: string;
+  offLabel: string;
+};
+
+export function SidebarMaintenanceControl({
+  action,
+  initialEnabled,
+  label,
+  onLabel,
+  offLabel,
+}: SidebarMaintenanceControlProps) {
+  const pathname = usePathname();
+  const [enabled, setEnabled] = useState(initialEnabled);
+
+  return (
+    <form id="sidebar-maintenance-form" action={action} className="space-y-2">
+      <input type="hidden" name="redirectPath" value={pathname} />
+      <input type="hidden" name="enabled" value={enabled ? "true" : "false"} />
+
+      <label
+        htmlFor="sidebar-maintenance-enabled"
+        className={cn(
+          "flex cursor-pointer items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
+          enabled
+            ? "border-status-warning/40 bg-status-warning-soft/80"
+            : "border-border bg-surface-1 hover:bg-surface-2",
+        )}
+      >
+        <span className="flex min-w-0 items-center gap-3">
+          <span
+            className={cn(
+              "flex h-9 w-9 items-center justify-center rounded-full border",
+              enabled
+                ? "border-status-warning/40 bg-status-warning-soft text-status-warning"
+                : "border-border bg-background text-muted-foreground",
+            )}
+          >
+            <ShieldAlert className="h-4 w-4" />
+          </span>
+          <span className="min-w-0">
+            <span className="block text-sm font-medium text-foreground">{label}</span>
+            <span className="block text-xs text-muted-foreground">
+              {enabled ? onLabel : offLabel}
+            </span>
+          </span>
+        </span>
+
+        <Badge variant={enabled ? "warning" : "success"}>
+          {enabled ? "ON" : "OFF"}
+        </Badge>
+      </label>
+
+      <input
+        id="sidebar-maintenance-enabled"
+        type="checkbox"
+        checked={enabled}
+        onChange={(event) => setEnabled(event.target.checked)}
+        className="sr-only"
+      />
+    </form>
+  );
+}
@@ -24,6 +24,7 @@ export type RootNavItem = {
  href: string;
  icon: LucideIcon;
  active?: boolean;
+  expanded?: boolean;
  children?: RootNavItem[];
 };

@@ -67,36 +68,28 @@ export function getRootNavigation(
      label: copy.portfolio,
      href: "/root/portfolio",
      icon: FolderKanban,
-      active: active === "portfolio",
-      children:
-        active === "portfolio"
-          ? [
-              {
-                label: "Overview",
-                href: "/root/portfolio",
-                icon: LayoutDashboard,
-                active: portfolioChild === "overview",
-              },
-              {
-                label: "Add Project",
-                href: "/root/portfolio/projects/new",
-                icon: PlusSquare,
-                active: portfolioChild === "new-project",
-              },
-              {
-                label: "Add Category",
-                href: "/root/portfolio/categories",
-                icon: Tags,
-                active: portfolioChild === "categories",
-              },
-              {
-                label: "Projects",
-                href: "/root/portfolio/projects",
-                icon: FolderKanban,
-                active: portfolioChild === "projects",
-              },
-            ].filter((item, index, array) => array.findIndex((entry) => entry.href === item.href) === index)
-          : undefined,
+      active: active === "portfolio" && !portfolioChild,
+      expanded: active === "portfolio",
+      children: [
+        {
+          label: "Overview",
+          href: "/root/portfolio",
+          icon: LayoutDashboard,
+          active: portfolioChild === "overview",
+        },
+        {
+          label: "Add Project",
+          href: "/root/portfolio/projects/new",
+          icon: PlusSquare,
+          active: portfolioChild === "new-project",
+        },
+        {
+          label: "Add Category",
+          href: "/root/portfolio/categories",
+          icon: Tags,
+          active: portfolioChild === "categories",
+        },
+      ].filter((item, index, array) => array.findIndex((entry) => entry.href === item.href) === index),
    },
  ];
 }