Skip to content

WebUI improvements: sidebar, tables, sorting, edit icon, mermaid fix#30

Merged
aniongithub merged 6 commits into
mainfrom
feature/webui-updates
May 11, 2026
Merged

WebUI improvements: sidebar, tables, sorting, edit icon, mermaid fix#30
aniongithub merged 6 commits into
mainfrom
feature/webui-updates

Conversation

@aniongithub
Copy link
Copy Markdown
Owner

Summary

A batch of WebUI quality-of-life improvements:

Resizable & collapsible sidebar

  • Drag the right edge to resize (160–480px)
  • ◀/▶ button to collapse/expand
  • Width and collapsed state persisted in localStorage

Table styling

  • Proper borders, cell padding, header background, and row hover highlights
  • Works in both light and dark themes

Page list sorting

  • Sort cycle button (⇅) in the search bar
  • Cycles through: Recent (default) → A→Z path → A→Z title
  • SVG icons from Noun Project, themed via currentColor
  • Preference persisted in localStorage

Collapsible backlinks panel

  • Click "Linked from (N)" header to toggle
  • Collapsed state persisted in localStorage

Inline edit icon

  • Pencil SVG icon inline with the page title
  • Dim by default, accent-colored on hover
  • Save/cancel buttons appear in action bar when editing

Bug fix: mermaid diagrams after edit+save

  • Module-level counter caused stale DOM reuse; switched to local counter
  • Added key on page-body to force DOM recreation after saves

…links

- Sidebar: drag-to-resize handle (160–480px) with collapse/expand toggle
  button. Width and collapsed state persisted in localStorage.
- Tables: proper borders, cell padding, header background, and hover rows.
- Backlinks: clickable header toggles collapse; state persisted in
  localStorage.
Sort button in search bar cycles through Recent, A→Z path, and A→Z title.
Icon reflects current mode (🕑/📂/🔤). Preference persisted in localStorage.
API already returns pages sorted by modified DESC; path and title sorts
are applied client-side.
Use inline SVG icons (recent/sort/A-Z) with currentColor fill so they
adapt to light/dark theme. Attribution text removed from SVGs.
Two issues: (1) module-level mermaidCounter kept incrementing, generating
new IDs each render — mermaid had already mutated the DOM nodes from the
previous render, and Preact's dangerouslySetInnerHTML diffing reused them.
(2) No key on the page-body div, so Preact could reconcile stale DOM.

Fix: use a local counter (stable IDs per render) and add a key based on
path+modified_at to force full DOM recreation after saves.
Replace the standalone edit button with a pencil SVG icon inline with
the title. Icon is hidden by default and appears on hover, turning
accent-colored on icon hover. Save/cancel buttons remain in page-actions
when editing.
@aniongithub aniongithub merged commit eb6813f into main May 11, 2026
1 check passed
@aniongithub aniongithub deleted the feature/webui-updates branch May 11, 2026 07:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant