Store YAML frontmatter in notes.

templates/note_editor.html

@@ -89,6 +89,10 @@
                 
                 <div class="form-group editor-group">
                     <div class="editor-toolbar">
+                        <button type="button" class="toolbar-btn" onclick="toggleFrontmatter()" title="Toggle Frontmatter" style="background: #e3f2fd;">
+                            <span style="font-family: monospace;">---</span>
+                        </button>
+                        <span class="toolbar-separator"></span>
                         <button type="button" class="toolbar-btn toolbar-bold" onclick="insertMarkdown('**', '**')" title="Bold">
                             <b>B</b>
                         </button>
@@ -635,6 +639,25 @@
 // Global Ace Editor instance
 let aceEditor;
 
+// Toggle frontmatter visibility
+function toggleFrontmatter() {
+    if (!aceEditor) return;
+    
+    const content = aceEditor.getValue();
+    
+    if (content.trim().startsWith('---')) {
+        // Frontmatter exists, just move cursor to it
+        aceEditor.moveCursorTo(0, 0);
+        aceEditor.focus();
+    } else {
+        // Add frontmatter
+        const newContent = updateContentFrontmatter(content);
+        aceEditor.setValue(newContent, -1);
+        aceEditor.moveCursorTo(0, 0);
+        aceEditor.focus();
+    }
+}
+
 // Markdown toolbar functions for Ace Editor
 function insertMarkdown(before, after) {
     if (!aceEditor) return;
@@ -666,14 +689,39 @@ function insertMarkdown(before, after) {
     syncContentAndUpdatePreview();
 }
 
-// Extract title from first line of content
+// Extract title from content (frontmatter or first line)
 function extractTitleFromContent(content) {
+    // Check for frontmatter first
+    if (content.trim().startsWith('---')) {
+        const frontmatterMatch = content.match(/^---\s*\n([\s\S]*?)\n---/);
+        if (frontmatterMatch) {
+            const frontmatterContent = frontmatterMatch[1];
+            const titleMatch = frontmatterContent.match(/title:\s*(.+)/);
+            if (titleMatch) {
+                // Remove quotes if present
+                return titleMatch[1].replace(/^["']|["']$/g, '').trim();
+            }
+        }
+    }
+    
+    // Otherwise extract from first line
     const lines = content.split('\n');
     let firstLine = '';
     
-    // Find the first non-empty line
-    for (let line of lines) {
-        const trimmed = line.trim();
+    // Skip frontmatter if present
+    let skipUntil = 0;
+    if (lines[0].trim() === '---') {
+        for (let i = 1; i < lines.length; i++) {
+            if (lines[i].trim() === '---') {
+                skipUntil = i + 1;
+                break;
+            }
+        }
+    }
+    
+    // Find the first non-empty line after frontmatter
+    for (let i = skipUntil; i < lines.length; i++) {
+        const trimmed = lines[i].trim();
         if (trimmed) {
             // Remove markdown headers if present
             firstLine = trimmed.replace(/^#+\s*/, '');
@@ -685,14 +733,101 @@ function extractTitleFromContent(content) {
     return firstLine || 'Untitled Note';
 }
 
+// Update or create frontmatter in content
+function updateContentFrontmatter(content) {
+    const settings = {
+        visibility: document.getElementById('visibility').value.toLowerCase(),
+        folder: document.getElementById('folder').value || undefined,
+        tags: document.getElementById('tags').value ? 
+            document.getElementById('tags').value.split(',').map(t => t.trim()).filter(t => t) : undefined,
+        project: document.getElementById('project_id').selectedOptions[0]?.text.split(' - ')[0] || undefined,
+        task_id: parseInt(document.getElementById('task_id').value) || undefined,
+        pinned: false
+    };
+    
+    // Remove undefined values
+    Object.keys(settings).forEach(key => settings[key] === undefined && delete settings[key]);
+    
+    // Parse existing frontmatter
+    let body = content;
+    let existingFrontmatter = {};
+    
+    if (content.trim().startsWith('---')) {
+        const match = content.match(/^---\s*\n([\s\S]*?)\n---\s*\n([\s\S]*)$/);
+        if (match) {
+            try {
+                // Simple YAML parsing for our use case
+                const yamlContent = match[1];
+                yamlContent.split('\n').forEach(line => {
+                    const colonIndex = line.indexOf(':');
+                    if (colonIndex > 0) {
+                        const key = line.substring(0, colonIndex).trim();
+                        const value = line.substring(colonIndex + 1).trim();
+                        existingFrontmatter[key] = value.replace(/^["']|["']$/g, '');
+                    }
+                });
+                body = match[2];
+            } catch (e) {
+                console.error('Error parsing frontmatter:', e);
+            }
+        }
+    }
+    
+    // Merge settings with existing frontmatter
+    const frontmatter = { ...existingFrontmatter, ...settings };
+    
+    // Add title from content or form field
+    const titleField = document.getElementById('title').value;
+    if (titleField && titleField !== 'Untitled Note') {
+        frontmatter.title = titleField;
+    } else {
+        frontmatter.title = extractTitleFromContent(body);
+    }
+    
+    // Build new frontmatter
+    let yamlContent = '---\n';
+    Object.entries(frontmatter).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+            if (Array.isArray(value)) {
+                yamlContent += `${key}:\n`;
+                value.forEach(item => {
+                    yamlContent += `  - ${item}\n`;
+                });
+            } else if (typeof value === 'string' && (value.includes(':') || value.includes('"'))) {
+                yamlContent += `${key}: "${value}"\n`;
+            } else {
+                yamlContent += `${key}: ${value}\n`;
+            }
+        }
+    });
+    yamlContent += '---\n\n';
+    
+    return yamlContent + body;
+}
+
 // Sync Ace Editor content with hidden textarea and update preview
-function syncContentAndUpdatePreview() {
+let frontmatterUpdateTimer;
+function syncContentAndUpdatePreview(updateFrontmatter = true) {
     if (!aceEditor) return;
     
-    const content = aceEditor.getValue();
+    let content = aceEditor.getValue();
+    
+    // Only update frontmatter when settings change, not on every keystroke
+    if (updateFrontmatter) {
+        clearTimeout(frontmatterUpdateTimer);
+        frontmatterUpdateTimer = setTimeout(() => {
+            const newContent = updateContentFrontmatter(aceEditor.getValue());
+            if (aceEditor.getValue() !== newContent) {
+                const currentPosition = aceEditor.getCursorPosition();
+                aceEditor.setValue(newContent, -1);
+                aceEditor.moveCursorToPosition(currentPosition);
+            }
+        }, 2000); // Wait 2 seconds after typing stops
+    }
+    
     document.getElementById('content').value = content;
     
-    // Update title from first line
+    // Update title from content
     const title = extractTitleFromContent(content);
     document.getElementById('title').value = title;
     
@@ -703,9 +838,61 @@ function syncContentAndUpdatePreview() {
         headerTitle.textContent = title ? (isEdit ? `Edit: ${title}` : title) : (isEdit ? 'Edit Note' : 'Create Note');
     }
     
+    // Sync settings from frontmatter
+    syncSettingsFromFrontmatter(content);
+    
     updatePreview();
 }
 
+// Sync settings UI from frontmatter
+function syncSettingsFromFrontmatter(content) {
+    if (!content.trim().startsWith('---')) return;
+    
+    const match = content.match(/^---\s*\n([\s\S]*?)\n---/);
+    if (!match) return;
+    
+    const yamlContent = match[1];
+    const frontmatter = {};
+    
+    // Simple YAML parsing
+    yamlContent.split('\n').forEach(line => {
+        const colonIndex = line.indexOf(':');
+        if (colonIndex > 0) {
+            const key = line.substring(0, colonIndex).trim();
+            let value = line.substring(colonIndex + 1).trim();
+            
+            // Handle arrays (tags)
+            if (key === 'tags' && !value) {
+                // Multi-line array, skip for now
+                return;
+            }
+            
+            value = value.replace(/^["']|["']$/g, '');
+            frontmatter[key] = value;
+        }
+    });
+    
+    // Update UI elements
+    if (frontmatter.visibility) {
+        const visibilitySelect = document.getElementById('visibility');
+        const capitalizedVisibility = frontmatter.visibility.charAt(0).toUpperCase() + frontmatter.visibility.slice(1);
+        for (let option of visibilitySelect.options) {
+            if (option.value === capitalizedVisibility) {
+                visibilitySelect.value = capitalizedVisibility;
+                break;
+            }
+        }
+    }
+    
+    if (frontmatter.folder !== undefined) {
+        document.getElementById('folder').value = frontmatter.folder;
+    }
+    
+    if (frontmatter.tags !== undefined) {
+        document.getElementById('tags').value = frontmatter.tags;
+    }
+}
+
 // Live preview update
 let previewTimer;
 function updatePreview() {
@@ -747,7 +934,7 @@ function initializeAceEditor() {
     // Set theme (use github theme for light mode)
     aceEditor.setTheme("ace/theme/github");
     
-    // Set markdown mode
+    // Set markdown mode (which includes YAML frontmatter highlighting)
     aceEditor.session.setMode("ace/mode/markdown");
     
     // Configure editor options
@@ -770,15 +957,43 @@ function initializeAceEditor() {
     const initialContent = document.getElementById('content').value;
     aceEditor.setValue(initialContent, -1); // -1 moves cursor to start
     
-    // If editing and has content, extract title
+    // If editing and has content, sync from frontmatter
     if (initialContent) {
-        const title = extractTitleFromContent(initialContent);
+        // If editing existing note without frontmatter, add it
+        if (!initialContent.trim().startsWith('---')) {
+            const newContent = updateContentFrontmatter(initialContent);
+            aceEditor.setValue(newContent, -1);
+        }
+        syncSettingsFromFrontmatter(aceEditor.getValue());
+        const title = extractTitleFromContent(aceEditor.getValue());
         document.getElementById('title').value = title;
     }
     
     // Listen for changes in Ace Editor
     aceEditor.on('change', function() {
-        syncContentAndUpdatePreview();
+        syncContentAndUpdatePreview(false); // Don't update frontmatter on every keystroke
+    });
+    
+    // If this is a new note, add initial frontmatter
+    if (!initialContent || initialContent.trim() === '') {
+        const newContent = updateContentFrontmatter('# New Note\n\nStart writing here...');
+        aceEditor.setValue(newContent, -1);
+        syncContentAndUpdatePreview(false);
+    }
+    
+    // Listen for changes in settings to update frontmatter
+    ['visibility', 'folder', 'tags', 'project_id', 'task_id'].forEach(id => {
+        const element = document.getElementById(id);
+        if (element) {
+            element.addEventListener('change', function() {
+                // Force immediate frontmatter update when settings change
+                const content = updateContentFrontmatter(aceEditor.getValue());
+                const currentPosition = aceEditor.getCursorPosition();
+                aceEditor.setValue(content, -1);
+                aceEditor.moveCursorToPosition(currentPosition);
+                syncContentAndUpdatePreview(false);
+            });
+        }
     });
     
     // Handle form submission - ensure content is synced

templates/note_mindmap.html

@@ -0,0 +1,401 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="timetrack-container note-mindmap-container">
+    <div class="mindmap-header">
+        <h2>{{ note.title }} - Mind Map View</h2>
+        <div class="mindmap-actions">
+            <button type="button" class="btn btn-sm btn-secondary" onclick="resetZoom()">
+                Reset Zoom
+            </button>
+            <button type="button" class="btn btn-sm btn-secondary" onclick="toggleFullscreen()">
+                Fullscreen
+            </button>
+            <a href="{{ url_for('view_note', slug=note.slug) }}" class="btn btn-sm btn-info">
+                Back to Note
+            </a>
+        </div>
+    </div>
+
+    <div id="mindmap-container" class="mindmap-container">
+        <svg id="mindmap-svg"></svg>
+    </div>
+</div>
+
+<style>
+.note-mindmap-container {
+    max-width: none !important;
+    width: 100% !important;
+    padding: 1rem !important;
+    margin: 0 !important;
+    height: calc(100vh - 100px);
+    display: flex;
+    flex-direction: column;
+}
+
+.mindmap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.mindmap-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.mindmap-container {
+    flex: 1;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+}
+
+#mindmap-svg {
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+}
+
+#mindmap-svg.grabbing {
+    cursor: grabbing;
+}
+
+.node {
+    cursor: pointer;
+}
+
+.node circle {
+    fill: #fff;
+    stroke: steelblue;
+    stroke-width: 3px;
+}
+
+.node rect {
+    fill: #f9f9f9;
+    stroke: steelblue;
+    stroke-width: 2px;
+    rx: 5px;
+}
+
+.node text {
+    font: 12px sans-serif;
+    pointer-events: none;
+}
+
+.link {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 2px;
+}
+
+.node.collapsed circle {
+    fill: steelblue;
+}
+
+.node.root rect {
+    fill: #4CAF50;
+    stroke: #45a049;
+}
+
+.node.root text {
+    fill: white;
+    font-weight: bold;
+}
+
+.node.level1 rect {
+    fill: #e3f2fd;
+    stroke: #2196F3;
+}
+
+.node.level2 rect {
+    fill: #f3e5f5;
+    stroke: #9C27B0;
+}
+
+.node.level3 rect {
+    fill: #fff3e0;
+    stroke: #FF9800;
+}
+
+/* Fullscreen styles */
+.mindmap-container.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    margin: 0;
+    border-radius: 0;
+}
+</style>
+
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+// Parse markdown content to extract structure
+const markdownContent = {{ note.content | tojson }};
+
+function parseMarkdownToTree(markdown) {
+    const lines = markdown.split('\n');
+    const root = {
+        name: '{{ note.title }}',
+        children: [],
+        level: 0
+    };
+    
+    const stack = [root];
+    let currentList = null;
+    
+    lines.forEach(line => {
+        // Check for headers
+        const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headerMatch) {
+            const level = headerMatch[1].length;
+            const text = headerMatch[2];
+            
+            // Pop stack until we find parent level
+            while (stack.length > level) {
+                stack.pop();
+            }
+            
+            const node = {
+                name: text,
+                children: [],
+                level: level
+            };
+            
+            const parent = stack[stack.length - 1];
+            if (!parent.children) parent.children = [];
+            parent.children.push(node);
+            stack.push(node);
+            currentList = null;
+        }
+        
+        // Check for list items
+        const listMatch = line.match(/^(\s*)[*\-+]\s+(.+)$/);
+        if (listMatch) {
+            const indent = listMatch[1].length;
+            const text = listMatch[2];
+            
+            const node = {
+                name: text,
+                children: [],
+                level: stack[stack.length - 1].level + 1,
+                isList: true
+            };
+            
+            const parent = stack[stack.length - 1];
+            if (!parent.children) parent.children = [];
+            parent.children.push(node);
+        }
+        
+        // Check for numbered lists
+        const numberedListMatch = line.match(/^(\s*)\d+\.\s+(.+)$/);
+        if (numberedListMatch) {
+            const text = numberedListMatch[2];
+            
+            const node = {
+                name: text,
+                children: [],
+                level: stack[stack.length - 1].level + 1,
+                isList: true
+            };
+            
+            const parent = stack[stack.length - 1];
+            if (!parent.children) parent.children = [];
+            parent.children.push(node);
+        }
+    });
+    
+    return root;
+}
+
+// D3 Mind Map Implementation
+const treeData = parseMarkdownToTree(markdownContent);
+
+const margin = {top: 20, right: 120, bottom: 20, left: 120};
+const width = document.getElementById('mindmap-container').clientWidth;
+const height = document.getElementById('mindmap-container').clientHeight;
+
+const svg = d3.select("#mindmap-svg")
+    .attr("viewBox", [-width / 2, -height / 2, width, height]);
+
+const g = svg.append("g");
+
+// Add zoom behavior
+const zoom = d3.zoom()
+    .scaleExtent([0.1, 3])
+    .on("zoom", (event) => {
+        g.attr("transform", event.transform);
+    });
+
+svg.call(zoom);
+
+// Create tree layout
+const tree = d3.tree()
+    .size([height - margin.top - margin.bottom, width - margin.left - margin.right]);
+
+// Create hierarchy
+const root = d3.hierarchy(treeData);
+root.x0 = 0;
+root.y0 = 0;
+
+// Collapse after the second level
+root.descendants().forEach((d, i) => {
+    d.id = i;
+    if (d.depth && d.depth > 1) {
+        d._children = d.children;
+        d.children = null;
+    }
+});
+
+update(root);
+
+function update(source) {
+    const duration = 750;
+    
+    // Compute tree layout
+    const treeData = tree(root);
+    const nodes = treeData.descendants();
+    const links = treeData.links();
+    
+    // Normalize for fixed-depth
+    nodes.forEach(d => {
+        d.y = d.depth * 180;
+    });
+    
+    // Update nodes
+    const node = g.selectAll("g.node")
+        .data(nodes, d => d.id);
+    
+    const nodeEnter = node.enter().append("g")
+        .attr("class", d => `node level${Math.min(d.depth, 3)}`)
+        .attr("transform", d => `translate(${source.y0},${source.x0})`)
+        .on("click", click);
+    
+    // Add rectangles for nodes
+    nodeEnter.append("rect")
+        .attr("width", 1e-6)
+        .attr("height", 1e-6)
+        .attr("x", -1)
+        .attr("y", -1)
+        .attr("class", d => d.depth === 0 ? "root" : "");
+    
+    // Add text
+    nodeEnter.append("text")
+        .attr("dy", ".35em")
+        .attr("text-anchor", "middle")
+        .text(d => d.data.name)
+        .style("fill-opacity", 1e-6);
+    
+    // Transition nodes to their new position
+    const nodeUpdate = nodeEnter.merge(node);
+    
+    nodeUpdate.transition()
+        .duration(duration)
+        .attr("transform", d => `translate(${d.y},${d.x})`);
+    
+    nodeUpdate.select("rect")
+        .attr("width", d => {
+            const textLength = d.data.name.length * 8 + 20;
+            return Math.max(textLength, 100);
+        })
+        .attr("height", 30)
+        .attr("x", d => {
+            const textLength = d.data.name.length * 8 + 20;
+            return -Math.max(textLength, 100) / 2;
+        })
+        .attr("y", -15)
+        .attr("class", d => d._children ? "collapsed" : "");
+    
+    nodeUpdate.select("text")
+        .style("fill-opacity", 1);
+    
+    // Remove exiting nodes
+    const nodeExit = node.exit().transition()
+        .duration(duration)
+        .attr("transform", d => `translate(${source.y},${source.x})`)
+        .remove();
+    
+    nodeExit.select("rect")
+        .attr("width", 1e-6)
+        .attr("height", 1e-6);
+    
+    nodeExit.select("text")
+        .style("fill-opacity", 1e-6);
+    
+    // Update links
+    const link = g.selectAll("path.link")
+        .data(links, d => d.target.id);
+    
+    const linkEnter = link.enter().insert("path", "g")
+        .attr("class", "link")
+        .attr("d", d => {
+            const o = {x: source.x0, y: source.y0};
+            return diagonal({source: o, target: o});
+        });
+    
+    const linkUpdate = linkEnter.merge(link);
+    
+    linkUpdate.transition()
+        .duration(duration)
+        .attr("d", diagonal);
+    
+    const linkExit = link.exit().transition()
+        .duration(duration)
+        .attr("d", d => {
+            const o = {x: source.x, y: source.y};
+            return diagonal({source: o, target: o});
+        })
+        .remove();
+    
+    // Store old positions
+    nodes.forEach(d => {
+        d.x0 = d.x;
+        d.y0 = d.y;
+    });
+}
+
+function diagonal(d) {
+    return `M ${d.source.y} ${d.source.x}
+            C ${(d.source.y + d.target.y) / 2} ${d.source.x},
+              ${(d.source.y + d.target.y) / 2} ${d.target.x},
+              ${d.target.y} ${d.target.x}`;
+}
+
+function click(event, d) {
+    if (d.children) {
+        d._children = d.children;
+        d.children = null;
+    } else {
+        d.children = d._children;
+        d._children = null;
+    }
+    update(d);
+}
+
+function resetZoom() {
+    svg.transition()
+        .duration(750)
+        .call(zoom.transform, d3.zoomIdentity);
+}
+
+function toggleFullscreen() {
+    const container = document.getElementById('mindmap-container');
+    container.classList.toggle('fullscreen');
+    
+    // Recalculate dimensions
+    const newWidth = container.clientWidth;
+    const newHeight = container.clientHeight;
+    svg.attr("viewBox", [-newWidth / 2, -newHeight / 2, newWidth, newHeight]);
+}
+
+// Center the tree initially
+svg.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(0.8));
+</script>
+
+{% endblock %}

templates/note_view.html

@@ -15,10 +15,24 @@
                 {% if note.updated_at > note.created_at %}
                 <span class="date">· Updated {{ note.updated_at|format_date }}</span>
                 {% endif %}
+                {% if note.is_pinned %}
+                <span class="pin-badge">📌 Pinned</span>
+                {% endif %}
             </div>
         </div>
         
         <div class="note-actions">
+            <a href="{{ url_for('view_note_mindmap', slug=note.slug) }}" class="btn btn-info">
+                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 4px;">
+                    <circle cx="8" cy="8" r="2"/>
+                    <circle cx="3" cy="3" r="1.5"/>
+                    <circle cx="13" cy="3" r="1.5"/>
+                    <circle cx="3" cy="13" r="1.5"/>
+                    <circle cx="13" cy="13" r="1.5"/>
+                    <path d="M6.5 6.5L4 4M9.5 6.5L12 4M6.5 9.5L4 12M9.5 9.5L12 12" stroke="currentColor" fill="none"/>
+                </svg>
+                Mind Map
+            </a>
             {% if note.can_user_edit(g.user) %}
             <a href="{{ url_for('edit_note', slug=note.slug) }}" class="btn btn-primary">Edit</a>
             <form method="POST" action="{{ url_for('delete_note', slug=note.slug) }}" style="display: inline;"
@@ -57,7 +71,7 @@
         <div class="association-item">
             <span class="association-label">Tags:</span>
             <span class="association-value">
-                {% for tag in note.tags %}
+                {% for tag in note.get_tags_list() %}
                 <a href="{{ url_for('notes_list', tag=tag) }}" class="tag-badge">{{ tag }}</a>
                 {% endfor %}
             </span>
@@ -429,6 +443,15 @@
     font-style: italic;
 }
 
+.pin-badge {
+    background: #fff3cd;
+    color: #856404;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
 /* Modal styles */
 .modal-content {
     max-width: 500px;

templates/notes_list.html

@@ -248,6 +248,16 @@
                                     <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                 </svg>
                             </a>
+                            <a href="{{ url_for('view_note_mindmap', slug=note.slug) }}" class="btn-action" title="Mind Map">
+                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <circle cx="8" cy="8" r="2"/>
+                                    <circle cx="3" cy="3" r="1.5"/>
+                                    <circle cx="13" cy="3" r="1.5"/>
+                                    <circle cx="3" cy="13" r="1.5"/>
+                                    <circle cx="13" cy="13" r="1.5"/>
+                                    <path d="M6.5 6.5L4 4M9.5 6.5L12 4M6.5 9.5L4 12M9.5 9.5L12 12" stroke="currentColor" fill="none"/>
+                                </svg>
+                            </a>
                             {% if note.can_user_edit(g.user) %}
                             <a href="{{ url_for('edit_note', slug=note.slug) }}" class="btn-action" title="Edit">
                                 <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -328,6 +338,16 @@
                             <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                         </svg>
                     </a>
+                    <a href="{{ url_for('view_note_mindmap', slug=note.slug) }}" class="btn-action" title="Mind Map">
+                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                            <circle cx="8" cy="8" r="2"/>
+                            <circle cx="3" cy="3" r="1.5"/>
+                            <circle cx="13" cy="3" r="1.5"/>
+                            <circle cx="3" cy="13" r="1.5"/>
+                            <circle cx="13" cy="13" r="1.5"/>
+                            <path d="M6.5 6.5L4 4M9.5 6.5L12 4M6.5 9.5L4 12M9.5 9.5L12 12" stroke="currentColor" fill="none"/>
+                        </svg>
+                    </a>
                     {% if note.can_user_edit(g.user) %}
                     <a href="{{ url_for('edit_note', slug=note.slug) }}" class="btn-action" title="Edit">
                         <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -1006,7 +1026,7 @@
 }
 
 .column-actions {
-    width: 120px;
+    width: 160px;
 }
 
 .note-actions {