Phase 6 abgeschlossen: Aktenchat, Kanäle, Echtzeit, Benachrichtigungen

Ein Ereignisstrom mit Themen (/api/stream), in dem der Dateistrom aus Phase 5
aufgegangen ist. Zwei Prüfungen: beim Verbinden, welche Themen der Nutzer
abonnieren darf, und je Ereignis wird der Inhalt mit seinen Rechten geladen.
Das zweite ist nicht nur Vorsicht — eine Umklassifizierung wirkt dadurch in
einer offenen Verbindung sofort. In der pg_notify-Nutzlast steht nie ein
Inhalt, nur Thema, Art und Kennung.

Der Aktenchat sendet optimistisch mit clientseitiger UUIDv7, die zugleich
Idempotenzschlüssel ist. Antworten, vier feste Reaktionen, Bearbeiten mit
sichtbarem editedAt, Zurückziehen mit Platzhalter — Löschen gibt es nicht, und
eine Regel in der Datenbank hält das fest. Eine zurückgezogene Nachricht kommt
ohne Text an, nicht ausgeblendet.

Aktenzeichen im Text werden zu Vorschaukarten, serverseitig aufgelöst. Eine
Akte, die der Leser nicht sehen darf, sieht darin genauso aus wie eine, die es
gar nicht gibt.

"Als Vermerk übernehmen" steht sichtbar an jeder Nachricht. Der Vermerk gehört
dem Verfasser, nicht dem Übernehmenden; ein Systemeintrag nennt den Ursprung,
damit der Wortlaut später nicht für die Akte geschrieben wirkt.

Bei den Discord-Benachrichtigungen entscheidet die Web-App, wer was erfährt,
und der Worker liefert nur aus. Die Alternative hätte geheissen, die
Sichtbarkeitsprüfung im Worker ein zweites Mal zu bauen. In meta steht ein
Titel nur, wenn er hinaus darf — ab Stufe 3 keiner. Postausgang als Tabelle,
angestossen über LISTEN, mit Takt als Sicherheitsnetz.

Nebenbei riss das Budget der Fallakte erneut (122 kB). Drei Schritte zurück
auf 119,6: Chattexte in eine eigene i18n-Datei, ein gemeinsames AddPanel statt
viermal derselbe Aufklapp-Code, und eine eigene UUIDv7 statt des Pakets — die
Sortierbarkeit, auf der die Nachlieferung beruht, steht damit im eigenen Code
und hat Tests.

Unterwegs habe ich NotifyMode und User.notifyMode ein zweites Mal angelegt,
obwohl es beides seit dem Grundgerüst gibt. Die Migration schlug fehl und die
Datenbank musste von Hand aufgeräumt werden; die Lehre steht in docs/13.

155 Tests im Web-Paket, 15 in der Datenbank, 7 im Worker, 32 e2e.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/(app)/faelle/[caseNumber]/CaseLinks.tsx

@@ -3,10 +3,10 @@
 import { useState, useTransition } from 'react'
 import Link from 'next/link'
 import { linkText } from '@/lib/i18n/cases'
-import { commonText } from '@/lib/i18n/common'
 import { LINK_KINDS } from '@/lib/cases/terms'
-import { linkCasesAction, unlinkCasesAction } from '../actions'
+import { AddPanel, PanelSelect } from '@/components/AddPanel'
 import { classificationEdgeStyle } from '@/components/StampMark'
+import { linkCasesAction, unlinkCasesAction } from '../actions'
 
 type Verknuepfung = {
   kind: string
@@ -29,10 +29,9 @@ export function CaseLinks({
   links: Verknuepfung[]
   canEdit: boolean
 }) {
-  const [open, setOpen] = useState(false)
   const [target, setTarget] = useState('')
   const [kind, setKind] = useState<string>('RELATED')
-  const [error, setError] = useState<string | null>(null)
+  const [fehler, setFehler] = useState<string | null>(null)
   const [pending, startTransition] = useTransition()
 
   return (
@@ -65,12 +64,12 @@ export function CaseLinks({
                   disabled={pending}
                   onClick={() =>
                     startTransition(async () => {
-                      const result = await unlinkCasesAction({
+                      const ergebnis = await unlinkCasesAction({
                         fromCaseNumber: caseNumber,
                         toCaseNumber: link.other.caseNumber,
                         kind: link.kind,
                       })
-                      if (!result.ok) setError(result.error)
+                      if (!ergebnis.ok) setFehler(ergebnis.error)
                     })
                   }
                   className="font-condensed text-2xs text-text-dim"
@@ -83,70 +82,37 @@ export function CaseLinks({
         </ul>
       )}
 
-      {error ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{error}</p> : null}
+      {fehler ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{fehler}</p> : null}
 
       {canEdit ? (
-        open ? (
-          <div className="mt-4 flex flex-wrap items-center gap-2">
-            <select
-              value={kind}
-              onChange={(event) => setKind(event.target.value)}
-              aria-label={linkText.kind}
-              className="border border-line bg-raised px-2 py-1 text-2xs"
-            >
-              {LINK_KINDS.map((value) => (
-                <option key={value} value={value}>
-                  {linkText.kinds[value] ?? value}
-                </option>
-              ))}
-            </select>
-            <input
-              value={target}
-              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"
-            />
-            <button
-              type="button"
-              disabled={pending || target.trim() === ''}
-              onClick={() =>
-                startTransition(async () => {
-                  setError(null)
-                  const result = await linkCasesAction({
-                    fromCaseNumber: caseNumber,
-                    toCaseNumber: target.trim(),
-                    kind,
-                  })
-                  if (result.ok) {
-                    setTarget('')
-                    setOpen(false)
-                  } else {
-                    setError(result.error)
-                  }
-                })
-              }
-              className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
-            >
-              {linkText.add}
-            </button>
-            <button
-              type="button"
-              onClick={() => setOpen(false)}
-              className="font-condensed text-2xs text-text-dim"
-            >
-              {commonText.cancel}
-            </button>
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setOpen(true)}
-            className="mt-4 border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
-          >
-            {linkText.add}
-          </button>
-        )
+        <AddPanel
+          label={linkText.add}
+          disabled={target.trim() === ''}
+          onSubmit={async () => {
+            const ergebnis = await linkCasesAction({
+              fromCaseNumber: caseNumber,
+              toCaseNumber: target.trim(),
+              kind,
+            })
+            if (ergebnis.ok) setTarget('')
+            return ergebnis
+          }}
+        >
+          <PanelSelect value={kind} onChange={setKind} label={linkText.kind}>
+            {LINK_KINDS.map((value) => (
+              <option key={value} value={value}>
+                {linkText.kinds[value] ?? value}
+              </option>
+            ))}
+          </PanelSelect>
+          <input
+            value={target}
+            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"
+          />
+        </AddPanel>
       ) : null}
     </div>
   )

web/app/(app)/faelle/[caseNumber]/EntryComposer.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useOptimistic, useRef, useState, useTransition } from 'react'
-import { uuidv7 } from 'uuidv7'
+import { uuidv7 } from '@/lib/uuidv7'
 import { caseText, entryText } from '@/lib/i18n/cases'
 import { addEntryAction } from '../actions'
 

web/app/(app)/faelle/[caseNumber]/Participants.tsx

@@ -2,9 +2,10 @@
 
 import { useState, useTransition } from 'react'
 import Link from 'next/link'
-import { participantText } from '@/lib/i18n/cases'
 import { commonText } from '@/lib/i18n/common'
+import { participantText } from '@/lib/i18n/cases'
 import { PARTICIPANT_ROLES } from '@/lib/cases/terms'
+import { AddPanel, PanelSelect } from '@/components/AddPanel'
 import { addParticipantAction, removeParticipantAction } from '../actions'
 
 type Beteiligter = {
@@ -35,31 +36,11 @@ export function Participants({
   members: { id: string; displayName: string }[]
   files: { id: string; displayName: string }[]
 }) {
-  const [open, setOpen] = useState(false)
   const [role, setRole] = useState<string>('INVESTIGATOR')
   const [target, setTarget] = useState('')
-  const [error, setError] = useState<string | null>(null)
+  const [fehler, setFehler] = useState<string | null>(null)
   const [pending, startTransition] = useTransition()
 
-  function add() {
-    if (!target) return
-    setError(null)
-    const [art, id] = target.split(':')
-    startTransition(async () => {
-      const result = await addParticipantAction({
-        caseNumber,
-        role,
-        ...(art === 'user' ? { userId: id } : { personnelFileId: id }),
-      })
-      if (result.ok) {
-        setTarget('')
-        setOpen(false)
-      } else {
-        setError(result.error)
-      }
-    })
-  }
-
   return (
     <div>
       {participants.length === 0 ? (
@@ -89,11 +70,11 @@ export function Participants({
                   disabled={pending}
                   onClick={() =>
                     startTransition(async () => {
-                      const result = await removeParticipantAction({
+                      const ergebnis = await removeParticipantAction({
                         caseNumber,
                         participantId: person.id,
                       })
-                      if (!result.ok) setError(result.error)
+                      if (!ergebnis.ok) setFehler(ergebnis.error)
                     })
                   }
                   className="font-condensed text-2xs text-text-dim"
@@ -106,75 +87,49 @@ export function Participants({
         </ul>
       )}
 
-      {error ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{error}</p> : null}
+      {fehler ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{fehler}</p> : null}
 
       {canEdit ? (
-        open ? (
-          <div className="mt-4 border border-line p-3">
-            <p className="max-w-(--container-measure) text-2xs text-text-dim">
-              {participantText.hint}
-            </p>
-            <div className="mt-3 flex flex-wrap items-center gap-2">
-              <select
-                value={role}
-                onChange={(event) => setRole(event.target.value)}
-                aria-label={participantText.role}
-                className="border border-line bg-raised px-2 py-1 text-2xs"
-              >
-                {PARTICIPANT_ROLES.map((value) => (
-                  <option key={value} value={value}>
-                    {participantText.roles[value] ?? value}
-                  </option>
-                ))}
-              </select>
-              <select
-                value={target}
-                onChange={(event) => setTarget(event.target.value)}
-                aria-label={participantText.person}
-                className="border border-line bg-raised px-2 py-1 text-2xs"
-              >
-                <option value="">—</option>
-                <optgroup label={participantText.pickUser}>
-                  {members.map((member) => (
-                    <option key={member.id} value={`user:${member.id}`}>
-                      {member.displayName}
-                    </option>
-                  ))}
-                </optgroup>
-                <optgroup label={participantText.pickPersonnel}>
-                  {files.map((file) => (
-                    <option key={file.id} value={`file:${file.id}`}>
-                      {file.displayName}
-                    </option>
-                  ))}
-                </optgroup>
-              </select>
-              <button
-                type="button"
-                disabled={pending || !target}
-                onClick={add}
-                className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
-              >
-                {participantText.add}
-              </button>
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                className="font-condensed text-2xs text-text-dim"
-              >
-                {commonText.cancel}
-              </button>
-            </div>
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setOpen(true)}
-            className="mt-4 border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
-          >
-            {participantText.add}
-          </button>
-        )
+        <AddPanel
+          label={participantText.add}
+          hint={participantText.hint}
+          disabled={!target}
+          onSubmit={async () => {
+            const [art, id] = target.split(':')
+            const ergebnis = await addParticipantAction({
+              caseNumber,
+              role,
+              ...(art === 'user' ? { userId: id } : { personnelFileId: id }),
+            })
+            if (ergebnis.ok) setTarget('')
+            return ergebnis
+          }}
+        >
+          <PanelSelect value={role} onChange={setRole} label={participantText.role}>
+            {PARTICIPANT_ROLES.map((value) => (
+              <option key={value} value={value}>
+                {participantText.roles[value] ?? value}
+              </option>
+            ))}
+          </PanelSelect>
+          <PanelSelect value={target} onChange={setTarget} label={participantText.person}>
+            <option value="">—</option>
+            <optgroup label={participantText.pickUser}>
+              {members.map((member) => (
+                <option key={member.id} value={`user:${member.id}`}>
+                  {member.displayName}
+                </option>
+              ))}
+            </optgroup>
+            <optgroup label={participantText.pickPersonnel}>
+              {files.map((file) => (
+                <option key={file.id} value={`file:${file.id}`}>
+                  {file.displayName}
+                </option>
+              ))}
+            </optgroup>
+          </PanelSelect>
+        </AddPanel>
       ) : null}
     </div>
   )

web/app/(app)/faelle/[caseNumber]/page.tsx

@@ -25,6 +25,8 @@ import { visiblePersonnelWhere } from '@/lib/access/personnelFilter'
 import { DocumentList } from '@/components/documents/DocumentList'
 import { NewDocument } from '@/components/documents/NewDocument'
 import { Attachments } from '@/components/files/Attachments'
+import { ChatLazy } from '@/components/chat/ChatLazy'
+import { loadChatView } from '@/lib/chat/load'
 import { listAttachments } from '@/lib/files/service'
 import { toAttachmentViews } from '@/lib/files/view'
 import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
@@ -214,6 +216,7 @@ async function Relations({
         <div className="mt-4">
           <Attachments
             target={{ caseNumber: akte.caseNumber }}
+            topic={`case:${akte.id}`}
             initial={toAttachmentViews(anhaenge)}
             canUpload={canEdit}
             canRelease={permissions.isAdmin}
@@ -239,6 +242,36 @@ async function Relations({
   )
 }
 
+/**
+ * Der Aktenchat. Eigene Suspense-Grenze, weil er die meisten Abfragen macht
+ * und der Rest der Seite nicht auf ihn warten soll.
+ */
+async function ChatBlock({
+  akte,
+  user,
+}: {
+  akte: { id: string; caseNumber: string; status: string; classification: number }
+  user: { id: string; permissions: EffectivePermissions }
+}) {
+  const ansicht = await loadChatView(user.permissions, {
+    kind: 'case',
+    caseNumber: akte.caseNumber,
+  })
+
+  return (
+    <ChatLazy
+      scope={{ kind: 'case', caseNumber: akte.caseNumber, caseId: akte.id }}
+      topic={`case:${akte.id}`}
+      initial={ansicht.messages}
+      initialReactions={ansicht.reactions}
+      currentUserId={user.id}
+      lastReadAt={ansicht.lastReadAt}
+      canAdopt={canEditCase(user.permissions, akte, 'entry.create').ok}
+      mentionNames={ansicht.mentionNames}
+    />
+  )
+}
+
 async function SectionBlock({
   caseId,
   caseNumber,
@@ -373,6 +406,20 @@ export default async function CasePage({
         </Suspense>
       </div>
 
+      <section className="mt-12">
+        <Suspense
+          fallback={
+            <div className="space-y-3 border border-line p-4">
+              <SkeletonLine width="8rem" />
+              <SkeletonLine width="70%" />
+              <SkeletonLine width="55%" />
+            </div>
+          }
+        >
+          <ChatBlock akte={akte} user={user} />
+        </Suspense>
+      </section>
+
       <nav className="mt-12 flex gap-4 border-b border-line pb-2 font-condensed text-xs">
         <span className="text-text-dim">{de.case.timeline}</span>
         <Link href={`/faelle/${akte.caseNumber}/aenderungen`}>{de.case.changes}</Link>