feat: Implement sidebar navigation with folder tree and controls

static/css/layout.css

@@ -225,38 +225,12 @@
     display: none !important;
 }
 
-.folder-tags-container {
-    position: relative;
-    width: 100%;
-    margin-bottom: 8px; /* Add margin to ensure space for the button */
-}
-
-.folder-tags {
-    display: flex;
-    gap: 4px;
-    padding: 2px 0;
-    flex-wrap: wrap;
-    transition: max-height 0.3s ease, opacity 0.2s ease;
-    max-height: 150px; /* Limit height to prevent overflow */
-    opacity: 1;
-    overflow-y: auto; /* Enable vertical scrolling */
-    margin-bottom: 5px; /* Add margin below the tags */
-}
-
-.folder-tags.collapsed {
-    max-height: 0;
-    opacity: 0;
-    margin: 0;
-    padding-bottom: 0;
-    overflow: hidden;
-}
-
-.toggle-folders-container {
+/* Sidebar Toggle Button */
+.sidebar-toggle-container {
     margin-left: auto;
 }
 
-/* Toggle Folders Button */
-.toggle-folders-btn {
+.sidebar-toggle-btn {
     width: 36px;
     height: 36px;
     border-radius: 50%;
@@ -271,17 +245,13 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.toggle-folders-btn:hover {
+.sidebar-toggle-btn:hover {
     background: var(--lora-accent);
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
 }
 
-.toggle-folders-btn i {
-    transition: transform 0.3s ease;
-}
-
 /* Icon-only button style */
 .icon-only {
     min-width: unset !important;
@@ -290,55 +260,6 @@
     height: 32px !important;
 }
 
-/* Rotate icon when folders are collapsed */
-.folder-tags.collapsed ~ .actions .toggle-folders-btn i {
-    transform: rotate(180deg);
-}
-
-/* Add custom scrollbar for better visibility */
-.folder-tags::-webkit-scrollbar {
-    width: 6px;
-}
-
-.folder-tags::-webkit-scrollbar-track {
-    background: var(--card-bg);
-    border-radius: 3px;
-}
-
-.folder-tags::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 3px;
-}
-
-.folder-tags::-webkit-scrollbar-thumb:hover {
-    background: var(--lora-accent);
-}
-
-.tag {
-    cursor: pointer;
-    padding: 2px 8px;
-    margin: 2px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    display: inline-block;
-    line-height: 1.2;
-    font-size: 14px;
-    background-color: var(--card-bg);
-    transition: all 0.2s ease;
-}
-
-.tag:hover {
-    border-color: var(--lora-accent);
-    background-color: oklch(var(--lora-accent) / 0.1);
-    transform: translateY(-1px);
-}
-
-.tag.active {
-    background-color: var(--lora-accent);
-    color: white;
-    border-color: var(--lora-accent);
-}
-
 /* Back to Top Button */
 .back-to-top {
     position: fixed;
@@ -376,10 +297,9 @@
 }
 
 /* Prevent text selection in control and header areas */
-.tag,
 .control-group button,
 .control-group select,
-.toggle-folders-btn,
+.sidebar-toggle-btn,
 .bulk-operations-panel,
 .app-header,
 .header-branding,
@@ -388,7 +308,7 @@
 .nav-item,
 .header-actions button,
 .header-controls,
-.toggle-folders-container button {
+.sidebar-toggle-container button {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -473,15 +393,11 @@
         margin-top: 8px;
     }
     
-    .toggle-folders-container {
+    .sidebar-toggle-container {
         margin-left: 0;
     }
     
-    .folder-tags-container {
-        order: -1;
-    }
-    
-    .toggle-folders-btn:hover {
+    .sidebar-toggle-btn:hover {
         transform: none; /* Disable hover effects on mobile */
     }
 
@@ -493,10 +409,6 @@
         transform: none; /* Disable hover effects on mobile */
     }
 
-    .tag:hover {
-        transform: none; /* Disable hover effects on mobile */
-    }
-
     .back-to-top {
         bottom: 60px; /* Give some extra space from bottom on mobile */
     }