fix root folder view

web/templates/base.html

@@ -169,6 +169,26 @@
             background-color: #b91c1c;
         }
 
+        /* Sidebar collapse behavior */
+        #sidebar.collapsed {
+            width: 2.5rem !important; /* 10px * 10 = 2.5rem */
+            border-right: none;
+        }
+        #sidebar.collapsed .sidebar-title,
+        #sidebar.collapsed .sidebar-actions,
+        #sidebar.collapsed .sidebar-content {
+            display: none;
+        }
+        #sidebar .toggle-btn {
+            background: transparent;
+            color: #cbd5e1;
+            padding: 0.25rem;
+            border-radius: 0.375rem;
+        }
+        #sidebar .toggle-btn:hover {
+            background: #374151;
+        }
+
         /* Modal styles */
         .modal-overlay {
             position: fixed;
@@ -243,26 +263,34 @@
             <!-- Header -->
             <div class="p-4 border-b border-gray-700">
                 <div class="flex items-center justify-between">
-                    <h1 class="text-xl font-bold text-white">{{.app_name}}</h1>
+                    <h1 class="sidebar-title text-xl font-bold text-white">{{.app_name}}</h1>
-                    <div class="flex items-center space-x-2">
+                    <div class="flex items-center space-x-2 items-center">
-                        <a href="/settings" class="text-gray-400 hover:text-white transition-colors" title="Settings">
+                        <div class="sidebar-actions flex items-center space-x-2">
-                            <i class="fas fa-cog"></i>
+                            <a href="/settings" class="text-gray-400 hover:text-white transition-colors" title="Settings">
-                        </a>
+                                <i class="fas fa-cog"></i>
+                            </a>
+                        </div>
+                        <button id="sidebar-toggle" class="toggle-btn" title="Toggle sidebar" aria-label="Toggle sidebar">
+                            <i id="sidebar-toggle-icon" class="fas fa-chevron-left"></i>
+                        </button>
                     </div>
                 </div>
             </div>
 
             <!-- Navigation -->
-            <div class="px-4 py-4">
+            <div class="sidebar-content px-4 py-4">
                 <a href="/create" class="btn-primary text-sm w-full text-center">
                     <i class="fas fa-plus mr-2"></i>New Note
                 </a>
             </div>
 
             <!-- File Tree -->
-            <div class="flex-1 overflow-y-auto px-4 pb-4">
+            <div class="sidebar-content flex-1 overflow-y-auto px-4 pb-4">
                 {{if .notes_tree}}
-                    {{template "tree_node" dict "node" .notes_tree "active_path" .active_path "current_note" .current_note}}
+                    {{/* Render only children of the root to hide root folder label */}}
+                    {{range .notes_tree.Children}}
+                        {{template "tree_node" dict "node" . "active_path" $.active_path "current_note" $.current_note}}
+                    {{end}}
                 {{end}}
             </div>
         </div>
@@ -379,8 +407,39 @@
             }, duration);
         }
 
-        // Initialize on page load
+        // Sidebar toggle persistence
+        function applySidebarState(collapsed) {
+            const sidebar = document.getElementById('sidebar');
+            const icon = document.getElementById('sidebar-toggle-icon');
+            if (!sidebar || !icon) return;
+            if (collapsed) {
+                sidebar.classList.add('collapsed');
+                icon.classList.remove('fa-chevron-left');
+                icon.classList.add('fa-chevron-right');
+            } else {
+                sidebar.classList.remove('collapsed');
+                icon.classList.remove('fa-chevron-right');
+                icon.classList.add('fa-chevron-left');
+            }
+        }
+
         document.addEventListener('DOMContentLoaded', function() {
+            // Restore sidebar state
+            const collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
+            applySidebarState(collapsed);
+
+            // Wire toggle button
+            const toggleBtn = document.getElementById('sidebar-toggle');
+            if (toggleBtn) {
+                toggleBtn.addEventListener('click', function() {
+                    const currentlyCollapsed = document.getElementById('sidebar').classList.contains('collapsed');
+                    const next = !currentlyCollapsed;
+                    localStorage.setItem('sidebarCollapsed', String(next));
+                    applySidebarState(next);
+                });
+            }
+
+            // Expand active path in tree
             expandActivePath();
         });
     </script>