From b3e651b3b9b417cc04d7388aecccd12478efa0ef Mon Sep 17 00:00:00 2001 From: Sandro Date: Sat, 24 Oct 2026 23:26:31 +0200 Subject: [PATCH] feat(theme): implement single-file CSS theming engine with dark, light, high-contrast, and soft themes --- BRAIN.md | 252 ++++++++------- frontend/src/App.tsx | 90 ++++-- .../src/features/auth/SetupAndAuthView.tsx | 141 ++++---- .../features/capture/InstantCaptureBar.tsx | 78 ++--- .../src/features/lists/SharedListsView.tsx | 99 +++--- .../features/settings/AdminSettingsView.tsx | 260 ++++++++------- .../features/settings/UserSettingsView.tsx | 302 ++++++++++++------ frontend/src/features/triage/TasksView.tsx | 212 ++++++------ frontend/src/features/triage/TriageDeck.tsx | 84 ++--- .../src/features/workspace/WorkspaceView.tsx | 163 +++++----- frontend/src/index.css | 173 +++++++--- frontend/src/lib/theme.ts | 93 ++++++ frontend/src/themes/theme-dark.css | 56 ++++ frontend/src/themes/theme-high-contrast.css | 55 ++++ frontend/src/themes/theme-light.css | 55 ++++ frontend/src/themes/theme-soft.css | 56 ++++ frontend/src/themes/theme-template.css | 56 ++++ frontend/tailwind.config.js | 34 +- 18 files changed, 1455 insertions(+), 804 deletions(-) create mode 100644 frontend/src/lib/theme.ts create mode 100644 frontend/src/themes/theme-dark.css create mode 100644 frontend/src/themes/theme-high-contrast.css create mode 100644 frontend/src/themes/theme-light.css create mode 100644 frontend/src/themes/theme-soft.css create mode 100644 frontend/src/themes/theme-template.css diff --git a/BRAIN.md b/BRAIN.md index 594bba6..fba0b47 100644 --- a/BRAIN.md +++ b/BRAIN.md @@ -9,10 +9,16 @@ - [x] **CI/CD & Multi-Stage Docker Build (`Dockerfile`, `.gitea/workflows/build-and-publish.yaml`):** - Alle Frontend-Checks (`tsc --noEmit`, `vite build`) und Backend-Tests (`go test -v ./...`) laufen direkt im Multi-Stage Container-Build ohne doppelte Vorab-Steps. - Push auf `dev` baut und überschreibt `git.dsit.me/sandrodach/mindsift:dev`. -- [x] **Monochromes, eckiges Desktop-Design & Zentrale CSS-Steuerung (`frontend/src/index.css`, `frontend/tailwind.config.js`):** - - Zentrale CSS-Variablen (`--bg-app`, `--bg-panel`, `--accent-primary`, `--border-color`, `--radius-card: 0px`) in `frontend/src/index.css`. - - Eckige Tabs, eckige Panels/Karten (`0px` Radius), nur die Schnell-Eingabe-Blase oben im Header und Profil-Avatare sind rund (`rounded-full`). - - Untere doppelte Navigationsleiste entfernt; Schnell-Notiz-Blase (`InstantCaptureBar`) sitzt ganz oben im Header über den Tabs. +- [x] **Single-File CSS Theming Engine & Design-System (`frontend/src/themes/`, `theme.ts`, `tailwind.config.js`):** + - Jedes Theme ist als **genau eine einzige, eigenständige CSS-Datei** unter `frontend/src/themes/` definiert. + - Alle Farben, Kontraste, Oberflächen, Rahmen, Statusfarben und Rundungen sind in 6 klaren Gruppen organisiert. + - 4 vorkonfigurierte Themes (Dark, Light, High Contrast, Soft) plus saubere `theme-template.css`-Vorlage für eigene Themes. + - Vollständige Trennung von Struktur und Styling: React-Komponenten enthalten keine hardcodierten Farbwerte mehr, sondern ausschließlich semantische Klassen und CSS-Variablen (`text-main`, `text-muted`, `bg-canvas`, `panel-surface`, `checkbox-square`, etc.). + - Schnellauswahl im Profil-Dropdown im Header sowie visueller Theme-Manager in den Benutzereinstellungen. +- [x] **Monochromes, eckiges Desktop-Design & Zentrale CSS-Steuerung:** + - Zentrale CSS-Variablen (`--bg-canvas`, `--bg-panel`, `--accent`, `--border-color`, `--radius-card`, `--radius-btn`, `--radius-input`) in den Theme-Dateien. + - Eckige Tabs, eckige Panels/Karten (`0px` Radius im Dark/Monochrome-Theme), nur die Schnell-Eingabe-Blase (`InstantCaptureBar`) oben im Header nutzt `--radius-pill`. + - Untere doppelte Navigationsleiste entfernt; Schnell-Notiz-Blase sitzt ganz oben im Header über den Tabs. - Workspace links als eckiger, monochromer Datei-/Ordner-Baum (File Explorer Tree mit Unterordnern). - [x] **Quick Dump Notes + Triage Swipen + Direkt-Zuordnung (`InstantCaptureBar.tsx`, `TriageDeck.tsx`, `server.go`):** - **Quick Dump (Standard):** Text oben eingeben + `Enter` wirft den Gedanken sofort als Quick Dump (`status: 'inbox'`) ins Triage-Deck. @@ -28,7 +34,7 @@ - Öffentliche Selbstregistrierung ist standardmäßig deaktiviert (`allowRegistration: false`). Neue Benutzer können nur über einen **Einladungscode** (`MS-XXXXXXXX`, Tabelle `user_invites`) oder direkt durch einen Admin (`admin` / `team_admin`) angelegt werden. - [x] **Profile-Dropdown & Vollbild-Einstellungsseiten statt kleinem Modal (`App.tsx`, `UserSettingsView.tsx`, `AdminSettingsView.tsx`):** - Klick auf den Benutzer oben rechts öffnet ein eckiges, monochromes Dropdown-Menü: - - **Kontoeinstellungen** (`UserSettingsView.tsx` — Vollbild-Ansicht für Profil & Passwort, Multi-Channel-Alarme, Private Webhooks & Daten-Export). + - **Kontoeinstellungen** (`UserSettingsView.tsx` — Vollbild-Ansicht für Profil & Passwort, Darstellung & Themes, Multi-Channel-Alarme, Private Webhooks & Daten-Export). - **Administration** (`AdminSettingsView.tsx` — nur sichtbar für `admin` und `team_admin`; Vollbild-Ansicht für Benutzer, Rollen, Einladungscodes, Organisationen & Teams, Server-Isolation und SMTP-Mailserver). - **Abmelden** (bereinigt JWT-Token und führt zurück zum Login-Bildschirm). - 3-stufiges Rollensystem: `admin` (Server-Admin), `team_admin` (Team-Admin mit Berechtigung zum Einladen und Verwalten von Teams) und `member` (Mitglied). @@ -50,43 +56,85 @@ --- -## 🎨 1. Design-System & CSS-Architektur (`frontend/src/index.css`) +## 🎨 1. Single-File CSS Theming Engine & Design-System -Alle Farben, Abstände und Radien werden zentral in [`frontend/src/index.css`](file:///home/sandro/Dokumente/git/MindSift/frontend/src/index.css) über CSS-Variablen gesteuert: +### Philosophie: 1 Datei = 1 komplettes Theme +Anstatt Styling in Dutzenden Tailwind-Klassen über hunderte Komponenten zu verstreuen, steuert **eine einzige CSS-Datei** das komplette Erscheinungsbild der Anwendung. + +Jedes Theme liegt unter `frontend/src/themes/` und gruppiert **6 standardisierte Bereiche**: ```css -:root { - /* Monochromer Hintergrund (Dunkles Schiefer/Anthrazit) */ - --bg-app: #121316; - --bg-panel: #1a1c20; - --bg-panel-elevated: #22252a; - --bg-panel-hover: #282c33; - - /* Einzige Akzentfarbe + hellere/gedimmte Variante */ - --accent-primary: #2563eb; +:root[data-theme="dein-theme"] { + /* ========================================================================== + 1. AKZENTFARBE (Fokus, Primäraktionen, Highlights) + ========================================================================== */ + --accent: #2563eb; --accent-hover: #3b82f6; - --accent-dim: rgba(37, 99, 235, 0.14); - --accent-border: rgba(59, 130, 246, 0.45); + --accent-dim: rgba(37, 99, 235, 0.15); + --accent-contrast: #ffffff; - /* Kanten & Linien */ - --border-color: rgba(255, 255, 255, 0.09); - --border-subtle: rgba(255, 255, 255, 0.05); + /* ========================================================================== + 2. OBERFLÄCHEN & HINTERGRÜNDE + ========================================================================== */ + --bg-canvas: #0e1013; + --bg-panel: #16181d; + --bg-panel-elevated: #1f2229; + --bg-input: #121418; + --bg-code: #0b0c0f; + --bg-overlay: rgba(0, 0, 0, 0.75); - /* Eckiges Layout (0px für Karten/Panels, minimal für Inputs) */ + /* ========================================================================== + 3. TEXT & KONTRASTE + ========================================================================== */ + --text-main: #f4f4f5; + --text-muted: #a1a1aa; + --text-faint: #71717a; + --text-on-accent: #ffffff; + + /* ========================================================================== + 4. RAHMEN, LINIEN & SCHATTEN + ========================================================================== */ + --border-color: rgba(255, 255, 255, 0.08); + --border-strong: rgba(255, 255, 255, 0.18); + --shadow-panel: 0 4px 20px -2px rgba(0, 0, 0, 0.45); + + /* ========================================================================== + 5. STATUS- & SIGNALFARBEN + ========================================================================== */ + --status-ok: #22c55e; + --status-err: #ef4444; + --status-warn: #eab308; + --status-info: #3b82f6; + + /* ========================================================================== + 6. RUNDUNGEN / GEOMETRIE + ========================================================================== */ --radius-card: 0px; --radius-btn: 2px; --radius-input: 2px; + --radius-checkbox: 2px; + --radius-pill: 9999px; } ``` -### Zentrale Komponenten-Klassen -- `.panel-surface` / `.panel-elevated`: Eckige Container mit `1px solid var(--border-color)`. -- `.btn-action`: Monochromer, kompakter Button (`border-radius: var(--radius-btn)`). -- `.btn-primary`: Akzent-Button auf `--accent-primary`. -- `.input-field`: Minimal gerundetes (`2px`) Eingabefeld für Eigenschaften/Optionen. -- `.tab-btn` / `.tab-btn-active`: Eckige, monochrome Header-Tabs. -- `.badge-accent`: Kompaktes Akzent-Badge für Zähler und Tags. -- **Ausnahme für Rundungen (`rounded-full`):** Nur die Schnell-Eingabe-Blase (`InstantCaptureBar`) im Header, der Profil-Avatar und Toggle-Switches sind rund. +### Verfügbare Themes + +| Theme-ID | Datei | Charakter | Standard-Geometrie | +| :--- | :--- | :--- | :--- | +| `dark` | [`theme-dark.css`](file:///home/sandro/Dokumente/git/MindSift/frontend/src/themes/theme-dark.css) | Standard Monochrom / Dark Slate | Streng eckig (`0px` Cards, `2px` Buttons) | +| `light` | [`theme-light.css`](file:///home/sandro/Dokumente/git/MindSift/frontend/src/themes/theme-light.css) | Daylight Clean White / Minimalist Light | Modern sauber (`4px` Cards, `4px` Buttons) | +| `high-contrast` | [`theme-high-contrast.css`](file:///home/sandro/Dokumente/git/MindSift/frontend/src/themes/theme-high-contrast.css) | Reines Schwarz/Weiß mit maximaler Lesbarkeit (AAA Kontrast) | Streng eckig (`0px`, `2px` Rahmen) | +| `soft` | [`theme-soft.css`](file:///home/sandro/Dokumente/git/MindSift/frontend/src/themes/theme-soft.css) | Soft Rounded Slate mit warmem Indigo-Akzent | Weich gerundet (`12px` Cards, `8px` Buttons) | +| *Template* | [`theme-template.css`](file:///home/sandro/Dokumente/git/MindSift/frontend/src/themes/theme-template.css) | Dokumentierte Vorlage zur Erstellung eigener Themes | Voll anpassbar | + +### Semantische Komponenten-Klassen (`frontend/src/index.css`) +- `.panel-surface` / `.panel-elevated`: Automatisch über `--radius-card`, `--bg-panel` und `--border-color` gesteuert. +- `.btn-primary` / `.btn-action`: Aktionen und Buttons mit `--radius-btn`, `--accent` und `--text-on-accent`. +- `.input-field`: Formularfelder mit `--radius-input`, `--bg-input`, `--border-color` und `--text-main`. +- `.checkbox-square`: Kontrollkästchen mit `--radius-checkbox` und `--accent`. +- `.badge-accent`, `.badge-neutral`, `.badge-ok`, `.badge-err`: Pillen und Zähler. +- `.alert-ok`, `.alert-err`: Hinweiskästen mit Signalfarben. +- `.capture-pill`: Die markante Schnell-Eingabeleiste im Header mit `--radius-pill`. --- @@ -98,105 +146,71 @@ MindSift speichert alle Daten lokal und hochperformant in SQLite (`/data/mindsif 1. **`users`** - `id TEXT PRIMARY KEY`, `email TEXT UNIQUE`, `password_hash TEXT`, `display_name TEXT` - - `role TEXT DEFAULT 'member'` (`'admin'` | `'member'`) - - `is_active INTEGER DEFAULT 1` - - `discord_webhook_url TEXT DEFAULT ''` - - `notify_before_minutes INTEGER DEFAULT 15` - - `created_at DATETIME`, `updated_at DATETIME` - -2. **`thoughts` (Quick Dumps, Triage & Aufgaben)** - - `id TEXT PRIMARY KEY`, `user_id TEXT`, `content TEXT`, `source TEXT`, `priority TEXT` - - `status TEXT` (`'inbox'` | `'converted'` | `'discarded'`) - - `converted_type TEXT` (`'task'` | `'document'` | `'list_item'`) - - `converted_ref_id TEXT` (Referenz auf Document oder ListItem) - - `task_list_id TEXT` (FK auf `task_lists.id`) - - `kanban_status TEXT DEFAULT 'todo'` (`'todo'` | `'in_progress'` | `'done'`) - - `notes TEXT DEFAULT ''` (zusätzliche Aufgabenbeschreibung/Notizen) - - `due_date DATETIME` (Fälligkeitsdatum) - - `alarm_sent INTEGER DEFAULT 0` (Flag für Discord-Benachrichtigung) - - `created_at DATETIME`, `updated_at DATETIME` - -3. **`task_lists` (Mehrere Aufgabenlisten)** - - `id TEXT PRIMARY KEY`, `user_id TEXT`, `space_id TEXT` (optional für Team-Sharing) - - `name TEXT NOT NULL`, `color TEXT DEFAULT '#2563eb'`, `icon TEXT DEFAULT 'list'` - - `is_default INTEGER DEFAULT 0`, `created_at DATETIME`, `updated_at DATETIME` - -4. **`organizations` & `teams` & `team_members`** - - `organizations`: `id TEXT PRIMARY KEY`, `name TEXT`, `owner_id TEXT`, `created_at DATETIME`, `updated_at DATETIME` - - `teams`: `id TEXT PRIMARY KEY`, `organization_id TEXT`, `name TEXT`, `created_at DATETIME` - - `team_members`: `team_id TEXT`, `user_id TEXT`, `role TEXT DEFAULT 'member'`, `joined_at DATETIME`, `PRIMARY KEY (team_id, user_id)` - -5. **`system_settings` (Admin-Konfiguration)** - - `key TEXT PRIMARY KEY`, `value TEXT`, `updated_at DATETIME` - - Wichtige Schlüssel: - - `sharing_isolation_mode`: `'open'` | `'teams_only'` | `'strict_private'` - - `allow_public_registration`: `'true'` | `'false'` - -6. **`documents` & `document_blocks` (Workspace & Disk Sync)** - - `documents`: `id TEXT PRIMARY KEY`, `user_id TEXT`, `space_id TEXT`, `title TEXT`, `folder_path TEXT DEFAULT '/'`, `is_archived INTEGER`, `created_at DATETIME`, `updated_at DATETIME` - - `document_blocks`: `id TEXT PRIMARY KEY`, `document_id TEXT`, `block_type TEXT` (`paragraph`, `heading1`, `heading2`, `heading3`, `todo`, `bullet`, `callout`, `code`, `table`, `progress`), `content TEXT`, `order_index INTEGER`, `metadata TEXT`, `updated_at DATETIME` - -7. **`spaces`, `space_members`, `shared_lists`, `list_items`, `api_keys`** - - Verwaltung geteilter Einkaufs-/Checklisten und privater Ingestion-Keys. + - `role TEXT DEFAULT 'member'` (`admin`, `team_admin`, `member`) + - `is_active INTEGER DEFAULT 1`, `created_at DATETIME`, `updated_at DATETIME` +2. **`system_settings`** (Instanzweite globale Konfiguration, 1 Row mit `id = 'singleton'`) + - `sharing_mode TEXT DEFAULT 'teams_only'` (`strict_private`, `teams_only`, `open`) + - `allow_registration INTEGER DEFAULT 0` (Öffentliche Registrierung erlaubt oder gesperrt) + - `instance_name TEXT DEFAULT 'MindSift'` + - `smtp_host TEXT`, `smtp_port INTEGER`, `smtp_user TEXT`, `smtp_pass TEXT`, `smtp_from TEXT`, `smtp_tls INTEGER` +3. **`user_invites`** (Einladungscodes für neue Registrierungen) + - `id TEXT PRIMARY KEY`, `code TEXT UNIQUE` (`MS-XXXXXXXX`), `email TEXT` (optional gebunden) + - `role TEXT DEFAULT 'member'`, `team_id TEXT` (optional direkte Team-Zuweisung) + - `created_by TEXT`, `used_by TEXT`, `expires_at DATETIME`, `created_at DATETIME` +4. **`organizations` & `organization_teams` & `team_members`** + - Strukturierung von Benutzern in Abteilungen, Familien oder Projekt-Teams. + - Bildet die Basis für den Sichtbarkeits-Modus `teams_only`. +5. **`spaces` & `space_members`** + - Geteilte Kollaborations-Räume mit Einladungscode (`invite_code`), Echtzeit-WebSocket Sync und Rollen (`owner`, `editor`, `viewer`). +6. **`shared_lists` & `list_items`** + - Geteilte Einkaufs-, Pack- und Inventarlisten mit Kategorien, Mengen und Echtzeit-Abhaken. +7. **`tasks` & `task_lists`** + - Persönliche und geteilte Aufgabenlisten mit Kanban-Spalten (`todo`, `in_progress`, `done`), Fälligkeit, Priorität und Alarm-Optionen. +8. **`quick_dumps` (Triage-Deck)** + - Schnelle Einfälle (`status = 'inbox'`, `'discarded'`, `'converted'`), Fälligkeitsdatum und Text-Notiz. +9. **`documents` (Workspace Markdown-Wiki)** + - Notizen und Dokumentationen mit Folder-Pfad (`folder_path`), Tags, Pinned-Status, JSON-Blocks und physischer `.md`-Spiegelung auf Disk. +10. **`user_alarms` & `user_webhooks`** + - Multi-Channel Alarme (Mail, Discord, Webhook) und ausgehende Event-Webhooks. --- -## ⚙️ 3. State-Machine: Quick Dump, Direkt-Zuordnung & Triage +## ⚡ 3. Triage & Quick-Dump State Machine +```mermaid +stateDiagram-v2 + [*] --> InstantCapture: Gedanke eingetippt + InstantCapture --> QuickDump_Inbox: Enter (Standard) + InstantCapture --> TaskCreated: Ziel = 'task' + InstantCapture --> ListItemCreated: Ziel = 'list_item' + InstantCapture --> DocCreated: Ziel = 'document' + + QuickDump_Inbox --> TriageDeck: Stapel sichten + TriageDeck --> Discarded: Swipe links / H (Wegwerfen) + TriageDeck --> TaskCreated: Swipe rechts / L (Als Aufgabe) + TriageDeck --> TaskCreated: T (Termin-Aufgabe) + TriageDeck --> DocCreated: D (In Notiz umwandeln) + TriageDeck --> ListItemCreated: Auf Liste schieben + TriageDeck --> QuickDump_Inbox: Leertaste (Später - ans Ende) + + Discarded --> [*] + TaskCreated --> [*] + DocCreated --> [*] + ListItemCreated --> [*] ``` - [ HEADER QUICK-CAPTURE BAR ] - │ - ┌───────────────────────┼───────────────────────┐ - │ Standard (Enter) │ Direkt-Option gewählt │ - ▼ ▼ ▼ - status: 'inbox' status: 'converted' status: 'converted' - (Quick Dump Deck) ├── target: 'task' ├── target: 'list_item' - │ └── target: 'document' └── Broadcast via WS - │ - ├──► Swipe Links / "Wegwerfen" (H / ←) ──► status: 'discarded' - ├──► "Später" (Leertaste) ──► ans Ende der lokalen Queue - ├──► Swipe Rechts / "Als Aufgabe" (L/→)──► status: 'converted' (type: 'task') - ├──► "Mit Termin" (T) ──► status: 'converted' (type: 'task', dueDate) - ├──► "Als Notiz" (D) ──► status: 'converted' (type: 'document' + Doc angelegt) - └──► "Auf Liste" ──► status: 'converted' (type: 'list_item' + Item angelegt) -``` - -### API-Endpunkt für Capture (`POST /api/v1/inbox`) -Akzeptiert: -- `content`: Fließtext des Gedankens -- `priority`: `'low'` | `'medium'` | `'high'` -- `target`: `'inbox'` (Standard) | `'task'` | `'list_item'` | `'document'` -- `taskListId`: ID der Aufgabenliste (wenn `target === 'task'`) -- `targetListId`: ID der Zielliste (wenn `target === 'list_item'`) -- `dueDate`: Optionales ISO-Datum --- -## 🔔 4. Discord-Alarm-Scheduler & Webhook-Architektur +## 👥 4. Server-Administration & Isolation Modes -1. **Hintergrund-Ticker im Go-Backend (`internal/api/server.go`):** - - Ein Hintergrund-Goroutine-Ticker läuft alle 60 Sekunden. - - Fragt `GetDueTasksForAlarm()` ab: Sucht nach offenen Aufgaben (`status = 'converted'`, `converted_type = 'task'`, `kanban_status != 'done'`), deren `due_date` in der Vorwarnzeit liegt (`due_date <= now + notifyBeforeMinutes`) und bei denen `alarm_sent == 0` ist. - - Sendet ein JSON-Embed an die in den Benutzer-Einstellungen hinterlegte `discord_webhook_url`: - ```json - { - "username": "MindSift Reminder", - "embeds": [{ - "title": "⏰ Aufgabe fällig: ", - "description": "", - "color": 2450411, - "fields": [ - {"name": "Fällig am", "value": "", "inline": true}, - {"name": "Priorität", "value": "", "inline": true} - ] - }] - } - ``` - - Markiert den Gedanken in SQLite mit `MarkTaskAlarmSent(taskID)` als benachrichtigt. +Der Server-Administrator (`role = 'admin'`) legt unter `AdminSettingsView.tsx` global fest, wie Benutzer miteinander interagieren dürfen: -2. **Eingehende Webhooks / Private API-Tokens:** - - Erreichbar unter `POST /api/v1/inbox` mit Header `X-API-Key: ms_...`. - - Ermöglicht direkte Einbindung in Shell-Skripte, Crons oder Drittsysteme via `curl`. +1. **`strict_private` (Strikt Privat):** + - Jeder Benutzer arbeitet komplett autark. Keine teamübergreifende Benutzersuche, keine geteilten Spaces. +2. **`teams_only` (Teams isoliert — Empfohlener Standard):** + - Benutzer sehen im Adressbuch und bei geteilten Spaces ausschließlich Personen, mit denen sie mindestens in einem gemeinsamen Team sind. +3. **`open` (Offene Instanz):** + - Alle Benutzer können sich gegenseitig sehen, zu Spaces einladen und gemeinsam an Listen arbeiten. --- diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f09118e..493114c 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -10,9 +10,16 @@ import { LogOut, ChevronDown, RotateCcw, + Palette, } from 'lucide-react'; import { AuthStatus, DashboardStats, SharedList, Thought, User } from './lib/types'; import { api, clearToken, getToken, triggerHaptic } from './lib/api'; +import { + AVAILABLE_THEMES, + initThemeOnBoot, + setActiveTheme as applyTheme, + ThemeId, +} from './lib/theme'; import { InstantCaptureBar } from './features/capture/InstantCaptureBar'; import { TriageDeck } from './features/triage/TriageDeck'; import { TasksView } from './features/triage/TasksView'; @@ -51,9 +58,9 @@ class ViewErrorBoundary extends React.Component< render() { if (this.state.hasError) { return ( -
-

Ansicht konnte nicht geladen werden

-

{this.state.errorText}

+
+

Ansicht konnte nicht geladen werden

+

{this.state.errorText}

{showProfileMenu && ( -
+
{/* User Info Header */}
-

{user.displayName}

-

{user.email}

- +

{user.displayName}

+

{user.email}

+ {roleLabel}
+ {/* Theme Quick Switcher */} +
+ + + Design-Theme + +
+ {AVAILABLE_THEMES.map((t) => ( + + ))} +
+
+ {/* Menu Items */}
- {/* Monochrome square tabs attached to header */} + {/* Navigation tabs attached to header */}