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

tests/e2e/test_mobile_search_preview_navigation.py

@@ -0,0 +1,70 @@
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+import pytest
+
+pytest.importorskip("playwright.sync_api")
+from playwright.sync_api import expect, sync_playwright
+
+
+ROOT = Path(__file__).resolve().parents[2]
+FRONTEND = ROOT / "frontend"
+
+
+@pytest.mark.parametrize(("width", "height"), [(320, 568), (390, 844)])
+def test_rendered_mobile_search_preview_navigation_preserves_reading_space_and_draft(width, height):
+    html = re.sub(r'<script src="static/[^"]+"></script>', "", (FRONTEND / "index.html").read_text())
+
+    with sync_playwright() as playwright:
+        browser = playwright.chromium.launch()
+        page = browser.new_page(viewport={"width": width, "height": height})
+        page.set_content(html)
+        page.add_style_tag(path=FRONTEND / "dashboard.css")
+        page.locator("#search-preview").evaluate("node => node.classList.add('open')")
+        page.locator("#search-preview-reply-workspace").evaluate("node => node.hidden = false")
+        page.locator(".search-preview-navigation").evaluate("node => node.hidden = false")
+        page.locator("#search-preview-overview").evaluate("node => node.style.minHeight = '500px'")
+        page.locator("#search-preview-conversation").evaluate("node => node.style.minHeight = '500px'")
+        page.locator("#search-preview-reply-workspace").evaluate("node => node.style.minHeight = '500px'")
+        page.locator("#search-preview-actions").evaluate("node => node.style.minHeight = '300px'")
+        page.add_script_tag(path=FRONTEND / "mobile-search-preview-nav.js")
+
+        navigation = page.locator(".mobile-search-preview-nav")
+        expect(navigation).to_be_visible()
+        buttons = navigation.locator("button")
+        assert buttons.count() == 4
+        for button in buttons.all():
+            bounds = button.bounding_box()
+            assert bounds and bounds["height"] >= 44
+        assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
+        assert page.locator(".search-preview-panel").evaluate("node => node.scrollWidth <= node.clientWidth")
+
+        page.locator("#search-preview-reply").fill("Keep this reply while navigating")
+        navigation.locator('[data-search-preview-section="conversation"]').click()
+        expect(navigation.locator('[data-search-preview-section="conversation"]')).to_have_attribute(
+            "aria-current", "location"
+        )
+        navigation.locator('[data-search-preview-section="reply"]').click()
+        expect(page.locator("#search-preview-reply")).to_be_focused()
+        assert page.locator("#search-preview-reply").input_value() == "Keep this reply while navigating"
+        navigation.locator('[data-search-preview-section="actions"]').click()
+        expect(navigation.locator('[data-search-preview-section="actions"]')).to_have_attribute(
+            "aria-current", "location"
+        )
+
+        continuation = page.locator(".search-preview-navigation")
+        assert continuation.evaluate("node => getComputedStyle(node).position") == "sticky"
+        assert continuation.evaluate("node => getComputedStyle(node).bottom") == "0px"
+        assert page.locator("#search-preview-actions").evaluate("node => getComputedStyle(node).position") == "static"
+
+        page.locator("#next-search-result").click()
+        expect(navigation.locator('[data-search-preview-section="overview"]')).to_have_attribute(
+            "aria-current", "location"
+        )
+        assert page.locator("#search-preview-reply").input_value() == "Keep this reply while navigating"
+
+        page.set_viewport_size({"width": 800, "height": 700})
+        expect(navigation).to_be_hidden()
+        browser.close()

tests/test_ci_workflow.py

@@ -38,5 +38,8 @@ def test_release_promotion_waits_for_artifact_mobile_offline_journey():
     assert "pip install -r requirements-e2e.txt" in browser
     assert "python3 -m playwright install --with-deps chromium" in browser
     assert 'STACKCHAIN_RUN_RELEASE_E2E: "1"' in browser
-    assert "python3 -m pytest tests/e2e/test_mobile_offline_issue_release.py -q" in browser
+    assert (
+        "python3 -m pytest tests/e2e/test_mobile_offline_issue_release.py "
+        "tests/e2e/test_mobile_search_preview_navigation.py -q"
+    ) in browser
     assert "needs: [lint, build-release, browser-journey]" in release

tests/test_mobile_search_preview_navigation.py

@@ -0,0 +1,135 @@
+import json
+import subprocess
+from pathlib import Path
+
+
+CONTROLLER = Path(__file__).resolve().parents[1] / "frontend" / "mobile-search-preview-nav.js"
+FRONTEND = CONTROLLER.parent
+
+
+def run_navigation(scenario: str) -> dict:
+    script = f"""
+const createNavigation = require({json.dumps(str(CONTROLLER))});
+class FakeElement {{
+  constructor(name) {{
+    this.name=name; this.listeners={{}}; this.attributes={{}}; this.scrolls=[];
+    this.focuses=0; this.hidden=false;
+  }}
+  addEventListener(name, callback) {{ this.listeners[name]=callback; }}
+  removeEventListener(name) {{ delete this.listeners[name]; }}
+  click() {{ this.listeners.click?.({{preventDefault() {{}}}}); }}
+  setAttribute(name,value) {{ this.attributes[name]=value; }}
+  removeAttribute(name) {{ delete this.attributes[name]; }}
+  scrollIntoView(options) {{ this.scrolls.push(options); }}
+  focus(options) {{ this.focuses += 1; this.focusOptions=options; }}
+}}
+{scenario}
+"""
+    result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
+    assert result.returncode == 0, result.stderr
+    return json.loads(result.stdout)
+
+
+def test_mobile_search_preview_navigation_completes_the_workflow_and_gates_reply():
+    result = run_navigation("""
+const names=['overview','conversation','reply','actions'];
+const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
+const targets=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
+const navigation=createNavigation({buttons,targets,prefersReducedMotion:()=>true});
+navigation.start();
+navigation.setReplyAvailable(false);
+buttons.reply.click();
+const unavailableScrolls=targets.reply.scrolls.length;
+navigation.setReplyAvailable(true);
+buttons.conversation.click();
+buttons.reply.click();
+buttons.actions.click();
+const selected=Object.fromEntries(Object.entries(buttons).map(([name,button])=>[name,button.attributes['aria-current']||null]));
+navigation.stop();
+process.stdout.write(JSON.stringify({
+  unavailableScrolls,
+  replyDisabled:buttons.reply.attributes['aria-disabled']||null,
+  conversation:targets.conversation.scrolls,
+  reply:targets.reply.scrolls,
+  replyFocuses:targets.reply.focuses,
+  actions:targets.actions.scrolls,
+  selected,
+  listeners:Object.values(buttons).map(button=>Object.keys(button.listeners).length),
+}));
+""")
+
+    assert result == {
+        "unavailableScrolls": 0,
+        "replyDisabled": None,
+        "conversation": [{"block": "start", "behavior": "auto"}],
+        "reply": [{"block": "start", "behavior": "auto"}],
+        "replyFocuses": 1,
+        "actions": [{"block": "start", "behavior": "auto"}],
+        "selected": {
+            "overview": None,
+            "conversation": None,
+            "reply": None,
+            "actions": "location",
+        },
+        "listeners": [0, 0, 0, 0],
+    }
+
+
+def test_mobile_search_preview_navigation_tracks_panel_sections_and_resets_for_next_result():
+    result = run_navigation("""
+const names=['overview','conversation','reply','actions'];
+const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
+const targets=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
+const root=new FakeElement('panel');
+let callback; let observedRoot; let disconnected=0;
+const navigation=createNavigation({
+  buttons,targets,root,
+  observe(handler,observed,rootOption){callback=handler; observedRoot=rootOption; return {disconnect(){disconnected++;}};},
+});
+navigation.start();
+callback([{target:targets.overview,isIntersecting:true,intersectionRatio:.2},{target:targets.conversation,isIntersecting:true,intersectionRatio:.8}]);
+navigation.reset(false);
+const selected=Object.fromEntries(Object.entries(buttons).map(([name,button])=>[name,button.attributes['aria-current']||null]));
+navigation.stop();
+process.stdout.write(JSON.stringify({selected,replyDisabled:buttons.reply.attributes['aria-disabled'],observedRoot:observedRoot.name,disconnected}));
+""")
+
+    assert result == {
+        "selected": {"overview": "location", "conversation": None, "reply": None, "actions": None},
+        "replyDisabled": "true",
+        "observedRoot": "panel",
+        "disconnected": 1,
+    }
+
+
+def test_search_preview_ships_mobile_navigation_in_the_offline_bundle():
+    html = (FRONTEND / "index.html").read_text()
+    css = (FRONTEND / "dashboard.css").read_text()
+    navigation_js = CONTROLLER.read_text()
+    bundle = (FRONTEND.parent / "src" / "frontend_bundle.py").read_text()
+    service_worker = (FRONTEND / "service-worker.js").read_text()
+
+    assert '<nav class="mobile-search-preview-nav"' in html
+    assert 'aria-label="Search preview sections"' in html
+    for name, label in (
+        ("overview", "Overview"),
+        ("conversation", "Conversation"),
+        ("reply", "Reply"),
+        ("actions", "Act"),
+    ):
+        assert f'data-search-preview-section="{name}"' in html
+        assert f">{label}</button>" in html
+    assert 'id="search-preview-overview"' in html
+    assert 'id="search-preview-reply-workspace"' in html
+    assert 'id="search-preview-actions"' in html
+    assert '<script src="static/mobile-search-preview-nav.js"></script>' in html
+    assert '"static/mobile-search-preview-nav.js"' in bundle
+    assert "attachMobileSearchPreviewNavigation({document, window})" in navigation_js
+    assert "navigation.reset(!reply.hidden)" in navigation_js
+    assert "attributeFilter:['hidden']" in navigation_js
+    assert "static/mobile-search-preview-nav.js" in service_worker
+    assert ".mobile-search-preview-nav" in css
+    assert "grid-template-columns:repeat(4,minmax(0,1fr))" in css
+    assert "min-height:44px" in css
+    assert "env(safe-area-inset-top)" in css
+    assert "#search-preview-actions { position:static" in css

tests/test_service_worker.py

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