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>
2026-09-10 13:02:34 +02:00
parent 19ca0826e6
commit 4ff67c15c2
13 changed files with 505 additions and 0 deletions
@@ -0,0 +1,109 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import { LogOut, Moon, Shield, Sun } from 'lucide-react'
+import { signOut } from 'next-auth/react'
+import type { Rolle } from '@/generated/prisma/enums'
+import { ROLLEN_NAME, istAdmin } from '@/lib/rollen'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type Eintrag = { pfad: string; name: string; nurAdmin?: boolean }
+
+const EINTRAEGE: Eintrag[] = [
+  { pfad: '/', name: 'Start' },
+  { pfad: '/bereiche', name: 'Bereiche' },
+  { pfad: '/einstellungen', name: 'Einstellungen' },
+  { pfad: '/verwaltung/protokoll', name: 'Protokoll', nurAdmin: true },
+]
+
+export function Kopfleiste({
+  name,
+  email,
+  rolle,
+  instanzName,
+}: {
+  name: string
+  email: string
+  rolle: Rolle
+  instanzName: string
+}) {
+  const pfad = usePathname()
+  const sichtbar = EINTRAEGE.filter((e) => !e.nurAdmin || istAdmin(rolle))
+
+  return (
+    <header className="border-rand bg-karte border-b">
+      <div className="mx-auto flex w-full max-w-5xl flex-wrap items-center gap-x-6 gap-y-3 px-4 py-3">
+        <Link href="/" className="text-base font-semibold tracking-tight">
+          Planer
+        </Link>
+
+        <nav aria-label="Hauptnavigation" className="flex flex-1 flex-wrap gap-1">
+          {sichtbar.map((eintrag) => {
+            const aktiv =
+              eintrag.pfad === '/' ? pfad === '/' : pfad.startsWith(eintrag.pfad)
+            return (
+              <Link
+                key={eintrag.pfad}
+                href={eintrag.pfad}
+                aria-current={aktiv ? 'page' : undefined}
+                className={cn(
+                  'rounded-md px-3 py-1.5 text-sm transition-colors',
+                  aktiv
+                    ? 'bg-gedaempft text-vordergrund font-medium'
+                    : 'text-gedaempft-vordergrund hover:bg-gedaempft hover:text-vordergrund',
+                )}
+              >
+                {eintrag.nurAdmin && (
+                  <Shield className="mr-1 inline size-3.5" aria-hidden />
+                )}
+                {eintrag.name}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="flex items-center gap-1">
+          <FarbschemaKnopf />
+          <span
+            className="text-gedaempft-vordergrund hidden text-xs sm:inline"
+            title={`${email} · ${ROLLEN_NAME[rolle]} · ${instanzName}`}
+          >
+            {name}
+          </span>
+          <Button
+            art="leise"
+            groesse="quadrat"
+            title="Abmelden"
+            onClick={() => void signOut({ callbackUrl: '/anmelden' })}
+          >
+            <LogOut aria-hidden />
+            <span className="sr-only">Abmelden</span>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function FarbschemaKnopf() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  // Welches Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes
+  // setzt sie schon vor der Hydratation, deshalb braucht es hier weder einen
+  // Effekt noch einen Zustand – und es blitzt nichts auf.
+  return (
+    <Button
+      art="leise"
+      groesse="quadrat"
+      title="Farbschema wechseln"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+    >
+      <Moon className="dark:hidden" aria-hidden />
+      <Sun className="hidden dark:block" aria-hidden />
+      <span className="sr-only">Farbschema wechseln</span>
+    </Button>
+  )
+}