sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Dev' (#5) from dev into main

Browse Source 
Reviewed-on: #5
This commit was merged in pull request #5.
This commit is contained in:
sandrodach committed 2026-10-26 13:34:59 +01:00
2 parents 0b9046cb7a 3480859d8a
commit fe2cfc2b79
37 files changed
+6352 -1072
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

BRAIN.md
-317
View File
@@ -1,317 +0,0 @@
# 🧠 BRAIN.md — MindSift Internal Dev Cheat Sheet & Architecture Log
> **Zweck:** Zentrales, technisch präzises Nachschlagewerk für Entwicklung, Design-System, Datenbank-Architektur, State-Machines, Backend-APIs und aktuellen Umsetzungsstand. Wird bei jeder Änderung aktuell gehalten.
---
## 📋 0. Aktueller Projektplan & Umsetzungs-Status
### Erledigte Meilensteine
- [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] **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.
- **Direkt-Zuordnung bei der Eingabe:** Über das Auswahl-Menü (`Quick Dump ▾`) in der Eingabeleiste kann ein Eintrag alternativ direkt als **Aufgabe** (`target: 'task'`), direkt auf eine **Geteilte Liste** (`target: 'list_item'`) oder direkt als **Workspace-Notiz** (`target: 'document'`) gespeichert werden.
- **Triage-Entscheidung & Warteschlange:** Im Triage-Deck per Swipe/Klick **Wegwerfen** (`←` / `H`), **Später** (`Leertaste` – ans Ende schieben), **Auf Liste**, **Als Notiz** (`D`), **Mit Termin** (`T`) oder **Als Aufgabe** (`→` / `L`). Inklusive Inline-Textbearbeitung und Warteschlangen-Liste unter der aktiven Karte.
- [x] **Mehrere Aufgabenlisten & Kanban-Board (`TasksView.tsx`, `models.go`, `sqlite.go`):**
- Beliebig viele Aufgabenlisten (z.B. Privat, Arbeit, Homelab) mit eigenem Farb- und Icon-Code.
- Teilen von Aufgabenlisten mit Teams/Spaces.
- Umschalter zwischen kompakter Listenansicht und 3-Spalten-Kanban-Board (`Zu erledigen`, `In Arbeit`, `Erledigt`) mit 1-Klick-Statuswechsel, Fälligkeitsdaten und Notizfeldern.
- [x] **Ersteinrichtung (First-Boot Setup Wizard), Echter Login & Einladungscodes (`SetupAndAuthView.tsx`, `server.go`, `sqlite.go`):**
- Kein hartcodierter Auto-Seed-Benutzer (`admin@mindsift.local` / `"Sandro"`) und kein automatischer `quickStart`-Login mehr beim Seitenaufruf.
- Beim ersten Start (`0` Benutzer in der Datenbank) erkennt `GET /api/v1/auth/status` automatisch `needsSetup: true` und zeigt den **Ersteinrichtungs-Assistenten** (`POST /api/v1/auth/setup`) zum Anlegen des ersten Server-Admin-Kontos und der Instanz-Grundeinstellungen.
- Ö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`) angelegt werden.
- [x] **Profile-Dropdown & Vollbild-Einstellungsseiten (`App.tsx`, `UserSettingsView.tsx`, `GroupsView.tsx`, `AdminSettingsView.tsx`):**
- Klick auf den Benutzer oben rechts öffnet ein eckiges, monochromes Dropdown-Menü:
- **Kontoeinstellungen** (`UserSettingsView.tsx` — Vollbild-Ansicht für Profil & Passwort, Darstellung & Themes, Multi-Channel-Alarme, Private Webhooks & Daten-Export).
- **Gruppen** (`GroupsView.tsx` — für alle Benutzer; Self-Service Erstellung und Verwaltung von Gruppen, Mitgliedern und Rollen).
- **Administration** (`AdminSettingsView.tsx` — nur sichtbar für `admin`; Vollbild-Ansicht für Benutzer, Einladungscodes, Server-Isolation und SMTP-Mailserver).
- **Abmelden** (bereinigt JWT-Token und führt zurück zum Login-Bildschirm).
- Klares Rollensystem: Global `admin` (Server-Admin) und `member` (Standard-Benutzer). Innerhalb von Gruppen: `admin` (Gruppen-Admin) und `member` (Gruppen-Mitglied).
- Layout-Fix im Benutzer-Erstellungsformular (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3` mit `min-w-0`), sodass das Rollen-Dropdown niemals über den Container hinausragt.
- [x] **Multi-Channel-Alarme: E-Mail (SMTP), Discord & Eigener Webhook (`UserSettingsView.tsx`, `AdminSettingsView.tsx`, `server.go`):**
- Tab heißt klar **Alarme** mit frei kombinierbaren Zielen (`alarmChannels`: `'email'`, `'discord'`, `'webhook'`).
- SMTP-Konfiguration (`SMTP_HOST`, `SMTP_PORT`, `SMTP_USER`, `SMTP_PASS`, `SMTP_FROM`, `SMTP_TLS`) sowohl über `docker-compose.yml` Environment-Variablen als auch direkt in der Admin-Oberfläche (`system_settings` in SQLite) einstellbar, inklusive Live-Testversand.
- [x] **Crash-Fix für „Aufgaben" & „Organisationen & Teams" (`sqlite.go`, `api.ts`, `TasksView.tsx`):**
- Alle Go-Storage-Methoden initialisieren Slices strikt mit `make([]T, 0)` statt `var s []T`, damit `json.Marshal` niemals `null` statt `[]` liefert.
- Zusätzliche `ensureArray()`-Normalisierung in `frontend/src/lib/api.ts` sowie `ViewErrorBoundary` in `App.tsx`.
- [x] **Workspace Markdown-Wiki mit Notion-/Word-Toolbar & Disk-Sync (`WorkspaceView.tsx`, `sqlite.go`):**
- Word-/Notion-artige Formatierungsleiste oben (Fett, Kursiv, Durchgestrichen, Code, Links, Überschriften H1-H3, Checklisten, Aufzählungen, Callouts, Markdown-Tabellen, Fortschrittsbalken).
- Interne Wiki-Links (`[[Dokumenttitel]]`) mit Klick-Navigation und Auto-Erkennung.
- Physische Speicherung auf Festplatte unter `/data/workspace/<user_id>/...` als Standard-`.md`-Dateien zur einfachen Daten-Extraktion, synchronisiert mit SQLite.
- [x] **Workspace Logseq Outliner-Engine, Zoom-Hoisting & Drag & Drop (`WorkspaceView.tsx`, `models.go`, `sqlite.go`):**
- Bullet-Point-basiertes hierarchisches Notizensystem inspiriert von Logseq.
- Jeder Block ist ein Bullet-Point (`•`) mit flexibler Einrückungstiefe (`Level: 0, 1, 2...`).
- Schnelle Tastaturnavigation:
- `Enter`: Neuer Bullet-Point auf gleicher Ebene.
- `Tab`: Block dem vorherigen unterordnen (einrücken).
- `Shift+Tab`: Block ausrücken.
- `Shift+Enter`: Weicher Zeilenumbruch innerhalb desselben Blocks.
- `Backspace`: Auf leerem Block rückt aus oder entfernt den Bullet-Point.
- **Zoom-in Hoisting:** Klick auf den Bullet-Dot zoomt tief in diesen Ast hinein (Fokusmodus) mit Breadcrumbs-Navigation (zurückspringen per Klick auf die grauen Breadcrumbs).
- **Drag & Drop:** Bullet-Dots dienen als Anfasser zum Verschieben und Umsortieren von Blöcken und ganzen Unterbäumen.
- **Slash-Commands (`/`):** Schnelle Umwandlung in `/todo`, `/h1`, `/h2`, `/h3`, `/code`, `/table`, `/callout`, `/progress`, `/divider`.
- Physische Speicherung auf Festplatte unter `/data/workspace/<user_id>/...` als Standard-`.md`-Dateien mit portabler 2-Leerzeichen-Einrückung (` - [ ] ` bzw. ` - `), vollständig kompatibel mit externen Outlinern und Markdown-Viewern.
- [x] **Zentrale Hilfeseite & Dokumentation (`HelpView.tsx`, `App.tsx`):**
- Vollständige, übersichtliche Hilfe- und Tastatur-Dokumentation für Outliner, Triage, Aufgaben, geteilte Listen und Tastatur-Shortcuts.
- Direkt erreichbar über das Benutzer-Profil-Menü („Hilfe & Anleitung") sowie den „Hilfe"-Button im Workspace-Header.
- [x] **Workspace UX-Refinements & Datei-Explorer Drag & Drop (`WorkspaceView.tsx`, `sqlite.go`):**
- **Dateien in Ordner ziehen:** Notizen können im Datei-Explorer per Drag & Drop direkt auf beliebige Ordner oder in das Hauptverzeichnis gezogen werden. Das alte Ordner-Dropdown im Menü wurde entfernt.
- **Angepinnte Notizen (Favoriten):** Dokumente mit `isPinned: true` werden direkt ganz oben im Datei-Explorer in einer eigenen Schnellzugriffs-Sektion dargestellt.
- **Bereinigter Editor:** Störende Tasten-Legende unter den Notizen entfernt; klobiger Rahmen um das Notiz-Icon entfernt; Standard-Icon ist der Zettel (`📄`).
- **Breadcrumbs & Zoom:** Überflüssiger „Zoom aufheben"-Button entfernt; alle Breadcrumbs-Elemente inklusive Dokumententitel erscheinen einheitlich dezent in Grau ohne störende Link-Unterstreichung.
- **Globale To-Dos:** Tab- und Bereichs-Titel auf prägnantes „Globale To-Dos" gekürzt, unnötiger Erklärungstext entfernt.
- [x] **Globaler Workspace To-Do Rollup Dashboard (`WorkspaceView.tsx`):**
- Aggregierte Übersicht aller To-Dos (`- [ ] ` / `- [x] `) aus sämtlichen Notiz-Dateien über alle Ordner hinweg.
- Übersichtliche Gruppierung nach Ordner ➔ Dokument ➔ Aufgaben mit einklappbaren Akkordeons und Zähler für offene Aufgaben.
- **Ordner-Drilldown:** Klick auf einen Ordner isoliert nur diesen Zweig für fokussiertes Abarbeiten, inklusive Zurücksetzen-Filter.
- **Live 2-Wege-Sync:** Abhaken oder Aktivieren eines To-Dos im Rollup synchronisiert direkt in Echtzeit zurück in die SQLite-Datenbank und die physische `.md`-Datei auf Festplatte.
- [x] **Aufgabenlisten-Teilen & Avatar-Stack (`TasksView.tsx`, `models.go`, `sqlite.go`):**
- Aufgabenlisten können direkt mit Teams/Spaces geteilt werden.
- Avatar-Stack (farbige Initialen-Bubbles mit Hover-Tooltips) im Header der Liste und in den Tabs visualisiert, wem eine Liste gehört und mit welchen Teammitgliedern sie geteilt ist.
- [x] **Admin-Schalter für öffentliche Selbstregistrierung (`AdminSettingsView.tsx`):**
- Unintuitiver Button in den Admin-Einstellungen unter Server & Isolation durch einen flüssig animierten Schiebeschalter (`rounded-pill`) mit eindeutigen Status-Beschriftungen ersetzt.
- [x] **Cross-Browser & Performance Fixes (Chrome & Firefox):**
- SQLite Connection-Pool Deadlock durch striktes Schließen von `sql.Rows` vor Unterabfragen behoben.
- `Cache-Control: no-store` auf allen API-Routen und `index.html`.
- Optimistisches Leeren des Capture-Inputs und 12-Sekunden-Fetch-Timeout.
---
## 🎨 1. Single-File CSS Theming Engine & Design-System
### 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[data-theme="dein-theme"] {
/* ==========================================================================
1. AKZENTFARBE (Fokus, Primäraktionen, Highlights)
========================================================================== */
--accent: #2563eb;
--accent-hover: #3b82f6;
--accent-dim: rgba(37, 99, 235, 0.15);
--accent-contrast: #ffffff;
/* ==========================================================================
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);
/* ==========================================================================
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;
}
```
### 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`.
---
## 🗄️ 2. Datenbank-Architektur (SQLite Schema & Tabellen)
MindSift speichert alle Daten lokal und hochperformant in SQLite (`/data/mindsift.db`).
### Tabellen-Übersicht
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`, `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'` (`admin`, `member`)
- `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. 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 --> [*]
```
---
## 👥 4. Server-Administration & Isolation Modes
Der Server-Administrator (`role = 'admin'`) legt unter `AdminSettingsView.tsx` global fest, wie Benutzer miteinander interagieren dürfen:
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.
---
## 📝 5. Workspace: Word/Notion-Toolbar, Wiki-Links & Disk-Sync
1. **Formatierungs-Werkzeuge:**
- Markdown-Syntax wird in Echtzeit formatiert und visuell aufbereitet.
- Buttons für H1, H2, H3, Fett (`**`), Kursiv (`*`), Durchgestrichen (`~~`), Code-Blöcke (```` ``` ````), Aufzählungen (`- `), Todos (`- [ ] `), Callouts (`> `), Markdown-Tabellen (`| Spalte 1 | Spalte 2 |`) und Fortschrittsbalken (`[progress:65%]`).
2. **Wiki-Links (`[[Dokumenttitel]]`):**
- Interne Querverweise werden als interaktive Links gerendert.
- Ein Klick auf `[[Dokumenttitel]]` durchsucht die Workspace-Dokumente und öffnet das verlinkte Dokument direkt im Editor.
3. **Physische Speicherung auf Festplatte:**
- Jede Notiz wird zusätzlich zur SQLite-Tabelle als reine `.md`-Datei unter `/data/workspace/<user_id>/<folder_path>/<slug>.md` gespeichert.
- Ermöglicht jederzeitige manuelle Datensicherung, Git-Versionierung oder Backup-Extraktion ohne Datenbank-Abhängigkeit.
---
## 🛡️ 6. Kritische Backend-Regeln (SQLite & HTTP)
1. **NIEMALS verschachtelte Queries bei offenem `sql.Rows`-Cursor ausführen:**
- In [`internal/storage/sqlite.go`](file:///home/sandro/Dokumente/git/MindSift/internal/storage/sqlite.go) muss jede Schleife `for rows.Next()` zuerst alle Zeilen in ein Slice einlesen und sofort `_ = rows.Close()` aufrufen, **bevor** Folgeabfragen (`GetListItems`, `GetSpaceMembers`, `QueryRow` etc.) ausgeführt werden.
2. **SQLite DSN-Pragmas:**
- Jede Verbindung im `sql.DB`-Pool erhält über den DSN automatisch:
`?_pragma=busy_timeout(10000)&_pragma=journal_mode(WAL)&_pragma=synchronous(NORMAL)&_pragma=foreign_keys(1)`
- `MaxOpenConns(8)` und `MaxIdleConns(4)` konfiguriert.
3. **Thread-Safe Default User (`EnsureDefaultUser`):**
- Durch `s.initMu.Lock()` abgesichert, damit parallele Browser-Requests beim ersten Laden niemals in einen `UNIQUE constraint`-Konflikt laufen.
4. **Kein Browser-Caching auf API & `index.html`:**
- `writeJSON` und der SPA-Fallback setzen `Cache-Control: no-store, no-cache, must-revalidate`, damit Chrome und Firefox nach jedem Container-Update sofort den aktuellen Stand zeigen.
---
## 📡 7. WebSocket Realtime Protocol (Geteilte Listen)
Verbindungs-URL: `ws(s)://<host>/api/v1/ws/spaces/:spaceId?token=<jwt>`
### Events
- `ITEM_CREATED` (auch ausgelöst, wenn ein Gedanke per Direkt-Zuordnung oder Triage auf eine Liste geschoben wird)
- `ITEM_TOGGLED`
- `ITEM_DELETED`
- `LIST_CREATED` / `LIST_DELETED` / `LIST_CLEARED`
- `USER_PRESENCE`
---
## ⌨️ 8. Tastatur-Shortcuts (Desktop)
| Taste | Kontext | Aktion |
| :--- | :--- | :--- |
| `C` oder `/` | Überall | Fokus sofort oben in die Quick-Dump-Eingabeleiste |
| `Enter` | Capture-Leiste | Sofort speichern (Quick Dump oder gewähltes Direkt-Ziel) |
| `Esc` | Capture-Leiste | Eingabe leeren & Dropdown schließen |
| `H` oder `←` | Triage-Deck | Aktiven Quick Dump wegwerfen (`discard`) |
| `L` oder `→` | Triage-Deck | Aktiven Quick Dump sofort zur Aufgabe machen (`task`) |
| `T` | Triage-Deck | Datums-Auswahl für Termin-Aufgabe öffnen |
| `D` | Triage-Deck | Aktiven Quick Dump sofort in Workspace-Notiz umwandeln |
| `Leertaste` | Triage-Deck | Karte überspringen („Später" – ans Ende des Stapels schieben) |
| `Enter` | Workspace Outliner | Neuen Bullet-Point auf gleicher Ebene erstellen |
| `Tab` | Workspace Outliner | Bullet-Point einrücken (dem vorherigen unterordnen) |
| `Shift + Tab` | Workspace Outliner | Bullet-Point ausrücken (Ebene verringern) |
| `Shift + Enter` | Workspace Outliner | Weicher Zeilenumbruch innerhalb des aktuellen Blocks |
| `Backspace` | Workspace Outliner | Bei leerem Block: Ebene ausrücken bzw. Bullet löschen |
| `/` | Workspace Outliner | Slash-Command-Menü öffnen (/todo, /h1, /code, etc.) |
---
## 🚀 9. Gitea CI/CD & Docker Workflow
- **Arbeits-Branch:** `dev` (`origin/dev`)
- **Ziel-Image:** `git.dsit.me/sandrodach/mindsift:dev`
- **Build-Prinzip:** Ein einziger Multi-Stage-Build ([`Dockerfile`](file:///home/sandro/Dokumente/git/MindSift/Dockerfile)), der Frontend-Typecheck, Vite-Build und Go-Unit-Tests (`go test -v ./...` inkl. [`internal/api/server_test.go`](file:///home/sandro/Dokumente/git/MindSift/internal/api/server_test.go)) direkt beim Image-Bau ausführt und bei Erfolg sofort pusht.
Doku/README.md
+133
View File
@@ -0,0 +1,133 @@
# 📚 MindSift Technische Dokumentation & Wiki
Willkommen in der zentralen technischen Dokumentation von **MindSift**. Dieses Wiki dient als verbindliche, tiefgehende Referenz für Entwickler, DevOps-Ingenieure und Systemadministratoren. Es dokumentiert die Architektur, das Datenmodell, APIs, Echtzeit-Protokolle, Kernmodule sowie bekannte technische Schwachstellen der Plattform.
---
## 🧭 Inhaltsverzeichnis (Wiki-Navigation)
```
Doku/
├── README.md # Einstieg, Inhaltsverzeichnis & Gesamtübersicht (dieses Dokument)
├── architecture.md # Systemarchitektur, Schichtenmodell, Concurrency & Stack
├── database.md # SQLite-Datenbankdesign, Schemas, Indizes & Migrationen
├── api/
│ ├── rest.md # Vollständige REST-API Referenz aller Endpunkte
│ └── websocket.md # WebSocket-Echtzeitprotokoll, Rooms & Document Locking
├── modules/
│ ├── triage.md # Modul 1: Triage & Quick-Dump (State Machine & Audio)
│ ├── tasks.md # Modul 2: Aufgaben & Kanban-System (Alarme & Scheduler)
│ ├── workspace.md # Modul 3: Workspace Outliner-Engine, Wiki-Links & Disk-Sync
│ └── lists.md # Modul 4: Geteilte Listen (Live-Kollaboration & D&D)
├── sharing-and-permissions.md # Synchrones Teilen, Rollen, Isolation & Mount-Entkopplung
├── theming.md # Single-File CSS Theme-Engine & Design-System
└── flaws.md # Technische Schwachstellen, Risiken & zukünftige Optimierungen
```
### 📑 Kapitel im Detail
1. **[Systemarchitektur & Technologie-Stack](architecture.md)**
Schichtenmodell, Go-Backend, React-Frontend, Concurrency-Handling und Thread-Safety.
2. **[Datenbank-Design & SQLite Schema](database.md)**
Vollständiges relationales Datenmodell, ER-Diagramm, Tabellendefinitionen, Indizes und Migrationsstrategie.
3. **[REST-API Referenz](api/rest.md)**
Spezifikation aller Endpunkte für Authentifizierung, Gedanken, Aufgaben, Dokumente, Listen, Teams und Webhooks.
4. **[WebSocket & Echtzeit-Synchronisation](api/websocket.md)**
Gorilla WebSocket Hub, Rooms, Presence-Tracking, Document Locking Mechanismen und Polling-Fallback.
5. **[Kernmodul: Triage & Quick-Dump](modules/triage.md)**
Instant-Capture-Pipeline, Finite State Machine, Gestensteuerung, Spracheingabe und Webhook-Ingestion.
6. **[Kernmodul: Aufgaben & Kanban-System](modules/tasks.md)**
Multi-Listen-Konzept, 3-Spalten Kanban-Board, Subtasks, Fälligkeiten und Multi-Channel Alarm-Ticker (SMTP, Discord, Webhooks).
7. **[Kernmodul: Workspace & Outliner-Engine](modules/workspace.md)**
Logseq-inspirierte hierarchische Block-Engine, Zoom-Hoisting, Wiki-Links, Disk-Mirroring (`.md`) und Globales To-Do Rollup.
8. **[Kernmodul: Geteilte Listen & Kollaboration](modules/lists.md)**
Listen-Typen, Mengen, Kategorien, Live-Checkoff und Drag & Drop Sortierung.
9. **[Synchrones Teilen & Berechtigungskonzept](sharing-and-permissions.md)**
Rollenmodell (Admin/Member), System-Isolations-Modi (`strict_private`, `teams_only`, `open`), entkoppelte Ordner-Mounts und Notizen-Freigaben.
10. **[Single-File Theming & Design-System](theming.md)**
1-Datei = 1-Theme Philosophie, die 6 CSS-Variablen-Blöcke, Semantische CSS-Klassen und Geometrie-Steuerung.
11. **[Technische Schwachstellen & Optimierungspotenziale (Flaws)](flaws.md)**
Kritische Analyse von Concurrency-Grenzen, Dual-Storage-Risiken, Undo/Redo, Volltextsuche und Skalierungs-Engpässen.
---
## 🏛️ Systemübersicht (High-Level Architektur)
```mermaid
graph TB
subgraph Client ["Client Layer (Browser / PWA)"]
UI["React 18 SPA (Vite, TS, Tailwind)"]
WSClient["WebSocket Client (Auto-Reconnect)"]
Cache["IndexedDB / Offline Queue"]
end
subgraph ReverseProxy ["Reverse Proxy / Gateway"]
Traefik["Traefik / Nginx (HTTPS, WSS, Rate Limits)"]
end
subgraph Backend ["Backend Layer (Go 1.23 Engine)"]
ChiRouter["Chi Router (REST API)"]
WSHub["Gorilla WebSocket Hub & Lock Manager"]
AlarmTicker["Alarm Scheduler (Background Ticker)"]
DiskSync["Disk Mirror Engine (/data/workspace)"]
end
subgraph Storage ["Storage Layer"]
SQLite[("SQLite WAL Database (/data/mindsift.db)")]
DiskFiles[("Physische Markdown Files (/data/workspace)")]
end
subgraph External ["Externe Schnittstellen"]
HomeAssistant["Home Assistant / Webhooks"]
Discord["Discord Webhooks"]
SMTPServer["SMTP Server (E-Mail Alarme)"]
end
UI -->|HTTPS REST| Traefik
WSClient -->|WSS Realtime| Traefik
Traefik --> ChiRouter
Traefik --> WSHub
ChiRouter --> SQLite
ChiRouter --> DiskSync
DiskSync --> DiskFiles
AlarmTicker --> Discord
AlarmTicker --> SMTPServer
HomeAssistant -->|POST /api/v1/inbox| Traefik
HomeAssistant -->|POST /api/v1/webhooks/ingest| Traefik
```
---
## 🛠️ Schnellstart für Entwickler
### Voraussetzungen
- **Go:** 1.22 oder 1.23+
- **Node.js:** 20+ (LTS) & npm
- **Container-Runtime:** Docker oder Podman
### Lokale Entwicklung ohne Container
```bash
# 1. Repository klonen
git clone https://git.dsit.me/sandrodach/MindSift.git
cd MindSift
# 2. Frontend Abhängigkeiten installieren & Dev-Server starten
cd frontend
npm install
npm run dev
# 3. Backend starten (in neuem Terminal)
cd ..
go run ./cmd/server
```
### Container Build & Testlauf (wie in der CI/CD)
```bash
# Backend-Tests ausführen
podman run --rm -v $(pwd):/app:z -w /app golang:1.23 go test -v ./internal/...
# Frontend Typecheck & Build testen
podman run --rm -v $(pwd):/app:z -w /app/frontend node:20 sh -c "npx tsc --noEmit && npm run build"
# Komplettes Multi-Stage Image bauen
podman build -t mindsift:dev .
```
Doku/api/rest.md
+185
View File
@@ -0,0 +1,185 @@
# 🔌 REST-API Referenz
Die MindSift REST-API ermöglicht den vollständigen Zugriff auf Gedanken, Aufgaben, Workspace-Notizen, Listen, Benutzerkonten und Smarthome-Automationen.
---
## 🔐 1. Authentifizierung
MindSift unterstützt zwei Authentifizierungsmethoden:
1. **JSON Web Token (JWT Bearer):**
Wird beim Login oder Setup erzeugt und im HTTP-Header mitgesendet:
`Authorization: Bearer <jwt-token>`
2. **Persönliche API-Schlüssel (Smarthome / Automatisierung):**
Werden unter *Einstellungen ➔ Private Webhooks* erzeugt (Präfix `mindsift_sec_...`):
- Per HTTP-Header: `X-API-Key: mindsift_sec_xxxxxxxxxxxx`
- Per Authorization-Header: `Authorization: Bearer mindsift_sec_xxxxxxxxxxxx`
- Per Query-Parameter: `?token=mindsift_sec_xxxxxxxxxxxx`
---
## 🚦 2. Status- & Fehler-Codes
- `200 OK`: Erfolgreiche Abfrage oder Aktualisierung.
- `201 Created`: Ressource erfolgreich angelegt.
- `400 Bad Request`: Ungültiges JSON oder fehlende Pflichtfelder.
- `401 Unauthorized`: Token ungültig, abgelaufen oder fehlend.
- `403 Forbidden`: Unzureichende Berechtigungen (z.B. nur Server-Admin oder nur Lesezugriff).
- `404 Not Found`: Ressource existiert nicht oder gehört einem anderen Benutzer.
- `409 Conflict`: Ressource gesperrt (z.B. Dokument wird bereits von anderem Benutzer bearbeitet).
Fehlerrückgaben erfolgen im einheitlichen Format:
```json
{
"error": "Fehlermeldung im Klartext"
}
```
---
## 📋 3. Endpunkte nach Modulen
### 3.1 Authentifizierung & System-Status
| Methode | Pfad | Auth | Beschreibung |
| :--- | :--- | :--- | :--- |
| `GET` | `/api/v1/health` | Öffentlich | Liveness-Check (`{"status":"ok"}`) |
| `GET` | `/api/v1/auth/status` | Öffentlich | Prüft ob Ersteinrichtung nötig ist (`needsSetup: true/false`) |
| `POST` | `/api/v1/auth/setup` | Öffentlich | Führt First-Boot Setup durch (legt ersten Admin an) |
| `POST` | `/api/v1/auth/register` | Öffentlich | Registrierung über Einladungscode (`inviteCode`) |
| `POST` | `/api/v1/auth/login` | Öffentlich | Login via E-Mail oder Benutzername + Passwort |
| `GET` | `/api/v1/auth/me` | JWT | Gibt das aktuelle Benutzerprofil zurück |
| `PATCH` | `/api/v1/auth/settings` | JWT | Aktualisiert Profil, Passwort, Theme oder Alarm-Kanäle |
| `POST` | `/api/v1/auth/alarms/test` | JWT | Sendet Test-Alarm an E-Mail, Discord oder Custom Webhook |
#### Beispiel: `POST /api/v1/auth/login`
```json
// Request
{
"login": "sandro",
"password": "geheimesPasswort123"
}
// Response (200 OK)
{
"token": "eyJhbGciOiJIUzI1NiIs...",
"user": {
"id": "usr_abc123",
"email": "sandro@example.com",
"username": "sandro",
"displayName": "Sandro",
"role": "admin",
"alarmChannels": ["discord", "webhook"]
}
}
```
---
### 3.2 Triage & Instant Capture
| Methode | Pfad | Auth | Beschreibung |
| :--- | :--- | :--- | :--- |
| `POST` | `/api/v1/inbox` | JWT / API-Key | Erfasst einen neuen Quick Dump oder leitet direkt weiter |
| `GET` | `/api/v1/triage/deck` | JWT | Liefert den Stapel aller noch nicht triagierten Gedanken (`status: 'inbox'`) |
| `PATCH` | `/api/v1/triage/{id}` | JWT | Führt Triage-Aktion aus (`keep`, `discard`, `restore`) |
#### Beispiel: `POST /api/v1/inbox`
Ermöglicht flexible Direkt-Zuordnungen:
```json
// Request (Quick Dump in Triage-Deck)
{
"content": "Kellerfeuchtigkeit über 68% gestiegen #smarthome #alarm",
"priority": "urgent"
}
// Request (Direkt als Aufgabe anlegen)
{
"content": "Server Backup prüfen #devops",
"priority": "high",
"target": "task",
"dueDate": "2026-10-30"
}
```
*Hinweis:* Wenn `/api/v1/inbox` über einen API-Key aufgerufen wird und kein `source` definiert ist, wird die Quelle automatisch als `"webhook"` markiert!
---
### 3.3 Aufgaben & Kanban-System
| Methode | Pfad | Auth | Beschreibung |
| :--- | :--- | :--- | :--- |
| `GET` | `/api/v1/tasks` | JWT | Liefert alle Aufgaben des Benutzers (inkl. geteilter Aufgaben) |
| `POST` | `/api/v1/tasks/reorder` | JWT | Speichert Kanban-Status und Reihenfolge (`sort_order`) |
| `GET` | `/api/v1/task-lists` | JWT | Liefert alle Aufgabenlisten (eigene & geteilte) |
| `POST` | `/api/v1/task-lists` | JWT | Erstellt eine neue Aufgabenliste (mit Farbe & Spalten) |
| `PUT` | `/api/v1/task-lists/{id}` | JWT | Ändert Titel, Farbe, Icon oder Kanban-Spalten |
| `DELETE` | `/api/v1/task-lists/{id}` | JWT | Löscht Aufgabenliste |
| `POST` | `/api/v1/task-lists/{id}/shares` | JWT | Teilt Liste mit Team oder Benutzer |
---
### 3.4 Workspace & Dokumente
| Methode | Pfad | Auth | Beschreibung |
| :--- | :--- | :--- | :--- |
| `GET` | `/api/v1/documents` | JWT | Liefert Liste aller Dokumente des Benutzers (Metadaten) |
| `POST` | `/api/v1/documents` | JWT | Erstellt neues Notiz-Dokument (mit Blocks oder Markdown) |
| `GET` | `/api/v1/documents/{id}` | JWT | Lädt komplettes Dokument inklusive aller Blöcke |
| `PUT` | `/api/v1/documents/{id}` | JWT | Aktualisiert Dokumenttitel, Icon oder Ordnerpfad |
| `PATCH` | `/api/v1/documents/{id}/blocks` | JWT | Granulares Patching von Dokument-Blöcken (Database-First) |
| `DELETE` | `/api/v1/documents/{id}` | JWT | Löscht Dokument (Datenbank & physische Datei) |
| `POST` | `/api/v1/documents/{id}/shares` | JWT | Notiz mit anderem Benutzer teilen (`read` / `write`) |
| `GET` | `/api/v1/documents/{id}/lock` | JWT | Fragt Bearbeitungs-Sperrstatus ab |
| `POST` | `/api/v1/documents/{id}/lock` | JWT | Sperrt Dokument für Bearbeitung (30s Lease) |
| `DELETE` | `/api/v1/documents/{id}/lock` | JWT | Gibt Bearbeitungssperre wieder frei |
---
### 3.5 Workspace Ordner & Geteilte Ordner
| Methode | Pfad | Auth | Beschreibung |
| :--- | :--- | :--- | :--- |
| `GET` | `/api/v1/folders` | JWT | Liefert alle Ordnerpfade des Benutzers |
| `POST` | `/api/v1/folders` | JWT | Legt neuen (auch leeren) Ordner an |
| `POST` | `/api/v1/folders/move` | JWT | Benennt Ordner um oder verschiebt ihn hierarchisch |
| `DELETE` | `/api/v1/folders` | JWT | Löscht Ordner und verschiebt Notizen |
| `GET` | `/api/v1/workspace/folders/shared` | JWT | Liefert für den Benutzer freigegebene geteilte Ordner |
| `POST` | `/api/v1/workspace/folders/shared` | JWT | Erstellt neuen geteilten Ordner |
| `PUT` | `/api/v1/workspace/folders/shared/{id}/mount` | JWT | Ändert den lokalen Einhängepfad beim Empfänger |
| `POST` | `/api/v1/workspace/folders/shared/{id}/shares` | JWT | Gibt Ordner für Teams oder Benutzer frei |
---
### 3.6 Geteilte Listen (Listen & Einkauf)
| Methode | Pfad | Auth | Beschreibung |
| :--- | :--- | :--- | :--- |
| `GET` | `/api/v1/lists` | JWT | Liefert alle geteilten Listen |
| `POST` | `/api/v1/lists` | JWT | Erstellt neue geteilte Liste |
| `GET` | `/api/v1/lists/{id}` | JWT | Lädt Liste inklusive aller Einträge |
| `POST` | `/api/v1/lists/{id}/items` | JWT | Fügt Eintrag hinzu |
| `PATCH` | `/api/v1/lists/{id}/items/{itemId}` | JWT | Hakt Eintrag ab (`isCompleted: true/false`) |
| `POST` | `/api/v1/lists/{id}/items/reorder` | JWT | Speichert sortierte Einträge |
| `POST` | `/api/v1/lists/{id}/clear-completed`| JWT | Löscht alle abgehakten Einträge |
| `POST` | `/api/v1/lists/{id}/shares` | JWT | Teilt Liste mit Team oder Benutzer |
---
### 3.7 Smarthome Ingestion & Externe Webhooks
| Methode | Pfad | Auth | Beschreibung |
| :--- | :--- | :--- | :--- |
| `POST` | `/api/v1/webhooks/ingest` | Token / Key | Empfängt externe Webhook-Payloads von Home Assistant / n8n |
#### Beispiel: `POST /api/v1/webhooks/ingest?token=mindsift_sec_...`
Unterstützt flexible Payloads (JSON oder Plain Text):
```json
{
"title": "Waschmaschine Keller fertig",
"priority": "high",
"tags": ["smarthome", "keller"]
}
```
*Live-Aktualisierung:* Sendet automatisch ein `TASK_CREATED` WebSocket-Event an alle Clients des Benutzers, sodass die neue Karte sofort ohne Neuladen im Triage-Deck erscheint!
Doku/api/websocket.md
+113
View File
@@ -0,0 +1,113 @@
# 📡 WebSocket & Echtzeit-Synchronisation
MindSift implementiert eine bidirektionale Echtzeit-Synchronisationsschicht auf Basis von WebSockets ([`internal/ws/hub.go`](../../internal/ws/hub.go)). Sie sorgt dafür, dass Änderungen an Aufgaben, Triage-Karten, Notizen und geteilten Einkaufslisten ohne manuelles Neuladen sofort auf allen geöffneten Geräten und bei allen Kollaborationspartnern sichtbar werden.
---
## 🔌 1. Verbindung & Handshake
### Verbindungs-Endpunkte
```
wss://<domain>/api/v1/ws?token=<jwt-token>
wss://<domain>/api/v1/ws/lists/<listId>?token=<jwt-token>
```
### Authentifizierung & Upgrade
- Die Authentifizierung erfolgt über das JWT-Token im Query-Parameter `?token=...` oder den `Authorization: Bearer`-Header während des HTTP-Upgrade-Requests.
- Der Server extrahiert die `userID` und registriert die Verbindung im internen `Hub`.
- Der `Upgrader` akzeptiert alle Origins (`CheckOrigin: return true`), um volle Kompatibilität mit Reverse-Proxies (Traefik, Nginx, Caddy, Cloudflare) und Docker-Netzwerken zu gewährleisten.
---
## 🏛️ 2. Hub-Architektur & Rooms
Der WebSocket-Hub unterteilt Verbindungen in drei Abstraktionsebenen:
```
┌─────────────────────────────────────────────────────────────────┐
│ WebSocket Hub │
├─────────────────┬─────────────────────────────┬─────────────────┤
│ allClients │ userRooms │ rooms │
│ (Alle aktiven │ (Pro Benutzer-ID) │ (Pro Liste/ │
│ Verbindungen) │ Cross-Device Sync für │ Space) │
│ │ Tasks, Triage & Workspace │ Geteilte Liste │
└────────┬────────┴──────────────┬──────────────┴────────┬────────┘
▼ ▼ ▼
Presence Stats TASK_CREATED ITEM_TOGGLED
DOC_LOCKED TASK_UPDATED ITEM_CREATED
DOC_UNLOCKED DOC_UPDATED LIST_UPDATED
```
1. **`allClients` (Global):** Hält jede aktive Client-Verbindung. Ermöglicht Broadcasts systemweiter Ereignisse (z.B. globale Dokument-Sperrungen).
2. **`userRooms[userID]` (Benutzer-Räume):** Sendet Events an alle Geräte desselben Benutzers (z.B. Desktop und Smartphone). Erzeugt ein Webhook oder Quick Dump auf dem Smartphone einen Eintrag, taucht dieser zeitgleich auf dem Desktop auf.
3. **`rooms[listID]` (Kollaborations-Räume):** Multiplexing für geteilte Listen. Alle Mitglieder einer Liste empfangen Aktionen (wie Abhaken, Löschen, Umsortieren) in Echtzeit.
---
## 📨 3. Nachrichten-Format (Envelope)
Alle WebSocket-Nachrichten werden als JSON mit einheitlicher Hülle übertragen:
```json
{
"event": "ITEM_TOGGLED",
"listId": "lst_12345",
"payload": {
"itemId": "itm_987",
"isCompleted": true,
"completedBy": "usr_sandro",
"completedByName": "Sandro"
},
"timestamp": "2026-10-26T13:30:00Z"
}
```
---
## 🔒 4. Dokument-Sperrsystem (Document Locking)
Um Schreibkonflikte bei Notizen im Workspace zu vermeiden, verwendet MindSift ein **serverseitiges Lease-Locking mit Heartbeat**:
```mermaid
sequenceDiagram
autonumber
actor UserA as Benutzer A
participant WS as WebSocket Hub
actor UserB as Benutzer B
UserA->>WS: LOCK_DOC (docId: "doc_123")
WS-->>UserA: Lock bestätigt (30s TTL)
WS->>UserB: DOC_LOCKED (docId: "doc_123", lockedBy: "Benutzer A")
Note over UserB: Editor gesperrt (Schreibschutz aktiv)
loop Alle 15 Sekunden
UserA->>WS: HEARTBEAT_DOC (docId: "doc_123")
WS-->>UserA: TTL um 30s verlängert
end
alt Reguläres Schließen
UserA->>WS: UNLOCK_DOC (docId: "doc_123")
WS->>UserB: DOC_UNLOCKED (docId: "doc_123")
Note over UserB: Editor wieder freigegeben
else Verbindungsabbruch / Tab geschlossen
Note over WS: Heartbeat bleibt aus (TTL läuft ab)
WS->>UserB: DOC_UNLOCKED (Automatisch nach Ablauf)
end
```
### Locking-Events
- **`LOCK_DOC` (Client ➔ Server):** Fordert eine 30-Sekunden-Sperre für ein Dokument an.
- **`HEARTBEAT_DOC` (Client ➔ Server):** Verlängert die Sperre alle 15 Sekunden, solange der Benutzer das Dokument geöffnet hat.
- **`UNLOCK_DOC` (Client ➔ Server):** Gibt die Sperre beim Verlassen des Dokuments frei.
- **`DOC_LOCKED` (Server ➔ Clients):** Informiert andere Benutzer, dass das Dokument schreibgeschützt ist.
- **`DOC_UNLOCKED` (Server ➔ Clients):** Hebt den Schreibschutz auf.
---
## 🔄 5. Fallback-Strategie & Reconnect
In strikten Firmennetzwerken oder bei Proxy-Problemen (z.B. fehlende `Upgrade`-Header bei HTTP/1.1) kann eine WebSocket-Verbindung fehlschlagen:
1. **Exponentielles Backoff:** Das Frontend ([`frontend/src/lib/api.ts`](../../frontend/src/lib/api.ts)) versucht automatisch die Wiederverbindung nach 1s, 2s, 4s, 8s, bis maximal 30s.
2. **HTTP-Polling Fallback:** Geteilte Listen und Notizen aktivieren im Hintergrund ein periodisches Polling (5s Intervall), falls der WebSocket-Status nicht `CONNECTED` ist.
3. **Status-Indikator:** Ein dezenter grüner bzw. gelber Indikator oben rechts im Header zeigt dem Benutzer jederzeit den aktuellen Live-Verbindungsstatus an.
Doku/architecture.md
+142
View File
@@ -0,0 +1,142 @@
# 🏛️ Systemarchitektur & Technologie-Stack
Dieses Dokument beschreibt die interne Architektur von MindSift, die Interaktion zwischen den Systemkomponenten, das Concurrency- und Thread-Safety-Modell sowie die Deployment-Strategie.
---
## 🧩 1. Schichten-Architektur
MindSift ist als monolithische, hochperformante Single-Binary-Lösung konzipiert. Das Go-Backend liefert sowohl die REST- und WebSocket-Schnittstellen aus als auch die vorkompilierte React Single Page Application (SPA) als eingebettetes statisches Dateisystem (`embed.FS`).
```
┌────────────────────────────────────────────────────────┐
│ Frontend (React 18) │
│ Vite • TypeScript • Tailwind CSS • Lucide • Motion │
└───────────────────────────┬────────────────────────────┘
│ HTTPS REST / WSS WebSocket
┌───────────────────────────▼────────────────────────────┐
│ Go Chi Routing Layer │
│ CORS • RealIP • Recoverer • Auth / Role Guard │
├───────────────────────────┬────────────────────────────┤
│ Business Engine │ Gorilla WebSocket │
│ Triage • Tasks • Alarms │ Rooms • Hub • Doc-Locking │
├───────────────────────────┴────────────────────────────┤
│ Storage Abstraction │
│ sqlite.go (modernc.org/sqlite pure Go, WAL-Mode) │
└───────────────────────────┬────────────────────────────┘
│
┌─────────────┴─────────────┐
▼ ▼
/data/mindsift.db /data/workspace/
(SQLite Datenbank) (Physische .md Dateien)
```
---
## 🛠️ 2. Technologie-Stack
### Backend (Go 1.23)
- **HTTP Routing:** [`github.com/go-chi/chi/v5`](https://github.com/go-chi/chi) – Minimalistischer, idiomatisch schneller Router mit Middleware-Ketten.
- **WebSocket Hub:** [`github.com/gorilla/websocket`](https://github.com/gorilla/websocket) – Verbindungs-Upgrade, Keep-Alive/Ping-Pong und Room-Multiplexing.
- **Datenbank-Treiber:** [`modernc.org/sqlite`](https://gitlab.com/cznic/sqlite) – CGO-freier, rein in Go übersetzter SQLite-Treiber für einfache plattformübergreifende Kompilierung und Containerisierung ohne GCC-Toolchain.
- **Authentifizierung:** [`github.com/golang-jwt/jwt/v5`](https://github.com/golang-jwt/jwt) (HMAC-SHA256 Token) und [`golang.org/x/crypto/bcrypt`](https://pkg.go.dev/golang.org/x/crypto/bcrypt) für Passwort-Hashing.
### Frontend (React 18 SPA)
- **Build-Tool:** [Vite 5](https://vitejs.dev/) für schnelles Hot-Module-Replacement (HMR) und optimierte Production-Bundles.
- **Sprache:** TypeScript 5 mit strikter Typisierung.
- **Design & Layout:** [Tailwind CSS 3](https://tailwindcss.com/) in Verbindung mit dem MindSift Single-File CSS Theming System.
- **Icons & Animationen:** [Lucide React](https://lucide.dev/) und [Framer Motion](https://www.framer.com/motion/) für Gesten, Karten-Swipes und Übergänge.
---
## 📁 3. Verzeichnisstruktur des Projekts
```
MindSift/
├── cmd/
│ └── server/
│ └── main.go # Einstiegspunkt: Initialisierung, Config, Store, Start
├── internal/
│ ├── api/
│ │ ├── server.go # HTTP-Routen, Handler-Methoden, Middleware
│ │ └── server_test.go # Integrationstests für alle REST- und Ingest-Routen
│ ├── auth/
│ │ ├── auth.go # JWT Validierung, Token-Erstellung, Context-Helpers
│ │ └── apikey.go # API-Key Erzeugung (mindsift_sec_...) & SHA-256 Hashing
│ ├── config/
│ │ └── config.go # Environment-Variablen (PORT, DATA_DIR, JWT_SECRET, SMTP)
│ ├── domain/
│ │ └── models.go # Go-Structs für Thought, Document, List, User, Team etc.
│ ├── storage/
│ │ ├── sqlite.go # DB-Schema, CRUD-Operationen, Queries, Migrationen
│ │ └── storage_test.go # Unit-Tests für Speicheroperationen
│ └── ws/
│ └── hub.go # WebSocket Client, Room-Management, Locking-Mechanismus
├── frontend/
│ ├── src/
│ │ ├── components/ # Wiederverwendbare UI-Elemente (Modals, Avatar, Menüs)
│ │ ├── context/ # MobileActionContext (Mobile Bottom Bar State)
│ │ ├── features/
│ │ │ ├── auth/ # SetupWizard & Login
│ │ │ ├── capture/ # InstantCaptureBar (Schnelleingabe)
│ │ │ ├── help/ # Integrierte Benutzerdokumentation
│ │ │ ├── lists/ # Geteilte Listen & Einkauf
│ │ │ ├── settings/ # Benutzer-, Admin- & Theme-Einstellungen
│ │ │ ├── teams/ # Gruppen & Mitglieder-Management
│ │ │ ├── triage/ # Triage-Deck, Aufgabenliste, Kanban & TaskModal
│ │ │ └── workspace/ # Outliner-Editor, Datei-Explorer, Wiki & Rollup
│ │ ├── lib/ # api.ts (HTTP/WS Client), types.ts, theme.ts
│ │ ├── themes/ # Eigenständige Theme CSS-Dateien (dark, light, etc.)
│ │ ├── App.tsx # Root-Komponente, Navigation, Top/Bottom Bars
│ │ └── main.tsx # React DOM Bootstrap
│ ├── package.json
│ └── vite.config.ts
├── Doku/ # Dieses technische Wiki
├── Dockerfile # Multi-Stage Build Definition
└── compose.yaml # Docker Compose Vorlage für Produktivbetrieb
```
---
## ⚡ 4. Thread-Safety & Concurrency-Modell
Da SQLite Datei-basiert arbeitet und Go standardmäßig hochgradig nebenläufig (Multi-Threaded via Goroutines) operiert, sind folgende Schutzmaßnahmen implementiert:
### 1. SQLite Pragmas & WAL-Modus
Im Storage-Layer ([`internal/storage/sqlite.go`](../internal/storage/sqlite.go)) wird die Datenbankverbindung beim Start zwingend mit folgenden DSN-Pragmas konfiguriert:
```go
dsn := filepath.Join(dataDir, "mindsift.db") +
"?_pragma=busy_timeout(10000)&" +
"_pragma=journal_mode(WAL)&" +
"_pragma=synchronous(NORMAL)&" +
"_pragma=foreign_keys(1)"
```
- **`journal_mode(WAL)`:** Write-Ahead Logging erlaubt parallele Leser (`SELECT`), während ein Schreiber (`INSERT`/`UPDATE`) aktiv ist. Leser blockieren niemals Schreiber und Schreiber blockieren niemals Leser.
- **`busy_timeout(10000)`:** Sollte ein Schreibvorgang kurzzeitig blockiert sein, wartet SQLite bis zu 10.000 ms (10 Sekunden), bevor ein `SQLITE_BUSY` Fehler geworfen wird.
- **`foreign_keys(1)`:** Erzwingt referenzielle Integrität und automatische Kaskadierungs-Löschungen (`ON DELETE CASCADE`).
### 2. Connection Pool Begrenzung
SQLite unterstützt nur einen einzigen Schreib-Thread zur gleichen Zeit:
```go
db.SetMaxOpenConns(8)
db.SetMaxIdleConns(4)
db.SetConnMaxLifetime(time.Hour)
```
### 3. Cursor-Deadlock-Vermeidung
> **Kritische Backend-Regel:** Niemals verschachtelte Abfragen bei offenem `*sql.Rows`-Cursor ausführen!
In Go hält ein offener Cursor eine Verbindung aus dem Pool besetzt. Führt der Code innerhalb von `for rows.Next()` eine weitere Abfrage auf `s.db` aus, kann der Connection-Pool bei mehreren parallelen Benutzern innerhalb von Millisekunden einfrieren.
*Pattern:* Alle Zeilen werden sofort vollständig in ein Go-Slice gelesen, `rows.Close()` wird ausgeführt, und erst danach werden verknüpfte Entitäten geladen.
---
## 🌐 5. Deployment & Container-Architektur
MindSift wird als schlanker, autarker Docker-Container ausgeliefert:
1. **Stage 1 (Frontend Build):** `node:20-alpine` kompiliert TypeScript und generiert statische Assets nach `frontend/dist/`.
2. **Stage 2 (Backend Build):** `golang:1.23-alpine` bettet `frontend/dist/` via `//go:embed` ein, führt Unit-Tests aus und kompiliert ein statisches Binary (`mindsift-server`).
3. **Stage 3 (Production Runtime):** `alpine:3.20` mit `ca-certificates` und `tzdata`. Das finale Image ist ca. 45 MB groß und benötigt keine externen Datenbankserver oder Abhängigkeiten.
Alle persistenten Daten befinden sich in einem einzigen Verzeichnis `/data`:
- `/data/mindsift.db` (SQLite Hauptdatenbank)
- `/data/workspace/` (Physische Markdown-Dateien der Workspace-Notizen)
Doku/database.md
+348
View File
@@ -0,0 +1,348 @@
# 🗄️ Datenbank-Design & SQLite Schema
MindSift verwendet als persistente Datenspeicherung eine lokale SQLite-Datenbank (`/data/mindsift.db`). Dieses Dokument beschreibt das relationale Datenmodell, Tabellenstrukturen, Indizes, Fremdschlüsselbeziehungen und das Migrationskonzept.
---
## 📊 1. Entity-Relationship-Diagramm (ERD)
```mermaid
erDiagram
users ||--o{ thoughts : "erstellt"
users ||--o{ documents : "besitzt"
users ||--o{ lists : "besitzt"
users ||--o{ task_lists : "besitzt"
users ||--o{ api_keys : "besitzt"
users ||--o{ team_members : "ist Mitglied in"
teams ||--o{ team_members : "besteht aus"
teams ||--o{ task_list_shares : "erhält Zugriff"
teams ||--o{ list_shares : "erhält Zugriff"
teams ||--o{ doc_team_shares : "erhält Zugriff"
teams ||--o{ workspace_folder_shares : "erhält Zugriff"
task_lists ||--o{ thoughts : "gruppiert"
task_lists ||--o{ task_list_shares : "wird geteilt mit"
lists ||--o{ list_items : "enthält"
lists ||--o{ list_shares : "wird geteilt mit"
documents ||--o{ document_blocks : "besteht aus"
documents ||--o{ doc_shares : "geteilt mit Benutzern"
documents ||--o{ doc_team_shares : "geteilt mit Teams"
documents ||--o{ doc_user_folders : "eigene Platzierung"
documents ||--o{ doc_pins : "Favorit von"
workspace_shared_folders ||--o{ workspace_folder_shares : "wird geteilt mit"
workspace_shared_folders ||--o{ workspace_folder_mounts : "eingehängt bei"
workspace_shared_folders ||--o{ documents : "enthält"
```
---
## 📑 2. Detaillierte Tabellen-Spezifikation
### 2.1 Benutzerverwaltung, System & Sicherheit
#### `users`
Verwaltet Konten, Rollen, Multi-Channel Alarmziele und Benutzerpräferenzen.
```sql
CREATE TABLE IF NOT EXISTS users (
id TEXT PRIMARY KEY, -- Präfix "usr_..."
email TEXT UNIQUE NOT NULL, -- E-Mail-Adresse
username TEXT NOT NULL DEFAULT '', -- Eindeutiger Login-Name
password_hash TEXT NOT NULL, -- bcrypt Hash
display_name TEXT NOT NULL, -- Anzeigename
avatar_url TEXT NOT NULL DEFAULT '', -- Profilbild URL oder leer
role TEXT NOT NULL DEFAULT 'member', -- 'admin' | 'member'
is_active INTEGER NOT NULL DEFAULT 1, -- 1 = aktiv, 0 = gesperrt
alarm_channels TEXT NOT NULL DEFAULT 'discord', -- Kommagetrennt: 'email', 'discord', 'webhook'
alarm_email TEXT NOT NULL DEFAULT '', -- Ziel-E-Mail für Alarme
discord_webhook_url TEXT NOT NULL DEFAULT '', -- Discord Webhook URL
custom_webhook_url TEXT NOT NULL DEFAULT '', -- HTTP POST JSON Webhook URL
notify_before_minutes INTEGER NOT NULL DEFAULT 30, -- Vorwarnzeit in Minuten
created_at TEXT NOT NULL, -- ISO 8601 String
updated_at TEXT NOT NULL
);
CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
```
#### `system_settings`
Globale Instanz-Konfiguration (Key-Value-Tabelle).
```sql
CREATE TABLE IF NOT EXISTS system_settings (
key TEXT PRIMARY KEY, -- 'sharing_mode', 'allow_registration', 'instance_name', 'smtp_...'
value TEXT NOT NULL
);
```
#### `user_invites`
Einladungscodes für kontrollierte Benutzer-Registrierungen.
```sql
CREATE TABLE IF NOT EXISTS user_invites (
id TEXT PRIMARY KEY, -- Präfix "inv_..."
code TEXT UNIQUE NOT NULL, -- Format "MS-XXXXXXXX"
email TEXT DEFAULT '', -- Optional: an bestimmte E-Mail gebunden
role TEXT NOT NULL DEFAULT 'member', -- Rolle des neuen Kontos ('member', 'admin')
created_by TEXT NOT NULL, -- Ersteller User-ID
used_by TEXT DEFAULT '', -- Eingelöste User-ID
expires_at TEXT NOT NULL, -- Gültig bis (ISO 8601)
created_at TEXT NOT NULL
);
CREATE INDEX IF NOT EXISTS idx_user_invites_code ON user_invites(code);
```
#### `api_keys`
Persönliche API-Schlüssel für externe Skripte, Smarthome und Ingestion.
```sql
CREATE TABLE IF NOT EXISTS api_keys (
id TEXT PRIMARY KEY, -- Präfix "key_..."
user_id TEXT NOT NULL,
name TEXT NOT NULL, -- Bezeichnung (z.B. "Home Assistant")
key_prefix TEXT NOT NULL, -- Erste 12 Zeichen im Klartext für Anzeige
key_hash TEXT UNIQUE NOT NULL, -- SHA-256 Hash des kompletten Schlüssels
scopes TEXT NOT NULL DEFAULT 'ingest,read',
last_used_at TEXT NOT NULL DEFAULT '',
created_at TEXT NOT NULL,
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
```
---
### 2.2 Gruppen & Organisations-Teams
#### `organizations` & `teams` & `team_members`
```sql
CREATE TABLE IF NOT EXISTS organizations (
id TEXT PRIMARY KEY, -- Präfix "org_..."
name TEXT NOT NULL,
owner_id TEXT NOT NULL,
created_at TEXT NOT NULL,
FOREIGN KEY(owner_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE TABLE IF NOT EXISTS teams (
id TEXT PRIMARY KEY, -- Präfix "tm_..."
org_id TEXT NOT NULL DEFAULT 'default',
name TEXT NOT NULL,
description TEXT NOT NULL DEFAULT '',
created_at TEXT NOT NULL
);
CREATE TABLE IF NOT EXISTS team_members (
team_id TEXT NOT NULL,
user_id TEXT NOT NULL,
role TEXT NOT NULL DEFAULT 'member', -- 'admin' | 'member'
joined_at TEXT NOT NULL,
PRIMARY KEY (team_id, user_id),
FOREIGN KEY(team_id) REFERENCES teams(id) ON DELETE CASCADE,
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
```
---
### 2.3 Gedanken, Triage & Aufgaben
In MindSift nutzen Quick Dumps (Triage) und Aufgaben dieselbe Basistabelle **`thoughts`**. Ein Quick Dump ist ein Gedanke mit `status = 'inbox'`, der durch Triage in `status = 'kept'` oder `status = 'converted'` übergeht.
#### `thoughts`
```sql
CREATE TABLE IF NOT EXISTS thoughts (
id TEXT PRIMARY KEY, -- Präfix "th_..."
user_id TEXT NOT NULL,
content TEXT NOT NULL, -- Textinhalt inkl. Hashtags
tags TEXT NOT NULL DEFAULT '[]', -- JSON Array: ["smarthome", "keller"]
priority TEXT NOT NULL DEFAULT 'normal', -- 'low' | 'normal' | 'high' | 'urgent'
source TEXT NOT NULL DEFAULT 'manual', -- 'manual' | 'voice' | 'webhook'
status TEXT NOT NULL DEFAULT 'inbox', -- 'inbox' | 'kept' | 'discarded' | 'converted'
is_completed INTEGER NOT NULL DEFAULT 0, -- 0 = offen, 1 = erledigt
converted_type TEXT DEFAULT '', -- 'task' | 'document' | 'list_item'
converted_ref_id TEXT DEFAULT '', -- Verknüpfte ID (z.B. doc_id oder list_item_id)
due_date TEXT DEFAULT '', -- Fälligkeitsdatum "YYYY-MM-DD"
task_list_id TEXT NOT NULL DEFAULT '', -- Zugeordnete Aufgabenliste ("" = Standard)
kanban_status TEXT NOT NULL DEFAULT 'todo',-- 'todo' | 'in_progress' | 'done' | column.id
notes TEXT NOT NULL DEFAULT '', -- Zusätzliche Notizen / Beschreibung
subtasks TEXT NOT NULL DEFAULT '[]', -- JSON Array von SubTask: [{id, title, isCompleted}]
alarm_sent INTEGER NOT NULL DEFAULT 0, -- 1 = Alarm wurde bereits versendet
sort_order INTEGER NOT NULL DEFAULT 0, -- Manuelle Reorder-Sortierung
created_at TEXT NOT NULL,
triaged_at TEXT DEFAULT '',
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_thoughts_user_status ON thoughts(user_id, status, created_at DESC);
CREATE INDEX IF NOT EXISTS idx_thoughts_list_sort ON thoughts(task_list_id, sort_order ASC, created_at DESC);
```
#### `task_lists` & `task_list_shares`
```sql
CREATE TABLE IF NOT EXISTS task_lists (
id TEXT PRIMARY KEY, -- Präfix "tl_..."
user_id TEXT NOT NULL,
title TEXT NOT NULL,
icon TEXT NOT NULL DEFAULT '📋',
color TEXT NOT NULL DEFAULT '#3b82f6',
team_id TEXT NOT NULL DEFAULT '', -- Optional: an Team gebunden
columns TEXT NOT NULL DEFAULT '[]', -- JSON Array von Kanban-Spalten
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL,
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE TABLE IF NOT EXISTS task_list_shares (
id TEXT PRIMARY KEY,
task_list_id TEXT NOT NULL,
target_type TEXT NOT NULL CHECK(target_type IN ('team', 'user')),
target_id TEXT NOT NULL, -- Team-ID oder User-ID
created_at TEXT NOT NULL,
created_by TEXT NOT NULL,
UNIQUE(task_list_id, target_type, target_id),
FOREIGN KEY(task_list_id) REFERENCES task_lists(id) ON DELETE CASCADE
);
```
---
### 2.4 Workspace: Dokumente, Blöcke & Geteilte Ordner
#### `documents` & `document_blocks` (Database-First Outliner)
Dokumente werden als Kopfdatensatz in `documents` gespeichert, während der Inhalt als feingranulare Blöcke in `document_blocks` verwaltet wird. Zusätzlich spiegelt MindSift die Daten synchron als physische `.md`-Datei auf Festplatte.
```sql
CREATE TABLE IF NOT EXISTS documents (
id TEXT PRIMARY KEY, -- Präfix "doc_..."
user_id TEXT NOT NULL, -- Eigentümer
title TEXT NOT NULL, -- Dokumenttitel
icon TEXT NOT NULL DEFAULT '📄', -- Emoji-Icon
content TEXT NOT NULL DEFAULT '', -- Markdown-Volltext (Spiegelung)
blocks_json TEXT NOT NULL DEFAULT '[]', -- Legacy JSON-Cache
tags TEXT NOT NULL DEFAULT '[]', -- JSON Array von Tags
folder_path TEXT NOT NULL DEFAULT '', -- Relativer Ordnerpfad des Eigentümers
shared_folder_id TEXT NOT NULL DEFAULT '', -- ID aus workspace_shared_folders (wenn in geteiltem Ordner)
sub_folder_path TEXT NOT NULL DEFAULT '', -- Relativer Unterordnerpfad innerhalb des geteilten Ordners
is_pinned INTEGER NOT NULL DEFAULT 0, -- Globaler Pin
is_archived INTEGER NOT NULL DEFAULT 0,
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL,
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_documents_user ON documents(user_id, is_archived, updated_at DESC);
CREATE INDEX IF NOT EXISTS idx_documents_shared_folder ON documents(shared_folder_id);
CREATE TABLE IF NOT EXISTS document_blocks (
id TEXT PRIMARY KEY, -- Präfix "blk_..."
doc_id TEXT NOT NULL,
sort_order REAL NOT NULL DEFAULT 0, -- Fließkommazahl für konfliktfreies Einfügen
type TEXT NOT NULL DEFAULT 'bullet', -- 'bullet', 'todo', 'h1', 'h2', 'h3', 'code', 'quote', 'callout', 'divider'
content TEXT NOT NULL DEFAULT '', -- Textinhalt des Blocks
level INTEGER NOT NULL DEFAULT 0, -- Hierarchieebene (0 = Root, 1 = Kind...)
checked INTEGER NOT NULL DEFAULT 0, -- Für Checklisten (0 = offen, 1 = abgehakt)
collapsed INTEGER NOT NULL DEFAULT 0, -- Für eingeklappte Unterbäume
lang TEXT NOT NULL DEFAULT '', -- Programmiersprache für Codeblöcke
updated_at TEXT NOT NULL,
updated_by TEXT NOT NULL DEFAULT '',
FOREIGN KEY(doc_id) REFERENCES documents(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_document_blocks_doc_order ON document_blocks(doc_id, sort_order);
```
#### Entkoppelte Ordner-Freigabe (`workspace_shared_folders` & `workspace_folder_mounts`)
Ermöglicht das Teilen kompletter Ordnerstrukturen. Verschiebt ein Empfänger den geteilten Ordner in seiner Hierarchie, wird **nur sein Mount-Pfad** aktualisiert – die Quellstruktur beim Eigentümer und anderen Empfängern bleibt unberührt!
```sql
CREATE TABLE IF NOT EXISTS workspace_shared_folders (
id TEXT PRIMARY KEY, -- Präfix "wsf_..."
owner_id TEXT NOT NULL,
name TEXT NOT NULL,
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL
);
CREATE TABLE IF NOT EXISTS workspace_folder_shares (
id TEXT PRIMARY KEY,
folder_id TEXT NOT NULL,
target_type TEXT NOT NULL CHECK(target_type IN ('team', 'user')),
target_id TEXT NOT NULL,
permission TEXT NOT NULL CHECK(permission IN ('read', 'write')),
created_by TEXT NOT NULL,
created_at TEXT NOT NULL,
UNIQUE(folder_id, target_type, target_id)
);
CREATE TABLE IF NOT EXISTS workspace_folder_mounts (
user_id TEXT NOT NULL,
folder_id TEXT NOT NULL,
mount_path TEXT NOT NULL, -- Eigener lokaler Pfad des Benutzers (z.B. "Arbeit/Projekte/Team-Docs")
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL,
PRIMARY KEY(user_id, folder_id)
);
CREATE TABLE IF NOT EXISTS doc_user_folders (
user_id TEXT NOT NULL,
doc_id TEXT NOT NULL,
folder_path TEXT NOT NULL DEFAULT '', -- Individuelle Ordnerplatzierung für geteilte Einzelnotizen
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL,
PRIMARY KEY(user_id, doc_id)
);
```
---
### 2.5 Geteilte Listen & Listen-Einträge
#### `lists`, `list_items` & `list_shares`
```sql
CREATE TABLE IF NOT EXISTS lists (
id TEXT PRIMARY KEY, -- Präfix "lst_..."
user_id TEXT NOT NULL,
title TEXT NOT NULL,
icon TEXT NOT NULL DEFAULT '🛒',
list_type TEXT NOT NULL DEFAULT 'shopping',-- 'shopping', 'packing', 'inventory', 'todo'
updated_at TEXT NOT NULL,
created_at TEXT NOT NULL,
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_lists_user ON lists(user_id, updated_at DESC);
CREATE TABLE IF NOT EXISTS list_shares (
id TEXT PRIMARY KEY,
list_id TEXT NOT NULL,
target_type TEXT NOT NULL CHECK(target_type IN ('team', 'user')),
target_id TEXT NOT NULL,
role TEXT NOT NULL DEFAULT 'editor' CHECK(role IN ('editor', 'viewer')),
created_by TEXT NOT NULL,
created_at TEXT NOT NULL,
UNIQUE(list_id, target_type, target_id),
FOREIGN KEY(list_id) REFERENCES lists(id) ON DELETE CASCADE
);
CREATE TABLE IF NOT EXISTS list_items (
id TEXT PRIMARY KEY, -- Präfix "itm_..."
list_id TEXT NOT NULL,
content TEXT NOT NULL, -- Bezeichnung des Eintrags
category TEXT NOT NULL DEFAULT '', -- Regal/Kategorie (z.B. "Kühlregal")
quantity TEXT NOT NULL DEFAULT '', -- Menge (z.B. "2x", "500g")
is_completed INTEGER NOT NULL DEFAULT 0, -- 1 = abgehakt
completed_by TEXT NOT NULL DEFAULT '', -- User-ID des Abhakers
completed_by_name TEXT NOT NULL DEFAULT '',-- Name des Abhakers für Live-Badge
sort_order INTEGER NOT NULL DEFAULT 0,
created_at TEXT NOT NULL,
completed_at TEXT NOT NULL DEFAULT '',
FOREIGN KEY(list_id) REFERENCES lists(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_list_items_sync ON list_items(list_id, is_completed, sort_order ASC);
```
---
## 🔄 3. Migrationsstrategie
MindSift setzt auf **idempotente automatische In-Process-Migrationen** beim Serverstart ([`internal/storage/sqlite.go`](../internal/storage/sqlite.go)):
1. **Schema-Bootstrap:** Ausführung des Basis-Schemas via `CREATE TABLE IF NOT EXISTS`.
2. **Column & Index Migration Array:** Ein vordefiniertes Array idempotenter DDL-Befehle (z.B. `ALTER TABLE thoughts ADD COLUMN ...`, `CREATE TABLE IF NOT EXISTS doc_user_folders ...`).
3. **Fehlerbehandlung:** Wenn Spalten bereits existieren (z.B. `"duplicate column name"`), wird der Fehler ignoriert und der Start fortgesetzt.
4. **Vorteil:** Keine manuellen Migrations-Skripte nötig; Container-Updates können jederzeit ohne Downtime oder Vorbereitung über bestehende Datenbanken ausgerollt werden.
Doku/flaws.md
+136
View File
@@ -0,0 +1,136 @@
# Bekannte Schwachstellen, Risiken & Technische Schulden (Flaws)
Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse aller bekannten Limitierungen, Architektur-Kompromisse, Skalierungsrisiken und UX-Schwachstellen in **MindSift**. Sie dient als verbindlicher Backlog für zukünftige Refactorings und Architektur-Meilensteine.
---
## 📌 Übersicht & Risikomatrix
| ID | Bereich | Problem / Schwachstelle | Schweregrad | Risiko im Produktivbetrieb |
|---|---|---|---|---|
| **FLAW-01** | Workspace Sync | Kein echtes CRDT/OT – Lock-Heartbeat-Modell mit Last-Write-Wins | **Kritisch** | Zeilenverlust bei gleichzeitigen Bearbeitungen oder Netzschwankungen |
| **FLAW-02** | Storage | Dual-Storage Drift (SQLite `document_blocks` vs. Dateisystem `.md`) | **Hoch** | Externe Änderungen an `.md` werden nicht automatisch in SQLite gespiegelt |
| **FLAW-03** | Netzwerk / WS | Proxy-Inkompatibilität bei WebSocket-Upgrades & Polling-Fallback | **Mittel** | Verzögerte Synchronisierung (1–3s Polling) in Firmennetzwerken |
| **FLAW-04** | Datenbank / Suche | Volltextsuche via `LIKE '%query%'` statt SQLite FTS5 | **Mittel** | Performance-Einbrüche bei wachsenden Notizbeständen (>10.000 Blöcke) |
| **FLAW-05** | Frontend DOM | Fehlende Virtualisierung im Outliner-Baum | **Mittel** | Frame-Drops und Lags bei Dokumenten mit >500 Blöcken auf Mobilgeräten |
| **FLAW-06** | SQLite Concurrency | Single-Writer-Bottleneck bei hohem parallelem Schreibaufkommen | **Mittel** | `SQLITE_BUSY` Fehler bei vielen gleichzeitigen Team-Nutzern |
| **FLAW-07** | Benachrichtigungen | Fehlende Dead-Letter-Queue für Webhook- & E-Mail-Alarme | **Niedrig** | Verlorene Benachrichtigungen bei temporärem Ausfall von Drittsystemen |
| **FLAW-08** | Sicherheit / Auth | Statische JWT-Tokens ohne rotierende Refresh-Tokens & Blacklisting | **Niedrig** | Keine sofortige Sitzungsinvalidierung bei Rechteentzug |
| **FLAW-09** | Mobile UX | Viewport-Verschiebung durch Virtual-Keyboard auf iOS/Android | **Niedrig** | Verdeckte Eingabefelder und springende Bottom-Navigationsleisten |
| **FLAW-10** | Outliner UX | Kein hierarchischer Undo/Redo-Stack für Strukturmutationen | **Mittel** | Versehentliches Löschen/Einrücken von Blöcken nicht per `Ctrl+Z` rückgängig machbar |
---
## 🔍 Detaillierte Analyse & Maßnahmen
### FLAW-01: Kein echtes CRDT/OT – Lock-Heartbeat & Last-Write-Wins
- **Betroffene Komponenten:** [`api/websocket.md`](./api/websocket.md), [`modules/workspace.md`](./modules/workspace.md), `internal/ws/hub.go`, `frontend/src/lib/components/Outliner.svelte`
- **Ursache:** MindSift nutzt zur Vermeidung von Konflikten eine kooperative Bearbeitungssperre (*Document Lease Lock*, 30 Sekunden TTL mit Heartbeat). Wenn zwei Nutzer dasselbe Dokument geöffnet haben, blockiert der aktive Schreiber das Bearbeiten für andere. Verliert ein Nutzer jedoch kurzzeitig die WebSocket-Verbindung oder tippt während des Übergangs zum Polling-Fallback, werden Änderungen per REST via Last-Write-Wins (`PUT /api/v1/documents/:id`) gespeichert.
- **Folgen:** Wie in früheren Versionen beobachtet, können bei parallelem Schreiben Zeilen überschrieben werden oder Strukturhierarchien (Parent-IDs) verloren gehen.
- **Empfohlene Lösung:**
1. Langfristige Migration auf ein echtes blockweises CRDT-Framework (wie [Yjs](https://yjs.dev/) oder [Automerge](https://automerge.org/)).
2. Kurzfristig: Optimistisches Block-Locking (Sperre nur auf Block-Ebene `block_id` statt des gesamten Dokuments) und atomare Versionsprüfung (*Optimistic Concurrency Control* mit `version_seq`).
---
### FLAW-02: Dual-Storage Drift (SQLite vs. Dateisystem `.md`)
- **Betroffene Komponenten:** [`database.md`](./database.md), `internal/storage/sqlite.go`, `internal/storage/markdown_sync.go`
- **Ursache:** MindSift pflegt Notizen primär in SQLite (`documents`, `document_blocks`), exportiert bzw. spiegelt sie jedoch als reine `.md`-Dateien auf das Dateisystem (`data/notes/`), um Exportierbarkeit und lokale Lesbarkeit zu gewährleisten.
- **Problem:** Es existiert kein systemweiter File-Watcher ([fsnotify](https://github.com/fsnotify/fsnotify)). Bearbeitet der Nutzer eine Notizdatei direkt auf dem Host (z. B. via Obsidian, VS Code, Git-Sync oder SSH), bekommt die SQLite-Datenbank dies nicht mit. Beim nächsten Web-Edit überschreibt SQLite die Datei auf der Festplatte.
- **Empfohlene Lösung:**
1. Integrieren eines Background-File-Watchers mit `fsnotify` für das Datenverzeichnis.
2. Implementieren einer Hash-Prüfung (`sha256` der Datei vs. DB-Metadaten) vor dem Speichern. Bei Abweichung: Nutzerkonflikt-Dialog anzeigen.
---
### FLAW-03: Proxy-Inkompatibilität bei WebSocket-Upgrades
- **Betroffene Komponenten:** [`api/websocket.md`](./api/websocket.md), `frontend/src/lib/stores/websocket.js`
- **Ursache:** In restriktiven Firmennetzwerken oder über bestimmte Reverse-Proxies (Corporate SSL-Termination, Firewalls) schlägt der HTTP-Upgrade-Header `Upgrade: websocket` fehl (`NS_ERROR_CONNECTION_REFUSED` oder `400 Bad Request`).
- **Folgen:** Der Client schaltet in den HTTP-Polling-Fallback um (alle 2 Sekunden). Dadurch:
- Werden Sperren (*Document Locks*) und Online-Statusanzeigen verzögert übertragen.
- Entsteht unnötige Serverlast durch kontinuierliche HTTP-Requests.
- **Empfohlene Lösung:**
1. Sicherstellen von standardmäßigen Nginx/Traefik-Snippets in der Dokumentation (`proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";`).
2. Optionale Implementierung von Server-Sent Events (SSE) als unidirektionale Echtzeit-Alternative für Lesevorgänge bei blockiertem WebSocket.
---
### FLAW-04: Volltextsuche via `LIKE '%query%'`
- **Betroffene Komponenten:** [`database.md`](./database.md), `internal/api/search.go`, `internal/api/thoughts.go`
- **Ursache:** Suchabfragen über Gedanken, Notizblöcke und Aufgaben nutzen aktuell einfaches SQL:
```sql
WHERE content LIKE '%' || ? || '%'
```
- **Folgen:** `LIKE '%...'` kann B-Tree-Indizes prinzipbedingt nicht nutzen und erzwingt einen sequentiellen Full Table Scan. Bei Datenbanken mit Zehntausenden Blöcken führt dies zu CPU-Spitzen und trägen Suchreaktionen.
- **Empfohlene Lösung:**
1. Einrichten einer virtuellen SQLite FTS5-Tabelle (`document_blocks_fts`) mit Tokenizer (`unicode61` oder `trigram`).
2. Automatische Synchronisierung über SQLite Trigger (`AFTER INSERT`, `AFTER UPDATE`, `AFTER DELETE`).
---
### FLAW-05: Fehlende Virtualisierung im Outliner-Baum
- **Betroffene Komponenten:** [`modules/workspace.md`](./modules/workspace.md), `frontend/src/lib/components/Outliner.svelte`
- **Ursache:** Jeder Block im Notizbaum wird als eigenes DOM-Element gerendert. Enthält ein Dokument 500 bis 2000 Blöcke (z. B. lange Projektjournale oder Besprechungsprotokolle), befinden sich tausende verschachtelte `div`- und `contenteditable`-Elemente gleichzeitig im DOM.
- **Folgen:** Auf älteren Smartphones oder bei schnellem Tippen kommt es zu spürbaren Input-Latenzen und Ruckeln beim Scrollen.
- **Empfohlene Lösung:**
1. Implementierung einer virtuellen Fensterung (Virtual Windowing) für Blöcke außerhalb des Sichtbereichs.
2. Automatisches Einklappen (*Collapsing*) tiefer Hierarchieebenen beim initialen Laden langer Dokumente.
---
### FLAW-06: SQLite Concurrency & Single-Writer-Bottleneck
- **Betroffene Komponenten:** [`architecture.md`](./architecture.md), [`database.md`](./database.md), `internal/storage/sqlite.go`
- **Ursache:** Obwohl SQLite mit `PRAGMA journal_mode = WAL;` parallele Leser erlaubt, kann zu jedem Zeitpunkt immer nur **ein einziger Thread** schreiben. Bei intensiver gleichzeitiger Nutzung (z. B. 20 Teammitglieder tippen gleichzeitig in Listen und Notizen, während im Hintergrund Webhook-Events einlaufen) können Schreib-Transaktionen aufeinander warten.
- **Folgen:** Risiko von `database is locked (SQLITE_BUSY)`-Fehlern, wenn der Busy-Timeout überschritten wird.
- **Empfohlene Lösung:**
1. Setzen von `PRAGMA busy_timeout = 5000;` (5 Sekunden Wartezeit vor Fehlerwurf).
2. Kapselung aller Schreibzugriffe über einen dedizierten Go-Channel / Single-Worker-Pool oder Migration auf PostgreSQL bei größeren Installationen.
---
### FLAW-07: Fehlende Dead-Letter-Queue für Benachrichtigungen
- **Betroffene Komponenten:** [`modules/tasks.md`](./modules/tasks.md), `internal/scheduler/alarm_ticker.go`
- **Ursache:** Der Alarm-Ticker überprüft minütlich fällige Aufgaben und sendet Webhooks bzw. E-Mails. Schlägt der HTTP-Post an den externen Webhook fehl (z. B. Zielserver vorübergehend offline), wird der Fehler lediglich ins Log geschrieben.
- **Folgen:** Der Alarm wird nicht erneut versucht und die Benachrichtigung geht dauerhaft verloren.
- **Empfohlene Lösung:**
1. Einführung einer Tabelle `notification_outbox` mit Spalten `retry_count`, `next_retry_at`, `status`.
2. Exponentieller Backoff (1m, 5m, 15m, 1h) und Status-Markierung (*failed*, *delivered*).
---
### FLAW-08: Statische JWT-Tokens ohne Blacklisting
- **Betroffene Komponenten:** [`architecture.md`](./architecture.md), `internal/api/auth.go`
- **Ursache:** Nach dem Login wird ein JWT ausgestellt, das clientseitig im `localStorage` gespeichert wird. Der Server prüft lediglich die kryptografische Signatur des Tokens, führt aber keine serverseitige Sitzungsliste.
- **Folgen:** Wird einem Benutzer die Berechtigung entzogen oder ändert er sein Passwort, bleibt ein bereits ausgestellter Token bis zu seinem Ablaufdatum (z. B. 7 Tage) gültig.
- **Empfohlene Lösung:**
1. Einführung einer `revoked_tokens`-Tabelle oder einer `token_version`-Spalte in der `users`-Tabelle.
2. Implementierung von kurzlebigen Access-Tokens (15 Min.) in Verbindung mit rotierenden Refresh-Tokens in `httpOnly`-Cookies.
---
### FLAW-09: Mobile Viewport-Verschiebung durch Virtual-Keyboard
- **Betroffene Komponenten:** `frontend/src/routes/+layout.svelte`, `frontend/src/lib/components/BottomNav.svelte`
- **Ursache:** Öffnet sich auf iOS Safari oder Android Chrome die Bildschirmtastatur, ändert der Browser die Höhe des sichtbaren Viewports dynamisch. Feste CSS-Attribute wie `height: 100vh` oder `fixed bottom-0` führen dazu, dass Eingabefelder unter die Tastatur rutschen oder die Navigationsleiste den Bildschirm verdeckt.
- **Folgen:** In der mobilen Triage- und Aufgabenansicht muss der Nutzer manuell scrollen, um die Speichern-Buttons zu erreichen.
- **Empfohlene Lösung:**
1. Nutzung der modernen `window.visualViewport`-API in Svelte.
2. Dynamisches Setzen einer CSS-Variable `--vvh` (`visualViewport.height`) zur präzisen Anpassung von Modals und Bottom-Sheets.
---
### FLAW-10: Kein hierarchischer Undo/Redo-Stack im Outliner
- **Betroffene Komponenten:** [`modules/workspace.md`](./modules/workspace.md), `frontend/src/lib/components/Outliner.svelte`
- **Ursache:** Standardmäßiges Browser-`Ctrl+Z` funktioniert nur innerhalb eines einzelnen aktiven Textfelds (`contenteditable`). Strukturelle Aktionen – wie das Verschieben von Blöcken via Drag & Drop, Einrücken (`Tab`), Ausrücken (`Shift+Tab`) oder das Löschen ganzer Unterbäume – sind im Standard-Browser-Undo-Stack nicht enthalten.
- **Folgen:** Verschiebt ein Nutzer versehentlich einen Block samt 10 Unterpunkten, kann dies nicht mit `Ctrl+Z` rückgängig gemacht werden.
- **Empfohlene Lösung:**
1. Implementierung eines expliziten In-Memory Command-Stacks im Frontend (Command-Pattern: `execute()` / `undo()`).
2. Aufzeichnung aller Block-Mutationen (Insert, Indent, Move, Delete) mit Revert-Payloads.
---
## 🧭 Verwandte Dokumente
- 🏗️ [Gesamtarchitektur](architecture.md)
- 💾 [Datenbank-Design & Tabellenschemata](database.md)
- 🔌 [WebSocket & Live-Protokoll](api/websocket.md)
- 🧠 [Workspace-Modul (Outliner)](modules/workspace.md)
- 🛡️ [Rechte & Freigabesystem](sharing-and-permissions.md)
Doku/modules/lists.md
+62
View File
@@ -0,0 +1,62 @@
# 🛒 Kernmodul 4: Geteilte Listen & Kollaboration
Das Modul für geteilte Listen ([`SharedListsView.tsx`](../../frontend/src/features/lists/SharedListsView.tsx)) ist auf **Echtzeit-Kollaboration im Alltag** ausgelegt (z.B. gemeinsamer Wocheneinkauf im Supermarkt, Packlisten für Reisen, Inventarlisten oder schnelle Checklisten).
---
## 🛍️ 1. Listen-Typen & Kategorien
Jede Liste besitzt einen Typ, ein Icon und eine Farb-Codierung:
| Listen-Typ | Icon | Einsatzzweck | Typische Kategorien |
| :--- | :--- | :--- | :--- |
| `shopping` | 🛒 | Supermarkt- & Lebensmitteleinkauf | Obst & Gemüse, Kühlregal, Vorrat, Drogerie |
| `packing` | 🎒 | Urlaubs- & Reise-Packlisten | Kleidung, Elektronik, Dokumente, Kosmetik |
| `inventory` | 📦 | Vorratskammer, Keller, Homelab-Hardware | Regal 1, Gefrierschrank, Server-Rack |
| `todo` | 📝 | Einfache Gruppen-Checklisten | Heute, Später, Ideen |
### Automatische Kategorisierung & Mengenangaben
- Einträge können mit einer Mengenangabe (z.B. `3x`, `500g`, `1 Kasten`) versehen werden.
- Die intelligente Eingabe erkennt Einheiten automatisch oder trennt Mengen über Eingabefelder.
- Einträge werden übersichtlich nach Kategorien gruppiert. Jede Kategorie kann zur besseren Übersicht eingeklappt werden.
---
## ⚡ 2. Echtzeit-Abhaken (Multi-User Live Sync)
Wenn mehrere Familienmitglieder oder Teammitglieder gleichzeitig im Supermarkt unterwegs sind, synchronisiert MindSift jeden Schritt in Echtzeit über WebSockets:
```mermaid
sequenceDiagram
autonumber
actor Alice as Alice (im Markt)
participant WS as WebSocket Hub
actor Bob as Bob (zu Hause)
Alice->>WS: PATCH /items/123 (isCompleted: true)
WS->>Bob: Event: ITEM_TOGGLED (itemId: "123", completedBy: "Alice")
Note over Bob: Eintrag wird sofort durchgestrichen<br/>Grünes Badge "von Alice" erscheint
```
- **Transparenz:** Beim Abhaken speichert MindSift `completed_by_name`. Ein dezentes grünes Pillen-Badge zeigt an, wer den Artikel eingepackt hat.
- **Erledigte Einträge:** Abgehakte Artikel wandern nach unten in einen einklappbaren Bereich „Erledigt".
- **Liste leeren:** Ein Klick auf „Erledigte entfernen" löscht alle abgehakten Einträge (`LIST_CLEARED`) für alle Teilnehmer.
---
## 🖐️ 3. Drag & Drop Umsortierung
Innerhalb einer Liste können Einträge frei per Drag & Drop sortiert werden:
1. **Innerhalb einer Kategorie:** Ändert die Reihenfolge (`sort_order`).
2. **Kategorie-Übergreifend:** Zieht der Benutzer einen Eintrag in eine andere Kategorie (z.B. von „Kühlregal" nach „Obst & Gemüse"), aktualisiert das Frontend optimistisch die Kategorie und sendet das Update ans Backend.
---
## 👥 4. Freigaben & Berechtigungen
Listen können über den einheitlichen Freigabe-Dialog ([`UnifiedShareModal.tsx`](../../frontend/src/components/UnifiedShareModal.tsx)) geteilt werden:
- **Freigabe für Teams:** Alle aktuellen und zukünftigen Mitglieder der gewählten Gruppe erhalten automatisch Zugriff.
- **Freigabe für Einzelbenutzer:** Gezielter Zugriff für einzelne Personen.
- **Rollen:**
- `editor`: Darf Einträge hinzufügen, bearbeiten, abhaken und löschen.
- `viewer`: Nur Lesezugriff (Einträge ansehen, aber nicht verändern).
Doku/modules/tasks.md
+86
View File
@@ -0,0 +1,86 @@
# 📋 Kernmodul 2: Aufgaben & Kanban-System
Das Aufgaben-Modul ([`TasksView.tsx`](../../frontend/src/features/triage/TasksView.tsx)) bietet eine flexible Aufgabenverwaltung mit frei konfigurierbaren Listen, Kanban-Boards, Subtask-Checklisten und einem automatisierten Multi-Channel Alarm-System.
---
## 🗂️ 1. Datenmodell & Listen-Hierarchie
Aufgaben basieren technisch auf der Tabelle **`thoughts`** in SQLite. Ein Eintrag gilt als Aufgabe, wenn `status = 'kept'` oder `(status = 'converted' AND converted_type = 'task')` zutrifft.
```
Benutzer (users)
└── Aufgabenlisten (task_lists)
├── Eigene Listen (z.B. "Privat", "Homelab")
└── Mit Teams geteilte Listen (task_list_shares)
└── Aufgaben (thoughts)
├── Kanban-Status (todo, in_progress, done)
├── Priorität (low, normal, high, urgent)
├── Fälligkeitsdatum (dueDate)
├── Notizen (notes)
└── Subtasks (JSON Array von Teilaufgaben)
```
### Listen-Sharing & Avatar-Stack
Aufgabenlisten können für Gruppen/Teams freigegeben werden. Ein Avatar-Stack im Listen-Header und in der Tab-Leiste visualisiert alle Mitglieder, die Zugriff auf die jeweilige Liste haben.
---
## 🖥️ 2. Ansichten: Liste vs. Kanban-Board
Der Benutzer kann jederzeit nahtlos zwischen zwei Ansichten umschalten:
### 1. Kompakte Listenansicht
- Optimiert für schnelles Abarbeiten und Tastatursteuerung.
- Zeigt Checkbox, Titel, Prioritäts-Badge, Herkunfts-Pille (`Webhook`, `Diktat`), Fälligkeitsdatum und Subtask-Zähler (`2/5`).
- 1-Klick-Prioritäts-Wechsel: Klick auf ein Badge rotiert durch die Prioritäten.
### 2. Kanban-Board (Drag & Drop)
- Standardmäßig 3 Spalten: **Zu erledigen** (`todo`), **In Arbeit** (`in_progress`) und **Erledigt** (`done`).
- **Freie Spalten-Konfiguration:** Über das Spalten-Menü können Spalten umbenannt, farblich markiert oder neue Spalten hinzugefügt werden.
- **Drag & Drop:** Aufgaben können per HTML5 Drag & Drop zwischen Spalten verschoben werden. Das Backend speichert die relative Position (`sort_order`) und den neuen `kanban_status` automatisch.
---
## 🎯 3. Prioritäten & Subtasks
### 4-Stufen-Prioritätensystem
Aufgaben unterstützen vier einheitliche Prioritätsstufen:
- **Niedrig (`low`):** Dezent grau hinterlegt.
- **Normal (`normal`):** Akzentfarbe.
- **Wichtig (`high`):** Gelb hervorgehoben mit Warndreieck (`⚠️ Wichtig`).
- **Dringend (`urgent`):** Rot pulsierend mit Flammen-Icon (`🔥 Dringend`).
### Subtasks (Teilaufgaben)
Jede Aufgabe kann eine hierarchische Checkliste von Subtasks enthalten:
- Gespeichert als JSON in der Spalte `subtasks`.
- Fortschrittsanzeige im Kartenkopf (z.B. `3/5 erledigt`).
- Einzelnes Abhaken synchronisiert direkt in die Datenbank.
---
## ⏰ 4. Multi-Channel Alarm-Scheduler
MindSift enthält einen serverseitigen Hintergrund-Ticker in Go ([`internal/api/server.go`](../../internal/api/server.go)), der fällige Aufgaben proaktiv an externe Kanäle meldet.
```mermaid
flowchart TD
Ticker["Go Background Ticker (alle 30s)"] --> Query["SELECT thoughts WHERE due_date <= now + Vorwarnzeit AND alarm_sent = 0"]
Query --> CheckChannels{"Welche Kanäle sind beim User aktiv?"}
CheckChannels -->|email| SendSMTP["E-Mail via SMTP versenden"]
CheckChannels -->|discord| SendDiscord["Discord Webhook POST"]
CheckChannels -->|webhook| SendCustom["Custom HTTP POST Webhook"]
SendSMTP --> MarkSent["UPDATE thoughts SET alarm_sent = 1"]
SendDiscord --> MarkSent
SendCustom --> MarkSent
```
### Alarm-Konfiguration
1. **Vorwarnzeit:** Einstellbar in Minuten (z.B. 15, 30, 60 Minuten vor Fälligkeit).
2. **Kanal-Multi-Select:** Benutzer können beliebig viele Kanäle parallel aktivieren:
- **E-Mail:** Versand über den in den Admin-Einstellungen hinterlegten SMTP-Server.
- **Discord:** Benachrichtigung mit formatierter Embed-Karte in einen Discord-Kanal.
- **Eigener Webhook:** Beliebige HTTP POST JSON Endpunkte (z.B. Gotify, Ntfy, Home Assistant).
3. **Schutz vor Doppel-Alarmen:** Sobald ein Alarm abgesetzt wurde, wird `alarm_sent = 1` gesetzt. Wird das Datum der Aufgabe später geändert, setzt der Server `alarm_sent = 0` automatisch zurück.
Doku/modules/triage.md
+88
View File
@@ -0,0 +1,88 @@
# 📥 Kernmodul 1: Triage & Quick-Dump Engine
Das Triage-Modul von MindSift basiert auf dem *Getting Things Done (GTD)*-Prinzip. Es trennt die **Erfassung von Gedanken** strikt von der **Entscheidung, was damit geschehen soll**.
---
## 💡 1. Das 2-Phasen-Konzept
1. **Phase 1: Schnelles Erfassen (Instant Dump)**
Ein Gedanke, ein Anruf, eine Idee oder ein Server-Alarm wird ohne Reibung erfasst. Der Benutzer muss in diesem Moment weder ein Projekt auswählen, noch Fälligkeitsdaten eingeben oder Ordner durchsuchen.
2. **Phase 2: Fokussierte Triage (Inbox Zero)**
Zu einem späteren Zeitpunkt (z.B. morgens oder beim Feierabend) sichtet der Benutzer den Stapel im Triage-Deck Karte für Karte und trifft für jeden Eintrag eine eindeutige Entscheidung.
---
## 🔄 2. Triage State Machine
```mermaid
stateDiagram-v2
[*] --> Capture: Gedanke erfasst (Desktop / Mobile / Webhook)
Capture --> Inbox: Standard (status: 'inbox')
Capture --> Task: Direkt als Aufgabe (target: 'task')
Capture --> Document: Direkt als Notiz (target: 'document')
Capture --> ListItem: Direkt auf Liste (target: 'list_item')
state Inbox {
[*] --> ActiveCard: Oben auf Stapel
ActiveCard --> Skipped: Leertaste / Später (Ans Ende)
Skipped --> ActiveCard
}
ActiveCard --> Discarded: Swipe links / H (Wegwerfen)
ActiveCard --> Task: Swipe rechts / L (Als Aufgabe)
ActiveCard --> TaskDated: T (Mit Fälligkeitsdatum)
ActiveCard --> Document: D (In Notiz umwandeln)
ActiveCard --> ListItem: Auf Liste schieben
Discarded --> Trash: status: 'discarded'
Task --> TasksModule: status: 'kept', converted: 'task'
TaskDated --> TasksModule: status: 'kept', converted: 'task', dueDate
Document --> WorkspaceModule: status: 'converted', converted: 'document'
ListItem --> ListsModule: status: 'converted', converted: 'list_item'
```
---
## 🖐️ 3. Steuerung & Gesten (Mobile vs. Desktop)
### Desktop-Bedienung (Tastatur-First)
- `C` oder `/`: Fokussiert sofort die Eingabeleiste oben im Header.
- `Enter`: Speichert den Gedanken sofort im Deck.
- `←` oder `H`: Aktive Karte wegwerfen (`discard`).
- `→` oder `L`: Aktive Karte sofort zur Aufgabe machen (`task`).
- `T`: Datumsauswahl für Termin-Aufgabe öffnen.
- `D`: Aktive Karte in eine vollwertige Workspace-Notiz umwandeln.
- `Leertaste`: Karte überspringen und ans Ende des Stapels schieben („Später").
### Mobile Bedienung (Touch & Swipe)
- **Mittlerer Plus-Button (`+`):** Öffnet das design-angeglichene Bottom-Sheet mit Spracheingabe, 4 Prioritäts-Buttons (`Niedrig`, `Normal`, `Wichtig`, `Dringend`) und Fälligkeitsdatum.
- **Wischgeste nach links (Swipe Left):** Roter Indikator erscheint, Karte wird verworfen.
- **Wischgeste nach rechts (Swipe Right):** Grüner Indikator erscheint, Karte wird sofort zur Aufgabe.
- **Long-Press (Langes Drücken auf Karte):** Öffnet das Schnell-Aktions-Menü (Auf Liste, Mit Termin, Als Notiz, Später).
---
## 🎙️ 4. Spracheingabe (Speech-to-Text)
In der Desktop-Schnelleingabeleiste ([`InstantCaptureBar.tsx`](../../frontend/src/features/capture/InstantCaptureBar.tsx)) sowie im mobilen Triage-Modal ([`App.tsx`](../../frontend/src/App.tsx)) ist ein nativer Browser-Sprachassistent integriert:
- Verwendet die standardisierte `SpeechRecognition` bzw. `webkitSpeechRecognition` API.
- Erkennt Sprache auf Deutsch (`lang: 'de-DE'`).
- Live-Transkription: Gesprochener Text wird in Echtzeit in das Textfeld eingefügt.
- Haptisches Feedback: Vibrieren beim Starten und Stoppen der Aufnahme.
- Markiert erfasste Gedanken automatisch mit dem Herkunfts-Attribut `source: 'voice'` (Diktat-Badge).
---
## ⚡ 5. Webhook-Ingestion & Smarthome-Pille
MindSift kann externe Alarme (Home Assistant, Zigbee2MQTT, n8n, Proxmox, Monitoring) automatisch ins Triage-Deck einspeisen:
### Herkunftserkennung
1. Wird ein Gedanke über `/api/v1/inbox` mit `X-API-Key` oder über `/api/v1/webhooks/ingest` eingeliefert, setzt das Backend automatisch `source = "webhook"`.
2. Im Frontend visualisiert die Triage-Karte eine dezente Webhook-Pille (`<Webhook className="w-3 h-3 text-accent" /> Webhook`).
3. Diese Kennzeichnung bleibt auch erhalten, wenn die Karte später zu einer Aufgabe umgewandelt wird.
### Live-WebSocket Update
Nach erfolgreichem Ingest sendet der Server sofort ein `TASK_CREATED` Event über den WebSocket-Hub. Das geöffnete Triage-Deck fügt die neue Alarm-Karte sofort oben in den Stapel ein – ohne dass der Benutzer die Seite neu laden muss.
Doku/modules/workspace.md
+82
View File
@@ -0,0 +1,82 @@
# 📝 Kernmodul 3: Workspace Outliner-Engine, Wiki-Links & Disk-Sync
Der MindSift Workspace ([`WorkspaceView.tsx`](../../frontend/src/features/workspace/WorkspaceView.tsx)) kombiniert ein **hierarchisches Bullet-Point Notizsystem (inspiriert von Logseq)** mit einem **persönlichen Markdown-Wiki** und einem **globalen To-Do Rollup Dashboard**.
---
## 🌳 1. Die Logseq-Outliner-Engine
Im Gegensatz zu klassischen Fließtext-Editoren basiert der MindSift Workspace auf **Blöcken** (`document_blocks` in SQLite). Jeder Block ist ein gedanklicher Knotenpunkt mit einer flexiblen Einrückungsebene (`level: 0, 1, 2, ...`).
```
• Projekt MindSift v2.0 (level 0)
• Architektur-Entscheidung (level 1)
- [x] Database-First Blocks implementieren (level 2)
- [ ] Performance Benchmark mit 10.000 Blöcken (level 2)
• Notizen aus dem Dev-Meeting (level 1)
> Wichtig: Keine verschachtelten SQLite Queries ausführen! (level 2)
```
### Tastatur-Navigation & Shortcuts
- `Enter`: Erstellt einen neuen Block auf derselben Hierarchieebene.
- `Tab`: Rückt den aktuellen Block ein (wird Kindknoten des vorherigen Blocks).
- `Shift + Tab`: Rückt den Block um eine Ebene aus (verringert die Tiefe).
- `Shift + Enter`: Weicher Zeilenumbruch innerhalb desselben Blocks (z.B. für mehrzeilige Notizen oder Code).
- `Backspace` (auf leerem Block): Rückt den Block aus oder löscht ihn, wenn er auf Level 0 ist.
- `/` (Slash-Commands): Öffnet das Umwandlungsmenü (`/todo`, `/h1`, `/h2`, `/h3`, `/code`, `/callout`, `/quote`, `/divider`).
### Zoom-In Hoisting (Fokus-Modus)
Klickt der Benutzer auf den Bullet-Dot (`•`) eines Blocks, blendet der Editor alle übergeordneten und benachbarten Blöcke aus und zoomt **ausschließlich in diesen Ast** hinein.
- Eine dezente Breadcrumb-Leiste oben zeigt den Pfad an (z.B. `Workspace / Projekte / MindSift / Architektur`).
- Ein Klick auf ein beliebiges Breadcrumb-Element zoomt sofort auf die jeweilige Ebene zurück.
### Drag & Drop von Blöcken
Der Bullet-Dot dient gleichzeitig als Drag-Anfasser. Wird ein Block verschoben, erkennt die Engine automatisch alle untergeordneten Kind-Blöcke (`isDescendantBlock`) und verschiebt den **kompletten Unterbaum** an die neue Zielposition.
---
## 🔗 2. Wiki-Links (`[[Link]]`) & Hashtags
1. **Interne Wiki-Links:**
- Text in doppelten eckigen Klammern (z.B. `[[Reiseplanung 2026]]`) wird automatisch als klickbarer Link gerendert.
- Ein Klick darauf durchsucht die Notizen des Benutzers und öffnet das Ziel-Dokument direkt im Editor.
2. **Hashtags (`#tag`):**
- Hashtags im Fließtext werden automatisch indiziert (`doc_block_tags`-Tabelle).
- In der linken Leiste listet der Tag-Explorer alle verwendeten Schlagworte auf. Klick auf ein Tag filtert alle Dokumente und Blöcke, die dieses Tag enthalten.
---
## 💾 3. Dual-Storage: Database-First & Disk-Mirroring
MindSift löst das Dilemma zwischen schneller relationaler Abfrage und portabler Dateispeicherung durch ein **synchrones Dual-Storage-Modell**:
```
Client (Block-Editor)
│ PATCH /api/v1/documents/:id/blocks
▼
Backend Engine
┌──────────────────────────────────────────────┐
│ 1. Transaktion in SQLite (document_blocks) │
│ -> Sort-Order, Content, Level, Checked │
│ 2. Volltext-Generierung (Markdown-String) │
│ 3. Schreiben auf Disk (/data/workspace/...) │
└──────────────────────────────────────────────┘
```
1. **Präzision & Geschwindigkeit (SQLite):**
- Jeder Block besitzt eine eindeutige ID (`blk_...`) und eine Gleitkomma-Reihenfolge (`sort_order REAL`).
- Schnelle Status-Updates (z.B. Checkbox abhaken) schreiben nur genau eine Zeile in die Datenbank.
2. **Datensouveränität & Portabilität (Disk-Mirror):**
- Zeitgleich spiegelt der Server das Dokument als Standard-`.md`-Datei unter `/data/workspace/<user_id>/<ordner>/<dateiname>.md`.
- Einrückungen werden nach dem 2-Leerzeichen-Standard (` - [ ] `) formatiert.
- Administratoren können das Verzeichnis jederzeit mit externen Werkzeugen (Obsidian, Logseq, Git, rsync) sichern.
---
## 📊 4. Globaler To-Do Rollup Dashboard
Über den Tab **„Globale To-Dos"** bietet der Workspace eine aggregierte Übersicht aller im gesamten Wiki verteilten Aufgaben:
- Scannt in Echtzeit alle unvollendeten `- [ ] ` Checkboxen über alle Ordner und Notizen hinweg.
- Übersichtliche Gruppierung nach **Ordner ➔ Dokument ➔ Aufgabe**.
- **Ordner-Filter:** Klick auf einen Ordner isoliert nur dessen Aufgaben für fokussiertes Arbeiten.
- **2-Wege-Live-Sync:** Wird eine Checkbox im Rollup abgehakt, wird der Block in SQLite sofort auf `checked = 1` aktualisiert und die physische `.md`-Datei synchronisiert.
Doku/sharing-and-permissions.md
+93
View File
@@ -0,0 +1,93 @@
# 👥 Synchrones Teilen & Berechtigungskonzept
MindSift bietet ein mehrstufiges Kollaborations- und Freigabesystem. Es gewährleistet strikte Datensouveränität und Privatsphäre, ermöglicht aber gleichzeitig reibungslose Zusammenarbeit in Teams, Familien oder Unternehmen.
---
## 🛡️ 1. Globale Rollen & System-Isolation
### Globale Rollen
- **Server-Admin (`role = 'admin'`):** Vollzugriff auf System-Einstellungen, E-Mail-Konfiguration (SMTP), Benutzerverwaltung, Einladungscodes und System-Statistiken.
- **Mitglied (`role = 'member'`):** Regulärer Benutzer; arbeitet in seinen eigenen Notizen, Aufgaben und freigegebenen Teams.
### System-Isolations-Modi (`sharing_mode`)
Der Server-Admin legt global fest, wie Benutzer miteinander interagieren dürfen:
```
┌────────────────────────────────────────────────────────────────────────┐
│ System-Isolations-Modi │
├──────────────────────┬─────────────────────────┬───────────────────────┤
│ strict_private │ teams_only │ open │
│ (Strikt Isoliert) │ (Teams & Gruppen) │ (Offene Instanz) │
│ │ [EMPFOHLENER STANDARD]│ │
├──────────────────────┼─────────────────────────┼───────────────────────┤
│ Kein Adressbuch │ Adressbuch zeigt nur │ Alle Benutzer sehen │
│ Keine Freigaben │ gemeinsame Teammit- │ alle anderen Konten │
│ Autarke Einzel-Instanz│ glieder │ im System │
└──────────────────────┴─────────────────────────┴───────────────────────┘
```
1. **`strict_private`:** Vollständige Abschottung. Benutzer wissen nicht voneinander. Keine Freigaben möglich.
2. **`teams_only` (Standard):** Kollaboration ist strikt an Gruppen gebunden. Ein Benutzer kann Objekte nur mit Personen teilen, die mindestens in einer gemeinsamen Gruppe/Team mit ihm sind.
3. **`open`:** Geeignet für Familien oder kleine Firmen. Jeder Benutzer kann für jeden anderen Benutzer Objekte freigeben.
---
## 🏢 2. Gruppen & Teams (`teams` & `team_members`)
Gruppen strukturieren Benutzer (z.B. „Familie", „Entwicklung", „Marketing"):
- **Gruppen-Admin:** Darf Mitglieder einladen, Rollen ändern oder die Gruppe löschen.
- **Gruppen-Mitglied:** Hat Zugriff auf alle mit der Gruppe geteilten Ressourcen (Ordner, Aufgabenlisten, Einkaufslisten, Notizen).
Wird eine Ressource für eine Gruppe freigegeben, erhalten **alle aktuellen und zukünftigen Mitglieder** der Gruppe automatisch Zugriff, ohne dass Einzelberechtigungen gepflegt werden müssen.
---
## 📁 3. Entkoppelte Ordner-Freigabe (Decoupled Folder Mounts)
### Das traditionelle Problem
In herkömmlichen Cloud-Systemen (wie Google Drive oder Nextcloud) führt das Verschieben eines geteilten Ordners oft dazu, dass er auch bei allen anderen Teilnehmern den Platz wechselt. Verschiebt ein Kollege den Ordner in sein Unterverzeichnis „Archiv", verschwindet er beim Ersteller aus dem Sichtfeld.
### Die MindSift-Lösung: Unabhängige Einhängepunkte (Mounts)
MindSift entkoppelt die physische Ordner-Identität von der persönlichen Ordner-Hierarchie des Benutzers:
```
Eigentümer (Alice):
Ordner: "Kundenprojekte"
└── Geteilter Ordner: "Projekt Phoenix" (wsf_123)
├── spec.md
└── roadmap.md
Empfänger (Bob):
Ordner: "Meine Aufgaben"
└── "Wichtiges"
└── Einhängepunkt: "Projekt Phoenix" (wsf_123 eingehängt via mount_path)
├── spec.md
└── roadmap.md
```
#### Wie es technisch funktioniert:
1. Der geteilte Ordner existiert als Entität in `workspace_shared_folders`.
2. Beim Eigentümer liegt der Ordner unter seinem Pfad.
3. Jeder Empfänger erhält in `workspace_folder_mounts` seinen **eigenen lokalen `mount_path`**.
4. **Unabhängiges Verschieben:** Schiebt Bob den Ordner an eine andere Stelle in seinem Dateibaum, wird **ausschließlich sein persönlicher `mount_path`** aktualisiert. Alice und andere Teammitglieder bemerken davon nichts.
5. **Inhaltliche Synchronisation:** Verschiebt, erstellt oder bearbeitet jemand eine Notiz *innerhalb* des geteilten Ordners, wird der relative Unterpfad (`sub_folder_path`) synchronisiert, sodass alle dieselbe interne Dokumentstruktur sehen.
---
## 📄 4. Entkoppelte Notizen-Freigabe (`doc_user_folders`)
Dasselbe Prinzip gilt für einzeln geteilte Dokumente:
- Erhält Benutzer Bob eine einzelne Notiz von Alice freigegeben, kann Bob diese Notiz in jeden beliebigen seiner eigenen Ordner einsortieren.
- Seine persönliche Zuordnung wird in der Tabelle `doc_user_folders` (`user_id`, `doc_id`, `folder_path`) gespeichert.
- Die Original-Notiz von Alice verbleibt an ihrem ursprünglichen Platz.
---
## 📋 5. Geteilte Aufgaben- & Einkaufslisten
- **Aufgabenlisten (`task_list_shares`):** Freigabe für Teams oder Einzelbenutzer mit Lese- oder Schreibrechten.
- **Geteilte Listen (`list_shares`):**
- Rolle `editor`: Einträge hinzufügen, ändern, abhaken und löschen.
- Rolle `viewer`: Nur Lesezugriff (Echtzeit-Ansicht).
- **Einheitlicher Freigabe-Dialog:** [`UnifiedShareModal.tsx`](../../frontend/src/components/UnifiedShareModal.tsx) bündelt alle Freigabeoptionen (Teams, Benutzer, Berechtigungsstufen) in einer konsistenten Benutzeroberfläche.
Doku/theming.md
+109
View File
@@ -0,0 +1,109 @@
# 🎨 Single-File CSS Theming Engine & Design-System
MindSift implementiert ein radikal einfaches, modulares Theming-System. Anstatt Farb- und Geometriewerte in Dutzenden Tailwind-Klassen über hunderte Komponenten zu verstreuen, wird das komplette Erscheinungsbild der Plattform über **eine einzige CSS-Datei pro Theme** gesteuert.
---
## 💡 1. Philosophie: 1 Datei = 1 komplettes Theme
Jedes Theme liegt im Verzeichnis [`frontend/src/themes/`](../../frontend/src/themes/) und definiert alle visuellen Eigenschaften über standardisierte CSS-Variablen.
### Trennung von Struktur und Design
- **React-Komponenten** definieren ausschließlich semantische Klassen (wie `.panel-surface`, `.input-field`, `.btn-primary`, `text-main`, `bg-canvas`).
- **Die aktive Theme-CSS-Datei** bestimmt, welche konkreten Farben, Kontraste, Rahmenbreiten und Ecken-Rundungen diesen Klassen zugewiesen werden.
---
## 🧱 2. Die 6 standardisierten Variablen-Blöcke
Jede Theme-Datei gliedert sich in sechs exakt definierte Bereiche:
```css
:root[data-theme="dein-theme"] {
/* ==========================================================================
1. AKZENTFARBE (Fokus, Primäraktionen, Highlights)
========================================================================== */
--accent: #2563eb; /* Primäre Schaltflächen & aktive Tabs */
--accent-hover: #3b82f6; /* Hover-Zustand */
--accent-dim: rgba(37, 99, 235, 0.15);/* Transparenter Hintergrund für Badges */
--accent-contrast: #ffffff; /* Textfarbe auf Akzentflächen */
/* ==========================================================================
2. OBERFLÄCHEN & HINTERGRÜNDE
========================================================================== */
--bg-canvas: #0e1013; /* Grundhintergrund der gesamten Seite */
--bg-panel: #16181d; /* Panels, Karten, Modals & Seitenleisten */
--bg-panel-elevated: #1f2229; /* Hervorgehobene Elemente & Hover-Panels */
--bg-input: #121418; /* Hintergrund von Textfeldern */
--bg-code: #0b0c0f; /* Codeblöcke & Tastatur-Badges */
--bg-overlay: rgba(0, 0, 0, 0.75); /* Modal-Hintergrund Backdrop */
/* ==========================================================================
3. TEXT & KONTRASTE
========================================================================== */
--text-main: #f4f4f5; /* Haupttext, Überschriften, Labels */
--text-muted: #a1a1aa; /* Sekundärtext, Beschreibungen */
--text-faint: #71717a; /* Dezentester Text, Tastaturhinweise */
--text-on-accent: #ffffff; /* Lesbarer Text auf --accent */
/* ==========================================================================
4. RAHMEN, LINIEN & SCHATTEN
========================================================================== */
--border-color: rgba(255, 255, 255, 0.08); /* Standard-Trennlinien */
--border-strong: rgba(255, 255, 255, 0.18);/* Fokussierte Rahmen, Tabs */
--shadow-panel: 0 4px 20px -2px rgba(0, 0, 0, 0.45); /* Box-Shadows */
/* ==========================================================================
5. STATUS- & SIGNALFARBEN
========================================================================== */
--status-ok: #22c55e; /* Erledigt, Online, Aktiv (Grün) */
--status-err: #ef4444; /* Fehler, Löschen, Dringend (Rot) */
--status-warn: #eab308; /* Wichtig, Warnung, Gesperrt (Gelb) */
--status-info: #3b82f6; /* Hinweise, Information (Blau) */
/* ==========================================================================
6. RUNDUNGEN / GEOMETRIE
========================================================================== */
--radius-card: 0px; /* Eckenrundung von Panels & Karten */
--radius-btn: 2px; /* Eckenrundung von Schaltflächen */
--radius-input: 2px; /* Eckenrundung von Eingabefeldern */
--radius-checkbox: 2px; /* Checkboxen */
--radius-pill: 9999px; /* Pillen & Status-Badges */
}
```
---
## 🎭 3. Verfügbare Standard-Themes
| Theme-ID | Datei | Stil & Charakter | Standard-Geometrie |
| :--- | :--- | :--- | :--- |
| `dark` | [`theme-dark.css`](../../frontend/src/themes/theme-dark.css) | Standard Dark Slate / Monochrom | Streng eckig (`0px` Cards, `2px` Buttons) |
| `light` | [`theme-light.css`](../../frontend/src/themes/theme-light.css) | Daylight Clean White / Minimalistisch | Modern dezent (`4px` Cards, `4px` Buttons) |
| `high-contrast` | [`theme-high-contrast.css`](../../frontend/src/themes/theme-high-contrast.css) | Reines Schwarz/Weiß mit AAA-Kontrast | Streng eckig (`0px`, kräftige Rahmen) |
| `soft` | [`theme-soft.css`](../../frontend/src/themes/theme-soft.css) | Warmes Soft Slate mit Indigo-Akzent | Weich gerundet (`12px` Cards, `8px` Buttons) |
| *Template* | [`theme-template.css`](../../frontend/src/themes/theme-template.css) | Vollständig dokumentierte Kopiervorlage | Frei anpassbar |
---
## 🔌 4. Tailwind-Bridge & Semantische Klassen
In [`frontend/src/index.css`](../../frontend/src/index.css) und `tailwind.config.js` sind die semantischen Utility-Klassen definiert, die sich automatisch an das gewählte Theme anpassen:
- `.panel-surface`: Wendet `--bg-panel`, `--border-color` und `--radius-card` an.
- `.input-field`: Wendet `--bg-input`, `--border-color`, `--radius-input` und `--text-main` an.
- `.btn-primary`: Akzent-Schaltfläche mit `--accent`, `--accent-hover`, `--text-on-accent` und `--radius-btn`.
- `.btn-action`: Sekundär-Aktion mit dezentem Rahmen und Hover-Zustand.
- `.checkbox-square`: Kontrollkästchen mit `--radius-checkbox`.
- `.capture-pill`: Spezial-Pille für die Desktop-Schnelleingabeleiste mit `--radius-pill`.
---
## 🛠️ 5. Ein eigenes Theme erstellen
Um ein neues Theme (z.B. „Nordic Blue" oder „Cyberpunk") hinzuzufügen:
1. Kopiere `frontend/src/themes/theme-template.css` nach `frontend/src/themes/theme-meintheme.css`.
2. Ändere den Selektor `:root[data-theme="template"]` in `:root[data-theme="meintheme"]`.
3. Passe Farben und Rundungen nach Belieben an.
4. Importiere die CSS-Datei in [`frontend/src/lib/theme.ts`](../../frontend/src/lib/theme.ts) und trage das Theme im `AVAILABLE_THEMES`-Array ein.
5. Das neue Theme steht sofort in den Kontoeinstellungen und im Profil-Dropdown zur Verfügung!
frontend/src/App.tsx
+227 -33
View File
@@ -18,8 +18,13 @@ import {
Smartphone,
Share,
Users,
Calendar,
AlertTriangle,
Flame,
Mic,
MicOff,
} from 'lucide-react';
import { AuthStatus, DashboardStats, SharedList, Thought, User } from './lib/types';
import { AuthStatus, DashboardStats, PriorityLevel, SharedList, Thought, User } from './lib/types';
import {
api,
clearToken,
@@ -46,6 +51,7 @@ import { HelpView } from './features/help/HelpView';
import { GroupsView } from './features/teams/GroupsView';
import { useMobileActions } from './context/MobileActionContext';
import { MobileHeaderMenu } from './components/MobileHeaderMenu';
import { UserAvatar } from './components/UserAvatar';
type ActiveTab =
| 'triage'
@@ -131,11 +137,93 @@ export const App: React.FC = () => {
// Mobile Navigation & Quick-Action State
const [showMobileCapture, setShowMobileCapture] = useState(false);
const [showMobileProfile, setShowMobileProfile] = useState(false);
const { isMenuOpen, setIsMenuOpen, closeMenu, setGroups } = useMobileActions();
const [mobileTriageContent, setMobileTriageContent] = useState('');
const [mobileTriagePriority, setMobileTriagePriority] = useState<PriorityLevel>('normal');
const [mobileTriageDueDate, setMobileTriageDueDate] = useState('');
const [mobileVoiceActive, setMobileVoiceActive] = useState(false);
const [isVoiceCaptured, setIsVoiceCaptured] = useState(false);
const mobileRecognitionRef = useRef<any>(null);
const toggleMobileVoice = () => {
const SpeechRecognition =
(window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
if (!SpeechRecognition) {
alert('Spracheingabe wird von diesem Browser leider nicht unterstützt.');
return;
}
if (mobileVoiceActive && mobileRecognitionRef.current) {
mobileRecognitionRef.current.stop();
setMobileVoiceActive(false);
return;
}
try {
const recognition = new SpeechRecognition();
recognition.lang = 'de-DE';
recognition.continuous = false;
recognition.interimResults = true;
recognition.onstart = () => {
setMobileVoiceActive(true);
triggerHaptic(20);
};
recognition.onresult = (event: any) => {
let transcript = '';
for (let i = 0; i < event.results.length; i++) {
transcript += event.results[i][0].transcript;
}
setMobileTriageContent((prev) => {
const base = prev.replace(/\s*\[…\]$/, '').trim();
return base ? `${base} ${transcript}` : transcript;
});
setIsVoiceCaptured(true);
};
recognition.onerror = () => setMobileVoiceActive(false);
recognition.onend = () => setMobileVoiceActive(false);
mobileRecognitionRef.current = recognition;
recognition.start();
} catch {
setMobileVoiceActive(false);
}
};
const handleMobileCreateTriage = async (e: React.FormEvent) => {
e.preventDefault();
const trimmed = mobileTriageContent.trim();
if (!trimmed) return;
try {
const thought = await api.captureThought(
trimmed,
mobileTriagePriority,
isVoiceCaptured ? 'voice' : 'manual',
mobileTriageDueDate,
{ target: 'inbox' }
);
handleCaptured(thought, 'inbox');
setMobileTriageContent('');
setMobileTriagePriority('normal');
setMobileTriageDueDate('');
setIsVoiceCaptured(false);
setShowMobileCapture(false);
triggerHaptic(20);
} catch (err: any) {
alert(`Fehler beim Speichern: ${err.message || 'Unbekannter Fehler'}`);
}
};
const openMobileTriageCapture = () => {
setMobileTriageContent('');
setMobileTriagePriority('normal');
setMobileTriageDueDate('');
setIsVoiceCaptured(false);
setMobileVoiceActive(false);
setShowMobileCapture(true);
};
const { isMenuOpen, setIsMenuOpen, closeMenu, setGroups, primaryAction, setPrimaryAction } = useMobileActions();
useEffect(() => {
closeMenu();
if (activeTab === 'triage') {
setPrimaryAction(() => openMobileTriageCapture);
setGroups([
{
id: 'triage-actions',
@@ -146,7 +234,7 @@ export const App: React.FC = () => {
label: 'Neuen Gedanken erfassen',
icon: <Plus className="w-4 h-4" />,
variant: 'accent',
onClick: () => setShowMobileCapture(true),
onClick: () => openMobileTriageCapture(),
},
{
id: 'refresh-deck',
@@ -469,7 +557,7 @@ export const App: React.FC = () => {
const handleTriggerAddButton = () => {
triggerHaptic(20);
if (window.innerWidth < 640) {
setShowMobileCapture(true);
openMobileTriageCapture();
} else {
window.scrollTo({ top: 0, behavior: 'smooth' });
setCaptureFocusCount((c) => c + 1);
@@ -588,9 +676,7 @@ export const App: React.FC = () => {
}`}
title="Profil & Einstellungen"
>
<div className="w-8 h-8 rounded-full bg-accent text-on-accent text-xs font-bold shadow-sm flex items-center justify-center">
{user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
<UserAvatar user={user} size="sm" className="shadow-sm" />
</button>
</div>
</div>
@@ -632,9 +718,7 @@ export const App: React.FC = () => {
className="h-8 flex items-center gap-2 text-xs font-medium text-main hover:opacity-85 transition-opacity cursor-pointer group"
title="Benutzermenü öffnen"
>
<div className="w-7 h-7 rounded-full bg-accent text-on-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0">
{user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
<UserAvatar user={user} size="sm" />
<span className="max-w-[130px] truncate hidden sm:inline text-main font-medium">
{user.displayName}
</span>
@@ -644,13 +728,16 @@ export const App: React.FC = () => {
{showProfileMenu && (
<div className="absolute right-0 top-full mt-1.5 w-64 panel-surface shadow-panel z-50 divide-y divide-border text-xs">
{/* User Info Header */}
<div className="p-3 bg-canvas">
<div className="p-3 bg-canvas flex items-center gap-2.5">
<UserAvatar user={user} size="md" className="border border-border/70" />
<div className="min-w-0 flex-1">
<p className="font-bold text-main truncate">{user.displayName}</p>
<p className="text-[11px] text-muted truncate">{user.email}</p>
<span className="inline-block mt-1.5 px-1.5 py-0.5 bg-panel border border-border rounded-btn text-[10px] text-accent font-semibold">
<span className="inline-block mt-1 px-1.5 py-0.5 bg-panel border border-border rounded-btn text-[10px] text-accent font-semibold">
{roleLabel}
</span>
</div>
</div>
{/* Theme Quick Switcher */}
<div className="p-2.5 space-y-1.5">
@@ -966,7 +1053,11 @@ export const App: React.FC = () => {
type="button"
onClick={() => {
triggerHaptic(15);
setShowMobileCapture(true);
if (primaryAction) {
primaryAction();
} else {
openMobileTriageCapture();
}
}}
className="w-14 h-14 -mt-6 rounded-full bg-accent text-on-accent shadow-lg flex items-center justify-center active:scale-90 transition-transform border-4 border-panel cursor-pointer"
title="Schnell erfassen (+)"
@@ -1015,44 +1106,149 @@ export const App: React.FC = () => {
</button>
</nav>
{/* MOBILE QUICK-ADD BOTTOM SHEET / MODAL */}
{/* MOBILE QUICK-ADD BOTTOM SHEET / MODAL (DESIGN-ALIGNED WITH TASKS VIEW) */}
{showMobileCapture && (
<div
className="sm:hidden fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
onClick={() => setShowMobileCapture(false)}
>
<div
className="w-full bg-panel border-t border-border rounded-t-2xl shadow-panel p-4 pb-[calc(1.5rem+env(safe-area-inset-bottom))] animate-in slide-in-from-bottom duration-200"
className="w-full max-h-[85vh] overflow-y-auto bg-panel border-t border-border rounded-t-2xl shadow-panel p-4 pb-[calc(1.5rem+env(safe-area-inset-bottom))] animate-in slide-in-from-bottom duration-200"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between pb-3 border-b border-border mb-3">
<div className="flex items-center gap-2">
<div className="w-6 h-6 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
<Plus className="w-4 h-4" />
<div className="w-7 h-7 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
<Layers className="w-4 h-4" />
</div>
<h3 className="text-sm font-semibold text-main">Schnell erfassen</h3>
<h3 className="text-sm font-semibold text-main">Quick Dump erfassen</h3>
</div>
<button
type="button"
onClick={() => setShowMobileCapture(false)}
className="p-1 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
className="p-1.5 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
>
<X className="w-5 h-5" />
</button>
</div>
{/* InstantCaptureBar */}
<div className="pt-1">
<InstantCaptureBar
onCaptured={(thought, target) => {
handleCaptured(thought, target);
setShowMobileCapture(false);
<form onSubmit={handleMobileCreateTriage} className="space-y-3">
{/* Text Input with Voice Dictation */}
<div>
<label className="text-[11px] font-semibold text-muted block mb-1">
Gedanke / Quick Dump
</label>
<div className="relative">
<input
type="text"
autoFocus
value={mobileTriageContent}
onChange={(e) => setMobileTriageContent(e.target.value)}
placeholder="Was geht dir durch den Kopf?…"
className="w-full input-field px-3 py-2 pr-10 text-sm"
/>
<button
type="button"
onClick={toggleMobileVoice}
className={`absolute right-1.5 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full flex items-center justify-center transition-colors cursor-pointer ${
mobileVoiceActive
? 'bg-accent text-on-accent animate-pulse'
: 'text-muted hover:text-main hover:bg-panel-elevated'
}`}
title="Spracheingabe"
>
{mobileVoiceActive ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
</button>
</div>
</div>
{/* Priority - 4 Buttons (Identical to TasksView) */}
<div className="space-y-1.5 pt-1">
<label className="text-[11px] font-semibold text-muted block">Priorität</label>
<div className="grid grid-cols-4 gap-1.5">
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
const config: Record<
PriorityLevel,
{ label: string; icon?: React.ReactNode; activeClass: string }
> = {
low: {
label: 'Niedrig',
activeClass: 'bg-canvas border-strong text-main font-semibold shadow-xs',
},
normal: {
label: 'Normal',
activeClass: 'bg-accent/15 border-accent text-accent font-semibold shadow-xs',
},
high: {
label: 'Wichtig',
icon: <AlertTriangle className="w-3 h-3 text-status-warn" />,
activeClass:
'bg-status-warn/15 border-status-warn text-status-warn font-semibold shadow-xs',
},
urgent: {
label: 'Dringend',
icon: <Flame className="w-3 h-3 text-status-err" />,
activeClass:
'bg-status-err/15 border-status-err text-status-err font-semibold shadow-xs',
},
};
const active = mobileTriagePriority === p;
const item = config[p];
return (
<button
key={p}
type="button"
onClick={() => {
triggerHaptic(10);
setMobileTriagePriority(p);
}}
lists={lists}
autoFocusTrigger={Date.now()}
className={`h-9 px-1 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
active
? item.activeClass
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
{item.icon}
<span className="truncate">{item.label}</span>
</button>
);
})}
</div>
</div>
{/* Due Date (Optional) */}
<div className="space-y-1 pt-1">
<label className="text-[11px] font-semibold text-muted flex items-center gap-1">
<Calendar className="w-3.5 h-3.5 text-accent" />
<span>Fällig am (optional)</span>
</label>
<input
type="date"
value={mobileTriageDueDate}
onChange={(e) => setMobileTriageDueDate(e.target.value)}
className="w-full input-field px-3 py-2 text-xs"
/>
</div>
{/* Bottom Buttons */}
<div className="pt-2 flex justify-end gap-2">
<button
type="button"
onClick={() => setShowMobileCapture(false)}
className="btn-ghost h-10 px-4 text-xs cursor-pointer"
>
Abbrechen
</button>
<button
type="submit"
disabled={!mobileTriageContent.trim()}
className="btn-primary h-10 px-5 text-xs font-semibold disabled:opacity-40 cursor-pointer"
>
Gedanke erfassen
</button>
</div>
</form>
</div>
</div>
)}
@@ -1060,7 +1256,7 @@ export const App: React.FC = () => {
{/* MOBILE USER PROFILE SHEET */}
{showMobileProfile && (
<div
className="sm:hidden fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
onClick={() => setShowMobileProfile(false)}
>
<div
@@ -1070,9 +1266,7 @@ export const App: React.FC = () => {
{/* User Info Header */}
<div className="flex items-center justify-between pb-2">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-accent text-on-accent text-sm font-bold flex items-center justify-center flex-shrink-0">
{user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
<UserAvatar user={user} size="lg" className="border border-border/80 shadow-sm" />
<div>
<p className="font-bold text-sm text-main">{user.displayName}</p>
<p className="text-xs text-muted">{user.email}</p>
@@ -1219,7 +1413,7 @@ export const App: React.FC = () => {
{/* IMMEDIATE MOBILE WEB-APP INSTALLATION OFFER SHEET */}
{showPwaInstallModal && !isStandaloneApp && (
<div
className="sm:hidden fixed inset-0 z-50 flex items-end justify-center bg-black/65 backdrop-blur-xs animate-in fade-in duration-150"
className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/65 backdrop-blur-xs animate-in fade-in duration-150"
onClick={handleDismissPwaModal}
>
<div
frontend/src/components/MobileHeaderMenu.tsx
+2 -2
View File
@@ -13,10 +13,10 @@ export const MobileHeaderMenu: React.FC<MobileHeaderMenuProps> = ({ activeTabLab
if (!isMenuOpen) return null;
return (
<div className="sm:hidden fixed inset-0 z-50">
<div className="sm:hidden fixed inset-0 !m-0 z-50">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
className="fixed inset-0 !m-0 bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
onClick={() => {
triggerHaptic(8);
closeMenu();
frontend/src/components/UnifiedShareModal.tsx
+13 -9
View File
@@ -10,6 +10,7 @@ import {
} from 'lucide-react';
import { User, Team, UnifiedShare } from '../lib/types';
import { UserAutocomplete } from '../features/UserAutocomplete';
import { UserAvatar } from './UserAvatar';
export interface UnifiedShareModalProps {
isOpen: boolean;
@@ -96,7 +97,7 @@ export const UnifiedShareModal: React.FC<UnifiedShareModalProps> = ({
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
onClick={(e) => {
if (e.target === e.currentTarget) onClose();
}}
@@ -284,15 +285,18 @@ export const UnifiedShareModal: React.FC<UnifiedShareModalProps> = ({
className="p-2.5 bg-canvas border border-border rounded-btn flex items-center justify-between gap-3 text-xs hover:border-border/80 transition-colors"
>
<div className="flex items-center gap-2.5 min-w-0">
<div
className={`w-7 h-7 rounded-btn flex items-center justify-center shrink-0 ${
isTeam
? 'bg-accent/15 text-accent'
: 'bg-surface-2 text-main border border-border'
}`}
>
{isTeam ? <Users className="w-3.5 h-3.5" /> : <UserIcon className="w-3.5 h-3.5" />}
{isTeam ? (
<div className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 bg-accent/15 text-accent border border-accent/25">
<Users className="w-3.5 h-3.5" />
</div>
) : (
<UserAvatar
avatarUrl={sh.avatarUrl || collaborators.find((c) => c.id === sh.targetId)?.avatarUrl}
name={sh.targetName || sh.targetEmail}
size="sm"
className="border border-border/80"
/>
)}
<div className="truncate">
<div className="font-medium text-main truncate flex items-center gap-1.5">
<span className="truncate">{sh.targetName || (isTeam ? 'Gruppe' : sh.targetEmail || 'Benutzer')}</span>
frontend/src/components/UserAvatar.tsx
+157
View File
@@ -0,0 +1,157 @@
import React, { useState } from 'react';
export interface UserAvatarProps {
user?: {
displayName?: string;
email?: string;
avatarUrl?: string;
} | null;
name?: string;
avatarUrl?: string;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
className?: string;
alt?: string;
}
const SIZE_MAP = {
xs: 'w-5 h-5 text-[10px]',
sm: 'w-7 h-7 text-xs',
md: 'w-9 h-9 text-sm',
lg: 'w-12 h-12 text-base',
xl: 'w-20 h-20 text-2xl',
};
const BG_COLORS = [
'bg-primary/20 text-primary border-primary/30',
'bg-secondary/20 text-secondary border-secondary/30',
'bg-accent/20 text-accent border-accent/30',
'bg-info/20 text-info border-info/30',
'bg-success/20 text-success border-success/30',
'bg-warning/20 text-warning border-warning/30',
];
function getInitials(name?: string, email?: string): string {
const cleanName = (name || '').trim();
if (cleanName) {
const parts = cleanName.split(/\s+/);
if (parts.length >= 2) {
return (parts[0][0] + parts[1][0]).toUpperCase();
}
return cleanName.slice(0, 2).toUpperCase();
}
const cleanEmail = (email || '').trim();
if (cleanEmail) {
return cleanEmail.slice(0, 2).toUpperCase();
}
return '?';
}
function getColorIndex(str: string): number {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return Math.abs(hash) % BG_COLORS.length;
}
export function isEmoji(str?: string): boolean {
if (!str) return false;
const trimmed = str.trim();
// Simple heuristic: length <= 8 and not a URL or base64 image
return !trimmed.startsWith('data:') && !trimmed.startsWith('http') && !trimmed.startsWith('/') && trimmed.length <= 8;
}
export const UserAvatar: React.FC<UserAvatarProps> = ({
user,
name,
avatarUrl,
size = 'md',
className = '',
alt,
}) => {
const [imageError, setImageError] = useState(false);
const effectiveAvatarUrl = avatarUrl !== undefined ? avatarUrl : user?.avatarUrl;
const effectiveName = name !== undefined ? name : (user?.displayName || user?.email || '');
const effectiveEmail = user?.email || '';
const sizeClass = SIZE_MAP[size] || SIZE_MAP.md;
const initials = getInitials(effectiveName, effectiveEmail);
const colorIndex = getColorIndex(effectiveName || effectiveEmail || 'user');
const colorClass = BG_COLORS[colorIndex];
const hasImage = Boolean(
effectiveAvatarUrl &&
!imageError &&
(effectiveAvatarUrl.startsWith('data:image/') ||
effectiveAvatarUrl.startsWith('http://') ||
effectiveAvatarUrl.startsWith('https://') ||
effectiveAvatarUrl.startsWith('/'))
);
const isEmojiAvatar = Boolean(effectiveAvatarUrl && isEmoji(effectiveAvatarUrl));
return (
<div
className={`inline-flex items-center justify-center rounded-full aspect-square shrink-0 select-none overflow-hidden font-semibold transition-all ${sizeClass} ${className}`}
title={effectiveName || alt}
>
{hasImage ? (
<img
src={effectiveAvatarUrl}
alt={alt || effectiveName || 'Avatar'}
onError={() => setImageError(true)}
className="w-full h-full object-cover rounded-full"
/>
) : isEmojiAvatar ? (
<div className="w-full h-full flex items-center justify-center bg-base-300/80 rounded-full">
<span className="leading-none">{effectiveAvatarUrl}</span>
</div>
) : (
<div className={`w-full h-full flex items-center justify-center rounded-full border ${colorClass}`}>
<span className="leading-none tracking-tight">{initials}</span>
</div>
)}
</div>
);
};
/**
* Resizes and center-crops an uploaded image file to a compact base64 Data URL.
*/
export async function resizeImageToDataUrl(file: File, maxSize = 256): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = () => reject(new Error('Fehler beim Lesen der Datei'));
reader.onload = (e) => {
const img = new Image();
img.onerror = () => reject(new Error('Fehler beim Laden des Bildes'));
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = maxSize;
canvas.height = maxSize;
const ctx = canvas.getContext('2d');
if (!ctx) {
reject(new Error('Canvas Context konnte nicht erstellt werden'));
return;
}
// Center crop calculation
const minDim = Math.min(img.width, img.height);
const sx = (img.width - minDim) / 2;
const sy = (img.height - minDim) / 2;
ctx.drawImage(img, sx, sy, minDim, minDim, 0, 0, maxSize, maxSize);
// Try webp first, fallback to jpeg
let dataUrl = canvas.toDataURL('image/webp', 0.85);
if (!dataUrl.startsWith('data:image/webp')) {
dataUrl = canvas.toDataURL('image/jpeg', 0.85);
}
resolve(dataUrl);
};
img.src = e.target?.result as string;
};
reader.readAsDataURL(file);
});
}
frontend/src/context/MobileActionContext.tsx
+11
View File
@@ -22,6 +22,8 @@ interface MobileActionContextValue {
isMenuOpen: boolean;
setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
closeMenu: () => void;
primaryAction?: () => void;
setPrimaryAction: (fn?: () => void) => void;
}
const MobileActionContext = createContext<MobileActionContextValue>({
@@ -30,11 +32,14 @@ const MobileActionContext = createContext<MobileActionContextValue>({
isMenuOpen: false,
setIsMenuOpen: () => {},
closeMenu: () => {},
primaryAction: undefined,
setPrimaryAction: () => {},
});
export const MobileActionProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [groups, setGroupsState] = useState<MobileMenuGroup[]>([]);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [primaryAction, setPrimaryActionState] = useState<(() => void) | undefined>(undefined);
const setGroups = useCallback((newGroups: MobileMenuGroup[]) => {
setGroupsState(newGroups);
@@ -44,6 +49,10 @@ export const MobileActionProvider: React.FC<{ children: React.ReactNode }> = ({
setIsMenuOpen(false);
}, []);
const setPrimaryAction = useCallback((fn?: () => void) => {
setPrimaryActionState(() => fn);
}, []);
return (
<MobileActionContext.Provider
value={{
@@ -52,6 +61,8 @@ export const MobileActionProvider: React.FC<{ children: React.ReactNode }> = ({
isMenuOpen,
setIsMenuOpen,
closeMenu,
primaryAction,
setPrimaryAction,
}}
>
{children}
frontend/src/features/UserAutocomplete.tsx
+3 -6
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { Search, X, Check } from 'lucide-react';
import { User } from '../lib/types';
import { UserAvatar } from '../components/UserAvatar';
interface UserAutocompleteProps {
users: User[];
@@ -101,9 +102,7 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
{selectedUser ? (
<div className="h-8 px-2.5 bg-panel-elevated border border-accent/40 rounded-btn flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2 min-w-0">
<div className="w-5 h-5 rounded-full bg-accent/20 text-accent font-bold text-[10px] flex items-center justify-center shrink-0">
{(selectedUser.displayName || selectedUser.email || '?')[0].toUpperCase()}
</div>
<UserAvatar user={selectedUser} size="xs" />
<span className="font-semibold text-main truncate">
{selectedUser.displayName || selectedUser.email}
</span>
@@ -170,9 +169,7 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
}`}
>
<div className="flex items-center gap-2 min-w-0">
<div className="w-5 h-5 rounded-full bg-accent/20 text-accent font-bold text-[10px] flex items-center justify-center shrink-0">
{(u.displayName || u.email || '?')[0].toUpperCase()}
</div>
<UserAvatar user={u} size="xs" />
<div className="truncate">
<span className="font-semibold text-main">
{u.displayName || u.email}
frontend/src/features/capture/InstantCaptureBar.tsx
+70 -38
View File
@@ -11,6 +11,8 @@ import {
FileText,
Layers,
ChevronDown,
AlertTriangle,
Flame,
} from 'lucide-react';
import { PriorityLevel, SharedList, Thought } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
@@ -21,19 +23,27 @@ interface InstantCaptureBarProps {
onCaptured: (thought: Thought, target?: CaptureTarget) => void;
lists?: SharedList[];
autoFocusTrigger?: number;
inlineOptions?: boolean;
defaultShowOptions?: boolean;
hideTargetPicker?: boolean;
fixedTarget?: CaptureTarget;
}
export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
onCaptured,
lists = [],
autoFocusTrigger = 0,
inlineOptions = false,
defaultShowOptions = false,
hideTargetPicker = false,
fixedTarget,
}) => {
const [content, setContent] = useState('');
const [priority, setPriority] = useState<PriorityLevel>('normal');
const [dueDate, setDueDate] = useState('');
const [target, setTarget] = useState<CaptureTarget>('inbox');
const [target, setTarget] = useState<CaptureTarget>(fixedTarget || 'inbox');
const [targetListId, setTargetListId] = useState<string>('');
const [showOptions, setShowOptions] = useState(false);
const [showOptions, setShowOptions] = useState(defaultShowOptions || hideTargetPicker);
const [isListening, setIsListening] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [justSavedLabel, setJustSavedLabel] = useState<string | null>(null);
@@ -72,6 +82,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
// Close dropdown on outside click
useEffect(() => {
if (inlineOptions) return;
const handleClickOutside = (e: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setShowOptions(false);
@@ -79,7 +90,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
}, [inlineOptions]);
// Global keyboard shortcut: 'c' or '/' focuses the Instant Capture input immediately
useEffect(() => {
@@ -164,7 +175,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
const trimmed = content.trim();
if (!trimmed || isSubmitting) return;
const effectiveTarget = overrideTarget || target;
const effectiveTarget = fixedTarget || overrideTarget || target;
const effectiveListId =
overrideListId || targetListId || (lists.length > 0 ? lists[0].id : '');
const capturedPriority = priority;
@@ -176,8 +187,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
setIsMultiline(false);
setPriority('normal');
setDueDate('');
setTarget('inbox');
setShowOptions(false);
setTarget(fixedTarget || 'inbox');
setShowOptions(defaultShowOptions || hideTargetPicker);
setIsSubmitting(true);
triggerHaptic(15);
if (inputRef.current) {
@@ -191,7 +202,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
? 'Auf Liste!'
: effectiveTarget === 'document'
? 'Als Notiz!'
: 'Im Dump!';
: 'In Triage!';
setJustSavedLabel(savedMsg);
setTimeout(() => setJustSavedLabel(null), 1600);
inputRef.current?.focus();
@@ -270,6 +281,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
placeholder={
isListening
? 'Ich höre zu…'
: hideTargetPicker || fixedTarget === 'inbox'
? 'Quick Dump erfassen… (Enter zum Speichern)'
: target === 'task'
? 'Neue Aufgabe direkt anlegen… (Enter / Shift+Enter für Mehrzeiler)'
: target === 'list_item'
@@ -288,12 +301,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
isMultiline ? 'self-end mb-0.5' : ''
}`}
>
{/* Target & Options Toggle Pill */}
{/* Target & Options Toggle Pill (Hidden when target picker is disabled) */}
{!hideTargetPicker && (
<button
type="button"
onClick={() => setShowOptions((prev) => !prev)}
title="Ziel wählen (Quick Dump, direkt als Aufgabe, auf Liste oder als Notiz) & Optionen"
className={`h-6 px-2.5 capture-pill rounded-full text-[11px] flex items-center gap-1 transition-colors ${
className={`h-6 px-2.5 capture-pill rounded-full text-[11px] flex items-center gap-1 transition-colors cursor-pointer ${
showOptions || target !== 'inbox' || priority !== 'normal' || dueDate
? 'bg-accent-dim text-accent border border-accent-border font-medium'
: 'text-muted hover:text-main hover:bg-panel-elevated border border-transparent'
@@ -308,12 +322,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
) : (
<Layers className="w-3 h-3" />
)}
<span className="hidden md:inline max-w-[110px] truncate">
<span className={`${inlineOptions ? 'inline' : 'hidden md:inline'} max-w-[110px] truncate`}>
{getTargetLabel()}
</span>
{dueDate && <span className="hidden lg:inline text-[10px] opacity-80">• {dueDate.slice(5)}</span>}
<ChevronDown className="w-3 h-3 opacity-70" />
<ChevronDown className={`w-3 h-3 opacity-70 transition-transform ${showOptions ? 'rotate-180' : ''}`} />
</button>
)}
{/* Voice Dictation Button */}
<button
@@ -342,13 +357,15 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{justSavedLabel ? (
<>
<Check className="w-3 h-3" />
<span className="hidden sm:inline">{justSavedLabel}</span>
<span className="inline">{justSavedLabel}</span>
</>
) : (
<>
<ArrowUp className="w-3 h-3" />
<span className="hidden sm:inline">
{target === 'task'
<span className="inline">
{hideTargetPicker || (fixedTarget || target) === 'inbox'
? 'Quick Dump'
: target === 'task'
? 'Als Aufgabe'
: target === 'list_item'
? 'Auf Liste'
@@ -362,10 +379,18 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div>
</div>
{/* Expandable Target & Metadata Panel (Theme-controlled Dropdown) */}
{/* Expandable Target & Metadata Panel (Theme-controlled Dropdown or Inline) */}
{showOptions && (
<div className="absolute top-full left-0 right-0 mt-1.5 z-50 p-3 panel-surface shadow-panel space-y-3 text-xs">
{/* Row 1: Where should this entry go? */}
<div
className={
inlineOptions
? 'mt-3 p-3 panel-surface border border-border rounded-xl space-y-3 text-xs animate-in fade-in duration-150'
: 'absolute top-full left-0 right-0 mt-1.5 z-50 p-3 panel-surface shadow-panel space-y-3 text-xs'
}
>
{/* Row 1: Where should this entry go? (Omitted when hideTargetPicker is true) */}
{!hideTargetPicker && (
<>
<div>
<div className="flex items-center justify-between mb-1.5">
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted">
@@ -386,7 +411,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
executeCapture('inbox');
}
}}
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${
target === 'inbox'
? 'bg-accent-dim border-accent text-main font-medium'
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
@@ -405,7 +430,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
executeCapture('task');
}
}}
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${
target === 'task'
? 'bg-accent-dim border-accent text-main font-medium'
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
@@ -424,7 +449,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
setTargetListId(lists[0].id);
}
}}
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${
target === 'list_item'
? 'bg-accent-dim border-accent text-main font-medium'
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
@@ -443,7 +468,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
executeCapture('document');
}
}}
className={`h-8 px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors ${
className={`min-h-[36px] px-2.5 border rounded-btn flex items-center gap-1.5 text-left transition-colors cursor-pointer ${
target === 'document'
? 'bg-accent-dim border-accent text-main font-medium'
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
@@ -475,7 +500,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
executeCapture('list_item', lst.id);
}
}}
className={`h-7 px-2.5 border rounded-btn text-xs flex items-center gap-1.5 transition-colors ${
className={`min-h-[30px] px-2.5 border rounded-btn text-xs flex items-center gap-1.5 transition-colors cursor-pointer ${
isSelected
? 'bg-accent text-on-accent border-accent font-medium'
: 'bg-canvas border-border text-muted hover:text-main hover:bg-panel-hover'
@@ -488,46 +513,53 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
})}
</div>
)}
</>
)}
{/* Row 2: Priority & Due Date */}
<div className="pt-2 border-t border-border flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-1.5">
<span className="text-muted mr-1">Priorität:</span>
<div className={`${!hideTargetPicker ? 'pt-2 border-t border-border' : ''} flex flex-wrap items-center justify-between gap-2.5`}>
<div className="flex flex-wrap items-center gap-1.5">
<span className="text-muted text-[11px] font-semibold mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
const labels: Record<PriorityLevel, string> = {
low: 'Niedrig',
normal: 'Normal',
high: 'Hoch',
urgent: 'Dringend',
const config: Record<PriorityLevel, { label: string; icon?: React.ReactNode; activeClass: string }> = {
low: { label: 'Niedrig', activeClass: 'bg-canvas border-strong text-main font-semibold shadow-xs' },
normal: { label: 'Normal', activeClass: 'bg-accent/15 border-accent text-accent font-semibold shadow-xs' },
high: { label: 'Wichtig', icon: <AlertTriangle className="w-3 h-3 text-status-warn" />, activeClass: 'bg-status-warn/15 border-status-warn text-status-warn font-semibold shadow-xs' },
urgent: { label: 'Dringend', icon: <Flame className="w-3 h-3 text-status-err" />, activeClass: 'bg-status-err/15 border-status-err text-status-err font-semibold shadow-xs' },
};
const active = priority === p;
const item = config[p];
return (
<button
key={p}
type="button"
onClick={() => setPriority(p)}
className={`px-2.5 py-0.5 border rounded-btn transition-colors text-xs ${
onClick={() => {
triggerHaptic(10);
setPriority(p);
}}
className={`min-h-[30px] px-2.5 py-1 border rounded-btn text-xs flex items-center gap-1 transition-colors cursor-pointer ${
active
? 'bg-accent text-on-accent border-accent font-medium'
? item.activeClass
: 'bg-canvas text-muted hover:text-main border-border'
}`}
>
{labels[p]}
{item.icon}
<span>{item.label}</span>
</button>
);
})}
</div>
<div className="flex items-center gap-2">
<span className="text-muted flex items-center gap-1">
<Calendar className="w-3 h-3 text-accent" />
<div className="flex items-center gap-1.5">
<span className="text-muted text-[11px] font-semibold flex items-center gap-1">
<Calendar className="w-3.5 h-3.5 text-accent" />
Fällig am:
</span>
<input
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="input-field px-2 py-0.5 text-xs"
className="input-field px-2.5 py-1 text-xs min-h-[30px]"
/>
</div>
</div>
frontend/src/features/lists/SharedListsView.tsx
+12 -5
View File
@@ -77,7 +77,7 @@ export function deduplicateItems(items: ListItem[]): ListItem[] {
}
export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGlobal, currentUser }) => {
const { setGroups } = useMobileActions();
const { setGroups, setPrimaryAction } = useMobileActions();
const [lists, setLists] = useState<SharedList[]>([]);
const [activeListId, setActiveListId] = useState<string>('');
@@ -714,6 +714,13 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
// Register context-sensitive mobile menu groups behind the MindSift logo
useEffect(() => {
setPrimaryAction(() => {
setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 60);
});
setGroups([
{
id: 'lists-actions',
@@ -786,7 +793,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
}),
},
]);
}, [lists, activeList, completedItems.length, setGroups]);
}, [lists, activeList, completedItems.length, setGroups, setPrimaryAction]);
return (
<div className="w-full space-y-3">
@@ -837,11 +844,11 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div key={lst.id} className="relative group flex items-center">
<button
onClick={() => setActiveListId(lst.id)}
className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
className={`h-8 px-3 text-xs font-medium border flex items-center gap-1.5 transition-colors ${
isSelected
? 'bg-panel border-accent text-main'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
} ${isSelected && lists.length > 1 ? 'rounded-l-btn rounded-r-none border-r-0' : 'rounded-btn'}`}
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
@@ -853,7 +860,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={() => handleDeleteList(lst.id)}
title="Liste löschen"
className="h-8 px-1.5 bg-panel border-y border-r border-accent text-faint hover:text-status-err"
className="h-8 px-2 bg-panel border-y border-r border-accent text-faint hover:text-status-err hover:bg-status-err/10 rounded-r-btn flex items-center justify-center transition-colors cursor-pointer"
>
<X className="w-3 h-3" />
</button>
frontend/src/features/settings/AdminSettingsView.tsx
+4
View File
@@ -21,6 +21,7 @@ import {
UserRole,
} from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
import { UserAvatar } from '../../components/UserAvatar';
interface AdminSettingsViewProps {
currentUser: User;
@@ -556,6 +557,8 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
{users.map((u) => (
<div key={u.id} className="p-3 space-y-2">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<div className="flex items-center gap-2.5">
<UserAvatar user={u} size="sm" className="border border-border/80" />
<div>
<div className="flex items-center gap-2">
<span className="font-bold text-main">{u.displayName}</span>
@@ -567,6 +570,7 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
</div>
<p className="text-muted text-[11px]">{u.email}</p>
</div>
</div>
<div className="flex flex-wrap items-center gap-2">
{/* Role selector */}
frontend/src/features/settings/UserSettingsView.tsx
+148 -6
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import {
User as UserIcon,
Bell,
@@ -15,10 +15,13 @@ import {
Send,
AlertCircle,
Palette,
Upload,
Camera,
} from 'lucide-react';
import { APIKey, User } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
import { AVAILABLE_THEMES, ThemeId } from '../../lib/theme';
import { UserAvatar, resizeImageToDataUrl } from '../../components/UserAvatar';
interface UserSettingsViewProps {
currentUser: User;
@@ -42,9 +45,12 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
// --- Profile State ---
const [displayName, setDisplayName] = useState(currentUser.displayName || '');
const [email, setEmail] = useState(currentUser.email || '');
const [avatarUrl, setAvatarUrl] = useState(currentUser.avatarUrl || '');
const [newPassword, setNewPassword] = useState('');
const [profileMsg, setProfileMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
const [savingProfile, setSavingProfile] = useState(false);
const [isProcessingAvatar, setIsProcessingAvatar] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
// --- Multi-Channel Alarms State ---
const [alarmChannels, setAlarmChannels] = useState<string[]>(
@@ -69,6 +75,7 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
useEffect(() => {
setDisplayName(currentUser.displayName || '');
setEmail(currentUser.email || '');
setAvatarUrl(currentUser.avatarUrl || '');
setAlarmChannels(Array.isArray(currentUser.alarmChannels) ? currentUser.alarmChannels : []);
setAlarmEmail(currentUser.alarmEmail || currentUser.email || '');
setDiscordWebhookUrl(currentUser.discordWebhookUrl || '');
@@ -95,6 +102,34 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
);
};
// --- Handlers: Avatar ---
const handleAvatarFileSelected = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
setIsProcessingAvatar(true);
setProfileMsg(null);
try {
const dataUrl = await resizeImageToDataUrl(file, 256);
setAvatarUrl(dataUrl);
triggerHaptic(10);
} catch (err: any) {
setProfileMsg({ type: 'err', text: err.message || 'Fehler beim Laden des Bildes' });
} finally {
setIsProcessingAvatar(false);
if (fileInputRef.current) fileInputRef.current.value = '';
}
};
const handleSelectPresetAvatar = (preset: string) => {
setAvatarUrl(preset);
triggerHaptic(10);
};
const handleRemoveAvatar = () => {
setAvatarUrl('');
triggerHaptic(10);
};
// --- Handlers: Profile ---
const handleSaveProfile = async (e: React.FormEvent) => {
e.preventDefault();
@@ -104,6 +139,7 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
const patch: any = {
displayName: displayName.trim(),
email: email.trim(),
avatarUrl: avatarUrl.trim(),
};
if (newPassword.trim()) {
patch.password = newPassword.trim();
@@ -228,6 +264,11 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
const activeKeyPlaceholder =
newlyCreatedKey || (apiKeys[0]?.keyPrefix ? apiKeys[0].keyPrefix + '••••••••' : 'DEIN_API_KEY');
const curlTriageExample = `curl -X POST ${baseUrl}/api/v1/inbox \\
-H "X-API-Key: ${activeKeyPlaceholder}" \\
-H "Content-Type: application/json" \\
-d '{"content": "Kellerfeuchtigkeit über 68% gestiegen – Entfeuchter prüfen #smarthome #alarm", "priority": "urgent"}'`;
const curlTaskExample = `curl -X POST ${baseUrl}/api/v1/inbox \\
-H "X-API-Key: ${activeKeyPlaceholder}" \\
-H "Content-Type: application/json" \\
@@ -358,7 +399,88 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
</div>
)}
<form onSubmit={handleSaveProfile} className="space-y-4">
<form onSubmit={handleSaveProfile} className="space-y-5">
{/* Avatar Management */}
<div className="p-3.5 bg-panel-elevated/40 border border-border rounded-box space-y-3">
<label className="block text-muted font-medium">Profilbild</label>
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
<div className="relative group shrink-0">
<UserAvatar
user={{ displayName, email, avatarUrl }}
size="xl"
className="border-2 border-border/80 shadow-md ring-2 ring-primary/20"
/>
{isProcessingAvatar && (
<div className="absolute inset-0 bg-base-100/70 rounded-full flex items-center justify-center text-[10px] font-medium text-main">
Lädt…
</div>
)}
</div>
<div className="flex-1 space-y-2.5 text-center sm:text-left">
<div className="flex flex-wrap items-center justify-center sm:justify-start gap-2">
<input
ref={fileInputRef}
type="file"
accept="image/*"
onChange={handleAvatarFileSelected}
className="hidden"
id="avatar-upload-input"
/>
<button
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={isProcessingAvatar}
className="btn-action h-8 px-3 text-xs flex items-center gap-1.5"
>
<Upload className="w-3.5 h-3.5" />
<span>Bild hochladen</span>
</button>
{avatarUrl && (
<button
type="button"
onClick={handleRemoveAvatar}
className="btn-ghost h-8 px-2.5 text-xs text-status-err hover:bg-status-err/10 flex items-center gap-1"
title="Profilbild entfernen"
>
<Trash2 className="w-3.5 h-3.5" />
<span>Entfernen</span>
</button>
)}
</div>
{/* Emoji Presets */}
<div className="space-y-1">
<span className="text-[11px] text-muted">Oder schnelles Emoji wählen:</span>
<div className="flex flex-wrap items-center justify-center sm:justify-start gap-1.5 pt-0.5">
{['🦊', '🐱', '🐶', '🐼', '🦁', '🦉', '🚀', '☕', '⚡', '🎨', '🌟', '🎯', '💡'].map(
(preset) => (
<button
key={preset}
type="button"
onClick={() => handleSelectPresetAvatar(preset)}
className={`w-7 h-7 rounded-full text-sm flex items-center justify-center transition-transform hover:scale-110 active:scale-95 ${
avatarUrl === preset
? 'bg-primary/20 border-2 border-primary scale-105'
: 'bg-panel hover:bg-panel-hover border border-border'
}`}
title={`Emoji ${preset}`}
>
{preset}
</button>
)
)}
</div>
</div>
<p className="text-[10px] text-faint">
Wird überall kreisförmig dargestellt (z.&nbsp;B. Menüleiste oben, Freigabelisten, Aufgaben).
</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-muted font-medium mb-1">Anzeigename</label>
@@ -803,24 +925,44 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
)}
</div>
{/* Curl Example */}
{/* Curl Examples */}
<div className="space-y-4">
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<span className="font-semibold text-muted flex items-center gap-1.5">
<Terminal className="w-3.5 h-3.5 text-accent" />
<span>Curl-Beispiel: Direkt als Aufgabe einspeisen</span>
<span>Curl: In Triage-Deck einspeisen (erhält Webhook-Badge)</span>
</span>
<button
onClick={() => handleCopy(curlTaskExample, 'curl')}
onClick={() => handleCopy(curlTriageExample, 'curl-triage')}
className="btn-action h-7 px-2.5 text-[11px]"
>
{copiedLabel === 'curl' ? 'Kopiert!' : 'Befehl kopieren'}
{copiedLabel === 'curl-triage' ? 'Kopiert!' : 'Befehl kopieren'}
</button>
</div>
<pre className="p-3 code-block text-[11px] font-mono overflow-x-auto whitespace-pre">
{curlTriageExample}
</pre>
</div>
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<span className="font-semibold text-muted flex items-center gap-1.5">
<Terminal className="w-3.5 h-3.5 text-accent" />
<span>Curl: Direkt als Aufgabe anlegen</span>
</span>
<button
onClick={() => handleCopy(curlTaskExample, 'curl-task')}
className="btn-action h-7 px-2.5 text-[11px]"
>
{copiedLabel === 'curl-task' ? 'Kopiert!' : 'Befehl kopieren'}
</button>
</div>
<pre className="p-3 code-block text-[11px] font-mono overflow-x-auto whitespace-pre">
{curlTaskExample}
</pre>
</div>
</div>
{/* Full Data Backup */}
<div className="pt-4 border-t border-border flex flex-col sm:flex-row sm:items-center justify-between gap-3">
frontend/src/features/teams/GroupsView.tsx
+3 -4
View File
@@ -15,6 +15,7 @@ import {
import { Team, User } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
import { UserAutocomplete } from '../UserAutocomplete';
import { UserAvatar } from '../../components/UserAvatar';
interface GroupsViewProps {
currentUser: User;
@@ -252,7 +253,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ currentUser, onBack }) =
{/* Modal: Neue Gruppe erstellen */}
{showCreateModal && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4 animate-in fade-in duration-150"
className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4 animate-in fade-in duration-150"
onClick={() => setShowCreateModal(false)}
>
<div
@@ -487,9 +488,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ currentUser, onBack }) =
className="p-2.5 bg-panel border border-border rounded-btn flex items-center justify-between gap-2 text-xs"
>
<div className="flex items-center gap-2 min-w-0">
<div className="w-6 h-6 rounded-full bg-accent/20 text-accent text-[10px] font-bold flex items-center justify-center flex-shrink-0">
{(m.displayName || 'U').slice(0, 1).toUpperCase()}
</div>
<UserAvatar user={{ displayName: m.displayName, email: m.email, avatarUrl: m.avatarUrl }} size="xs" />
<div className="min-w-0">
<p className="text-main font-medium truncate text-xs">
{m.displayName} {isSelf && <span className="text-faint">(Du)</span>}
frontend/src/features/triage/ManageColumnsModal.tsx
+1 -1
View File
@@ -125,7 +125,7 @@ export const ManageColumnsModal: React.FC<ManageColumnsModalProps> = ({
};
return (
<div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4">
<div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4">
<div
className="w-full max-w-md panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[90vh] overflow-hidden"
onClick={(e) => e.stopPropagation()}
frontend/src/features/triage/TaskDetailModal.tsx
+44 -14
View File
@@ -14,6 +14,7 @@ import {
Flame,
ChevronRight,
Folder,
Webhook,
} from 'lucide-react';
import { Thought, SubTask, TaskList, KanbanColumn } from '../../lib/types';
import { triggerHaptic } from '../../lib/api';
@@ -163,7 +164,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
const subtasksPercent = subtasks.length > 0 ? Math.round((completedSubtasks / subtasks.length) * 100) : 0;
return (
<div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
<div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
<div
className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] overflow-hidden"
onClick={(e) => e.stopPropagation()}
@@ -192,6 +193,12 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
<span className="text-xs font-semibold text-main truncate">
{task.isCompleted ? 'Erledigte Aufgabe' : 'Aufgabe bearbeiten'}
</span>
{task.source?.toLowerCase() === 'webhook' && (
<span className="px-1.5 py-0.5 border border-border bg-canvas text-muted rounded-btn text-[10px] font-medium flex items-center gap-1 flex-shrink-0">
<Webhook className="w-2.5 h-2.5 text-accent" />
<span>Webhook</span>
</span>
)}
</div>
<div className="flex items-center gap-1.5">
@@ -335,29 +342,49 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
</div>
</div>
{/* Priority Buttons */}
{/* Priority Buttons (4 Buttons) */}
<div className="space-y-1.5 pt-1 border-t border-border">
<label className="block text-xs font-semibold text-main">
Priorität:
</label>
<div className="flex flex-wrap items-center gap-1.5">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-1.5">
<button
type="button"
onClick={() => onUpdatePriority(task, 'normal')}
className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border ${
!task.priority || task.priority === 'normal' || task.priority === 'low'
? 'bg-panel border-accent text-main font-semibold'
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'low');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
task.priority === 'low'
? 'bg-canvas border-strong text-main font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
Normal / Keine
<span>Niedrig</span>
</button>
<button
type="button"
onClick={() => onUpdatePriority(task, 'high')}
className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'normal');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
!task.priority || task.priority === 'normal'
? 'bg-accent/15 border-accent text-accent font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
<span>Normal</span>
</button>
<button
type="button"
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'high');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
task.priority === 'high'
? 'bg-status-warn/15 border-status-warn text-status-warn font-semibold'
? 'bg-status-warn/15 border-status-warn text-status-warn font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
@@ -366,10 +393,13 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
</button>
<button
type="button"
onClick={() => onUpdatePriority(task, 'urgent')}
className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'urgent');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
task.priority === 'urgent'
? 'bg-status-err/15 border-status-err text-status-err font-semibold'
? 'bg-status-err/15 border-status-err text-status-err font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
frontend/src/features/triage/TasksView.tsx
+441 -24
View File
@@ -23,8 +23,10 @@ import {
Settings,
ChevronDown,
Folder,
Filter,
Webhook,
} from 'lucide-react';
import { TaskList, Thought, SubTask, Team, User, TaskListShare, KanbanColumn } from '../../lib/types';
import { TaskList, Thought, SubTask, Team, User, TaskListShare, KanbanColumn, PriorityLevel } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
import { UnifiedShareModal } from '../../components/UnifiedShareModal';
import { TaskDetailModal } from './TaskDetailModal';
@@ -73,7 +75,15 @@ export const TasksView: React.FC<TasksViewProps> = ({
const [quickTitle, setQuickTitle] = useState('');
const [quickDueDate, setQuickDueDate] = useState('');
const quickInputRef = useRef<HTMLInputElement | null>(null);
const { setGroups } = useMobileActions();
const { setGroups, setPrimaryAction } = useMobileActions();
// Mobile task creation & filter modal state
const [showMobileCreateModal, setShowMobileCreateModal] = useState(false);
const [mobileCreateTitle, setMobileCreateTitle] = useState('');
const [mobileCreateDueDate, setMobileCreateDueDate] = useState('');
const [mobileCreatePriority, setMobileCreatePriority] = useState<PriorityLevel>('normal');
const [mobileCreateListId, setMobileCreateListId] = useState<string>('');
const [showFilterModal, setShowFilterModal] = useState(false);
// New TaskList modal state
const [showNewListModal, setShowNewListModal] = useState(false);
@@ -530,6 +540,31 @@ export const TasksView: React.FC<TasksViewProps> = ({
}
};
const handleMobileCreateTask = async (e: React.FormEvent) => {
e.preventDefault();
const title = mobileCreateTitle.trim();
if (!title) return;
triggerHaptic(12);
try {
const created = await api.captureThought(title, mobileCreatePriority, 'manual', mobileCreateDueDate || undefined, {
target: 'task',
taskListId: mobileCreateListId || (selectedListId === 'all' ? '' : selectedListId),
});
setTasks((prev) => {
if (prev.some((t) => t.id === created.id)) return prev;
return [created, ...prev];
});
setMobileCreateTitle('');
setMobileCreateDueDate('');
setMobileCreatePriority('normal');
setShowMobileCreateModal(false);
onRefreshStats();
} catch {
loadData();
}
};
const handleQuickAddTaskToColumn = async (columnId: string) => {
const title = prompt('Neue Aufgabe für diese Spalte:');
if (!title || !title.trim()) return;
@@ -815,17 +850,39 @@ export const TasksView: React.FC<TasksViewProps> = ({
};
useEffect(() => {
const actionItems: any[] = [
setPrimaryAction(() => {
setMobileCreateListId(selectedListId === 'all' ? '' : selectedListId);
setShowMobileCreateModal(true);
});
const primaryItems: any[] = [
{
id: 'new-task',
label: 'Neue Aufgabe erstellen',
icon: <Plus className="w-4 h-4" />,
variant: 'accent',
onClick: () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
setTimeout(() => quickInputRef.current?.focus(), 100);
setMobileCreateListId(selectedListId === 'all' ? '' : selectedListId);
setShowMobileCreateModal(true);
},
},
];
const filterSortActiveCount =
(selectedTag ? 1 : 0) + (groupBy !== 'none' ? 1 : 0) + (sortBy !== 'custom' ? 1 : 0);
const filterItems: any[] = [
{
id: 'tasks-filter-modal',
label: 'Filter, Hashtags & Sortierung',
icon: <Filter className="w-4 h-4 text-accent" />,
badge: filterSortActiveCount > 0 ? `${filterSortActiveCount} aktiv` : undefined,
active: filterSortActiveCount > 0,
onClick: () => setShowFilterModal(true),
},
];
const listManagementItems: any[] = [
{
id: 'new-task-list',
label: 'Neue Aufgabenliste anlegen',
@@ -835,13 +892,13 @@ export const TasksView: React.FC<TasksViewProps> = ({
];
if (currentSelectedList) {
actionItems.push({
listManagementItems.push({
id: 'share-task-list',
label: `Liste „${currentSelectedList.title}“ teilen`,
icon: <Users className="w-4 h-4" />,
onClick: () => handleOpenShareModal(currentSelectedList),
});
actionItems.push({
listManagementItems.push({
id: 'delete-task-list',
label: `Liste „${currentSelectedList.title}“ löschen`,
icon: <Trash2 className="w-4 h-4" />,
@@ -922,9 +979,18 @@ export const TasksView: React.FC<TasksViewProps> = ({
setGroups([
{
id: 'tasks-actions',
title: 'Aktionen',
items: actionItems,
id: 'tasks-primary',
items: primaryItems,
},
{
id: 'tasks-filters',
title: 'Filter & Sortierung',
items: filterItems,
},
{
id: 'tasks-list-management',
title: 'Listen-Verwaltung',
items: listManagementItems,
},
{
id: 'tasks-views',
@@ -933,7 +999,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
},
{
id: 'tasks-lists',
title: 'Aufgabenlisten',
title: 'Aufgabenlisten wechseln',
items: listItems,
},
]);
@@ -941,12 +1007,17 @@ export const TasksView: React.FC<TasksViewProps> = ({
viewMode,
filter,
selectedListId,
selectedTag,
groupBy,
sortBy,
openTasks.length,
doneTasks.length,
safeDiscarded.length,
kanbanTasks.length,
safeTaskLists,
currentSelectedList,
setPrimaryAction,
setGroups,
]);
const renderTaskProgressBar = (task: Thought) => {
@@ -1064,11 +1135,11 @@ export const TasksView: React.FC<TasksViewProps> = ({
className="flex flex-wrap items-center gap-1.5 pt-0.5 empty:hidden"
onClick={(e) => e.stopPropagation()}
>
{/* Kanban status selector pill */}
{/* Kanban status selector pill (Desktop only - on mobile done via TaskDetailModal) */}
<select
value={task.kanbanStatus || (isCompleted ? 'done' : 'todo')}
onChange={(e) => handleSetKanbanStatus(task, e.target.value)}
className="h-5 px-1.5 text-[10px] rounded-btn border border-border bg-panel text-muted hover:text-main cursor-pointer"
className="hidden sm:inline-block h-5 px-1.5 text-[10px] rounded-btn border border-border bg-panel text-muted hover:text-main cursor-pointer"
title="Status / Zustand ändern"
>
{activeColumns.map((c) => (
@@ -1100,6 +1171,16 @@ export const TasksView: React.FC<TasksViewProps> = ({
</button>
)}
{task.source?.toLowerCase() === 'webhook' && (
<span
className="px-1.5 py-0.5 border border-border bg-canvas text-muted rounded-btn text-[10px] font-medium flex items-center gap-1 flex-shrink-0"
title="Erstellt über Webhook"
>
<Webhook className="w-2.5 h-2.5 text-accent" />
<span>Webhook</span>
</span>
)}
{/* Note indicator */}
{task.notes && (
<button
@@ -1230,10 +1311,10 @@ export const TasksView: React.FC<TasksViewProps> = ({
<div key={tl.id} className="relative group flex items-center">
<button
onClick={() => setSelectedListId(tl.id)}
className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
className={`h-8 px-3 text-xs font-medium border flex items-center gap-1.5 transition-colors ${
selectedListId === tl.id
? 'bg-panel border-accent text-main'
: 'bg-canvas border-border text-muted hover:text-main'
? 'bg-panel border-accent text-main rounded-l-btn rounded-r-none border-r-0'
: 'bg-canvas border-border text-muted hover:text-main rounded-btn'
}`}
>
<span>{tl.icon}</span>
@@ -1249,8 +1330,12 @@ export const TasksView: React.FC<TasksViewProps> = ({
return (
<div className="flex items-center -space-x-1 ml-0.5" title={`Geteilt (${tl.members?.length || 1} Mitglieder)`}>
{otherMembers.slice(0, 2).map((m) => (
<span key={m.userId} className="w-3.5 h-3.5 rounded-pill bg-accent/20 border border-panel text-[8px] font-bold text-accent flex items-center justify-center">
{getInitials(m.displayName || m.email)[0]}
<span key={m.userId} className="w-3.5 h-3.5 rounded-full overflow-hidden bg-accent/20 border border-panel text-[8px] font-bold text-accent flex items-center justify-center shrink-0">
{m.avatarUrl ? (
<img src={m.avatarUrl} alt="" className="w-full h-full object-cover rounded-full" />
) : (
getInitials(m.displayName || m.email)[0]
)}
</span>
))}
</div>
@@ -1267,7 +1352,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
<button
onClick={() => handleDeleteTaskList(tl.id)}
title="Liste löschen"
className="h-8 px-1.5 bg-panel border-y border-r border-accent text-faint hover:text-status-err"
className="h-8 px-2 bg-panel border-y border-r border-accent text-faint hover:text-status-err hover:bg-status-err/10 rounded-r-btn flex items-center justify-center transition-colors cursor-pointer"
>
<X className="w-3 h-3" />
</button>
@@ -1363,10 +1448,10 @@ export const TasksView: React.FC<TasksViewProps> = ({
</div>
</div>
{/* Quick Add Task Input */}
{/* Quick Add Task Input (Desktop only - on mobile, tapping the bottom '+' FAB opens mobile create sheet) */}
<form
onSubmit={handleQuickAddTask}
className="flex items-center gap-1.5 panel-surface p-2 sm:p-1.5"
className="hidden sm:flex items-center gap-1.5 panel-surface p-2 sm:p-1.5"
>
<Plus className="w-4 h-4 text-accent ml-1 flex-shrink-0" />
<input
@@ -1399,8 +1484,50 @@ export const TasksView: React.FC<TasksViewProps> = ({
</div>
</form>
{/* Hashtag Filter & Grouping / Sorting Toolbar */}
<div className="flex flex-wrap items-center justify-between gap-2 pt-1 pb-0.5">
{/* Mobile Active Filter Badge Banner (minimal and clean) */}
{(selectedTag || groupBy !== 'none' || sortBy !== 'custom') && (
<div className="flex sm:hidden items-center justify-between gap-2 p-2 rounded-btn bg-accent/10 border border-accent/20 text-xs">
<div className="flex items-center gap-1.5 flex-wrap min-w-0">
<Filter className="w-3.5 h-3.5 text-accent flex-shrink-0" />
{selectedTag && (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-accent text-on-accent text-[11px] font-semibold">
#{selectedTag}
<button
type="button"
onClick={() => setSelectedTag(null)}
className="hover:opacity-75 cursor-pointer ml-0.5"
>
<X className="w-3 h-3" />
</button>
</span>
)}
{groupBy !== 'none' && (
<span className="text-muted text-[11px]">
Gruppe: <strong className="text-main">{groupBy}</strong>
</span>
)}
{sortBy !== 'custom' && (
<span className="text-muted text-[11px]">
Sortiert: <strong className="text-main">{sortBy}</strong>
</span>
)}
</div>
<button
type="button"
onClick={() => {
setSelectedTag(null);
setGroupBy('none');
setSortBy('custom');
}}
className="text-accent text-[11px] font-semibold flex-shrink-0 hover:underline cursor-pointer"
>
Zurücksetzen
</button>
</div>
)}
{/* Hashtag Filter & Grouping / Sorting Toolbar (Desktop only - on mobile accessible via Logo Menu Filter & Sort) */}
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 pt-1 pb-0.5">
{/* Hashtag filter chips */}
<div className="flex items-center gap-1.5 overflow-x-auto max-w-full pb-1">
<span className="text-[11px] font-semibold text-muted flex items-center gap-1 flex-shrink-0">
@@ -1486,9 +1613,289 @@ export const TasksView: React.FC<TasksViewProps> = ({
</div>
</div>
{/* MOBILE CREATE TASK BOTTOM SHEET MODAL */}
{showMobileCreateModal && (
<div
className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
onClick={() => setShowMobileCreateModal(false)}
>
<div
className="w-full max-h-[85vh] overflow-y-auto bg-panel border-t border-border rounded-t-2xl shadow-panel p-4 pb-[calc(1.5rem+env(safe-area-inset-bottom))] animate-in slide-in-from-bottom duration-200"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between pb-3 border-b border-border mb-3">
<div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
<CheckSquare className="w-4 h-4" />
</div>
<h3 className="text-sm font-semibold text-main">Neue Aufgabe anlegen</h3>
</div>
<button
type="button"
onClick={() => setShowMobileCreateModal(false)}
className="p-1.5 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
>
<X className="w-5 h-5" />
</button>
</div>
<form onSubmit={handleMobileCreateTask} className="space-y-3">
<div>
<label className="text-[11px] font-semibold text-muted block mb-1">Aufgabentext</label>
<input
type="text"
autoFocus
value={mobileCreateTitle}
onChange={(e) => setMobileCreateTitle(e.target.value)}
placeholder="Was ist zu tun?…"
className="w-full input-field px-3 py-2 text-sm"
/>
</div>
{/* List Selector (if lists exist) */}
{safeTaskLists.length > 0 && (
<div>
<label className="text-[11px] font-semibold text-muted block mb-1">Aufgabenliste</label>
<select
value={mobileCreateListId}
onChange={(e) => setMobileCreateListId(e.target.value)}
className="w-full input-field px-2.5 py-2 text-xs bg-panel"
>
<option value="">Standard (Alle Aufgaben)</option>
{safeTaskLists.map((tl) => (
<option key={tl.id} value={tl.id}>
{tl.icon || '📋'} {tl.title}
</option>
))}
</select>
</div>
)}
{/* Priority - 4 Buttons */}
<div className="space-y-1.5 pt-1">
<label className="text-[11px] font-semibold text-muted block">Priorität</label>
<div className="grid grid-cols-4 gap-1.5">
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
const config: Record<PriorityLevel, { label: string; icon?: React.ReactNode; activeClass: string }> = {
low: { label: 'Niedrig', activeClass: 'bg-canvas border-strong text-main font-semibold shadow-xs' },
normal: { label: 'Normal', activeClass: 'bg-accent/15 border-accent text-accent font-semibold shadow-xs' },
high: { label: 'Wichtig', icon: <AlertTriangle className="w-3 h-3 text-status-warn" />, activeClass: 'bg-status-warn/15 border-status-warn text-status-warn font-semibold shadow-xs' },
urgent: { label: 'Dringend', icon: <Flame className="w-3 h-3 text-status-err" />, activeClass: 'bg-status-err/15 border-status-err text-status-err font-semibold shadow-xs' },
};
const active = mobileCreatePriority === p;
const item = config[p];
return (
<button
key={p}
type="button"
onClick={() => {
triggerHaptic(10);
setMobileCreatePriority(p);
}}
className={`h-9 px-1 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
active
? item.activeClass
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
{item.icon}
<span className="truncate">{item.label}</span>
</button>
);
})}
</div>
</div>
{/* Due Date */}
<div className="space-y-1 pt-1">
<label className="text-[11px] font-semibold text-muted flex items-center gap-1">
<Calendar className="w-3.5 h-3.5 text-accent" />
<span>Fällig am</span>
</label>
<input
type="date"
value={mobileCreateDueDate}
onChange={(e) => setMobileCreateDueDate(e.target.value)}
className="w-full input-field px-3 py-2 text-xs"
/>
</div>
<div className="pt-2 flex justify-end gap-2">
<button
type="button"
onClick={() => setShowMobileCreateModal(false)}
className="btn-ghost h-10 px-4 text-xs cursor-pointer"
>
Abbrechen
</button>
<button
type="submit"
disabled={!mobileCreateTitle.trim()}
className="btn-primary h-10 px-5 text-xs font-semibold disabled:opacity-40 cursor-pointer"
>
Aufgabe erstellen
</button>
</div>
</form>
</div>
</div>
)}
{/* MOBILE FILTER & SORT MODAL */}
{showFilterModal && (
<div
className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
onClick={() => setShowFilterModal(false)}
>
<div
className="w-full max-h-[85vh] overflow-y-auto bg-panel border-t border-border rounded-t-2xl shadow-panel p-4 pb-[calc(1.5rem+env(safe-area-inset-bottom))] animate-in slide-in-from-bottom duration-200 space-y-4"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between pb-3 border-b border-border">
<div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
<Filter className="w-4 h-4" />
</div>
<h3 className="text-sm font-semibold text-main">Filter & Sortierung</h3>
</div>
<button
type="button"
onClick={() => setShowFilterModal(false)}
className="p-1.5 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Hashtag Filters */}
<div className="space-y-2">
<span className="text-[11px] font-bold uppercase tracking-wider text-muted flex items-center gap-1">
<Hash className="w-3 h-3 text-accent" />
<span>Nach Hashtags filtern</span>
</span>
<div className="flex flex-wrap gap-1.5">
<button
type="button"
onClick={() => setSelectedTag(null)}
className={`min-h-[32px] px-3 text-xs rounded-full border transition-colors cursor-pointer ${
selectedTag === null
? 'bg-accent text-on-accent border-accent font-semibold'
: 'bg-canvas border-border text-muted'
}`}
>
Alle ({safeTasks.length})
</button>
{allAvailableTags.map((tag) => {
const count = safeTasks.filter((t) => t.tags?.includes(tag)).length;
const isSelected = selectedTag === tag;
return (
<button
key={tag}
type="button"
onClick={() => setSelectedTag(isSelected ? null : tag)}
className={`min-h-[32px] px-3 text-xs rounded-full border transition-colors flex items-center gap-1 cursor-pointer ${
isSelected
? 'bg-accent text-on-accent border-accent font-semibold'
: 'bg-canvas border-border text-muted'
}`}
>
<span>#{tag}</span>
<span className="text-[10px] opacity-75">({count})</span>
</button>
);
})}
</div>
</div>
{/* Grouping */}
{viewMode !== 'kanban' && (
<div className="space-y-2 pt-2 border-t border-border">
<span className="text-[11px] font-bold uppercase tracking-wider text-muted block">
Gruppierung
</span>
<div className="grid grid-cols-2 gap-1.5">
{[
{ id: 'none', label: 'Keine' },
{ id: 'tag', label: 'Nach Hashtag' },
{ id: 'status', label: 'Nach Status' },
{ id: 'priority', label: 'Nach Priorität' },
{ id: 'due', label: 'Nach Fälligkeit' },
].map((g) => (
<button
key={g.id}
type="button"
onClick={() => setGroupBy(g.id as any)}
className={`min-h-[36px] px-3 text-xs rounded-btn border text-left transition-colors cursor-pointer ${
groupBy === g.id
? 'bg-accent-dim border-accent text-accent font-semibold'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
{g.label}
</button>
))}
</div>
</div>
)}
{/* Sorting */}
{viewMode !== 'kanban' && (
<div className="space-y-2 pt-2 border-t border-border">
<span className="text-[11px] font-bold uppercase tracking-wider text-muted block">
Sortierung
</span>
<div className="grid grid-cols-2 gap-1.5">
{[
{ id: 'custom', label: 'Manuell (Drag & Drop)' },
{ id: 'created', label: 'Erstelldatum' },
{ id: 'due', label: 'Fälligkeitsdatum' },
{ id: 'priority', label: 'Priorität' },
{ id: 'alpha', label: 'Alphabetisch' },
].map((s) => (
<button
key={s.id}
type="button"
onClick={() => setSortBy(s.id as any)}
className={`min-h-[36px] px-3 text-xs rounded-btn border text-left transition-colors cursor-pointer ${
sortBy === s.id
? 'bg-accent-dim border-accent text-accent font-semibold'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
{s.label}
</button>
))}
</div>
</div>
)}
<div className="pt-3 border-t border-border flex items-center justify-between gap-2">
<button
type="button"
onClick={() => {
setSelectedTag(null);
setGroupBy('none');
setSortBy('custom');
}}
className="btn-ghost h-9 px-3 text-xs text-muted hover:text-main cursor-pointer"
>
Filter zurücksetzen
</button>
<button
type="button"
onClick={() => setShowFilterModal(false)}
className="btn-primary h-9 px-5 text-xs font-semibold cursor-pointer"
>
Fertig
</button>
</div>
</div>
</div>
)}
{/* NEW LIST MODAL */}
{showNewListModal && (
<div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-4">
<div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4">
<div className="w-full max-w-sm panel-surface shadow-panel p-4 space-y-3">
<div className="flex items-center justify-between border-b border-border pb-2">
<h3 className="text-sm font-semibold text-main flex items-center gap-1.5">
@@ -1563,6 +1970,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
targetId: sh.targetId,
targetName: sh.targetName || (sh.targetType === 'team' ? 'Gruppe' : sh.email || 'Benutzer'),
targetEmail: sh.email,
avatarUrl: sh.avatarUrl,
permission: 'editor' as const,
role: 'editor',
createdAt: sh.createdAt,
@@ -1777,6 +2185,15 @@ export const TasksView: React.FC<TasksViewProps> = ({
⚠️ Wichtig
</button>
)}
{task.source?.toLowerCase() === 'webhook' && (
<span
className="px-1.5 py-0.2 border border-border bg-canvas text-muted rounded-btn text-[9px] font-medium flex items-center gap-1"
title="Erstellt über Webhook"
>
<Webhook className="w-2.5 h-2.5 text-accent" />
<span>Webhook</span>
</span>
)}
{task.dueDate && (
<span className="inline-flex items-center gap-0.5 text-[9px] text-muted">
<Calendar className="w-2.5 h-2.5" />
frontend/src/features/triage/TriageDeck.tsx
+20 -6
View File
@@ -139,11 +139,21 @@ const SwipeableQueueItem: React.FC<SwipeableQueueItemProps> = ({
}}
className="relative bg-panel px-4 py-3.5 sm:px-3.5 sm:py-2.5 min-h-[56px] sm:min-h-[44px] flex items-center justify-between gap-3 hover:bg-panel-hover transition-colors group cursor-pointer"
>
<div className="flex-1 min-w-0 flex items-center gap-3">
<div className="flex-1 min-w-0 flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent flex-shrink-0" />
<span className="text-sm sm:text-xs font-medium text-main line-clamp-2 sm:truncate">
{item.content}
</span>
{item.source?.toLowerCase() === 'webhook' && (
<span className="px-1.5 py-0.5 text-[10px] bg-canvas text-muted border border-border rounded-btn flex items-center gap-1 flex-shrink-0">
<Webhook className="w-2.5 h-2.5 text-accent" /> Webhook
</span>
)}
{item.source?.toLowerCase() === 'voice' && (
<span className="px-1.5 py-0.5 text-[10px] bg-canvas text-accent border border-border rounded-btn flex items-center gap-1 flex-shrink-0">
<Mic className="w-2.5 h-2.5" /> Diktat
</span>
)}
</div>
{/* Desktop quick buttons (hidden on mobile so queue items are clean & easy to tap/swipe) */}
@@ -413,15 +423,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
}
};
const sourceBadge = (source: string) => {
if (source === 'voice') {
const sourceBadge = (source?: string) => {
const s = (source || '').toLowerCase().trim();
if (s === 'voice') {
return (
<span className="px-2 py-0.5 text-[11px] bg-canvas text-accent border border-border rounded-btn flex items-center gap-1">
<Mic className="w-3 h-3" /> Diktat
</span>
);
}
if (source === 'webhook') {
if (s === 'webhook') {
return (
<span className="px-2 py-0.5 text-[11px] bg-canvas text-muted border border-border rounded-btn flex items-center gap-1">
<Webhook className="w-3 h-3 text-accent" /> Webhook
@@ -500,7 +511,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
key={nextCard.id + '-preview'}
className="absolute inset-x-3 top-3 bottom-0 panel-surface p-4 opacity-40 scale-[0.97] pointer-events-none flex flex-col justify-between"
>
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<div className="flex items-center gap-1.5">
{priorityBadge(nextCard.priority)}
{sourceBadge(nextCard.source)}
</div>
<p className="text-sm text-muted line-clamp-2">{nextCard.content}</p>
<div className="text-[11px] text-faint">Nächster Quick Dump…</div>
</div>
@@ -811,7 +825,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* LONG-PRESS / MORE OPTIONS ACTION SHEET (For Triage Card & Queue Items) */}
{actionSheetCard && (
<div
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-xs p-0 sm:p-4 animate-in fade-in duration-150"
className="fixed inset-0 !m-0 modal-overlay z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-xs p-0 sm:p-4 animate-in fade-in duration-150"
onClick={() => setActionSheetCard(null)}
>
<div
frontend/src/features/workspace/WorkspaceView.tsx
+1206 -383
View File
File diff suppressed because it is too large. Load diff
frontend/src/index.css
+11
View File
@@ -348,10 +348,21 @@ body {
/* Modal-Hintergrund-Overlay */
.modal-overlay {
margin: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: var(--bg-overlay);
backdrop-filter: blur(4px);
}
/* Verhindert, dass Elterncontainer mit space-y-* oder space-x-* feste Overlays nach unten verschieben */
.fixed.inset-0,
[class*="fixed inset-0"] {
margin: 0 !important;
}
/* File Tree Item */
.tree-node-active {
background-color: var(--bg-panel-elevated);
frontend/src/lib/api.ts
+145 -3
View File
@@ -12,6 +12,8 @@ import {
Organization,
PriorityLevel,
SharedList,
SharedFolder,
FolderShare,
Space,
SpaceMember,
SpaceShare,
@@ -163,6 +165,7 @@ export const api = {
displayName?: string;
email?: string;
password?: string;
avatarUrl?: string;
alarmChannels?: string[];
alarmEmail?: string;
discordWebhookUrl?: string;
@@ -431,6 +434,60 @@ export const api = {
);
},
async moveFolder(sourcePath: string, targetParentPath: string): Promise<{ newPath: string; movedDocIds: string[] }> {
return request<{ newPath: string; movedDocIds: string[] }>('/api/v1/folders/move', {
method: 'POST',
body: JSON.stringify({ sourcePath, targetParentPath }),
});
},
// --- WORKSPACE SHARED FOLDERS ---
async getSharedFolders(): Promise<SharedFolder[]> {
const res = await request<SharedFolder[]>('/api/v1/workspace/folders/shared');
return ensureArray(res);
},
async createSharedFolder(payload: { name: string; mountPath?: string }): Promise<SharedFolder> {
return request<SharedFolder>('/api/v1/workspace/folders/shared', {
method: 'POST',
body: JSON.stringify(payload),
});
},
async getSharedFolder(id: string): Promise<SharedFolder> {
return request<SharedFolder>(`/api/v1/workspace/folders/shared/${id}`);
},
async deleteSharedFolder(id: string): Promise<void> {
await request(`/api/v1/workspace/folders/shared/${id}`, { method: 'DELETE' });
},
async updateFolderMount(id: string, mountPath: string): Promise<void> {
await request(`/api/v1/workspace/folders/shared/${id}/mount`, {
method: 'PUT',
body: JSON.stringify({ mountPath }),
});
},
async getFolderShares(folderId: string): Promise<FolderShare[]> {
const res = await request<FolderShare[]>(`/api/v1/workspace/folders/shared/${folderId}/shares`);
return ensureArray(res);
},
async createFolderShare(
folderId: string,
payload: { targetType?: 'team' | 'user'; targetId?: string; userId?: string; email?: string; teamId?: string; permission: 'read' | 'write' }
): Promise<FolderShare> {
return request<FolderShare>(`/api/v1/workspace/folders/shared/${folderId}/shares`, {
method: 'POST',
body: JSON.stringify(payload),
});
},
async deleteFolderShare(folderId: string, shareId: string): Promise<void> {
await request(`/api/v1/workspace/folders/shared/${folderId}/shares/${shareId}`, { method: 'DELETE' });
},
// --- WORKSPACE TAGS ---
async getWorkspaceTags(): Promise<TagSummary[]> {
const res = await request<TagSummary[]>('/api/v1/workspace/tags');
@@ -526,10 +583,41 @@ export const api = {
};
},
async patchDocumentBlocks(
id: string,
payload: {
upserted?: DocumentBlock[];
deletedIds?: string[];
blockOrder?: string[];
}
): Promise<Document> {
const d = await request<Document>(`/api/v1/documents/${id}/blocks`, {
method: 'PATCH',
body: JSON.stringify(payload),
});
return {
...d,
blocks: ensureArray(d.blocks),
tags: ensureArray(d.tags),
};
},
async deleteDocument(id: string): Promise<void> {
await request(`/api/v1/documents/${id}`, { method: 'DELETE' });
},
async moveDocument(id: string, folderPath: string): Promise<Document> {
const d = await request<Document>(`/api/v1/documents/${id}/move`, {
method: 'PUT',
body: JSON.stringify({ folderPath }),
});
return {
...d,
blocks: ensureArray(d.blocks),
tags: ensureArray(d.tags),
};
},
// --- DOCUMENT SHARING ---
async getDocShares(docId: string): Promise<DocShare[]> {
const res = await request<DocShare[]>(`/api/v1/documents/${docId}/shares`);
@@ -957,7 +1045,10 @@ export function getOfflineQueue(): Thought[] {
let activeGlobalWS: WebSocket | null = null;
let wsReconnectTimer: any = null;
let wsListeners: ((msg: WSMessage) => void)[] = [];
let wsStatusListeners: ((connected: boolean) => void)[] = [];
let isWSConnected = false;
let manualDisconnect = false;
let wsReconnectDelay = 2000;
export function buildWebSocketURL(listId?: string): string {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -968,6 +1059,30 @@ export function buildWebSocketURL(listId?: string): string {
return `${protocol}//${window.location.host}/api/v1/ws?token=${encodeURIComponent(token)}`;
}
export function isWebSocketConnected(): boolean {
return isWSConnected && activeGlobalWS !== null && activeGlobalWS.readyState === WebSocket.OPEN;
}
export function onWebSocketStatus(callback: (connected: boolean) => void): () => void {
wsStatusListeners.push(callback);
callback(isWebSocketConnected());
return () => {
wsStatusListeners = wsStatusListeners.filter((fn) => fn !== callback);
};
}
function notifyStatusChange(connected: boolean) {
isWSConnected = connected;
wsStatusListeners.forEach((fn) => {
try {
fn(connected);
} catch (e) {
console.error('WS status listener error', e);
}
});
window.dispatchEvent(new CustomEvent('mindsift:ws:status', { detail: { connected } }));
}
export function connectWebSocket(): void {
const token = getToken();
if (!token) return;
@@ -982,6 +1097,11 @@ export function connectWebSocket(): void {
const ws = new WebSocket(url);
activeGlobalWS = ws;
ws.onopen = () => {
wsReconnectDelay = 2000;
notifyStatusChange(true);
};
ws.onmessage = (event) => {
try {
const msg = JSON.parse(event.data) as WSMessage;
@@ -998,26 +1118,47 @@ export function connectWebSocket(): void {
}
};
ws.onclose = () => {
ws.onclose = (evt: CloseEvent) => {
activeGlobalWS = null;
console.warn('[MindSift Global WS] Closed with code:', evt?.code, 'reason:', evt?.reason);
notifyStatusChange(false);
if (!manualDisconnect && getToken()) {
clearTimeout(wsReconnectTimer);
const delay = wsReconnectDelay;
wsReconnectDelay = Math.min(30000, Math.round(wsReconnectDelay * 1.5));
wsReconnectTimer = setTimeout(() => {
connectWebSocket();
}, 3000);
}, delay);
}
};
ws.onerror = () => {
ws.onerror = (e) => {
console.warn('[MindSift Global WS] Error:', e);
notifyStatusChange(false);
try {
ws.close();
} catch {}
};
} catch (e) {
console.error('Failed to connect WebSocket', e);
notifyStatusChange(false);
}
}
// Ensure reconnect when browser recovers from sleep or tab visibility
if (typeof window !== 'undefined') {
window.addEventListener('online', () => {
if (getToken() && !isWebSocketConnected()) {
connectWebSocket();
}
});
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible' && getToken() && !isWebSocketConnected()) {
connectWebSocket();
}
});
}
export function disconnectWebSocket(): void {
manualDisconnect = true;
clearTimeout(wsReconnectTimer);
@@ -1027,6 +1168,7 @@ export function disconnectWebSocket(): void {
} catch {}
activeGlobalWS = null;
}
notifyStatusChange(false);
}
export function sendWebSocketMessage(msg: any): void {
frontend/src/lib/types.ts
+51
View File
@@ -14,6 +14,7 @@ export interface User {
email: string;
username?: string;
displayName: string;
avatarUrl?: string;
role: UserRole;
isActive: boolean;
alarmChannels?: string[];
@@ -79,6 +80,7 @@ export interface TaskListShare {
targetId: string;
targetName?: string;
email?: string;
avatarUrl?: string;
createdAt: string;
}
@@ -86,6 +88,7 @@ export interface TaskListMember {
userId: string;
displayName: string;
email: string;
avatarUrl?: string;
role: string;
}
@@ -132,6 +135,7 @@ export interface TeamMember {
userId: string;
displayName: string;
email: string;
avatarUrl?: string;
role: 'admin' | 'member';
joinedAt: string;
}
@@ -161,6 +165,21 @@ export interface DocumentBlock {
collapsed?: boolean;
}
export interface DocBlocksPatchRequest {
upserted?: DocumentBlock[];
deletedIds?: string[];
blockOrder?: string[];
}
export interface DocBlocksPatchEvent {
docId: string;
updatedBy: string;
updatedAt: string;
upserted?: DocumentBlock[];
deletedIds?: string[];
blockOrder?: string[];
}
export interface DocShare {
id: string;
docId: string;
@@ -203,6 +222,36 @@ export interface Document {
isOwner?: boolean;
ownerName?: string;
sharedWith?: DocShare[];
sharedFolderId?: string;
subFolderPath?: string;
isSharedFolder?: boolean;
folderPermission?: string;
}
export interface SharedFolder {
id: string;
ownerId: string;
ownerName?: string;
name: string;
mountPath: string;
isOwner: boolean;
permission: 'owner' | 'write' | 'read';
shares?: FolderShare[];
createdAt: string;
updatedAt: string;
}
export interface FolderShare {
id: string;
folderId: string;
targetType: 'user' | 'team';
targetId: string;
targetName?: string;
email?: string;
avatarUrl?: string;
permission: 'read' | 'write';
createdBy: string;
createdAt: string;
}
export interface TagSummary {
@@ -240,6 +289,7 @@ export interface SpaceMember {
userId: string;
displayName: string;
email: string;
avatarUrl?: string;
role: 'owner' | 'editor' | 'viewer';
joinedAt: string;
}
@@ -250,6 +300,7 @@ export interface UnifiedShare {
targetId: string;
targetName?: string;
targetEmail?: string;
avatarUrl?: string;
permission?: 'editor' | 'viewer';
role?: string;
createdBy?: string;
internal/api/server.go
+332 -17
View File
@@ -5,6 +5,7 @@ import (
"crypto/tls"
"encoding/json"
"fmt"
"io"
"io/fs"
"net/http"
"net/smtp"
@@ -104,8 +105,18 @@ func (s *Server) Router() http.Handler {
// Workspace Documents & Folders
r.Get("/api/v1/folders", s.handleGetFolders)
r.Post("/api/v1/folders", s.handleCreateFolder)
r.Post("/api/v1/folders/move", s.handleMoveFolder)
r.Delete("/api/v1/folders", s.handleDeleteFolder)
r.Get("/api/v1/workspace/folders/shared", s.handleGetSharedFolders)
r.Post("/api/v1/workspace/folders/shared", s.handleCreateSharedFolder)
r.Get("/api/v1/workspace/folders/shared/{id}", s.handleGetSharedFolderByID)
r.Delete("/api/v1/workspace/folders/shared/{id}", s.handleDeleteSharedFolder)
r.Put("/api/v1/workspace/folders/shared/{id}/mount", s.handleUpdateFolderMount)
r.Get("/api/v1/workspace/folders/shared/{id}/shares", s.handleGetFolderShares)
r.Post("/api/v1/workspace/folders/shared/{id}/shares", s.handleCreateFolderShare)
r.Delete("/api/v1/workspace/folders/shared/{id}/shares/{shareId}", s.handleDeleteFolderShare)
// Workspace Tags & Pages
r.Get("/api/v1/workspace/tags", s.handleGetWorkspaceTags)
r.Get("/api/v1/workspace/tags/{tag}", s.handleGetTagDetails)
@@ -115,6 +126,8 @@ func (s *Server) Router() http.Handler {
r.Post("/api/v1/documents", s.handleCreateDocument)
r.Get("/api/v1/documents/{id}", s.handleGetDocument)
r.Put("/api/v1/documents/{id}", s.handleUpdateDocument)
r.Patch("/api/v1/documents/{id}/blocks", s.handlePatchDocumentBlocks)
r.Put("/api/v1/documents/{id}/move", s.handleMoveDocument)
r.Delete("/api/v1/documents/{id}", s.handleDeleteDocument)
// Document Sharing & Collaboration
@@ -574,7 +587,25 @@ func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
taskListID = req.TaskListID2
}
thought, err := s.store.CreateThoughtWithDetails(userID, req.Content, req.Priority, req.Source, dueDate, taskListID, "todo", "")
source := strings.ToLower(strings.TrimSpace(req.Source))
if source == "" {
source = strings.ToLower(strings.TrimSpace(r.URL.Query().Get("source")))
}
if source == "" {
source = strings.ToLower(strings.TrimSpace(r.Header.Get("X-Source")))
}
if source == "" {
// When called via API key or webhook token, automatically default source to "webhook"
if r.Header.Get("X-API-Key") != "" ||
strings.HasPrefix(r.Header.Get("Authorization"), "Bearer mindsift_sec_") ||
strings.HasPrefix(r.URL.Query().Get("token"), "mindsift_sec_") {
source = "webhook"
} else {
source = "manual"
}
}
thought, err := s.store.CreateThoughtWithDetails(userID, req.Content, req.Priority, source, dueDate, taskListID, "todo", "")
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
@@ -762,6 +793,18 @@ func (s *Server) handlePurgeDiscarded(w http.ResponseWriter, r *http.Request) {
// --- DOCUMENTS ---
func (s *Server) broadcastDocToAuthorizedUsers(docID, event string) {
users, err := s.store.GetAuthorizedDocUsers(docID)
if err != nil {
return
}
for _, uid := range users {
if userDoc, err := s.store.GetDocumentByID(uid, docID); err == nil && userDoc != nil {
s.wsHub.BroadcastToUser(uid, event, userDoc)
}
}
}
func (s *Server) handleGetDocuments(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
docs, err := s.store.GetDocuments(userID)
@@ -794,6 +837,7 @@ func (s *Server) handleCreateDocument(w http.ResponseWriter, r *http.Request) {
return
}
s.wsHub.BroadcastDocEvent(doc.ID, "DOC_CREATED", doc)
s.broadcastDocToAuthorizedUsers(doc.ID, "DOC_CREATED")
writeJSON(w, http.StatusCreated, doc)
}
@@ -842,10 +886,55 @@ func (s *Server) handleUpdateDocument(w http.ResponseWriter, r *http.Request) {
}
if req.Title != nil || req.Icon != nil || req.FolderPath != nil || req.Blocks != nil || req.Tags != nil {
s.wsHub.BroadcastDocEvent(docID, "DOC_UPDATED", doc)
s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
}
writeJSON(w, http.StatusOK, doc)
}
func (s *Server) handlePatchDocumentBlocks(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
docID := chi.URLParam(r, "id")
// Check document lock
if lock := s.wsHub.GetDocLock(docID); lock != nil && lock.UserID != userID {
w.WriteHeader(http.StatusLocked)
_ = json.NewEncoder(w).Encode(map[string]interface{}{
"error": "Dokument wird aktuell bearbeitet von " + lock.UserName,
"currentLock": lock,
})
return
}
var req domain.DocBlocksPatchRequest
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON")
return
}
doc, mergedOrder, err := s.store.PatchDocumentBlocks(userID, docID, req)
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
}
patchEvent := domain.DocBlocksPatchEvent{
DocID: docID,
UpdatedBy: userID,
UpdatedAt: doc.UpdatedAt,
Upserted: req.Upserted,
DeletedIDs: req.DeletedIDs,
BlockOrder: mergedOrder,
}
s.wsHub.BroadcastDocEvent(docID, "DOC_BLOCKS_PATCHED", patchEvent)
if users, err := s.store.GetAuthorizedDocUsers(docID); err == nil {
for _, uid := range users {
s.wsHub.BroadcastToUser(uid, "DOC_BLOCKS_PATCHED", patchEvent)
}
}
writeJSON(w, http.StatusOK, doc)
}
func (s *Server) handleDeleteDocument(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
docID := chi.URLParam(r, "id")
@@ -913,6 +1002,191 @@ func (s *Server) handleDeleteFolder(w http.ResponseWriter, r *http.Request) {
})
}
func (s *Server) handleMoveFolder(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
var req struct {
SourcePath string `json:"sourcePath"`
TargetParentPath string `json:"targetParentPath"`
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON")
return
}
newPath, movedDocIDs, err := s.store.MoveFolder(userID, req.SourcePath, req.TargetParentPath)
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
}
for _, id := range movedDocIDs {
if doc, err := s.store.GetDocumentByID(userID, id); err == nil && doc != nil {
s.wsHub.BroadcastDocEvent(id, "DOC_UPDATED", doc)
s.broadcastDocToAuthorizedUsers(id, "DOC_UPDATED")
}
}
s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", map[string]string{
"sourcePath": req.SourcePath,
"newPath": newPath,
})
writeJSON(w, http.StatusOK, map[string]interface{}{
"newPath": newPath,
"movedDocIds": movedDocIDs,
})
}
// --- WORKSPACE SHARED FOLDERS ---
func (s *Server) handleGetSharedFolders(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
folders, err := s.store.GetSharedFolders(userID)
if err != nil {
writeError(w, http.StatusInternalServerError, err.Error())
return
}
writeJSON(w, http.StatusOK, folders)
}
func (s *Server) handleCreateSharedFolder(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
var req struct {
Name string `json:"name"`
MountPath string `json:"mountPath"`
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON")
return
}
folder, err := s.store.CreateSharedFolder(userID, req.Name, req.MountPath)
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
}
s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", folder)
writeJSON(w, http.StatusCreated, folder)
}
func (s *Server) handleGetSharedFolderByID(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
folderID := chi.URLParam(r, "id")
folder, err := s.store.GetSharedFolderByID(userID, folderID)
if err != nil {
writeError(w, http.StatusNotFound, err.Error())
return
}
writeJSON(w, http.StatusOK, folder)
}
func (s *Server) handleDeleteSharedFolder(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
folderID := chi.URLParam(r, "id")
if err := s.store.DeleteSharedFolder(userID, folderID); err != nil {
writeError(w, http.StatusInternalServerError, err.Error())
return
}
s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", map[string]string{"folderId": folderID})
writeJSON(w, http.StatusOK, map[string]bool{"deleted": true})
}
func (s *Server) handleUpdateFolderMount(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
folderID := chi.URLParam(r, "id")
var req struct {
MountPath string `json:"mountPath"`
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON")
return
}
if err := s.store.UpdateFolderMount(userID, folderID, req.MountPath); err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
}
s.wsHub.BroadcastToUser(userID, "WORKSPACE_FOLDERS_UPDATED", map[string]string{"folderId": folderID, "mountPath": req.MountPath})
writeJSON(w, http.StatusOK, map[string]bool{"updated": true})
}
func (s *Server) handleGetFolderShares(w http.ResponseWriter, r *http.Request) {
folderID := chi.URLParam(r, "id")
shares, err := s.store.GetFolderShares(folderID)
if err != nil {
writeError(w, http.StatusInternalServerError, err.Error())
return
}
writeJSON(w, http.StatusOK, shares)
}
func (s *Server) handleCreateFolderShare(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
folderID := chi.URLParam(r, "id")
var req struct {
TargetType string `json:"targetType"` // team | user
TargetID string `json:"targetId"`
UserId string `json:"userId"`
Email string `json:"email"`
TeamId string `json:"teamId"`
Permission string `json:"permission"` // read | write
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON")
return
}
targetType := req.TargetType
targetIdentifier := req.TargetID
if targetIdentifier == "" {
if req.TeamId != "" {
targetType = "team"
targetIdentifier = req.TeamId
} else if req.UserId != "" {
targetType = "user"
targetIdentifier = req.UserId
} else if req.Email != "" {
targetType = "user"
targetIdentifier = req.Email
}
}
share, err := s.store.CreateFolderShare(userID, folderID, targetType, targetIdentifier, req.Permission)
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
}
s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", share)
writeJSON(w, http.StatusCreated, share)
}
func (s *Server) handleDeleteFolderShare(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
folderID := chi.URLParam(r, "id")
shareID := chi.URLParam(r, "shareId")
if err := s.store.DeleteFolderShare(userID, folderID, shareID); err != nil {
writeError(w, http.StatusInternalServerError, err.Error())
return
}
s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", map[string]string{"folderId": folderID, "shareId": shareID})
writeJSON(w, http.StatusOK, map[string]bool{"deleted": true})
}
func (s *Server) handleMoveDocument(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
docID := chi.URLParam(r, "id")
var req struct {
FolderPath string `json:"folderPath"`
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON")
return
}
doc, err := s.store.MoveDocument(userID, docID, req.FolderPath)
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
}
s.wsHub.BroadcastDocEvent(docID, "DOC_UPDATED", doc)
s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", nil)
writeJSON(w, http.StatusOK, doc)
}
// --- WORKSPACE TAGS & PAGES ---
func (s *Server) handleGetWorkspaceTags(w http.ResponseWriter, r *http.Request) {
@@ -990,11 +1264,8 @@ func (s *Server) handleCreateDocShare(w http.ResponseWriter, r *http.Request) {
writeError(w, http.StatusBadRequest, err.Error())
return
}
members, _ := s.store.GetTeamMembers(req.TeamID)
for _, tm := range members {
s.wsHub.BroadcastToUser(tm.UserID, "DOC_SHARED", share)
}
s.wsHub.BroadcastDocEvent(docID, "DOC_SHARED", share)
s.broadcastDocToAuthorizedUsers(docID, "DOC_CREATED")
s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
writeJSON(w, http.StatusCreated, share)
return
}
@@ -1013,8 +1284,8 @@ func (s *Server) handleCreateDocShare(w http.ResponseWriter, r *http.Request) {
writeError(w, http.StatusBadRequest, err.Error())
return
}
s.wsHub.BroadcastToUser(share.UserID, "DOC_SHARED", share)
s.wsHub.BroadcastDocEvent(docID, "DOC_SHARED", share)
s.broadcastDocToAuthorizedUsers(docID, "DOC_CREATED")
s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
writeJSON(w, http.StatusCreated, share)
}
@@ -1026,8 +1297,8 @@ func (s *Server) handleDeleteDocShare(w http.ResponseWriter, r *http.Request) {
writeError(w, http.StatusBadRequest, err.Error())
return
}
s.wsHub.BroadcastToUser(targetUserID, "DOC_UNSHARED", map[string]string{"docId": docID})
s.wsHub.BroadcastDocEvent(docID, "DOC_UNSHARED", map[string]string{"docId": docID, "userId": targetUserID})
s.wsHub.BroadcastToUser(targetUserID, "DOC_DELETED", map[string]string{"id": docID})
s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
writeJSON(w, http.StatusOK, map[string]bool{"deleted": true})
}
@@ -1063,7 +1334,7 @@ func (s *Server) handleLockDoc(w http.ResponseWriter, r *http.Request) {
userName = user.DisplayName
}
info, acquired, currentLock := s.wsHub.AcquireDocLock(docID, userID, userName, 12*time.Second)
info, acquired, currentLock := s.wsHub.AcquireDocLock(docID, userID, userName, 20*time.Second)
if !acquired {
w.WriteHeader(http.StatusLocked)
_ = json.NewEncoder(w).Encode(map[string]interface{}{
@@ -1086,7 +1357,7 @@ func (s *Server) handleLockDoc(w http.ResponseWriter, r *http.Request) {
func (s *Server) handleHeartbeatDocLock(w http.ResponseWriter, r *http.Request) {
userID := auth.GetUserID(r.Context())
docID := chi.URLParam(r, "id")
ok := s.wsHub.HeartbeatDocLock(docID, userID, 12*time.Second)
ok := s.wsHub.HeartbeatDocLock(docID, userID, 20*time.Second)
writeJSON(w, http.StatusOK, map[string]bool{"extended": ok})
}
@@ -1333,6 +1604,18 @@ func (s *Server) handleReorderListItems(w http.ResponseWriter, r *http.Request)
}
func (s *Server) handleWebSocket(w http.ResponseWriter, r *http.Request) {
// Some corporate proxies and reverse proxies (e.g. OpenResty/Nginx or HTTP/2 intermediaries)
// strip or alter the Connection header (e.g. "close" or missing) while passing
// Sec-WebSocket-Key or Upgrade: websocket. Normalize it so Gorilla Upgrader succeeds.
if r.Header.Get("Sec-Websocket-Key") != "" {
if !strings.Contains(strings.ToLower(r.Header.Get("Connection")), "upgrade") {
r.Header.Set("Connection", "Upgrade")
}
if !strings.Contains(strings.ToLower(r.Header.Get("Upgrade")), "websocket") {
r.Header.Set("Upgrade", "websocket")
}
}
roomID := chi.URLParam(r, "listId")
if roomID == "" {
roomID = chi.URLParam(r, "spaceId")
@@ -1425,13 +1708,36 @@ func (s *Server) handleWebhookIngest(w http.ResponseWriter, r *http.Request) {
var req struct {
Title string `json:"title"`
Content string `json:"content"`
Text string `json:"text"`
Message string `json:"message"`
Priority string `json:"priority"`
Source string `json:"source"`
Tags []string `json:"tags"`
DueDate string `json:"dueDate"`
DueDate2 string `json:"due_date"`
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON-Payload")
return
bodyBytes, _ := io.ReadAll(r.Body)
if len(bodyBytes) > 0 {
if jsonErr := json.Unmarshal(bodyBytes, &req); jsonErr != nil {
plain := strings.TrimSpace(string(bodyBytes))
if plain != "" {
req.Content = plain
}
}
}
if req.Content == "" {
if req.Text != "" {
req.Content = req.Text
} else if req.Message != "" {
req.Content = req.Message
}
}
dueDate := req.DueDate
if dueDate == "" {
dueDate = req.DueDate2
}
bodyText := strings.TrimSpace(req.Title)
@@ -1443,7 +1749,7 @@ func (s *Server) handleWebhookIngest(w http.ResponseWriter, r *http.Request) {
}
}
if bodyText == "" {
writeError(w, http.StatusBadRequest, "Feld 'title' oder 'content' ist erforderlich")
writeError(w, http.StatusBadRequest, "Feld 'title', 'content', 'text' oder 'message' ist erforderlich")
return
}
@@ -1458,12 +1764,19 @@ func (s *Server) handleWebhookIngest(w http.ResponseWriter, r *http.Request) {
req.Priority = "high"
}
thought, err := s.store.CreateThought(user.ID, bodyText, req.Priority, "webhook", req.DueDate)
source := strings.ToLower(strings.TrimSpace(req.Source))
if source == "" {
source = "webhook"
}
thought, err := s.store.CreateThought(user.ID, bodyText, req.Priority, source, dueDate)
if err != nil {
writeError(w, http.StatusInternalServerError, err.Error())
return
}
s.wsHub.BroadcastTaskEvent(thought.UserID, "TASK_CREATED", thought)
writeJSON(w, http.StatusCreated, map[string]interface{}{
"status": "ingested",
"thought": thought,
@@ -1505,6 +1818,7 @@ func (s *Server) handleUpdateUserSettings(w http.ResponseWriter, r *http.Request
DisplayName *string `json:"displayName"`
Email *string `json:"email"`
Password *string `json:"password"`
AvatarURL *string `json:"avatarUrl"`
AlarmChannels *[]string `json:"alarmChannels"`
AlarmEmail *string `json:"alarmEmail"`
DiscordWebhookURL *string `json:"discordWebhookUrl"`
@@ -1534,6 +1848,7 @@ func (s *Server) handleUpdateUserSettings(w http.ResponseWriter, r *http.Request
req.DiscordWebhookURL,
req.CustomWebhookURL,
req.NotifyBeforeMinutes,
req.AvatarURL,
)
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
internal/api/server_test.go
+91
View File
@@ -747,3 +747,94 @@ func TestWorkspaceTagsAPI(t *testing.T) {
t.Fatalf("expected 200 OK from DELETE /api/v1/folders, got %d", rec.Code)
}
}
func TestWebhookTriageBadgeAndIngestion(t *testing.T) {
dbPath := filepath.Join(t.TempDir(), "test_webhook.db")
store, err := storage.NewStore(dbPath)
if err != nil {
t.Fatalf("failed to init store: %v", err)
}
defer store.Close()
cfg := &config.Config{
JWTSecret: "test-jwt-secret-key",
AllowRegistration: false,
}
srv := NewServer(cfg, store, ws.NewHub(), nil)
router := srv.Router()
// 1. Setup user
setupBody := []byte(`{
"email": "smarthome_owner@example.com",
"password": "secretpassword",
"displayName": "Home User",
"instanceName": "MindSift Home",
"allowRegistration": false,
"seedSampleData": false
}`)
req := httptest.NewRequest(http.MethodPost, "/api/v1/auth/setup", bytes.NewReader(setupBody))
req.Header.Set("Content-Type", "application/json")
rec := httptest.NewRecorder()
router.ServeHTTP(rec, req)
if rec.Code != http.StatusCreated {
t.Fatalf("setup failed: %s", rec.Body.String())
}
var authResp struct {
Token string `json:"token"`
User *domain.User `json:"user"`
}
_ = json.Unmarshal(rec.Body.Bytes(), &authResp)
// 2. Create API key for user
apiKey, err := store.CreateAPIKey(authResp.User.ID, "Home Assistant Webhook")
if err != nil || apiKey == nil || apiKey.RawKey == "" {
t.Fatalf("failed to create API key: %v", err)
}
plainKey := apiKey.RawKey
// 3. Post to /api/v1/inbox using X-API-Key without passing "source"
inboxBody := []byte(`{
"content": "Kellerfeuchtigkeit über 68% gestiegen – Entfeuchter prüfen #smarthome #alarm",
"priority": "urgent"
}`)
req = httptest.NewRequest(http.MethodPost, "/api/v1/inbox", bytes.NewReader(inboxBody))
req.Header.Set("X-API-Key", plainKey)
req.Header.Set("Content-Type", "application/json")
rec = httptest.NewRecorder()
router.ServeHTTP(rec, req)
if rec.Code != http.StatusCreated {
t.Fatalf("expected 201 Created from /api/v1/inbox with API key, got %d: %s", rec.Code, rec.Body.String())
}
var createdThought domain.Thought
_ = json.Unmarshal(rec.Body.Bytes(), &createdThought)
if createdThought.Source != "webhook" {
t.Fatalf("expected created thought to have source='webhook' when called with API key, got '%s'", createdThought.Source)
}
// 4. Post to /api/v1/webhooks/ingest using ?token=... with message alias
webhookBody := []byte(`{
"message": "Waschmaschine im Keller fertig",
"priority": "high",
"tags": ["automation"]
}`)
req = httptest.NewRequest(http.MethodPost, "/api/v1/webhooks/ingest?token="+plainKey, bytes.NewReader(webhookBody))
req.Header.Set("Content-Type", "application/json")
rec = httptest.NewRecorder()
router.ServeHTTP(rec, req)
if rec.Code != http.StatusCreated {
t.Fatalf("expected 201 Created from /api/v1/webhooks/ingest, got %d: %s", rec.Code, rec.Body.String())
}
var ingestResp struct {
Status string `json:"status"`
Thought domain.Thought `json:"thought"`
}
_ = json.Unmarshal(rec.Body.Bytes(), &ingestResp)
if ingestResp.Thought.Source != "webhook" {
t.Fatalf("expected ingested webhook thought to have source='webhook', got '%s'", ingestResp.Thought.Source)
}
if !strings.Contains(ingestResp.Thought.Content, "Waschmaschine") {
t.Fatalf("expected thought content to contain 'Waschmaschine', got '%s'", ingestResp.Thought.Content)
}
}
internal/domain/models.go
+53
View File
@@ -98,6 +98,7 @@ type User struct {
Username string `json:"username,omitempty"`
PasswordHash string `json:"-"`
DisplayName string `json:"displayName"`
AvatarURL string `json:"avatarUrl,omitempty"`
Role string `json:"role"` // admin | member
IsActive bool `json:"isActive"`
AlarmChannels []string `json:"alarmChannels"` // email | discord | webhook
@@ -179,6 +180,7 @@ type TaskListShare struct {
TargetID string `json:"targetId"`
TargetName string `json:"targetName,omitempty"`
Email string `json:"email,omitempty"`
AvatarURL string `json:"avatarUrl,omitempty"`
CreatedAt string `json:"createdAt"`
}
@@ -186,6 +188,7 @@ type TaskListMember struct {
UserID string `json:"userId"`
DisplayName string `json:"displayName"`
Email string `json:"email"`
AvatarURL string `json:"avatarUrl,omitempty"`
Role string `json:"role"` // owner | member
}
@@ -238,6 +241,7 @@ type TeamMember struct {
UserID string `json:"userId"`
DisplayName string `json:"displayName"`
Email string `json:"email"`
AvatarURL string `json:"avatarUrl,omitempty"`
Role string `json:"role"` // admin | member
JoinedAt string `json:"joinedAt"`
}
@@ -265,6 +269,25 @@ type DocumentBlock struct {
Collapsed bool `json:"collapsed,omitempty"`
}
type DocBlocksPatchRequest struct {
Upserted []DocumentBlock `json:"upserted,omitempty"`
DeletedIDs []string `json:"deletedIds,omitempty"`
BlockOrder []string `json:"blockOrder,omitempty"`
Title *string `json:"title,omitempty"`
Icon *string `json:"icon,omitempty"`
}
type DocBlocksPatchEvent struct {
DocID string `json:"docId"`
Upserted []DocumentBlock `json:"upserted,omitempty"`
DeletedIDs []string `json:"deletedIds,omitempty"`
BlockOrder []string `json:"blockOrder,omitempty"`
Title *string `json:"title,omitempty"`
Icon *string `json:"icon,omitempty"`
UpdatedBy string `json:"updatedBy"`
UpdatedAt string `json:"updatedAt"`
}
type DocShare struct {
ID string `json:"id"`
DocID string `json:"docId"`
@@ -306,6 +329,10 @@ type Document struct {
IsOwner bool `json:"isOwner"`
OwnerName string `json:"ownerName,omitempty"`
SharedWith []DocShare `json:"sharedWith,omitempty"`
SharedFolderID string `json:"sharedFolderId,omitempty"`
SubFolderPath string `json:"subFolderPath,omitempty"`
IsSharedFolder bool `json:"isSharedFolder,omitempty"`
FolderPermission string `json:"folderPermission,omitempty"`
}
type TagSummary struct {
@@ -417,3 +444,29 @@ type FullExport struct {
Lists []SharedList `json:"lists"`
TaskLists []TaskList `json:"taskLists,omitempty"`
}
type SharedFolder struct {
ID string `json:"id"`
OwnerID string `json:"ownerId"`
OwnerName string `json:"ownerName,omitempty"`
Name string `json:"name"`
MountPath string `json:"mountPath"`
IsOwner bool `json:"isOwner"`
Permission string `json:"permission"` // owner | write | read
Shares []FolderShare `json:"shares,omitempty"`
CreatedAt string `json:"createdAt"`
UpdatedAt string `json:"updatedAt"`
}
type FolderShare struct {
ID string `json:"id"`
FolderID string `json:"folderId"`
TargetType string `json:"targetType"` // team | user
TargetID string `json:"targetId"`
TargetName string `json:"targetName,omitempty"`
Email string `json:"email,omitempty"`
AvatarURL string `json:"avatarUrl,omitempty"`
Permission string `json:"permission"` // read | write
CreatedBy string `json:"createdBy"`
CreatedAt string `json:"createdAt"`
}
internal/storage/sqlite.go
+1551 -204
View File
File diff suppressed because it is too large. Load diff
internal/storage/sqlite_test.go
+179
View File
@@ -512,3 +512,182 @@ func TestWorkspaceBlockHashtagsAndDetails(t *testing.T) {
t.Fatalf("expected vorrat and kühlregal, got %v", tagMapAfter)
}
}
func TestDatabaseFirstWorkspaceArchitecture(t *testing.T) {
tmpDir := t.TempDir()
dbPath := filepath.Join(tmpDir, "test_db_first.db")
store, err := NewStore(dbPath)
if err != nil {
t.Fatalf("NewStore failed: %v", err)
}
defer store.Close()
userA, err := store.EnsureDefaultUser()
if err != nil {
t.Fatalf("EnsureDefaultUser failed: %v", err)
}
userB, err := store.CreateUser("userb@example.com", "hash", "User B", "member")
if err != nil {
t.Fatalf("CreateUser userB failed: %v", err)
}
// 1. Create a document in User A's folder "Privat" and share with User B (write)
initialBlocks := []domain.DocumentBlock{
{ID: "b1", Type: "bullet", Content: "Zeile 1 Original", Level: 0},
{ID: "b2", Type: "bullet", Content: "Zeile 2 Original", Level: 0},
}
doc, err := store.CreateDocument(userA.ID, "", "Gemeinsame Notiz", "📝", "Privat", initialBlocks, []string{"folder:Privat", "notiz"}, false)
if err != nil {
t.Fatalf("CreateDocument failed: %v", err)
}
// Verify folder:* tag was stripped
for _, tg := range doc.Tags {
if tg == "folder:Privat" {
t.Fatalf("expected folder:* tag to be stripped, got tags: %v", doc.Tags)
}
}
_, err = store.CreateDocShare(userA.ID, doc.ID, userB.ID, "write")
if err != nil {
t.Fatalf("CreateDocShare failed: %v", err)
}
// User B moves the individually shared note into "Arbeit/Eingang"
_, err = store.MoveDocument(userB.ID, doc.ID, "Arbeit/Eingang")
if err != nil {
t.Fatalf("MoveDocument by userB failed: %v", err)
}
// User B edits the document via PatchDocumentBlocks (modifying b2 and adding b3)
// Simultaneously, User A edits b1 and adds b4 using a slightly stale order
_, _, err = store.PatchDocumentBlocks(userB.ID, doc.ID, domain.DocBlocksPatchRequest{
Upserted: []domain.DocumentBlock{
{ID: "b2", Type: "bullet", Content: "Zeile 2 von B bearbeitet", Level: 0},
{ID: "b3", Type: "bullet", Content: "Zeile 3 neu von B", Level: 0},
},
BlockOrder: []string{"b1", "b2", "b3"},
})
if err != nil {
t.Fatalf("PatchDocumentBlocks by userB failed: %v", err)
}
// User A's client only knew about b1, b2 when sending its patch (adds b4)
patchedDocA, _, err := store.PatchDocumentBlocks(userA.ID, doc.ID, domain.DocBlocksPatchRequest{
Upserted: []domain.DocumentBlock{
{ID: "b1", Type: "bullet", Content: "Zeile 1 von A bearbeitet", Level: 0},
{ID: "b4", Type: "bullet", Content: "Zeile 4 neu von A", Level: 0},
},
BlockOrder: []string{"b1", "b2", "b4"}, // stale order without b3!
})
if err != nil {
t.Fatalf("PatchDocumentBlocks by userA failed: %v", err)
}
// Verify NO blocks were lost! All 4 blocks (b1, b2, b3, b4) must exist with both users' edits preserved
if len(patchedDocA.Blocks) != 4 {
t.Fatalf("expected 4 blocks after concurrent patches, got %d: %+v", len(patchedDocA.Blocks), patchedDocA.Blocks)
}
blockContent := make(map[string]string)
for _, b := range patchedDocA.Blocks {
blockContent[b.ID] = b.Content
}
if blockContent["b1"] != "Zeile 1 von A bearbeitet" {
t.Fatalf("expected b1 updated by A, got %q", blockContent["b1"])
}
if blockContent["b2"] != "Zeile 2 von B bearbeitet" {
t.Fatalf("expected b2 updated by B to be preserved, got %q", blockContent["b2"])
}
if blockContent["b3"] != "Zeile 3 neu von B" {
t.Fatalf("expected b3 added by B to be preserved even with stale order from A, got %q", blockContent["b3"])
}
if blockContent["b4"] != "Zeile 4 neu von A" {
t.Fatalf("expected b4 added by A, got %q", blockContent["b4"])
}
// Verify folder independence: User A still sees "Privat", User B still sees "Arbeit/Eingang"
docForA, err := store.GetDocumentByID(userA.ID, doc.ID)
if err != nil || docForA.FolderPath != "Privat" {
t.Fatalf("expected User A FolderPath 'Privat', got %q (err=%v)", docForA.FolderPath, err)
}
docForB, err := store.GetDocumentByID(userB.ID, doc.ID)
if err != nil || docForB.FolderPath != "Arbeit/Eingang" {
t.Fatalf("expected User B FolderPath 'Arbeit/Eingang', got %q (err=%v)", docForB.FolderPath, err)
}
foldersA, err := store.GetFolders(userA.ID)
if err != nil {
t.Fatalf("GetFolders for userA failed: %v", err)
}
for _, f := range foldersA {
if f == "Arbeit" || f == "Arbeit/Eingang" {
t.Fatalf("User B's private folder leaked into User A's folder list: %v", foldersA)
}
}
// 2. Shared Folder & Empty Subfolder Sync
_, err = store.CreateFolder(userA.ID, "TeamProjekt")
if err != nil {
t.Fatalf("CreateFolder TeamProjekt failed: %v", err)
}
sf, err := store.CreateSharedFolder(userA.ID, "TeamProjekt", "TeamProjekt")
if err != nil {
t.Fatalf("CreateSharedFolder failed: %v", err)
}
_, err = store.CreateFolderShare(userA.ID, sf.ID, "user", userB.ID, "write")
if err != nil {
t.Fatalf("CreateFolderShare failed: %v", err)
}
// User B moves their mount root of the shared folder to "ExterneProjekte/TeamProjekt"
err = store.UpdateFolderMount(userB.ID, sf.ID, "ExterneProjekte/TeamProjekt")
if err != nil {
t.Fatalf("UpdateFolderMount failed: %v", err)
}
// User A creates an EMPTY subfolder inside "TeamProjekt/Konzepte"
_, err = store.CreateFolder(userA.ID, "TeamProjekt/Konzepte")
if err != nil {
t.Fatalf("CreateFolder TeamProjekt/Konzepte failed: %v", err)
}
// User B must immediately see "ExterneProjekte/TeamProjekt/Konzepte" in GetFolders without any document inside!
foldersB, err := store.GetFolders(userB.ID)
if err != nil {
t.Fatalf("GetFolders for userB failed: %v", err)
}
foundSubfolderForB := false
for _, f := range foldersB {
if f == "ExterneProjekte/TeamProjekt/Konzepte" {
foundSubfolderForB = true
}
}
if !foundSubfolderForB {
t.Fatalf("expected User B to see empty shared subfolder 'ExterneProjekte/TeamProjekt/Konzepte', got folders: %v", foldersB)
}
// 3. MoveFolder inside a shared folder
newPath, _, err := store.MoveFolder(userA.ID, "TeamProjekt/Konzepte", "TeamProjekt/Archiv")
if err != nil {
t.Fatalf("MoveFolder failed: %v", err)
}
if newPath != "TeamProjekt/Archiv/Konzepte" {
t.Fatalf("expected newPath 'TeamProjekt/Archiv/Konzepte', got %q", newPath)
}
// User B must now see "ExterneProjekte/TeamProjekt/Archiv/Konzepte"
foldersBAfterMove, err := store.GetFolders(userB.ID)
if err != nil {
t.Fatalf("GetFolders after MoveFolder failed: %v", err)
}
foundMovedForB := false
for _, f := range foldersBAfterMove {
if f == "ExterneProjekte/TeamProjekt/Archiv/Konzepte" {
foundMovedForB = true
}
}
if !foundMovedForB {
t.Fatalf("expected User B to see moved shared subfolder 'ExterneProjekte/TeamProjekt/Archiv/Konzepte', got %v", foldersBAfterMove)
}
}