Add admin site settings sections and locale defaults

app/_admin/site-settings/actions.ts

@@ -12,10 +12,16 @@ import {
   SITE_SETTINGS_FAVICON_FIELD_KEY,
   SITE_SETTINGS_LOGO_DARK_FIELD_KEY,
   SITE_SETTINGS_LOGO_LIGHT_FIELD_KEY,
+  getSiteSettings,
   updateSiteSettings,
 } from "@/lib/app-config";
 import { getAdminAppPath, toInternalAdminPath } from "@/lib/admin-routing";
-import { PAGE_TITLE_TOKEN, type SiteSettings } from "@/lib/site-settings";
+import {
+  PAGE_TITLE_TOKEN,
+  normalizeSiteDefaultLocale,
+  normalizeSitePrimaryColor,
+  type SiteSettings,
+} from "@/lib/site-settings";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { replaceEntityMediaUsages } from "@/lib/media";
 import { resolveMediaSelection } from "@/lib/media-service";
@@ -91,12 +97,17 @@ async function revalidateSiteSettingsPages() {
 }
 
 export async function saveSiteSettingsAction(formData: FormData) {
+  return saveSiteBrandSettingsAction(formData);
+}
+
+export async function saveSiteBrandSettingsAction(formData: FormData) {
   await ensureAdmin();
 
   const createdMediaAssetIds: string[] = [];
   const uploadedPaths: string[] = [];
 
   try {
+    const currentSettings = await getSiteSettings();
     const siteLogoLightMedia = parseJsonObject(formData.get("siteLogoLightMedia"), "siteLogoLightMedia");
     const siteLogoDarkMedia = parseJsonObject(formData.get("siteLogoDarkMedia"), "siteLogoDarkMedia");
     const faviconMedia = parseJsonObject(formData.get("faviconMedia"), "faviconMedia");
@@ -106,41 +117,12 @@ export async function saveSiteSettingsAction(formData: FormData) {
     );
 
     const parsedSettings: SiteSettings = {
-      locales: {
+      ...currentSettings,
-        ar: {
+      brand: {
-          siteName: String(formData.get("siteNameAr") ?? "").trim(),
+        primaryColor: normalizeSitePrimaryColor(formData.get("primaryColor")),
-          titleTemplate: String(formData.get("titleTemplateAr") ?? "").trim(),
-          siteDescription: String(formData.get("siteDescriptionAr") ?? "").trim(),
-          subhead: String(formData.get("subheadAr") ?? "").trim(),
-        },
-        en: {
-          siteName: String(formData.get("siteNameEn") ?? "").trim(),
-          titleTemplate: String(formData.get("titleTemplateEn") ?? "").trim(),
-          siteDescription: String(formData.get("siteDescriptionEn") ?? "").trim(),
-          subhead: String(formData.get("subheadEn") ?? "").trim(),
-        },
-        de: {
-          siteName: String(formData.get("siteNameDe") ?? "").trim(),
-          titleTemplate: String(formData.get("titleTemplateDe") ?? "").trim(),
-          siteDescription: String(formData.get("siteDescriptionDe") ?? "").trim(),
-          subhead: String(formData.get("subheadDe") ?? "").trim(),
-        },
       },
     };
 
-    for (const locale of routing.locales) {
-      if (!parsedSettings.locales[locale].siteName) {
-        throw new Error(`Site Name fuer ${locale} ist erforderlich.`);
-      }
-
-      if (
-        !parsedSettings.locales[locale].titleTemplate ||
-        !parsedSettings.locales[locale].titleTemplate.includes(PAGE_TITLE_TOKEN)
-      ) {
-        throw new Error(`Title Template fuer ${locale} muss {pageTitle} enthalten.`);
-      }
-    }
-
     const siteLogoLightSelection = siteLogoLightMedia
       ? await resolveMediaSelection({
           media: mediaFieldInputSchema.parse(siteLogoLightMedia),
@@ -278,7 +260,7 @@ export async function saveSiteSettingsAction(formData: FormData) {
     });
 
     await revalidateSiteSettingsPages();
-    redirect(withMessage(getAdminAppPath("/site-settings"), "success", "Einstellungen gespeichert."));
+    redirect(withMessage(getAdminAppPath("/site-settings/brand"), "success", "Einstellungen gespeichert."));
   } catch (error) {
     if (isRedirectError(error)) {
       throw error;
@@ -291,6 +273,66 @@ export async function saveSiteSettingsAction(formData: FormData) {
         ? error.message
         : "Einstellungen konnten nicht gespeichert werden.";
 
-    redirect(withMessage(getAdminAppPath("/site-settings"), "error", message));
+    redirect(withMessage(getAdminAppPath("/site-settings/brand"), "error", message));
+  }
+}
+
+export async function saveSiteLocalizationSettingsAction(formData: FormData) {
+  await ensureAdmin();
+
+  try {
+    const currentSettings = await getSiteSettings();
+    const parsedSettings: SiteSettings = {
+      ...currentSettings,
+      defaultLocale: normalizeSiteDefaultLocale(formData.get("defaultLocale")),
+      locales: {
+        ar: {
+          siteName: String(formData.get("siteNameAr") ?? "").trim(),
+          titleTemplate: String(formData.get("titleTemplateAr") ?? "").trim(),
+          siteDescription: String(formData.get("siteDescriptionAr") ?? "").trim(),
+          subhead: String(formData.get("subheadAr") ?? "").trim(),
+        },
+        en: {
+          siteName: String(formData.get("siteNameEn") ?? "").trim(),
+          titleTemplate: String(formData.get("titleTemplateEn") ?? "").trim(),
+          siteDescription: String(formData.get("siteDescriptionEn") ?? "").trim(),
+          subhead: String(formData.get("subheadEn") ?? "").trim(),
+        },
+        de: {
+          siteName: String(formData.get("siteNameDe") ?? "").trim(),
+          titleTemplate: String(formData.get("titleTemplateDe") ?? "").trim(),
+          siteDescription: String(formData.get("siteDescriptionDe") ?? "").trim(),
+          subhead: String(formData.get("subheadDe") ?? "").trim(),
+        },
+      },
+    };
+
+    for (const locale of routing.locales) {
+      if (!parsedSettings.locales[locale].siteName) {
+        throw new Error(`Site Name fuer ${locale} ist erforderlich.`);
+      }
+
+      if (
+        !parsedSettings.locales[locale].titleTemplate ||
+        !parsedSettings.locales[locale].titleTemplate.includes(PAGE_TITLE_TOKEN)
+      ) {
+        throw new Error(`Title Template fuer ${locale} muss {pageTitle} enthalten.`);
+      }
+    }
+
+    await updateSiteSettings(parsedSettings);
+    await revalidateSiteSettingsPages();
+    redirect(withMessage(getAdminAppPath("/site-settings/localization"), "success", "Einstellungen gespeichert."));
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    const message =
+      error instanceof Error
+        ? error.message
+        : "Einstellungen konnten nicht gespeichert werden.";
+
+    redirect(withMessage(getAdminAppPath("/site-settings/localization"), "error", message));
   }
 }

app/_admin/site-settings/brand/page.tsx

@@ -0,0 +1,73 @@
+import { MediaKind } from "@prisma/client";
+import { redirect } from "next/navigation";
+
+import { MotionFade } from "@/components/motion-fade";
+import { SiteSettingsForm } from "@/components/admin/site-settings-form";
+import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getAdminAppPath } from "@/lib/admin-routing";
+import {
+  getSiteSettings,
+  getSiteSettingsMediaBindings,
+} from "@/lib/app-config";
+import { getMediaOptions } from "@/lib/media";
+
+import { saveSiteBrandSettingsAction } from "../actions";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Brand",
+  subtitle: "Primaerfarbe, Logos, Favicon und OG Assets verwalten.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "Settings",
+  brandSettings: "Brand",
+  localizationSettings: "Localization",
+  smtp: "SMTP",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+export default async function AdminSiteBrandSettingsPage() {
+  if (!(await isAdminAuthenticated())) {
+    redirect(getAdminAppPath("/"));
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    await clearAdminSessionCookie();
+    redirect(getAdminAppPath("/"));
+  }
+
+  const [siteSettings, mediaBindings, mediaOptions] = await Promise.all([
+    getSiteSettings(),
+    getSiteSettingsMediaBindings(),
+    getMediaOptions({ kind: MediaKind.IMAGE }),
+  ]);
+
+  return (
+    <AdminDashboardShell
+      copy={copy}
+      active="site-settings"
+      siteSettingsChild="brand"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <MotionFade delay={0.16}>
+        <SiteSettingsForm
+          mode="brand"
+          action={saveSiteBrandSettingsAction}
+          initialSettings={siteSettings}
+          initialBindings={mediaBindings}
+          mediaOptions={mediaOptions}
+        />
+      </MotionFade>
+    </AdminDashboardShell>
+  );
+}

app/_admin/site-settings/localization/page.tsx

@@ -0,0 +1,67 @@
+import { redirect } from "next/navigation";
+
+import { MotionFade } from "@/components/motion-fade";
+import { SiteSettingsForm } from "@/components/admin/site-settings-form";
+import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getAdminAppPath } from "@/lib/admin-routing";
+import {
+  getDefaultSiteSettingsMediaBindings,
+  getSiteSettings,
+} from "@/lib/app-config";
+
+import { saveSiteLocalizationSettingsAction } from "../actions";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Localization",
+  subtitle: "Seitennamen, Titelvorlagen und Standardsprache verwalten.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "Settings",
+  brandSettings: "Brand",
+  localizationSettings: "Localization",
+  smtp: "SMTP",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+export default async function AdminSiteLocalizationSettingsPage() {
+  if (!(await isAdminAuthenticated())) {
+    redirect(getAdminAppPath("/"));
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    await clearAdminSessionCookie();
+    redirect(getAdminAppPath("/"));
+  }
+
+  const siteSettings = await getSiteSettings();
+
+  return (
+    <AdminDashboardShell
+      copy={copy}
+      active="site-settings"
+      siteSettingsChild="localization"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <MotionFade delay={0.16}>
+        <SiteSettingsForm
+          mode="localization"
+          action={saveSiteLocalizationSettingsAction}
+          initialSettings={siteSettings}
+          initialBindings={getDefaultSiteSettingsMediaBindings()}
+          mediaOptions={[]}
+        />
+      </MotionFade>
+    </AdminDashboardShell>
+  );
+}

app/_admin/site-settings/page.tsx

@@ -1,71 +1,9 @@
-import { MediaKind } from "@prisma/client";
 import { redirect } from "next/navigation";
 
-import { MotionFade } from "@/components/motion-fade";
-import { SiteSettingsForm } from "@/components/admin/site-settings-form";
-import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
-import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getAdminAppPath } from "@/lib/admin-routing";
-import {
-  getSiteSettings,
-  getSiteSettingsMediaBindings,
-} from "@/lib/app-config";
-import { getMediaOptions } from "@/lib/media";
-
-import { saveSiteSettingsAction } from "./actions";
 
 export const dynamic = "force-dynamic";
 
-const copy = {
+export default function AdminSiteSettingsPage() {
-  title: "Settings",
+  redirect(getAdminAppPath("/site-settings/brand"));
-  subtitle: "Globale Titel, Copy und Brand Assets verwalten.",
-  overview: "Uebersicht",
-  maintenance: "Wartungsmodus",
-  uiKit: "UI Kit",
-  media: "Media",
-  siteSettings: "Settings",
-  smtp: "SMTP",
-  portfolio: "Portfolio",
-  logout: "Ausloggen",
-  backToSite: "Zur Website",
-};
-
-export default async function AdminSiteSettingsPage() {
-  if (!(await isAdminAuthenticated())) {
-    redirect(getAdminAppPath("/"));
-  }
-
-  async function logoutAction() {
-    "use server";
-
-    await clearAdminSessionCookie();
-    redirect(getAdminAppPath("/"));
-  }
-
-  const [siteSettings, mediaBindings, mediaOptions] = await Promise.all([
-    getSiteSettings(),
-    getSiteSettingsMediaBindings(),
-    getMediaOptions({ kind: MediaKind.IMAGE }),
-  ]);
-
-  return (
-    <AdminDashboardShell
-      copy={copy}
-      active="site-settings"
-      logoutAction={logoutAction}
-      headerTitle={copy.title}
-      headerDescription={copy.subtitle}
-    >
-      <div className="space-y-6">
-        <MotionFade delay={0.16}>
-          <SiteSettingsForm
-            action={saveSiteSettingsAction}
-            initialSettings={siteSettings}
-            initialBindings={mediaBindings}
-            mediaOptions={mediaOptions}
-          />
-        </MotionFade>
-      </div>
-    </AdminDashboardShell>
-  );
 }

app/admin-internal/site-settings/brand/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../../_admin/site-settings/brand/page";

app/admin-internal/site-settings/localization/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../../_admin/site-settings/localization/page";

app/api/site/default-locale/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+
+import { getSiteSettings } from "@/lib/app-config";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const settings = await getSiteSettings();
+
+  return NextResponse.json(
+    {
+      defaultLocale: settings.defaultLocale,
+    },
+    {
+      headers: {
+        "Cache-Control": "no-store, max-age=0",
+      },
+    },
+  );
+}

app/layout.tsx

@@ -7,8 +7,10 @@ import { QueryToastBridge } from "@/components/admin/query-toast-bridge";
 import { SoundProvider } from "@/components/sound-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
+import { getSiteSettings } from "@/lib/app-config";
 import { buildAppMetadata } from "@/lib/metadata";
 import { getDirection } from "@/lib/locale";
+import { buildSiteThemeStyleText } from "@/lib/site-theme";
 import "./globals.css";
 
 const museo = localFont({
@@ -82,10 +84,16 @@ export default async function RootLayout({
 }>) {
   noStore();
 
-  const locale = await getLocale().catch(() => "de");
+  const [locale, siteSettings] = await Promise.all([
+    getLocale().catch(() => "de"),
+    getSiteSettings(),
+  ]);
 
   return (
     <html lang={locale} dir={getDirection(locale)} suppressHydrationWarning>
+      <head>
+        <style id="dynamic-site-theme">{buildSiteThemeStyleText(siteSettings.brand.primaryColor)}</style>
+      </head>
       <body className={`${museo.variable} ${dubai.variable}`}>
         <ThemeProvider>
           <SoundProvider>

app/root/site-settings/brand/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../../_admin/site-settings/brand/page";

app/root/site-settings/localization/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../../_admin/site-settings/localization/page";

components/admin/admin-dashboard-shell.tsx

@@ -3,8 +3,10 @@ import {
   FolderKanban,
   Globe2,
   ImageIcon,
+  Languages,
   LayoutDashboard,
   LogOut,
+  Palette,
   PlusSquare,
   ShieldAlert,
   SwatchBook,
@@ -34,6 +36,8 @@ type AdminDashboardCopy = {
   portfolio: string;
   media: string;
   siteSettings: string;
+  brandSettings?: string;
+  localizationSettings?: string;
   marquee?: string;
   smtp?: string;
   contactProtection?: string;
@@ -46,6 +50,7 @@ type AdminDashboardShellProps = {
   active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp" | "marquee";
   smtpChild?: "settings" | "contact-protection";
   portfolioChild?: "overview" | "projects" | "new-project" | "categories";
+  siteSettingsChild?: "brand" | "localization";
   logoutAction: () => Promise<void>;
   headerTitle: string;
   headerDescription: string;
@@ -60,6 +65,7 @@ export async function AdminDashboardShell({
   active,
   smtpChild,
   portfolioChild,
+  siteSettingsChild,
   logoutAction,
   headerTitle,
   headerDescription,
@@ -72,7 +78,7 @@ export async function AdminDashboardShell({
     getSiteSettingsMediaBindings(),
     getMaintenanceMode(),
   ]);
-  const sidebarItems = getAdminNavigation(copy, active, smtpChild, portfolioChild);
+  const sidebarItems = getAdminNavigation(copy, active, smtpChild, portfolioChild, siteSettingsChild);
   const normalizedSidebarItems = sidebarItems.filter(
     (item) =>
       item.href !== getAdminAppPath("/maintenance") &&
@@ -91,7 +97,11 @@ export async function AdminDashboardShell({
         : active === "ui-kit"
           ? SwatchBook
           : active === "site-settings"
-            ? Globe2
+            ? siteSettingsChild === "localization"
+              ? Languages
+              : siteSettingsChild === "brand"
+                ? Palette
+                : Globe2
             : active === "marquee"
               ? Type
           : active === "smtp"

components/admin/site-settings-form.tsx

@@ -3,7 +3,17 @@
 /* eslint-disable @next/next/no-img-element */
 
 import { MediaKind } from "@prisma/client";
-import { Check, FileText, ImageIcon, Search, Type, Upload } from "lucide-react";
+import {
+  Check,
+  FileText,
+  Globe2,
+  ImageIcon,
+  Languages,
+  Palette,
+  Search,
+  Type,
+  Upload,
+} from "lucide-react";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 
 import { AppCard } from "@/components/ui/app-card";
@@ -17,18 +27,27 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import type { AppLocale } from "@/lib/locale";
 import type { MediaOption } from "@/lib/media";
-import { cn } from "@/lib/utils";
+import { buildSiteThemeTokens } from "@/lib/site-theme";
 import {
   PAGE_TITLE_TOKEN,
   SITE_NAME_TOKEN,
   type SiteSettings,
   type SiteSettingsMediaBindings,
 } from "@/lib/site-settings";
+import { cn } from "@/lib/utils";
 
 type SiteSettingsFormProps = {
+  mode: "brand" | "localization";
   action: (formData: FormData) => Promise<void>;
   initialSettings: SiteSettings;
   initialBindings: SiteSettingsMediaBindings;
@@ -49,24 +68,9 @@ const localeFields: Array<{
   suffix: "Ar" | "En" | "De";
   sampleTitle: string;
 }> = [
-  {
+  { key: "ar", label: "Arabic", suffix: "Ar", sampleTitle: "Home" },
-    key: "ar",
+  { key: "en", label: "English", suffix: "En", sampleTitle: "About" },
-    label: "Arabic",
+  { key: "de", label: "Deutsch", suffix: "De", sampleTitle: "Portfolio" },
-    suffix: "Ar",
-    sampleTitle: "Home",
-  },
-  {
-    key: "en",
-    label: "English",
-    suffix: "En",
-    sampleTitle: "About",
-  },
-  {
-    key: "de",
-    label: "Deutsch",
-    suffix: "De",
-    sampleTitle: "Portfolio",
-  },
 ];
 
 function createImageFieldState(
@@ -105,18 +109,20 @@ function getMediaPreviewUrl(
   return fallbackUrl ?? "";
 }
 
-function buildPreviewTitle(
+function buildPreviewTitle(titleTemplate: string, sampleTitle: string, siteName: string) {
-  titleTemplate: string,
-  sampleTitle: string,
-  siteName: string,
-) {
   return titleTemplate.includes(PAGE_TITLE_TOKEN)
-    ? titleTemplate
+    ? titleTemplate.replace(PAGE_TITLE_TOKEN, sampleTitle).replaceAll(SITE_NAME_TOKEN, siteName)
-        .replace(PAGE_TITLE_TOKEN, sampleTitle)
-        .replaceAll(SITE_NAME_TOKEN, siteName)
     : `${sampleTitle} | ${siteName}`;
 }
 
+function BadgeLike({ children }: { children: string }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
+      {children}
+    </span>
+  );
+}
+
 function MediaLibraryModal({
   open,
   onOpenChange,
@@ -367,84 +373,20 @@ function SiteSettingsMediaRow({
   );
 }
 
-function BadgeLike({ children }: { children: string }) {
+function LocalizedFieldsSection({
+  settings,
+  setSettings,
+}: {
+  settings: SiteSettings;
+  setSettings: React.Dispatch<React.SetStateAction<SiteSettings>>;
+}) {
   return (
-    <span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
-      {children}
-    </span>
-  );
-}
-
-export function SiteSettingsForm({
-  action,
-  initialSettings,
-  initialBindings,
-  mediaOptions,
-}: SiteSettingsFormProps) {
-  const [settings, setSettings] = useState(initialSettings);
-  const [siteLogoLight, setSiteLogoLight] = useState<MediaFieldState>(
-    createImageFieldState(
-      initialBindings.siteLogoLight?.assetId,
-      initialBindings.siteLogoLight?.url,
-      "Site Logo Light",
-    ),
-  );
-  const [siteLogoDark, setSiteLogoDark] = useState<MediaFieldState>(
-    createImageFieldState(
-      initialBindings.siteLogoDark?.assetId,
-      initialBindings.siteLogoDark?.url,
-      "Site Logo Dark",
-    ),
-  );
-  const [favicon, setFavicon] = useState<MediaFieldState>(
-    createImageFieldState(
-      initialBindings.favicon?.assetId,
-      initialBindings.favicon?.url,
-      "Favicon",
-    ),
-  );
-  const [defaultOgImage, setDefaultOgImage] = useState<MediaFieldState>(
-    createImageFieldState(
-      initialBindings.defaultOgImage?.assetId,
-      initialBindings.defaultOgImage?.url,
-      "Default OG Image",
-    ),
-  );
-
-  const siteLogoLightPreviewUrl = getMediaPreviewUrl(
-    siteLogoLight,
-    mediaOptions,
-    initialBindings.siteLogoLight?.url,
-  );
-  const siteLogoDarkPreviewUrl = getMediaPreviewUrl(
-    siteLogoDark,
-    mediaOptions,
-    initialBindings.siteLogoDark?.url,
-  );
-  const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
-  const defaultOgImagePreviewUrl = getMediaPreviewUrl(
-    defaultOgImage,
-    mediaOptions,
-    initialBindings.defaultOgImage?.url,
-  );
-
-  return (
-    <form id="site-settings-form" action={action} className="space-y-6">
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
-        <div className="space-y-6">
     <section className="space-y-5">
       <div className="space-y-2">
         <h2 className="text-lg font-semibold text-foreground">Localized Titles And Copy</h2>
         <p className="text-sm text-muted-foreground">
-                Nutze
+          Nutze <code>{PAGE_TITLE_TOKEN}</code> und <code>{SITE_NAME_TOKEN}</code> fuer die globalen
-                {" "}
+          Titelvorlagen pro Sprache.
-                <code>{PAGE_TITLE_TOKEN}</code>
-                {" "}
-                und
-                {" "}
-                <code>{SITE_NAME_TOKEN}</code>
-                {" "}
-                fuer die globalen Titelvorlagen pro Sprache.
         </p>
       </div>
 
@@ -560,6 +502,108 @@ export function SiteSettingsForm({
         ))}
       </div>
     </section>
+  );
+}
+
+export function SiteSettingsForm({
+  mode,
+  action,
+  initialSettings,
+  initialBindings,
+  mediaOptions,
+}: SiteSettingsFormProps) {
+  const [settings, setSettings] = useState(initialSettings);
+  const [siteLogoLight, setSiteLogoLight] = useState<MediaFieldState>(
+    createImageFieldState(initialBindings.siteLogoLight?.assetId, initialBindings.siteLogoLight?.url, "Site Logo Light"),
+  );
+  const [siteLogoDark, setSiteLogoDark] = useState<MediaFieldState>(
+    createImageFieldState(initialBindings.siteLogoDark?.assetId, initialBindings.siteLogoDark?.url, "Site Logo Dark"),
+  );
+  const [favicon, setFavicon] = useState<MediaFieldState>(
+    createImageFieldState(initialBindings.favicon?.assetId, initialBindings.favicon?.url, "Favicon"),
+  );
+  const [defaultOgImage, setDefaultOgImage] = useState<MediaFieldState>(
+    createImageFieldState(initialBindings.defaultOgImage?.assetId, initialBindings.defaultOgImage?.url, "Default OG Image"),
+  );
+
+  const themeTokens = useMemo(() => buildSiteThemeTokens(settings.brand.primaryColor), [settings.brand.primaryColor]);
+  const siteLogoLightPreviewUrl = getMediaPreviewUrl(siteLogoLight, mediaOptions, initialBindings.siteLogoLight?.url);
+  const siteLogoDarkPreviewUrl = getMediaPreviewUrl(siteLogoDark, mediaOptions, initialBindings.siteLogoDark?.url);
+  const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
+  const defaultOgImagePreviewUrl = getMediaPreviewUrl(defaultOgImage, mediaOptions, initialBindings.defaultOgImage?.url);
+  const routePreview = settings.defaultLocale === "de" ? "/about" : `/${settings.defaultLocale}/about`;
+
+  return (
+    <form id="site-settings-form" action={action} className="space-y-6">
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
+        <div className="space-y-6">
+          {mode === "brand" ? (
+            <>
+              <section className="space-y-5">
+                <div className="space-y-2">
+                  <h2 className="text-lg font-semibold text-foreground">Brand Foundation</h2>
+                  <p className="text-sm text-muted-foreground">
+                    Steuert die Primaerfarbe der Oberflaeche sowie die wichtigsten Brand Assets.
+                  </p>
+                </div>
+
+                <AppCard level={2} padding="sm" className="space-y-4">
+                  <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
+                    <div className="space-y-2">
+                      <Label htmlFor="primaryColor">Primary Color</Label>
+                      <div className="flex items-center gap-3">
+                        <Input
+                          id="primaryColor"
+                          name="primaryColor"
+                          type="color"
+                          value={settings.brand.primaryColor}
+                          onChange={(event) =>
+                            setSettings((current) => ({
+                              ...current,
+                              brand: {
+                                ...current.brand,
+                                primaryColor: event.target.value,
+                              },
+                            }))
+                          }
+                          className="h-11 w-20 rounded-nested p-1"
+                        />
+                        <Input
+                          value={settings.brand.primaryColor}
+                          onChange={(event) =>
+                            setSettings((current) => ({
+                              ...current,
+                              brand: {
+                                ...current.brand,
+                                primaryColor: event.target.value,
+                              },
+                            }))
+                          }
+                          placeholder="#dc5a35"
+                          className="font-mono"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
+                      <div
+                        className="rounded-nested border border-border/70 p-3 text-white"
+                        style={{ backgroundColor: `hsl(${themeTokens.light.primary})` }}
+                      >
+                        <p className="text-xs uppercase tracking-[0.14em] text-white/72">Light token</p>
+                        <p className="mt-2 text-sm font-semibold">brand-primary</p>
+                      </div>
+                      <div
+                        className="rounded-nested border border-border/70 p-3 text-white"
+                        style={{ backgroundColor: `hsl(${themeTokens.dark.primary})` }}
+                      >
+                        <p className="text-xs uppercase tracking-[0.14em] text-white/72">Dark token</p>
+                        <p className="mt-2 text-sm font-semibold">brand-primary</p>
+                      </div>
+                    </div>
+                  </div>
+                </AppCard>
+              </section>
 
               <section className="space-y-4">
                 <h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>
@@ -612,12 +656,69 @@ export function SiteSettingsForm({
                   fallbackUrl={initialBindings.defaultOgImage?.url}
                 />
               </section>
+            </>
+          ) : (
+            <>
+              <section className="space-y-5">
+                <div className="space-y-2">
+                  <h2 className="text-lg font-semibold text-foreground">Visitor Language Routing</h2>
+                  <p className="text-sm text-muted-foreground">
+                    Waehlt die Standardsprache fuer Besucher ohne Sprach-Prefix. Das ist die neue globale Spracheinstellung.
+                  </p>
+                </div>
+
+                <AppCard level={2} padding="sm" className="space-y-4">
+                  <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                    <div className="space-y-2">
+                      <Label htmlFor="defaultLocaleTrigger">Default Locale</Label>
+                      <Select
+                        name="defaultLocale"
+                        value={settings.defaultLocale}
+                        onValueChange={(value) =>
+                          setSettings((current) => ({
+                            ...current,
+                            defaultLocale: value as AppLocale,
+                          }))
+                        }
+                      >
+                        <SelectTrigger id="defaultLocaleTrigger">
+                          <SelectValue placeholder="Select locale" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="de">Deutsch</SelectItem>
+                          <SelectItem value="en">English</SelectItem>
+                          <SelectItem value="ar">Arabic</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="rounded-nested border border-border/70 bg-muted/20 p-4">
+                      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                        <Globe2 className="h-4 w-4 text-brand-primary" />
+                        Route preview
+                      </div>
+                      <p className="mt-3 text-sm text-muted-foreground">
+                        <code>/about</code> will open <code>{routePreview}</code>.
+                      </p>
+                      <p className="mt-2 text-xs text-muted-foreground">
+                        Existing localized URLs stay available. Only prefix-free entry routes change.
+                      </p>
+                    </div>
+                  </div>
+                </AppCard>
+              </section>
+
+              <LocalizedFieldsSection settings={settings} setSettings={setSettings} />
+            </>
+          )}
         </div>
 
         <div className="xl:sticky xl:top-6 xl:self-start">
           <section className="space-y-4">
             <h2 className="text-lg font-semibold text-foreground">Preview</h2>
 
+            {mode === "brand" ? (
+              <>
                 <AppCard level={2} padding="sm" className="space-y-2">
                   <p className="text-sm font-semibold text-foreground">Search Result</p>
                   <div className="rounded-nested border border-border/70 bg-background p-3">
@@ -626,15 +727,11 @@ export function SiteSettingsForm({
                         <img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
                       ) : (
                         <div className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
-                      <Type className="h-3 w-3 text-muted-foreground" />
+                          <Palette className="h-3 w-3 text-muted-foreground" />
                         </div>
                       )}
-                  <p className="text-sm font-medium text-brand-primary">
+                      <p className="text-sm font-medium" style={{ color: settings.brand.primaryColor }}>
-                    {buildPreviewTitle(
+                        {buildPreviewTitle(settings.locales.de.titleTemplate, "About", settings.locales.de.siteName)}
-                      settings.locales.de.titleTemplate,
-                      "About",
-                      settings.locales.de.siteName,
-                    )}
                       </p>
                     </div>
                     <p className="mt-2 text-xs text-muted-foreground">
@@ -649,11 +746,7 @@ export function SiteSettingsForm({
                     <AppCard level={1} padding="sm">
                       <p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
                       {siteLogoLightPreviewUrl ? (
-                    <img
+                        <img src={siteLogoLightPreviewUrl} alt="Site Logo Light" className="h-10 w-full object-contain" />
-                      src={siteLogoLightPreviewUrl}
-                      alt="Site Logo Light"
-                      className="h-10 w-full object-contain"
-                    />
                       ) : (
                         <div className="flex h-10 items-center text-sm text-muted-foreground">No logo selected</div>
                       )}
@@ -662,11 +755,7 @@ export function SiteSettingsForm({
                     <div className="rounded-nested border border-border/70 bg-slate-950 p-3">
                       <p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-white/55">Dark</p>
                       {siteLogoDarkPreviewUrl ? (
-                    <img
+                        <img src={siteLogoDarkPreviewUrl} alt="Site Logo Dark" className="h-10 w-full object-contain" />
-                      src={siteLogoDarkPreviewUrl}
-                      alt="Site Logo Dark"
-                      className="h-10 w-full object-contain"
-                    />
                       ) : (
                         <div className="flex h-10 items-center text-sm text-white/60">No logo selected</div>
                       )}
@@ -677,6 +766,7 @@ export function SiteSettingsForm({
                 <AppCard level={2} padding="sm" className="space-y-2">
                   <p className="text-sm font-semibold text-foreground">Social Preview</p>
                   <div className="overflow-hidden rounded-nested border border-border/70 bg-background">
+                    <div className="h-1.5" style={{ backgroundColor: settings.brand.primaryColor }} />
                     {defaultOgImagePreviewUrl ? (
                       <img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
                     ) : (
@@ -686,11 +776,7 @@ export function SiteSettingsForm({
                     )}
                     <div className="space-y-1.5 p-3">
                       <p className="text-sm font-medium text-foreground">
-                    {buildPreviewTitle(
+                        {buildPreviewTitle(settings.locales.en.titleTemplate, "Portfolio", settings.locales.en.siteName)}
-                      settings.locales.en.titleTemplate,
-                      "Portfolio",
-                      settings.locales.en.siteName,
-                    )}
                       </p>
                       <p className="text-xs text-muted-foreground">
                         {settings.locales.en.siteDescription || "No description"}
@@ -698,6 +784,21 @@ export function SiteSettingsForm({
                     </div>
                   </div>
                 </AppCard>
+              </>
+            ) : (
+              <>
+                <AppCard level={2} padding="sm" className="space-y-2">
+                  <p className="text-sm font-semibold text-foreground">Visitor Routing</p>
+                  <div className="rounded-nested border border-border/70 bg-background p-3">
+                    <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                      <Languages className="h-4 w-4 text-brand-primary" />
+                      Default locale: {settings.defaultLocale.toUpperCase()}
+                    </div>
+                    <p className="mt-3 text-sm text-muted-foreground">
+                      Prefix-free URLs resolve to <code>{routePreview}</code>.
+                    </p>
+                  </div>
+                </AppCard>
 
                 <AppCard level={2} padding="sm" className="space-y-2">
                   <p className="text-sm font-semibold text-foreground">Locale Summary</p>
@@ -725,11 +826,14 @@ export function SiteSettingsForm({
                     </Table>
                   </div>
                 </AppCard>
+              </>
+            )}
           </section>
         </div>
       </div>
+
       <div className="flex justify-end">
-        <Button type="submit">Save Settings</Button>
+        <Button type="submit">{mode === "brand" ? "Save Brand Settings" : "Save Localization Settings"}</Button>
       </div>
     </form>
   );

lib/admin-navigation.ts

@@ -2,8 +2,10 @@ import {
   FolderKanban,
   Globe2,
   ImageIcon,
+  Languages,
   LayoutDashboard,
   Mail,
+  Palette,
   PlusSquare,
   ShieldAlert,
   SwatchBook,
@@ -20,6 +22,8 @@ type AdminNavigationCopy = {
   portfolio: string;
   media: string;
   siteSettings: string;
+  brandSettings?: string;
+  localizationSettings?: string;
   marquee?: string;
   smtp?: string;
   contactProtection?: string;
@@ -39,6 +43,7 @@ export function getAdminNavigation(
   active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp" | "marquee",
   smtpChild?: "settings" | "contact-protection",
   portfolioChild?: "overview" | "projects" | "new-project" | "categories",
+  siteSettingsChild?: "brand" | "localization",
 ): AdminNavItem[] {
   return [
     {
@@ -67,9 +72,24 @@ export function getAdminNavigation(
     },
     {
       label: copy.siteSettings,
-      href: getAdminAppPath("/site-settings"),
+      href: getAdminAppPath("/site-settings/brand"),
       icon: Globe2,
-      active: active === "site-settings",
+      active: active === "site-settings" && !siteSettingsChild,
+      expanded: active === "site-settings",
+      children: [
+        {
+          label: copy.brandSettings ?? "Brand",
+          href: getAdminAppPath("/site-settings/brand"),
+          icon: Palette,
+          active: siteSettingsChild === "brand",
+        },
+        {
+          label: copy.localizationSettings ?? "Localization",
+          href: getAdminAppPath("/site-settings/localization"),
+          icon: Languages,
+          active: siteSettingsChild === "localization",
+        },
+      ],
     },
     {
       label: copy.marquee ?? "Marquee",

lib/locale.ts

@@ -29,11 +29,19 @@ export function stripLocalePrefix(pathname: string): string {
 }
 
 export function getLocalizedPath(locale: string, pathname = "/"): string {
+  return getLocalizedPathWithDefault(locale, pathname, routing.defaultLocale);
+}
+
+export function getLocalizedPathWithDefault(
+  locale: string,
+  pathname = "/",
+  defaultLocale: AppLocale = routing.defaultLocale,
+): string {
   const localeKey = resolveLocale(locale);
   const normalizedPath = pathname === "" ? "/" : pathname;
   const strippedPath = stripLocalePrefix(normalizedPath);
 
-  if (localeKey === routing.defaultLocale) {
+  if (localeKey === defaultLocale) {
     return strippedPath;
   }
 

lib/metadata.ts

@@ -11,7 +11,7 @@ import {
   getSiteSettings,
   getSiteSettingsMediaBindings,
 } from "./app-config";
-import { AppLocale, getLocalizedPath, resolveLocale } from "./locale";
+import { AppLocale, getLocalizedPath, getLocalizedPathWithDefault, resolveLocale } from "./locale";
 import { buildSiteIconUrls } from "./site-icons";
 
 function getSiteUrl(): URL {
@@ -22,16 +22,16 @@ function toAbsoluteUrl(pathname: string): string {
   return new URL(pathname, getSiteUrl()).toString();
 }
 
-export function buildLocaleAlternates(pathname: string) {
+export function buildLocaleAlternates(pathname: string, defaultLocale = routing.defaultLocale) {
   const languages = Object.fromEntries(
-    routing.locales.map((locale) => [locale, toAbsoluteUrl(getLocalizedPath(locale, pathname))]),
+    routing.locales.map((locale) => [locale, toAbsoluteUrl(getLocalizedPathWithDefault(locale, pathname, defaultLocale))]),
   ) as Record<AppLocale, string>;
 
   return {
-    canonical: toAbsoluteUrl(getLocalizedPath(routing.defaultLocale, pathname)),
+    canonical: toAbsoluteUrl(getLocalizedPathWithDefault(defaultLocale, pathname, defaultLocale)),
     languages: {
       ...languages,
-      "x-default": toAbsoluteUrl(getLocalizedPath(routing.defaultLocale, pathname)),
+      "x-default": toAbsoluteUrl(getLocalizedPathWithDefault(defaultLocale, pathname, defaultLocale)),
     },
   };
 }
@@ -68,7 +68,7 @@ export function buildAppMetadataFromConfig(
   settings: SiteSettings,
   bindings: SiteSettingsMediaBindings,
 ): Metadata {
-  const defaultLocaleSettings = settings.locales[routing.defaultLocale];
+  const defaultLocaleSettings = settings.locales[settings.defaultLocale];
   const openGraphImages = buildMetadataImages(bindings.defaultOgImage?.url);
   const siteIconUrls = buildSiteIconUrls({
     siteName: defaultLocaleSettings.siteName,
@@ -90,9 +90,9 @@ export function buildAppMetadataFromConfig(
     openGraph: {
       title: defaultLocaleSettings.siteName,
       description: defaultLocaleSettings.siteDescription,
-      url: toAbsoluteUrl(getLocalizedPath(routing.defaultLocale, "/")),
+      url: toAbsoluteUrl(getLocalizedPathWithDefault(settings.defaultLocale, "/", settings.defaultLocale)),
       siteName: defaultLocaleSettings.siteName,
-      locale: routing.defaultLocale,
+      locale: settings.defaultLocale,
       type: "website",
       images: openGraphImages,
     },
@@ -163,7 +163,7 @@ export function buildLocalizedMetadataFromConfig(input: {
   return {
     title: resolvedTitle,
     description: resolvedDescription,
-    alternates: buildLocaleAlternates(pathname),
+    alternates: buildLocaleAlternates(pathname, settings.defaultLocale),
     openGraph: {
       title: resolvedTitle,
       description: resolvedDescription,

lib/site-icons.tsx

@@ -1,8 +1,6 @@
 import { readFile } from "fs/promises";
 import path from "path";
 
-import { routing } from "@/i18n/routing";
-
 import { getSiteSettings, getSiteSettingsMediaBindings } from "./app-config";
 import { isManagedMediaFilePath, resolveMediaUploadPath } from "./media-storage";
 
@@ -66,7 +64,7 @@ export function buildSiteIconUrls(input: SiteIconInput): SiteIconUrls {
 
 export async function getDynamicSiteIconUrls(): Promise<SiteIconUrls> {
   const [settings, bindings] = await Promise.all([getSiteSettings(), getSiteSettingsMediaBindings()]);
-  const defaultLocaleSettings = settings.locales[routing.defaultLocale];
+  const defaultLocaleSettings = settings.locales[settings.defaultLocale];
 
   return buildSiteIconUrls({
     siteName: defaultLocaleSettings.siteName,

lib/site-settings.ts

@@ -13,6 +13,7 @@ export const SITE_NAME_TOKEN = "{siteName}";
 
 export const DEFAULT_SITE_NAME = "moh-sass";
 export const DEFAULT_SITE_DESCRIPTION = "Multilingual Next.js base project";
+export const DEFAULT_SITE_PRIMARY_COLOR = "#dc5a35";
 
 type SiteLocaleSettings = {
   siteName: string;
@@ -21,7 +22,13 @@ type SiteLocaleSettings = {
   subhead: string;
 };
 
+type SiteBrandSettings = {
+  primaryColor: string;
+};
+
 export type SiteSettings = {
+  defaultLocale: AppLocale;
+  brand: SiteBrandSettings;
   locales: Record<AppLocale, SiteLocaleSettings>;
 };
 
@@ -64,6 +71,20 @@ function normalizeSiteLocaleSettings(
   };
 }
 
+export function normalizeSiteDefaultLocale(input: unknown): AppLocale {
+  return input === "ar" || input === "en" || input === "de" ? input : "de";
+}
+
+export function normalizeSitePrimaryColor(input: unknown): string {
+  if (typeof input !== "string") {
+    return DEFAULT_SITE_PRIMARY_COLOR;
+  }
+
+  const value = input.trim();
+
+  return /^#([0-9a-fA-F]{6})$/.test(value) ? value.toLowerCase() : DEFAULT_SITE_PRIMARY_COLOR;
+}
+
 export function getDefaultSiteSettingsMediaBindings(): SiteSettingsMediaBindings {
   return {
     siteLogoLight: null,
@@ -75,6 +96,10 @@ export function getDefaultSiteSettingsMediaBindings(): SiteSettingsMediaBindings
 
 export function buildDefaultSiteSettings(fallbackName = DEFAULT_SITE_NAME): SiteSettings {
   return {
+    defaultLocale: "de",
+    brand: {
+      primaryColor: DEFAULT_SITE_PRIMARY_COLOR,
+    },
     locales: {
       ar: {
         siteName: fallbackName,
@@ -115,6 +140,14 @@ export function parseSiteSettingsValue(
       : {};
 
     const siteSettings: SiteSettings = {
+      defaultLocale: normalizeSiteDefaultLocale(parsed.defaultLocale),
+      brand: {
+        primaryColor: normalizeSitePrimaryColor(
+          parsed.brand && typeof parsed.brand === "object"
+            ? (parsed.brand as Record<string, unknown>).primaryColor
+            : undefined,
+        ),
+      },
       locales: {
         ar: normalizeSiteLocaleSettings(
           locales.ar && typeof locales.ar === "object" ? (locales.ar as Record<string, unknown>) : {},

lib/site-theme.ts

@@ -0,0 +1,134 @@
+import {
+  DEFAULT_SITE_PRIMARY_COLOR,
+  normalizeSitePrimaryColor,
+} from "./site-settings";
+
+type RgbColor = {
+  r: number;
+  g: number;
+  b: number;
+};
+
+type HslColor = {
+  h: number;
+  s: number;
+  l: number;
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function hexToRgb(hex: string): RgbColor {
+  const normalized = normalizeSitePrimaryColor(hex).slice(1);
+
+  return {
+    r: Number.parseInt(normalized.slice(0, 2), 16),
+    g: Number.parseInt(normalized.slice(2, 4), 16),
+    b: Number.parseInt(normalized.slice(4, 6), 16),
+  };
+}
+
+function rgbToHsl({ r, g, b }: RgbColor): HslColor {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  const lightness = (max + min) / 2;
+
+  if (delta === 0) {
+    return {
+      h: 0,
+      s: 0,
+      l: Math.round(lightness * 100),
+    };
+  }
+
+  const saturation =
+    lightness > 0.5
+      ? delta / (2 - max - min)
+      : delta / (max + min);
+
+  let hue = 0;
+
+  switch (max) {
+    case red:
+      hue = (green - blue) / delta + (green < blue ? 6 : 0);
+      break;
+    case green:
+      hue = (blue - red) / delta + 2;
+      break;
+    default:
+      hue = (red - green) / delta + 4;
+      break;
+  }
+
+  return {
+    h: Math.round(hue * 60),
+    s: Math.round(saturation * 100),
+    l: Math.round(lightness * 100),
+  };
+}
+
+function toChannels(color: HslColor): string {
+  return `${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}%`;
+}
+
+function deriveSecondaryColor(color: HslColor, dark = false): HslColor {
+  return {
+    h: (color.h + 10) % 360,
+    s: clamp(color.s - (dark ? 2 : 8), 35, 95),
+    l: clamp(color.l + (dark ? 10 : 8), 20, 80),
+  };
+}
+
+function deriveDarkPrimary(color: HslColor): HslColor {
+  return {
+    h: color.h,
+    s: clamp(color.s, 40, 95),
+    l: clamp(color.l + 6, 30, 78),
+  };
+}
+
+export function buildSiteThemeTokens(primaryColor: string) {
+  const safePrimary = normalizeSitePrimaryColor(primaryColor || DEFAULT_SITE_PRIMARY_COLOR);
+  const basePrimary = rgbToHsl(hexToRgb(safePrimary));
+  const darkPrimary = deriveDarkPrimary(basePrimary);
+
+  return {
+    light: {
+      primary: toChannels(basePrimary),
+      secondary: toChannels(deriveSecondaryColor(basePrimary)),
+    },
+    dark: {
+      primary: toChannels(darkPrimary),
+      secondary: toChannels(deriveSecondaryColor(darkPrimary, true)),
+    },
+  };
+}
+
+export function buildSiteThemeStyleText(primaryColor: string) {
+  const tokens = buildSiteThemeTokens(primaryColor);
+
+  return `
+:root {
+  --primary: ${tokens.light.primary};
+  --ring: ${tokens.light.primary};
+  --brand-primary: ${tokens.light.primary};
+  --brand-secondary: ${tokens.light.secondary};
+  --sidebar-primary: ${tokens.light.primary};
+  --sidebar-ring: ${tokens.light.primary};
+}
+
+.dark {
+  --primary: ${tokens.dark.primary};
+  --ring: ${tokens.dark.primary};
+  --brand-primary: ${tokens.dark.primary};
+  --brand-secondary: ${tokens.dark.secondary};
+  --sidebar-primary: ${tokens.dark.primary};
+  --sidebar-ring: ${tokens.dark.primary};
+}
+  `.trim();
+}

middleware.ts

@@ -14,9 +14,37 @@ import {
   isLegacyAdminPath,
   toInternalAdminPath,
 } from "./lib/admin-routing";
+import { getLocalizedPathWithDefault } from "./lib/locale";
 
 const intlMiddleware = createMiddleware(routing);
 
+async function getConfiguredDefaultLocale(request: NextRequest) {
+  try {
+    const response = await fetch(new URL("/api/site/default-locale", request.url), {
+      headers: {
+        "x-middleware-request": "1",
+      },
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      return routing.defaultLocale;
+    }
+
+    const data = await response.json() as { defaultLocale?: string };
+
+    return data.defaultLocale === "ar" || data.defaultLocale === "en" || data.defaultLocale === "de"
+      ? data.defaultLocale
+      : routing.defaultLocale;
+  } catch {
+    return routing.defaultLocale;
+  }
+}
+
+function hasLocalePrefix(pathname: string) {
+  return routing.locales.some((locale) => pathname === `/${locale}` || pathname.startsWith(`/${locale}/`));
+}
+
 function getAdminBasicAuthUser(): string {
   return process.env.ADMIN_BASIC_AUTH_USER ?? "";
 }
@@ -111,7 +139,28 @@ export default async function middleware(request: NextRequest) {
     return response;
   }
 
-  if (pathname === "/de" || pathname.startsWith("/de/")) {
+  const configuredDefaultLocale = await getConfiguredDefaultLocale(request);
+
+  if (
+    configuredDefaultLocale !== routing.defaultLocale &&
+    (pathname === "/de" || pathname.startsWith("/de/"))
+  ) {
+    return NextResponse.next();
+  }
+
+  if (
+    configuredDefaultLocale !== routing.defaultLocale &&
+    !hasLocalePrefix(pathname)
+  ) {
+    const redirectUrl = request.nextUrl.clone();
+    redirectUrl.pathname = getLocalizedPathWithDefault(configuredDefaultLocale, pathname, routing.defaultLocale);
+    return NextResponse.redirect(redirectUrl, 307);
+  }
+
+  if (
+    configuredDefaultLocale === routing.defaultLocale &&
+    (pathname === "/de" || pathname.startsWith("/de/"))
+  ) {
     const redirectUrl = request.nextUrl.clone();
     const nextPath = pathname.slice(3) || "/";
     redirectUrl.pathname = nextPath;

tests/app-config.test.ts

@@ -9,6 +9,8 @@ describe("site settings helpers", () => {
   it("builds defaults from the fallback site name", () => {
     const settings = buildDefaultSiteSettings("Studio Moh");
 
+    expect(settings.defaultLocale).toBe("de");
+    expect(settings.brand.primaryColor).toBe("#dc5a35");
     expect(settings.locales.ar.siteName).toBe("Studio Moh");
     expect(settings.locales.ar.titleTemplate).toBe("{pageTitle} | {siteName}");
     expect(settings.locales.en.siteDescription).toBe("Multilingual Next.js base project");
@@ -18,6 +20,10 @@ describe("site settings helpers", () => {
   it("merges stored values with safe defaults", () => {
     const settings = parseSiteSettingsValue(
       JSON.stringify({
+        defaultLocale: "ar",
+        brand: {
+          primaryColor: "#112233",
+        },
         locales: {
           en: {
             siteName: "Brand EN",
@@ -34,6 +40,8 @@ describe("site settings helpers", () => {
       "Fallback Name",
     );
 
+    expect(settings.defaultLocale).toBe("ar");
+    expect(settings.brand.primaryColor).toBe("#112233");
     expect(settings.locales.en.siteName).toBe("Brand EN");
     expect(settings.locales.en.titleTemplate).toBe("{pageTitle} - {siteName}");
     expect(settings.locales.en.siteDescription).toBe("English description");
@@ -66,4 +74,19 @@ describe("site settings helpers", () => {
 
     expect(settings.locales.ar.titleTemplate).toBe("{pageTitle} | {siteName}");
   });
+
+  it("falls back for invalid default locale and invalid primary color", () => {
+    const settings = parseSiteSettingsValue(
+      JSON.stringify({
+        defaultLocale: "fr",
+        brand: {
+          primaryColor: "red",
+        },
+      }),
+      "Fallback Name",
+    );
+
+    expect(settings.defaultLocale).toBe("de");
+    expect(settings.brand.primaryColor).toBe("#dc5a35");
+  });
 });

tests/metadata.test.ts

@@ -17,6 +17,8 @@ describe("metadata helpers", () => {
 
   it("builds root metadata with dynamic icons and social preview", () => {
     const settings = buildDefaultSiteSettings("Studio Moh");
+    settings.defaultLocale = "ar";
+    settings.locales.ar.siteName = "Studio Moh AR";
     const metadata = buildAppMetadataFromConfig(settings, {
       siteLogoLight: null,
       siteLogoDark: null,
@@ -32,12 +34,16 @@ describe("metadata helpers", () => {
       },
     });
 
-    expect(metadata.title).toBe("Studio Moh");
+    expect(metadata.title).toBe("Studio Moh AR");
     expect(metadata.icons).toEqual({
       icon: [{ url: "/favicon.ico?v=v1" }],
       shortcut: [{ url: "/favicon.ico?v=v1" }],
       apple: [{ url: "/apple-icon.png?v=v1" }],
     });
+    expect(metadata.openGraph).toMatchObject({
+      locale: "ar",
+      url: "https://mohfarawati.de/",
+    });
     expect(metadata.twitter).toMatchObject({
       card: "summary_large_image",
     });