Refine root UI around shadcn primitives

app/root/portfolio/projects/page.tsx

@@ -1,7 +1,27 @@
 import { redirect } from "next/navigation";
 
+import { MotionFade } from "@/components/motion-fade";
+import { FlashMessage } from "@/components/root/flash-message";
+import { PortfolioProjectsOverview } from "@/components/root/portfolio-projects-overview";
+import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
+
 export const dynamic = "force-dynamic";
 
+const copy = {
+  title: "Portfolio Projekte",
+  subtitle: "Projektliste und Einstieg in die komplette Bearbeitung.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "SEO",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
 type RootPortfolioProjectsPageProps = {
   searchParams?: {
     category?: string;
@@ -14,23 +34,60 @@ type RootPortfolioProjectsPageProps = {
 export default async function RootPortfolioProjectsPage({
   searchParams,
 }: RootPortfolioProjectsPageProps) {
-  const params = new URLSearchParams();
-
-  if (searchParams?.category) {
-    params.set("category", searchParams.category);
+  if (!isAdminAuthenticated()) {
+    redirect("/root");
   }
 
-  if (searchParams?.status) {
-    params.set("status", searchParams.status);
+  async function logoutAction() {
+    "use server";
+
+    clearAdminSessionCookie();
+    redirect("/root");
   }
 
-  if (searchParams?.success) {
-    params.set("success", searchParams.success);
-  }
+  const selectedCategory = searchParams?.category && searchParams.category !== "__all__"
+    ? searchParams.category
+    : "";
+  const selectedStatus = searchParams?.status === "draft" || searchParams?.status === "published"
+    ? searchParams.status
+    : "all";
+  const [categories, projects] = await Promise.all([
+    getAdminPortfolioCategories(),
+    getAdminPortfolioProjects({
+      categoryId: selectedCategory || undefined,
+      status: selectedStatus,
+    }),
+  ]);
 
-  if (searchParams?.error) {
-    params.set("error", searchParams.error);
-  }
+  return (
+    <RootDashboardShell
+      copy={copy}
+      active="portfolio"
+      portfolioChild="projects"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <div className="space-y-6">
+        {searchParams?.success ? (
+          <MotionFade delay={0.08}>
+            <FlashMessage type="success" message={searchParams.success} />
+          </MotionFade>
+        ) : null}
 
-  redirect(params.toString() ? `/root/portfolio?${params.toString()}` : "/root/portfolio");
+        {searchParams?.error ? (
+          <MotionFade delay={0.1}>
+            <FlashMessage type="error" message={searchParams.error} />
+          </MotionFade>
+        ) : null}
+
+        <PortfolioProjectsOverview
+          categories={categories}
+          projects={projects}
+          selectedCategory={selectedCategory}
+          selectedStatus={selectedStatus}
+        />
+      </div>
+    </RootDashboardShell>
+  );
 }