Fix collapsed sidebar layout and cache busting

AGENTS.md

@@ -71,8 +71,10 @@ 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.
+* **View partial cache busting:** The `views/*.html` files are served from the same CDN tier and require the asset version suffix as well. `js/viewManager.js` now appends `?v=<ASSET_VERSION>` when loading views—keep that helper in place so layout or styling updates propagate on the first refresh.
 * **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.
 * **Collapsed rail padding:** The collapsed rail keeps icons full-size by pairing reduced padding on `.sidebar__inner`, `.sidebar-panel`, and `.sidebar-nav-link`. Update the trio together so 4 rem still fits the 2.75 rem toggle button and 1.5 rem glyphs without squishing the gradients.
+* **Collapsed nav width:** Links in the collapsed state must keep `width: 100%` so the icons sit on the gradient card instead of drifting over the page background. If you tweak the sidebar spacing, preserve the explicit width on `.sidebar-nav` and `.sidebar-nav-link`.
 
 ---
 

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.13" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
     <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.13" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
     <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.13" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
     <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.13" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
     <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.13" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
     <style>
       /* Override for form page to match modal field styling */
 

config/asset-version.js

@@ -1 +1 @@
-export const ASSET_VERSION = "2024.10.13";
+export const ASSET_VERSION = "2024.10.17";

css/style.css

@@ -1478,6 +1478,7 @@ footer a:hover {
   top: 0;
   left: 0;
   width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
   height: 100vh;
   height: 100dvh;
   background-color: transparent;
@@ -1496,6 +1497,7 @@ footer a:hover {
   height: 100%;
   padding: 1.5rem 1.25rem 1.75rem;
   position: relative;
+  width: 100%;
   overflow-x: visible;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -1513,6 +1515,8 @@ footer a:hover {
   border-radius: 1rem;
   box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.35);
   padding: 1.25rem 1rem;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .sidebar-panel--primary {
@@ -1539,6 +1543,7 @@ footer a:hover {
   cursor: pointer;
   transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
   flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .sidebar-collapse-toggle:hover {
@@ -1564,6 +1569,7 @@ footer a:hover {
   gap: 0.25rem;
   opacity: 1;
   transition: opacity 160ms ease;
+  width: 100%;
 }
 
 .sidebar-nav-link {
@@ -1577,6 +1583,8 @@ footer a:hover {
   color: rgba(226, 232, 240, 0.94);
   text-decoration: none;
   transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .sidebar-nav-link:hover {
@@ -1629,6 +1637,7 @@ footer a:hover {
   font-weight: 600;
   cursor: pointer;
   transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
+  box-sizing: border-box;
   flex-shrink: 0;
 }
 
@@ -1785,6 +1794,7 @@ body.sidebar-open #sidebarOverlay {
     */
     justify-content: center;
     padding-inline: 0.5rem;
+    min-height: 2.75rem;
   }
 
   body.sidebar-expanded #sidebar .sidebar-nav-link,
@@ -1803,7 +1813,7 @@ body.sidebar-open #sidebarOverlay {
       Keep enough breathing room for the panel shadow while widening the
       interior track so 2.75rem controls stay perfectly round.
     */
-    padding-inline: 0.25rem;
+    padding-inline: 0.5rem;
   }
 
   body.sidebar-collapsed #sidebar .sidebar-panel,
@@ -1812,7 +1822,17 @@ body.sidebar-open #sidebarOverlay {
       Mirror the outer adjustment so the gradient card retains its rounded
       edges without squeezing the icon rail.
     */
-    padding-inline: 0.25rem;
+    padding-inline: 0.75rem;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-panel__header,
+  #sidebar.sidebar-collapsed .sidebar-panel__header {
+    justify-content: center;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-collapse-toggle,
+  #sidebar.sidebar-collapsed .sidebar-collapse-toggle {
+    margin-inline: auto;
   }
 
   #sidebar .sidebar-toggle-icon--rotated {
@@ -1830,7 +1850,10 @@ body.sidebar-open #sidebarOverlay {
       padding consistent so the glyph does not scale between states.
     */
     justify-content: center;
-    padding-inline: 0.875rem;
+    width: 2.75rem;
+    height: 2.75rem;
+    padding: 0;
+    border-radius: 9999px;
   }
 
   body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,
@@ -1841,6 +1864,11 @@ body.sidebar-open #sidebarOverlay {
   body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron {
     display: none;
   }
+
+  body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph,
+  #sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph {
+    margin: 0;
+  }
 }
 
 .edit-field-button {

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.13" defer></script>
-    <link href="css/tailwind.generated.css?v=2024.10.13" rel="stylesheet" />
-    <link href="css/style.css?v=2024.10.13" rel="stylesheet" />
-    <link href="css/markdown.css?v=2024.10.13" rel="stylesheet" />
+    <script src="js/tracking.js?v=2024.10.17" defer></script>
+    <link href="css/tailwind.generated.css?v=2024.10.17" rel="stylesheet" />
+    <link href="css/style.css?v=2024.10.17" rel="stylesheet" />
+    <link href="css/markdown.css?v=2024.10.17" 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.13"></script>
-      <script type="module" src="js/config.js?v=2024.10.13"></script>
-      <script type="module" src="js/lists.js?v=2024.10.13"></script>
-      <script type="module" src="js/accessControl.js?v=2024.10.13"></script>
-      <script type="module" src="js/webtorrent.js?v=2024.10.13"></script>
-      <script type="module" src="js/nostr.js?v=2024.10.13"></script>
-    <script type="module" src="js/viewManager.js?v=2024.10.13"></script>
-    <script type="module" src="js/bootstrap.js?v=2024.10.13"></script>
-    <script type="module" src="js/disclaimer.js?v=2024.10.13"></script>
-    <script type="module" src="js/index.js?v=2024.10.13"></script>
+      <script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.17"></script>
+      <script type="module" src="js/config.js?v=2024.10.17"></script>
+      <script type="module" src="js/lists.js?v=2024.10.17"></script>
+      <script type="module" src="js/accessControl.js?v=2024.10.17"></script>
+      <script type="module" src="js/webtorrent.js?v=2024.10.17"></script>
+      <script type="module" src="js/nostr.js?v=2024.10.17"></script>
+    <script type="module" src="js/viewManager.js?v=2024.10.17"></script>
+    <script type="module" src="js/bootstrap.js?v=2024.10.17"></script>
+    <script type="module" src="js/disclaimer.js?v=2024.10.17"></script>
+    <script type="module" src="js/index.js?v=2024.10.17"></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/viewManager.js

@@ -2,9 +2,19 @@
 import { initChannelProfileView } from "./channelProfile.js";
 import { subscriptions } from "./subscriptions.js";
 import { getApplication } from "./applicationContext.js";
+import { ASSET_VERSION } from "../config/asset-version.js";
 
 const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
 
+const withAssetVersion = (url) => {
+  if (typeof url !== "string" || url.length === 0) {
+    return url;
+  }
+
+  const separator = url.includes("?") ? "&" : "?";
+  return `${url}${separator}v=${encodeURIComponent(ASSET_VERSION)}`;
+};
+
 /**
  * Load a partial view by URL into the #viewContainer.
  */
@@ -15,7 +25,7 @@ export async function loadView(viewUrl) {
       app.prepareForViewLoad();
     }
 
-    const res = await fetch(viewUrl);
+    const res = await fetch(withAssetVersion(viewUrl), { cache: "no-store" });
     if (!res.ok) {
       throw new Error(`Failed to load view: ${res.status}`);
     }