Wissensdatenbank: Wiki-Layout Redesign

- Sidebar mit Baum-Navigation (aufklappbare Kategorien mit Eintraegen)
- Content-Bereich zeigt ausgewaehlten Eintrag als volle Seite
- Inline-Editor statt Modal (Markdown-Textarea, volle Breite)
- Echtzeit-Suche filtert den Baum in der Sidebar
- Lese-Modus mit gerendertem Markdown als Standard
- Altes Expand/Collapse und Entry-Modal entfernt

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Server Deploy
2026-03-19 20:16:33 +01:00
Ursprung 48c917eb28
Commit e1ae6183be
5 geänderte Dateien mit 1003 neuen und 1890 gelöschten Zeilen

Datei anzeigen

@@ -1,6 +1,25 @@
TASKMATE - CHANGELOG TASKMATE - CHANGELOG
==================== ====================
================================================================================
19.03.2026 - v393 - Wissensdatenbank: Wiki-Layout Redesign
WISSENSDATENBANK KOMPLETT UMGEBAUT:
- Neues Wiki-Layout mit Baum-Navigation (links) und Content-Bereich (rechts)
- Sidebar: Aufklappbare Kategorien mit Eintraegen als Kinder, Suchfeld, Neue Kategorie Button
- Content: 3 Zustaende (Leer, Lese-Ansicht, Editor)
- Lese-Ansicht: Titel, Meta-Info, Markdown-Body, Anhaenge, Bearbeiten/Loeschen Buttons
- Editor: Inline-Bearbeitung mit Titel, URL, Markdown-Textarea, Datei-Upload
- Alle Eintraege auf einen Blick im Baum sichtbar
- Suche filtert den Baum in Echtzeit
- Alte Ansicht (Expand/Collapse Liste, Drag&Drop, Resize Handle) entfernt
Geaenderte Dateien:
- frontend/index.html (view-knowledge HTML-Struktur)
- frontend/css/knowledge.css (komplett neu)
- frontend/js/knowledge.js (komplett umgebaut)
- frontend/sw.js (CACHE_VERSION 392 -> 393)
================================================================================ ================================================================================
19.03.2026 - v392 - Wissensdatenbank: Markdown, Volltextsuche, Sanitizing 19.03.2026 - v392 - Wissensdatenbank: Markdown, Volltextsuche, Sanitizing

Datei-Diff unterdrückt, da er zu groß ist Diff laden

Datei anzeigen

@@ -580,91 +580,107 @@
<!-- Mobile: Kategorien als horizontale Chips --> <!-- Mobile: Kategorien als horizontale Chips -->
<div id="knowledge-mobile-categories" class="knowledge-mobile-categories"> <div id="knowledge-mobile-categories" class="knowledge-mobile-categories">
<!-- Wird dynamisch befüllt --> <!-- Wird dynamisch befuellt -->
</div> </div>
<!-- Haupt-Layout: Sidebar + Main --> <!-- Wiki-Layout: Sidebar + Content -->
<div class="knowledge-layout"> <div class="knowledge-layout">
<!-- Sidebar (links) - Kategorien --> <!-- Sidebar (links) - Baum-Navigation -->
<aside class="knowledge-sidebar"> <aside class="knowledge-sidebar">
<div class="knowledge-sidebar-header"> <div class="knowledge-sidebar-header">
<h3 class="knowledge-sidebar-title">Kategorien</h3> <div class="knowledge-sidebar-search">
<button id="btn-new-category" class="btn btn-primary btn-sm"> <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" fill="none"/></svg>
<input type="text" id="knowledge-sidebar-search" placeholder="Suchen..." autocomplete="off">
</div>
<button id="btn-new-category" class="btn btn-primary btn-sm" title="Neue Kategorie">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg> <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
Neu
</button> </button>
</div> </div>
<div id="knowledge-categories" class="knowledge-category-list"> <nav id="knowledge-tree" class="knowledge-tree">
<!-- Kategorien werden dynamisch geladen --> <!-- Baum-Navigation wird dynamisch befuellt -->
</div> </nav>
<div id="knowledge-categories-empty" class="knowledge-sidebar-empty hidden"> <div id="knowledge-tree-empty" class="knowledge-sidebar-empty hidden">
<svg viewBox="0 0 24 24" width="48" height="48"> <svg viewBox="0 0 24 24" width="48" height="48">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" fill="none"/> <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" fill="none"/> <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" fill="none"/>
</svg> </svg>
<p>Keine Kategorien</p> <p>Keine Kategorien vorhanden</p>
</div> </div>
<!-- Resize Handle -->
<div id="knowledge-resize-handle" class="knowledge-resize-handle"></div>
</aside> </aside>
<!-- Hauptbereich (rechts) - Einträge --> <!-- Content (rechts) - Wiki-Seite -->
<main class="knowledge-main"> <main class="knowledge-content">
<div class="knowledge-main-header">
<h2 id="knowledge-category-title" class="knowledge-main-title">Kategorie wählen</h2>
<button id="btn-new-entry" class="btn btn-primary" disabled>
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
Neuer Eintrag
</button>
</div>
<!-- Einträge-Liste --> <!-- Zustand 1: Leer / Nichts ausgewaehlt -->
<div id="knowledge-entries" class="knowledge-entry-list"> <div id="knowledge-empty" class="knowledge-empty-state">
<!-- Einträge werden dynamisch geladen -->
</div>
<!-- Leerer Zustand: Keine Kategorie ausgewählt -->
<div id="knowledge-no-selection" class="knowledge-empty">
<svg viewBox="0 0 24 24" width="64" height="64"> <svg viewBox="0 0 24 24" width="64" height="64">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" fill="none"/> <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" fill="none"/> <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" fill="none"/>
</svg> </svg>
<h3>Kategorie auswählen</h3> <h3>Wissensdatenbank</h3>
<p>Wählen Sie links eine Kategorie aus, um Einträge anzuzeigen.</p> <p>Waehlen Sie links einen Eintrag aus, um ihn hier anzuzeigen.</p>
</div> </div>
<!-- Leerer Zustand: Keine Einträge --> <!-- Zustand 2: Lese-Ansicht -->
<div id="knowledge-entries-empty" class="knowledge-empty hidden"> <div id="knowledge-reader" class="knowledge-reader hidden">
<svg viewBox="0 0 24 24" width="64" height="64"> <div class="knowledge-reader-header">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" fill="none"/> <h1 id="knowledge-reader-title"></h1>
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" fill="none"/> <div class="knowledge-reader-actions">
</svg> <button id="btn-edit-entry" class="btn btn-secondary btn-sm">
<h3>Keine Einträge</h3> <svg viewBox="0 0 24 24" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" fill="none"/></svg>
<p>Erstellen Sie den ersten Eintrag in dieser Kategorie.</p> Bearbeiten
</button>
<button id="btn-delete-entry-reader" class="btn btn-danger btn-sm">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" fill="none"/></svg>
Loeschen
</button>
</div>
</div>
<div id="knowledge-reader-meta" class="knowledge-reader-meta"></div>
<div id="knowledge-reader-url" class="knowledge-reader-url hidden"></div>
<div id="knowledge-reader-body" class="knowledge-reader-body"></div>
<div id="knowledge-reader-attachments" class="knowledge-reader-attachments hidden"></div>
</div> </div>
<!-- Suchergebnisse --> <!-- Zustand 3: Editor -->
<div id="knowledge-search-results" class="knowledge-search-results hidden"> <div id="knowledge-editor" class="knowledge-editor hidden">
<div class="knowledge-search-header"> <div class="knowledge-editor-header">
<button id="btn-clear-search" class="btn btn-text"> <h2 id="knowledge-editor-title">Neuer Eintrag</h2>
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
Suche beenden
</button>
<span class="knowledge-search-info">Ergebnisse für "<span id="knowledge-search-query"></span>"</span>
</div>
<div id="knowledge-search-list" class="knowledge-entry-list">
<!-- Suchergebnisse werden hier angezeigt -->
</div>
<div id="knowledge-search-empty" class="knowledge-empty hidden">
<svg viewBox="0 0 24 24" width="64" height="64">
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
<h3>Keine Ergebnisse</h3>
<p>Keine Einträge gefunden.</p>
</div> </div>
<form id="knowledge-editor-form" class="knowledge-editor-form">
<input type="hidden" id="knowledge-editor-id">
<input type="hidden" id="knowledge-editor-category-id">
<div class="form-group">
<label for="knowledge-editor-title-input">Titel</label>
<input type="text" id="knowledge-editor-title-input" class="form-control form-control-lg" placeholder="Titel des Eintrags" required>
</div>
<div class="form-group">
<label for="knowledge-editor-url-input">URL (optional)</label>
<input type="url" id="knowledge-editor-url-input" class="form-control" placeholder="https://...">
</div>
<div class="form-group">
<label for="knowledge-editor-notes">Inhalt (Markdown)</label>
<textarea id="knowledge-editor-notes" class="form-control knowledge-editor-textarea" placeholder="Markdown-Inhalt hier eingeben..."></textarea>
</div>
<div id="knowledge-editor-attachments" class="knowledge-editor-attachments hidden">
<label>Anhaenge</label>
<div id="knowledge-editor-attachments-list"></div>
<div id="knowledge-editor-file-upload" class="knowledge-editor-file-upload">
<input type="file" id="knowledge-editor-file-input" multiple hidden>
<button type="button" id="btn-upload-file" class="btn btn-secondary btn-sm">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
Datei hochladen
</button>
</div>
</div>
<div class="knowledge-editor-buttons">
<button type="submit" class="btn btn-primary">Speichern</button>
<button type="button" id="btn-cancel-editor" class="btn btn-secondary">Abbrechen</button>
</div>
</form>
</div> </div>
</main> </main>
</div> </div>

Datei-Diff unterdrückt, da er zu groß ist Diff laden

Datei anzeigen

@@ -4,7 +4,7 @@
* Offline support and caching * Offline support and caching
*/ */
const CACHE_VERSION = '392'; const CACHE_VERSION = '393';
const CACHE_NAME = 'taskmate-v' + CACHE_VERSION; const CACHE_NAME = 'taskmate-v' + CACHE_VERSION;
const STATIC_CACHE_NAME = 'taskmate-static-v' + CACHE_VERSION; const STATIC_CACHE_NAME = 'taskmate-static-v' + CACHE_VERSION;
const DYNAMIC_CACHE_NAME = 'taskmate-dynamic-v' + CACHE_VERSION; const DYNAMIC_CACHE_NAME = 'taskmate-dynamic-v' + CACHE_VERSION;