UI changes 2

assets/scripts/script.js

@@ -93,6 +93,8 @@ function rearrangeDOM() {
 
 function buildNoteToolbar(toolbar) {
   toolbar.innerHTML = `
+    <button class="toolbar-btn" id="tb-catalogue" title="Toggle catalogue">catalogue</button>
+    <div class="toolbar-sep"></div>
     <button class="toolbar-btn" id="tb-back" title="Go back" aria-label="Go back">\u2190 back</button>
     <button class="toolbar-btn" id="tb-forward" title="Go forward" aria-label="Go forward">forward \u2192</button>
     <div class="toolbar-sep"></div>
@@ -113,7 +115,7 @@ function initSidebarRail() {
   if (!sidebar) return;
 
   const railBtns = [
-    { label: '\u2630', title: 'All notes', id: 'rail-tree', panel: 'tree' },
+    { label: '\u2630', title: 'Catalogue', id: 'rail-tree', panel: 'tree' },
     { label: '\u2315', title: 'Search',    id: 'rail-search', action: 'search' },
   ];
 
@@ -131,19 +133,13 @@ function initSidebarRail() {
         }
         return;
       }
-      const isExpanded = sidebar.classList.contains('expanded');
+      sidebar.classList.add('expanded');
-      const samePanel  = sidebar.dataset.activePanel === panel;
+      sidebar.dataset.activePanel = panel;
-
+      sidebar.querySelectorAll('.rail-btn').forEach(b => b.classList.remove('active'));
-      if (isExpanded && samePanel) {
+      btn.classList.add('active');
-        sidebar.classList.remove('expanded');
+      if (window.matchMedia('(max-width: 900px)').matches) {
-        sidebar.dataset.activePanel = '';
+        sidebar.classList.add('mobile-open');
-        btn.classList.remove('active');
+        document.getElementById('sidebar-backdrop')?.classList.add('visible');
-      } else {
-        sidebar.classList.add('expanded');
-        sidebar.dataset.activePanel = panel;
-        sidebar.querySelectorAll('.rail-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        showSidebarPanel(panel);
       }
     });
   });
@@ -374,6 +370,7 @@ history.replaceState(
   });
 
   // Toolbar buttons
+  document.getElementById('tb-catalogue')?.addEventListener('click', toggleCatalogue);
   document.getElementById('tb-back')?.addEventListener('click', goBack);
   document.getElementById('tb-forward')?.addEventListener('click', goForward);
   document.getElementById('tb-backlinks')?.addEventListener('click', toggleBacklinkPanel);
@@ -637,6 +634,19 @@ function toggleTOC() {
   document.getElementById('tb-toc')?.classList.toggle('active', hidden);
 }
 
+function toggleCatalogue() {
+  const sidebar = document.getElementById('sidebar');
+  if (!sidebar) return;
+  const mobile = window.matchMedia('(max-width: 900px)').matches;
+  if (mobile) {
+    const isOpen = sidebar.classList.toggle('mobile-open');
+    sidebar.classList.toggle('expanded', isOpen);
+    document.getElementById('sidebar-backdrop')?.classList.toggle('visible', isOpen);
+    return;
+  }
+  document.getElementById('file-tree')?.focus?.();
+}
+
 /* =========================================================
    BACKLINK PANEL
    ========================================================= */