Hub nav: Short links with descriptions, drag shell, zoom-safe layout.

Add URL shortener to the hub left shell with label and description when expanded; share nav_shell.js (click + horizontal drag on handle) across hub and crashes console; widen open nav to 240px; fix viewport overflow when browser zoom changes.

Co-authored-by: Cursor <cursoragent@cursor.com>

examples/crash_reporter/backend/public/assets/css/app.css

@@ -27,6 +27,11 @@
   --row-open: rgba(37, 99, 235, .06);
 }
 * { box-sizing: border-box; }
+html {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: clip;
+}
 [hidden] {
   display: none !important;
   pointer-events: none !important;
@@ -47,23 +52,28 @@ body {
   background: var(--bg);
   color: var(--text);
   min-height: 100vh;
+  min-height: 100dvh;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: clip;
 }
 body:has(.shell) {
   display: block;
-  overflow: hidden;
-  height: 100vh;
-  height: 100dvh;
+  overflow-x: clip;
+  overflow-y: auto;
+  height: auto;
+  min-height: 100vh;
+  min-height: 100dvh;
 }
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 .shell {
   display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: var(--footer-h, 40px);
-  min-height: 0;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-height: calc(100dvh - var(--footer-h, 40px));
+  min-height: calc(100vh - var(--footer-h, 40px));
   overflow: hidden;
   z-index: 1;
 }
@@ -93,7 +103,7 @@ a:hover { text-decoration: underline; }
   display: flex;
   flex-direction: column;
 }
-.nav-pane.open { width: 200px; }
+.nav-pane.open { width: 240px; }
 .nav-handle {
   position: absolute;
   top: 8px;
@@ -147,17 +157,40 @@ a:hover { text-decoration: underline; }
 }
 .nav-pane.open .nav-link {
   width: 100%;
+  height: auto;
+  min-height: 40px;
   margin: 0;
-  padding: 0 12px;
+  padding: 8px 12px;
   justify-content: flex-start;
+  align-items: flex-start;
   gap: 10px;
 }
+.nav-pane.open .nav-link > .nav-icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
 .nav-link.active,
 .nav-link:hover {
   background: rgba(61, 139, 253, .22);
   color: var(--accent);
   text-decoration: none;
 }
+.nav-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+  opacity: 0;
+  max-width: 0;
+  overflow: hidden;
+  transition: opacity .18s ease, max-width .22s ease;
+}
+.nav-pane.open .nav-text {
+  opacity: 1;
+  max-width: 11rem;
+  transition-delay: .06s;
+}
 .nav-label {
   flex: 0 1 auto;
   min-width: 0;
@@ -166,23 +199,50 @@ a:hover { text-decoration: underline; }
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nav-desc {
+  display: none;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--muted);
+  white-space: normal;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.nav-pane.open .nav-desc {
+  display: -webkit-box;
+}
+.nav-link > .nav-label {
   opacity: 0;
   max-width: 0;
   transition: opacity .18s ease, max-width .22s ease;
 }
-.nav-pane.open .nav-label {
+.nav-pane.open .nav-link > .nav-label {
   opacity: 1;
   max-width: 9rem;
   transition-delay: .06s;
 }
+.nav-text .nav-label {
+  opacity: 1;
+  max-width: none;
+  transition: none;
+}
+.nav-handle.is-dragging {
+  cursor: grabbing;
+}
 @media (prefers-reduced-motion: reduce) {
   .nav-pane,
   .nav-link,
   .nav-label,
+  .nav-text,
   .locale-code {
     transition: none;
   }
-  .nav-pane.open .nav-label,
+  .nav-pane.open .nav-link > .nav-label,
+  .nav-pane.open .nav-text,
   .nav-pane.open .locale-code {
     transition-delay: 0s;
   }

examples/crash_reporter/backend/public/assets/i18n/en.json

@@ -5,6 +5,17 @@
   "nav.tickets": "Tickets",
   "nav.logout": "Logout",
   "nav.toggle": "Navigation",
+  "nav.home_desc": "Console home and workspace cards.",
+  "nav.reports_desc": "Browse and triage crash reports.",
+  "nav.tickets_desc": "Roadmap tasks, QA items, and tags.",
+  "nav.graphs": "Graphs",
+  "nav.graphs_desc": "Sessions, crashes, and device activity.",
+  "nav.remote": "Remote access",
+  "nav.remote_desc": "WireGuard sessions and device reachability.",
+  "nav.access": "Access",
+  "nav.access_desc": "Roles, privilege sets, and operators.",
+  "nav.builder": "Builder",
+  "nav.builder_desc": "Docker CI for APK baking and OTA artifacts.",
   "theme.label": "Theme",
   "theme.dark": "Dark",
   "theme.light": "Light",

examples/crash_reporter/backend/public/assets/i18n/ru.json

@@ -15,6 +15,17 @@
   "ticket.detail_title": "Задача",
   "nav.logout": "Выход",
   "nav.toggle": "Навигация",
+  "nav.home_desc": "Главная консоли и карточки разделов.",
+  "nav.reports_desc": "Просмотр и разбор отчётов о сбоях.",
+  "nav.tickets_desc": "Задачи roadmap, QA и теги.",
+  "nav.graphs": "Графики",
+  "nav.graphs_desc": "Сессии, сбои и активность устройств.",
+  "nav.remote": "Удалённый доступ",
+  "nav.remote_desc": "Сессии WireGuard и доступ к устройствам.",
+  "nav.access": "Доступ",
+  "nav.access_desc": "Роли, наборы привилегий и операторы.",
+  "nav.builder": "Сборщик",
+  "nav.builder_desc": "Docker CI для сборки APK и OTA.",
   "theme.label": "Тема",
   "theme.dark": "Тёмная",
   "theme.light": "Светлая",

examples/crash_reporter/backend/public/assets/js/app.js

@@ -119,14 +119,7 @@
   }
 
   function initNav() {
-    const nav = document.getElementById('nav-pane');
-    const handle = document.getElementById('nav-handle');
-    if (!nav || !handle) return;
-    handle.addEventListener('click', () => {
-      const open = nav.classList.toggle('open');
-      handle.setAttribute('aria-expanded', open ? 'true' : 'false');
-    });
-    handle.setAttribute('aria-expanded', nav.classList.contains('open') ? 'true' : 'false');
+    /* nav_shell.js handles toggle + drag on #nav-pane / #nav-handle */
   }
 
   function markReportViewed(id) {

examples/crash_reporter/backend/public/assets/js/nav_shell.js

@@ -0,0 +1,83 @@
+/**
+ * Collapsible left nav: click toggle + horizontal drag on handle (open on drag right).
+ */
+(function () {
+  'use strict';
+
+  var DRAG_THRESHOLD_PX = 20;
+
+  function setOpen(nav, handle, open) {
+    nav.classList.toggle('open', open);
+    if (handle) {
+      handle.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+  }
+
+  function bindNavShell(paneId, handleId) {
+    var nav = document.getElementById(paneId);
+    var handle = document.getElementById(handleId);
+    if (!nav || !handle) return;
+
+    setOpen(nav, handle, nav.classList.contains('open'));
+
+    var drag = null;
+    var suppressClick = false;
+
+    handle.addEventListener('click', function (ev) {
+      if (suppressClick) {
+        suppressClick = false;
+        ev.preventDefault();
+        return;
+      }
+      setOpen(nav, handle, !nav.classList.contains('open'));
+    });
+
+    handle.addEventListener('pointerdown', function (ev) {
+      if (ev.button !== 0) return;
+      drag = { x: ev.clientX, moved: false };
+      handle.setPointerCapture(ev.pointerId);
+      handle.classList.add('is-dragging');
+      ev.preventDefault();
+    });
+
+    handle.addEventListener('pointermove', function (ev) {
+      if (!drag || !handle.hasPointerCapture(ev.pointerId)) return;
+      var dx = ev.clientX - drag.x;
+      if (Math.abs(dx) < 4) return;
+      drag.moved = true;
+      if (dx > DRAG_THRESHOLD_PX) {
+        setOpen(nav, handle, true);
+        drag.x = ev.clientX;
+      } else if (dx < -DRAG_THRESHOLD_PX) {
+        setOpen(nav, handle, false);
+        drag.x = ev.clientX;
+      }
+    });
+
+    function endDrag(ev) {
+      if (!drag) return;
+      if (drag.moved) suppressClick = true;
+      drag = null;
+      handle.classList.remove('is-dragging');
+      if (handle.hasPointerCapture(ev.pointerId)) {
+        handle.releasePointerCapture(ev.pointerId);
+      }
+    }
+
+    handle.addEventListener('pointerup', endDrag);
+    handle.addEventListener('pointercancel', endDrag);
+  }
+
+  window.initNavShell = bindNavShell;
+
+  function autoInit() {
+    bindNavShell('nav-pane', 'nav-handle');
+    bindNavShell('landing-nav-pane', 'landing-nav-handle');
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', autoInit);
+  } else {
+    autoInit();
+  }
+})();

examples/crash_reporter/backend/views/layout.php

@@ -26,6 +26,7 @@
     })();
   </script>
   <link rel="stylesheet" href="<?= h(Auth::basePath()) ?>/assets/css/app.css">
+  <script src="<?= h(Auth::basePath()) ?>/assets/js/nav_shell.js" defer></script>
   <script src="<?= h(Auth::basePath()) ?>/assets/js/i18n.js" defer></script>
   <script src="<?= h(Auth::basePath()) ?>/assets/js/app.js" defer></script>
   <script src="<?= h(Auth::basePath()) ?>/assets/js/ticket_create.js" defer></script>
@@ -70,7 +71,10 @@
              aria-label="Home"
              title="Home">
             <span class="nav-icon nav-icon--home" aria-hidden="true"></span>
-            <span class="nav-label" data-i18n="nav.home">Home</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="nav.home">Home</span>
+              <span class="nav-desc" data-i18n="nav.home_desc">Console home and workspace cards.</span>
+            </span>
           </a>
         </li>
         <li>
@@ -80,7 +84,10 @@
              aria-label="Reports"
              title="Reports">
             <span class="nav-icon nav-icon--reports" aria-hidden="true"></span>
-            <span class="nav-label" data-i18n="nav.reports">Reports</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="nav.reports">Reports</span>
+              <span class="nav-desc" data-i18n="nav.reports_desc">Browse and triage crash reports.</span>
+            </span>
           </a>
         </li>
         <li>
@@ -90,7 +97,10 @@
              aria-label="Tickets"
              title="Tickets">
             <span class="nav-icon nav-icon--tickets" aria-hidden="true"></span>
-            <span class="nav-label" data-i18n="nav.tickets">Tickets</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="nav.tickets">Tickets</span>
+              <span class="nav-desc" data-i18n="nav.tickets_desc">Roadmap tasks, QA items, and tags.</span>
+            </span>
           </a>
         </li>
         <li>
@@ -99,7 +109,10 @@
              aria-label="Graphs"
              title="Graphs">
             <span class="nav-icon nav-icon--graphs" aria-hidden="true"></span>
-            <span class="nav-label">Graphs</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="nav.graphs">Graphs</span>
+              <span class="nav-desc" data-i18n="nav.graphs_desc">Sessions, crashes, and device activity.</span>
+            </span>
           </a>
         </li>
         <?php if (Rbac::can('remote_access_view')): ?>
@@ -109,7 +122,10 @@
              aria-label="Remote access"
              title="Remote access">
             <span class="nav-icon nav-icon--remote" aria-hidden="true"></span>
-            <span class="nav-label">Remote access</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="nav.remote">Remote access</span>
+              <span class="nav-desc" data-i18n="nav.remote_desc">WireGuard sessions and device reachability.</span>
+            </span>
           </a>
         </li>
         <?php endif; ?>
@@ -120,7 +136,10 @@
              aria-label="Short links"
              title="Short links">
             <span class="nav-icon nav-icon--link" aria-hidden="true"></span>
-            <span class="nav-label">Short links</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="home.card_short_links">Short links</span>
+              <span class="nav-desc" data-i18n="home.card_short_links_desc">Mint bearer tokens and shorten URLs for s.f0xx.org.</span>
+            </span>
           </a>
         </li>
         <?php endif; ?>
@@ -131,7 +150,10 @@
              aria-label="Access control"
              title="Access control">
             <span class="nav-icon nav-icon--tickets" aria-hidden="true"></span>
-            <span class="nav-label">Access</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="nav.access">Access</span>
+              <span class="nav-desc" data-i18n="nav.access_desc">Roles, privilege sets, and operators.</span>
+            </span>
           </a>
         </li>
         <?php endif; ?>
@@ -141,7 +163,10 @@
              aria-label="Builder"
              title="Builder">
             <span class="nav-icon nav-icon--builder" aria-hidden="true"></span>
-            <span class="nav-label">Builder</span>
+            <span class="nav-text">
+              <span class="nav-label" data-i18n="nav.builder">Builder</span>
+              <span class="nav-desc" data-i18n="nav.builder_desc">Docker CI for APK baking and OTA artifacts.</span>
+            </span>
           </a>
         </li>
       </ul>