feat: add mobile requested-review navigation (Closes #969)

tests/test_mobile_review_detail_navigation.py

@@ -0,0 +1,146 @@
+import json
+import subprocess
+from pathlib import Path
+
+
+FRONTEND = Path(__file__).resolve().parents[1] / "frontend"
+CONTROLLER = FRONTEND / "mobile-review-detail-nav.js"
+
+
+def test_review_navigation_moves_between_sections_and_focuses_feedback():
+    script = f"""
+const createNavigation = require({json.dumps(str(CONTROLLER))});
+class FakeElement {{
+  constructor(name) {{
+    this.name=name; this.listeners={{}}; this.attributes={{}}; this.focuses=0; this.scrolls=[];
+  }}
+  addEventListener(name, callback) {{ this.listeners[name]=callback; }}
+  removeEventListener(name) {{ delete this.listeners[name]; }}
+  setAttribute(name, value) {{ this.attributes[name]=value; }}
+  removeAttribute(name) {{ delete this.attributes[name]; }}
+  focus(options) {{ this.focuses += 1; this.focusOptions=options; }}
+  scrollIntoView(options) {{ this.scrolls.push(options); }}
+}}
+const names=['overview','files','feedback','history'];
+const buttons=Object.fromEntries(names.map(name => [name,new FakeElement(name)]));
+const targets=Object.fromEntries(names.map(name => [name,new FakeElement(name)]));
+const summaryComposer=new FakeElement('summary');
+const navigation=createNavigation({{
+  buttons, targets, summaryComposer,
+  prefersReducedMotion:() => true,
+}});
+navigation.start();
+navigation.navigate('files');
+navigation.navigate('feedback');
+const currentAfterFeedback=Object.fromEntries(Object.entries(buttons).map(([name,button]) => [name,button.attributes['aria-current'] || null]));
+navigation.reset();
+const currentAfterReset=Object.fromEntries(Object.entries(buttons).map(([name,button]) => [name,button.attributes['aria-current'] || null]));
+navigation.stop();
+process.stdout.write(JSON.stringify({{
+  files:targets.files.scrolls,
+  feedback:targets.feedback.scrolls,
+  feedbackFocuses:summaryComposer.focuses,
+  focusOptions:summaryComposer.focusOptions,
+  currentAfterFeedback,
+  currentAfterReset,
+  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) == {
+        "files": [{"block": "start", "behavior": "auto"}],
+        "feedback": [{"block": "start", "behavior": "auto"}],
+        "feedbackFocuses": 1,
+        "focusOptions": {"preventScroll": True},
+        "currentAfterFeedback": {
+            "overview": None,
+            "files": None,
+            "feedback": "location",
+            "history": None,
+        },
+        "currentAfterReset": {
+            "overview": "location",
+            "files": None,
+            "feedback": None,
+            "history": None,
+        },
+        "listenersAfterStop": [0, 0, 0, 0],
+    }
+
+
+def test_review_navigation_tracks_the_visible_section_inside_the_review_panel():
+    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','files','feedback','history'].map(name => [name,makeElement(name)]));
+const targets=Object.fromEntries(['overview','files','feedback','history'].map(name => [name,makeElement(name)]));
+let callback;
+let observedRoot=null;
+let disconnected=0;
+const panel=makeElement('panel');
+const navigation=createNavigation({{
+  buttons, targets, root:panel,
+  observe(handler, observedTargets, root) {{
+    callback=handler; observedRoot=root;
+    return {{disconnect() {{ disconnected += 1; }}}};
+  }},
+}});
+navigation.start();
+callback([
+  {{target:targets.files,isIntersecting:true,intersectionRatio:.25}},
+  {{target:targets.feedback,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,rootMatches:observedRoot === panel,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,
+            "files": None,
+            "feedback": "location",
+            "history": None,
+        },
+        "rootMatches": True,
+        "disconnected": 1,
+    }
+
+
+def test_review_sheet_wires_a_mobile_safe_area_navigation_rail_and_offline_asset():
+    html = (FRONTEND / "index.html").read_text()
+    css = (FRONTEND / "dashboard.css").read_text()
+    dashboard_js = (FRONTEND / "dashboard.js").read_text()
+    service_worker = (FRONTEND / "service-worker.js").read_text()
+
+    assert '<nav class="mobile-review-detail-nav" aria-label="Review sections">' in html
+    for name, label in (
+        ("overview", "Overview"),
+        ("files", "Files"),
+        ("feedback", "Feedback"),
+        ("history", "History"),
+    ):
+        assert f'data-review-section="{name}"' in html
+        assert f">{label}</button>" in html
+    assert 'id="review-overview"' in html
+    assert 'id="review-files-workspace"' in html
+    assert 'id="review-feedback"' in html
+    assert 'id="review-history-workspace"' in html
+    assert '<script src="static/mobile-review-detail-nav.js"></script>' in html
+    assert "createMobileReviewDetailNavigation({" in dashboard_js
+    assert "mobileReviewDetailNavigation.reset();" in dashboard_js
+    assert ".mobile-review-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
+    assert "BASE + 'static/mobile-review-detail-nav.js'" in service_worker

tests/test_service_worker.py

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