Improve admin save UX and portfolio navigation

app/root/portfolio/actions.ts

@@ -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."));
   }
 }

app/root/portfolio/categories/page.tsx

@@ -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" />
 

app/root/portfolio/page.tsx

@@ -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>
   );

app/root/portfolio/projects/[id]/page.tsx

@@ -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}
           />

app/root/portfolio/projects/new/page.tsx

@@ -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"
           />

app/root/portfolio/projects/page.tsx

@@ -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");
 }