import type { Metadata, Viewport } from "next";
import { Inter, Fraunces } from "next/font/google";
import { cookies } from "next/headers";
import { ConvexAuthNextjsServerProvider } from "@convex-dev/auth/nextjs/server";
import { Providers } from "@/components/providers";
import { getSettings } from "@/lib/settings";
import "./globals.css";
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
const fraunces = Fraunces({ subsets: ["latin"], variable: "--font-fraunces", display: "swap", axes: ["opsz", "SOFT"] });
export const metadata: Metadata = {
title: { default: "LocaJour", template: "%s ยท LocaJour" },
description: "Private property management system for daily-rental apartments.",
applicationName: "LocaJour",
manifest: "/manifest.webmanifest",
appleWebApp: { capable: true, statusBarStyle: "default", title: "LocaJour" },
};
export const viewport: Viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "#faf9f7" },
{ media: "(prefers-color-scheme: dark)", color: "#131211" },
],
width: "device-width",
initialScale: 1,
viewportFit: "cover",
};
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const [jar, settings] = await Promise.all([cookies(), getSettings().catch(() => null)]);
const theme = (jar.get("lj_theme")?.value as "light" | "dark" | "system" | undefined) ?? settings?.theme ?? "system";
const accent = (jar.get("lj_accent")?.value as string | undefined) ?? settings?.accent ?? "teal";
const lang = settings?.language ?? "en";
const dir = lang === "ar" ? "rtl" : "ltr";
return (
{/* Runs before the page paints, so a dark-mode visitor never sees a light flash.
It lives at the top of rather than in a hand-written : the App
Router owns the document head, and rendering our own element there makes
React reconcile its injected metadata/style list without keys. */}
{theme === "system" ? (
) : null}
{children}
);
}