Add editable localized marquee settings

app/[locale]/(site)/page.tsx

@@ -14,8 +14,9 @@ import { getTranslations } from "next-intl/server";
 
 import { Container } from "@/components/layout/container";
 import { HomeHero } from "@/components/layout/home-hero";
+import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
 import { MotionFade } from "@/components/motion-fade";
-import { getSiteSettings } from "@/lib/app-config";
+import { getMarqueeSettings, getSiteSettings, splitMarqueeRowItems } from "@/lib/app-config";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
@@ -60,7 +61,10 @@ export async function generateMetadata({
 
 export default async function HomePage({ params: { locale } }: HomePageProps) {
   const localeKey = resolveLocale(locale);
-  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });
+  const [t, marqueeSettings] = await Promise.all([
+    getTranslations({ locale: localeKey, namespace: "homepage" }),
+    getMarqueeSettings(),
+  ]);
   const serviceItems = [
     t("serviceBrand"),
     t("serviceWebsite"),
@@ -70,6 +74,13 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
     t("serviceTracking"),
     t("serviceSystem"),
   ];
+  const marqueeLocale = marqueeSettings.locales[localeKey];
+  const marqueeRows: MarqueeRow[] = [
+    { direction: "left", duration: 126, items: splitMarqueeRowItems(marqueeLocale.row1) },
+    { direction: "right", duration: 220, items: splitMarqueeRowItems(marqueeLocale.row2) },
+    { direction: "left", duration: 168, items: splitMarqueeRowItems(marqueeLocale.row3) },
+    { direction: "right", duration: 144, items: splitMarqueeRowItems(marqueeLocale.row4) },
+  ];
 
   return (
     <>
@@ -141,6 +152,8 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
           </AppCard>
         </MotionFade>
       </Container>
+
+      <StackedMarqueeSection rows={marqueeRows} className="relative z-10 mt-2 pb-10 sm:pb-12 lg:pb-14" />
     </>
   );
 }

app/root/marquee/actions.ts

@@ -0,0 +1,93 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { isRedirectError } from "next/dist/client/components/redirect";
+
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { updateMarqueeSettings } from "@/lib/app-config";
+import { routing } from "@/i18n/routing";
+import { getLocalizedPath } from "@/lib/locale";
+
+function ensureAdmin() {
+  if (!isAdminAuthenticated()) {
+    clearAdminSessionCookie();
+    redirect("/root");
+  }
+}
+
+function withMessage(pathname: string, type: "success" | "error", message: string) {
+  const params = new URLSearchParams();
+  params.set(type, message);
+
+  return `${pathname}?${params.toString()}`;
+}
+
+async function revalidateMarqueePages() {
+  revalidatePath("/root");
+  revalidatePath("/root/marquee");
+
+  for (const locale of routing.locales) {
+    revalidatePath(getLocalizedPath(locale), "layout");
+    revalidatePath(getLocalizedPath(locale));
+  }
+}
+
+export async function saveMarqueeSettingsAction(formData: FormData) {
+  ensureAdmin();
+
+  try {
+    const settings = {
+      locales: {
+        ar: {
+          row1: String(formData.get("row1-ar") ?? "").trim(),
+          row2: String(formData.get("row2-ar") ?? "").trim(),
+          row3: String(formData.get("row3-ar") ?? "").trim(),
+          row4: String(formData.get("row4-ar") ?? "").trim(),
+        },
+        en: {
+          row1: String(formData.get("row1-en") ?? "").trim(),
+          row2: String(formData.get("row2-en") ?? "").trim(),
+          row3: String(formData.get("row3-en") ?? "").trim(),
+          row4: String(formData.get("row4-en") ?? "").trim(),
+        },
+        de: {
+          row1: String(formData.get("row1-de") ?? "").trim(),
+          row2: String(formData.get("row2-de") ?? "").trim(),
+          row3: String(formData.get("row3-de") ?? "").trim(),
+          row4: String(formData.get("row4-de") ?? "").trim(),
+        },
+      },
+    };
+
+    for (const locale of routing.locales) {
+      if (!settings.locales[locale].row1) {
+        throw new Error(`Row 1 fuer ${locale} ist erforderlich.`);
+      }
+
+      if (!settings.locales[locale].row2) {
+        throw new Error(`Row 2 fuer ${locale} ist erforderlich.`);
+      }
+
+      if (!settings.locales[locale].row3) {
+        throw new Error(`Row 3 fuer ${locale} ist erforderlich.`);
+      }
+
+      if (!settings.locales[locale].row4) {
+        throw new Error(`Row 4 fuer ${locale} ist erforderlich.`);
+      }
+    }
+
+    await updateMarqueeSettings(settings);
+    await revalidateMarqueePages();
+
+    redirect(withMessage("/root/marquee", "success", "Marquee gespeichert."));
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    const message = error instanceof Error ? error.message : "Marquee konnte nicht gespeichert werden.";
+    redirect(withMessage("/root/marquee", "error", message));
+  }
+}

app/root/marquee/page.tsx

@@ -0,0 +1,84 @@
+import { redirect } from "next/navigation";
+
+import { FlashMessage } from "@/components/root/flash-message";
+import { MarqueeSettingsForm } from "@/components/root/marquee-settings-form";
+import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
+import { MotionFade } from "@/components/motion-fade";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getMarqueeSettings } from "@/lib/app-config";
+
+import { saveMarqueeSettingsAction } from "./actions";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Marquee",
+  subtitle: "Scrollende Textzeilen fuer die Startseite pro Sprache verwalten.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "SEO",
+  marquee: "Marquee",
+  smtp: "SMTP",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+type RootMarqueePageProps = {
+  searchParams?: {
+    success?: string;
+    error?: string;
+  };
+};
+
+export default async function RootMarqueePage({
+  searchParams,
+}: RootMarqueePageProps) {
+  if (!isAdminAuthenticated()) {
+    redirect("/root");
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    clearAdminSessionCookie();
+    redirect("/root");
+  }
+
+  const marqueeSettings = await getMarqueeSettings();
+
+  return (
+    <RootDashboardShell
+      copy={copy}
+      active="marquee"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+      saveFormId="marquee-settings-form"
+      reloadDocumentOnSave
+    >
+      <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}
+
+        <MotionFade delay={0.14}>
+          <MarqueeSettingsForm
+            action={saveMarqueeSettingsAction}
+            initialSettings={marqueeSettings}
+          />
+        </MotionFade>
+      </div>
+    </RootDashboardShell>
+  );
+}