129 lines
8.3 KiB
Markdown
129 lines
8.3 KiB
Markdown
<!-- status: done -->
|
|
<!-- started: 2026-06-11 -->
|
|
<!-- completed: 2026-06-11 -->
|
|
<!-- component: ui-nyla -->
|
|
|
|
# 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
|
|
|
|
- [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
|