# 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 (`` ~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 `` 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 `` ohne `title`: `title={t('')}` + `id=""` ergaenzen, sonst nichts aendern. 3. Namens-Heuristik mit Beispielen: `table` -> Entitaet Plural ("Benutzerliste"), `id="-table"`; `toolbar` -> "Filter"/"Aktionen", `id="-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 `` hat `title` und `id` | must | | 2 | grep ` Seitentitel in `StackLayout.Header`; durchgaengig falsche i18next-`t('key', 'fallback')`-Signatur auf Projekt-Konvention `t('')` 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 - [x] Phase 1: Panel-Komponente standardisiert - [x] Phase 2: alle Call-Sites migriert (Subagents + Review) - [x] Phase 3: AI Workspace resizable - [x] Phase 4: Audit mehrspaltige Seiten dokumentiert - [x] Typecheck migrationsbedingt gruen (5 JSX-Regressionen behoben), Lint gruen; vorbestehende Altlasten dokumentiert - [x] layout.md + TOPICS.md nachgefuehrt - [x] CHANGELOG-Eintrag (neueste zuoberst) - [x] Dieses Dokument -> 4-done/ verschoben, status: done