Upload 2 files

static/app.js

@@ -39,12 +39,14 @@ const STATE = {
 
 const DOM = {};
 const HISTORY_KEY = "vomebook_search_history";
+
 function themeIcon(isDark) {
   const shape = isDark
     ? '<path d="M20 15.5A8 8 0 1 1 8.5 4 6.5 6.5 0 0 0 20 15.5Z"/>'
     : '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/>';
   return `<svg class="theme-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">${shape}</svg>`;
 }
+
 const ICON_HTML = {
   source: '<span class="ui-icon ui-icon-stack" aria-hidden="true"></span>',
   folder: '<span class="ui-icon ui-icon-folder" aria-hidden="true"></span>',
@@ -1051,7 +1053,8 @@ function updateSidebarVisibility() {
   DOM.rightSidebar.classList.toggle("collapsed", !STATE.rightSidebarOpen);
   DOM.leftSidebar.classList.toggle("open", STATE.leftSidebarOpen);
   DOM.rightSidebar.classList.toggle("open", STATE.rightSidebarOpen);
-  DOM.overlay.style.display = (STATE.isMobile && (STATE.leftSidebarOpen || STATE.rightSidebarOpen)) ? "" : "none";
+  DOM.overlay.style.display = "";
+  DOM.overlay.classList.toggle("open", STATE.isMobile && (STATE.leftSidebarOpen || STATE.rightSidebarOpen));
 }
 
 function clearFilters() {
@@ -1457,12 +1460,6 @@ async function init() {
     STATE.previewDocId = previewDocId;
     syncUrl(false);
   }
-  STATE.sources = await API.getSources();
-  STATE.sourceMap = Object.fromEntries(STATE.sources.map((source) => [source.slug, source]));
-  await renderSourcesFilter();
-  await renderSidebar();
-  await renderFolderTree();
-  updateFilterVisibility();
   attachEvents();
   if (DOM.searchPathsToggle) {
     DOM.searchPathsToggle.checked = STATE.searchPaths;
@@ -1470,7 +1467,13 @@ async function init() {
   updateSidebarVisibility();
   syncUrl();
   restorePreviewFromUrl({ scroll: false });
-  doSearch();
+  const initialSearch = doSearch();
+  STATE.sources = await API.getSources();
+  STATE.sourceMap = Object.fromEntries(STATE.sources.map((source) => [source.slug, source]));
+  await renderSourcesFilter();
+  await renderSidebar();
+  await renderFolderTree();
+  updateFilterVisibility();
+  await initialSearch;
 }
-
 document.addEventListener("DOMContentLoaded", init);

static/style.css

@@ -1720,6 +1720,14 @@ body.mobile .mobile-selected-count {
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 90;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition);
+}
+
+.overlay.open {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .toast {
@@ -1749,34 +1757,41 @@ body.mobile .mobile-selected-count {
   }
 }
 
-body.mobile .sidebar:not(.open) {
-  width: 0;
-  border-right: none;
-  border-left: none;
-}
-
-body.mobile .left-sidebar.open {
+body.mobile .sidebar {
   position: fixed;
   top: var(--header-h);
-  left: 0;
   bottom: 0;
   z-index: 95;
-  width: 85vw;
+  width: 85vw !important;
   max-width: 320px;
-  box-shadow: var(--shadow-lg);
+  transition: transform var(--transition), opacity var(--transition);
+  will-change: transform;
 }
 
-body.mobile .right-sidebar.open {
-  position: fixed;
-  top: var(--header-h);
+body.mobile .left-sidebar {
+  left: 0;
+  transform: translateX(-100%);
+  border-right: 1px solid var(--outline-variant);
+  border-left: none;
+}
+
+body.mobile .right-sidebar {
   right: 0;
-  bottom: 0;
-  z-index: 95;
-  width: 85vw;
-  max-width: 320px;
+  transform: translateX(100%);
+  border-left: 1px solid var(--outline-variant);
+  border-right: none;
+}
+
+body.mobile .sidebar.open {
+  transform: translateX(0);
   box-shadow: var(--shadow-lg);
 }
 
+body.mobile .sidebar.expanded-wide {
+  width: 85vw !important;
+  max-width: 320px;
+}
+
 body.mobile .footer {
   display: none;
 }
@@ -1882,34 +1897,41 @@ body.mobile .preview-path {
 }
 
 @media (max-width: 768px) {
-  body:not(.force-desktop) .sidebar:not(.open) {
-    width: 0;
-    border-right: none;
-    border-left: none;
-  }
-
-  body:not(.force-desktop) .left-sidebar.open {
+  body:not(.force-desktop) .sidebar {
     position: fixed;
     top: var(--header-h);
-    left: 0;
     bottom: 0;
     z-index: 95;
-    width: 85vw;
+    width: 85vw !important;
     max-width: 320px;
-    box-shadow: var(--shadow-lg);
+    transition: transform var(--transition), opacity var(--transition);
+    will-change: transform;
   }
 
-  body:not(.force-desktop) .right-sidebar.open {
-    position: fixed;
-    top: var(--header-h);
+  body:not(.force-desktop) .left-sidebar {
+    left: 0;
+    transform: translateX(-100%);
+    border-right: 1px solid var(--outline-variant);
+    border-left: none;
+  }
+
+  body:not(.force-desktop) .right-sidebar {
     right: 0;
-    bottom: 0;
-    z-index: 95;
-    width: 85vw;
-    max-width: 320px;
+    transform: translateX(100%);
+    border-left: 1px solid var(--outline-variant);
+    border-right: none;
+  }
+
+  body:not(.force-desktop) .sidebar.open {
+    transform: translateX(0);
     box-shadow: var(--shadow-lg);
   }
 
+  body:not(.force-desktop) .sidebar.expanded-wide {
+    width: 85vw !important;
+    max-width: 320px;
+  }
+
   body:not(.force-desktop) .footer {
     display: none;
   }