Organize/app/layout.tsx

82 lines
3.6 KiB
TypeScript

import type { Metadata, Viewport } from "next";
import { Figtree, Inter, JetBrains_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme/theme-provider";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Toaster } from "@/components/ui/sonner";
import { RegisterServiceWorker } from "@/components/pwa/register-sw";
/** UI type: Inter -- a neutral, highly legible humanist sans that reads
* cleanly at small sizes (to-do lists, tables, nav). */
const inter = Inter({
variable: "--font-sans",
subsets: ["latin"],
});
/** Display type: Figtree -- a slightly friendlier, rounder geometric sans
* for headings and wordmarks. Same family, one step of personality. */
const figtree = Figtree({
variable: "--font-heading",
subsets: ["latin"],
});
/** Code: JetBrains Mono, used for the markdown editor's monospace bits. */
const jetbrainsMono = JetBrains_Mono({
variable: "--font-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Organize",
description: "An extended to-do list and notes organizer.",
manifest: "/manifest.webmanifest",
icons: {
icon: [{ url: "/icons/icon-192.png", sizes: "192x192", type: "image/png" }],
apple: [{ url: "/icons/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
},
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: "Organize",
},
};
export const viewport: Viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "#fafafa" },
{ media: "(prefers-color-scheme: dark)", color: "#22252b" },
],
};
export default function RootLayout({ children }: LayoutProps<"/">) {
return (
<html
lang="en"
className={`${inter.variable} ${figtree.variable} ${jetbrainsMono.variable} h-full antialiased`}
suppressHydrationWarning
>
<body className="min-h-full flex flex-col">
{/* Fourteen looks: seven light (Default, Sunset, Meadow, Honey,
Rosé, Lavender, Slate) and seven dark (Dark, Ocean, Pine, Plum,
Midnight, Ember, Rosewood) -- complete token sets in
app/globals.css. "system" resolves to Default/Dark by OS
preference. No-FOUC theme restore: runs before first paint,
applies the stored preference to <html> (class + color-scheme). */}
<script
dangerouslySetInnerHTML={{
__html: `!(function(){try{var r=document.documentElement,c=['theme-default','theme-sunset','theme-meadow','theme-honey','theme-rose','theme-lavender','theme-slate','dark','ocean','theme-pine','theme-plum','theme-midnight','theme-ember','theme-rosewood','light'];for(var i=0;i<c.length;i++){r.classList.remove(c[i]);}var v=null;try{v=localStorage.getItem('theme');}catch(e){}var m={default:'theme-default',sunset:'theme-sunset',meadow:'theme-meadow',honey:'theme-honey',rose:'theme-rose',lavender:'theme-lavender',slate:'theme-slate',dark:'dark',ocean:'ocean',pine:'theme-pine',plum:'theme-plum',midnight:'theme-midnight',ember:'theme-ember',rosewood:'theme-rosewood'};var d=['dark','ocean','pine','plum','midnight','ember','rosewood'];if(v==='system'||!v){v=window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'default';}if(m[v]){r.classList.add(m[v]);r.style.colorScheme=d.indexOf(v)>=0?'dark':'light';}}catch(e){}})();`,
}}
/>
<ThemeProvider defaultTheme="system">
<TooltipProvider delay={200}>
{children}
<Toaster />
<RegisterServiceWorker />
</TooltipProvider>
</ThemeProvider>
</body>
</html>
);
}