Öffentliche Speisekarte: Wochenansicht, konfigurierbare Farben, Allergen-Legende

app/layout.tsx

@@ -1,33 +1,47 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist } from "next/font/google";
 import "./globals.css";
+import { createClient } from "@/lib/supabase/server";
+import { COLOR_VARS, DEFAULT_COLORS } from "@/lib/types";
+
+// Farben/Logo sollen Änderungen sofort widerspiegeln.
+export const dynamic = "force-dynamic";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Speisekarte",
+  description: "Speisekarte der Betriebskantine",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const supabase = await createClient();
+  const { data: settings } = await supabase
+    .from("settings")
+    .select("colors")
+    .eq("id", 1)
+    .maybeSingle();
+
+  const colors: Record<string, string> = {
+    ...DEFAULT_COLORS,
+    ...((settings?.colors as Record<string, string>) ?? {}),
+  };
+  const style = Object.fromEntries(
+    Object.entries(COLOR_VARS).map(([key, cssVar]) => [cssVar, colors[key]])
+  ) as React.CSSProperties;
+
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="de" className={`${geistSans.variable} h-full antialiased`}>
+      <body style={style} className="min-h-full flex flex-col">
+        {children}
+      </body>
     </html>
   );
 }