feat: add mobile Search Preview navigation (Closes #973)

frontend/dashboard.css

@@ -654,8 +654,10 @@ textarea { resize: vertical; min-height: 120px; }
 .find-work-detail a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
 .search-preview { position:fixed; inset:0; z-index:60; display:none; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
 .search-preview.open { display:flex; }
-.search-preview-panel { box-sizing:border-box; width:min(560px,100%); height:100dvh; overflow:auto; display:grid; align-content:start; gap:12px; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:#0b1526; border-left:1px solid #2a496e; overflow-wrap:anywhere; }
+.search-preview-panel { box-sizing:border-box; width:min(560px,100%); height:100dvh; overflow:auto; overflow-x:hidden; display:grid; align-content:start; gap:12px; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:#0b1526; border-left:1px solid #2a496e; overflow-wrap:anywhere; }
 .search-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
+.mobile-search-preview-nav { display:none; }
+.search-preview-overview { display:grid; gap:12px; min-width:0; }
 .search-preview-header button, .search-preview-actions button, .search-preview-actions a { min-height:44px; }
 .search-preview-body { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
 .search-preview-conversation { display:grid; gap:8px; padding-top:8px; border-top:1px solid #2a496e; }
@@ -678,6 +680,33 @@ textarea { resize: vertical; min-height: 120px; }
 @media (max-width:420px) {
   .search-preview-primary-actions { grid-template-columns:1fr; }
 }
+@media (max-width:600px) {
+  .search-preview-panel { width:100%; border-left:0; padding:14px; padding-top:max(12px,env(safe-area-inset-top)); }
+  .mobile-search-preview-nav {
+    position:sticky; top:env(safe-area-inset-top); z-index:6;
+    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
+    margin-inline:-14px; padding:4px 14px;
+    background:rgba(11,21,38,.98); border-block:1px solid #2a496e;
+  }
+  .mobile-search-preview-nav button {
+    min-width:0; min-height:44px; padding:4px; overflow-wrap:anywhere;
+    border-color:transparent; font-size:12px;
+  }
+  .mobile-search-preview-nav button[aria-current="location"] {
+    border-color:#60a5fa; background:#17365a; color:#fff;
+  }
+  .mobile-search-preview-nav button[aria-disabled="true"] { opacity:.55; }
+  .search-preview-navigation {
+    position:sticky; bottom:0; z-index:5;
+    margin-inline:-6px; padding:6px;
+    padding-bottom:calc(6px + env(safe-area-inset-bottom));
+    background:rgba(11,21,38,.98); border-block:1px solid #2a496e;
+  }
+  #search-preview-overview, #search-preview-conversation,
+  #search-preview-reply-workspace, #search-preview-actions { scroll-margin-top:72px; }
+  #search-preview-actions { position:static; }
+}
+@media (min-width:601px) { .mobile-search-preview-nav { display:none; } }
 .search-preview-actions a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
 .markdown-content { min-width:0; max-width:100%; overflow-wrap:anywhere; white-space:normal; }
 .markdown-content > :first-child { margin-top:0; }

frontend/index.html

@@ -533,9 +533,17 @@
       </div>
       <button id="close-search-preview" type="button">Back to search</button>
     </div>
-    <div id="search-preview-status" class="small" aria-live="polite">Choose a search result.</div>
-    <div id="search-preview-meta" class="row"></div>
-    <div id="search-preview-body" class="search-preview-body markdown-content"></div>
+    <nav class="mobile-search-preview-nav" aria-label="Search preview sections">
+      <button type="button" data-search-preview-section="overview">Overview</button>
+      <button type="button" data-search-preview-section="conversation">Conversation</button>
+      <button type="button" data-search-preview-section="reply">Reply</button>
+      <button type="button" data-search-preview-section="actions">Act</button>
+    </nav>
+    <section id="search-preview-overview" class="search-preview-overview">
+      <div id="search-preview-status" class="small" aria-live="polite">Choose a search result.</div>
+      <div id="search-preview-meta" class="row"></div>
+      <div id="search-preview-body" class="search-preview-body markdown-content"></div>
+    </section>
     <section id="search-preview-conversation" class="search-preview-conversation" aria-labelledby="search-preview-conversation-title">
       <h2 id="search-preview-conversation-title">Current conversation</h2>
       <div id="search-preview-comments"></div>
@@ -543,7 +551,7 @@
       <button id="retry-search-preview-conversation" type="button" hidden>Retry conversation</button>
       <button id="load-older-search-preview-comments" type="button" hidden>Load older messages</button>
     </section>
-    <section class="search-preview-reply" aria-labelledby="search-preview-reply-title" hidden>
+    <section class="search-preview-reply" id="search-preview-reply-workspace" aria-labelledby="search-preview-reply-title" hidden>
       <h2 id="search-preview-reply-title">Reply</h2>
       <textarea id="search-preview-reply" maxlength="10000" placeholder="Write a reply"></textarea>
       <section class="voice-conversation" id="voice-search-reply" aria-label="Dictate search result reply" hidden>
@@ -589,7 +597,7 @@
         <button id="send-search-preview-reply-next" type="button">Send &amp; next</button>
       </div>
     </section>
-    <div class="search-preview-actions">
+    <div class="search-preview-actions" id="search-preview-actions">
       <nav class="search-preview-navigation" aria-label="Search result navigation" hidden>
         <button id="previous-search-result" type="button">Previous</button>
         <span id="search-preview-position" aria-live="polite"></span>
@@ -1579,6 +1587,7 @@
 <script src="static/mobile-issue-detail-nav.js"></script>
 <script src="static/mobile-update-detail-nav.js"></script>
 <script src="static/mobile-review-detail-nav.js"></script>
+<script src="static/mobile-search-preview-nav.js"></script>
 <script src="static/dashboard.js"></script>
 </body>
 </html>

frontend/mobile-search-preview-nav.js

@@ -0,0 +1,130 @@
+function createMobileSearchPreviewNavigation(options) {
+  const buttons = options.buttons || {};
+  const targets = options.targets || {};
+  const focusTargets = options.focusTargets || {};
+  const listeners = new Map();
+  const prefersReducedMotion = options.prefersReducedMotion || (() => false);
+  const targetNames = new Map(Object.entries(targets).map(([name, target]) => [target, name]));
+  let replyAvailable = options.replyAvailable !== false;
+  let observer = null;
+  let navigationLockUntil = 0;
+
+  function select(name) {
+    Object.entries(buttons).forEach(([key, button]) => {
+      if (!button) return;
+      if (key === name) button.setAttribute('aria-current', 'location');
+      else button.removeAttribute('aria-current');
+    });
+  }
+
+  function setReplyAvailable(available) {
+    replyAvailable = Boolean(available);
+    const button = buttons.reply;
+    if (!button) return;
+    if (replyAvailable) button.removeAttribute('aria-disabled');
+    else button.setAttribute('aria-disabled', 'true');
+  }
+
+  function navigate(name) {
+    if (name === 'reply' && !replyAvailable) return false;
+    const target = targets[name];
+    if (!target) return false;
+    target.scrollIntoView({
+      block: 'start',
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    });
+    navigationLockUntil = Date.now() + 500;
+    select(name);
+    const focusTarget = focusTargets[name] || (name === 'reply' ? target : null);
+    if (focusTarget) focusTarget.focus({preventScroll:true});
+    return true;
+  }
+
+  function reset(available = replyAvailable) {
+    setReplyAvailable(available);
+    select('overview');
+  }
+
+  return {
+    start() {
+      Object.entries(buttons).forEach(([name, button]) => {
+        if (!button || listeners.has(button)) return;
+        const listener = event => {
+          event.preventDefault();
+          navigate(name);
+        };
+        listeners.set(button, listener);
+        button.addEventListener('click', listener);
+      });
+      reset(replyAvailable);
+      const observe = options.observe || ((handler, observedTargets, root) => {
+        if (typeof IntersectionObserver === 'undefined') return null;
+        const instance = new IntersectionObserver(handler, {
+          root,
+          rootMargin: '-20% 0px -60% 0px',
+          threshold: [0, 0.25, 0.5, 0.75, 1],
+        });
+        observedTargets.forEach(target => instance.observe(target));
+        return instance;
+      });
+      observer = observe(entries => {
+        if (Date.now() < navigationLockUntil) return;
+        const visible = entries
+          .filter(entry => entry.isIntersecting && targetNames.has(entry.target))
+          .filter(entry => targetNames.get(entry.target) !== 'reply' || replyAvailable)
+          .sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
+        if (visible) select(targetNames.get(visible.target));
+      }, Array.from(targetNames.keys()).filter(Boolean), options.root || null);
+    },
+    stop() {
+      listeners.forEach((listener, button) => button.removeEventListener('click', listener));
+      listeners.clear();
+      if (observer) observer.disconnect();
+      observer = null;
+    },
+    navigate,
+    reset,
+    select,
+    setReplyAvailable,
+  };
+}
+
+function attachMobileSearchPreviewNavigation({document, window}) {
+  const bySection = name => document.querySelector('[data-search-preview-section="' + name + '"]');
+  const preview = document.getElementById('search-preview');
+  const reply = document.getElementById('search-preview-reply-workspace');
+  const navigation = createMobileSearchPreviewNavigation({
+    root:document.querySelector('.search-preview-panel'),
+    buttons:{
+      overview:bySection('overview'),
+      conversation:bySection('conversation'),
+      reply:bySection('reply'),
+      actions:bySection('actions'),
+    },
+    targets:{
+      overview:document.getElementById('search-preview-overview'),
+      conversation:document.getElementById('search-preview-conversation'),
+      reply,
+      actions:document.getElementById('search-preview-actions'),
+    },
+    focusTargets:{reply:document.getElementById('search-preview-reply')},
+    replyAvailable:!reply.hidden,
+    prefersReducedMotion:() => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  });
+  navigation.start();
+  new MutationObserver(() => navigation.setReplyAvailable(!reply.hidden)).observe(reply, {
+    attributes:true, attributeFilter:['hidden'],
+  });
+  new MutationObserver(() => {
+    if (preview.classList.contains('open')) navigation.reset(!reply.hidden);
+  }).observe(preview, {attributes:true, attributeFilter:['class']});
+  ['previous-search-result', 'next-search-result'].forEach(id => {
+    document.getElementById(id).addEventListener('click', () => {
+      setTimeout(() => navigation.reset(!reply.hidden), 0);
+    });
+  });
+  return navigation;
+}
+
+if (typeof module !== 'undefined') module.exports = createMobileSearchPreviewNavigation;
+else attachMobileSearchPreviewNavigation({document, window});

frontend/service-worker.js

@@ -80,6 +80,7 @@ const SHELL = [
   BASE + 'static/mobile-issue-detail-nav.js',
   BASE + 'static/mobile-update-detail-nav.js',
   BASE + 'static/mobile-review-detail-nav.js',
+  BASE + 'static/mobile-search-preview-nav.js',
   BASE + 'static/checklist-conflict.js',
   BASE + 'static/voice-transcript-store.js',
   BASE + 'static/voice-issue-capture.js',