Seitenbaum-Sidebar: Eltern über Kindern stapeln, kompaktere Darstellung, Icons #122

New Issue

fable-5 · 2026-07-15T10:53:59+02:00

fable-5 commented

2026-07-15 10:53:59 +02:00

UI-Überarbeitung (Stefans Feedback nach dem Vault-Import-Test mit echtem Vault)

Layout-Bug: .sidebar__page-item { display:flex; align-items:center } war für die flache Liste gebaut. Im Baum liegen dadurch die Eltern-Zeile (.sidebar__tree-row) und die Kinder-Liste (.sidebar__tree-children) als Flex-Items nebeneinander — der Elternknoten erscheint vertikal zentriert neben seinen Kindern statt darüber.

Änderungen:

Stapel-Layout: Eltern-Seite zuerst, Kinder darunter eingerückt (.sidebar__pages--tree .sidebar__page-item → flex-column). DOM-Struktur bleibt (e2e-Verträge page-tree/import-vault).
Einrückung pro Ebene auf ca. 2 Zeichenbreiten (~1.25em) reduzieren.
Kompaktere Zeilen (vertikales Padding/Schriftgröße von .sidebar__page reduzieren).
Ordner-/Seiten-Icons (lucide-react): Chevron-Caret + Folder/FolderOpen für Eltern, FileText für Blätter. Caret bleibt Button mit Seitentitel im aria-Label (#109-Konvention).

**UI-Überarbeitung** (Stefans Feedback nach dem Vault-Import-Test mit echtem Vault) **Layout-Bug:** `.sidebar__page-item { display:flex; align-items:center }` war für die flache Liste gebaut. Im Baum liegen dadurch die Eltern-Zeile (`.sidebar__tree-row`) und die Kinder-Liste (`.sidebar__tree-children`) als Flex-Items **nebeneinander** — der Elternknoten erscheint vertikal zentriert neben seinen Kindern statt darüber. **Änderungen:** - Stapel-Layout: Eltern-Seite zuerst, Kinder darunter eingerückt (`.sidebar__pages--tree .sidebar__page-item` → flex-column). DOM-Struktur bleibt (e2e-Verträge page-tree/import-vault). - Einrückung pro Ebene auf ca. 2 Zeichenbreiten (~1.25em) reduzieren. - Kompaktere Zeilen (vertikales Padding/Schriftgröße von `.sidebar__page` reduzieren). - Ordner-/Seiten-Icons (lucide-react): Chevron-Caret + Folder/FolderOpen für Eltern, FileText für Blätter. Caret bleibt Button mit Seitentitel im aria-Label (#109-Konvention).

fable-5 added this to the M14 — UI-Überarbeitung nach Vault-Import-Test milestone 2026-07-15 10:53:59 +02:00

fable-5 added the

frontend

label 2026-07-15 10:53:59 +02:00

fable-5 referenced this issue from a commit

2026-07-15 11:30:33 +02:00

Sidebar tree: stack parents above children, compact rows, icons

fable-5 closed this issue

2026-07-15 11:30:33 +02:00

fable-5 commented

2026-07-15 11:43:43 +02:00

Erledigt in d4fb2a3.

Root Cause des Zentrierens: .sidebar__page-item ist eine Flex-ZEILE (für die flache Liste gebaut); im Baum lagen Eltern-Zeile und Kinder-<ul> als Flex-Items nebeneinander, align-items:center zentrierte den Elternknoten vertikal neben seinem Teilbaum. Fix: .sidebar__pages--tree .sidebar__page-item { flex-direction: column; align-items: stretch } — Eltern zuerst, Kinder darunter. DOM-Struktur unverändert (e2e-Verträge page-tree/import-vault halten).
Einrückung pro Ebene auf 1.25em (~2 Zeichenbreiten) — bewusste Ein-Zeilen-Stellschraube für die Feinjustierung nach Sichttest.
Kompakter: .sidebar__page 0.875rem + engeres Padding.
Icons (lucide, Muster aus der TopBar): ChevronRight-Caret (bestehende CSS-Rotation), Folder/FolderOpen je Zustand, FileText für Blätter. Caret bleibt Button, aria-Labels bewusst ohne Seitentitel (#101-Konvention).

e2e page-tree + import-vault 3× flaky-frei lokal, CI grün auf 1781f12. DnD-Zonen (JS) unangetastet; Maus-Gefühl bitte nach dem nächsten Deploy einmal prüfen.

Erledigt in `d4fb2a3`. - **Root Cause des Zentrierens:** `.sidebar__page-item` ist eine Flex-ZEILE (für die flache Liste gebaut); im Baum lagen Eltern-Zeile und Kinder-`<ul>` als Flex-Items nebeneinander, `align-items:center` zentrierte den Elternknoten vertikal neben seinem Teilbaum. Fix: `.sidebar__pages--tree .sidebar__page-item { flex-direction: column; align-items: stretch }` — Eltern zuerst, Kinder darunter. DOM-Struktur unverändert (e2e-Verträge page-tree/import-vault halten). - **Einrückung** pro Ebene auf `1.25em` (~2 Zeichenbreiten) — bewusste Ein-Zeilen-Stellschraube für die Feinjustierung nach Sichttest. - **Kompakter:** `.sidebar__page` 0.875rem + engeres Padding. - **Icons** (lucide, Muster aus der TopBar): ChevronRight-Caret (bestehende CSS-Rotation), Folder/FolderOpen je Zustand, FileText für Blätter. Caret bleibt Button, aria-Labels bewusst ohne Seitentitel (#101-Konvention). e2e page-tree + import-vault 3× flaky-frei lokal, CI grün auf `1781f12`. DnD-Zonen (JS) unangetastet; Maus-Gefühl bitte nach dem nächsten Deploy einmal prüfen.

fable-5 referenced this issue

2026-07-15 16:29:16 +02:00

Favoriten: Stern in der Aktionsleiste, goldene Baum-Icons, sys-fav-Label, Favoriten-Filterknopf #132

Sign in to join this conversation.