162 lines
5.9 KiB
Markdown
162 lines
5.9 KiB
Markdown
# Feature: Command Bar (Kano-Bar)
|
|
|
|
## Motivation
|
|
|
|
Die Sidebar in Ka-Note ist der primäre Navigationspfad. Das funktioniert gut, wird aber zum Engpass sobald man schnell zwischen Kontexten wechselt, eine Notiz erfassen will ohne den aktuellen Blick zu verlassen, oder auf dem Desktop tastaturgesteuert arbeitet.
|
|
|
|
Ein **Cmd+K Command Bar** (nach Slack-Vorbild) löst das:
|
|
- Navigation ohne Maus in < 3 Tastendrücken
|
|
- Schnelle Erfassung (Gedanke → Notiz in 2 Sekunden)
|
|
- Sidebar kann geschlossen bleiben → mehr Platz für Inhalte
|
|
|
|
---
|
|
|
|
## Konzept: Die "Kano-Bar"
|
|
|
|
Ein dezentes, zentriertes Modal das sich über den aktuellen Content legt.
|
|
|
|
**Trigger:** `Ctrl+K` (Windows/Linux) / `Cmd+K` (Mac)
|
|
|
|
**Drei Modi** — abhängig vom Input:
|
|
|
|
| Input | Modus | Beschreibung |
|
|
|-------|-------|--------------|
|
|
| *(leer)* | Recent | Zuletzt besuchte Kontexte |
|
|
| Text | Navigate | Kontexte + Wiki-Seiten durchsuchen |
|
|
| `/befehl` | Action | Slash-Commands ausführen |
|
|
|
|
---
|
|
|
|
## Navigation
|
|
|
|
Beim Tippen werden **Contexts** (Jour Fixes, Projekte, Firmen, Personen) und **Wiki-Seiten** gefiltert.
|
|
|
|
```
|
|
┌────────────────────────────────────────┐
|
|
│ 🔍 tis... │
|
|
├────────────────────────────────────────┤
|
|
│ 📋 TISAX PROJEKT │
|
|
│ 📋 IT-Sicherheit / TISAX WIKI ↵ │
|
|
│ 👤 Tischler, Martin PERSON │
|
|
└────────────────────────────────────────┘
|
|
```
|
|
|
|
- Links: Icon nach Typ (📅 Meeting, 📋 Projekt, 👤 Person, 🏢 Firma, 📄 Wiki)
|
|
- Rechts: Typ-Badge + Scope-Punkt (blau = Business, grau = Privat)
|
|
- Markierter Eintrag: `↵` Hint rechts
|
|
- `Enter` → Navigation zu `/context/{id}` oder `/wiki/{id}`
|
|
|
|
---
|
|
|
|
## Slash-Commands
|
|
|
|
Scope-dynamische Commands verwenden den aktuell aktiven Scope (Privat/Firma). Scope-explizite Varianten mit Präfix `p` (Privat) oder `b` (Business/Firma) überschreiben den aktiven Scope.
|
|
|
|
| Command | Funktion |
|
|
|---------|----------|
|
|
| `/note [Text]` | Neues Topic im Daily Log (aktiver Scope) |
|
|
| `/pnote [Text]` | Neues Topic im Daily Log (Privat) |
|
|
| `/bnote [Text]` | Neues Topic im Daily Log (Firma) |
|
|
| `/todo [Text]` | Topic mit Wiedervorlage heute (aktiver Scope) |
|
|
| `/ptodo [Text]` | Topic mit Wiedervorlage heute (Privat) |
|
|
| `/btodo [Text]` | Topic mit Wiedervorlage heute (Firma) |
|
|
| `/page [Titel]` | Neue Wiki-Seite erstellen (aktiver Scope) |
|
|
| `/ppage [Titel]` | Neue Wiki-Seite erstellen (Privat) |
|
|
| `/bpage [Titel]` | Neue Wiki-Seite erstellen (Firma) |
|
|
| `/per [Name]` | Neuen Personen-Kontext erstellen; Name → Title Case, setzt `meta.fullName` |
|
|
| `/firma [Name]` | Neuen Firmen-Kontext erstellen |
|
|
| `/jf [Name]` | Zu passendem Jour-Fix-Kontext springen |
|
|
| `/sidebar` | Sidebar ein-/ausblenden |
|
|
| `/home` | Zurück zur Journal-Startseite (`/`) |
|
|
| `/help` | Hilfeseite öffnen (`/help`) |
|
|
|
|
Scope-spezifische Commands erscheinen in der Bar erst ab dem zweiten Zeichen (`/p...` / `/b...`), um Duplikate mit den scope-dynamischen Commands zu vermeiden.
|
|
|
|
Wenn kein Text angegeben wird, erscheint ein Browser-`prompt()` zur Eingabe — `Enter` auf einem Befehl ohne Text löst also direkt eine Aktion aus.
|
|
|
|
Beispiel: `/note Anruf bei Steffen wegen Angebot` → sofort als Topic in `daily-log` gespeichert, ohne den aktuellen Screen zu verlassen.
|
|
|
|
---
|
|
|
|
## Visuelles Design
|
|
|
|
Dark-Mode, passend zum bestehenden Ka-Note-Design:
|
|
|
|
```
|
|
Overlay: bg-black/50 backdrop-blur-sm (z-200)
|
|
Modal: bg-zinc-800, border border-amber-500/30, rounded-xl, shadow-2xl
|
|
Breite: max-w-lg, mx-4 (responsiv)
|
|
Input: text-lg, placeholder "Suchen oder Befehl eingeben..."
|
|
Liste: max-h-80, overflow-y-auto
|
|
Auswahl: bg-zinc-700 rounded
|
|
```
|
|
|
|
Goldener Rand (`amber-500/30`) greift das Ka-Note-Logo-Motiv auf.
|
|
|
|
---
|
|
|
|
## Tastatursteuerung
|
|
|
|
| Taste | Funktion |
|
|
|-------|----------|
|
|
| `Ctrl/Cmd+K` | Bar öffnen |
|
|
| `Escape` | Bar schließen |
|
|
| `↑ / ↓` | Auswahl navigieren |
|
|
| `Enter` | Ausgewählte Aktion ausführen |
|
|
|
|
---
|
|
|
|
## Recent Items
|
|
|
|
Wenn die Bar ohne Eingabe geöffnet wird, zeigt sie die **5 zuletzt besuchten Kontexte** (sessionStorage `recentContexts`). Aktualisierung in `+layout.svelte` nach jeder Navigation via `afterNavigate()`.
|
|
|
|
---
|
|
|
|
## Technische Umsetzung
|
|
|
|
### Neue Datei
|
|
`ka-note/client/src/lib/components/CommandBar.svelte`
|
|
|
|
### Änderungen
|
|
`ka-note/client/src/routes/+layout.svelte`:
|
|
- `CommandBar` mounten
|
|
- Globaler `keydown`-Listener: `Ctrl/Cmd+K` → öffnen
|
|
- `afterNavigate` → recentContexts aktualisieren
|
|
|
|
### Datenquellen (bestehende Stores/Queries)
|
|
- `allActiveContexts()` aus `lib/stores/agenda.ts` — Contexts
|
|
- `allPages()` aus `lib/stores/wiki.ts` — Wiki-Seiten
|
|
- Kein neuer Backend-Endpunkt nötig (alles Dexie/IndexedDB)
|
|
|
|
### Filterung
|
|
In-Memory: `label.toLowerCase().includes(query)` — reicht für typische Datenmengen (< 200 Contexts).
|
|
|
|
---
|
|
|
|
## Scope
|
|
|
|
**Implementiert:**
|
|
- Navigation zu Contexts und Wiki-Seiten
|
|
- Slash-Commands: `/note`, `/pnote`, `/bnote`, `/todo`, `/ptodo`, `/btodo`, `/page`, `/ppage`, `/bpage`, `/per`, `/firma`, `/jf`, `/sidebar`, `/home`, `/help`
|
|
- Recent-Items (sessionStorage)
|
|
- Tastatursteuerung inkl. Enter ohne Text (Browser-Prompt)
|
|
- Responsive (Modal auf Mobile funktioniert)
|
|
- `/per` setzt automatisch Title Case und `meta.fullName`
|
|
|
|
**Out of Scope (v1):**
|
|
- Fuzzy-Suche / Treffergewichtung
|
|
- @-Mention-Suche (Personen-Aktivität)
|
|
- Server-seitige Volltextsuche
|
|
- Persistente "Favourites" in der Bar
|
|
- Konfigurierbarer Shortcut
|
|
- Scope-Varianten für `/per` und `/firma` (`/pper`, `/bper`, ...)
|
|
|
|
---
|
|
|
|
## Offene Fragen
|
|
|
|
1. **Mobile:** Lupe-Icon in `BottomTabBar` öffnet die Bar. ✓
|
|
2. **`/todo`:** Wiedervorlage auf **heute** setzen. ✓
|
|
3. **Ergebnis-Limit:** 3 Contexts + 3 Wiki-Seiten + alle Slash-Commands. ✓
|
|
4. **Archivierte Contexts:** Ausblenden. ✓
|