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/app_hub/assets/hub-landing.js

@@ -116,13 +116,7 @@
   }
 
   function bindLeftNav() {
-    var pane = document.getElementById('landing-nav-pane');
+    /* nav_shell.js handles #landing-nav-pane / #landing-nav-handle */
-    var handle = document.getElementById('landing-nav-handle');
-    if (handle && pane) {
-      handle.addEventListener('click', function () {
-        pane.classList.toggle('open');
-      });
-    }
   }
 
   function initFromUrl() {

examples/app_hub/assets/i18n/hub-en.json

@@ -16,6 +16,14 @@
   "nav.graphs": "Graphs",
   "nav.remote": "Remote access",
   "nav.short_links": "Short links",
+  "nav.short_links_desc": "Mint bearer tokens and shorten URLs for s.f0xx.org.",
+  "nav.console_desc": "Crash triage home and workspace cards.",
+  "nav.git_desc": "Browse repos, branches, and tags.",
+  "nav.issues_desc": "Browse and triage crash reports.",
+  "nav.tickets_desc": "Roadmap tasks, QA items, and tags.",
+  "nav.graphs_desc": "Sessions, crashes, and device activity.",
+  "nav.remote_desc": "WireGuard sessions and device reachability.",
+  "nav.builder_desc": "Docker CI for APK baking and OTA artifacts.",
   "nav.builder": "Builder",
   "nav.toggle": "Navigation",
   "nav.security": "Security",

examples/app_hub/assets/i18n/hub-ru.json

@@ -16,6 +16,14 @@
   "nav.graphs": "Графики",
   "nav.remote": "Удалённый доступ",
   "nav.short_links": "Короткие ссылки",
+  "nav.short_links_desc": "Токены и сокращение URL для s.f0xx.org.",
+  "nav.console_desc": "Главная консоли и карточки разделов.",
+  "nav.git_desc": "Репозитории, ветки и теги.",
+  "nav.issues_desc": "Просмотр и разбор отчётов о сбоях.",
+  "nav.tickets_desc": "Задачи roadmap, QA и теги.",
+  "nav.graphs_desc": "Сессии, сбои и активность устройств.",
+  "nav.remote_desc": "Сессии WireGuard и доступ к устройствам.",
+  "nav.builder_desc": "Docker CI для сборки APK и OTA.",
   "nav.builder": "Сборщик",
   "nav.toggle": "Навигация",
   "nav.security": "Безопасность",

examples/app_hub/hub-landing.css

@@ -5,12 +5,19 @@
   --landing-footer-h: 40px;
   --landing-left-w: 56px;
   --landing-rail-w: 44px;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100dvh;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: clip;
+  overflow-y: auto;
 }
 
 /* (1) Top header */
 .landing-top {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   right: 0;
@@ -145,11 +152,11 @@
 
 /* Frame: (2) left + (3) body + space for (4) rail */
 .landing-frame {
-  position: fixed;
+  position: relative;
-  top: var(--landing-header-h);
+  flex: 1 1 auto;
-  left: 0;
+  width: 100%;
-  right: 0;
+  max-width: 100%;
-  bottom: var(--landing-footer-h);
+  min-height: calc(100dvh - var(--landing-header-h) - var(--landing-footer-h));
   display: flex;
   z-index: 5;
   pointer-events: none;
@@ -162,8 +169,9 @@
   flex-direction: column;
   flex: 0 0 var(--landing-left-w);
   width: var(--landing-left-w);
-  height: 100%;
+  align-self: stretch;
-  max-height: 100%;
+  min-height: 100%;
+  max-height: none;
   overflow: hidden;
   z-index: 3;
   pointer-events: auto;
@@ -180,15 +188,16 @@
   border-top: 1px solid var(--border);
 }
 .landing-left.nav-pane.open {
-  width: 200px;
+  width: 240px;
-  flex-basis: 200px;
+  flex-basis: 240px;
 }
 
 /* (3) Body — full viewport pages, scroll snap */
 .landing-scroll {
   flex: 1;
   min-width: 0;
-  height: 100%;
+  align-self: stretch;
+  min-height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   scroll-snap-type: y mandatory;

examples/app_hub/index.php

@@ -38,7 +38,7 @@ function hub_h(string $s): string {
   <link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
   <link rel="stylesheet" href="hub.css?v=20260610overlay">
   <link rel="stylesheet" href="hub-logo-layers.css?v=20260610overlay">
-  <link rel="stylesheet" href="hub-landing.css?v=20260610overlay">
+  <link rel="stylesheet" href="hub-landing.css?v=20260612nav">
   <script type="importmap">
   {
     "imports": {
@@ -46,6 +46,7 @@ function hub_h(string $s): string {
     }
   }
   </script>
+  <script src="/app/androidcast_project/crashes/assets/js/nav_shell.js" defer></script>
   <script src="assets/hub-i18n.js" defer></script>
   <script src="assets/hub-landing.js" defer></script>
   <script src="assets/analytics.config.js"></script>
@@ -137,14 +138,14 @@ function hub_h(string $s): string {
         <span class="nav-icon nav-icon--menu" aria-hidden="true"></span>
       </button>
       <ul class="nav-list">
-        <li><a href="crashes/?view=home" class="nav-link"><span class="nav-icon nav-icon--home"></span><span class="nav-label" data-i18n="nav.console">Console</span></a></li>
+        <li><a href="crashes/?view=home" class="nav-link" data-i18n-title="nav.console" title="Console"><span class="nav-icon nav-icon--home"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.console">Console</span><span class="nav-desc" data-i18n="nav.console_desc">Crash triage home and workspace cards.</span></span></a></li>
-        <li><a href="git/" class="nav-link"><span class="nav-icon nav-icon--git"></span><span class="nav-label" data-i18n="nav.git">Git</span></a></li>
+        <li><a href="git/" class="nav-link" data-i18n-title="nav.git" title="Git"><span class="nav-icon nav-icon--git"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.git">Git</span><span class="nav-desc" data-i18n="nav.git_desc">Browse repos, branches, and tags.</span></span></a></li>
-        <li><a href="crashes/?view=reports" class="nav-link"><span class="nav-icon nav-icon--reports"></span><span class="nav-label" data-i18n="nav.issues">Issues</span></a></li>
+        <li><a href="crashes/?view=reports" class="nav-link" data-i18n-title="nav.issues" title="Issues"><span class="nav-icon nav-icon--reports"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.issues">Issues</span><span class="nav-desc" data-i18n="nav.issues_desc">Browse and triage crash reports.</span></span></a></li>
-        <li><a href="crashes/?view=tickets" class="nav-link"><span class="nav-icon nav-icon--tickets"></span><span class="nav-label" data-i18n="nav.tickets">Tickets</span></a></li>
+        <li><a href="crashes/?view=tickets" class="nav-link" data-i18n-title="nav.tickets" title="Tickets"><span class="nav-icon nav-icon--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><a href="graphs/" class="nav-link"><span class="nav-icon nav-icon--graphs"></span><span class="nav-label" data-i18n="nav.graphs">Graphs</span></a></li>
+        <li><a href="graphs/" class="nav-link" data-i18n-title="nav.graphs" title="Graphs"><span class="nav-icon nav-icon--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>
-        <li><a href="crashes/?view=remote_access" class="nav-link"><span class="nav-icon nav-icon--remote"></span><span class="nav-label" data-i18n="nav.remote">Remote access</span></a></li>
+        <li><a href="crashes/?view=remote_access" class="nav-link" data-i18n-title="nav.remote" title="Remote access"><span class="nav-icon nav-icon--remote"></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>
-        <li><a href="crashes/?view=short_links" class="nav-link"><span class="nav-icon nav-icon--link"></span><span class="nav-label" data-i18n="nav.short_links">Short links</span></a></li>
+        <li><a href="crashes/?view=short_links" class="nav-link" data-i18n-title="nav.short_links" title="Short links"><span class="nav-icon nav-icon--link"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.short_links">Short links</span><span class="nav-desc" data-i18n="nav.short_links_desc">Mint bearer tokens and shorten URLs for s.f0xx.org.</span></span></a></li>
-        <li><a href="build/" class="nav-link"><span class="nav-icon nav-icon--builder"></span><span class="nav-label" data-i18n="nav.builder">Builder</span></a></li>
+        <li><a href="build/" class="nav-link" data-i18n-title="nav.builder" title="Builder"><span class="nav-icon nav-icon--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>
       <div class="nav-user">
         <?php if ($hubUsername !== ''): ?>

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;
+  overflow-x: clip;
-  height: 100vh;
+  overflow-y: auto;
-  height: 100dvh;
+  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;
+  position: relative;
-  top: 0;
+  width: 100%;
-  left: 0;
+  max-width: 100%;
-  right: 0;
+  min-height: calc(100dvh - var(--footer-h, 40px));
-  bottom: var(--footer-h, 40px);
+  min-height: calc(100vh - var(--footer-h, 40px));
-  min-height: 0;
   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');
+    /* nav_shell.js handles toggle + drag on #nav-pane / #nav-handle */
-    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');
   }
 
   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-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-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-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>