Runde Bedienelemente, Admin zusammengelegt, Kanäle entfallen

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.
This commit is contained in:
Harlekin
2026-09-03 15:07:43 +02:00
parent db40c5d3b2
commit 54176f17ba
80 changed files with 1130 additions and 745 deletions
+35
View File
@@ -0,0 +1,35 @@
import type { ReactNode } from 'react'
import { notFound } from 'next/navigation'
import { requireUser } from '@/lib/auth/current'
import { de } from '@/lib/i18n/de'
import { adminSections, hasAdminAccess } from './sections'
import { Tabs } from '@/components/Tabs'
export const dynamic = 'force-dynamic'
/**
* Kopf und Leiste der Verwaltung.
*
* Wie bei der Fallakte sind die Bereiche **eigene Seiten** unter einem
* gemeinsamen Layout, keine umgeschalteten Blöcke. Wer gar keinen Bereich
* sehen darf, bekommt 404 — die Verwaltung ist für ihn nicht vorhanden.
*/
export default async function AdminLayout({ children }: { children: ReactNode }) {
const user = await requireUser()
if (!hasAdminAccess(user.permissions)) notFound()
const bereiche = adminSections(user.permissions)
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<header>
<h1 className="font-condensed">{de.admin.heading}</h1>
<p className="mt-1 text-2xs text-text-dim">{de.admin.intro}</p>
</header>
<Tabs tabs={bereiche.map((bereich) => ({ href: bereich.href, label: bereich.label }))} />
<div className="mt-8">{children}</div>
</main>
)
}
+33
View File
@@ -0,0 +1,33 @@
import type { Metadata } from 'next'
import Link from 'next/link'
import { requireUser } from '@/lib/auth/current'
import { de } from '@/lib/i18n/de'
import { adminSections } from './sections'
export const metadata: Metadata = { title: de.admin.heading }
export const dynamic = 'force-dynamic'
/**
* Die Startseite der Verwaltung: was es gibt und wofür es da ist.
*
* Kein Weiterleiten auf den ersten Bereich. Wer die Verwaltung öffnet, weiss
* nicht immer, wo das Gesuchte liegt — eine Liste mit einem Satz je Bereich
* beantwortet das schneller als das Durchklicken der Leiste.
*/
export default async function AdminIndexPage() {
const user = await requireUser()
const bereiche = adminSections(user.permissions)
return (
<ul className="border-t border-line">
{bereiche.map((bereich) => (
<li key={bereich.key} className="border-b border-line">
<Link href={bereich.href} className="block py-3 no-underline">
<span className="font-condensed text-text">{bereich.label}</span>
<span className="mt-0.5 block text-2xs text-text-dim">{bereich.description}</span>
</Link>
</li>
))}
</ul>
)
}
@@ -74,7 +74,7 @@ export function PolicyForm({
setGrace(Number(event.target.value))
setSaved(false)
}}
className="mt-1.5 block w-24 border border-line bg-raised px-3 py-2 font-mono text-sm disabled:text-text-dim"
className="mt-1.5 block w-24 field font-mono disabled:text-text-dim"
/>
</label>
@@ -95,7 +95,7 @@ export function PolicyForm({
type="button"
onClick={submit}
disabled={pending}
className="border border-line bg-raised px-4 py-2 font-condensed text-xs text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? caseText.saving : settingsText.save}
</button>
+3 -3
View File
@@ -13,8 +13,8 @@ export default async function PolicyPage() {
const setting = await db.appSetting.findUnique({ where: { id: 1 } })
return (
<main className="mx-auto max-w-(--container-measure) px-6 py-10">
<h1 className="font-condensed">{de.settings.heading}</h1>
<section>
<h2 className="font-condensed">{de.settings.heading}</h2>
<p className="mt-2 text-text-dim">{de.settings.intro}</p>
<PolicyForm
initial={{
@@ -23,6 +23,6 @@ export default async function PolicyPage() {
entryEditMarkGrace: setting?.entryEditMarkGrace ?? false,
}}
/>
</main>
</section>
)
}
+3 -3
View File
@@ -91,7 +91,7 @@ export function RoleRow({
setCategory(event.target.value)
setSaved(false)
}}
className="border border-line bg-raised px-2 py-1"
className="field"
>
{CATEGORIES.map((value) => (
<option key={value} value={value}>
@@ -109,7 +109,7 @@ export function RoleRow({
setClearanceLevel(Number(event.target.value))
setSaved(false)
}}
className="border border-line bg-raised px-2 py-1"
className="field"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
@@ -160,7 +160,7 @@ export function RoleRow({
type="button"
onClick={submit}
disabled={pending || !dirty}
className="border border-line bg-raised px-3 py-1.5 font-condensed text-xs text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? roleAdminText.saving : roleAdminText.save}
</button>
+3 -3
View File
@@ -27,8 +27,8 @@ export default async function RoleAdminPage() {
])
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<h1 className="font-condensed">{de.roleAdmin.heading}</h1>
<section>
<h2 className="font-condensed">{de.roleAdmin.heading}</h2>
<p className="mt-2 max-w-(--container-measure) text-text-dim">{de.roleAdmin.intro}</p>
{mappings.length === 0 ? (
@@ -73,6 +73,6 @@ export default async function RoleAdminPage() {
})}
</>
)}
</main>
</section>
)
}
+53
View File
@@ -0,0 +1,53 @@
import type { EffectivePermissions } from '@/lib/auth/permissions'
import { de } from '@/lib/i18n/de'
/**
* Die Bereiche der Verwaltung, an einer Stelle.
*
* Vorher standen Rollenverwaltung, Vorlagen und Änderungsrichtlinie als drei
* eigene Einträge in der Kopfzeile — drei Einträge für etwas, das man selten
* und dann meist zusammenhängend braucht. Jetzt ist es ein Eintrag mit einer
* Leiste darunter.
*
* Die Rechteprüfung steht hier **nicht** als Berechtigung, sondern nur für die
* Anzeige: jede Seite prüft selbst noch einmal mit `requirePermission`. Eine
* versteckte Kachel ist kein Schutz.
*/
export type AdminSection = {
key: string
href: string
label: string
description: string
}
export function adminSections(p: EffectivePermissions): AdminSection[] {
const darf = (recht: 'roles.manage' | 'template.manage' | 'admin'): boolean =>
p.isAdmin || (recht !== 'admin' && p.permissions.has(recht))
const alle: (AdminSection & { sichtbar: boolean })[] = [
{ key: 'roles', href: '/admin/rollen', sichtbar: darf('roles.manage'), ...text('roles') },
{
key: 'templates',
href: '/admin/vorlagen',
sichtbar: darf('template.manage'),
...text('templates'),
},
{ key: 'policy', href: '/admin/richtlinie', sichtbar: darf('admin'), ...text('policy') },
{ key: 'log', href: '/admin/protokoll', sichtbar: darf('admin'), ...text('log') },
{ key: 'system', href: '/admin/system', sichtbar: darf('admin'), ...text('system') },
]
return alle.filter((bereich) => bereich.sichtbar).map(({ sichtbar: _, ...rest }) => rest)
}
function text(key: string): { label: string; description: string } {
return {
label: de.admin.sections[key] ?? key,
description: de.admin.descriptions[key] ?? '',
}
}
/** Ob jemand die Verwaltung überhaupt sieht. Für die Kopfzeile. */
export function hasAdminAccess(p: EffectivePermissions): boolean {
return p.isAdmin || p.permissions.has('roles.manage') || p.permissions.has('template.manage')
}
+3 -3
View File
@@ -54,8 +54,8 @@ export default async function SystemPage() {
await requirePermission('admin')
return (
<main className="mx-auto max-w-(--container-measure) px-6 py-10">
<h1 className="font-condensed">{de.health.heading}</h1>
<section>
<h2 className="font-condensed">{de.health.heading}</h2>
<Suspense
fallback={
<div className="mt-6">
@@ -91,7 +91,7 @@ export default async function SystemPage() {
<a href="/api/admin/export?kind=bundle">{de.export.bundle}</a>
</p>
</section>
</main>
</section>
)
}
@@ -85,7 +85,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
<input
value={name}
onChange={(event) => setName(event.target.value)}
className="mt-1 block w-full border border-line bg-raised px-2 py-1 text-sm"
className="mt-1 block w-full field"
/>
</label>
@@ -94,7 +94,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
<input
value={description}
onChange={(event) => setDescription(event.target.value)}
className="mt-1 block w-full border border-line bg-raised px-2 py-1 text-sm"
className="mt-1 block w-full field"
/>
</label>
@@ -104,7 +104,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
<input
value={numberPrefix}
onChange={(event) => setNumberPrefix(event.target.value)}
className="mt-1 block w-32 border border-line bg-raised px-2 py-1 font-mono text-sm"
className="mt-1 block w-32 field font-mono"
/>
</label>
<label className="block">
@@ -115,7 +115,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
max={8}
value={numberPadding}
onChange={(event) => setNumberPadding(Number(event.target.value))}
className="mt-1 block w-20 border border-line bg-raised px-2 py-1 font-mono text-sm"
className="mt-1 block w-20 field font-mono"
/>
</label>
</div>
@@ -127,7 +127,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
onChange={(event) => setJson(event.target.value)}
rows={16}
spellCheck={false}
className="mt-1 block w-full border border-line bg-raised px-2 py-1 font-mono text-2xs"
className="mt-1 block w-full field font-mono text-2xs"
/>
<span className="mt-1 block text-2xs text-text-dim">{templateAdminText.fieldsHelp}</span>
</label>
@@ -137,7 +137,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
type="button"
onClick={submit}
disabled={pending || !geparst.ok}
className="border border-line bg-raised px-3 py-1.5 font-condensed text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? caseText.saving : templateAdminText.save}
</button>
+3 -3
View File
@@ -17,8 +17,8 @@ export default async function TemplateAdminPage() {
})
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<h1 className="font-condensed">{de.templateAdmin.heading}</h1>
<section>
<h2 className="font-condensed">{de.templateAdmin.heading}</h2>
<p className="mt-2 max-w-(--container-measure) text-text-dim">{de.templateAdmin.intro}</p>
{vorlagen.length === 0 ? (
@@ -41,6 +41,6 @@ export default async function TemplateAdminPage() {
))}
</div>
)}
</main>
</section>
)
}
+2 -2
View File
@@ -27,7 +27,7 @@ function toMessage(error: unknown): string {
const scope = z.union([
z.object({ kind: z.literal('case'), caseNumber: z.string().min(1) }),
z.object({ kind: z.literal('channel'), key: z.string().min(1) }),
z.object({ kind: z.literal('personnel'), fileId: z.string().min(1) }),
])
const sendSchema = z.object({
@@ -114,7 +114,7 @@ export async function adoptAsEntryAction(input: unknown): Promise<ActionResult>
}
const readSchema = z.object({
scopeType: z.enum(['case', 'channel']),
scopeType: z.enum(['case', 'personnel']),
scopeId: z.string().min(1),
})
@@ -63,7 +63,7 @@ export function DocumentActions({
if (!confirm(documentText.finalizeHint)) return
run(() => finalizeDocumentAction({ documentNumber }))
}}
className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{documentText.finalize}
</button>
@@ -78,7 +78,7 @@ export function DocumentActions({
value={nextLevel}
onChange={(event) => setNextLevel(Number(event.target.value))}
aria-label={clearanceText.classification}
className="border border-line bg-raised px-2 py-1"
className="field"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
@@ -98,7 +98,7 @@ export function DocumentActions({
}),
)
}
className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{commonText.save}
</button>
@@ -110,7 +110,7 @@ export function DocumentActions({
rows={2}
placeholder={caseText.reclassifyReason}
aria-label={caseText.reclassifyReason}
className="mt-2 block w-full max-w-sm border border-line bg-raised px-3 py-2 text-2xs"
className="mt-2 block w-full max-w-sm field text-2xs"
/>
) : null}
</div>
@@ -126,21 +126,21 @@ export function DocumentActions({
rows={2}
placeholder={documentText.retractReason}
aria-label={documentText.retractReason}
className="block w-full max-w-sm border border-line bg-raised px-3 py-2 text-2xs"
className="block w-full max-w-sm field text-2xs"
/>
<div className="mt-2 flex gap-3">
<button
type="button"
disabled={pending || reason.trim().length < 10}
onClick={() => run(() => retractDocumentAction({ documentNumber, reason }))}
className="border border-line bg-raised px-3 py-1 font-condensed text-stamp-4 disabled:text-text-dim"
className="btn btn-sm text-stamp-4"
>
{documentText.retract}
</button>
<button
type="button"
onClick={() => setRetracting(false)}
className="font-condensed text-text-dim"
className="btn btn-sm"
>
{commonText.cancel}
</button>
@@ -150,7 +150,7 @@ export function DocumentActions({
<button
type="button"
onClick={() => setRetracting(true)}
className="font-condensed text-text-dim"
className="btn btn-sm"
>
{documentText.retract}
</button>
+1 -1
View File
@@ -30,7 +30,7 @@ export function NotifyForm({ current }: { current: string }) {
<button
type="submit"
disabled={pending}
className="border border-line bg-raised px-4 py-2 font-condensed text-xs text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{notifyText.save}
</button>
+5 -5
View File
@@ -53,14 +53,14 @@ export function Approvals({ jobs }: { jobs: Auftrag[] }) {
if (ergebnis.error) setFehler(ergebnis.error)
})
}
className="border border-line bg-raised px-2 py-0.5 font-condensed text-accent"
className="btn btn-sm btn-primary"
>
{exportText.approve}
</button>
<button
type="button"
onClick={() => setAblehnung(auftrag.id)}
className="font-condensed text-text-dim"
className="btn btn-sm"
>
{exportText.reject}
</button>
@@ -74,7 +74,7 @@ export function Approvals({ jobs }: { jobs: Auftrag[] }) {
rows={2}
placeholder={exportText.rejectReason}
aria-label={exportText.rejectReason}
className="block w-full max-w-sm border border-line bg-raised px-3 py-2 text-2xs"
className="block w-full max-w-sm field text-2xs"
/>
<div className="mt-1 flex gap-3 text-2xs">
<button
@@ -93,14 +93,14 @@ export function Approvals({ jobs }: { jobs: Auftrag[] }) {
}
})
}
className="font-condensed text-stamp-4 disabled:text-text-dim"
className="btn btn-sm text-stamp-4"
>
{exportText.reject}
</button>
<button
type="button"
onClick={() => setAblehnung(null)}
className="font-condensed text-text-dim"
className="btn btn-sm"
>
{commonText.cancel}
</button>
@@ -52,7 +52,7 @@ export function CaseActions({
<select
value={nextStatus}
onChange={(event) => setNextStatus(event.target.value)}
className="border border-line bg-raised px-2 py-1"
className="field"
>
{statusTargets.map((target) => (
<option key={target} value={target}>
@@ -64,7 +64,7 @@ export function CaseActions({
value={statusReason}
onChange={(event) => setStatusReason(event.target.value)}
placeholder={entryText.changeReason}
className="w-56 border border-line bg-raised px-2 py-1"
className="w-56 field"
/>
<button
type="button"
@@ -80,7 +80,7 @@ export function CaseActions({
`${caseText.statusChange}: ${caseText.statusNames[nextStatus] ?? nextStatus}?`,
)
}
className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? caseText.saving : commonText.save}
</button>
@@ -94,7 +94,7 @@ export function CaseActions({
<select
value={nextLevel}
onChange={(event) => setNextLevel(Number(event.target.value))}
className="border border-line bg-raised px-2 py-1"
className="field"
>
{levels
.filter((level) => level.level <= maxLevel)
@@ -111,7 +111,7 @@ export function CaseActions({
value={levelReason}
onChange={(event) => setLevelReason(event.target.value)}
placeholder={caseText.reclassifyReason}
className="w-64 border border-line bg-raised px-2 py-1"
className="w-64 field"
/>
) : null}
<button
@@ -128,7 +128,7 @@ export function CaseActions({
`${caseText.reclassify}: ${nextLevel}?`,
)
}
className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? caseText.saving : commonText.save}
</button>
@@ -72,7 +72,7 @@ export function CaseLinks({
if (!ergebnis.ok) setFehler(ergebnis.error)
})
}
className="font-condensed text-2xs text-text-dim"
className="btn btn-sm"
>
{linkText.remove}
</button>
@@ -110,7 +110,7 @@ export function CaseLinks({
onChange={(event) => setTarget(event.target.value)}
placeholder={linkText.target}
aria-label={linkText.target}
className="border border-line bg-raised px-2 py-1 font-mono text-2xs"
className="field font-mono text-2xs"
/>
</AddPanel>
) : null}
@@ -53,13 +53,13 @@ export function EntryActions({
value={reason}
onChange={(event) => setReason(event.target.value)}
placeholder={entryText.retractReason}
className="w-64 border border-line bg-raised px-2 py-1"
className="w-64 field"
/>
<button
type="button"
disabled={pending}
onClick={() => run(() => restoreEntryAction({ entryId, caseNumber, reason }))}
className="font-condensed text-accent disabled:text-text-dim"
className="btn btn-sm btn-primary"
>
{entryText.restore}
</button>
@@ -73,7 +73,7 @@ export function EntryActions({
return (
<div className="mt-1.5 flex gap-3 text-2xs">
{canEdit ? (
<button type="button" onClick={() => setMode('edit')} className="font-condensed text-accent">
<button type="button" onClick={() => setMode('edit')} className="btn btn-sm btn-primary">
{entryText.edit}
</button>
) : null}
@@ -81,7 +81,7 @@ export function EntryActions({
<button
type="button"
onClick={() => setMode('retract')}
className="font-condensed text-accent"
className="btn btn-sm btn-primary"
>
{entryText.retract}
</button>
@@ -97,7 +97,7 @@ export function EntryActions({
value={draft}
onChange={(event) => setDraft(event.target.value)}
rows={4}
className="block w-full border border-line bg-raised px-3 py-2 text-sm"
className="block w-full field"
/>
) : null}
@@ -105,7 +105,7 @@ export function EntryActions({
value={reason}
onChange={(event) => setReason(event.target.value)}
placeholder={mode === 'edit' ? entryText.changeReason : entryText.retractReason}
className="mt-2 block w-full border border-line bg-raised px-2 py-1"
className="mt-2 block w-full field"
/>
<div className="mt-2 flex items-center gap-3">
@@ -119,7 +119,7 @@ export function EntryActions({
: retractEntryAction({ entryId, caseNumber, reason }),
)
}
className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? caseText.saving : mode === 'edit' ? entryText.editSave : entryText.retract}
</button>
@@ -131,7 +131,7 @@ export function EntryActions({
setReason('')
setError(null)
}}
className="font-condensed text-text-dim"
className="btn btn-sm"
>
{entryText.cancel}
</button>
@@ -67,12 +67,12 @@ export function EntryComposer({ caseNumber }: { caseNumber: string }) {
}}
rows={3}
placeholder={caseText.entryPlaceholder}
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block w-full field"
/>
<button
type="submit"
disabled={pending || draft.trim().length === 0}
className="mt-2 border border-line bg-raised px-3 py-1.5 font-condensed text-xs text-accent disabled:text-text-dim"
className="mt-2 btn btn-primary"
>
{pending ? caseText.saving : entryText.create}
</button>
@@ -77,7 +77,7 @@ export function Participants({
if (!ergebnis.ok) setFehler(ergebnis.error)
})
}
className="font-condensed text-2xs text-text-dim"
className="btn btn-sm"
>
{participantText.remove}
</button>
@@ -35,7 +35,8 @@ export function WatchToggle({
else setAktiv(ergebnis.watching)
})
}
className={`font-condensed text-2xs ${aktiv ? 'text-accent' : 'text-text-dim'}`}
aria-pressed={aktiv}
className="btn btn-sm"
>
{aktiv ? watchText.unwatch : watchText.watch}
</button>
+8 -13
View File
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { db } from '@/lib/db'
import { Tabs } from '@/components/Tabs'
import { requireUser } from '@/lib/auth/current'
import { loadVisibleCase } from '@/lib/cases/service'
import { de } from '@/lib/i18n/de'
@@ -52,12 +52,13 @@ export default async function CaseLayout({
])
const level = levels.find((l) => l.level === akte.classification)
const basis = `/faelle/${akte.caseNumber}`
const reiter = [
{ href: '', label: de.case.tabFile },
{ href: '/beteiligte', label: de.case.tabRelations },
{ href: '/dokumente', label: de.case.tabDocuments },
{ href: '/aenderungen', label: de.case.changes },
{ href: '/export', label: de.export.heading },
{ href: basis, label: de.case.tabFile },
{ href: `${basis}/beteiligte`, label: de.case.tabRelations },
{ href: `${basis}/dokumente`, label: de.case.tabDocuments },
{ href: `${basis}/aenderungen`, label: de.case.changes },
{ href: `${basis}/export`, label: de.export.heading },
]
return (
@@ -97,13 +98,7 @@ export default async function CaseLayout({
/>
</header>
<nav className="mt-8 flex flex-wrap gap-4 border-b border-line pb-2 font-condensed text-xs">
{reiter.map((eintrag) => (
<Link key={eintrag.href} href={`/faelle/${akte.caseNumber}${eintrag.href}`}>
{eintrag.label}
</Link>
))}
</nav>
<Tabs tabs={reiter} />
<div className="mt-8">{children}</div>
</main>
+5 -5
View File
@@ -30,7 +30,7 @@ export function NewCaseForm({
required
minLength={3}
maxLength={200}
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block w-full field"
/>
</div>
@@ -42,7 +42,7 @@ export function NewCaseForm({
id="templateKey"
name="templateKey"
required
className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block field"
>
{templates.map((template) => (
<option key={template.key} value={template.key}>
@@ -61,7 +61,7 @@ export function NewCaseForm({
id="classification"
name="classification"
defaultValue={defaultLevel}
className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block field"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
@@ -82,7 +82,7 @@ export function NewCaseForm({
id="personnelFileId"
name="personnelFileId"
defaultValue=""
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block w-full field"
>
<option value="">{caseText.subjectNone}</option>
{people.map((person) => (
@@ -98,7 +98,7 @@ export function NewCaseForm({
<button
type="submit"
disabled={pending}
className="border border-line bg-raised px-4 py-2 font-condensed text-xs text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? caseText.saving : caseText.create}
</button>
-116
View File
@@ -1,116 +0,0 @@
'use client'
import { useActionState, useState } from 'react'
import { channelText } from '@/lib/i18n/chat'
import { clearanceText, commonText } from '@/lib/i18n/common'
import { createChannelAction, type ActionResult } from './actions'
export function NewChannelForm({ levels }: { levels: { level: number; name: string }[] }) {
const [offen, setOffen] = useState(false)
const [state, action, pending] = useActionState<ActionResult | null, FormData>(
createChannelAction,
null,
)
if (!offen) {
return (
<button
type="button"
onClick={() => setOffen(true)}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
>
{channelText.create}
</button>
)
}
return (
<form action={action} className="max-w-(--container-measure) border border-line p-4">
<p className="font-condensed text-xs text-text-dim">{channelText.createTitle}</p>
<div className="mt-3 grid gap-4 sm:grid-cols-2">
<div>
<label htmlFor="name" className="font-condensed text-2xs text-text-dim">
{channelText.name}
</label>
<input
id="name"
name="name"
required
minLength={2}
maxLength={120}
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
/>
</div>
<div>
<label htmlFor="key" className="font-condensed text-2xs text-text-dim">
{channelText.key}
</label>
<input
id="key"
name="key"
required
pattern="[a-z0-9][a-z0-9-]{1,40}"
className="mt-1 block w-full border border-line bg-raised px-3 py-2 font-mono text-sm"
/>
<p className="mt-1 text-2xs text-text-dim">{channelText.keyHint}</p>
</div>
<div className="sm:col-span-2">
<label htmlFor="description" className="font-condensed text-2xs text-text-dim">
{channelText.description}
</label>
<input
id="description"
name="description"
maxLength={500}
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
/>
</div>
<div>
<label htmlFor="minClearance" className="font-condensed text-2xs text-text-dim">
{channelText.minClearance}
</label>
<select
id="minClearance"
name="minClearance"
defaultValue={0}
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
{level.level} · {level.name}
</option>
))}
</select>
<p className="mt-1 text-2xs text-text-dim">
{channelText.minClearanceHint} {clearanceText.label}
</p>
</div>
</div>
{state && !state.ok ? (
<p className="mt-3 font-condensed text-2xs text-stamp-4">{state.error}</p>
) : null}
<div className="mt-4 flex gap-3">
<button
type="submit"
disabled={pending}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
>
{pending ? commonText.loading : channelText.create}
</button>
<button
type="button"
onClick={() => setOffen(false)}
className="font-condensed text-2xs text-text-dim"
>
{commonText.cancel}
</button>
</div>
</form>
)
}
-70
View File
@@ -1,70 +0,0 @@
import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { requireUser } from '@/lib/auth/current'
import { AccessError } from '@/lib/errors'
import { loadChatView } from '@/lib/chat/load'
import { db } from '@/lib/db'
import { visibleChannelWhere } from '@/lib/access/chatFilter'
import { de } from '@/lib/i18n/de'
import { Chat } from '@/components/chat/Chat'
export const dynamic = 'force-dynamic'
export async function generateMetadata({
params,
}: {
params: Promise<{ key: string }>
}): Promise<Metadata> {
const { key } = await params
return { title: `#${key}` }
}
export default async function ChannelPage({ params }: { params: Promise<{ key: string }> }) {
const user = await requireUser()
const { key } = await params
const kanal = await db.channel.findFirst({
where: { AND: [visibleChannelWhere(user.permissions), { key, isArchived: false }] },
select: { id: true, key: true, name: true, description: true },
})
// Kein Zugriff heisst 404.
if (!kanal) notFound()
let ansicht
try {
ansicht = await loadChatView(user.permissions, { kind: 'channel', key: kanal.key })
} catch (error) {
if (error instanceof AccessError) notFound()
throw error
}
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<header>
<span className="font-mono text-xs text-text-dim">#{kanal.key}</span>
<h1 className="mt-1 font-condensed">{kanal.name}</h1>
{kanal.description ? (
<p className="mt-2 max-w-(--container-measure) text-sm text-text-dim">
{kanal.description}
</p>
) : null}
</header>
<div className="mt-8">
<Chat
scope={{ kind: 'channel', key: kanal.key, channelId: kanal.id }}
topic={`channel:${kanal.id}`}
initial={ansicht.messages}
initialReactions={ansicht.reactions}
currentUserId={user.id}
lastReadAt={ansicht.lastReadAt}
// Ein Vermerk gehört in eine Akte. Ein Kanal hat keine.
canAdopt={false}
mentionNames={ansicht.mentionNames}
/>
</div>
<p className="mt-4 text-2xs text-text-dim">{de.chat.hint}</p>
</main>
)
}
-40
View File
@@ -1,40 +0,0 @@
'use server'
import { redirect } from 'next/navigation'
import { z } from 'zod'
import { requireUser } from '@/lib/auth/current'
import { AccessError } from '@/lib/errors'
import { createChannel } from '@/lib/chat/service'
import { de } from '@/lib/i18n/de'
export type ActionResult = { ok: true } | { ok: false; error: string }
const schema = z.object({
key: z.string().min(2).max(40),
name: z.string().min(2).max(120),
description: z.string().max(500).optional(),
minClearance: z.coerce.number().int().min(0).max(5),
})
export async function createChannelAction(
_prev: ActionResult | null,
formData: FormData,
): Promise<ActionResult> {
const user = await requireUser()
const parsed = schema.safeParse(Object.fromEntries(formData))
if (!parsed.success) return { ok: false, error: de.actionErrors.default! }
let key: string
try {
const kanal = await createChannel(user.permissions, parsed.data)
key = kanal.key
} catch (error) {
if (error instanceof AccessError) {
return { ok: false, error: de.actionErrors[error.code] ?? de.actionErrors.default! }
}
console.error('[kanaele] unerwartet', error)
return { ok: false, error: de.actionErrors.default! }
}
redirect(`/kanaele/${key}`)
}
-71
View File
@@ -1,71 +0,0 @@
import type { Metadata } from 'next'
import Link from 'next/link'
import { db } from '@/lib/db'
import { requireUser } from '@/lib/auth/current'
import { listChannels } from '@/lib/chat/service'
import { de } from '@/lib/i18n/de'
import { StampMark } from '@/components/StampMark'
import { NewChannelForm } from './NewChannelForm'
export const metadata: Metadata = { title: de.channel.heading }
export const dynamic = 'force-dynamic'
/**
* Freie Kanäle: Räume für Absprachen, die zu keiner Akte gehören.
*
* Ein Kanal über der Stufe des Lesers taucht nicht auf. Anders als bei Akten
* ist die Existenz eines Kanals aber kein Geheimnis für die, die seine Stufe
* haben — ein Raum, den man erraten müsste, wäre keiner.
*/
export default async function ChannelListPage() {
const user = await requireUser()
const [kanaele, levels] = await Promise.all([
listChannels(user.permissions),
db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
])
const levelName = new Map(levels.map((l) => [l.level, l.name]))
const darfAnlegen = user.permissions.isAdmin || user.permissions.permissions.has('case.create')
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<h1 className="font-condensed">{de.channel.heading}</h1>
<p className="mt-2 max-w-(--container-measure) text-sm text-text-dim">
{de.channel.intro}
</p>
{kanaele.length === 0 ? (
<p className="mt-10 text-text-dim">{de.channel.empty}</p>
) : (
<ul className="mt-6 border-t border-line">
{kanaele.map((kanal) => (
<li key={kanal.id} className="border-b border-line">
<Link
href={`/kanaele/${kanal.key}`}
prefetch
className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 text-text no-underline"
>
<span className="font-mono text-xs text-text-dim">#{kanal.key}</span>
<span className="grow">{kanal.name}</span>
{kanal.minClearance > 0 ? (
<StampMark
level={kanal.minClearance}
name={levelName.get(kanal.minClearance) ?? de.common.unknown}
/>
) : null}
</Link>
</li>
))}
</ul>
)}
{darfAnlegen ? (
<div className="mt-8">
<NewChannelForm
levels={levels.filter((l) => l.level <= user.permissions.clearanceLevel)}
/>
</div>
) : null}
</main>
)
}
+35 -28
View File
@@ -3,9 +3,21 @@ import { signOut } from '@/auth'
import { requireUser } from '@/lib/auth/current'
import { de } from '@/lib/i18n/de'
import { PaletteTrigger } from '@/components/palette/PaletteTrigger'
import { ThemeToggle } from '@/components/ThemeToggle'
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()
@@ -14,48 +26,43 @@ export default async function AppLayout({ children }: { children: React.ReactNod
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-6 gap-y-2 px-6 py-3">
<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>
<nav className="flex gap-4 font-condensed text-xs">
<nav className="flex flex-wrap gap-4 font-condensed text-xs">
<Link href="/uebersicht">{de.nav.dashboard}</Link>
<Link href="/faelle">{de.nav.cases}</Link>
{user.permissions.isAdmin || user.permissions.permissions.has('personnel.read') ? (
<Link href="/personalakten">{de.nav.personnel}</Link>
) : null}
<Link href="/suche">{de.nav.search}</Link>
<Link href="/kanaele">{de.channel.heading}</Link>
<Link href="/einstellungen">{de.notify.heading}</Link>
{user.permissions.isAdmin || user.permissions.permissions.has('roles.manage') ? (
<>
<Link href="/admin/rollen">{de.nav.admin}</Link>
{user.permissions.isAdmin ||
user.permissions.permissions.has('template.manage') ? (
<Link href="/admin/vorlagen">{de.templateAdmin.heading}</Link>
) : null}
{user.permissions.isAdmin ? (
<Link href="/admin/richtlinie">{de.settings.heading}</Link>
) : null}
</>
{darfPersonal ? <Link href="/personalakten">{de.nav.personnel}</Link> : null}
{hasAdminAccess(user.permissions) ? (
<Link href="/admin">{de.nav.admin}</Link>
) : null}
</nav>
<div className="ml-auto flex items-center gap-3 text-xs text-text-dim">
<ThemeToggle />
<span className="font-mono">{user.displayName}</span>
<form action={abmelden}>
<button type="submit" className="font-condensed text-accent">
{de.auth.signOut}
</button>
</form>
<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>
@@ -63,7 +63,7 @@ export function Assignments({
if (!ergebnis.ok) setFehler(ergebnis.error)
})
}
className="font-condensed text-2xs text-text-dim"
className="btn btn-sm"
>
{assignmentText.remove}
</button>
@@ -42,7 +42,7 @@ export function LinkCase({ personnelFileId }: { personnelFileId: string }) {
onChange={(event) => setCaseNumber(event.target.value)}
placeholder={linkText.target}
aria-label={linkText.target}
className="border border-line bg-raised px-2 py-1 font-mono text-2xs"
className="field font-mono text-2xs"
/>
</AddPanel>
)
@@ -79,7 +79,7 @@ export function PersonnelHead({
<button
type="button"
onClick={() => setEditing(true)}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
className="btn btn-sm btn-primary"
>
{personnelText.edit}
</button>
@@ -129,7 +129,7 @@ export function PersonnelHead({
name="note"
rows={3}
defaultValue={file.note ?? ''}
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1 block w-full field"
/>
</div>
@@ -141,14 +141,14 @@ export function PersonnelHead({
<button
type="submit"
disabled={pending}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
className="btn btn-sm btn-primary"
>
{pending ? commonText.loading : commonText.save}
</button>
<button
type="button"
onClick={() => setEditing(false)}
className="font-condensed text-2xs text-text-dim"
className="btn btn-sm"
>
{commonText.cancel}
</button>
@@ -179,7 +179,7 @@ function Reclassify({
<button
type="button"
onClick={() => setOpen(true)}
className="font-condensed text-2xs text-text-dim"
className="btn btn-sm"
>
{personnelText.reclassify}
</button>
@@ -193,7 +193,7 @@ function Reclassify({
value={to}
onChange={(event) => setTo(Number(event.target.value))}
aria-label={clearanceText.classification}
className="border border-line bg-raised px-2 py-1 text-2xs"
className="field text-2xs"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
@@ -211,14 +211,14 @@ function Reclassify({
else setError(result.error)
})
}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
className="btn btn-sm btn-primary"
>
{commonText.save}
</button>
<button
type="button"
onClick={() => setOpen(false)}
className="font-condensed text-2xs text-text-dim"
className="btn btn-sm"
>
{commonText.cancel}
</button>
@@ -233,7 +233,7 @@ function Reclassify({
rows={2}
placeholder={caseText.reclassifyReason}
aria-label={caseText.reclassifyReason}
className="mt-2 block w-full border border-line bg-raised px-3 py-2 text-2xs"
className="mt-2 block w-full field text-2xs"
/>
) : null}
@@ -282,7 +282,7 @@ function Feld({
minLength={required ? 2 : undefined}
maxLength={120}
defaultValue={defaultValue ?? ''}
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1 block w-full field"
/>
</div>
)
+45
View File
@@ -14,6 +14,8 @@ import {
import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
import { canWritePersonnel } from '@/lib/access/documentWrite'
import { trackOpen } from '@/lib/recent/track'
import { loadChatView } from '@/lib/chat/load'
import { ChatLazy } from '@/components/chat/ChatLazy'
import { de } from '@/lib/i18n/de'
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
import { SkeletonLine } from '@/components/Skeleton'
@@ -160,6 +162,40 @@ async function AssignmentBlock({
)
}
/**
* Der Chat einer Personalakte.
*
* Denselben formlosen Teil hat die Fallakte auch. Er steht bewusst **in** der
* Akte und nicht in einem freien Raum daneben: über eine Person zu reden, ohne
* dass das Gespräch bei ihrer Akte steht, war genau das, was vorher auf
* Discord passiert ist. Siehe docs/13-entscheidungen.md.
*
* Übernehmen als Vermerk gibt es hier nicht — dafür braucht es einen Verlauf,
* und den führt nur die Fallakte.
*/
async function ChatBlock({
file,
user,
}: {
file: { id: string }
user: { id: string; permissions: EffectivePermissions }
}) {
const ansicht = await loadChatView(user.permissions, { kind: 'personnel', fileId: file.id })
return (
<ChatLazy
scope={{ kind: 'personnel', fileId: file.id }}
topic={`personnel:${file.id}`}
initial={ansicht.messages}
initialReactions={ansicht.reactions}
currentUserId={user.id}
lastReadAt={ansicht.lastReadAt}
canAdopt={false}
mentionNames={ansicht.mentionNames}
/>
)
}
export default async function PersonnelPage({ params }: { params: Promise<{ id: string }> }) {
const user = await requirePermission('personnel.read')
const { id } = await params
@@ -249,6 +285,15 @@ export default async function PersonnelPage({ params }: { params: Promise<{ id:
</Suspense>
</div>
</section>
<section className="mt-10">
<h2 className="font-condensed">{de.chat.heading}</h2>
<div className="mt-4">
<Suspense fallback={<SkeletonLine width="60%" />}>
<ChatBlock file={akte} user={user} />
</Suspense>
</div>
</section>
</main>
)
}
@@ -40,7 +40,7 @@ export function NewPersonnelForm({
id="userId"
name="userId"
defaultValue=""
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block w-full field"
>
<option value="">{personnelText.noAccount}</option>
{members.map((member) => (
@@ -79,7 +79,7 @@ export function NewPersonnelForm({
id="note"
name="note"
rows={3}
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block w-full field"
/>
<p className="mt-1 text-2xs text-text-dim">{personnelText.noteHelp}</p>
</div>
@@ -93,7 +93,7 @@ export function NewPersonnelForm({
id="classification"
name="classification"
defaultValue={defaultLevel}
className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block field"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
@@ -110,7 +110,7 @@ export function NewPersonnelForm({
<button
type="submit"
disabled={pending}
className="border border-line bg-raised px-4 py-2 font-condensed text-sm text-accent disabled:text-text-dim"
className="btn btn-primary"
>
{pending ? commonText.loading : personnelText.create}
</button>
@@ -140,7 +140,7 @@ function Feld({
required={required}
minLength={minLength}
maxLength={120}
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
className="mt-1.5 block w-full field"
/>
</div>
)
+1 -1
View File
@@ -49,7 +49,7 @@ export default async function PersonnelListPage({
defaultValue={q ?? ''}
placeholder={de.personnel.search}
aria-label={de.personnel.search}
className="w-full max-w-sm border border-line bg-raised px-3 py-2 text-sm"
className="w-full max-w-sm field"
/>
{status ? <input type="hidden" name="status" value={status} /> : null}
{darfAnlegen ? (
+5 -5
View File
@@ -47,7 +47,7 @@ export function SavedViews({
disabled={pending}
title={searchText.deleteView}
onClick={() => startTransition(async () => void (await deleteViewAction({ id: view.id })))}
className="text-text-dim"
className="btn btn-sm"
>
×
</button>
@@ -62,7 +62,7 @@ export function SavedViews({
placeholder={searchText.saveViewName}
aria-label={searchText.saveViewName}
maxLength={60}
className="border border-line bg-raised px-2 py-1"
className="field"
/>
<button
type="button"
@@ -78,14 +78,14 @@ export function SavedViews({
}
})
}
className="border border-line bg-raised px-2 py-1 font-condensed text-accent disabled:text-text-dim"
className="btn btn-sm btn-primary"
>
{commonText.save}
</button>
<button
type="button"
onClick={() => setOffen(false)}
className="font-condensed text-text-dim"
className="btn btn-sm"
>
{commonText.cancel}
</button>
@@ -94,7 +94,7 @@ export function SavedViews({
<button
type="button"
onClick={() => setOffen(true)}
className="ml-auto font-condensed text-text-dim"
className="ml-auto btn btn-sm"
>
{searchText.saveView}
</button>
+1 -1
View File
@@ -50,7 +50,7 @@ export function SearchBox({ filters }: { filters: SearchFilters }) {
placeholder={searchText.placeholder}
aria-label={searchText.placeholder}
autoFocus
className="w-full max-w-xl border border-line bg-raised px-3 py-2 text-sm"
className="w-full max-w-xl field"
/>
</div>
)
+1 -1
View File
@@ -57,7 +57,7 @@ export default async function DashboardPage() {
<h2 className="font-condensed">{de.dashboard.opened}</h2>
{daten.geoeffnet.length > 0 ? (
<form action={clearRecentAction}>
<button type="submit" className="font-condensed text-2xs text-text-dim">
<button type="submit" className="btn btn-sm">
{de.dashboard.openedClear}
</button>
</form>