Harlekin
4b794ec9a8
**Suche.** Sie startete auf den Fallakten, und man musste die Art vorher wählen - die falsche Reihenfolge: wer einen Namen eintippt, weiss noch nicht, ob er eine Fallakte, ein Dokument oder eine Personalakte sucht. Er will wissen, wo der Name vorkommt. „Alle" ist jetzt der Auslieferungszustand und zeigt je Art fünf Treffer als eigenen Block, mit dem Weg in die volle Liste daneben. Getrennte Blöcke statt einer gemischten Liste nach Rang: ein Aktenzeichen neben einem Namen neben einer Dokumentnummer hat keine erkennbare Ordnung. Die einzelnen Arten bleiben als Filter, und nur dort gibt es Facetten und Blättern - beides bezieht sich auf eine Grundmenge, ein Statusfilter über Fall- und Personalakten zugleich wäre bei der einen ein Filter und bei der anderen ein Ausschluss. **Kopfzeile.** Die Bereiche waren Textlinks: von einem Fliesstextlink nicht zu unterscheiden und ohne Hinweis darauf, wo man gerade ist. Jetzt dieselbe Knopfform wie alles Bedienbare, der aktive Bereich gefüllt. Der gefüllte Zustand trägt hellen Text statt der Akzentfarbe: auf der getönten Fläche wäre Akzent auf Akzent und der Kontrast fiele unter die Untergrenze. Dazu etwas grosszügigere Polsterung an beiden Knopfgrössen, .btn-count für Zahlen in Knöpfen, und kein Doppelring mehr am Profilbild. Nachgesehen mit dem gebauten CSS im Browser, hell und dunkel.
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import Link from 'next/link'
|
|
import { signOut } from '@/auth'
|
|
import { requireUser } from '@/lib/auth/current'
|
|
import { de } from '@/lib/i18n/de'
|
|
import { PaletteTrigger } from '@/components/palette/PaletteTrigger'
|
|
import { NavLinks } from '@/components/NavLinks'
|
|
import { ProfileMenu } from '@/components/ProfileMenu'
|
|
import { Avatar } from '@/components/Avatar'
|
|
import { SearchBar } from '@/components/SearchBar'
|
|
import { Vitals } from '@/components/Vitals'
|
|
import { hasAdminAccess } from './admin/sections'
|
|
|
|
/**
|
|
* Das Rahmenwerk der angemeldeten Anwendung.
|
|
*
|
|
* Die Kopfzeile trägt links die Bereiche der Arbeit — Übersicht, Fallakten,
|
|
* Personalakten, Verwaltung — und rechts alles, was den Nutzer selbst
|
|
* betrifft: Suchbalken und Profilbild. Thema, Benachrichtigungen und Abmelden
|
|
* standen früher zwischen den Aktenbereichen und nahmen dort den Platz weg,
|
|
* den die Arbeit braucht; sie sitzen jetzt hinter dem Profilbild.
|
|
*/
|
|
export default async function AppLayout({ children }: { children: React.ReactNode }) {
|
|
const user = await requireUser()
|
|
|
|
async function abmelden() {
|
|
'use server'
|
|
await signOut({ redirectTo: '/anmelden' })
|
|
}
|
|
|
|
const darfPersonal =
|
|
user.permissions.isAdmin || user.permissions.permissions.has('personnel.read')
|
|
|
|
return (
|
|
<div className="min-h-dvh">
|
|
{/* Strg+K. Winzig; die Palette selbst wird erst beim Öffnen geholt. */}
|
|
<PaletteTrigger />
|
|
<Vitals />
|
|
<header className="border-b border-line">
|
|
<div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-5 gap-y-3 px-6 py-3">
|
|
<Link href="/uebersicht" className="font-condensed text-text no-underline">
|
|
{de.app.shortName}
|
|
</Link>
|
|
|
|
<NavLinks
|
|
links={[
|
|
{ href: '/uebersicht', label: de.nav.dashboard },
|
|
{ href: '/faelle', label: de.nav.cases },
|
|
...(darfPersonal
|
|
? [{ href: '/personalakten', label: de.nav.personnel }]
|
|
: []),
|
|
{ href: '/abteilungen', label: de.nav.departments },
|
|
...(hasAdminAccess(user.permissions)
|
|
? [{ href: '/admin', label: de.nav.admin }]
|
|
: []),
|
|
]}
|
|
/>
|
|
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<SearchBar />
|
|
<ProfileMenu
|
|
displayName={user.displayName}
|
|
username={user.username}
|
|
signOutAction={abmelden}
|
|
avatar={
|
|
<Avatar
|
|
userId={user.id}
|
|
avatarHash={user.avatarHash}
|
|
displayName={user.displayName}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="inhalt">{children}</div>
|
|
</div>
|
|
)
|
|
}
|