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.
2026-09-03 15:07:43 +02:00
parent db40c5d3b2
commit 54176f17ba
80 changed files with 1130 additions and 745 deletions
@@ -39,7 +39,7 @@ export function AddPanel({
      <button
        type="button"
        onClick={() => setOffen(true)}
-        className="mt-4 border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
+        className="mt-4 btn btn-sm btn-primary"
      >
        {label}
      </button>
@@ -63,14 +63,14 @@ export function AddPanel({
              else setFehler(ergebnis.error ?? commonText.retry)
            })
          }
-          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"
        >
          {submitLabel ?? label}
        </button>
        <button
          type="button"
          onClick={() => setOffen(false)}
-          className="font-condensed text-2xs text-text-dim"
+          className="btn btn-sm"
        >
          {commonText.cancel}
        </button>
@@ -98,7 +98,7 @@ export function PanelSelect({
      value={value}
      onChange={(event) => onChange(event.target.value)}
      aria-label={label}
-      className="border border-line bg-raised px-2 py-1 text-2xs"
+      className="field text-2xs"
    >
      {children}
    </select>
@@ -0,0 +1,52 @@
+/**
+ * Profilbild einer Person.
+ *
+ * Die Quelle ist Discord: dort liegt das Bild ohnehin, die Anmeldung läuft
+ * über dieselbe Stelle, und ein eigener Zwischenspeicher wäre ein Dienst mehr
+ * im Stack für ein Bild von 64 Pixeln. Dafür steht `cdn.discordapp.com` in der
+ * Inhaltsrichtlinie, siehe middleware.ts.
+ *
+ * Ohne Bild — und das ist der Normalfall bei Konten ohne eigenes Profilbild —
+ * stehen die Anfangsbuchstaben da. Kein Platzhaltergesicht: ein leerer Kreis
+ * mit Initialen ist ehrlicher und lädt nichts nach.
+ */
+export function Avatar({
+  userId,
+  avatarHash,
+  displayName,
+  size = 28,
+}: {
+  userId: string
+  avatarHash: string | null
+  displayName: string
+  size?: number
+}) {
+  const kanten = { width: size, height: size, fontSize: Math.round(size * 0.4) }
+
+  if (!avatarHash) {
+    return (
+      <span aria-hidden className="avatar" style={kanten}>
+        {initialen(displayName)}
+      </span>
+    )
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element -- fremde Quelle, kein Layout-Nutzen durch next/image
+    <img
+      src={`https://cdn.discordapp.com/avatars/${userId}/${avatarHash}.png?size=64`}
+      alt=""
+      width={size}
+      height={size}
+      className="avatar"
+      style={kanten}
+    />
+  )
+}
+
+function initialen(name: string): string {
+  const teile = name.trim().split(/\s+/).filter(Boolean)
+  if (teile.length === 0) return '?'
+  if (teile.length === 1) return teile[0]!.slice(0, 2).toUpperCase()
+  return (teile[0]![0]! + teile[teile.length - 1]![0]!).toUpperCase()
+}
@@ -0,0 +1,101 @@
+'use client'
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import Link from 'next/link'
+import {
+  authText,
+  notifyText,
+  overviewText,
+  profileText,
+  themeText,
+} from '@/lib/i18n/shell'
+import { ThemeToggle } from '@/components/ThemeToggle'
+
+/**
+ * Konto und Einstellungen, oben rechts.
+ *
+ * Alles, was den einzelnen Nutzer betrifft und nicht die Akten, sammelt sich
+ * hinter dem Profilbild: das Thema, die Benachrichtigungen, der eigene Zugang,
+ * das Abmelden. In der Kopfzeile standen diese Dinge vorher zwischen den
+ * Aktenbereichen und nahmen dort Platz weg, den die Arbeit braucht.
+ *
+ * Das Abmelden kommt als Server Action von aussen herein — dieses Fenster darf
+ * die Sitzung nicht selbst beenden können.
+ */
+export function ProfileMenu({
+  displayName,
+  username,
+  avatar,
+  signOutAction,
+}: {
+  displayName: string
+  username: string
+  avatar: ReactNode
+  signOutAction: () => Promise<void>
+}) {
+  const [offen, setOffen] = useState(false)
+  const huelle = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!offen) return
+
+    function daneben(event: PointerEvent) {
+      if (!huelle.current?.contains(event.target as Node)) setOffen(false)
+    }
+    function fluchttaste(event: KeyboardEvent) {
+      if (event.key === 'Escape') setOffen(false)
+    }
+
+    document.addEventListener('pointerdown', daneben)
+    document.addEventListener('keydown', fluchttaste)
+    return () => {
+      document.removeEventListener('pointerdown', daneben)
+      document.removeEventListener('keydown', fluchttaste)
+    }
+  }, [offen])
+
+  return (
+    <div ref={huelle} className="relative">
+      <button
+        type="button"
+        onClick={() => setOffen((vorher) => !vorher)}
+        aria-expanded={offen}
+        aria-haspopup="menu"
+        aria-label={profileText.open}
+        className="btn btn-sm p-1"
+      >
+        {avatar}
+      </button>
+
+      {offen ? (
+        <div
+          role="menu"
+          className="absolute top-full right-0 z-40 mt-2 w-64 border border-line bg-panel p-4"
+        >
+          <p className="font-condensed text-xs text-text">{displayName}</p>
+          <p className="font-mono text-2xs text-text-dim">@{username}</p>
+
+          <div className="mt-4 flex items-center justify-between gap-3 border-t border-line pt-3">
+            <span className="font-condensed text-2xs text-text-dim">{themeText.label}</span>
+            <ThemeToggle />
+          </div>
+
+          <nav className="mt-3 flex flex-col items-start gap-2 border-t border-line pt-3">
+            <Link href="/einstellungen" className="btn btn-sm" onClick={() => setOffen(false)}>
+              {notifyText.heading}
+            </Link>
+            <Link href="/zugang" className="btn btn-sm" onClick={() => setOffen(false)}>
+              {overviewText.heading}
+            </Link>
+          </nav>
+
+          <form action={signOutAction} className="mt-3 border-t border-line pt-3">
+            <button type="submit" className="btn btn-sm btn-primary">
+              {authText.signOut}
+            </button>
+          </form>
+        </div>
+      ) : null}
+    </div>
+  )
+}
@@ -0,0 +1,36 @@
+import { searchBarText } from '@/lib/i18n/shell'
+
+/**
+ * Der Suchbalken in der Kopfzeile.
+ *
+ * Ein gewöhnliches Formular, das die Anfrage an `/suche` übergibt — kein
+ * Skript, kein Zustand, keine Bytes im Bündel. Die eigentliche Suche mit
+ * Filtern, Facetten und Abbruch laufender Anfragen sitzt auf der Suchseite,
+ * hier steht nur das Eingangstor.
+ *
+ * Strg+K bleibt daneben bestehen: der Balken ist zum Recherchieren da, die
+ * Palette zum Springen.
+ */
+export function SearchBar({ defaultValue }: { defaultValue?: string }) {
+  return (
+    <form action="/suche" method="get" role="search" className="relative">
+      <label htmlFor="kopfsuche" className="sr-only">
+        {searchBarText.label}
+      </label>
+      <span aria-hidden className="absolute top-1/2 left-3 -translate-y-1/2 text-text-dim">
+        <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor">
+          <circle cx="7" cy="7" r="4.5" strokeWidth="1.5" />
+          <path d="M10.5 10.5 14 14" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      </span>
+      <input
+        id="kopfsuche"
+        type="search"
+        name="q"
+        defaultValue={defaultValue}
+        placeholder={searchBarText.placeholder}
+        className="field field-pill w-56 py-1 pl-8 text-xs"
+      />
+    </form>
+  )
+}
@@ -0,0 +1,45 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+/**
+ * Eine Reiterleiste.
+ *
+ * Sie hebt hervor, wo man gerade ist. Vorher taten das weder die Reiter der
+ * Fallakte noch die der Verwaltung — fünf gleich aussehende Links, und man
+ * musste an der Seite selbst ablesen, welcher davon offen war.
+ *
+ * Der Vergleich läuft über den Pfad, nicht über die vollständige Adresse:
+ * Suchparameter gehören zur Ansicht, nicht zum Reiter.
+ */
+export function Tabs({ tabs }: { tabs: { href: string; label: string }[] }) {
+  const pfad = usePathname()
+
+  return (
+    <nav className="mt-8 flex flex-wrap gap-2 border-b border-line pb-3">
+      {tabs.map((reiter) => {
+        // Der längste passende Eintrag gewinnt, damit „/admin" nicht jeden
+        // Unterbereich für sich beansprucht.
+        const passt = pfad === reiter.href || pfad.startsWith(reiter.href + '/')
+        const laenger = tabs.some(
+          (anderer) =>
+            anderer.href.length > reiter.href.length &&
+            (pfad === anderer.href || pfad.startsWith(anderer.href + '/')),
+        )
+        const aktiv = passt && !laenger
+
+        return (
+          <Link
+            key={reiter.href}
+            href={reiter.href}
+            aria-current={aktiv ? 'page' : undefined}
+            className="btn btn-sm"
+          >
+            {reiter.label}
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}
@@ -49,7 +49,7 @@ export function ThemeToggle() {
      value={thema}
      onChange={(event) => waehlen(event.target.value as Thema)}
      aria-label={themeText.label}
-      className="border border-line bg-raised px-2 py-0.5 text-2xs"
+      className="field text-2xs"
    >
      <option value="system">{themeText.system}</option>
      <option value="dark">{themeText.dark}</option>
@@ -75,6 +75,5 @@ function routenMuster(pfad: string): string {
    .replace(/\/faelle\/[^/]+/, '/faelle/[caseNumber]')
    .replace(/\/dokumente\/[^/]+/, '/dokumente/[documentNumber]')
    .replace(/\/personalakten\/[^/]+/, '/personalakten/[id]')
-    .replace(/\/kanaele\/[^/]+/, '/kanaele/[key]')
    .slice(0, 120)
 }
@@ -19,12 +19,12 @@ import type { ChatMessageView } from '@/lib/chat/view'

 export type ChatScopeView =
  | { kind: 'case'; caseNumber: string; caseId: string }
-  | { kind: 'channel'; key: string; channelId: string }
+  | { kind: 'personnel'; fileId: string }

 type Reaktion = { messageId: string; userId: string; key: string }

 /**
- * Aktenchat und Kanalchat.
+ * Der Chat einer Akte — Fallakte oder Personalakte.
 *
 * Optisch klar vom Verlauf abgesetzt, weil er inhaltlich etwas anderes ist:
 * formlos, kein Aktenbestandteil. Die Zeitachse des Verlaufs hat eine
@@ -104,7 +104,7 @@ export function Chat({
  // Beim Verlassen der Seite die Lesemarke setzen, nicht beim Öffnen: sonst
  // wäre die Trennlinie beim Neuladen sofort weg.
  useEffect(() => {
-    const scopeId = scope.kind === 'case' ? scope.caseId : scope.channelId
+    const scopeId = scope.kind === 'case' ? scope.caseId : scope.fileId
    return () => {
      void markReadAction({ scopeType: scope.kind, scopeId })
    }
@@ -136,7 +136,10 @@ export function Chat({
    startTransition(async () => {
      const ergebnis = await sendMessageAction({
        id,
-        scope: scope.kind === 'case' ? { kind: 'case', caseNumber: scope.caseNumber } : { kind: 'channel', key: scope.key },
+        scope:
+          scope.kind === 'case'
+            ? { kind: 'case', caseNumber: scope.caseNumber }
+            : { kind: 'personnel', fileId: scope.fileId },
        body: inhalt,
        replyToId: optimistisch.replyToId,
      })
@@ -207,7 +210,7 @@ export function Chat({
                    value={entwurf}
                    onChange={(event) => setEntwurf(event.target.value)}
                    rows={2}
-                    className="block w-full border border-line bg-raised px-3 py-2 text-sm"
+                    className="block w-full field"
                  />
                  <div className="mt-1 flex gap-3">
                    <button
@@ -223,14 +226,14 @@ export function Chat({
                          else setFehler(ergebnis.error)
                        })
                      }
-                      className="font-condensed text-2xs text-accent"
+                      className="btn btn-sm btn-primary"
                    >
                      {chatText.editSave}
                    </button>
                    <button
                      type="button"
                      onClick={() => setBearbeitet(null)}
-                      className="font-condensed text-2xs text-text-dim"
+                      className="btn btn-sm"
                    >
                      {commonText.cancel}
                    </button>
@@ -273,9 +276,8 @@ export function Chat({
                          await toggleReactionAction({ id: nachricht.id, key })
                        })
                      }
-                      className={`border px-1.5 py-0.5 font-mono ${
-                        eigene ? 'border-accent text-accent' : 'border-line text-text-dim'
-                      }`}
+                      aria-pressed={eigene}
+                      className="btn btn-sm font-mono"
                    >
                      {chatText.reactionSymbols[key]}
                      {anzahl > 0 ? ` ${anzahl}` : ''}
@@ -287,7 +289,7 @@ export function Chat({
                  <button
                    type="button"
                    onClick={() => setAntwortAuf(nachricht.id)}
-                    className="font-condensed text-text-dim"
+                    className="btn btn-sm"
                  >
                    {chatText.reply}
                  </button>
@@ -305,7 +307,7 @@ export function Chat({
                        if (!ergebnis.ok) setFehler(ergebnis.error)
                      })
                    }
-                    className="font-condensed text-accent"
+                    className="btn btn-sm btn-primary"
                  >
                    {chatText.adopt}
                  </button>
@@ -319,7 +321,7 @@ export function Chat({
                        setBearbeitet(nachricht.id)
                        setEntwurf(nachricht.body)
                      }}
-                      className="font-condensed text-text-dim"
+                      className="btn btn-sm"
                    >
                      {chatText.edit}
                    </button>
@@ -331,7 +333,7 @@ export function Chat({
                          await withdrawMessageAction({ id: nachricht.id })
                        })
                      }
-                      className="font-condensed text-text-dim"
+                      className="btn btn-sm"
                    >
                      {chatText.withdraw}
                    </button>
@@ -351,7 +353,7 @@ export function Chat({
            <button
              type="button"
              onClick={() => setAntwortAuf(null)}
-              className="font-condensed"
+              className="btn btn-sm"
            >
              {chatText.cancelReply}
            </button>
@@ -371,7 +373,7 @@ export function Chat({
          rows={2}
          placeholder={chatText.placeholder}
          aria-label={chatText.placeholder}
-          className="block w-full border border-line bg-raised px-3 py-2 text-sm"
+          className="block w-full field"
        />

        <div className="mt-2 flex items-center gap-3">
@@ -379,7 +381,7 @@ export function Chat({
            type="button"
            onClick={senden}
            disabled={text.trim() === ''}
-            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"
          >
            {chatText.send}
          </button>
@@ -38,7 +38,7 @@ export function NewDocument({
      <button
        type="button"
        onClick={() => setOpen(true)}
-        className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
+        className="btn btn-sm btn-primary"
      >
        {documentText.create}
      </button>
@@ -63,7 +63,7 @@ export function NewDocument({
            id="templateKey"
            name="templateKey"
            required
-            className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
+            className="mt-1 block w-full field"
          >
            {templates.map((template) => (
              <option key={template.key} value={template.key}>
@@ -81,7 +81,7 @@ export function NewDocument({
            id="classification"
            name="classification"
            defaultValue={defaultLevel}
-            className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
+            className="mt-1 block w-full field"
          >
            {levels.map((level) => (
              <option key={level.level} value={level.level}>
@@ -99,7 +99,7 @@ export function NewDocument({
            id="doc-title"
            name="title"
            maxLength={200}
-            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>
      </div>
@@ -114,14 +114,14 @@ export function NewDocument({
        <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 : documentText.create}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
-          className="font-condensed text-2xs text-text-dim"
+          className="btn btn-sm"
        >
          {commonText.cancel}
        </button>
@@ -27,8 +27,8 @@ export function SheetSwitch({
        <button
          type="button"
          onClick={() => setModus('blatt')}
-          aria-current={modus === 'blatt'}
-          className={modus === 'blatt' ? 'text-accent' : 'text-text-dim'}
+          aria-pressed={modus === 'blatt'}
+          className="btn btn-sm"
        >
          {documentText.sheet}
        </button>
@@ -36,8 +36,8 @@ export function SheetSwitch({
          <button
            type="button"
            onClick={() => setModus('bearbeiten')}
-            aria-current={modus === 'bearbeiten'}
-            className={modus === 'bearbeiten' ? 'text-accent' : 'text-text-dim'}
+            aria-pressed={modus === 'bearbeiten'}
+            className="btn btn-sm"
          >
            {documentText.edit}
          </button>
@@ -50,7 +50,7 @@ export function SheetSwitch({
            // Wasserzeichen und Protokolleintrag kommt in Phase 8.
            requestAnimationFrame(() => window.print())
          }}
-          className="ml-auto text-text-dim"
+          className="ml-auto btn btn-sm"
        >
          {documentText.print}
        </button>
@@ -58,7 +58,7 @@ export function ExportPanel({
        <button
          type="submit"
          disabled={pending || Boolean(state?.jobId)}
-          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 ? exportText.preparing : exportText.asPdf}
        </button>
@@ -192,7 +192,7 @@ export function Attachments({
                        await releaseAttachmentAction({ id: datei.id })
                      })
                    }
-                    className="font-condensed text-2xs text-stamp-3"
+                    className="btn btn-sm text-stamp-3"
                  >
                    {attachmentText.release}
                  </button>
@@ -241,7 +241,7 @@ export function Attachments({
          <button
            type="button"
            onClick={() => eingabe.current?.click()}
-            className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
+            className="btn btn-sm btn-primary"
          >
            {attachmentText.add}
          </button>
@@ -155,7 +155,7 @@ export function PhotoField({
              type="button"
              disabled={fortschritt !== null}
              onClick={() => eingabe.current?.click()}
-              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"
            >
              {fortschritt === null
                ? attachmentText.choose
@@ -113,7 +113,7 @@ export function SectionEditor(props: Props) {
        <select
          value={value}
          onChange={(event) => change(event.target.value)}
-          className="border border-line bg-raised px-3 py-2 text-sm"
+          className="field"
        >
          <option value="">—</option>
          {props.options?.map((option) => (
@@ -127,14 +127,14 @@ export function SectionEditor(props: Props) {
          value={value}
          onChange={(event) => change(event.target.value)}
          rows={6}
-          className="block w-full max-w-(--container-measure) border border-line bg-raised px-3 py-2 text-sm"
+          className="block w-full max-w-(--container-measure) field"
        />
      ) : (
        <input
          type={props.type === 'date' ? 'date' : props.type === 'number' ? 'number' : 'text'}
          value={value}
          onChange={(event) => change(event.target.value)}
-          className="block w-full max-w-(--container-measure) border border-line bg-raised px-3 py-2 text-sm"
+          className="block w-full max-w-(--container-measure) field"
        />
      )}

@@ -143,7 +143,7 @@ export function SectionEditor(props: Props) {
          type="button"
          onClick={() => submit()}
          disabled={pending}
-          className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
+          className="btn btn-primary"
        >
          {pending ? sectionText.saving : sectionText.save}
        </button>
@@ -169,7 +169,7 @@ export function SectionEditor(props: Props) {
              <button
                type="button"
                onClick={() => submit(parse(value, props.type), conflict.version)}
-                className="mt-2 font-condensed text-2xs text-accent"
+                className="mt-2 btn btn-sm btn-primary"
              >
                {sectionText.takeMine}
              </button>
@@ -186,7 +186,7 @@ export function SectionEditor(props: Props) {
                  setVersion(conflict.version)
                  setConflict(null)
                }}
-                className="mt-2 font-condensed text-2xs text-accent"
+                className="mt-2 btn btn-sm btn-primary"
              >
                {sectionText.takeTheirs}
              </button>