Build the Docs page with a navigable page tree #274
Description
Reference design
Modelled on the Azure DevOps wiki (owner screenshots, 2026-09-16):
- Left pane: a filter field for page titles at the top ("Seitentitel eingeben" with a clear button), below it the page tree.
- Tree rows: an expand chevron only where a page has children, a page icon, the title truncated with an ellipsis, and a
⋮menu on the hovered or selected row (new child page, rename, move, delete). The project's root page has a home icon. - Selected page: highlighted row; ancestors expanded.
- Right pane: large page title, then rendered Markdown: headings, paragraphs, bullet lists, and diagrams.
Diagrams
The reference page contains a flowchart ("Ablaufdiagramm"). Support Mermaid code blocks.
- Serve the renderer from our own origin. The privacy policy promises no third-party scripts, so no CDN.
- Render client-side after the Markdown, with Mermaid's strict security level: page content is user-authored.
- A diagram that fails to parse shows its source and the error instead of an empty box.
- Line breaks inside node labels must render as line breaks. The reference shows a literal
\nin "Lock\nvorhanden?", which is exactly the defect to avoid.
Work
- A Docs tab per project next to Memories and Tasks.
- Tree navigation with expand and collapse, breadcrumbs, and the current page highlighted; the URL identifies the page so links, reloads and Back work.
- Title filter narrows the tree and keeps matching pages' ancestors visible.
- Create a child page, rename, move and reorder from the row menu.
- Reuse the existing Markdown editor with preview, the unsaved-changes dialog and the 404 page.
- Anonymous readers see public pages of public projects only.
Acceptance
- Keyboard navigation of the tree and a usable layout at phone width (tree collapses into a drawer).
- Deep links to a page open with the tree expanded to it.
- Private page titles never appear in the tree or filter results for readers without access.
- A Mermaid flowchart renders without any external request, and a broken one shows its source.