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 { FormSaveButton } from "@/components/root/form-save-button";
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 { 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;
  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;
  saveFormId?: string;
  saveFormSelector?: string;
  saveButtonLabel?: string;
  reloadDocumentOnSave?: boolean;
  headerActions?: ReactNode;
  sidebarTopContent?: ReactNode;
  toolbar?: ReactNode;
  children: ReactNode;
};

export async function RootDashboardShell({
  copy,
  active,
  smtpChild,
  portfolioChild,
  logoutAction,
  headerTitle,
  headerDescription,
  saveFormId,
  saveFormSelector,
  saveButtonLabel,
  reloadDocumentOnSave = false,
  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 !== "/root/maintenance" &&
      item.href !== "/root/ui-kit" &&
      item.href !== "/root/smtp" &&
      item.href !== "/root/marquee",
  );
  const footerSidebarItems = ["/root/marquee", "/root/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;
  const sharedActions = (
    <>
      <FormSaveButton
        formIds={saveFormId ? ["sidebar-maintenance-form", saveFormId] : ["sidebar-maintenance-form"]}
        formSelectors={saveFormSelector ? [saveFormSelector] : undefined}
        label={saveButtonLabel ?? "Speichern"}
        reloadDocumentOnSuccess={reloadDocumentOnSave}
      />
      <SoundToggle ariaLabel="Mute sounds" mutedAriaLabel="Unmute sounds" />
      <ThemeToggle ariaLabel="Theme wechseln" />
    </>
  );

  return (
    <DashboardLayout
      title={headerTitle}
      description={headerDescription}
      icon={headerIcon}
      items={normalizedSidebarItems}
      sidebarIconSrc={mediaBindings.favicon?.url}
      sidebarBrandHref={getLocalizedPath("de")}
      sidebarBrandHoverLabel={copy.backToSite}
      sidebarTop={sidebarTopContent}
      sidebarFooterItems={footerSidebarItems}
      sidebarFooter={
        <>
          <SidebarMaintenanceControl
            action={updateMaintenanceModeAction}
            initialEnabled={maintenanceEnabled}
            label={copy.maintenance}
            onLabel="Besucher gesperrt"
            offLabel="Website offen"
          />
          <Button
            asChild
            variant={active === "ui-kit" ? "default" : "outline"}
            className="w-full justify-between"
          >
            <Link href="/root/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}
          {sharedActions}
        </div>
      }
    >
      <div className="space-y-6">
        {toolbar ? <MotionFade delay={0.05}>{toolbar}</MotionFade> : null}
        {children}
      </div>
    </DashboardLayout>
  );
}