feat(outline): add document outline sidebar panel with heading navigation

Amit Haridas

src/index.html

@@ -1437,6 +1437,16 @@
                             <line x1="9" y1="21" x2="9" y2="9"/>
                         </svg>
                     </button>
+                    <button class="sidebar-icon" data-panel="outline" title="Outline (Ctrl+Shift+O)">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="8" y1="6" x2="21" y2="6"/>
+                            <line x1="8" y1="12" x2="21" y2="12"/>
+                            <line x1="8" y1="18" x2="21" y2="18"/>
+                            <line x1="3" y1="6" x2="3.01" y2="6"/>
+                            <line x1="3" y1="12" x2="3.01" y2="12"/>
+                            <line x1="3" y1="18" x2="3.01" y2="18"/>
+                        </svg>
+                    </button>
                 </div>
                 <div class="sidebar-panel" id="sidebar-panel">
                     <div class="sidebar-panel-header">

src/renderer.js

@@ -20,6 +20,8 @@ function getRenderTemplatesPanel() { if (!_renderTemplatesPanel) _renderTemplate
 function getRenderExplorerPanel() { if (!_renderExplorerPanel) _renderExplorerPanel = require('./sidebar/explorer-panel').renderExplorerPanel; return _renderExplorerPanel; }
 function getRenderGitPanel() { if (!_renderGitPanel) _renderGitPanel = require('./sidebar/git-panel').renderGitPanel; return _renderGitPanel; }
 function getRenderSnippetsPanel() { if (!_renderSnippetsPanel) _renderSnippetsPanel = require('./sidebar/snippets-panel').renderSnippetsPanel; return _renderSnippetsPanel; }
+let _renderOutlinePanel;
+function getRenderOutlinePanel() { if (!_renderOutlinePanel) _renderOutlinePanel = require('./sidebar/outline-panel').renderOutlinePanel; return _renderOutlinePanel; }
 function getReplPanel() { if (!_ReplPanel) _ReplPanel = require('./repl/repl-panel').ReplPanel; return _ReplPanel; }
 function getCommandPalette() { if (!_CommandPalette) _CommandPalette = require('./command-palette').CommandPalette; return _CommandPalette; }
 function getPrintPreview() { if (!_PrintPreview) _PrintPreview = require('./print-preview').PrintPreview; return _PrintPreview; }
@@ -416,9 +418,11 @@ class TabManager {
                     this.updatePreview(tab.id);
                     this.updateWordCount();
                     this.updateTabBar();
+                    if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
                 },
                 onUpdate: (view) => {
                     this.updateCursorPosition(view);
+                    if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
                 },
                 isDark,
                 showLineNumbers: this.showLineNumbers,
@@ -1467,6 +1471,36 @@ document.addEventListener('DOMContentLoaded', () => {
         })
     });
 
+    let outlinePanelContainer = null;
+    sidebarManager.registerPanel('outline', {
+        title: 'Outline',
+        render: (container) => {
+            outlinePanelContainer = container;
+            getRenderOutlinePanel()(container, {
+                getEditorContent: () => tabManager.getEditorContent(),
+                getActiveLine: () => {
+                    const tab = tabManager.tabs.get(tabManager.activeTabId);
+                    if (tab?.editorView) {
+                        const pos = tab.editorView.state.selection.main.head;
+                        return tab.editorView.state.doc.lineAt(pos).number;
+                    }
+                    return 1;
+                },
+                onHeadingClick: (line) => {
+                    const tab = tabManager.tabs.get(tabManager.activeTabId);
+                    if (tab?.editorView) {
+                        const pos = tab.editorView.state.doc.line(line).from;
+                        tab.editorView.dispatch({
+                            selection: { anchor: pos },
+                            scrollIntoView: true
+                        });
+                        tab.editorView.focus();
+                    }
+                }
+            });
+        }
+    });
+
     // Welcome tab on startup
     const hasLaunched = localStorage.getItem('hasLaunchedBefore');
     const showWelcome = localStorage.getItem('showWelcomeOnStartup') !== 'false';
@@ -1601,6 +1635,7 @@ document.addEventListener('DOMContentLoaded', () => {
     commandPalette.register('Toggle Sidebar: Git', 'Ctrl+Shift+G', () => sidebarManager.togglePanel('git'));
     commandPalette.register('Toggle Sidebar: Snippets', '', () => sidebarManager.togglePanel('snippets'));
     commandPalette.register('Toggle Sidebar: Templates', '', () => sidebarManager.togglePanel('templates'));
+    commandPalette.register('Toggle Sidebar: Outline', 'Ctrl+Shift+O', () => sidebarManager.togglePanel('outline'));
     commandPalette.register('Print Preview', 'Ctrl+P', () => {
         const tab = tabManager.tabs.get(tabManager.activeTabId);
         const preview = document.getElementById(`preview-${tab.id}`);
@@ -1640,9 +1675,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 tabManager.updatePreview(tab.id);
                 tabManager.updateWordCount();
                 tabManager.updateTabBar();
+                if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
             },
             onUpdate: (view) => {
                 tabManager.updateCursorPosition(view);
+                if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
             },
             isDark,
             showLineNumbers: tabManager.showLineNumbers,

src/sidebar/outline-panel.js

@@ -0,0 +1,114 @@
+/**
+ * Document Outline Panel
+ * Parses markdown headings and renders a navigable tree in the sidebar.
+ */
+
+function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHeadingClick }) {
+    container.innerHTML = `
+        <div class="outline-panel">
+            <div class="outline-list" id="outline-list"></div>
+        </div>
+    `;
+
+    const listEl = document.getElementById('outline-list');
+    let headings = [];
+    let activeLine = 1;
+    let debounceTimer = null;
+
+    function parseHeadings(content) {
+        const result = [];
+        if (!content) return result;
+        const lines = content.split('\n');
+        const regex = /^(#{1,6})\s+(.+)$/;
+        for (let i = 0; i < lines.length; i++) {
+            const match = regex.exec(lines[i]);
+            if (match) {
+                result.push({
+                    level: match[1].length,
+                    text: match[2].trim(),
+                    line: i + 1
+                });
+            }
+        }
+        return result;
+    }
+
+    function findActiveHeading(currentLine) {
+        let active = null;
+        for (const h of headings) {
+            if (h.line <= currentLine) {
+                active = h;
+            } else {
+                break;
+            }
+        }
+        return active;
+    }
+
+    function renderHeadings() {
+        const content = getEditorContent();
+        headings = parseHeadings(content);
+        activeLine = getActiveLine();
+
+        if (headings.length === 0) {
+            listEl.innerHTML = `
+                <div class="outline-empty">
+                    <p>No headings found</p>
+                    <p class="outline-hint"># Heading 1</p>
+                    <p class="outline-hint">## Heading 2</p>
+                    <p class="outline-hint">### Heading 3</p>
+                </div>
+            `;
+            return;
+        }
+
+        const activeHeading = findActiveHeading(activeLine);
+
+        listEl.innerHTML = headings.map((h, idx) => `
+            <div class="outline-item outline-level-${h.level}${activeHeading && h.line === activeHeading.line ? ' active' : ''}"
+                 data-line="${h.line}" data-index="${idx}">
+                <span class="outline-text">${escapeHtml(h.text)}</span>
+                <span class="outline-badge">H${h.level}</span>
+            </div>
+        `).join('') + `<div class="outline-footer">${headings.length} heading${headings.length !== 1 ? 's' : ''}</div>`;
+
+        listEl.querySelectorAll('.outline-item').forEach(item => {
+            item.addEventListener('click', () => {
+                const line = parseInt(item.dataset.line, 10);
+                onHeadingClick(line);
+            });
+        });
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function refresh() {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(renderHeadings, 300);
+    }
+
+    function setActiveHeading(line) {
+        activeLine = line;
+        const activeHeading = findActiveHeading(line);
+
+        listEl.querySelectorAll('.outline-item').forEach(item => {
+            const itemLine = parseInt(item.dataset.line, 10);
+            if (activeHeading && itemLine === activeHeading.line) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+    }
+
+    container._refreshOutline = refresh;
+    container._setActiveHeading = setActiveHeading;
+
+    renderHeadings();
+}
+
+module.exports = { renderOutlinePanel };

src/styles-sidebar.css

@@ -276,3 +276,22 @@ body[class*="dark"] .tree-item:hover,
 body[class*="dark"] .git-file:hover {
     background: #333;
 }
+
+/* Outline Panel */
+.outline-panel { display: flex; flex-direction: column; height: 100%; }
+.outline-list { flex: 1; overflow-y: auto; padding: 4px 0; }
+.outline-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; cursor: pointer; font-size: 13px; color: var(--text-secondary, #6b7280); transition: background 0.15s, color 0.15s; border-left: 2px solid transparent; }
+.outline-item:hover { background: var(--bg-tertiary, #f3f4f6); color: var(--text-primary, #1f2937); }
+.outline-item.active { color: var(--accent-blue, #3b82f6); background: rgba(59, 130, 246, 0.08); border-left-color: var(--accent-blue, #3b82f6); font-weight: 600; }
+.outline-level-1 { padding-left: 12px; }
+.outline-level-2 { padding-left: 24px; }
+.outline-level-3 { padding-left: 36px; }
+.outline-level-4 { padding-left: 48px; }
+.outline-level-5 { padding-left: 56px; }
+.outline-level-6 { padding-left: 64px; }
+.outline-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.outline-badge { font-size: 10px; opacity: 0.5; margin-left: 8px; flex-shrink: 0; }
+.outline-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; color: var(--text-muted, #9ca3af); text-align: center; }
+.outline-empty p { margin: 4px 0; }
+.outline-hint { font-family: monospace; font-size: 12px; opacity: 0.7; }
+.outline-footer { padding: 8px 12px; border-top: 1px solid var(--border-color, #e5e7eb); font-size: 11px; color: var(--text-muted, #9ca3af); }