Harlekin/AfiS-Aktensystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Runde Bedienelemente, Admin zusammengelegt, Kanäle entfallen

Browse Source 
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.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harlekin
2026-09-03 15:07:43 +02:00
co-authored by Claude Opus 5
parent bbae8546a0
commit ef377f0123
84 changed files with 1234 additions and 749 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/(app)/admin/layout.tsx
+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>
)
}
web/app/(app)/admin/page.tsx
+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>
)
}
web/app/(app)/admin/richtlinie/PolicyForm.tsx
+2 -2
View File
@@ -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>
web/app/(app)/admin/richtlinie/page.tsx
+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>
)
}
web/app/(app)/admin/rollen/RoleRow.tsx
+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>
web/app/(app)/admin/rollen/page.tsx
+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>
)
}
web/app/(app)/admin/sections.ts
+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')
}
web/app/(app)/admin/system/page.tsx
+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>
)
}
web/app/(app)/admin/vorlagen/TemplateEditor.tsx
+6 -6
View File
@@ -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>
web/app/(app)/admin/vorlagen/page.tsx
+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>
)
}
web/app/(app)/chat/actions.ts
+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),
})
web/app/(app)/dokumente/[documentNumber]/DocumentActions.tsx
+8 -8
View File
@@ -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>
web/app/(app)/einstellungen/NotifyForm.tsx
+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>
web/app/(app)/export/Approvals.tsx
+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>
web/app/(app)/faelle/[caseNumber]/CaseActions.tsx
+6 -6
View File
@@ -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>
web/app/(app)/faelle/[caseNumber]/CaseLinks.tsx
+2 -2
View File
@@ -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}
web/app/(app)/faelle/[caseNumber]/EntryActions.tsx
+8 -8
View File
@@ -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>
web/app/(app)/faelle/[caseNumber]/EntryComposer.tsx
+2 -2
View File
@@ -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>
web/app/(app)/faelle/[caseNumber]/Participants.tsx
+1 -1
View File
@@ -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>
web/app/(app)/faelle/[caseNumber]/WatchToggle.tsx
+2 -1
View File
@@ -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>
web/app/(app)/faelle/[caseNumber]/layout.tsx
+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>
web/app/(app)/faelle/neu/NewCaseForm.tsx
+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>
web/app/(app)/kanaele/NewChannelForm.tsx
-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>
)
}
web/app/(app)/kanaele/[key]/page.tsx
-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>
)
}
web/app/(app)/kanaele/actions.ts
-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}`)
}
web/app/(app)/kanaele/page.tsx
-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>
)
}
web/app/(app)/layout.tsx
+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>
web/app/(app)/personalakten/[id]/Assignments.tsx
+1 -1
View File
@@ -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>
web/app/(app)/personalakten/[id]/LinkCase.tsx
+1 -1
View File
@@ -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>
)
web/app/(app)/personalakten/[id]/PersonnelHead.tsx
+10 -10
View File
@@ -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>
)
web/app/(app)/personalakten/[id]/page.tsx
+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>
)
}
web/app/(app)/personalakten/neu/NewPersonnelForm.tsx
+5 -5
View File
@@ -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>
)
web/app/(app)/personalakten/page.tsx
+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 ? (
web/app/(app)/suche/SavedViews.tsx
+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>
web/app/(app)/suche/SearchBox.tsx
+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>
)
web/app/(app)/uebersicht/page.tsx
+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>
web/app/(auth)/anmelden/page.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default async function SignInPage() {
<form action={anmelden} className="mt-8">
<button
type="submit"
className="border border-line bg-raised px-4 py-2 font-condensed text-sm text-accent"
className="btn btn-primary"
>
{de.auth.signIn}
</button>
web/app/api/stream/route.ts
+17 -13
View File
@@ -1,7 +1,8 @@
import { getCurrentUser, type CurrentUser } from '@/lib/auth/current'
import { db } from '@/lib/db'
import { visibleCaseWhere } from '@/lib/access/caseFilter'
import { visibleChannelWhere, visibleMessageWhere } from '@/lib/access/chatFilter'
import { visibleMessageWhere } from '@/lib/access/chatFilter'
import { visiblePersonnelWhere } from '@/lib/access/personnelFilter'
import { visibleAttachmentWhere } from '@/lib/access/attachmentFilter'
import { resolveCasePreviews, type CasePreview } from '@/lib/chat/preview'
import { extractCaseNumbers, type ChatMessageView } from '@/lib/chat/view'
@@ -17,7 +18,7 @@ const HEARTBEAT_MS = 25_000
/**
* Ereignisstrom für offene Ansichten.
*
* GET /api/stream?topics=case:<id>,channel:<id>
* GET /api/stream?topics=case:<id>,personnel:<id>
*
* Server-Sent Events und kein WebSocket: die Richtung ist einseitig, es geht
* durch jeden Tunnel, und der Browser baut die Verbindung von selbst wieder
@@ -129,9 +130,9 @@ async function erlaubteThemen(user: CurrentUser, gewuenscht: string[]): Promise<
.filter((t) => t.startsWith('case:'))
.map((t) => t.slice(5))
.filter(Boolean)
const kanalIds = gewuenscht
.filter((t) => t.startsWith('channel:'))
.map((t) => t.slice(8))
const personalIds = gewuenscht
.filter((t) => t.startsWith('personnel:'))
.map((t) => t.slice(10))
.filter(Boolean)
if (fallIds.length > 0) {
@@ -142,12 +143,15 @@ async function erlaubteThemen(user: CurrentUser, gewuenscht: string[]): Promise<
themen.push(...sichtbar.map((akte) => `case:${akte.id}` as Topic))
}
if (kanalIds.length > 0) {
const sichtbar = await db.channel.findMany({
where: { AND: [visibleChannelWhere(user.permissions), { id: { in: kanalIds } }] },
// Personalakten setzen neben der Stufe ein eigenes Recht voraus.
const darfPersonal =
user.permissions.isAdmin || user.permissions.permissions.has('personnel.read')
if (personalIds.length > 0 && darfPersonal) {
const sichtbar = await db.personnelFile.findMany({
where: { AND: [visiblePersonnelWhere(user.permissions), { id: { in: personalIds } }] },
select: { id: true },
})
themen.push(...sichtbar.map((kanal) => `channel:${kanal.id}` as Topic))
themen.push(...sichtbar.map((akte) => `personnel:${akte.id}` as Topic))
}
return themen
@@ -163,8 +167,8 @@ async function nachliefern(
send: Send,
): Promise<void> {
const fallIds = themen.filter((t) => t.startsWith('case:')).map((t) => t.slice(5))
const kanalIds = themen.filter((t) => t.startsWith('channel:')).map((t) => t.slice(8))
if (fallIds.length === 0 && kanalIds.length === 0) return
const personalIds = themen.filter((t) => t.startsWith('personnel:')).map((t) => t.slice(10))
if (fallIds.length === 0 && personalIds.length === 0) return
try {
const verpasst = await db.chatMessage.findMany({
@@ -172,7 +176,7 @@ async function nachliefern(
AND: [
visibleMessageWhere(user.permissions),
{ id: { gt: seit } },
{ OR: [{ caseId: { in: fallIds } }, { channelId: { in: kanalIds } }] },
{ OR: [{ caseId: { in: fallIds } }, { personnelFileId: { in: personalIds } }] },
],
},
orderBy: { id: 'asc' },
@@ -199,7 +203,7 @@ const NACHRICHT = {
mentions: true,
createdAt: true,
caseId: true,
channelId: true,
personnelFileId: true,
} as const
/**
web/app/error.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ export default function Error({ reset }: { error: Error; reset: () => void }) {
<button
type="button"
onClick={reset}
className="mt-4 border border-line bg-raised px-3 py-1.5 font-condensed text-xs"
className="mt-4 btn"
>
{commonText.retry}
</button>
web/app/globals.css
+162 -1
View File
@@ -54,13 +54,19 @@
--text-lg--line-height: 1.45;
--text-xl--line-height: 1.3;
/* Struktur: Eckenradius 2 px, ueberall gleich. Akten sind nicht abgerundet. */
/* Struktur: Flaechen bleiben eckig, Bedienelemente sind rund.
Eine Akte ist ein Blatt und hat scharfe Kanten. Was man druecken oder
ausfuellen kann, ist rund — daran erkennt man es, bevor man es beruehrt. */
--radius-none: 0px;
--radius-sm: 2px;
--radius-DEFAULT: 2px;
--radius-md: 2px;
--radius-lg: 2px;
--radius-xl: 2px;
/* Eingabefelder: weich gerundet. Ein mehrzeiliges Feld kann keine Pille sein. */
--radius-field: 10px;
/* Knoepfe, Suchbalken, Marken, Profilbild: voll gerundet. */
--radius-control: 999px;
/* Keine Schatten ausser dem Fokusring. */
--shadow-sm: none;
@@ -189,6 +195,12 @@
text-underline-offset: 2px;
}
/* Auch Kaestchen und Schalter gehoeren zur interaktiven Ebene. */
input[type='checkbox'],
input[type='radio'] {
accent-color: var(--color-accent);
}
/* Sichtbarer Fokusring in --steel, der einzige Schatten im System. */
:focus-visible {
outline: 2px solid var(--color-accent);
@@ -202,6 +214,155 @@
}
@layer components {
/* ---------------------------------------------------------------------
Bedienelemente.
Zwei Regeln, beide aus dem Betrieb heraus:
**Ein Knopf muss vor der Beruehrung als Knopf erkennbar sein.** Deshalb
traegt jeder einen Rahmen und eine eigene Grundflaeche, auch der
unscheinbarste. Ein Text, der sich erst beim Ueberfahren als Knopf
entpuppt, wird nicht gefunden.
**Und er muss beim Druecken zurueckmelden, dass er getroffen wurde.**
Beim Druecken zieht sich der Knopf leicht zusammen und bekommt einen
inneren Ring — er wirkt kurz dicker, ohne dass sich die Rahmenbreite
wirklich aendert, sonst wuerde das Umfeld springen. Die Rueckmeldung
setzt ohne Verzoegerung ein und klingt langsam ab: ein kurzer Klick
bliebe sonst unsichtbar. Siehe docs/10-design-system.md.
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
border: 1px solid var(--color-line);
border-radius: var(--radius-control);
background-color: var(--color-raised);
color: var(--color-text);
padding: 0.3rem 0.85rem;
font-family: var(--font-condensed);
font-size: var(--text-xs);
line-height: 1.45;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
/* Abklingen langsam, damit der Druck sichtbar bleibt. */
transition:
background-color 240ms ease-out,
border-color 240ms ease-out,
color 240ms ease-out,
transform 240ms ease-out,
box-shadow 240ms ease-out;
}
.btn:hover:not(:disabled):not([aria-disabled='true']) {
background-color: var(--color-panel);
border-color: var(--color-accent);
color: var(--color-accent);
transition-duration: 90ms;
}
.btn:active:not(:disabled):not([aria-disabled='true']) {
transform: scale(0.96);
border-color: var(--color-accent);
box-shadow: inset 0 0 0 1.5px var(--color-accent);
/* Sofort einsetzen, damit auch ein schneller Klick sichtbar wird. */
transition-duration: 0ms;
}
.btn:disabled,
.btn[aria-disabled='true'] {
color: var(--color-text-dim);
border-style: dashed;
cursor: not-allowed;
}
/* Der Knopf, der die Sache erledigt. Einer je Formular, nie zwei. */
.btn-primary {
color: var(--color-accent);
border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-raised));
}
/* Fuer dichte Zeilen: Etikettenleisten, Werkzeuge an einem Eintrag. */
.btn-sm {
padding: 0.15rem 0.6rem;
font-size: var(--text-2xs);
}
/* Ein Knopf, dessen Zustand er selbst ist: Etikett an oder aus,
Reaktion gesetzt oder nicht, Reiter offen oder nicht. */
.btn[aria-current='page'],
.btn[aria-pressed='true'] {
background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-raised));
border-color: var(--color-accent);
color: var(--color-accent);
}
/* Waehrend eine Aktion laeuft. Kein Spinner, nur ein ruhiger Zustand:
der Knopf bleibt stehen, wo er ist, und nimmt keine zweite Eingabe an. */
.btn[aria-busy='true'] {
color: var(--color-text-dim);
border-style: dashed;
cursor: progress;
}
/* Eingabefelder. Weich gerundet statt voll: ein mehrzeiliges Feld als
Pille waere unlesbar. */
.field {
border: 1px solid var(--color-line);
border-radius: var(--radius-field);
background-color: var(--color-raised);
color: var(--color-text);
padding: 0.4rem 0.7rem;
font-family: inherit;
font-size: var(--text-sm);
line-height: 1.5;
transition:
border-color 120ms ease-out,
background-color 120ms ease-out;
}
.field:hover:not(:disabled) {
border-color: var(--color-accent);
}
.field:disabled {
color: var(--color-text-dim);
cursor: not-allowed;
}
/* Einzeilige Felder, die wie ein Knopf aussehen duerfen: Suchbalken,
Schnellfilter. */
.field-pill {
border-radius: var(--radius-control);
padding-inline: 0.9rem;
}
select.field {
padding-block: 0.35rem;
}
/* Das Profilbild oben rechts und ueberall sonst, wo eine Person auftaucht. */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
border: 1px solid var(--color-line);
border-radius: var(--radius-control);
background-color: var(--color-raised);
color: var(--color-text-dim);
font-family: var(--font-condensed);
overflow: hidden;
object-fit: cover;
}
/* Der eine mutige Moment: die Schwaerzung. Ein massiver Balken mit feiner
Rahmenlinie, der beim ersten Erscheinen einmal von links nach rechts
durchwischt. Sonst bewegt sich in der Oberflaeche nichts von selbst. */