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
co-authored by
Claude Opus 5
Claude Opus 5
parent
19ca0826e6
commit
4ff67c15c2
@@ -0,0 +1,90 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/*
|
||||
* Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit
|
||||
* halten. Die Bereichsfarben kommen aus der Datenbank und werden zur Laufzeit
|
||||
* gesetzt, nicht hier.
|
||||
*/
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
|
||||
--hintergrund: oklch(0.99 0.002 250);
|
||||
--vordergrund: oklch(0.21 0.02 260);
|
||||
--karte: oklch(1 0 0);
|
||||
--karte-vordergrund: oklch(0.21 0.02 260);
|
||||
--gedaempft: oklch(0.96 0.004 250);
|
||||
--gedaempft-vordergrund: oklch(0.5 0.015 260);
|
||||
--rand: oklch(0.91 0.006 255);
|
||||
--eingabe: oklch(0.91 0.006 255);
|
||||
--ring: oklch(0.55 0.16 258);
|
||||
|
||||
--betont: oklch(0.52 0.17 258);
|
||||
--betont-vordergrund: oklch(0.99 0.002 250);
|
||||
--gefahr: oklch(0.55 0.21 27);
|
||||
--gefahr-vordergrund: oklch(0.99 0.002 250);
|
||||
--erfolg: oklch(0.6 0.13 155);
|
||||
--warnung: oklch(0.7 0.15 75);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--hintergrund: oklch(0.17 0.015 262);
|
||||
--vordergrund: oklch(0.95 0.005 250);
|
||||
--karte: oklch(0.21 0.018 262);
|
||||
--karte-vordergrund: oklch(0.95 0.005 250);
|
||||
--gedaempft: oklch(0.26 0.018 262);
|
||||
--gedaempft-vordergrund: oklch(0.7 0.015 258);
|
||||
--rand: oklch(0.31 0.018 262);
|
||||
--eingabe: oklch(0.31 0.018 262);
|
||||
--ring: oklch(0.62 0.15 258);
|
||||
|
||||
--betont: oklch(0.62 0.16 258);
|
||||
--betont-vordergrund: oklch(0.17 0.015 262);
|
||||
--gefahr: oklch(0.62 0.19 25);
|
||||
--gefahr-vordergrund: oklch(0.98 0.002 250);
|
||||
--erfolg: oklch(0.68 0.12 155);
|
||||
--warnung: oklch(0.78 0.13 75);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-hintergrund: var(--hintergrund);
|
||||
--color-vordergrund: var(--vordergrund);
|
||||
--color-karte: var(--karte);
|
||||
--color-karte-vordergrund: var(--karte-vordergrund);
|
||||
--color-gedaempft: var(--gedaempft);
|
||||
--color-gedaempft-vordergrund: var(--gedaempft-vordergrund);
|
||||
--color-rand: var(--rand);
|
||||
--color-eingabe: var(--eingabe);
|
||||
--color-ring: var(--ring);
|
||||
--color-betont: var(--betont);
|
||||
--color-betont-vordergrund: var(--betont-vordergrund);
|
||||
--color-gefahr: var(--gefahr);
|
||||
--color-gefahr-vordergrund: var(--gefahr-vordergrund);
|
||||
--color-erfolg: var(--erfolg);
|
||||
--color-warnung: var(--warnung);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-rand outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-hintergrund text-vordergrund;
|
||||
font-feature-settings:
|
||||
'liga' 1,
|
||||
'calt' 1;
|
||||
}
|
||||
|
||||
/* Wer mit der Tastatur bedient, muss sehen, wo er ist. */
|
||||
:focus-visible {
|
||||
@apply outline-ring outline-2 outline-offset-2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { ShieldAlert } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
export const metadata: Metadata = { title: 'Keine Berechtigung' }
|
||||
|
||||
export default function KeineBerechtigungSeite() {
|
||||
return (
|
||||
<main className="flex min-h-dvh flex-col items-center justify-center gap-4 px-4 text-center">
|
||||
<ShieldAlert className="text-gedaempft-vordergrund size-10" aria-hidden />
|
||||
<h1 className="text-xl font-semibold">Dazu fehlt dir die Berechtigung</h1>
|
||||
<p className="text-gedaempft-vordergrund max-w-sm text-sm">
|
||||
Diese Seite ist der Verwaltung vorbehalten. Wenn du meinst, dass das ein Versehen
|
||||
ist, wende dich an die Verwaltung dieser Instanz.
|
||||
</p>
|
||||
<Button alsKind art="umriss">
|
||||
<Link href="/">Zurück zum Start</Link>
|
||||
</Button>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
export const metadata: Metadata = { title: 'Nicht gefunden' }
|
||||
|
||||
export default function NichtGefunden() {
|
||||
return (
|
||||
<main className="flex min-h-dvh flex-col items-center justify-center gap-4 px-4 text-center">
|
||||
<p className="text-gedaempft-vordergrund text-sm">Fehler 404</p>
|
||||
<h1 className="text-xl font-semibold">Diese Seite gibt es nicht</h1>
|
||||
<p className="text-gedaempft-vordergrund max-w-sm text-sm">
|
||||
Möglicherweise ist sie in dieser Instanz auch gar nicht vorgesehen.
|
||||
</p>
|
||||
<Button alsKind art="umriss">
|
||||
<Link href="/">Zurück zum Start</Link>
|
||||
</Button>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
'use client'
|
||||
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
|
||||
/**
|
||||
* Hell, Dunkel oder nach Systemeinstellung. Die Wahl liegt im Browser des
|
||||
* Benutzers, nicht in der Datenbank.
|
||||
*/
|
||||
export function FarbschemaAnbieter({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const knopfStile = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
|
||||
{
|
||||
variants: {
|
||||
art: {
|
||||
betont: 'bg-betont text-betont-vordergrund hover:bg-betont/90',
|
||||
umriss: 'border border-rand bg-karte hover:bg-gedaempft',
|
||||
leise: 'hover:bg-gedaempft',
|
||||
gefahr: 'bg-gefahr text-gefahr-vordergrund hover:bg-gefahr/90',
|
||||
verweis: 'text-betont underline-offset-4 hover:underline',
|
||||
},
|
||||
groesse: {
|
||||
normal: 'h-9 px-4 py-2',
|
||||
klein: 'h-8 rounded-md px-3 text-xs',
|
||||
gross: 'h-11 rounded-md px-6',
|
||||
quadrat: 'size-9',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
art: 'betont',
|
||||
groesse: 'normal',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type KnopfEigenschaften = React.ComponentProps<'button'> &
|
||||
VariantProps<typeof knopfStile> & {
|
||||
/** Rendert stattdessen das Kindelement, z. B. einen Link. */
|
||||
alsKind?: boolean
|
||||
}
|
||||
|
||||
function Button({
|
||||
className,
|
||||
art,
|
||||
groesse,
|
||||
alsKind = false,
|
||||
...rest
|
||||
}: KnopfEigenschaften) {
|
||||
const Element = alsKind ? Slot : 'button'
|
||||
return <Element className={cn(knopfStile({ art, groesse }), className)} {...rest} />
|
||||
}
|
||||
|
||||
export { Button, knopfStile }
|
||||
@@ -0,0 +1,40 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Card({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'bg-karte text-karte-vordergrund border-rand rounded-xl border shadow-sm',
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardKopf({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||
return <div className={cn('flex flex-col gap-1 p-6 pb-4', className)} {...rest} />
|
||||
}
|
||||
|
||||
function CardTitel({ className, ...rest }: React.ComponentProps<'h2'>) {
|
||||
return (
|
||||
<h2
|
||||
className={cn('text-lg leading-none font-semibold tracking-tight', className)}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardBeschreibung({ className, ...rest }: React.ComponentProps<'p'>) {
|
||||
return <p className={cn('text-gedaempft-vordergrund text-sm', className)} {...rest} />
|
||||
}
|
||||
|
||||
function CardInhalt({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||
return <div className={cn('p-6 pt-0', className)} {...rest} />
|
||||
}
|
||||
|
||||
function CardFuss({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||
return <div className={cn('flex items-center gap-2 p-6 pt-0', className)} {...rest} />
|
||||
}
|
||||
|
||||
export { Card, CardKopf, CardTitel, CardBeschreibung, CardInhalt, CardFuss }
|
||||
@@ -0,0 +1,20 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Input({ className, type, ...rest }: React.ComponentProps<'input'>) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
'border-eingabe bg-karte flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-colors outline-none',
|
||||
'placeholder:text-gedaempft-vordergrund',
|
||||
'focus-visible:border-ring focus-visible:ring-ring/40 focus-visible:ring-2',
|
||||
'aria-invalid:border-gefahr aria-invalid:ring-gefahr/30',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,19 @@
|
||||
'use client'
|
||||
|
||||
import * as LabelPrimitive from '@radix-ui/react-label'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Label({ className, ...rest }: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
className={cn(
|
||||
'text-sm leading-none font-medium select-none',
|
||||
'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -0,0 +1,26 @@
|
||||
'use client'
|
||||
|
||||
import * as SeparatorPrimitive from '@radix-ui/react-separator'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = 'horizontal',
|
||||
decorative = true,
|
||||
...rest
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
'bg-rand shrink-0',
|
||||
orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
@@ -0,0 +1,31 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { ROLLEN_NAME, istAdmin, rolleReichtAus } from './rollen'
|
||||
|
||||
describe('rolleReichtAus', () => {
|
||||
it('laesst jede Rolle das, was sie selbst ist', () => {
|
||||
expect(rolleReichtAus('BENUTZER', 'BENUTZER')).toBe(true)
|
||||
expect(rolleReichtAus('ADMIN', 'ADMIN')).toBe(true)
|
||||
})
|
||||
|
||||
it('laesst die Verwaltung auch alles Niedrigere', () => {
|
||||
expect(rolleReichtAus('ADMIN', 'BENUTZER')).toBe(true)
|
||||
})
|
||||
|
||||
it('laesst einen Benutzer nicht in die Verwaltung', () => {
|
||||
expect(rolleReichtAus('BENUTZER', 'ADMIN')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('istAdmin', () => {
|
||||
it('erkennt nur die Verwaltung', () => {
|
||||
expect(istAdmin('ADMIN')).toBe(true)
|
||||
expect(istAdmin('BENUTZER')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('ROLLEN_NAME', () => {
|
||||
it('benennt jede Rolle deutsch', () => {
|
||||
expect(ROLLEN_NAME.BENUTZER).toBe('Benutzer')
|
||||
expect(ROLLEN_NAME.ADMIN).toBe('Verwaltung')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { Rolle } from '@/generated/prisma/enums'
|
||||
|
||||
/**
|
||||
* Rangfolge der Rollen. Reine Logik, damit Seite, Server Action und
|
||||
* Oberflaeche dieselbe Antwort geben.
|
||||
*/
|
||||
|
||||
const RANG: Record<Rolle, number> = {
|
||||
BENUTZER: 1,
|
||||
ADMIN: 2,
|
||||
}
|
||||
|
||||
export const ROLLEN_NAME: Record<Rolle, string> = {
|
||||
BENUTZER: 'Benutzer',
|
||||
ADMIN: 'Verwaltung',
|
||||
}
|
||||
|
||||
/** Reicht die vorhandene Rolle fuer das Verlangte? */
|
||||
export function rolleReichtAus(vorhanden: Rolle, verlangt: Rolle): boolean {
|
||||
return RANG[vorhanden] >= RANG[verlangt]
|
||||
}
|
||||
|
||||
export function istAdmin(rolle: Rolle): boolean {
|
||||
return rolleReichtAus(rolle, 'ADMIN')
|
||||
}
|
||||
Reference in New Issue
Block a user