feat(theme): implement single-file CSS theming engine with dark, light, high-contrast, and soft themes

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: <Titel>",
-         "description": "<Notizen>",
-         "color": 2450411,
-         "fields": [
-           {"name": "Fällig am", "value": "<Datum>", "inline": true},
-           {"name": "Priorität", "value": "<Prio>", "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.
 
 ---