Fallakte in Reiter geteilt

Akte, Beteiligte, Dokumente, Änderungen, Export - als eigene Seiten unter einem gemeinsamen Layout, nicht als umgeschaltete Blöcke. Ein Reiter, der im Client nur ein- und ausgeblendet wird, kostet dasselbe wie vorher; nur eigene Seiten trennen den Code wirklich. Der Schnitt folgt der Fachlichkeit: die drei Ebenen aus docs/05 - Kopfdaten, Abschnitte, Verlauf - bleiben zusammen, samt Aktenchat. Das Umfeld der Akte braucht man selten gleichzeitig mit dem Sachstand. Kopf, Stempel und die Knöpfe für Status und Umklassifizierung stehen im Layout und damit auf jedem Reiter. Grösste Route 116,2 statt 119,8 von 120 kB, die neuen Reiter bei 110,7 und 110,9. Damit ist wieder Luft für Phase 9. 48 e2e-Tests, 178 im Web-Paket unverändert grün.
2026-09-03 10:15:14 +02:00
parent f1106a57d6
commit d2a7910861
8 changed files with 318 additions and 227 deletions
@@ -1,5 +1,4 @@
 import type { Metadata } from 'next'
-import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { db } from '@/lib/db'
 import { requireUser } from '@/lib/auth/current'
@@ -41,11 +40,10 @@ export default async function ChangesPage({
  )

  return (
-    <main className="mx-auto max-w-5xl px-6 py-10">
-      <p className="font-mono text-xs text-text-dim">
-        <Link href={`/faelle/${akte.caseNumber}`}>{akte.caseNumber}</Link>
-      </p>
-      <h1 className="mt-2 font-condensed">{de.entry.changesHeading}</h1>
+    <>
+      {/* Aktenzeichen und Titel stehen im Layout, hier nur noch die Überschrift
+          des Reiters. */}
+      <h2 className="font-condensed">{de.entry.changesHeading}</h2>
      <p className="mt-2 max-w-(--container-measure) text-text-dim">{de.entry.changesIntro}</p>

      {versionen.length === 0 ? (
@@ -94,6 +92,6 @@ export default async function ChangesPage({
          ))}
        </ol>
      )}
-    </main>
+    </>
  )
 }
@@ -0,0 +1,84 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { visiblePersonnelWhere } from '@/lib/access/personnelFilter'
+import { canEditCase } from '@/lib/access/caseWrite'
+import { loadVisibleCase } from '@/lib/cases/service'
+import { listParticipants } from '@/lib/cases/participants'
+import { listLinks } from '@/lib/cases/links'
+import { de } from '@/lib/i18n/de'
+import { Participants } from '../Participants'
+import { CaseLinks } from '../CaseLinks'
+
+export const metadata: Metadata = { title: de.case.tabRelations }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Wer und was an dieser Akte hängt.
+ *
+ * Eigener Reiter, weil beides selten zugleich mit dem Sachstand gebraucht wird
+ * und die Fallakte sonst das Bündelbudget reisst. Siehe das Layout daneben.
+ */
+export default async function CaseRelationsPage({
+  params,
+}: {
+  params: Promise<{ caseNumber: string }>
+}) {
+  const user = await requireUser()
+  const { caseNumber } = await params
+
+  const akte = await loadVisibleCase(user.permissions, caseNumber)
+  if (!akte) notFound()
+
+  const canEdit = canEditCase(user.permissions, akte).ok
+  const darfPersonal =
+    user.permissions.isAdmin || user.permissions.permissions.has('personnel.read')
+
+  const [participants, links, members, files] = await Promise.all([
+    listParticipants(user.permissions, akte.id),
+    listLinks(user.permissions, akte.id),
+    canEdit
+      ? db.user.findMany({
+          where: { isActive: true },
+          orderBy: { displayName: 'asc' },
+          take: 200,
+          select: { id: true, displayName: true },
+        })
+      : Promise.resolve([]),
+    // Nur Personalakten, die der Eintragende sehen darf, und nur mit dem Recht
+    // dazu: sonst verriete die Auswahlliste ihre Existenz.
+    canEdit && darfPersonal
+      ? db.personnelFile.findMany({
+          where: visiblePersonnelWhere(user.permissions),
+          orderBy: { displayName: 'asc' },
+          take: 200,
+          select: { id: true, displayName: true },
+        })
+      : Promise.resolve([]),
+  ])
+
+  return (
+    <div className="grid gap-10 md:grid-cols-2">
+      <section>
+        <h2 className="font-condensed">{de.participant.heading}</h2>
+        <div className="mt-4">
+          <Participants
+            caseNumber={akte.caseNumber}
+            participants={participants}
+            canEdit={canEdit}
+            members={members}
+            files={files}
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="font-condensed">{de.link.heading}</h2>
+        <div className="mt-4">
+          <CaseLinks caseNumber={akte.caseNumber} links={links} canEdit={canEdit} />
+        </div>
+      </section>
+    </div>
+  )
+}
@@ -0,0 +1,75 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { canEditCase } from '@/lib/access/caseWrite'
+import { loadVisibleCase } from '@/lib/cases/service'
+import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
+import { listAttachments } from '@/lib/files/service'
+import { toAttachmentViews } from '@/lib/files/view'
+import { de } from '@/lib/i18n/de'
+import { DocumentList } from '@/components/documents/DocumentList'
+import { NewDocument } from '@/components/documents/NewDocument'
+import { Attachments } from '@/components/files/Attachments'
+
+export const metadata: Metadata = { title: de.document.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Was der Akte beiliegt: erzeugte Dokumente und hochgeladene Dateien.
+ */
+export default async function CaseDocumentsPage({
+  params,
+}: {
+  params: Promise<{ caseNumber: string }>
+}) {
+  const user = await requireUser()
+  const { caseNumber } = await params
+
+  const akte = await loadVisibleCase(user.permissions, caseNumber)
+  if (!akte) notFound()
+
+  const canEdit = canEditCase(user.permissions, akte).ok
+
+  const [documents, anhaenge, templates, levels] = await Promise.all([
+    listDocuments(user.permissions, { caseId: akte.id }),
+    listAttachments(user.permissions, { caseId: akte.id }),
+    canEdit ? listTemplatesFor('CASE_DOCUMENT') : Promise.resolve([]),
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+  ])
+
+  return (
+    <div className="space-y-10">
+      <section>
+        <h2 className="font-condensed">{de.document.heading}</h2>
+        <div className="mt-4 space-y-4">
+          <DocumentList
+            documents={documents}
+            levelName={new Map(levels.map((l) => [l.level, l.name]))}
+          />
+          {canEdit ? (
+            <NewDocument
+              templates={templates}
+              levels={levels.filter((l) => l.level <= user.permissions.clearanceLevel)}
+              defaultLevel={Math.min(akte.classification, user.permissions.clearanceLevel)}
+              caseNumber={akte.caseNumber}
+            />
+          ) : null}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="font-condensed">{de.attachment.heading}</h2>
+        <div className="mt-4">
+          <Attachments
+            target={{ caseNumber: akte.caseNumber }}
+            topic={`case:${akte.id}`}
+            initial={toAttachmentViews(anhaenge)}
+            canUpload={canEdit}
+            canRelease={user.permissions.isAdmin}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}
@@ -29,10 +29,8 @@ export default async function CaseExportPage({
  if (!akte) notFound()

  return (
-    <main className="mx-auto max-w-(--container-measure) px-6 py-10">
-      <p className="font-mono text-xs text-text-dim">{akte.caseNumber}</p>
-      <h1 className="mt-1 font-condensed">{de.export.heading}</h1>
-
+    <div className="max-w-(--container-measure)">
+      <h2 className="font-condensed">{de.export.heading}</h2>
      <p className="mt-3 text-sm text-text-dim">{de.export.coverNote}</p>

      <div className="mt-6">
@@ -46,10 +44,9 @@ export default async function CaseExportPage({
        <p className="mt-4 text-2xs text-stamp-3">{de.export.waitingApprovalHint}</p>
      ) : null}

-      <nav className="mt-8 flex gap-4 font-condensed text-xs">
-        <Link href={`/faelle/${akte.caseNumber}`}>{akte.caseNumber}</Link>
+      <p className="mt-8 font-condensed text-xs">
        <Link href={`/faelle/${akte.caseNumber}/druck`}>{de.export.print}</Link>
-      </nav>
-    </main>
+      </p>
+    </div>
  )
 }
@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { loadVisibleCase } from '@/lib/cases/service'
+import { de } from '@/lib/i18n/de'
+import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
+import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
+import { CaseActions } from './CaseActions'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * Kopf und Reiter einer Fallakte.
+ *
+ * Die Akte ist in Reiter geteilt, und zwar in **eigene Seiten**, nicht in
+ * umgeschaltete Blöcke: nur so wird der Code getrennt geladen. Die Fallakte
+ * war die dichteste Seite der Anwendung und hatte das Bündelbudget aus
+ * docs/09-performance-und-ux.md aufgebraucht — Beteiligte, Verknüpfungen,
+ * Dokumente und Anhänge lagen mit auf der Seite, obwohl man sie selten
+ * gleichzeitig braucht.
+ *
+ * Fachlich passt der Schnitt ohnehin: die drei Ebenen aus
+ * docs/05-akten-und-vorlagen.md — Kopfdaten, Abschnitte, Verlauf — bleiben
+ * zusammen, das Umfeld der Akte bekommt seinen eigenen Platz.
+ */
+export default async function CaseLayout({
+  children,
+  params,
+}: {
+  children: ReactNode
+  params: Promise<{ caseNumber: string }>
+}) {
+  const user = await requireUser()
+  const { caseNumber } = await params
+
+  const akte = await loadVisibleCase(user.permissions, caseNumber)
+  // Kein Zugriff heisst 404, nicht 403: die Existenz ist selbst eine Information.
+  if (!akte) notFound()
+
+  const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
+  const level = levels.find((l) => l.level === akte.classification)
+
+  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 },
+  ]
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <header className="pl-3" style={classificationEdgeStyle(akte.classification)}>
+        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
+          <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
+          <StampMark level={akte.classification} name={level?.name ?? de.common.unknown} />
+        </div>
+        <h1 className="mt-2 font-condensed">{akte.title}</h1>
+        <dl className="mt-3 flex flex-wrap gap-x-8 gap-y-1 text-xs text-text-dim">
+          <div className="flex gap-2">
+            <dt className="font-condensed">{de.case.status}</dt>
+            <dd>{de.case.statusNames[akte.status]}</dd>
+          </div>
+          <div className="flex gap-2">
+            <dt className="font-condensed">{de.case.type}</dt>
+            <dd>{akte.templateKey}</dd>
+          </div>
+          {akte.dueAt ? (
+            <div className="flex gap-2">
+              <dt className="font-condensed">{de.case.dueAt}</dt>
+              <dd>{akte.dueAt.toLocaleDateString('de-DE')}</dd>
+            </div>
+          ) : null}
+        </dl>
+
+        {/* Statuswechsel und Umklassifizierung gehören zum Kopf und stehen
+            deshalb auf jedem Reiter zur Verfügung. */}
+        <CaseActions
+          caseNumber={akte.caseNumber}
+          classification={akte.classification}
+          statusTargets={allowedTargets(akte.status as CaseStatusName)}
+          levels={levels.map((l) => ({ level: l.level, name: l.name }))}
+          maxLevel={user.permissions.clearanceLevel}
+        />
+      </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>
+
+      <div className="mt-8">{children}</div>
+    </main>
+  )
+}
@@ -1,37 +1,23 @@
 import type { Metadata } from 'next'
 import { Suspense } from 'react'
 import { notFound } from 'next/navigation'
+import Link from 'next/link'
 import { db } from '@/lib/db'
 import { requireUser } from '@/lib/auth/current'
 import { visibleEntryWhere } from '@/lib/access/caseFilter'
 import { loadVisibleCase } from '@/lib/cases/service'
 import { recordRead, READ_AUDIT_FROM_LEVEL } from '@/lib/audit'
 import { de } from '@/lib/i18n/de'
-import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
 import { SkeletonLine } from '@/components/Skeleton'
 import { EntryComposer } from './EntryComposer'
 import { Sections } from '@/components/sections/Sections'
 import { saveSectionAction } from './sectionActions'
 import { loadSections } from '@/lib/cases/sectionService'
 import { canEditCase } from '@/lib/access/caseWrite'
-import { CaseActions } from './CaseActions'
 import { EntryActions } from './EntryActions'
-import { Participants } from './Participants'
-import { CaseLinks } from './CaseLinks'
-import { listParticipants } from '@/lib/cases/participants'
-import { listLinks } from '@/lib/cases/links'
-import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
-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'
 import { evaluateEntryEdit, canRetract } from '@/lib/cases/entryPolicy'
-import Link from 'next/link'
 import type { EffectivePermissions } from '@/lib/auth/permissions'

 export const dynamic = 'force-dynamic'
@@ -45,11 +31,6 @@ export async function generateMetadata({
  return { title: caseNumber }
 }

-/**
- * Der Verlauf hängt in einer eigenen Suspense-Grenze und streamt nach. Die
- * Kopfdaten stehen sofort, der Nutzer liest schon, während der Rest lädt.
- * Siehe docs/09-performance-und-ux.md.
- */
 async function Timeline({
  caseId,
  caseNumber,
@@ -146,102 +127,31 @@ async function Timeline({
  )
 }

-/**
- * Beteiligte, Verknüpfungen und Dokumente hängen in einer gemeinsamen
- * Suspense-Grenze: drei kleine Abfragen, die zusammen einen Block ergeben.
- * Getrennt zu streamen liesse den Kasten dreimal springen.
- */
-async function Relations({
-  akte,
+async function SectionBlock({
+  caseId,
+  caseNumber,
+  templateId,
  permissions,
  canEdit,
 }: {
-  akte: { id: string; caseNumber: string; classification: number }
+  caseId: string
+  caseNumber: string
+  templateId: string
  permissions: EffectivePermissions
  canEdit: boolean
 }) {
-  const [participants, links, documents, anhaenge, templates, levels, members, files] =
-    await Promise.all([
-    listParticipants(permissions, akte.id),
-    listLinks(permissions, akte.id),
-    listDocuments(permissions, { caseId: akte.id }),
-    listAttachments(permissions, { caseId: akte.id }),
-    canEdit ? listTemplatesFor('CASE_DOCUMENT') : Promise.resolve([]),
-    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
-    canEdit
-      ? db.user.findMany({
-          orderBy: { displayName: 'asc' },
-          take: 200,
-          select: { id: true, displayName: true },
-        })
-      : Promise.resolve([]),
-    // Nur Personalakten, die der Eintragende sehen darf, und nur, wenn er sie
-    // überhaupt lesen darf: sonst verriete die Auswahlliste ihre Existenz.
-    canEdit && (permissions.isAdmin || permissions.permissions.has('personnel.read'))
-      ? db.personnelFile.findMany({
-          where: visiblePersonnelWhere(permissions),
-          orderBy: { displayName: 'asc' },
-          take: 200,
-          select: { id: true, displayName: true },
-        })
-      : Promise.resolve([]),
-  ])
-
-  const levelName = new Map(levels.map((l) => [l.level, l.name]))
-
+  const sections = await loadSections(permissions, caseId, templateId)
  return (
-    <div className="grid gap-10 md:grid-cols-2">
-      <section>
-        <h2 className="font-condensed">{de.participant.heading}</h2>
-        <div className="mt-4">
-          <Participants
-            caseNumber={akte.caseNumber}
-            participants={participants}
-            canEdit={canEdit}
-            members={members}
-            files={files}
-          />
-        </div>
-      </section>
-
-      <section>
-        <h2 className="font-condensed">{de.link.heading}</h2>
-        <div className="mt-4">
-          <CaseLinks caseNumber={akte.caseNumber} links={links} canEdit={canEdit} />
-        </div>
-      </section>
-
-      <section className="md:col-span-2">
-        <h2 className="font-condensed">{de.attachment.heading}</h2>
-        <div className="mt-4">
-          <Attachments
-            target={{ caseNumber: akte.caseNumber }}
-            topic={`case:${akte.id}`}
-            initial={toAttachmentViews(anhaenge)}
-            canUpload={canEdit}
-            canRelease={permissions.isAdmin}
-          />
-        </div>
-      </section>
-
-      <section className="md:col-span-2">
-        <h2 className="font-condensed">{de.document.heading}</h2>
-        <div className="mt-4 space-y-4">
-          <DocumentList documents={documents} levelName={levelName} />
-          {canEdit ? (
-            <NewDocument
-              templates={templates}
-              levels={levels.filter((l) => l.level <= permissions.clearanceLevel)}
-              defaultLevel={Math.min(akte.classification, permissions.clearanceLevel)}
-              caseNumber={akte.caseNumber}
-            />
-          ) : null}
-        </div>
-      </section>
-    </div>
+    <Sections
+      scope={`fall:${caseNumber}`}
+      save={saveSectionAction.bind(null, caseNumber)}
+      sections={sections}
+      canEdit={canEdit}
+    />
  )
 }

+
 /**
 * Der Aktenchat. Eigene Suspense-Grenze, weil er die meisten Abfragen macht
 * und der Rest der Seite nicht auf ihn warten soll.
@@ -272,30 +182,11 @@ async function ChatBlock({
  )
 }

-async function SectionBlock({
-  caseId,
-  caseNumber,
-  templateId,
-  permissions,
-  canEdit,
-}: {
-  caseId: string
-  caseNumber: string
-  templateId: string
-  permissions: EffectivePermissions
-  canEdit: boolean
-}) {
-  const sections = await loadSections(permissions, caseId, templateId)
-  return (
-    <Sections
-      scope={`fall:${caseNumber}`}
-      save={saveSectionAction.bind(null, caseNumber)}
-      sections={sections}
-      canEdit={canEdit}
-    />
-  )
-}
-
+/**
+ * Der Reiter „Akte": die drei Ebenen aus docs/05-akten-und-vorlagen.md, die
+ * zusammengehören — Abschnitte als Sachstand, Verlauf als Chronologie, dazu
+ * der formlose Aktenchat. Kopfdaten und Reiterleiste stehen im Layout.
+ */
 export default async function CasePage({
  params,
 }: {
@@ -320,46 +211,9 @@ export default async function CasePage({
    })
  }

-  const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
-  const level = levels.find((l) => l.level === akte.classification)
-
  return (
-    <main className="mx-auto max-w-5xl px-6 py-10">
-      <header
-        className="pl-3"
-        style={classificationEdgeStyle(akte.classification)}
-      >
-        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
-          <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
-          <StampMark level={akte.classification} name={level?.name ?? de.common.unknown} />
-        </div>
-        <h1 className="mt-2 font-condensed">{akte.title}</h1>
-        <dl className="mt-3 flex flex-wrap gap-x-8 gap-y-1 text-xs text-text-dim">
-          <div className="flex gap-2">
-            <dt className="font-condensed">{de.case.status}</dt>
-            <dd>{de.case.statusNames[akte.status]}</dd>
-          </div>
-          <div className="flex gap-2">
-            <dt className="font-condensed">{de.case.type}</dt>
-            <dd>{akte.templateKey}</dd>
-          </div>
-          {akte.dueAt ? (
-            <div className="flex gap-2">
-              <dt className="font-condensed">{de.case.dueAt}</dt>
-              <dd>{akte.dueAt.toLocaleDateString('de-DE')}</dd>
-            </div>
-          ) : null}
-        </dl>
-        <CaseActions
-          caseNumber={akte.caseNumber}
-          classification={akte.classification}
-          statusTargets={allowedTargets(akte.status as CaseStatusName)}
-          levels={levels.map((l) => ({ level: l.level, name: l.name }))}
-          maxLevel={user.permissions.clearanceLevel}
-        />
-      </header>
-
-      <section className="mt-10">
+    <>
+      <section>
        <h2 className="font-condensed">{de.section.heading}</h2>
        <div className="mt-4">
          <Suspense
@@ -383,50 +237,14 @@ export default async function CasePage({
        </div>
      </section>

-      <div className="mt-12">
-        <Suspense
-          fallback={
-            <div className="grid gap-10 md:grid-cols-2">
-              <div className="space-y-3">
-                <SkeletonLine width="8rem" />
-                <SkeletonLine width="70%" />
-              </div>
-              <div className="space-y-3">
-                <SkeletonLine width="9rem" />
-                <SkeletonLine width="65%" />
-              </div>
-            </div>
-          }
-        >
-          <Relations
-            akte={akte}
-            permissions={user.permissions}
-            canEdit={canEditCase(user.permissions, akte).ok}
-          />
-        </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>
+        <div className="flex flex-wrap items-baseline justify-between gap-4">
+          <h2 className="font-condensed">{de.case.timeline}</h2>
+          <Link href={`/faelle/${akte.caseNumber}/aenderungen`} className="text-xs">
+            {de.case.changes}
+          </Link>
+        </div>

-      <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>
-        <Link href={`/faelle/${akte.caseNumber}/export`}>{de.export.heading}</Link>
-      </nav>
-
-      <section className="mt-6">
        <div className="mt-4">
          <EntryComposer caseNumber={akte.caseNumber} />
        </div>
@@ -452,6 +270,20 @@ export default async function CasePage({
          </Suspense>
        </div>
      </section>
-    </main>
+
+      <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>
+    </>
  )
 }
@@ -36,6 +36,8 @@ test.describe('Geschuetzte Bereiche', () => {
    '/kanaele',
    '/suche',
    '/faelle/AfiS-2026-0001/export',
+    '/faelle/AfiS-2026-0001/beteiligte',
+    '/faelle/AfiS-2026-0001/dokumente',
    '/einstellungen',
    '/dokumente/AfiS-2026-0001',
    '/admin/rollen',
@@ -24,6 +24,9 @@ export const caseText = {
  sections: 'Abschnitte',
  chat: 'Aktenchat',
  changes: 'Änderungen',
+  tabFile: 'Akte',
+  tabRelations: 'Beteiligte',
+  tabDocuments: 'Dokumente',
  participants: 'Beteiligte',
  links: 'Verknüpfungen',
  attachments: 'Anhänge',