Add collapsible sidebar panels, vault quick-select dropdown, help modal, and vault focus feature with improved navigation UX

frontend/style.css

@@ -367,7 +367,36 @@ a:hover {
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--text-muted);
-  padding: 8px 16px 4px;
+  padding: 0;
+}
+
+.sidebar-panel-toggle {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 16px 10px;
+  cursor: pointer;
+  transition: color 150ms ease, background 150ms ease;
+}
+
+.sidebar-panel-toggle:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.sidebar-panel-toggle .icon,
+.sidebar-panel-toggle [data-lucide] {
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.sidebar-panel-content.collapsed {
+  display: none;
 }
 
 .tree-item {
@@ -393,6 +422,11 @@ a:hover {
   background: var(--bg-hover);
   color: var(--accent);
 }
+.tree-item.focused {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--text-primary);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
 .tree-item.filtered-out {
   display: none;
 }
@@ -438,13 +472,19 @@ a:hover {
 
 /* --- Tag Cloud --- */
 .tag-cloud-section {
-  padding: 12px 16px;
+  padding: 12px 0 0;
   height: 180px;
   min-height: 60px;
   max-height: 400px;
   overflow-y: auto;
   flex-shrink: 0;
 }
+.tag-cloud-section.collapsed-panel {
+  height: auto;
+  min-height: 0;
+  max-height: none;
+  overflow: hidden;
+}
 .tag-cloud-section::-webkit-scrollbar {
   width: 6px;
 }
@@ -460,13 +500,14 @@ a:hover {
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--text-muted);
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 
 .tag-cloud {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
+  padding: 0 16px 12px;
 }
 
 .tag-item {
@@ -487,6 +528,10 @@ a:hover {
   display: none;
 }
 
+.tag-resize-handle.hidden {
+  display: none;
+}
+
 /* --- Sidebar resize handle (horizontal) --- */
 .sidebar-resize-handle {
   width: 5px;
@@ -918,6 +963,9 @@ a:hover {
 .editor-modal.active {
   display: flex;
 }
+.help-container {
+  max-width: 960px;
+}
 .editor-container {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -990,6 +1038,46 @@ a:hover {
   overflow-y: auto;
   overflow-x: hidden;
 }
+.help-body {
+  padding: 0;
+  background: var(--bg-primary);
+}
+.help-content {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 28px 24px 40px;
+}
+.help-content h1,
+.help-content h2,
+.help-content h3 {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--text-primary);
+}
+.help-content h1 {
+  font-size: 1.6rem;
+  margin-bottom: 16px;
+}
+.help-content h2 {
+  font-size: 1.05rem;
+  margin: 24px 0 10px;
+}
+.help-content h3 {
+  font-size: 0.9rem;
+  margin: 16px 0 6px;
+  color: var(--text-secondary);
+}
+.help-content p {
+  margin: 0 0 12px;
+  color: var(--text-secondary);
+}
+.help-content code {
+  font-family: 'JetBrains Mono', monospace;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+  color: var(--text-primary);
+}
 .cm-editor {
   height: auto;
   min-height: 100%;
@@ -1149,6 +1237,18 @@ body.resizing-v {
     min-width: 200px;
   }
 
+   .sidebar-quick-select {
+     padding: 0 12px 12px;
+   }
+
+   .sidebar-panel-toggle {
+     padding: 8px 12px 10px;
+   }
+
+   .tag-cloud {
+     padding: 0 12px 12px;
+   }
+
   .sidebar {
     position: fixed;
     top: 0;
@@ -1181,6 +1281,10 @@ body.resizing-v {
     min-height: 80px;
   }
 
+   .help-content {
+     padding: 20px 16px 28px;
+   }
+
   .content-area {
     padding: 16px 12px 60px;
   }