wiki/c-work/4-done/2026-06-panel-system-standardisierung.md

Panel-System Standardisierung

Beschreibung und Kontext

Das Layout-System (StackLayout, Panel, PanelLayout) existiert, aber die generischen Faehigkeiten Collapse/Expand und Resize sind faktisch unsichtbar: Sie sind opt-in pro Seite statt zentral garantiert. Der User sieht an keiner Komponente Collapse/Expand- oder Resize-Moeglichkeiten.

Ziel der urspruenglichen Architektur (Chat "UI layout migration"): Panels werden zentral definiert, Seiten geben nur Inhalt mit und kuemmern sich NICHT um Anordnungslogik. Alle Elemente sollen generisch Verbreitern/Verkleinern und Collapse/Expand koennen, mit stabilen Icons am gleichen Ort.

Ist-Zustand

• Panel rendert Header + Collapse-Chevron nur, wenn title gesetzt ist (hasHeader = title != null, Panel.tsx Zeile 45). collapsible ist opt-in, Default false.
• ~200 Panel-Instanzen in ~60 Dateien haben keinen Titel (<Panel variant="card"> ~120, variant="toolbar"> ~55, variant="table"> ~30) -> kein Header, kein Collapse.
• Chevron ist ein CSS-Dreieck (Border-Trick), Position abhaengig von Actions-Breite -> nicht stabil.
• PanelLayout (Resize + Collapse mit Chevron-Icons, localStorage) existiert, wird aber nur auf 4 Seiten genutzt: FilesPage, CommcoachSessionView, RedmineBrowserView, TeamsbotSessionView.
• AI Workspace Desktop (WorkspacePage.tsx Zeile 615-621): mainStage = flex row mit fixer 320px-Sidebar + Chat, kein Resize-Divider.

Ziel

• Jede Region ist ein Panel mit Pflicht-title und Pflicht-id.
• Collapse/Expand ist Standard (collapsible Default true), mit stabilen Chevron-Icons am gleichen Ort.
• Mehrspaltige Layouts (zuerst AI Workspace) sind per Drag-Divider resizable, Breite persistiert.
• Seiten geben nur Inhalt + Titel mit; Anordnungs-, Collapse- und Resize-Logik liegt zentral im Panel-System.

Entscheidungen

Datum	Entscheidung	Begruendung
2026-06-11	title und id werden Pflicht-Props an Panel	Compiler erzwingt vollstaendige Migration; jede Region wird identifizierbar und persistierbar
2026-06-11	collapsible Default true (opt-out)	User-Vorgabe "alle standard"; Collapse soll ueberall sichtbar sein
2026-06-11	Chevron als react-icon (FaChevron*) fix am Header-Rand	Stabile Icon-Position bei collapsed und expanded (User-Vorgabe)
2026-06-11	Repetitive Call-Site-Migration via composer-2.5-fast Subagents	Effiziente, mechanische Massenaenderung mit klarer Anleitung
2026-06-11	AI Workspace nutzt PanelLayout fuer die 2 Spalten	Resize zwischen Kontext-Sidebar und Chat (User-Vorgabe)

Vorgeschlagene Architektur

Phase 1: Panel-Komponente standardisieren

Dateien: components/Layout/Panel.tsx, Panel.module.css, types.ts

• title: string | ReactNode wird Pflicht-Prop.
• Neues Pflicht-Prop id: string (stabil, nicht i18n-abhaengig) -> Auto-Persistenz unter panel-collapse:{pathname}:{id}; bestehendes collapseKey ueberschreibt weiterhin.
• collapsible Default true (opt-out mit collapsible={false} fuer Chat/Editor).
• Chevron: CSS-Dreieck ersetzen durch FaChevronDown/FaChevronRight, fix am rechten Header-Rand.
• Variante toolbar: kompakter Inline-Titel links, schlanke Hoehe, Collapse auf schmale Leiste.

Phase 2: Call-Site-Migration (~60 Dateien) via Subagents

Alle <Panel ...> ohne title erhalten title={t('...')} und id="...". Buckets:

• 2a: pages/admin/** (inkl. wizards)
• 2b: pages/basedata/** + pages/billing/**
• 2c: pages/views/** (trustee, commcoach, teamsbot, redmine, realestate, neutralization, workflowAutomation, workspace)
• 2d: Top-Level (Dashboard, Settings, Store, RagInventoryPage, ComplianceAuditPage, IntegrationsOverviewPage)

Phase 3: AI Workspace Resize

WorkspacePage.tsx Desktop mainStage bei offenem Kontext-Panel durch PanelLayout direction="horizontal" ersetzen (Pane context ~25%/minSize 15, Pane chat ~75%, persistenceKey="workspace-main"). Mobile Bottom-Sheet unveraendert.

Phase 4: Audit mehrspaltige Seiten

Befundliste aller Seiten mit Side-by-Side-Spalten/Zeilen ohne PanelLayout; Umbau als Folgeschritt nach Freigabe.

Subagent-Arbeitsweise (composer-2.5)

Repetitive Call-Site-Migration wird an composer-2.5-fast Subagents delegiert, ein Subagent pro Bucket, parallel. Jeder Auftrag enthaelt verpflichtend:

1. Exakte Dateiliste des Buckets (keine Suche noetig).
2. Mechanische, copy-paste-faehige Regel: Fuer jedes <Panel> ohne title: title={t('<deutscher Titel>')} + id="<kebab-id>" ergaenzen, sonst nichts aendern.
3. Namens-Heuristik mit Beispielen: table -> Entitaet Plural ("Benutzerliste"), id="<entity>-table"; toolbar -> "Filter"/"Aktionen", id="<context>-toolbar"; card -> fachlicher Block-Name.
4. Verbote: keine Logik-Aenderung, keine neuen Imports ausser bereits vorhandenem t, kein Entfernen von collapseKey/title.
5. Selbstkontrolle: ReadLints ueber geaenderte Dateien; Bericht als Tabelle (Datei + gesetzte title/id).

Hauptagent reviewt jeden Bericht, prueft Titel-Qualitaet, fuehrt zentralen npx tsc --noEmit aus.

Betroffene Module

• components/Layout/Panel.tsx + .module.css + types.ts (Kern)
• components/Layout/PanelLayout.tsx (Workspace-Integration, ggf. minSize-Feintuning)
• pages/views/workspace/WorkspacePage.tsx + Workspace.module.css
• ~60 Seiten-Dateien (Phase 2)
• wiki/b-reference/ui-nyla/layout.md, wiki/TOPICS.md, wiki/c-work/_CHANGELOG.md

Akzeptanzkriterien

#	Kriterium	Prio
1	Jedes <Panel> hat title und id	must
2	grep <Panel ohne title-Prop = 0 Treffer	must
3	collapsible Default true; Chevron sichtbar an stabiler Position	must
4	Collapse-Zustand persistiert pro Region (localStorage)	must
5	AI Workspace: Kontext-Spalte und Chat per Divider resizable, Breite persistiert	must
6	npx tsc --noEmit = 0 Fehler	must
7	npm run lint ohne neue Fehler	should
8	layout.md (canonical) nachgefuehrt inkl. lastReviewed/verifiedAgainst	must

Phase-4-Befund: Audit mehrspaltige Seiten

Suche nach persistenten Side-by-Side-Regionen (Master/Detail) ohne PanelLayout:

• Alle echten Zwei-Regionen-Splitlayouts nutzen bereits PanelLayout: FilesPage, CommcoachSessionView, RedmineBrowserView, TeamsbotSessionView und neu WorkspacePage (Phase 3).
• Die uebrigen grid-template-columns-Treffer (~20 Dateien) sind responsive Karten-Grids innerhalb eines einzelnen Panels (repeat(auto-fill/auto-fit, minmax(...))) oder reine Label/Value-Form-Grids. Diese sind kein Resize-Divider-Anwendungsfall und bleiben unveraendert.

Ergebnis: Kein weiterer Umbaubedarf. Kein offener Folgeschritt.

Typecheck-Hinweis

npx tsc --noEmit ist nach der Migration frei von Migrations-bedingten Fehlern. Ein Baseline-Lauf (Stash der Migration) zeigte ~17 vorbestehende Fehler, unabhaengig von diesem Refactoring. Diese wurden auf Anforderung ebenfalls behoben (Root-Cause, keine Workarounds):

• AdminSessionsPage.tsx (untracked): title vom StackLayout entfernt -> Seitentitel in StackLayout.Header; durchgaengig falsche i18next-t('key', 'fallback')-Signatur auf Projekt-Konvention t('<deutscher Text>') umgestellt.
• AdminLanguagesPage.tsx:874: redundantes style={{ position: relative }} vom StackLayout-Root entfernt (Overlay ist am inneren Panel verankert, das position: relative via style-Passthrough traegt).
• Tote Symbole entfernt: AdminFeatureInstanceUsersPage (fetchInstanceUsers, Rest aus Filter-Race-Fix), AdminUserAccessOverviewPage (TabId), WorkspaceInput (_horizontalPadding).
• NeutralizationView.tsx:766: Tab-Items von content auf render: () => ... (LayoutTabItem) umgestellt.

Ergebnis: npx tsc --noEmit ueber das gesamte Repo = 0 Fehler. Akzeptanzkriterium 6 vollstaendig erfuellt.

Abschluss

• Phase 1: Panel-Komponente standardisiert
• Phase 2: alle Call-Sites migriert (Subagents + Review)
• Phase 3: AI Workspace resizable
• Phase 4: Audit mehrspaltige Seiten dokumentiert
• Typecheck migrationsbedingt gruen (5 JSX-Regressionen behoben), Lint gruen; vorbestehende Altlasten dokumentiert
• layout.md + TOPICS.md nachgefuehrt
• CHANGELOG-Eintrag (neueste zuoberst)
• Dieses Dokument -> 4-done/ verschoben, status: done