feat(oberflaeche): Grundlayout, Navigation und Farbschema

Deutsche Oberfläche, Hell und Dunkel über next-themes, Navigation mit
Rollenfilter und die shadcn-Primitiven, die M1 braucht.

Der Farbschema-Knopf kommt ohne Effekt und ohne Zustand aus: welches
Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes setzt
sie schon vor der Hydratation, deshalb blitzt nichts auf — und die
React-Compiler-Regel gegen setState im Effekt bleibt eingehalten.

Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit
halten.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Florian Wilde
2026-09-10 13:02:34 +02:00
co-authored by Claude Opus 5
parent 19ca0826e6
commit 4ff67c15c2
13 changed files with 505 additions and 0 deletions
+36
View File
@@ -0,0 +1,36 @@
import type { Metadata, Viewport } from 'next'
import { Toaster } from 'sonner'
import { FarbschemaAnbieter } from '@/components/farbschema-anbieter'
import './globals.css'
export const metadata: Metadata = {
title: {
default: 'Planer',
template: '%s – Planer',
},
description: 'Aufgaben, Ideen, Projekte und Zeitblöcke an einem Ort.',
applicationName: 'Planer',
robots: { index: false, follow: false },
}
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#fbfbfd' },
{ media: '(prefers-color-scheme: dark)', color: '#1a1c22' },
],
}
export default function WurzelLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="de" suppressHydrationWarning>
<body className="min-h-dvh antialiased">
<FarbschemaAnbieter>
{children}
<Toaster position="bottom-right" richColors closeButton />
</FarbschemaAnbieter>
</body>
</html>
)
}