From a6443c577ea720c8575bc132162d53487d49d897 Mon Sep 17 00:00:00 2001 From: aniongithub Date: Sun, 10 May 2026 22:58:41 -0700 Subject: [PATCH 1/6] webui: resizable/collapsible sidebar, table styling, collapsible backlinks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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. --- webui/src/App.tsx | 144 ++++++++++++++++++++++++++++++++----------- webui/src/styles.css | 82 ++++++++++++++++++++++++ 2 files changed, 191 insertions(+), 35 deletions(-) diff --git a/webui/src/App.tsx b/webui/src/App.tsx index a1792f9..328fab1 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -59,6 +59,55 @@ export function App() { return window.matchMedia('(prefers-color-scheme: dark)').matches; }); + // Sidebar resize/collapse state + const [sidebarWidth, setSidebarWidth] = useState(() => { + const saved = localStorage.getItem('mm-sidebar-width'); + return saved ? parseInt(saved, 10) : 240; + }); + const [sidebarCollapsed, setSidebarCollapsed] = useState(() => { + return localStorage.getItem('mm-sidebar-collapsed') === 'true'; + }); + const isResizing = useRef(false); + + useEffect(() => { + localStorage.setItem('mm-sidebar-width', String(sidebarWidth)); + }, [sidebarWidth]); + + useEffect(() => { + localStorage.setItem('mm-sidebar-collapsed', String(sidebarCollapsed)); + }, [sidebarCollapsed]); + + const startResize = (e: MouseEvent) => { + e.preventDefault(); + isResizing.current = true; + document.body.style.cursor = 'col-resize'; + document.body.style.userSelect = 'none'; + + const onMouseMove = (ev: MouseEvent) => { + if (!isResizing.current) return; + const newWidth = Math.max(160, Math.min(480, ev.clientX)); + setSidebarWidth(newWidth); + }; + const onMouseUp = () => { + isResizing.current = false; + document.body.style.cursor = ''; + document.body.style.userSelect = ''; + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + }; + + // Backlinks collapse state + const [backlinksCollapsed, setBacklinksCollapsed] = useState(() => { + return localStorage.getItem('mm-backlinks-collapsed') === 'true'; + }); + + useEffect(() => { + localStorage.setItem('mm-backlinks-collapsed', String(backlinksCollapsed)); + }, [backlinksCollapsed]); + useEffect(() => { document.documentElement.classList.toggle('dark', isDark); localStorage.setItem('mm-theme', isDark ? 'dark' : 'light'); @@ -243,40 +292,59 @@ export function App() { return (
{/* Sidebar */} -
-
mind-map
-
- setSearchQuery((e.target as HTMLInputElement).value)} - onKeyDown={(e) => { if (e.key === 'Enter') handleSearch(); }} - /> -
-
    - {pages.map(p => ( -
  • navigate(p.path)} - > -
    {p.title || p.path}
    -
    {p.path}
    -
    • - ))} -
-
- {pageCount} pages -
- - -
+
+
+ mind-map +
+ {!sidebarCollapsed && ( + <> +
+ setSearchQuery((e.target as HTMLInputElement).value)} + onKeyDown={(e) => { if (e.key === 'Enter') handleSearch(); }} + /> +
+
    + {pages.map(p => ( +
  • navigate(p.path)} + > +
    {p.title || p.path}
    +
    {p.path}
    +
    • + ))} +
+
+ {pageCount} pages +
+ + +
+
+ + )} + {!sidebarCollapsed && ( +
+ )}
{/* Main */} @@ -399,8 +467,14 @@ export function App() {
{current.backlinks && current.backlinks.length > 0 && (
-
Linked from
- {current.backlinks.map(bl => ( +
setBacklinksCollapsed(!backlinksCollapsed)} + > + {backlinksCollapsed ? '\u25B6' : '\u25BC'} + Linked from ({current.backlinks.length}) +
+ {!backlinksCollapsed && current.backlinks.map(bl => (
navigate(bl)}> {bl}
diff --git a/webui/src/styles.css b/webui/src/styles.css index 1486576..9cd7a53 100644 --- a/webui/src/styles.css +++ b/webui/src/styles.css @@ -51,6 +51,13 @@ html, body, #root { flex-direction: column; flex-shrink: 0; overflow-y: auto; + position: relative; + transition: width 0.15s ease; +} + +.sidebar.collapsed { + width: 48px; + overflow: hidden; } .sidebar-header { @@ -58,6 +65,48 @@ html, body, #root { font-size: 20px; font-weight: 200; letter-spacing: -0.5px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.sidebar.collapsed .sidebar-header { + padding: 24px 8px 8px; + justify-content: center; +} + +.sidebar.collapsed .sidebar-header-text { + display: none; +} + +.sidebar-collapse-btn { + background: none; + border: none; + color: var(--fg-dim); + cursor: pointer; + font-size: 12px; + padding: 4px 6px; + flex-shrink: 0; +} + +.sidebar-collapse-btn:hover { + color: var(--fg); +} + +.sidebar-resize-handle { + position: absolute; + top: 0; + right: 0; + width: 4px; + height: 100%; + cursor: col-resize; + z-index: 10; +} + +.sidebar-resize-handle:hover { + background: var(--accent); + opacity: 0.4; } .sidebar-search { @@ -191,6 +240,26 @@ html, body, #root { border-top: 1px solid var(--border); margin: 20px 0; } +.markdown table { + border-collapse: collapse; + width: auto; + margin: 12px 0; + font-size: 14px; +} +.markdown th { + text-align: left; + font-weight: 600; + padding: 8px 14px; + border: 1px solid var(--border); + background: var(--tile-bg); +} +.markdown td { + padding: 6px 14px; + border: 1px solid var(--border); +} +.markdown tr:hover td { + background: var(--tile-bg); +} /* --- Backlinks --- */ @@ -206,6 +275,19 @@ html, body, #root { letter-spacing: 1px; color: var(--fg-dim); margin-bottom: 8px; + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + gap: 6px; +} + +.backlinks-title:hover { + color: var(--fg-muted); +} + +.backlinks-toggle { + font-size: 9px; } .backlink-item { From a15e89acae0441c7559866a4d7906a4160876d36 Mon Sep 17 00:00:00 2001 From: aniongithub Date: Sun, 10 May 2026 23:20:01 -0700 Subject: [PATCH 2/6] webui: add sort cycling for page list (recent/path/title) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- webui/src/App.tsx | 71 ++++++++++++++++++++++++++++++++++++++------ webui/src/styles.css | 28 +++++++++++++++++ 2 files changed, 90 insertions(+), 9 deletions(-) diff --git a/webui/src/App.tsx b/webui/src/App.tsx index 328fab1..480baf1 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -108,21 +108,65 @@ export function App() { localStorage.setItem('mm-backlinks-collapsed', String(backlinksCollapsed)); }, [backlinksCollapsed]); + // Sort mode: 'recent' | 'path' | 'title' + type SortMode = 'recent' | 'path' | 'title'; + const sortModes: SortMode[] = ['recent', 'path', 'title']; + const sortLabels: Record = { recent: 'Recent', path: 'A→Z path', title: 'A→Z title' }; + const sortIcons: Record = { recent: '🕑', path: '📂', title: '🔤' }; + + const [sortMode, setSortMode] = useState(() => { + const saved = localStorage.getItem('mm-sort-mode'); + return (saved === 'path' || saved === 'title') ? saved : 'recent'; + }); + + useEffect(() => { + localStorage.setItem('mm-sort-mode', sortMode); + }, [sortMode]); + + const cycleSortMode = () => { + const idx = sortModes.indexOf(sortMode); + setSortMode(sortModes[(idx + 1) % sortModes.length]); + }; + + const sortPages = (list: Page[]): Page[] => { + const sorted = [...list]; + switch (sortMode) { + case 'path': + sorted.sort((a, b) => a.path.localeCompare(b.path)); + break; + case 'title': + sorted.sort((a, b) => (a.title || a.path).localeCompare(b.title || b.path)); + break; + case 'recent': + default: + // API already returns modified DESC; preserve that order + break; + } + return sorted; + }; + useEffect(() => { document.documentElement.classList.toggle('dark', isDark); localStorage.setItem('mm-theme', isDark ? 'dark' : 'light'); }, [isDark]); // Load page list + const [rawPages, setRawPages] = useState([]); + const loadPages = async () => { try { const list = await api.listPages(); - setPages(list); + setRawPages(list); } catch (e) { console.error('Failed to load pages:', e); } }; + // Re-sort whenever rawPages or sortMode changes + useEffect(() => { + setPages(sortPages(rawPages)); + }, [rawPages, sortMode]); + useEffect(() => { loadPages(); }, []); // Hash routing @@ -193,7 +237,7 @@ export function App() { } try { const results = await api.searchPages(searchQuery); - setPages(results.map(r => ({ path: r.path, title: r.title, body: '', modified_at: '' }))); + setRawPages(results.map(r => ({ path: r.path, title: r.title, body: '', modified_at: '' }))); } catch (e) { console.error('Search failed:', e); } @@ -309,13 +353,22 @@ export function App() { {!sidebarCollapsed && ( <>
- setSearchQuery((e.target as HTMLInputElement).value)} - onKeyDown={(e) => { if (e.key === 'Enter') handleSearch(); }} - /> +
+ setSearchQuery((e.target as HTMLInputElement).value)} + onKeyDown={(e) => { if (e.key === 'Enter') handleSearch(); }} + /> + +
    {pages.map(p => ( diff --git a/webui/src/styles.css b/webui/src/styles.css index 9cd7a53..026f300 100644 --- a/webui/src/styles.css +++ b/webui/src/styles.css @@ -125,6 +125,34 @@ html, body, #root { outline: none; } +.search-wrapper { + display: flex; + align-items: stretch; +} + +.search-wrapper input { + flex: 1; + min-width: 0; + border-right: none; +} + +.sort-toggle { + background: var(--bg); + border: 1px solid var(--border); + border-left: none; + color: var(--fg-dim); + cursor: pointer; + font-size: 13px; + padding: 0 8px; + display: flex; + align-items: center; +} + +.sort-toggle:hover { + color: var(--fg); + background: var(--tile-bg); +} + .sidebar-search input:focus { border-color: var(--accent); } From f1622f67b449c76a365199fdaf3097587513f821 Mon Sep 17 00:00:00 2001 From: aniongithub Date: Sun, 10 May 2026 23:36:31 -0700 Subject: [PATCH 3/6] webui: replace sort emoji with Noun Project SVG icons Use inline SVG icons (recent/sort/A-Z) with currentColor fill so they adapt to light/dark theme. Attribution text removed from SVGs. --- webui/src/App.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/webui/src/App.tsx b/webui/src/App.tsx index 480baf1..3bff3ea 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -112,7 +112,18 @@ export function App() { type SortMode = 'recent' | 'path' | 'title'; const sortModes: SortMode[] = ['recent', 'path', 'title']; const sortLabels: Record = { recent: 'Recent', path: 'A→Z path', title: 'A→Z title' }; - const sortIcons: Record = { recent: '🕑', path: '📂', title: '🔤' }; + + const SortIcon = ({ mode }: { mode: SortMode }) => { + const props = { width: 16, height: 16, fill: 'currentColor', viewBox: '' as string }; + switch (mode) { + case 'recent': + return ; + case 'path': + return ; + case 'title': + return ; + } + }; const [sortMode, setSortMode] = useState(() => { const saved = localStorage.getItem('mm-sort-mode'); @@ -366,7 +377,7 @@ export function App() { onClick={cycleSortMode} title={`Sort: ${sortLabels[sortMode]}`} > - {sortIcons[sortMode]} +
From a5b69aa23cbd5610857f370083648e8cfc6867ba Mon Sep 17 00:00:00 2001 From: aniongithub Date: Sun, 10 May 2026 23:47:00 -0700 Subject: [PATCH 4/6] webui: fix mermaid diagrams not rendering after edit+save MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- webui/src/App.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/webui/src/App.tsx b/webui/src/App.tsx index 3bff3ea..50c814b 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -5,8 +5,6 @@ import mermaid from 'mermaid'; mermaid.initialize({ startOnLoad: false, theme: 'default' }); -let mermaidCounter = 0; - interface SyncSettings { enabled: boolean; default: string; @@ -309,8 +307,9 @@ export function App() { // Extract mermaid blocks before marked processing to prevent HTML escaping const mermaidBlocks: Record = {}; + let localCounter = 0; const withPlaceholders = withLinks.replace(/```mermaid\s*\n([\s\S]*?)```/g, (_, code) => { - const id = `mermaid-${++mermaidCounter}`; + const id = `mermaid-${++localCounter}`; mermaidBlocks[id] = code.trim(); return `
MERMAID_PLACEHOLDER_${id}
`; }); @@ -523,7 +522,7 @@ export function App() {
) : ( <> -
+
Date: Sun, 10 May 2026 23:52:53 -0700 Subject: [PATCH 5/6] webui: inline edit icon next to page title 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. --- webui/src/App.tsx | 13 +++++++++---- webui/src/styles.css | 18 ++++++++++++++++++ 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/webui/src/App.tsx b/webui/src/App.tsx index 50c814b..f246cdb 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -492,7 +492,14 @@ export function App() { ) : current ? ( <>
-
{current.title}
+
+ {current.title} + {!editing && ( + + )} +
{current.path} {current.modified_at && {new Date(current.modified_at).toLocaleDateString()}} @@ -501,13 +508,11 @@ export function App() { )}
- {editing ? ( + {editing && ( <> - ) : ( - )}
diff --git a/webui/src/styles.css b/webui/src/styles.css index 026f300..dbefffb 100644 --- a/webui/src/styles.css +++ b/webui/src/styles.css @@ -211,6 +211,24 @@ html, body, #root { font-size: 36px; font-weight: 200; letter-spacing: -1px; + display: flex; + align-items: center; + gap: 12px; +} + +.edit-icon-btn { + background: none; + border: none; + color: var(--fg-dim); + cursor: pointer; + padding: 4px; + display: flex; + align-items: center; + transition: color 0.15s; +} + +.edit-icon-btn:hover { + color: var(--accent); } .page-meta { From 2f151cd5a69259beeac5f26408f905451beed864 Mon Sep 17 00:00:00 2001 From: aniongithub Date: Mon, 11 May 2026 00:07:47 -0700 Subject: [PATCH 6/6] testdata: add feature table and architecture diagram to mind-map page --- testdata/projects/mind-map.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/testdata/projects/mind-map.md b/testdata/projects/mind-map.md index d05ccac..20f5d58 100644 --- a/testdata/projects/mind-map.md +++ b/testdata/projects/mind-map.md @@ -1,10 +1,34 @@ --- +status: active title: mind-map type: project -status: active --- # mind-map A wiki engine for AI agents and humans. Built with [[Go]]. Links back to [[index]]. + +## Feature Status + +| Feature | Status | Notes | +|---------|--------|-------| +| Wiki engine | ✅ Done | SQLite-backed, FTS5 search | +| Wikilinks | ✅ Done | [[target]] and [[target|display]] | +| Backlinks | ✅ Done | Auto-tracked in DB | +| MCP server | ✅ Done | read, write, search tools | +| Web UI | 🔧 WIP | Sidebar, markdown, mermaid | +| Git sync | 🔧 WIP | Push/pull with remotes | +| Auth | ⏳ Planned | Token-based access | + +## Architecture + +```mermaid +graph TD + A[Web UI] -->|REST API| B[Go Server] + C[MCP Client] -->|stdio/SSE| B + B --> D[(SQLite + FTS5)] + B --> E[Markdown Files] + B --> F[Git Sync] + F --> G[Remote Repos] +```