diff --git a/TOPICS.md b/TOPICS.md index 047aaca..a339fe5 100644 --- a/TOPICS.md +++ b/TOPICS.md @@ -27,7 +27,7 @@ Lade immer zuerst diese Datei. Dann gezielt die passende(n) Referenz-Datei(en). | Billing & Subscriptions | b-reference/platform-core/billing.md | Abrechnung, Prepaid, State Machine | | Google Voice (STT/TTS) | b-reference/platform-core/voice-google.md | VoiceObjects, ConnectorGoogleSpeech, `/voice-google/stt/*`, CommCoach vs Teamsbot vs Agent | | Frontend Nyla | b-reference/ui-nyla/architecture.md | UI-Seiten, Komponenten, Hooks, Routing | -| Layout-System (StackLayout, Panel, LayoutTabs, ViewStack, FloatingPortal) | b-reference/ui-nyla/layout.md | Scroll-Vertrag, Panel-Varianten, AI-Workspace Kontext-Sidebar (Muster 7), FloatingPortal fuer Dropdowns, Seiten-Aufbau-Muster | +| Layout-System (StackLayout, Panel, LayoutTabs, ViewStack, FloatingPortal) | b-reference/ui-nyla/layout.md | Scroll-Vertrag, Panel-Varianten, Panel-Standard (title/id Pflicht, Collapse Default + Persistenz, stabile Chevrons), PanelLayout-Resize (AI-Workspace), AI-Workspace Kontext-Sidebar (Muster 7), FloatingPortal fuer Dropdowns, Seiten-Aufbau-Muster | | FormGenerator (Table, Form, Tree, Report) | b-reference/ui-nyla/formgenerator.md | Generische UI-Komponenten, Provider-Pattern, API-Anbindung | | Private LLM | b-reference/service-llm-private/architecture.md | Internes LLM, Neutralisierung | | Teams Bot | b-reference/teams-bot/architecture.md | Meeting-Bot, Browser-Bot WebSocket, Director Prompts (Hybrid Agent-Routing), MeetingModule + 5-Tab-UI, Dashboard-SSE, Live-Session-SSE + MFA | diff --git a/b-reference/ui-nyla/layout.md b/b-reference/ui-nyla/layout.md index ef889ab..636cfb5 100644 --- a/b-reference/ui-nyla/layout.md +++ b/b-reference/ui-nyla/layout.md @@ -1,6 +1,6 @@ - - + + # Layout-System -- Referenz @@ -160,10 +160,10 @@ Container fuer eine gesamte Seite oder einen Tab-Inhalt. Compound-Component-Patt

Benutzer

- + - + @@ -179,12 +179,21 @@ Typisierter Container fuer jeden Inhaltsblock. Jede Panel-Instanz hat einen `var | Prop | Typ | Default | Beschreibung | |------|-----|---------|-------------| | `variant` | `card \| table \| dashboard \| toolbar \| editor \| wizard` | `card` | Bestimmt CSS-Verhalten (Flex, Padding, Border) | -| `title` | `string \| ReactNode` | - | Header-Titel (wenn gesetzt, wird Header gerendert) | +| `title` | `string \| ReactNode` | **Pflicht** | Header-Titel. Immer setzen, i18n via `t()` | +| `id` | `string` | **Pflicht** | Stabile, NICHT uebersetzte Region-ID. Default-Persistenzschluessel `panel-collapse:{pathname}:{id}` | | `subtitle` | `string \| ReactNode` | - | Untertitel im Header | -| `actions` | `ReactNode` | - | Action-Buttons im Header | -| `collapsible` | `boolean` | `false` | Collapse/Expand-Toggle im Header | +| `actions` | `ReactNode` | - | Action-Buttons im Header (Klicks togglen den Collapse nicht) | +| `collapsible` | `boolean` | `true` | Collapse/Expand-Toggle (Opt-out mit `collapsible={false}`, z.B. Chat/Editor) | | `defaultCollapsed` | `boolean` | `false` | Initial-Zustand | -| `collapseKey` | `string` | - | localStorage-Key fuer Persistenz (`panel-collapse:{key}`) | +| `collapseKey` | `string` | `{pathname}:{id}` | Expliziter localStorage-Key (`panel-collapse:{key}`); ueberschreibt den id-basierten Default | +| `style` | `CSSProperties` | - | Inline-Style-Passthrough auf den Panel-Root | + +### Pflicht-Konventionen (Stand 2026-06-11) + +- **Jedes** `` hat `title` und `id`. Der Compiler erzwingt das (Props sind required). +- `collapsible` ist standardmaessig `true`: jede Region hat einen Collapse/Expand-Chevron (react-icon `FaChevronDown`/`FaChevronRight`), stabil am rechten Header-Rand (gleiche Position bei collapsed und expanded). +- Collapse-Zustand wird pro Region in localStorage persistiert. +- **Variante `toolbar`**: Chrome (Filter-/Action-Bar), rendert KEINEN sichtbaren Header. `title`/`id` sind trotzdem Pflicht (Identifikation/a11y), aber es gibt keinen Collapse-Toggle und keine doppelte Titelzeile. ### Varianten-Verhalten @@ -211,7 +220,7 @@ CSS-Aenderungen an `[data-variant="table"]` in `Panel.module.css` wirken auf ALL ### Beispiel: Collapsible Dashboard ```tsx - +
@@ -219,6 +228,8 @@ CSS-Aenderungen an `[data-variant="table"]` in `Panel.module.css` wirken auf ALL ``` +`collapsible` ist Default `true` und der id-basierte Persistenzschluessel deckt den haeufigen Fall ab; `collapseKey` nur setzen, wenn der Zustand instanz-/scope-abhaengig sein muss (z.B. `collapseKey={`dashboard-overview-${instanceId}`}`). + ## LayoutTabs Einziges Tab-System. Ersetzt `UiComponents/Tabs` und alle manuellen Tab-Button-Implementierungen. @@ -370,20 +381,22 @@ Beispiele: FilesPage, CommcoachSessionView, RedmineBrowserView ### Muster 7: AI Workspace (Prompt-Centric + Explorer-Kontext) -Kein `PanelLayout`-3-Spalten-Split mehr fuer Kontext. Stattdessen: +2-Spalten-Layout (Kontext + Chat), bei offenem und expandiertem Kontext per `PanelLayout` resizable: ``` StackLayout (variant="table") └── Body (layoutFill) └── workspaceShell ├── topBar: Kontext-Toggle (Icon) · Chatname (`...` wenn neu) · Chat-Picker · Neuer-Chat (+) - └── mainStage (flex row, volle Hoehe) - ├── [optional] WorkspaceContextSidebar (320px, volle Hoehe) - │ ├── contextToolbar: Icons Dateien | Quellen | Aktivitaet | Vorschau | Collapse - │ └── contextSidebarBody: FilesTab | SourcesTab | ToolActivityLog | FilePreview - └── centerColumn: ChatStream + WorkspaceInput + └── mainStage (volle Hoehe) + ├── Kontext offen + expandiert: PanelLayout (persistenceKey="workspace-main-split", horizontal) + │ ├── Pane context (defaultSize 26, minSize 16, maxSize 50): WorkspaceContextSidebar fillWidth + │ └── Pane chat (defaultSize 74): centerColumn (ChatStream + WorkspaceInput) + └── Kontext zu/collapsed: flex row (44px-Strip oder nur centerColumn) ``` +Resize: Divider zwischen Kontext-Sidebar und Chat, Breite in localStorage (`po_panel_layout:workspace-main-split`). Collapse der Sidebar bleibt am Chevron in der Sidebar-Toolbar (PanelLayout-Panes selbst `collapsible:false`). Wenn die Sidebar collapsed ist (44px-Strip), wird kein PanelLayout verwendet. Die Sidebar fuellt im Pane via Prop `fillWidth` die Breite (statt fixer 320px). + URL-Parameter: `?ctxTab=files|sources|activity|preview` (Legacy `data` → `files`). Kontext-Panel offen: `localStorage workspace-ctx-open-{instanceId}`. **Desktop:** Kontext oeffnen setzt Sidebar immer auf expandiert (`ctxSidebarCollapsed=false`). Collapse nur ueber Chevron in der Sidebar-Toolbar. @@ -434,6 +447,9 @@ Bei JEDER Seiten-Migration abarbeiten (Lessons aus Phase 4): | Anti-Pattern | Stattdessen | |-------------|-------------| +| `` ohne `title`/`id` | Immer `title={t('...')}` + stabiles `id`; Compiler erzwingt es | +| `` als reiner Wrapper ohne Titel | Region benennen oder kein Panel verwenden (z.B. `
`) | +| Fixe Spaltenbreite bei 2+ nebeneinanderliegenden Regionen | `PanelLayout` mit Drag-Divider | | `styles.adminPage` / `adminPageFill` | `StackLayout` mit passender Variante | | `styles.tableContainer` | `Panel variant="table"` | | `styles.pageHeader` mit inline Actions | `Panel variant="toolbar"` oder `StackLayout.Header` | diff --git a/c-work/4-done/2026-06-panel-system-standardisierung.md b/c-work/4-done/2026-06-panel-system-standardisierung.md new file mode 100644 index 0000000..f8116e8 --- /dev/null +++ b/c-work/4-done/2026-06-panel-system-standardisierung.md @@ -0,0 +1,129 @@ + + + + + +# 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 diff --git a/c-work/_CHANGELOG.md b/c-work/_CHANGELOG.md index 48df55e..c739113 100644 --- a/c-work/_CHANGELOG.md +++ b/c-work/_CHANGELOG.md @@ -14,6 +14,11 @@ Skip: reine Refactors, Formatting, Lint, Dep-Bumps, Test-only, Wiki-Tippfehler. ## 2026-06-11 +- 2026-06-11 | fix | ui-nyla | **Vorbestehende tsc-Altlasten bereinigt (Repo 0 Fehler)**: `AdminSessionsPage` Seitentitel von `StackLayout`-Prop in `StackLayout.Header` verschoben + i18next-`t('key','fallback')` auf Projekt-`t('')` umgestellt; `AdminLanguagesPage` redundantes `style` am `StackLayout`-Root entfernt; `NeutralizationView` Tab-Items `content`->`render`; tote Symbole entfernt (`fetchInstanceUsers`, `TabId`, `_horizontalPadding`). +- 2026-06-11 | feat | ui-nyla | **Panel-System Standardisierung**: `Panel` erhaelt Pflicht-Props `title` + `id`; `collapsible` Default `true` (opt-out); stabile Chevron-Icons (`FaChevronDown`/`FaChevronRight`) fix am Header-Rand; Auto-Collapse-Persistenz `{pathname}:{id}` (localStorage); `style`-Passthrough. ~200 Panel-Call-Sites in ~60 Dateien via composer-2.5-Subagents migriert (Titel+id), Hauptagent-Review + 5 JSX-Regressionen (geloeschte Kind-Tags) behoben. AI Workspace `mainStage` auf `PanelLayout` mit Resize-Divider (Kontext-Sidebar ↔ Chat, Breite persistiert). (c-work: 4-done/2026-06-panel-system-standardisierung.md) +- 2026-06-11 | docs | wiki | **layout.md: Panel-Standardisierung + Workspace-Resize nachgefuehrt** — Panel-Props-Tabelle (title/id Pflicht, collapsible Default true), Beispielmuster + Muster 7 (Workspace), Anti-Patterns; lastReviewed/verifiedAgainst aktualisiert. +- 2026-06-11 | feat | platform-core, ui-nyla | **Multi-Session, Silent Refresh & Trusted Device**: Parallele Browser-Sessions erlaubt (`saveAccessToken` Default `replace_existing=False`); `/refresh`-Endpoint speichert neuen Token in DB (fix); Frontend-Interceptor versucht Silent Refresh vor Login-Redirect; `TrustedDevice`-Modell + Service (MFA-Skip 60d, NIST SP 800-63B konform); Admin-Endpoints + UI fuer Session- und Trusted-Device-Verwaltung (`/api/admin/sessions`, `/api/admin/trusted-devices`); taeglicher Token/Device-Cleanup-Scheduler. +- 2026-06-11 | docs | wiki | **Auth-Referenzseite + IMS aktualisiert**: Neue `b-reference/platform/authentication.md`; `security-overview.md` Abschnitt 10 erweitert (Multi-Session, Silent Refresh, Trusted Device); IAM-Richtlinie (`02_Zugriffsmanagement_IAM_PAM.md`) um Session-Management und regulatorische Grundlagen ergaenzt; TOPICS.md ergaenzt. - 2026-06-11 | fix | ui-nyla | **FormGeneratorTable Filter-Race systemweit behoben**: `_lastTableParams` Ref-Cache in 16 Seiten (10 HIGH, 6 MEDIUM) eingefuehrt. Parent-useEffects die ungefiltert den gleichen Loader wie `hookData.refetch` aufriefen, entfernt oder auf Cache umgestellt. Betroffene Seiten: WorkflowTemplatesPage, AdminUserMandatesPage, AdminMandateRolesPage, AdminFeatureAccessPage, AdminFeatureInstanceUsersPage, AdminFeatureRolesPage, AdminInvitationsPage, TrusteePositionsView, TrusteeDocumentsView, CommcoachSettingsView, ConnectionsPage, FilesPage, PromptsPage, AdminUsersPage, AdminMandatesPage, AdminSubscriptionsPage. - 2026-06-11 | fix | platform-core | **Google STT de-CH Language-Mapping**: `_normalizeSttLanguage()` mappt regionale Varianten (de-CH→de-DE, fr-CH→fr-FR etc.) vor Google Speech API-Aufruf; behebt `400 Invalid recognition config` fuer `latest_long` Modell. - 2026-06-11 | fix | ui-nyla | **8 UI/UX-Bugfixes**: (1) Voice-Preferences 404: `fetch`→`api`-Client in WorkspaceInput. (2) RAG-Seite: Datenobjekt-Toggle + Settings-Button pro Verbindung. (3) DSGVO i18n: Statische DE-Texte statt EN-Backend-Content, LOESCHEN-Placeholder via `t()`. (4) FormGeneratorTable Default-Sort: `initialSort` desc auf Compliance/Billing/Subscriptions. (5) FormGeneratorTable Filter-Race: Parent-Loader in ComplianceAuditPage entfernt + Loader-Params-Cache via Ref. (6+7) Admin-Wizards: Mandanten/User/Rollen alphabetisch sortiert (case-insensitive) in allen 3 Wizards. diff --git a/d-guides/deployment/poweron-sec.kdbx b/d-guides/deployment/poweron-sec.kdbx index d9d2bb1..1dfcfc4 100644 Binary files a/d-guides/deployment/poweron-sec.kdbx and b/d-guides/deployment/poweron-sec.kdbx differ