Add editable localized marquee settings

components/root/marquee-settings-form.tsx

@@ -0,0 +1,63 @@
+import { AppCard } from "@/components/ui/app-card";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import type { MarqueeSettings } from "@/lib/marquee-settings";
+
+type MarqueeSettingsFormProps = {
+  action: (formData: FormData) => Promise<void>;
+  initialSettings: MarqueeSettings;
+};
+
+const localeMeta = [
+  { key: "de", label: "Deutsch" },
+  { key: "en", label: "English" },
+  { key: "ar", label: "Arabic" },
+] as const;
+
+const rowMeta = [
+  { key: "row1", label: "Row 1" },
+  { key: "row2", label: "Row 2" },
+  { key: "row3", label: "Row 3" },
+  { key: "row4", label: "Row 4" },
+] as const;
+
+export function MarqueeSettingsForm({
+  action,
+  initialSettings,
+}: MarqueeSettingsFormProps) {
+  return (
+    <form id="marquee-settings-form" action={action} className="space-y-6">
+      <AppCard>
+        <CardHeader>
+          <CardTitle>Marquee Rows</CardTitle>
+          <CardDescription>Ein Feld pro Zeile. Ein Begriff pro Zeile oder mit Komma getrennt.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-6 xl:grid-cols-3">
+          {localeMeta.map((locale) => (
+            <div key={locale.key} className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
+              <div>
+                <h3 className="text-sm font-semibold text-foreground">{locale.label}</h3>
+                <p className="text-xs text-muted-foreground">Vier Marquee Zeilen fuer diese Sprache.</p>
+              </div>
+
+              <div className="space-y-4">
+                {rowMeta.map((row) => (
+                  <div key={`${locale.key}-${row.key}`} className="space-y-2">
+                    <Label htmlFor={`${row.key}-${locale.key}`}>{row.label}</Label>
+                    <Textarea
+                      id={`${row.key}-${locale.key}`}
+                      name={`${row.key}-${locale.key}`}
+                      defaultValue={initialSettings.locales[locale.key][row.key]}
+                      className="min-h-[180px] resize-y"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </CardContent>
+      </AppCard>
+    </form>
+  );
+}

components/root/root-dashboard-shell.tsx

@@ -10,6 +10,7 @@ import {
   ShieldAlert,
   SwatchBook,
   Tags,
+  Type,
 } from "lucide-react";
 import Link from "next/link";
 
@@ -35,6 +36,7 @@ type RootDashboardCopy = {
   portfolio: string;
   media: string;
   siteSettings: string;
+  marquee?: string;
   smtp?: string;
   contactProtection?: string;
   logout: string;
@@ -43,7 +45,7 @@ type RootDashboardCopy = {
 
 type RootDashboardShellProps = {
   copy: RootDashboardCopy;
-  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp";
+  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp" | "marquee";
   smtpChild?: "settings" | "contact-protection";
   portfolioChild?: "overview" | "projects" | "new-project" | "categories";
   logoutAction: () => Promise<void>;
@@ -92,9 +94,11 @@ export async function RootDashboardShell({
           ? SwatchBook
           : active === "site-settings"
             ? Globe2
+            : active === "marquee"
+              ? Type
           : active === "smtp"
             ? ShieldAlert
-          : active === "media"
+            : active === "media"
             ? ImageIcon
             : portfolioChild === "categories"
               ? Tags