sass-mohfarawati/components/root/root-dashboard-shell.tsx

import type { ReactNode } from "react";
import {
  FolderKanban,
  Globe2,
  ImageIcon,
  LayoutDashboard,
  LogOut,
  PlusSquare,
  ShieldAlert,
  SwatchBook,
  Tags,
  Type,
} from "lucide-react";
import Link from "next/link";

import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
import { MotionFade } from "@/components/motion-fade";
import { SidebarMaintenanceControl } from "@/components/root/sidebar-maintenance-control";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { buildSiteUrl } from "@/lib/admin-routing";
import { getMaintenanceMode, getSiteSettingsMediaBindings } from "@/lib/app-config";
import { getRootNavigation } from "@/lib/root-navigation";

import { updateMaintenanceModeAction } from "@/app/root/maintenance/actions";

type RootDashboardCopy = {
  title: string;
  subtitle: string;
  overview: string;
  maintenance: string;
  uiKit: string;
  portfolio: string;
  media: string;
  siteSettings: string;
  marquee?: string;
  smtp?: string;
  contactProtection?: string;
  logout: string;
  backToSite: string;
};

type RootDashboardShellProps = {
  copy: RootDashboardCopy;
  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp" | "marquee";
  smtpChild?: "settings" | "contact-protection";
  portfolioChild?: "overview" | "projects" | "new-project" | "categories";
  logoutAction: () => Promise<void>;
  headerTitle: string;
  headerDescription: string;
  headerActions?: ReactNode;
  sidebarTopContent?: ReactNode;
  toolbar?: ReactNode;
  children: ReactNode;
};

export async function RootDashboardShell({
  copy,
  active,
  smtpChild,
  portfolioChild,
  logoutAction,
  headerTitle,
  headerDescription,
  headerActions,
  sidebarTopContent,
  toolbar,
  children,
}: RootDashboardShellProps) {
  const [mediaBindings, maintenanceEnabled] = await Promise.all([
    getSiteSettingsMediaBindings(),
    getMaintenanceMode(),
  ]);
  const sidebarItems = getRootNavigation(copy, active, smtpChild, portfolioChild);
  const normalizedSidebarItems = sidebarItems.filter(
    (item) =>
      item.href !== "/maintenance" &&
      item.href !== "/ui-kit" &&
      item.href !== "/smtp" &&
      item.href !== "/marquee",
  );
  const footerSidebarItems = ["/marquee", "/smtp"]
    .map((href) => sidebarItems.find((item) => item.href === href))
    .filter((item): item is NonNullable<typeof item> => Boolean(item));
  const headerIcon =
    active === "overview"
      ? LayoutDashboard
      : active === "maintenance"
        ? ShieldAlert
        : active === "ui-kit"
          ? SwatchBook
          : active === "site-settings"
            ? Globe2
            : active === "marquee"
              ? Type
          : active === "smtp"
            ? ShieldAlert
            : active === "media"
            ? ImageIcon
            : portfolioChild === "categories"
              ? Tags
              : portfolioChild === "new-project"
                ? PlusSquare
                : FolderKanban;
  return (
    <DashboardLayout
      title={headerTitle}
      description={headerDescription}
      icon={headerIcon}
      items={normalizedSidebarItems}
      sidebarIconSrc={mediaBindings.favicon?.url}
      sidebarBrandHref={buildSiteUrl()}
      sidebarBrandHoverLabel={copy.backToSite}
      sidebarTop={sidebarTopContent}
      sidebarFooterItems={footerSidebarItems}
      sidebarFooter={
        <>
          <SidebarMaintenanceControl
            action={updateMaintenanceModeAction}
            initialEnabled={maintenanceEnabled}
            label="Mohs Status"
          />
          <Button
            asChild
            variant={active === "ui-kit" ? "default" : "outline"}
            className="w-full justify-between"
          >
            <Link href="/ui-kit">
              {copy.uiKit}
              <SwatchBook className="h-4 w-4" />
            </Link>
          </Button>
          <form action={logoutAction}>
            <Button type="submit" variant="ghost" className="w-full justify-between text-destructive hover:bg-destructive/10 hover:text-destructive">
              {copy.logout}
              <LogOut className="h-4 w-4" />
            </Button>
          </form>
        </>
      }
      headerActions={
        <div className="flex flex-wrap items-center justify-end gap-2">
          {headerActions}
          <SoundToggle
            ariaLabel="Mute sounds"
            mutedAriaLabel="Unmute sounds"
            mutedToastLabel="Sound muted"
            unmutedToastLabel="Sound enabled"
          />
          <ThemeToggle
            ariaLabel="Theme wechseln"
            lightToastLabel="Light mode enabled"
            darkToastLabel="Dark mode enabled"
          />
        </div>
      }
    >
      <div className="space-y-6">
        {toolbar ? <MotionFade delay={0.05}>{toolbar}</MotionFade> : null}
        {children}
      </div>
    </DashboardLayout>
  );
}