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] +``` diff --git a/webui/src/App.tsx b/webui/src/App.tsx index a1792f9..f246cdb 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; @@ -59,21 +57,125 @@ 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]); + + // 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 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'); + 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 @@ -144,7 +246,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); } @@ -205,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}
`; }); @@ -243,40 +346,68 @@ 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 */} @@ -361,7 +492,14 @@ export function App() { ) : current ? ( <>
-
{current.title}
+
+ {current.title} + {!editing && ( + + )} +
{current.path} {current.modified_at && {new Date(current.modified_at).toLocaleDateString()}} @@ -370,13 +508,11 @@ export function App() { )}
- {editing ? ( + {editing && ( <> - ) : ( - )}
@@ -391,7 +527,7 @@ 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..dbefffb 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 { @@ -76,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); } @@ -134,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 { @@ -191,6 +286,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 +321,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 {