Harlekin
54176f17ba
Vier der acht Änderungswünsche. **Knöpfe.** Rund vierzig der siebzig Knöpfe waren blosser Text in Akzentfarbe, von einem Link nicht zu unterscheiden. Jeder trägt jetzt Rahmen und Grundfläche, über die Klasse .btn an einer Stelle definiert statt siebzigmal als Klassenkette. Beim Drücken zieht der Knopf sich zusammen und bekommt einen inneren Ring — er wirkt kurz dicker, ohne dass die Rahmenbreite sich ändert und das Umfeld springt; die Rückmeldung setzt ohne Verzögerung ein und klingt langsam ab, sonst bliebe ein kurzer Klick unsichtbar. Dazu die neue Regel: Flächen bleiben eckig, alles Bedienbare ist rund. Damit ist die Rundung eine Auskunft und keine Verzierung. **Verwaltung.** Rollen, Vorlagen und Änderungsrichtlinie waren drei Einträge in der Kopfzeile für etwas, das man selten und dann zusammenhängend braucht. Jetzt ein Eintrag /admin mit Reiterleiste, dazu eine gemeinsame Tabs-Komponente, die auch der Fallakte zeigt, welcher Reiter offen ist. **Kanäle.** Ersatzlos entfernt, mitsamt Tabelle. Der Chat gehört dorthin, wo der Vorgang steht; ein eigener Reiter mit freien Räumen war der Rückweg nach Discord. Die Personalakte hat jetzt denselben Chat wie die Fallakte — ohne „als Vermerk übernehmen", denn dafür braucht es einen Verlauf, und Meldungen gehen nur an Erwähnte, nie in den allgemeinen Kanal: dass es zu jemandem eine Personalakte gibt, ist selbst eine Auskunft. Ein CHECK erzwingt jetzt, dass eine Nachricht zu genau einem Ort gehört. **Kopfzeile.** Suchbalken statt Suchlink, als gewöhnliches Formular ohne ein Byte im Bündel. Thema, Benachrichtigungen und Abmelden sitzen hinter dem Profilbild, das von Discord kommt; wer keins hat, bekommt seine Initialen. Nebenbei: Aktenzeichen in Tests waren nur auf vier Stellen eindeutig und kollidierten zwischen Läufen, weil Akten nicht löschbar sind.
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState, type ReactNode } from 'react'
|
|
import Link from 'next/link'
|
|
import {
|
|
authText,
|
|
notifyText,
|
|
overviewText,
|
|
profileText,
|
|
themeText,
|
|
} from '@/lib/i18n/shell'
|
|
import { ThemeToggle } from '@/components/ThemeToggle'
|
|
|
|
/**
|
|
* Konto und Einstellungen, oben rechts.
|
|
*
|
|
* Alles, was den einzelnen Nutzer betrifft und nicht die Akten, sammelt sich
|
|
* hinter dem Profilbild: das Thema, die Benachrichtigungen, der eigene Zugang,
|
|
* das Abmelden. In der Kopfzeile standen diese Dinge vorher zwischen den
|
|
* Aktenbereichen und nahmen dort Platz weg, den die Arbeit braucht.
|
|
*
|
|
* Das Abmelden kommt als Server Action von aussen herein — dieses Fenster darf
|
|
* die Sitzung nicht selbst beenden können.
|
|
*/
|
|
export function ProfileMenu({
|
|
displayName,
|
|
username,
|
|
avatar,
|
|
signOutAction,
|
|
}: {
|
|
displayName: string
|
|
username: string
|
|
avatar: ReactNode
|
|
signOutAction: () => Promise<void>
|
|
}) {
|
|
const [offen, setOffen] = useState(false)
|
|
const huelle = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!offen) return
|
|
|
|
function daneben(event: PointerEvent) {
|
|
if (!huelle.current?.contains(event.target as Node)) setOffen(false)
|
|
}
|
|
function fluchttaste(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') setOffen(false)
|
|
}
|
|
|
|
document.addEventListener('pointerdown', daneben)
|
|
document.addEventListener('keydown', fluchttaste)
|
|
return () => {
|
|
document.removeEventListener('pointerdown', daneben)
|
|
document.removeEventListener('keydown', fluchttaste)
|
|
}
|
|
}, [offen])
|
|
|
|
return (
|
|
<div ref={huelle} className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOffen((vorher) => !vorher)}
|
|
aria-expanded={offen}
|
|
aria-haspopup="menu"
|
|
aria-label={profileText.open}
|
|
className="btn btn-sm p-1"
|
|
>
|
|
{avatar}
|
|
</button>
|
|
|
|
{offen ? (
|
|
<div
|
|
role="menu"
|
|
className="absolute top-full right-0 z-40 mt-2 w-64 border border-line bg-panel p-4"
|
|
>
|
|
<p className="font-condensed text-xs text-text">{displayName}</p>
|
|
<p className="font-mono text-2xs text-text-dim">@{username}</p>
|
|
|
|
<div className="mt-4 flex items-center justify-between gap-3 border-t border-line pt-3">
|
|
<span className="font-condensed text-2xs text-text-dim">{themeText.label}</span>
|
|
<ThemeToggle />
|
|
</div>
|
|
|
|
<nav className="mt-3 flex flex-col items-start gap-2 border-t border-line pt-3">
|
|
<Link href="/einstellungen" className="btn btn-sm" onClick={() => setOffen(false)}>
|
|
{notifyText.heading}
|
|
</Link>
|
|
<Link href="/zugang" className="btn btn-sm" onClick={() => setOffen(false)}>
|
|
{overviewText.heading}
|
|
</Link>
|
|
</nav>
|
|
|
|
<form action={signOutAction} className="mt-3 border-t border-line pt-3">
|
|
<button type="submit" className="btn btn-sm btn-primary">
|
|
{authText.signOut}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|