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.

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

@@ -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>
+    </>
   )
 }