feat: add mobile pull workspace navigation (Closes #965)

tests/test_mobile_pull_detail_navigation.py

@@ -0,0 +1,113 @@
+import json
+import subprocess
+from pathlib import Path
+
+from playwright.sync_api import sync_playwright
+
+
+FRONTEND = Path(__file__).resolve().parents[1] / "frontend"
+CONTROLLER = FRONTEND / "mobile-issue-detail-nav.js"
+
+
+def test_pull_navigation_prepares_review_before_scrolling_and_focuses_reply():
+    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]; }}
+  setAttribute(name, value) {{ this.attributes[name]=value; }}
+  removeAttribute(name) {{ delete this.attributes[name]; }}
+  focus() {{ this.focuses += 1; }}
+  scrollIntoView(options) {{ this.scrolls.push({{...options, openWhenScrolled:this.open}}); }}
+}}
+const buttons = Object.fromEntries(['overview','conversation','reply','review'].map(name => [name,new FakeElement(name)]));
+const targets = Object.fromEntries(['overview','conversation','reply','review'].map(name => [name,new FakeElement(name)]));
+let prepared = [];
+const navigation = createNavigation({{
+  buttons, targets,
+  beforeNavigate:{{review(target) {{ prepared.push('review'); target.open=true; }}}},
+  prefersReducedMotion:() => true,
+}});
+navigation.start();
+navigation.navigate('reply');
+navigation.navigate('review');
+process.stdout.write(JSON.stringify({{
+  replyFocuses:targets.reply.focuses,
+  reviewScrolls:targets.review.scrolls,
+  prepared,
+  current:Object.fromEntries(Object.entries(buttons).map(([name,button]) => [name,button.attributes['aria-current'] || null])),
+}}));
+"""
+    result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
+
+    assert result.returncode == 0, result.stderr
+    assert json.loads(result.stdout) == {
+        "replyFocuses": 1,
+        "reviewScrolls": [{"block": "start", "behavior": "auto", "openWhenScrolled": True}],
+        "prepared": ["review"],
+        "current": {
+            "overview": None,
+            "conversation": None,
+            "reply": None,
+            "review": "location",
+        },
+    }
+
+
+def test_pull_sheet_wires_four_workspace_destinations_to_existing_lazy_review():
+    html = (FRONTEND / "index.html").read_text()
+    dashboard_js = (FRONTEND / "dashboard.js").read_text()
+
+    assert '<nav class="mobile-detail-nav mobile-pull-detail-nav"' in html
+    assert 'aria-label="Pull request sections"' in html
+    for name, label in (
+        ("overview", "Overview"),
+        ("conversation", "Conversation"),
+        ("reply", "Reply"),
+        ("review", "Review &amp; merge"),
+    ):
+        assert f'data-pull-section="{name}"' in html
+        assert f">{label}</button>" in html
+    assert 'id="pull-overview"' in html
+    assert 'id="pull-conversation"' in html
+    assert 'id="pull-comment"' in html
+    assert 'id="pull-review"' in html
+    assert "document.querySelectorAll('[data-pull-section]')" in dashboard_js
+    assert "beforeNavigate:{review(target) { target.open = true; }}" in dashboard_js
+
+
+def test_pull_workspace_rail_is_phone_contained_and_desktop_hidden():
+    html = (FRONTEND / "index.html").read_text()
+    css = (FRONTEND / "dashboard.css").read_text()
+    rendered = html.replace(
+        '<link rel="stylesheet" href="static/dashboard.css" />',
+        f"<style>{css}</style>",
+    )
+
+    with sync_playwright() as playwright:
+        browser = playwright.chromium.launch()
+        page = browser.new_page(viewport={"width": 320, "height": 568})
+        page.set_content(rendered, wait_until="domcontentloaded")
+        page.locator("#pull-sheet").evaluate("node => node.classList.add('open')")
+        for width, height in ((320, 568), (390, 844)):
+            page.set_viewport_size({"width": width, "height": height})
+            phone = page.locator(".mobile-pull-detail-nav").evaluate(
+                """nav => ({
+                  display:getComputedStyle(nav).display,
+                  navWidth:nav.getBoundingClientRect().width,
+                  panelWidth:nav.closest('.pull-sheet-panel').getBoundingClientRect().width,
+                  panelOverflow:nav.closest('.pull-sheet-panel').scrollWidth > nav.closest('.pull-sheet-panel').clientWidth,
+                  heights:Array.from(nav.querySelectorAll('button')).map(button => button.getBoundingClientRect().height),
+                  position:getComputedStyle(nav).position,
+                })"""
+            )
+            assert phone["display"] == "grid"
+            assert phone["position"] == "sticky"
+            assert phone["navWidth"] <= phone["panelWidth"]
+            assert phone["panelOverflow"] is False
+            assert min(phone["heights"]) >= 44
+
+        page.set_viewport_size({"width": 900, "height": 700})
+        assert page.locator(".mobile-pull-detail-nav").evaluate("nav => getComputedStyle(nav).display") == "none"
+        browser.close()