feat: collapse mobile card planning controls (#393)

tests/test_my_work.py

@@ -20,6 +20,87 @@ CONVERSATION = Path(__file__).parents[1] / "frontend" / "conversation.js"
 PICK_WORK = Path(__file__).parents[1] / "frontend" / "pick-work.js"
 WORK_ROUTE = Path(__file__).parents[1] / "frontend" / "work-route.js"
 UPDATE_OWNERSHIP = Path(__file__).parents[1] / "frontend" / "update-ownership.js"
+CARD_PLANNING = Path(__file__).parents[1] / "frontend" / "card-planning.js"
+
+
+def test_card_planning_disclosures_keep_one_open_and_escape_restores_focus():
+    script = f"""
+const createCardPlanning = require({json.dumps(str(CARD_PLANNING))});
+function disclosure(name) {{
+  const listeners = {{}};
+  const attrs = {{}};
+  const summary = {{
+    focusCount: 0,
+    setAttribute(key, value) {{ attrs[key] = value; }},
+    focus() {{ this.focusCount += 1; }},
+  }};
+  return {{
+    name, open: false, dataset: {{}}, summary, attrs,
+    querySelector(selector) {{ return selector === 'summary' ? summary : null; }},
+    addEventListener(type, listener) {{ listeners[type] = listener; }},
+    fire(type, event = {{}}) {{ listeners[type](event); }},
+  }};
+}}
+const first = disclosure('first');
+const second = disclosure('second');
+const controller = createCardPlanning({{
+  querySelectorAll() {{ return [first, second]; }},
+}});
+controller.wire();
+first.open = true;
+first.fire('toggle');
+second.open = true;
+second.fire('toggle');
+const escape = {{
+  key: 'Escape', prevented: 0, stopped: 0,
+  preventDefault() {{ this.prevented += 1; }},
+  stopPropagation() {{ this.stopped += 1; }},
+}};
+second.fire('keydown', escape);
+process.stdout.write(JSON.stringify({{
+  firstOpen: first.open,
+  firstExpanded: first.attrs['aria-expanded'],
+  secondOpen: second.open,
+  secondExpanded: second.attrs['aria-expanded'],
+  secondFocus: second.summary.focusCount,
+  prevented: escape.prevented,
+  stopped: escape.stopped,
+}}));
+"""
+    result = subprocess.run(
+        ["node", "-e", script], check=True, capture_output=True, text=True
+    )
+
+    assert json.loads(result.stdout) == {
+        "firstOpen": False,
+        "firstExpanded": "false",
+        "secondOpen": False,
+        "secondExpanded": "false",
+        "secondFocus": 1,
+        "prevented": 1,
+        "stopped": 1,
+    }
+
+
+@pytest.mark.anyio
+async def test_my_work_cards_progressively_disclose_planning_on_phones():
+    html = await dashboard()
+    service_worker = (Path(__file__).parents[1] / "frontend" / "service-worker.js").read_text()
+
+    assert '<script src="static/card-planning.js"></script>' in html
+    assert "const cardPlanning = createCardPlanning(document);" in html
+    assert "cardPlanning.wire();" in html
+    assert (
+        '<details class="card-planning" data-card-planning>'
+        '<summary aria-expanded="false">Plan or defer</summary>'
+        '<div class="card-planning-actions">'
+    ) in html
+    assert '.card-planning > summary { display:none;' in html
+    assert '.card-planning:not([open]) > .card-planning-actions { display:grid;' in html
+    mobile = html.index('@media (max-width: 600px)')
+    assert '.card-planning > summary { min-height:44px; display:flex;' in html[mobile:]
+    assert '.card-planning:not([open]) > .card-planning-actions { display:none;' in html[mobile:]
+    assert "BASE + 'static/card-planning.js'" in service_worker
 
 
 def test_unassigned_issue_update_claims_once_and_becomes_today_ready():

tests/test_service_worker.py

@@ -340,6 +340,7 @@ def test_install_precaches_complete_subpath_scoped_app_shell():
         "/dashboard/static/offline-work.js",
         "/dashboard/static/offline-today.js",
         "/dashboard/static/my-work.js",
+        "/dashboard/static/card-planning.js",
         "/dashboard/static/today-work.js",
         "/dashboard/static/plan-today.js",
         "/dashboard/static/today-sync.js",