Apply new style to Notes pages.

templates/note_editor.html

@@ -277,6 +277,97 @@
     margin: 0 auto;
 }
 
+/* Page Header - Time Tracking style */
+.page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 2rem;
+    color: white;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.page-icon {
+    font-size: 2.5rem;
+    display: inline-block;
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+.page-subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin: 0.5rem 0 0 0;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Button styles */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+.btn-secondary {
+    background: white;
+    color: #667eea;
+    border-color: #e5e7eb;
+}
+
+.btn-secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-color: #667eea;
+}
+
+.btn .icon {
+    font-size: 1.1em;
+}
+
 /* Settings Panel */
 .settings-panel {
     margin-bottom: 2rem;
@@ -285,10 +376,10 @@
 
 .settings-card {
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    border-radius: 16px;
     padding: 2rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
 .settings-grid {
@@ -353,7 +444,7 @@
 }
 
 .toggle-switch input:checked + .toggle-slider {
-    background-color: var(--primary-color);
+    background-color: #667eea;
 }
 
 .toggle-switch input:checked + .toggle-slider:before {
@@ -375,10 +466,10 @@
 /* Editor Panel */
 .editor-card {
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    border-radius: 16px;
     overflow: hidden;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -474,10 +565,10 @@
 /* Preview Panel */
 .preview-card {
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    border-radius: 16px;
     overflow: hidden;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     display: flex;
     flex-direction: column;
     height: 100%;

templates/note_mindmap.html

@@ -1,57 +1,148 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="timetrack-container note-mindmap-container">
+<div class="note-mindmap-container">
-    <div class="mindmap-header">
+    <!-- Header Section -->
-        <h2>{{ note.title }} - Mind Map View</h2>
+    <div class="page-header">
-        <div class="mindmap-actions">
+        <div class="header-content">
-            <button type="button" class="btn btn-sm btn-secondary" onclick="resetZoom()">
+            <div class="header-left">
+                <h1 class="page-title">
+                    <span class="page-icon">🧠</span>
+                    Mind Map View
+                </h1>
+                <p class="page-subtitle">{{ note.title }}</p>
+            </div>
+            <div class="header-actions">
+                <button type="button" class="btn btn-secondary" onclick="resetZoom()">
+                    <span class="icon">🔍</span>
                     Reset Zoom
                 </button>
-            <button type="button" class="btn btn-sm btn-secondary" onclick="toggleFullscreen()">
+                <button type="button" class="btn btn-secondary" onclick="expandAll()">
+                    <span class="icon">➕</span>
+                    Expand All
+                </button>
+                <button type="button" class="btn btn-secondary" onclick="collapseAll()">
+                    <span class="icon">➖</span>
+                    Collapse All
+                </button>
+                <button type="button" class="btn btn-secondary" onclick="toggleFullscreen()">
+                    <span class="icon">🗖️</span>
                     Fullscreen
                 </button>
-            <a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn btn-sm btn-info">
+                <a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn btn-secondary">
+                    <span class="icon">←</span>
                     Back to Note
                 </a>
             </div>
         </div>
+    </div>
 
     <div id="mindmap-container" class="mindmap-container">
         <svg id="mindmap-svg"></svg>
+        <div class="node-count" id="node-count"></div>
     </div>
 </div>
 
 <style>
 .note-mindmap-container {
-    max-width: none !important;
+    max-width: 1600px;
-    width: 100% !important;
+    margin: 0 auto;
-    padding: 1rem !important;
+    padding: 2rem;
-    margin: 0 !important;
     height: calc(100vh - 100px);
     display: flex;
     flex-direction: column;
 }
 
-.mindmap-header {
+/* Page Header - Time Tracking style */
+.page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 2rem;
+    color: white;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1rem;
+    flex-wrap: wrap;
+    gap: 2rem;
 }
 
-.mindmap-actions {
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
     display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.page-icon {
+    font-size: 2.5rem;
+    display: inline-block;
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0); }
+}
+
+.page-subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin: 0.5rem 0 0 0;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Button styles */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    display: inline-flex;
+    align-items: center;
     gap: 0.5rem;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.btn-secondary {
+    background: white;
+    color: #667eea;
+    border-color: #e5e7eb;
+}
+
+.btn-secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-color: #667eea;
+}
+
+.btn .icon {
+    font-size: 1.1em;
 }
 
 .mindmap-container {
     flex: 1;
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    border-radius: 16px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     overflow: hidden;
     position: relative;
+    min-height: 600px;
 }
 
 #mindmap-svg {
@@ -70,55 +161,70 @@
 
 .node circle {
     fill: #fff;
-    stroke: steelblue;
+    stroke: #667eea;
     stroke-width: 3px;
 }
 
 .node rect {
     fill: #f9f9f9;
-    stroke: steelblue;
+    stroke: #667eea;
     stroke-width: 2px;
-    rx: 5px;
+    rx: 8px;
 }
 
 .node text {
-    font: 12px sans-serif;
+    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     pointer-events: none;
+    text-anchor: middle;
+    dominant-baseline: central;
 }
 
 .link {
     fill: none;
-    stroke: #ccc;
+    stroke: #e5e7eb;
     stroke-width: 2px;
 }
 
-.node.collapsed circle {
-    fill: steelblue;
-}
-
 .node.root rect {
-    fill: #4CAF50;
+    fill: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    stroke: #45a049;
+    stroke: none;
 }
 
 .node.root text {
     fill: white;
     font-weight: bold;
+    font-size: 16px;
 }
 
-.node.level1 rect {
+.node.header1 rect {
-    fill: #e3f2fd;
+    fill: #e0e7ff;
-    stroke: #2196F3;
+    stroke: #667eea;
 }
 
-.node.level2 rect {
+.node.header2 rect {
-    fill: #f3e5f5;
+    fill: #f0e6ff;
-    stroke: #9C27B0;
+    stroke: #9333ea;
 }
 
-.node.level3 rect {
+.node.header3 rect {
-    fill: #fff3e0;
+    fill: #fef3c7;
-    stroke: #FF9800;
+    stroke: #f59e0b;
+}
+
+.node.list rect {
+    fill: #f3f4f6;
+    stroke: #9ca3af;
+    stroke-width: 1px;
+}
+
+.node.list text {
+    font-size: 12px;
+}
+
+.node.paragraph rect {
+    fill: #fafafa;
+    stroke: #d1d5db;
+    stroke-dasharray: 4;
 }
 
 /* Fullscreen styles */
@@ -132,82 +238,185 @@
     margin: 0;
     border-radius: 0;
 }
+
+/* Tooltip styles */
+.tooltip {
+    position: absolute;
+    text-align: left;
+    padding: 8px;
+    font: 12px sans-serif;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    border: 0px;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+/* Node count indicator */
+.node-count {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    z-index: 10;
+}
 </style>
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
 <script>
-// Parse markdown content to extract structure
+// Store the markdown content and title safely
-const markdownContent = {{ note.content | tojson }};
+const noteData = {
+    content: {{ note.content|tojson }},
+    title: {{ note.title|tojson }}
+};
 
+// Improved Markdown parser
 function parseMarkdownToTree(markdown) {
     const lines = markdown.split('\n');
     const root = {
-        name: '{{ note.title }}',
+        name: noteData.title,
         children: [],
-        level: 0
+        level: 0,
+        type: 'root'
     };
     
-    const stack = [root];
+    const headerStack = [root];
-    let currentList = null;
+    let currentParent = root;
+    let lastNode = root;
+    let inCodeBlock = false;
+    let codeBlockContent = [];
+    
+    lines.forEach((line, index) => {
+        // Handle code blocks
+        if (line.trim().startsWith('```')) {
+            if (inCodeBlock) {
+                // End code block
+                const codeNode = {
+                    name: 'Code Block',
+                    content: codeBlockContent.join('\n'),
+                    children: [],
+                    type: 'code',
+                    level: currentParent.level + 1
+                };
+                currentParent.children.push(codeNode);
+                codeBlockContent = [];
+                inCodeBlock = false;
+            } else {
+                // Start code block
+                inCodeBlock = true;
+            }
+            return;
+        }
+        
+        if (inCodeBlock) {
+            codeBlockContent.push(line);
+            return;
+        }
+        
+        // Skip empty lines
+        if (!line.trim()) return;
         
-    lines.forEach(line => {
         // Check for headers
         const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
         if (headerMatch) {
             const level = headerMatch[1].length;
-            const text = headerMatch[2];
+            const text = headerMatch[2].trim();
             
-            // Pop stack until we find parent level
+            // Pop stack to find correct parent
-            while (stack.length > level) {
+            while (headerStack.length > 1 && headerStack[headerStack.length - 1].level >= level) {
-                stack.pop();
+                headerStack.pop();
             }
             
             const node = {
                 name: text,
                 children: [],
-                level: level
+                level: level,
+                type: `header${level}`
             };
             
-            const parent = stack[stack.length - 1];
+            const parent = headerStack[headerStack.length - 1];
-            if (!parent.children) parent.children = [];
             parent.children.push(node);
-            stack.push(node);
+            headerStack.push(node);
-            currentList = null;
+            currentParent = node;
+            lastNode = node;
+            return;
         }
         
-        // Check for list items
+        // Check for unordered list items
         const listMatch = line.match(/^(\s*)[*\-+]\s+(.+)$/);
         if (listMatch) {
             const indent = listMatch[1].length;
-            const text = listMatch[2];
+            const text = listMatch[2].trim();
             
             const node = {
                 name: text,
                 children: [],
-                level: stack[stack.length - 1].level + 1,
+                level: currentParent.level + 1,
-                isList: true
+                type: 'list',
+                indent: indent
             };
             
-            const parent = stack[stack.length - 1];
+            // Handle nested lists
-            if (!parent.children) parent.children = [];
+            if (lastNode.type === 'list' && indent > lastNode.indent) {
-            parent.children.push(node);
+                lastNode.children.push(node);
+            } else {
+                currentParent.children.push(node);
+            }
+            lastNode = node;
+            return;
         }
         
-        // Check for numbered lists
+        // Check for ordered list items
-        const numberedListMatch = line.match(/^(\s*)\d+\.\s+(.+)$/);
+        const orderedListMatch = line.match(/^(\s*)\d+\.\s+(.+)$/);
-        if (numberedListMatch) {
+        if (orderedListMatch) {
-            const text = numberedListMatch[2];
+            const indent = orderedListMatch[1].length;
+            const text = orderedListMatch[2].trim();
             
             const node = {
                 name: text,
                 children: [],
-                level: stack[stack.length - 1].level + 1,
+                level: currentParent.level + 1,
-                isList: true
+                type: 'list',
+                indent: indent
             };
             
-            const parent = stack[stack.length - 1];
+            currentParent.children.push(node);
-            if (!parent.children) parent.children = [];
+            lastNode = node;
-            parent.children.push(node);
+            return;
+        }
+        
+        // Check for blockquotes
+        if (line.trim().startsWith('>')) {
+            const text = line.replace(/^>\s*/, '').trim();
+            if (text) {
+                const node = {
+                    name: text,
+                    children: [],
+                    level: currentParent.level + 1,
+                    type: 'quote'
+                };
+                currentParent.children.push(node);
+                lastNode = node;
+            }
+            return;
+        }
+        
+        // Regular paragraph text
+        const text = line.trim();
+        if (text) {
+            const node = {
+                name: text.length > 80 ? text.substring(0, 80) + '...' : text,
+                fullText: text,
+                children: [],
+                level: currentParent.level + 1,
+                type: 'paragraph'
+            };
+            currentParent.children.push(node);
+            lastNode = node;
         }
     });
     
@@ -215,43 +424,84 @@ function parseMarkdownToTree(markdown) {
 }
 
 // D3 Mind Map Implementation
-const treeData = parseMarkdownToTree(markdownContent);
+const treeData = parseMarkdownToTree(noteData.content);
 
-const margin = {top: 20, right: 120, bottom: 20, left: 120};
+// Setup dimensions
-const width = document.getElementById('mindmap-container').clientWidth;
+const containerWidth = document.getElementById('mindmap-container').clientWidth;
-const height = document.getElementById('mindmap-container').clientHeight;
+const containerHeight = document.getElementById('mindmap-container').clientHeight;
 
+// Calculate dynamic dimensions based on content
+function calculateTreeDimensions(root) {
+    let maxDepth = 0;
+    let leafCount = 0;
+    
+    root.each(d => {
+        if (d.depth > maxDepth) maxDepth = d.depth;
+        if (!d.children && !d._children) leafCount++;
+    });
+    
+    // Dynamic sizing based on content
+    const nodeHeight = 50; // Height per node including spacing
+    const nodeWidth = 250; // Width per depth level
+    const width = Math.max(containerWidth, (maxDepth + 1) * nodeWidth);
+    const height = Math.max(containerHeight, leafCount * nodeHeight);
+    
+    return { width, height, nodeWidth, nodeHeight };
+}
+
+// Create SVG with initial viewBox
 const svg = d3.select("#mindmap-svg")
-    .attr("viewBox", [-width / 2, -height / 2, width, height]);
+    .attr("viewBox", [0, 0, containerWidth, containerHeight]);
 
 const g = svg.append("g");
 
-// Add zoom behavior
+// Add zoom behavior with extended range
 const zoom = d3.zoom()
-    .scaleExtent([0.1, 3])
+    .scaleExtent([0.02, 10])
     .on("zoom", (event) => {
         g.attr("transform", event.transform);
     });
 
 svg.call(zoom);
 
-// Create tree layout
+// Create tree layout - will be configured dynamically
 const tree = d3.tree()
-    .size([height - margin.top - margin.bottom, width - margin.left - margin.right]);
+    .separation((a, b) => {
+        // Dynamic separation based on node content
+        const aSize = (a.data.children ? a.data.children.length : 1);
+        const bSize = (b.data.children ? b.data.children.length : 1);
+        return (a.parent === b.parent ? 1 : 2) * Math.max(1, (aSize + bSize) / 10);
+    });
 
 // Create hierarchy
 const root = d3.hierarchy(treeData);
 root.x0 = 0;
 root.y0 = 0;
 
-// Collapse after the second level
+// Collapse after the second level for large trees
+let totalNodes = 0;
 root.descendants().forEach((d, i) => {
     d.id = i;
-    if (d.depth && d.depth > 1) {
+    totalNodes++;
+});
+
+// Only auto-collapse if tree is large
+if (totalNodes > 50) {
+    root.descendants().forEach((d) => {
+        if (d.depth && d.depth > 2) {
             d._children = d.children;
             d.children = null;
         }
-});
+    });
+}
+
+// Update node count
+document.getElementById('node-count').textContent = `Nodes: ${totalNodes} (Visible: ${root.descendants().filter(d => d.children || !d.parent).length})`;
+
+// Create tooltip
+const tooltip = d3.select("body").append("div")
+    .attr("class", "tooltip")
+    .style("opacity", 0);
 
 update(root);
 
@@ -263,27 +513,68 @@ function update(source) {
     const nodes = treeData.descendants();
     const links = treeData.links();
     
-    // Normalize for fixed-depth
+    // Calculate dynamic dimensions
+    const dimensions = calculateTreeDimensions(root);
+    
+    // Update tree size based on content
+    tree.size([dimensions.height, dimensions.width * 0.8]);
+    
+    // Recompute layout with new size
+    tree(root);
+    
+    // Normalize for fixed-depth with dynamic spacing
     nodes.forEach(d => {
-        d.y = d.depth * 180;
+        d.y = d.depth * dimensions.nodeWidth;
     });
     
+    // Update SVG viewBox to accommodate all content
+    const xExtent = d3.extent(nodes, d => d.x);
+    const yExtent = d3.extent(nodes, d => d.y);
+    const padding = 100;
+    
+    svg.attr("viewBox", [
+        yExtent[0] - padding,
+        xExtent[0] - padding,
+        yExtent[1] - yExtent[0] + padding * 2,
+        xExtent[1] - xExtent[0] + padding * 2
+    ]);
+    
     // 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("class", d => `node ${d.data.type || ''}`)
         .attr("transform", d => `translate(${source.y0},${source.x0})`)
-        .on("click", click);
+        .on("click", click)
+        .on("mouseover", (event, d) => {
+            if (d.data.fullText) {
+                tooltip.transition()
+                    .duration(200)
+                    .style("opacity", .9);
+                tooltip.html(d.data.fullText)
+                    .style("left", (event.pageX + 10) + "px")
+                    .style("top", (event.pageY - 28) + "px");
+            }
+        })
+        .on("mouseout", (d) => {
+            tooltip.transition()
+                .duration(500)
+                .style("opacity", 0);
+        });
     
     // Add rectangles for nodes
     nodeEnter.append("rect")
         .attr("width", 1e-6)
         .attr("height", 1e-6)
         .attr("x", -1)
-        .attr("y", -1)
+        .attr("y", -1);
-        .attr("class", d => d.depth === 0 ? "root" : "");
+    
+    // Add circles for collapse/expand
+    nodeEnter.append("circle")
+        .attr("r", 1e-6)
+        .style("fill", d => d._children ? "#667eea" : "#fff")
+        .style("display", d => d.children || d._children ? null : "none");
     
     // Add text
     nodeEnter.append("text")
@@ -299,18 +590,32 @@ function update(source) {
         .duration(duration)
         .attr("transform", d => `translate(${d.y},${d.x})`);
     
+    // Update rectangles
     nodeUpdate.select("rect")
         .attr("width", d => {
-            const textLength = d.data.name.length * 8 + 20;
+            // Better text measurement
-            return Math.max(textLength, 100);
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            context.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+            const metrics = context.measureText(d.data.name);
+            const textLength = metrics.width + 40; // Add padding
+            return Math.max(textLength, 120);
         })
-        .attr("height", 30)
+        .attr("height", 40)
         .attr("x", d => {
-            const textLength = d.data.name.length * 8 + 20;
+            const textLength = d.data.name.length * 8 + 30;
-            return -Math.max(textLength, 100) / 2;
+            return -Math.max(textLength, 120) / 2;
         })
-        .attr("y", -15)
+        .attr("y", -18);
-        .attr("class", d => d._children ? "collapsed" : "");
+    
+    // Update circles
+    nodeUpdate.select("circle")
+        .attr("r", 6)
+        .attr("cx", d => {
+            const textLength = d.data.name.length * 8 + 30;
+            return Math.max(textLength, 120) / 2 + 10;
+        })
+        .style("fill", d => d._children ? "#667eea" : "#fff");
     
     nodeUpdate.select("text")
         .style("fill-opacity", 1);
@@ -325,6 +630,9 @@ function update(source) {
         .attr("width", 1e-6)
         .attr("height", 1e-6);
     
+    nodeExit.select("circle")
+        .attr("r", 1e-6);
+    
     nodeExit.select("text")
         .style("fill-opacity", 1e-6);
     
@@ -358,8 +666,20 @@ function update(source) {
         d.x0 = d.x;
         d.y0 = d.y;
     });
+    
+    // Update node count
+    const visibleNodes = root.descendants().filter(d => {
+        let parent = d.parent;
+        while (parent) {
+            if (!parent.children) return false;
+            parent = parent.parent;
+        }
+        return true;
+    }).length;
+    document.getElementById('node-count').textContent = `Nodes: ${totalNodes} (Visible: ${visibleNodes})`;
 }
 
+// Diagonal link generator
 function diagonal(d) {
     return `M ${d.source.y} ${d.source.x}
             C ${(d.source.y + d.target.y) / 2} ${d.source.x},
@@ -367,6 +687,7 @@ function diagonal(d) {
               ${d.target.y} ${d.target.x}`;
 }
 
+// Toggle children on click
 function click(event, d) {
     if (d.children) {
         d._children = d.children;
@@ -378,10 +699,9 @@ function click(event, d) {
     update(d);
 }
 
+// Utility functions
 function resetZoom() {
-    svg.transition()
+    autoFit();
-        .duration(750)
-        .call(zoom.transform, d3.zoomIdentity);
 }
 
 function toggleFullscreen() {
@@ -394,8 +714,53 @@ function toggleFullscreen() {
     svg.attr("viewBox", [-newWidth / 2, -newHeight / 2, newWidth, newHeight]);
 }
 
+// Auto-fit the content initially
+function autoFit() {
+    const bounds = g.node().getBBox();
+    const fullWidth = bounds.width;
+    const fullHeight = bounds.height;
+    const width = containerWidth;
+    const height = containerHeight;
+    
+    const midX = bounds.x + fullWidth / 2;
+    const midY = bounds.y + fullHeight / 2;
+    
+    const scale = 0.9 / Math.max(fullWidth / width, fullHeight / height);
+    const translate = [width / 2 - scale * midX, height / 2 - scale * midY];
+    
+    svg.transition()
+        .duration(750)
+        .call(zoom.transform, d3.zoomIdentity
+            .translate(translate[0], translate[1])
+            .scale(scale));
+}
+
 // Center the tree initially
-svg.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(0.8));
+setTimeout(autoFit, 100);
+
+// Expand all nodes
+function expandAll() {
+    root.descendants().forEach(d => {
+        if (d._children) {
+            d.children = d._children;
+            d._children = null;
+        }
+    });
+    update(root);
+    setTimeout(autoFit, 800);
+}
+
+// Collapse all nodes except root
+function collapseAll() {
+    root.descendants().forEach(d => {
+        if (d.depth > 0 && d.children) {
+            d._children = d.children;
+            d.children = null;
+        }
+    });
+    update(root);
+    setTimeout(autoFit, 800);
+}
 </script>
 
 {% endblock %}

templates/note_mindmap_backup.html

@@ -0,0 +1 @@
+{% extends "layout.html" %}{% block content %}<div>Test</div>{% endblock %}

templates/note_mindmap_test.html

@@ -0,0 +1,8 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="note-mindmap-container">
+    <h1>Mind Map Test - {{ note.title }}</h1>
+    <p>If you see this, the template is working.</p>
+</div>
+{% endblock %}

templates/note_mindmap_test_backup.html

@@ -0,0 +1,8 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="note-mindmap-container">
+    <h1>Mind Map Test - {{ note.title }}</h1>
+    <p>If you see this, the template is working.</p>
+</div>
+{% endblock %}

templates/note_view.html

@@ -290,6 +290,98 @@
     margin: 0 auto;
 }
 
+/* Page Header - Time Tracking style */
+.page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 2rem;
+    color: white;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Button styles */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+.btn-secondary {
+    background: white;
+    color: #667eea;
+    border-color: #e5e7eb;
+}
+
+.btn-secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-color: #667eea;
+}
+
+.btn-danger {
+    background: #ef4444;
+    color: white;
+}
+
+.btn-danger:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
+}
+
+.btn-success {
+    background: #10b981;
+    color: white;
+}
+
+.btn-success:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
+}
+
+.btn .icon {
+    font-size: 1.1em;
+}
+
 /* Page Meta */
 .page-meta {
     display: flex;
@@ -297,12 +389,12 @@
     gap: 0.75rem;
     flex-wrap: wrap;
     font-size: 0.875rem;
-    color: #6c757d;
+    color: rgba(255, 255, 255, 0.9);
     margin-top: 0.5rem;
 }
 
 .meta-divider {
-    color: #dee2e6;
+    color: rgba(255, 255, 255, 0.5);
 }
 
 .pin-badge {
@@ -310,20 +402,28 @@
     align-items: center;
     gap: 0.25rem;
     padding: 0.25rem 0.75rem;
-    background: #fff3cd;
+    background: rgba(255, 255, 255, 0.2);
-    color: #856404;
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 12px;
     font-weight: 500;
 }
 
+/* Visibility badges for header */
+.page-header .visibility-badge {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
 /* Metadata Card */
 .metadata-card {
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    border-radius: 16px;
     padding: 1.5rem;
     margin-bottom: 2rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
 .metadata-grid {
@@ -391,11 +491,11 @@
 /* Content Card */
 .content-card {
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    border-radius: 16px;
     padding: 2.5rem;
     margin-bottom: 2rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     min-height: 400px;
 }
 

templates/notes_folders.html

@@ -1,14 +1,27 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="timetrack-container notes-folders-container">
+<div class="notes-folders-container">
-    <div class="admin-header">
+    <!-- Header Section -->
-        <h2>Note Folders</h2>
+    <div class="page-header">
-        <div class="admin-actions">
+        <div class="header-content">
-            <button type="button" class="btn btn-sm btn-success" onclick="showCreateFolderModal()">
+            <div class="header-left">
-                <span>📁</span> Create Folder
+                <h1 class="page-title">
+                    <span class="page-icon">📁</span>
+                    Note Folders
+                </h1>
+                <p class="page-subtitle">Organize your notes with folders</p>
+            </div>
+            <div class="header-actions">
+                <button type="button" class="btn btn-success" onclick="showCreateFolderModal()">
+                    <span class="icon">➕</span>
+                    Create Folder
                 </button>
-            <a href="{{ url_for('notes.notes_list') }}" class="btn btn-sm btn-secondary">Back to Notes</a>
+                <a href="{{ url_for('notes.notes_list') }}" class="btn btn-secondary">
+                    <span class="icon">←</span>
+                    Back to Notes
+                </a>
+            </div>
         </div>
     </div>
 
@@ -69,10 +82,100 @@
 
 <style>
 .notes-folders-container {
-    max-width: none !important;
+    max-width: 1400px;
-    width: 100% !important;
+    margin: 0 auto;
-    padding: 1rem !important;
+    padding: 2rem;
-    margin: 0 !important;
+}
+
+/* Page Header - Time Tracking style */
+.page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 2rem;
+    color: white;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.page-icon {
+    font-size: 2.5rem;
+    display: inline-block;
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+.page-subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin: 0.5rem 0 0 0;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Button styles */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.btn-success {
+    background: #10b981;
+    color: white;
+    border: none;
+}
+
+.btn-success:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
+}
+
+.btn-secondary {
+    background: white;
+    color: #667eea;
+    border-color: #e5e7eb;
+}
+
+.btn-secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-color: #667eea;
+}
+
+.btn .icon {
+    font-size: 1.1em;
 }
 
 .folders-layout {
@@ -85,9 +188,10 @@
 .folder-tree-panel,
 .folder-details-panel {
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    border-radius: 16px;
     padding: 1.5rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
 .folder-tree-panel h3,

templates/notes_list.html

@@ -19,21 +19,33 @@
 {% endmacro %}
 
 {% block content %}
-<div class="admin-container">
+<div class="notes-container">
-    <div class="admin-header">
+    <!-- Header Section -->
-        <h2>Notes & Documentation</h2>
+    <div class="page-header">
-        <div class="admin-actions">
+        <div class="header-content">
-            <a href="{{ url_for('notes.create_note') }}" class="btn btn-sm btn-primary">
+            <div class="header-left">
-                <span>📝</span> Create New Note
+                <h1 class="page-title">
+                    <span class="page-icon">📝</span>
+                    Notes & Documentation
+                </h1>
+                <p class="page-subtitle">Organize your thoughts and documentation</p>
+            </div>
+            <div class="header-actions">
+                <a href="{{ url_for('notes.create_note') }}" class="btn btn-primary">
+                    <span class="icon">➕</span>
+                    Create New Note
                 </a>
-            <button type="button" class="btn btn-sm btn-secondary" id="toggle-sidebar">
+                <button type="button" class="btn btn-secondary" id="toggle-sidebar">
-                <span>📁</span> Toggle Folders
+                    <span class="icon">📁</span>
+                    Toggle Folders
                 </button>
-            <a href="{{ url_for('notes.notes_folders') }}" class="btn btn-sm btn-info">
+                <a href="{{ url_for('notes.notes_folders') }}" class="btn btn-secondary">
-                <span>⚙️</span> Manage Folders
+                    <span class="icon">⚙️</span>
+                    Manage Folders
                 </a>
             </div>
         </div>
+    </div>
 
     <div class="notes-layout">
         <!-- Sidebar -->
@@ -199,9 +211,9 @@
                     </div>
                     
                     <div class="note-actions">
-                        <a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn btn-xs btn-info">View</a>
+                        <a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn-sm btn-secondary">View</a>
                         {% if note.can_user_edit(g.user) %}
-                        <a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn btn-xs btn-primary">Edit</a>
+                        <a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn-sm btn-primary">Edit</a>
                         {% endif %}
                     </div>
                 </div>
@@ -251,9 +263,9 @@
                             <td>{{ note.created_by.username }}</td>
                             <td>{{ note.updated_at.strftime('%b %d, %Y') }}</td>
                             <td>
-                                <a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn btn-xs btn-info">View</a>
+                                <a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn-sm btn-secondary">View</a>
                                 {% if note.can_user_edit(g.user) %}
-                                <a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn btn-xs btn-primary">Edit</a>
+                                <a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn-sm btn-primary">Edit</a>
                                 {% endif %}
                             </td>
                         </tr>
@@ -280,11 +292,137 @@
 </div>
 
 <style>
-/* Notes styles that match User Management */
+/* Container */
-.admin-container {
+.notes-container {
-    padding: 20px;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
 }
 
+/* Page Header - Time Tracking style */
+.page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 2rem;
+    color: white;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.page-icon {
+    font-size: 2.5rem;
+    display: inline-block;
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+.page-subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin: 0.5rem 0 0 0;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Modern button styles to match Time Tracking */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+.btn-secondary {
+    background: white;
+    color: #667eea;
+    border-color: #e5e7eb;
+}
+
+.btn-secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-color: #667eea;
+}
+
+.btn .icon {
+    font-size: 1.1em;
+}
+
+/* Small buttons */
+.btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    border-radius: 6px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+.btn-sm.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-sm.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.btn-sm.btn-secondary {
+    background: white;
+    color: #667eea;
+    border: 1px solid #e5e7eb;
+}
+
+.btn-sm.btn-secondary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border-color: #667eea;
+}
+
+/* Notes layout */
 .notes-layout {
     display: flex;
     gap: 20px;
@@ -293,13 +431,15 @@
 
 /* Sidebar */
 .notes-sidebar {
-    width: 250px;
+    width: 280px;
-    background: #f8f9fa;
+    background: white;
-    border-radius: 5px;
+    border-radius: 12px;
-    padding: 15px;
+    padding: 1.5rem;
     height: fit-content;
     position: sticky;
     top: 20px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
 }
 
 .notes-sidebar.collapsed {
@@ -311,10 +451,10 @@
 }
 
 .sidebar-section h4 {
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-weight: 600;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
-    color: #495057;
+    color: #1f2937;
 }
 
 .search-box {
@@ -324,9 +464,19 @@
 }
 
 .search-box input {
+    padding: 0.75rem;
     padding-right: 35px;
     width: 100%;
-    font-size: 0.85rem;
+    font-size: 0.9rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    transition: all 0.2s;
+}
+
+.search-box input:focus {
+    border-color: #667eea;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 .search-btn {
@@ -354,7 +504,7 @@
 
 .folder-item.active .folder-link {
     font-weight: 600;
-    color: #007bff;
+    color: #667eea;
 }
 
 .folder-item.drag-over {
@@ -369,7 +519,7 @@
 }
 
 .folder-link:hover {
-    color: #007bff;
+    color: #667eea;
 }
 
 .folder-count {
@@ -388,21 +538,23 @@
     display: flex;
     align-items: center;
     gap: 5px;
-    padding: 5px 10px;
+    padding: 8px 12px;
-    background: white;
+    background: #f8f9fa;
-    border-radius: 3px;
+    border-radius: 8px;
     text-decoration: none;
     color: #495057;
-    font-size: 0.85rem;
+    font-size: 0.9rem;
     transition: all 0.2s;
+    border: 1px solid transparent;
 }
 
 .tag-link:hover {
     background: #e9ecef;
+    transform: translateX(2px);
 }
 
 .tag-link.active {
-    background: #007bff;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
 }
 
@@ -423,21 +575,23 @@
     display: flex;
     align-items: center;
     gap: 5px;
-    padding: 5px 10px;
+    padding: 8px 12px;
-    background: white;
+    background: #f8f9fa;
-    border-radius: 3px;
+    border-radius: 8px;
     text-decoration: none;
     color: #495057;
-    font-size: 0.85rem;
+    font-size: 0.9rem;
     transition: all 0.2s;
+    border: 1px solid transparent;
 }
 
 .visibility-link:hover {
     background: #e9ecef;
+    transform: translateX(2px);
 }
 
 .visibility-link.active {
-    background: #007bff;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
 }
 
@@ -449,21 +603,23 @@
 
 /* Active Filters */
 .active-filters {
-    background: #f8f9fa;
+    background: white;
-    padding: 10px 15px;
+    padding: 12px 16px;
-    border-radius: 5px;
+    border-radius: 12px;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 10px;
-    font-size: 0.85rem;
+    font-size: 0.9rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
 }
 
 .filter-tag {
-    background: white;
+    background: #f8f9fa;
-    padding: 4px 8px;
+    padding: 6px 12px;
-    border-radius: 3px;
+    border-radius: 6px;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
 }
 
 .remove-filter {
@@ -475,7 +631,7 @@
 
 .clear-all {
     margin-left: auto;
-    color: #007bff;
+    color: #667eea;
     text-decoration: none;
 }
 
@@ -508,9 +664,9 @@
 }
 
 .toggle-btn.active {
-    background: #007bff;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
-    border-color: #007bff;
+    border-color: #667eea;
 }
 
 /* View Containers */
@@ -531,17 +687,18 @@
 
 .note-card {
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 5px;
+    border-radius: 12px;
-    padding: 12px;
+    padding: 1.5rem;
     position: relative;
     transition: all 0.2s;
     cursor: move;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
 .note-card:hover {
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
-    transform: translateY(-2px);
+    transform: translateY(-4px);
 }
 
 .note-card.pinned {
@@ -554,7 +711,7 @@
 }
 
 .note-card.drag-over {
-    border: 2px dashed #007bff;
+    border: 2px dashed #667eea;
 }
 
 .note-card-header {
@@ -601,7 +758,7 @@
 }
 
 .note-title a:hover {
-    color: #007bff;
+    color: #667eea;
 }
 
 .note-preview {
@@ -653,8 +810,10 @@
 .empty-state {
     text-align: center;
     padding: 60px 20px;
-    background: #f8f9fa;
+    background: white;
-    border-radius: 5px;
+    border-radius: 16px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
 }
 
 .empty-icon {
@@ -666,10 +825,11 @@
 .notes-table {
     width: 100%;
     background: white;
-    border: 1px solid #dee2e6;
+    border: 1px solid #e5e7eb;
-    border-radius: 5px;
+    border-radius: 12px;
     overflow: hidden;
     border-collapse: collapse;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
 .notes-table th {