feat: add mobile Plan Today navigation (Closes #975)

frontend/dashboard.css

@@ -201,6 +201,11 @@ textarea { resize: vertical; min-height: 120px; }
 .plan-today-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
 .plan-today-header h2, .plan-today-header p { margin-top:0; }
 .plan-today-header button { min-width:44px; min-height:44px; }
+.mobile-plan-today-nav { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:0 -18px 10px; padding:4px 18px; background:rgba(11,21,38,.98); border-block:1px solid #2a496e; }
+.mobile-plan-today-nav button { min-width:0; min-height:44px; padding:4px; border-color:transparent; font-size:12px; }
+.mobile-plan-today-nav button[aria-current="location"] { color:#bfdbfe; background:#17365a; border-color:#31577f; }
+#plan-today-fit, #plan-today-selected, #plan-today-available-work { scroll-margin-top:54px; }
+@media (min-width:601px) { .mobile-plan-today-nav { display:none; } }
 .plan-today-list button, .plan-today-candidates button { min-height:44px; }
 .plan-today-capacity { position:sticky; top:0; z-index:2; margin:8px 0; padding:10px 12px; border:1px solid #31577f; border-radius:10px; background:#10233a; font-weight:700; }
 .plan-today-available { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; font-weight:700; }
@@ -908,6 +913,8 @@ textarea { resize: vertical; min-height: 120px; }
   .card-planning:not([open]) > .card-planning-actions { display:none; }
   .card-planning[open] > .card-planning-actions { display:grid; margin-top:8px; }
   .plan-today-panel { width:100%; border-left:0; padding:14px; }
+  .mobile-plan-today-nav { margin-inline:-14px; padding-inline:14px; }
+  .plan-today-capacity { position:static; }
   .plan-today-item { grid-template-columns:1fr; }
   .plan-today-item-actions { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
   .plan-today-candidate-actions { grid-template-columns:repeat(2,1fr); width:100%; }

frontend/index.html

@@ -342,6 +342,12 @@
       <div><h2 id="plan-today-title">Plan Today</h2><p class="small muted">Choose and order the work you want to finish next.</p></div>
       <button id="cancel-plan-today" type="button">Cancel</button>
     </div>
+    <nav class="mobile-plan-today-nav" aria-label="Plan Today sections">
+      <button type="button" data-plan-today-section="fit" aria-current="location">Fit</button>
+      <button type="button" data-plan-today-section="today">Today</button>
+      <button type="button" data-plan-today-section="available">Available</button>
+    </nav>
+    <section id="plan-today-fit" aria-label="Fit today's work">
     <div class="plan-today-capacity" id="plan-today-capacity" role="status" aria-live="polite">0 of 5 selected</div>
     <label class="plan-today-available" for="plan-today-available">Available today
       <span><input id="plan-today-available" type="number" inputmode="numeric" min="15" max="1440" step="15" placeholder="Minutes" /> min</span>
@@ -356,11 +362,12 @@
     <div class="plan-today-skipped" id="plan-today-skipped"></div>
     <div class="small plan-today-error" id="plan-today-error" role="alert"></div>
     <button class="discard-recap-replan" id="discard-recap-replan" type="button" hidden>Discard recap feedback</button>
-    <section aria-labelledby="today-plan-heading">
+    </section>
+    <section id="plan-today-selected" aria-labelledby="today-plan-heading">
       <h3 id="today-plan-heading">Today, in order</h3>
       <div class="plan-today-list" id="plan-today-list"></div>
     </section>
-    <section aria-labelledby="today-candidates-heading">
+    <section id="plan-today-available-work" aria-labelledby="today-candidates-heading">
       <h3 id="today-candidates-heading">Available My Work</h3>
       <div class="plan-today-candidates" id="plan-today-candidates"></div>
     </section>
@@ -1588,6 +1595,7 @@
 <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/mobile-plan-today-nav.js"></script>
 <script src="static/dashboard.js"></script>
 </body>
 </html>

frontend/mobile-plan-today-nav.js

@@ -0,0 +1,104 @@
+function createMobilePlanTodayNavigation(options) {
+  const buttons = options.buttons || {};
+  const targets = options.targets || {};
+  const root = options.root;
+  const listeners = new Map();
+  const prefersReducedMotion = options.prefersReducedMotion || (() => false);
+  const now = options.now || (() => Date.now());
+  const targetNames = new Map(Object.entries(targets).map(([name, target]) => [target, name]));
+  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 navigate(name) {
+    const target = targets[name];
+    if (!root || !target) return false;
+    root.scrollTo({
+      top: Math.max(0, target.offsetTop - root.offsetTop),
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    });
+    navigationLockUntil = now() + 500;
+    select(name);
+    return true;
+  }
+
+  function reset() {
+    select('fit');
+  }
+
+  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();
+      const observe = options.observe || ((handler, observedTargets, observedRoot) => {
+        if (typeof IntersectionObserver === 'undefined') return null;
+        const instance = new IntersectionObserver(handler, {
+          root: observedRoot,
+          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 (now() < navigationLockUntil) return;
+        const visible = entries
+          .filter(entry => entry.isIntersecting && targetNames.has(entry.target))
+          .sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
+        if (visible) select(targetNames.get(visible.target));
+      }, Array.from(targetNames.keys()).filter(Boolean), root);
+    },
+    stop() {
+      listeners.forEach((listener, button) => button.removeEventListener('click', listener));
+      listeners.clear();
+      if (observer) observer.disconnect();
+      observer = null;
+    },
+    navigate,
+    reset,
+    select,
+  };
+}
+
+function attachMobilePlanTodayNavigation({document, window}) {
+  const bySection = name => document.querySelector('[data-plan-today-section="' + name + '"]');
+  const sheet = document.getElementById('plan-today-sheet');
+  const panel = document.querySelector('.plan-today-panel');
+  const navigation = createMobilePlanTodayNavigation({
+    root: panel,
+    buttons: {
+      fit: bySection('fit'),
+      today: bySection('today'),
+      available: bySection('available'),
+    },
+    targets: {
+      fit: document.getElementById('plan-today-fit'),
+      today: document.getElementById('plan-today-selected'),
+      available: document.getElementById('plan-today-available-work'),
+    },
+    prefersReducedMotion: () => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  });
+  navigation.start();
+  new MutationObserver(() => {
+    if (!sheet.hidden) navigation.reset();
+  }).observe(sheet, {attributes: true, attributeFilter: ['hidden']});
+  return navigation;
+}
+
+if (typeof module !== 'undefined') module.exports = createMobilePlanTodayNavigation;
+else attachMobilePlanTodayNavigation({document, window});

frontend/service-worker.js

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