feat: add mobile issue detail navigation (Closes #961)

tests/test_mobile_issue_detail_navigation.py

@@ -0,0 +1,146 @@
+import json
+import subprocess
+from pathlib import Path
+
+
+CONTROLLER = Path(__file__).resolve().parents[1] / "frontend" / "mobile-issue-detail-nav.js"
+FRONTEND = CONTROLLER.parent
+
+
+def test_mobile_issue_navigation_opens_and_focuses_each_destination_without_forced_motion():
+    script = f"""
+const createNavigation = require({json.dumps(str(CONTROLLER))});
+class FakeElement {{
+  constructor(name) {{
+    this.name = name;
+    this.listeners = {{}};
+    this.attributes = {{}};
+    this.open = false;
+    this.focuses = 0;
+    this.scrolls = [];
+  }}
+  addEventListener(name, callback) {{ this.listeners[name] = callback; }}
+  removeEventListener(name) {{ delete this.listeners[name]; }}
+  click() {{ this.listeners.click({{currentTarget:this, preventDefault() {{}}}}); }}
+  setAttribute(name, value) {{ this.attributes[name] = value; }}
+  removeAttribute(name) {{ delete this.attributes[name]; }}
+  focus() {{ this.focuses += 1; }}
+  scrollIntoView(options) {{ this.scrolls.push(options); }}
+}}
+const buttons = Object.fromEntries(['overview','conversation','reply','actions'].map(name => [name,new FakeElement(name)]));
+const targets = Object.fromEntries(['overview','conversation','reply','actions'].map(name => [name,new FakeElement(name)]));
+const navigation = createNavigation({{
+  buttons,
+  targets,
+  planning:targets.actions,
+  prefersReducedMotion:() => true,
+}});
+navigation.start();
+buttons.overview.click();
+buttons.conversation.click();
+buttons.reply.click();
+buttons.actions.click();
+const currentAfterActions = Object.fromEntries(Object.entries(buttons).map(([name,button]) => [name,button.attributes['aria-current'] || null]));
+navigation.stop();
+process.stdout.write(JSON.stringify({{
+  overview:targets.overview.scrolls,
+  conversation:targets.conversation.scrolls,
+  reply:targets.reply.scrolls,
+  replyFocuses:targets.reply.focuses,
+  actions:targets.actions.scrolls,
+  planningOpen:targets.actions.open,
+  currentAfterActions,
+  listenersAfterStop:Object.values(buttons).map(button => Object.keys(button.listeners).length),
+}}));
+"""
+    result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
+
+    assert result.returncode == 0, result.stderr
+    assert json.loads(result.stdout) == {
+        "overview": [{"block": "start", "behavior": "auto"}],
+        "conversation": [{"block": "start", "behavior": "auto"}],
+        "reply": [{"block": "start", "behavior": "auto"}],
+        "replyFocuses": 1,
+        "actions": [{"block": "start", "behavior": "auto"}],
+        "planningOpen": True,
+        "currentAfterActions": {
+            "overview": None,
+            "conversation": None,
+            "reply": None,
+            "actions": "location",
+        },
+        "listenersAfterStop": [0, 0, 0, 0],
+    }
+
+
+def test_mobile_issue_navigation_tracks_the_visible_section_and_disconnects_observer():
+    script = f"""
+const createNavigation = require({json.dumps(str(CONTROLLER))});
+const makeElement = name => ({{
+  name, attributes:{{}},
+  addEventListener() {{}}, removeEventListener() {{}},
+  setAttribute(key,value) {{ this.attributes[key] = value; }},
+  removeAttribute(key) {{ delete this.attributes[key]; }},
+}});
+const buttons = Object.fromEntries(['overview','conversation','reply','actions'].map(name => [name,makeElement(name)]));
+const targets = Object.fromEntries(['overview','conversation','reply','actions'].map(name => [name,makeElement(name)]));
+let callback;
+let disconnected = 0;
+const navigation = createNavigation({{
+  buttons, targets,
+  observe(handler, observed) {{
+    callback = handler;
+    return {{disconnect() {{ disconnected += 1; }}}};
+  }},
+}});
+navigation.start();
+callback([
+  {{target:targets.overview,isIntersecting:true,intersectionRatio:.2}},
+  {{target:targets.reply,isIntersecting:true,intersectionRatio:.8}},
+]);
+const current = Object.fromEntries(Object.entries(buttons).map(([name,button]) => [name,button.attributes['aria-current'] || null]));
+navigation.stop();
+process.stdout.write(JSON.stringify({{current,disconnected}}));
+"""
+    result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
+
+    assert result.returncode == 0, result.stderr
+    assert json.loads(result.stdout) == {
+        "current": {
+            "overview": None,
+            "conversation": None,
+            "reply": "location",
+            "actions": None,
+        },
+        "disconnected": 1,
+    }
+
+
+def test_issue_sheet_ships_a_mobile_only_safe_area_navigation_rail():
+    html = (FRONTEND / "index.html").read_text()
+    css = (FRONTEND / "dashboard.css").read_text()
+    dashboard_js = (FRONTEND / "dashboard.js").read_text()
+
+    assert '<nav class="mobile-issue-detail-nav"' in html
+    assert 'aria-label="Issue sections"' in html
+    for name, label in (
+        ("overview", "Overview"),
+        ("conversation", "Conversation"),
+        ("reply", "Reply"),
+        ("actions", "Plan & actions"),
+    ):
+        assert f'data-issue-section="{name}"' in html
+        assert f">{label}</button>" in html
+    assert 'id="issue-overview"' in html
+    assert 'id="issue-conversation"' in html
+    assert 'id="issue-comment"' in html
+    assert 'id="issue-planning"' in html
+    assert '<script src="static/mobile-issue-detail-nav.js"></script>' in html
+    assert "createMobileIssueDetailNavigation({" in dashboard_js
+    assert "window.matchMedia('(prefers-reduced-motion: reduce)').matches" in dashboard_js
+    assert "@media (max-width:600px)" in css
+    assert ".mobile-issue-detail-nav" in css
+    assert "position:sticky" in css
+    assert "min-height:44px" in css
+    assert "env(safe-area-inset-top)" in css
+    assert "@media (min-width:601px)" in css

tests/test_service_worker.py

@@ -994,6 +994,7 @@ def test_install_precaches_complete_subpath_scoped_app_shell():
         "/dashboard/static/issue-attachment.js",
         "/dashboard/static/issue-filing-review.js",
         "/dashboard/static/issue-sheet.js",
+        "/dashboard/static/mobile-issue-detail-nav.js",
         "/dashboard/static/checklist-conflict.js",
         "/dashboard/static/voice-transcript-store.js",
         "/dashboard/static/voice-issue-capture.js",