diff --git a/frontend/src/features/help/HelpView.tsx b/frontend/src/features/help/HelpView.tsx index c195bc6..31d92f4 100644 --- a/frontend/src/features/help/HelpView.tsx +++ b/frontend/src/features/help/HelpView.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Search, Layers, @@ -7,51 +7,741 @@ import { Keyboard, Pin, FolderTree, - Folder, Sparkles, Command, - CornerDownLeft, - CornerUpLeft, - MoveVertical, - Check, - Share2, Users, + Mic, + ShoppingCart, + Columns, + Tag, + Link as LinkIcon, + Bell, + Lock, + ArrowLeft, + X, + Smartphone, + RotateCcw, + Heading1, + ListTodo, + Code, + Download, + Flame, + Check, } from 'lucide-react'; interface HelpViewProps { onBack?: () => void; } -type HelpCategory = 'all' | 'workspace' | 'triage' | 'tasks' | 'shortcuts'; +type HelpCategory = + | 'all' + | 'workspace' + | 'triage' + | 'tasks' + | 'lists' + | 'collaboration' + | 'shortcuts'; -export const HelpView: React.FC = () => { +interface DocCard { + id: string; + category: HelpCategory; + title: string; + subtitle?: string; + icon: React.ComponentType<{ className?: string }>; + keywords: string[]; + content: React.ReactNode; +} + +export const HelpView: React.FC = ({ onBack }) => { const [activeCategory, setActiveCategory] = useState('all'); const [searchQuery, setSearchQuery] = useState(''); + // Documentation sections & cards data + const cards: DocCard[] = useMemo( + () => [ + // WORKSPACE & OUTLINER + { + id: 'workspace-architecture', + category: 'workspace', + title: 'Hierarchischer Outliner & Offline-Sync', + subtitle: 'Atomare Speicherung mit kollaborativem Echtzeit-Abgleich', + icon: FileText, + keywords: [ + 'workspace', + 'outliner', + 'datenbank', + 'sqlite', + 'offline', + 'indexeddb', + 'export', + 'markdown', + 'speichern', + ], + content: ( +
+

+ In MindSift ist jede Notiz ein strukturierter, hierarchischer Outliner. + Deine Notizen werden sicher und versioniert in der SQLite-Datenbank abgelegt + und im Browser per IndexedDB zwischengespeichert. +

+
    +
  • + Volle Offline-Fähigkeit: Du kannst auch ohne Internetverbindung nahtlos weiterarbeiten; + Änderungen synchronisieren sich automatisch, sobald du wieder online bist. +
    • +
  • + Markdown-Export: Über das Download-Symbol () im Kopf der Notiz kannst du den aktuellen Stand jederzeit als Standard-Markdown-Datei (.md) auf deinen Rechner exportieren. +
    • +
+
+ ), + }, + { + id: 'workspace-keyboard', + category: 'workspace', + title: 'Tastaturbedienung im Notizen-Editor', + subtitle: 'Flüssiges Schreiben und Gliedern ohne die Maus zu berühren', + icon: Keyboard, + keywords: [ + 'tastatur', + 'shortcuts', + 'enter', + 'tab', + 'shift', + 'backspace', + 'outliner', + 'einrücken', + 'ausrücken', + 'undo', + 'redo', + 'pfeiltasten', + ], + content: ( +
+
    +
  • + Enter : Erzeugt sofort einen neuen Bullet-Point auf derselben Ebene. Ist der Punkt leer und eingerückt, rückt er eine Ebene nach links aus. +
    • +
  • + Tab : Rückt den aktuellen Bullet-Point nach rechts ein und ordnet ihn dem vorherigen Punkt unter. +
    • +
  • + Shift + Tab : Rückt den Bullet-Point nach links aus (verringert die Einrückungstiefe). +
    • +
  • + Shift + Enter : Erzeugt einen weichen Zeilenumbruch innerhalb desselben Textblocks. +
    • +
  • + Backspace : Auf einem leeren Block löscht die Taste diesen sofort. Am Textanfang wird der Block mit dem vorherigen zusammengeführt. +
    • +
  • + ↑ / ↓ : Springt flüssig zum vorherigen bzw. nächsten Block, wenn sich der Cursor ganz am Anfang oder Ende des Textes befindet. +
    • +
  • + Strg + Z / Cmd + Z : Mehrstufiges Notiz-Undo. Wiederholen mit Strg + Y bzw. Strg + Shift + Z. +
    • +
+
+ ), + }, + { + id: 'workspace-slash-and-autoformat', + category: 'workspace', + title: 'Slash-Befehle (/) & Auto-Formatierung', + subtitle: 'Block-Typen wechseln und Markdown direkt beim Tippen formatieren', + icon: Command, + keywords: [ + 'slash', + 'befehle', + 'commands', + 'todo', + 'link', + 'h1', + 'h2', + 'h3', + 'code', + 'callout', + 'divider', + 'auto-formatting', + ], + content: ( +
+
+

+ Tippe / in einen Block, um das Menü für Blocktypen zu öffnen: +

+
+
+ + /todo (Checkbox-Aufgabe) +
+
+ + /link (Notiz verknüpfen) +
+
+ + /h1, /h2, /h3 (Überschriften) +
+
+ + /code (Code-Block) +
+
+ 💬 + /callout (Hinweis-Box) +
+
+ — + /divider (Trennlinie) +
+
+
+
+ Blitz-Formatierung beim Schreiben: +
    +
  • [] oder [ ] am Zeilenanfang wandelt die Zeile sofort in eine Todo-Checkbox um.
    • +
  • [x] wandelt sie in eine erledigte Todo-Checkbox um.
    • +
  • # , ## oder ### am Zeilenanfang formatiert den Block sofort als Überschrift.
    • +
+
+
+ ), + }, + { + id: 'workspace-wikilinks-tags', + category: 'workspace', + title: 'WikiLinks ([[...]]), Hashtags (#) & Tag-Seiten', + subtitle: 'Wissen bidirektional vernetzen und thematisch filtern', + icon: Tag, + keywords: [ + 'wikilinks', + 'links', + 'vernetzung', + 'hashtags', + 'tags', + 'filter', + 'schlagwörter', + ], + content: ( +
+

+ Notizen und Gedanken können in MindSift auf vielfältige Weise miteinander verknüpft werden: +

+
    +
  • + WikiLinks: Schreibe [[Name der Notiz]], um eine direkte Verknüpfung zu einer anderen Notiz herzustellen. Ein Klick darauf öffnet die Zielnotiz unmittelbar. +
    • +
  • + Hashtags: Tippe #Projekt oder #Wichtig an beliebiger Stelle in den Text. Hashtags werden farbig hervorgehoben und indiziert. +
    • +
  • + Ansicht „Tags & Filter“: Im oberen Workspace-Reiter findest du die Tag-Übersicht. Hier siehst du alle verwendeten Hashtags, kannst Fundstellen aus allen Dokumenten gebündelt durchsuchen und sogar eigene freie Notizen auf Tag-Seiten hinterlegen. +
    • +
+
+ ), + }, + { + id: 'workspace-zoom-drag', + category: 'workspace', + title: 'Zoom-Hoisting, Drag & Drop und Favoriten', + subtitle: 'Fokus behalten und Notizen flexibel sortieren', + icon: Pin, + keywords: [ + 'hoisting', + 'zoom', + 'drag', + 'drop', + 'ordner', + 'verschieben', + 'anpinnen', + 'breadcrumbs', + ], + content: ( +
+
    +
  • + Zoom-Hoisting: Klicke direkt auf den Bullet-Punkt (•) eines Blocks, um exklusiv in diesen Ast hineinzuzoomen. Die Breadcrumb-Navigation am oberen Rand führt dich jederzeit stufenweise zurück. +
    • +
  • + Blöcke verschieben: Packe einen Bullet-Punkt mit gedrückter Maustaste, um ihn samt aller untergeordneten Punkte an eine neue Stelle zu ziehen. +
    • +
  • + Ordner-Navigation: Notizen im linken Datei-Explorer lassen sich per Drag & Drop bequem in Unterordner einsortieren. +
    • +
  • + Angepinnte Favoriten: Mit dem Stecknadel-Symbol heftest du wichtige Notizen dauerhaft ganz oben im Explorer an. +
    • +
+
+ ), + }, + { + id: 'workspace-collab-locks', + category: 'workspace', + title: 'Echtzeit-Zusammenarbeit, Sperren & Konflikte', + subtitle: 'Gemeinsames Arbeiten ohne versehentliches Überschreiben', + icon: Lock, + keywords: [ + 'kollaboration', + 'sperren', + 'schloss', + 'konflikte', + 'live', + 'presence', + 'sharing', + ], + content: ( +
+

+ MindSift unterstützt kooperatives Arbeiten an Dokumenten mit integriertem Schutz vor Datenverlust: +

+
    +
  • + Block-Sperren: Bearbeitet jemand einen Bullet-Point, wird dieser mit einem Schloss-Symbol und dem Benutzernamen gekennzeichnet. Andere Nutzer können diesen Punkt temporär nicht überschreiben. +
    • +
  • + Konfliktkopien: Sollten Änderungen zeitgleich oder offline entstehen, überschreibt der Server niemals still deine Eingaben. Stattdessen erscheint ein gelb hervorgehobener Konfliktblock mit zwei Schaltflächen: „Übernehmen“ oder „Verwerfen“. +
    • +
  • + Verbindungsanzeige: Neben dem Notiztitel siehst du immer den Verbindungsmodus (z.B. Live, Long-Polling oder Offline). +
    • +
+
+ ), + }, + { + id: 'workspace-global-todos', + category: 'workspace', + title: 'Globale To-Dos Rollup & Aufgaben-Verknüpfung', + subtitle: 'Alle offenen Aufgaben aus sämtlichen Notizen an einem Ort', + icon: CheckSquare, + keywords: [ + 'rollup', + 'todos', + 'checkboxen', + 'enhanced task', + 'global', + 'aufgaben', + ], + content: ( +
+

+ Im Workspace-Tab „Globale To-Dos“ werden automatisch sämtliche unerledigten Checkboxen (- [ ]) aus allen deinen Notizen gesammelt. +

+
    +
  • + Zweiseitige Synchronisation: Hakst du eine Aufgabe in der globalen To-Do-Liste ab, wird der Block in der Quell-Notiz in Echtzeit aktualisiert. +
    • +
  • + Verknüpfte Aufgaben (Enhanced Tasks): Ausgewählte Notiz-Aufgaben können zusätzlich als vollwertige Aufgaben im Aufgaben- und Kanban-Bereich geführt werden. +
    • +
+
+ ), + }, + + // TRIAGE & QUICK DUMP + { + id: 'triage-capture', + category: 'triage', + title: 'Blitz-Erfassung (Instant Capture Bar)', + subtitle: 'Gedanken in unter 1 Sekunde festhalten – per Tastatur oder Sprache', + icon: Layers, + keywords: [ + 'capture', + 'schnellerfassung', + 'diktat', + 'sprache', + 'mikrofon', + 'inbox', + 'posteingang', + 'c', + ], + content: ( +
+

+ Die Schnellerfassungsleiste am oberen Bildschirmrand sorgt dafür, dass kein flüchtiger Gedanke verloren geht: +

+
    +
  • + Sofortiger Fokus: Drücke irgendwo in der App C oder / (sofern du nicht bereits in einem Textfeld tippst). +
    • +
  • + Sprach-Diktat: Klicke auf das Mikrofon-Symbol () für kontinuierliche Spracheingabe über die Web Speech API. Gesprochene Gedanken werden automatisch mit dem Tag #diktat versehen. +
    • +
  • + Ziel-Auswahl: Gedanken landen standardmäßig im Posteingang. Über die Optionen kannst du sie jedoch sofort als Aufgabe (mit Priorität und Fälligkeit), Listeneintrag (z.B. auf die Einkaufsliste) oder neue Notiz routen. +
    • +
+
+ ), + }, + { + id: 'triage-deck-decisions', + category: 'triage', + title: 'Triage-Deck: Entscheiden mit 1 Taste oder Wischgeste', + subtitle: 'Posteingang in Rekordzeit abarbeiten und den Kopf frei halten', + icon: Sparkles, + keywords: [ + 'triage', + 'deck', + 'h', + 'l', + 't', + 'd', + 'leertaste', + 'swipe', + 'wischen', + 'papierkorb', + 'gesten', + ], + content: ( +
+

+ Im Triage-Deck wird jeder gesammelte Gedanke Karte für Karte vorgelegt. Du entscheidest blitzschnell: +

+
+
+ Tastatur (Desktop): +
    +
  • H oder ← : Wegwerfen (Papierkorb)
    • +
  • L oder → : Als Aufgabe anlegen
    • +
  • T : Mit Fälligkeit / Termin
    • +
  • D : In Workspace-Notiz wandeln
    • +
  • Leertaste : Später (ans Stapelende)
    • +
+
+
+ Wischgesten (Touch & Mobile): +
    +
  • Nach links wischen: Wegwerfen
    • +
  • Nach rechts wischen: Als Aufgabe übernehmen
    • +
  • Gedrückt halten: Menü öffnen (Termin, Liste, Notiz)
    • +
+
+
+
+ ), + }, + { + id: 'triage-webhooks', + category: 'triage', + title: 'Externe Erfassung per Webhooks & API', + subtitle: 'Gedanken von Siri, Home Assistant, n8n oder curl einspeisen', + icon: Bell, + keywords: [ + 'webhooks', + 'api', + 'token', + 'home assistant', + 'siri', + 'shortcuts', + 'automation', + 'curl', + ], + content: ( +
+

+ Unter Benutzereinstellungen → Webhooks & API kannst du persönliche API-Schlüssel generieren. +

+

+ Über den Endpunkt POST /api/v1/webhooks/ingest kannst du Gedanken aus iOS-Kurzbefehlen, Smart-Home-Systemen oder Drittanwendungen einspeisen. Sie werden automatisch mit dem Tag #webhook markiert. +

+
+ ), + }, + + // TASKS & KANBAN + { + id: 'tasks-kanban', + category: 'tasks', + title: 'Listenansicht & Flexibles Kanban-Board', + subtitle: 'Aufgaben visualisieren und mit anpassbaren Spalten steuern', + icon: Columns, + keywords: [ + 'aufgaben', + 'tasks', + 'kanban', + 'board', + 'spalten', + 'drag', + 'drop', + 'listen', + ], + content: ( +
+

+ Aufgaben können flexibel in einer klassischen Listenansicht oder im interaktiven Kanban-Board verwaltet werden: +

+
    +
  • + Ansicht umschalten: Nutze den Umschalter oben rechts zwischen Liste und Kanban. +
    • +
  • + Eigene Kanban-Spalten: Über die Spaltenverwaltung kannst du für jede Aufgabenliste individuelle Phasen definieren (z.B. Backlog, In Bearbeitung, Review, Erledigt) inklusive Farben und Erledigt-Status. +
    • +
  • + Drag & Drop: Ziehe Aufgabenkarten mühelos zwischen den Spalten umher. Das Verschieben in eine Erledigt-Spalte hakt die Aufgabe automatisch ab. +
    • +
+
+ ), + }, + { + id: 'tasks-details-alarms', + category: 'tasks', + title: 'Teilaufgaben, Fälligkeiten & Automatische Alarme', + subtitle: 'Checklisten mit Fortschrittsbalken, Markdown-Notizen und Benachrichtigungen', + icon: CheckSquare, + keywords: [ + 'subtasks', + 'unteraufgaben', + 'alarme', + 'benachrichtigungen', + 'mail', + 'discord', + 'termin', + 'fälligkeit', + 'priorität', + 'zuweisen', + 'zugewiesen', + ], + content: ( +
+
    +
  • + Teilaufgaben (Subtasks): Erstelle innerhalb jeder Aufgabe eine Checkliste mit sichtbarem Fortschrittsbalken (z.B. „3 von 5 erledigt“). +
    • +
  • + Prioritäten & Notizen: Vergib Prioritäten (Dringend, Wichtig, Normal) und hinterlege detaillierte Markdown-Notizen. +
    • +
  • + Zuweisen: In geteilten Aufgabenlisten weist du eine Aufgabe einer oder mehreren Personen mit Zugriff zu (Namen tippen, Enter). Die Zugewiesenen erscheinen als kleine Profilbilder an der Aufgabe; wer den Zugriff auf die Liste verliert, wird automatisch entfernt. +
    • +
  • + Automatische Alarme: Ist ein Fälligkeitsdatum erreicht, kann MindSift dich automatisch per E-Mail, Discord-Webhook oder individuellem HTTP-Webhook benachrichtigen. Konfigurierbar in deinen Benutzereinstellungen. +
    • +
+
+ ), + }, + + // LISTS & SHOPPING + { + id: 'lists-shared-shopping', + category: 'lists', + title: 'Geteilte Listen, Mengenangaben & Hashtag-Kategorien', + subtitle: 'Echtzeit-Einkaufslisten, Packlisten und Checklisten', + icon: ShoppingCart, + keywords: [ + 'listen', + 'einkauf', + 'shopping', + 'checkliste', + 'mengen', + 'kategorien', + 'hashtag', + 'realtime', + ], + content: ( +
+

+ Geteilte Listen eignen sich perfekt für Einkäufe, Packlisten und gemeinsame Besorgungen: +

+
    +
  • + Automatische Mengenerkennung: Eingaben wie 2x Bio-Milch oder 500g Pasta trennen Menge und Bezeichnung automatisch. +
    • +
  • + Kategorisierung per Hashtag: Ergänze einen Hashtag wie #Kühlregal oder #Gemüse. Die Liste gruppiert die Artikel automatisch in entsprechende Abschnitte. +
    • +
  • + Live-Abgleich & Erledigte aufräumen: Abgehakte Artikel werden in Echtzeit synchronisiert und zeigen an, wer sie erledigt hat. Mit dem Aufräumen-Button entfernst du erledigte Artikel gesammelt. +
    • +
+
+ ), + }, + + // APPEARANCE: CUSTOM THEMES + { + id: 'workspace-custom-themes', + category: 'workspace', + title: 'Darstellung & eigene Themes', + subtitle: 'Fertige Designs wählen oder ein eigenes CSS-Theme hochladen', + icon: Sparkles, + keywords: ['theme', 'design', 'farben', 'css', 'dunkel', 'hell', 'darstellung'], + content: ( +
+
    +
  • + Theme wechseln: Im Profilmenü oben rechts oder unter Kontoeinstellungen → Darstellung & Themes. +
    • +
  • + Eigenes Theme: Vorlage herunterladen oder einfügen, Farben und Rundungen anpassen, als .css-Datei hochladen oder einfügen und „Speichern & aktivieren“. Das Theme greift sofort und steht dir auf allen Geräten zur Verfügung. +
    • +
+
+ ), + }, + + // COLLABORATION: ORGANIZATIONS, GROUPS & SHARING + { + id: 'collab-teams-sharing', + category: 'collaboration', + title: 'Organisationen, Gruppen & Freigaben', + subtitle: 'Wer wen sieht, und Notizen, Ordner und Listen sicher teilen', + icon: Users, + keywords: [ + 'teams', + 'gruppen', + 'organisation', + 'sichtbarkeit', + 'privat', + 'freigabe', + 'sharing', + 'berechtigungen', + 'bearbeiter', + 'leser', + 'ordner', + ], + content: ( +
+
    +
  • + Wer wen sieht: Das legt der Server-Admin fest. Je nach Einstellung siehst du alle Nutzer, nur die Mitglieder deiner Organisation oder niemanden (Modus „Privat“: kein Teilen, keine Gruppen). Organisationen verwaltet nur der Server-Admin; jeder gehört höchstens einer an. +
    • +
  • + Gruppen: Fasse Personen, die du sehen kannst, zu Gruppen zusammen (z. B. Familie, WG, Projekt) und teile mit allen auf einmal. Wer eine Gruppe anlegt, ist ihr Admin; mit einer Gruppe teilen kann nur, wer selbst Mitglied ist. +
    • +
  • + Nur der Eigentümer teilt: Bearbeiter können Inhalte ändern, aber nicht weiterteilen. Eine Freigabe an dich kannst du jederzeit selbst verlassen. Wechselt jemand die Organisation oder verlässt eine Gruppe, fallen seine Freigaben dort automatisch weg. +
    • +
  • + Rollen (Bearbeiter vs. Leser): Beim Teilen von Notizen, Ordnern oder Listen wählst du zwischen Bearbeiter (Vollzugriff auf Inhalte und Checklisten) und Nur Lesen (reine Ansicht mit Live-Updates). +
    • +
  • + Dezentrale Ordnerablage: Jeder Empfänger kann geteilte Dokumente und Ordner in seine eigene Verzeichnisstruktur einhängen, ohne die Organisation des Eigentümers zu verändern. +
    • +
+
+ ), + }, + ], + [] + ); + + // Filtered cards based on active category & search query + const filteredCards = useMemo(() => { + let result = cards; + if (activeCategory !== 'all' && activeCategory !== 'shortcuts') { + result = result.filter((card) => card.category === activeCategory); + } + + if (searchQuery.trim()) { + const q = searchQuery.toLowerCase().trim(); + result = result.filter((card) => { + const titleMatch = card.title.toLowerCase().includes(q); + const subMatch = card.subtitle?.toLowerCase().includes(q) || false; + const kwMatch = card.keywords.some((kw) => kw.toLowerCase().includes(q)); + return titleMatch || subMatch || kwMatch; + }); + } + + return result; + }, [cards, activeCategory, searchQuery]); + + // Keyboard shortcuts table data + const shortcuts = useMemo( + () => [ + { key: 'C oder /', scope: 'Global', desc: 'Fokus sofort in die Schnellerfassungsleiste setzen' }, + { key: 'Enter', scope: 'Schnellerfassung', desc: 'Gedanken blitzschnell speichern' }, + { key: 'Esc', scope: 'Schnellerfassung', desc: 'Eingabe leeren & Optionen schließen' }, + { key: 'Enter', scope: 'Workspace Outliner', desc: 'Neuen Bullet-Point anlegen (oder leeren Block ausrücken)' }, + { key: 'Tab', scope: 'Workspace Outliner', desc: 'Bullet-Point einrücken (unterordnen)' }, + { key: 'Shift + Tab', scope: 'Workspace Outliner', desc: 'Bullet-Point nach links ausrücken' }, + { key: 'Shift + Enter', scope: 'Workspace Outliner', desc: 'Weicher Zeilenumbruch innerhalb des Blocks' }, + { key: 'Backspace', scope: 'Workspace Outliner', desc: 'Auf leerem Block: Block löschen; Am Anfang: Zusammenführen' }, + { key: '↑ / ↓', scope: 'Workspace Outliner', desc: 'Zum vorherigen / nächsten Block navigieren' }, + { key: 'Strg + Z / Cmd + Z', scope: 'Workspace Outliner', desc: 'Letzte Notiz-Aktion rückgängig machen' }, + { key: 'Strg + Y / Strg + Shift + Z', scope: 'Workspace Outliner', desc: 'Rückgängig gemachte Aktion wiederholen' }, + { key: '/', scope: 'Workspace Outliner', desc: 'Slash-Menü öffnen (/todo, /link, /h1, /code, ...)' }, + { key: '[] oder [ ] am Anfang', scope: 'Workspace Outliner', desc: 'Sofort in Todo-Checkbox umwandeln' }, + { key: '[x] am Anfang', scope: 'Workspace Outliner', desc: 'Sofort in erledigte Todo-Checkbox umwandeln' }, + { key: '#, ##, ### am Anfang', scope: 'Workspace Outliner', desc: 'Sofort in H1, H2 oder H3 Überschrift wandeln' }, + { key: '[[Notiztitel]]', scope: 'Workspace Outliner', desc: 'Interaktiven WikiLink zu Notiz einbetten' }, + { key: '#Tagname', scope: 'Workspace / Listen', desc: 'Inline-Hashtag für globale Vernetzung oder Kategorisierung' }, + { key: 'H oder ←', scope: 'Triage-Deck', desc: 'Gedanken verwerfen (in den Papierkorb)' }, + { key: 'L oder →', scope: 'Triage-Deck', desc: 'Gedanken sofort zur Aufgabe machen' }, + { key: 'T', scope: 'Triage-Deck', desc: 'Aufgabe mit Fälligkeitsdatum / Termin anlegen' }, + { key: 'D', scope: 'Triage-Deck', desc: 'Gedanken in Notizdokument umwandeln' }, + { key: 'Leertaste', scope: 'Triage-Deck', desc: 'Karte überspringen („Später" – ans Ende des Stapels)' }, + { key: 'Swipe links', scope: 'Triage (Touch/Mobile)', desc: 'Gedanken verwerfen' }, + { key: 'Swipe rechts', scope: 'Triage (Touch/Mobile)', desc: 'Gedanken als Aufgabe übernehmen' }, + { key: 'Gedrückt halten', scope: 'Triage (Touch/Mobile)', desc: 'Aktionsmenü öffnen (Termin, Liste, Notiz)' }, + ], + [] + ); + + const filteredShortcuts = useMemo(() => { + if (!searchQuery.trim()) return shortcuts; + const q = searchQuery.toLowerCase().trim(); + return shortcuts.filter( + (s) => + s.key.toLowerCase().includes(q) || + s.scope.toLowerCase().includes(q) || + s.desc.toLowerCase().includes(q) + ); + }, [shortcuts, searchQuery]); + return (
{/* Header Bar */}
-
-

- - Hilfe & Dokumentation -

-

- Alles Wichtige zur Tastaturbedienung, Outliner-Notizen, Triage und Zusammenarbeit -

+
+ {onBack && ( + + )} +
+

+ + Hilfe & Dokumentation +

+

+ Tastaturbedienung, Outliner-Notizen, Triage, Kanban-Board und Zusammenarbeit +

+
- {/* Search */} -
+ {/* Search Input */} +
setSearchQuery(e.target.value)} - placeholder="In Hilfe suchen…" - className="w-full h-8 pl-8 pr-3 input-field text-xs bg-canvas" + placeholder="In Hilfe & Kürzeln suchen…" + className="w-full h-8 pl-8 pr-8 input-field text-xs bg-canvas" /> + {searchQuery && ( + + )}
@@ -59,10 +749,12 @@ export const HelpView: React.FC = () => {
{[ { id: 'all', label: 'Alle Themen', icon: Sparkles }, - { id: 'workspace', label: 'Workspace & Outliner', icon: FileText }, - { id: 'triage', label: 'Triage & Quick-Dump', icon: Layers }, - { id: 'tasks', label: 'Aufgaben & Listen', icon: CheckSquare }, - { id: 'shortcuts', label: 'Tastatur-Kürzel', icon: Keyboard }, + { id: 'workspace', label: 'Workspace & Notizen', icon: FileText }, + { id: 'triage', label: 'Schnellerfassung & Triage', icon: Layers }, + { id: 'tasks', label: 'Aufgaben & Kanban', icon: CheckSquare }, + { id: 'lists', label: 'Geteilte Listen', icon: ShoppingCart }, + { id: 'collaboration', label: 'Gruppen & Freigaben', icon: Users }, + { id: 'shortcuts', label: 'Tastatur-Kürzel & Gesten', icon: Keyboard }, ].map((cat) => { const Icon = cat.icon; const isActive = activeCategory === cat.id; @@ -71,7 +763,7 @@ export const HelpView: React.FC = () => { key={cat.id} type="button" onClick={() => setActiveCategory(cat.id as HelpCategory)} - 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 rounded-btn flex items-center gap-1.5 transition-colors cursor-pointer ${ isActive ? 'bg-panel-elevated border-accent text-main font-semibold' : 'bg-panel border-border text-muted hover:text-main' @@ -84,279 +776,106 @@ export const HelpView: React.FC = () => { })}
+ {/* Active Search Status Banner */} + {searchQuery && ( +
+ + Suchergebnisse für „{searchQuery}“: {filteredCards.length} Hilfekarten + {activeCategory === 'all' || activeCategory === 'shortcuts' ? `, ${filteredShortcuts.length} Tastenkürzel` : ''} + + +
+ )} + {/* Grid of Documentation Cards */} -
- {/* SECTION: WORKSPACE & OUTLINER */} - {(activeCategory === 'all' || activeCategory === 'workspace') && ( -
-
-

- - Workspace: Der hierarchische Logseq-Outliner -

-

- Jede Notiz in MindSift ist ein flexibler hierarchischer Outliner und wird als Standard-Markdown auf der Festplatte gespeichert. + {activeCategory !== 'shortcuts' && ( +

+ {filteredCards.length > 0 ? ( +
+ {filteredCards.map((card) => { + const Icon = card.icon; + return ( +
+
+
+
+ +
+
+

{card.title}

+ {card.subtitle && ( +

{card.subtitle}

+ )} +
+
+
{card.content}
+
+
+ ); + })} +
+ ) : ( +
+ +

Keine passenden Hilfethemen gefunden

+

+ Versuche einen anderen Suchbegriff oder wechsle zur Kategorie „Alle Themen“.

+ )} +
+ )} -
-
-

- - Flüssige Tastatursteuerung -

-
    -
  • - Enter: Erzeugt sofort einen neuen Bullet-Point auf derselben Ebene. -
    • -
  • - Tab: Rückt den aktuellen Bullet-Point ein und ordnet ihn dem vorherigen Punkt unter. -
    • -
  • - Shift + Tab: Rückt den Bullet-Point wieder nach links aus (verringert die Tiefe). -
    • -
  • - Shift + Enter: Erzeugt einen weichen Zeilenumbruch innerhalb desselben Textblocks. -
    • -
  • - Backspace: Auf einem leeren Block rückt er die Ebene aus bzw. löscht den leeren Bullet. -
    • -
-
- -
-

- - Slash-Befehle (/) -

-

- Tippe einfach / in einen leeren Block, um den Typ flexibel zu wechseln: -

-
- /todo (Checkbox-Aufgabe) - /h1 (Haupt-Überschrift) - /h2 (Abschnitts-Titel) - /h3 (Unter-Überschrift) - /code (Code-Block) - /table (Markdown-Tabelle) - /callout (Hinweis-Box) - /progress (Fortschritt 0-100%) -
-
- -
-

- - Ordnerstruktur & Drag & Drop -

-

- Notizen können im linken Datei-Explorer per Drag & Drop direkt auf beliebige Ordner gezogen werden, um sie zu verschieben. - Ziehst du eine Notiz auf das Hauptverzeichnis, wird sie aus allen Unterordnern herausgenommen. -

-
- -
-

- - Zoom-Hoisting & Favoriten anpinnen -

-
    -
  • - Klick auf den Bullet-Punkt (•): Fokussiert tief in diesen Ast hinein (Zoom-in Hoisting). Du kannst über die Breadcrumbs ganz oben jederzeit zurückspringen. -
    • -
  • - Bullet-Punkt ziehen: Verschiebt den Block samt aller eingerückten Unterelemente an eine neue Position. -
    • -
  • - Anpinnen: Wichtige Notizen heften sich ganz oben im Datei-Explorer unter „Angepinnte Notizen" an. -
    • -
-
-
-
- )} - - {/* SECTION: TRIAGE & QUICK DUMP */} - {(activeCategory === 'all' || activeCategory === 'triage') && ( -
-
-

- - Triage & Quick Dump: Der Kopf frei in 3 Sekunden -

-

- Sofortiges Erfassen ohne Reibung. Gedanken werden gesammelt und anschließend im Triage-Deck mit 1 Taste entschieden. -

-
- -
-
-

1. Blitz-Erfassung

-

- Drücke überall C oder /, tippe den Gedanken ein und drücke Enter. -

-
- -
-

2. Triage Entscheidungs-Tasten

-
    -
  • H oder ← : Wegwerfen / Erledigt
    • -
  • L oder → : Als Aufgabe anlegen
    • -
  • T : Aufgabe mit Fälligkeitsdatum
    • -
  • D : In Workspace-Notiz umwandeln
    • -
  • Leertaste : Später (ans Ende schieben)
    • -
-
- -
-

3. Direkt-Zuordnung

-

- Über das Dropdown neben der Eingabeleiste kannst du einen Eintrag schon beim Schreiben direkt einer Aufgabenliste, Einkaufsliste oder Notiz zuweisen. -

-
-
-
- )} - - {/* SECTION: TASKS & LISTS */} - {(activeCategory === 'all' || activeCategory === 'tasks') && ( -
-
-

- - Aufgaben, Listen & Zusammenarbeit -

-

- Verwalte Aufgabenlisten und Einkaufslisten und teile sie in Echtzeit mit Personen oder Gruppen. -

-
- -
-
-

- - Aufgabenlisten teilen & Avatar-Stack -

-

- Über den Button „Teilen" gibt der Eigentümer eine Aufgabenliste an Personen oder Gruppen frei. - Welche Personen du findest, legt der Server fest: je nach Einstellung alle, nur Mitglieder deiner Organisation oder niemand. - Auf den Tabs zeigen kleine Profilbilder, wer Zugriff hat. -

-
- -
-

- - Globale To-Dos Rollup -

-

- Im Workspace-Tab „Globale To-Dos" werden automatisch alle offenen Checkboxen (- [ ]) aus sämtlichen Notizen und Ordnern aggregiert. - Ein Klick auf die Checkbox synchronisiert die Aufgabe in Echtzeit direkt in der physischen Markdown-Datei! -

-
-
-
- )} - - {/* SECTION: SHORTCUTS CHEAT SHEET */} - {(activeCategory === 'all' || activeCategory === 'shortcuts') && ( -
-
+ {/* SHORTCUTS CHEAT SHEET */} + {(activeCategory === 'all' || activeCategory === 'shortcuts') && ( +
+
+

- Tastatur-Kürzel Gesamtübersicht + Tastatur-Kürzel & Gesten Gesamtübersicht

- Schneller arbeiten ohne Maus: Alle Hotkeys auf einen Blick. + Schneller arbeiten ohne Maus: Alle Hotkeys und Mobile-Gesten auf einen Blick.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TasteBereichFunktion
C oder /GlobalFokus sofort in die Schnellerfassungsleiste setzen
EnterSchnellerfassungGedanken sofort speichern
EscSchnellerfassungEingabe leeren & Menüs schließen
EnterWorkspace OutlinerNeuen Bullet-Point auf gleicher Ebene anlegen
TabWorkspace OutlinerBullet-Point einrücken (dem vorherigen unterordnen)
Shift + TabWorkspace OutlinerBullet-Point ausrücken (Ebene verringern)
Shift + EnterWorkspace OutlinerWeicher Zeilenumbruch innerhalb des aktuellen Blocks
BackspaceWorkspace OutlinerBei leerem Block: Ebene ausrücken bzw. Bullet löschen
/Workspace OutlinerSlash-Command-Menü öffnen (/todo, /h1, /code, ...)
H oder ←Triage-DeckGedanken verwerfen / erledigen
L oder →Triage-DeckGedanken sofort zur Aufgabe machen
TTriage-DeckAufgabe mit Fälligkeitsdatum anlegen
DTriage-DeckGedanken in Notiz/Dokument umwandeln
LeertasteTriage-DeckKarte überspringen („Später" – ans Ende schieben)
-
- )} -
+ +
+ + + + + + + + + + {filteredShortcuts.map((sc, i) => ( + + + + + + ))} + +
Taste / GesteBereichFunktion
{sc.key} + + {sc.scope} + + {sc.desc}
+
+
+ )}
); };