Refine sidebar collapse interactions

AGENTS.md

@@ -71,6 +71,7 @@ Document the run in PR descriptions so QA can cross-reference results.
 * **Extensibility:** Future work (live streams, NIP-96 uploads, analytics) should preserve the URL-first strategy and magnet safety rules above.
 * **Sidebar layering:** Keep the fixed sidebar below every modal and overlay. Respect the `--z-sidebar*` tokens so dialogs always render on top of the navigation.
 * **Static asset cache busting:** The CDN aggressively caches `components/sidebar.html` and CSS/JS bundles. Update `config/asset-version.js` and keep the `?v=` query strings in `index.html` (and iframe form shells) in sync whenever you change sidebar markup, scripts, or styles. The fetch helpers in `js/index.js` already append `cache: "no-store"`; reuse them for new partials so desktop collapses ship immediately without waiting on manual cache clears.
+* **Sidebar overflow styling:** Desktop media queries in `css/style.css` used to force `overflow-x: hidden` on `#sidebar`, which clipped the navigation panel’s drop shadow. When adjusting rail dimensions, update both the base `#sidebar` rule and the desktop override so the gradient card can bleed over the white canvas. `#sidebarContainer` now keeps overflow visible while `.sidebar__inner` handles scrolling; stick with that division when extending the layout.
 
 ---
 

components/iframe_forms/iframe-application-form.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Whitelist Application Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.11" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.12" />
     <style>
       /* Override for form page to match modal field styling */
 

components/iframe_forms/iframe-bug-fix-form.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Bug Report Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.11" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.12" />
     <style>
       /* Override for form page to match modal field styling */
 

components/iframe_forms/iframe-content-appeals-form.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Content Appeals Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.11" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.12" />
     <style>
       /* Override for form page to match modal field styling */
 

components/iframe_forms/iframe-feedback-form.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid General Feedback Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.11" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.12" />
     <style>
       /* Override for form page to match modal field styling */
 

components/iframe_forms/iframe-request-form.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Feature Request Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.11" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.12" />
     <style>
       /* Override for form page to match modal field styling */
 

components/sidebar.html

@@ -79,7 +79,7 @@
     </section>
 
     <!-- Footer Links Toggle -->
-    <footer class="sidebar-footer">
+    <footer class="sidebar-footer" data-footer-state="collapsed">
       <button
         id="footerDropdownButton"
         type="button"
@@ -111,7 +111,12 @@
       </button>
 
       <!-- Footer Links Container -->
-      <div id="footerLinksContainer" class="sidebar-dropup-panel hidden">
+      <div
+        id="footerLinksContainer"
+        class="sidebar-dropup-panel"
+        aria-hidden="true"
+        data-state="collapsed"
+      >
         <nav class="sidebar-dropup-panel__inner" aria-label="Secondary">
           <a href="#view=about" class="sidebar-nav-link sidebar-nav-link--sub" title="About">
             <img

config/asset-version.js

@@ -1 +1 @@
-export const ASSET_VERSION = "2024.10.11";
+export const ASSET_VERSION = "2024.10.12";

css/style.css

@@ -1468,6 +1468,11 @@ footer a:hover {
 }
 
 /* Sidebar default states */
+#sidebarContainer {
+  position: relative;
+  overflow: visible;
+}
+
 #sidebar {
   position: fixed;
   top: 0;
@@ -1475,14 +1480,9 @@ footer a:hover {
   width: var(--sidebar-width);
   height: 100vh;
   height: 100dvh;
-  /*
-    Keep the rail container aligned with the primary page background so the
-    dark navigation panel feels like it floats above a neutral canvas.
-  */
-  background-color: var(--color-page);
+  background-color: transparent;
   color: var(--color-text);
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
+  overflow: visible;
   transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
   /* Keep below modal stacks so dialogs overlay the drawer. */
   z-index: var(--z-sidebar);
@@ -1495,6 +1495,12 @@ footer a:hover {
   gap: 1.5rem;
   height: 100%;
   padding: 1.5rem 1.25rem 1.75rem;
+  position: relative;
+  overflow-x: visible;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable both-edges;
 }
 
 .sidebar-panel {
@@ -1532,6 +1538,7 @@ footer a:hover {
   color: inherit;
   cursor: pointer;
   transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
+  flex-shrink: 0;
 }
 
 .sidebar-collapse-toggle:hover {
@@ -1555,6 +1562,8 @@ footer a:hover {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  opacity: 1;
+  transition: opacity 160ms ease;
 }
 
 .sidebar-nav-link {
@@ -1591,6 +1600,8 @@ footer a:hover {
   /* Lock icon sizing so the glyphs remain steady during collapse/expand. */
   width: 1.5rem;
   height: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   flex-shrink: 0;
   display: block;
 }
@@ -1599,6 +1610,8 @@ footer a:hover {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  position: relative;
+  z-index: 2;
 }
 
 .sidebar-dropup-trigger {
@@ -1616,6 +1629,7 @@ footer a:hover {
   font-weight: 600;
   cursor: pointer;
   transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
+  flex-shrink: 0;
 }
 
 .sidebar-dropup-trigger:hover {
@@ -1652,6 +1666,23 @@ footer a:hover {
   border-radius: 0.875rem;
   box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.4);
   padding: 0.75rem 0.5rem;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 0.75rem);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(0.5rem);
+  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
+  z-index: 5;
+}
+
+.sidebar-dropup-panel[data-state="expanded"] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
 }
 
 .sidebar-dropup-panel__inner {
@@ -1660,6 +1691,15 @@ footer a:hover {
   gap: 0.25rem;
 }
 
+#sidebar[data-footer-state="expanded"] .sidebar-nav {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#sidebar[data-footer-state="collapsed"] .sidebar-nav {
+  opacity: 1;
+}
+
 #sidebar.sidebar-open {
   box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.45);
 }
@@ -1712,7 +1752,7 @@ body.sidebar-open #sidebarOverlay {
   #sidebar {
     transform: translateX(0) !important;
     width: var(--sidebar-width);
-    overflow-x: hidden;
+    overflow: visible;
   }
 
   #sidebar.sidebar-open {

index.html

@@ -50,10 +50,10 @@
       so browsers pick up the latest sidebar markup and styling without
       hard-refreshing around CDN caches.
     -->
-    <script src="js/tracking.js?v=2024.10.11" defer></script>
-    <link href="css/tailwind.generated.css?v=2024.10.11" rel="stylesheet" />
-    <link href="css/style.css?v=2024.10.11" rel="stylesheet" />
-    <link href="css/markdown.css?v=2024.10.11" rel="stylesheet" />
+    <script src="js/tracking.js?v=2024.10.12" defer></script>
+    <link href="css/tailwind.generated.css?v=2024.10.12" rel="stylesheet" />
+    <link href="css/style.css?v=2024.10.12" rel="stylesheet" />
+    <link href="css/markdown.css?v=2024.10.12" rel="stylesheet" />
   </head>
   <body>
     <!--
@@ -211,16 +211,16 @@
 
     <!-- Additional Scripts -->
     <!-- Bootstraps nostr-tools before other modules rely on nostrToolsReady -->
-      <script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.11"></script>
-      <script type="module" src="js/config.js?v=2024.10.11"></script>
-      <script type="module" src="js/lists.js?v=2024.10.11"></script>
-      <script type="module" src="js/accessControl.js?v=2024.10.11"></script>
-      <script type="module" src="js/webtorrent.js?v=2024.10.11"></script>
-      <script type="module" src="js/nostr.js?v=2024.10.11"></script>
-    <script type="module" src="js/viewManager.js?v=2024.10.11"></script>
-    <script type="module" src="js/bootstrap.js?v=2024.10.11"></script>
-    <script type="module" src="js/disclaimer.js?v=2024.10.11"></script>
-    <script type="module" src="js/index.js?v=2024.10.11"></script>
+      <script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.12"></script>
+      <script type="module" src="js/config.js?v=2024.10.12"></script>
+      <script type="module" src="js/lists.js?v=2024.10.12"></script>
+      <script type="module" src="js/accessControl.js?v=2024.10.12"></script>
+      <script type="module" src="js/webtorrent.js?v=2024.10.12"></script>
+      <script type="module" src="js/nostr.js?v=2024.10.12"></script>
+    <script type="module" src="js/viewManager.js?v=2024.10.12"></script>
+    <script type="module" src="js/bootstrap.js?v=2024.10.12"></script>
+    <script type="module" src="js/disclaimer.js?v=2024.10.12"></script>
+    <script type="module" src="js/index.js?v=2024.10.12"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
   </body>

js/index.js

@@ -176,6 +176,9 @@ async function bootstrapInterface() {
 
   const sidebar = document.getElementById("sidebar");
   const collapseToggle = document.getElementById("sidebarCollapseToggle");
+  if (sidebar && !sidebar.hasAttribute("data-footer-state")) {
+    sidebar.setAttribute("data-footer-state", "collapsed");
+  }
   if (!collapseToggle) {
     console.warn("Sidebar collapse toggle not found; skipping density controls.");
   }
@@ -357,10 +360,16 @@ async function bootstrapInterface() {
   const footerDropdownIcon = document.getElementById("footerDropdownIcon");
 
   if (footerDropdownButton && footerLinksContainer) {
+    const sidebarFooter = footerDropdownButton.closest(".sidebar-footer");
+
     const syncFooterDropup = (expanded) => {
+      const nextState = expanded ? "expanded" : "collapsed";
+      const actionLabel = expanded ? "Show fewer sidebar links" : "Show more sidebar links";
+
       footerDropdownButton.setAttribute("aria-expanded", expanded ? "true" : "false");
-      footerDropdownButton.dataset.state = expanded ? "expanded" : "collapsed";
-      footerLinksContainer.classList.toggle("hidden", !expanded);
+      footerDropdownButton.dataset.state = nextState;
+      footerDropdownButton.setAttribute("aria-label", actionLabel);
+      footerDropdownButton.setAttribute("title", actionLabel);
 
       if (footerDropdownLabel) {
         footerDropdownLabel.textContent = expanded ? "Less" : "More";
@@ -369,11 +378,31 @@ async function bootstrapInterface() {
       if (footerDropdownIcon) {
         footerDropdownIcon.classList.toggle("is-rotated", expanded);
       }
+
+      footerLinksContainer.classList.remove("hidden");
+      footerLinksContainer.setAttribute("aria-hidden", expanded ? "false" : "true");
+      footerLinksContainer.dataset.state = nextState;
+
+      if (sidebar) {
+        sidebar.setAttribute("data-footer-state", nextState);
+      }
+
+      if (sidebarFooter instanceof HTMLElement) {
+        sidebarFooter.dataset.footerState = nextState;
+      }
     };
 
     footerDropdownButton.addEventListener("click", (event) => {
       event.preventDefault();
       const expanded = footerDropdownButton.getAttribute("aria-expanded") === "true";
+
+      if (isSidebarCollapsed && !expanded) {
+        const nextCollapsed = false;
+        isSidebarCollapsed = nextCollapsed;
+        applySidebarDensity(nextCollapsed);
+        persistSidebarCollapsed(nextCollapsed);
+      }
+
       syncFooterDropup(!expanded);
     });