From 83af187c73ad01a077d3313d72492f28248943bc Mon Sep 17 00:00:00 2001 From: timmy Date: Mon, 10 Aug 2026 14:26:56 +0000 Subject: [PATCH] feat: keep mobile issue capture above keyboard (Closes #489) --- frontend/dashboard.css | 3 ++ frontend/dashboard.js | 2 ++ frontend/mobile-composer-viewport.js | 10 ++++-- frontend/service-worker.js | 2 +- tests/test_comment_next.py | 2 +- tests/test_later_sync.py | 2 +- tests/test_markdown_renderer.py | 2 +- tests/test_mobile_composer_integration.py | 10 ++++-- tests/test_mobile_composer_viewport.py | 40 +++++++++++++++++++++-- tests/test_plan_today.py | 2 +- tests/test_service_worker.py | 20 ++++++------ tests/test_today_readiness.py | 2 +- tests/test_today_sync.py | 2 +- 13 files changed, 75 insertions(+), 24 deletions(-) diff --git a/frontend/dashboard.css b/frontend/dashboard.css index e622186..a1bcd9a 100644 --- a/frontend/dashboard.css +++ b/frontend/dashboard.css @@ -446,9 +446,12 @@ textarea { resize: vertical; min-height: 120px; } #cmd-results { flex:1; min-height:0; overflow-y:auto; max-height:none; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); } .create-issue-panel { width:100%; border-left:0; padding:14px; } .pull-sheet-panel { width:100%; border-left:0; padding:14px; } + .create-issue-panel.composer-keyboard-active, .issue-sheet-panel.composer-keyboard-active, .pull-sheet-panel.composer-keyboard-active, .update-sheet-panel.composer-keyboard-active { position:fixed; top:var(--composer-viewport-top,0px); right:0; height:var(--composer-viewport-height,100dvh); overscroll-behavior:contain; padding-bottom:calc(14px + env(safe-area-inset-bottom)); } + .composer-keyboard-active .create-issue-form :is(input,textarea,select,button) { scroll-margin-block:12px; } + .composer-keyboard-active .create-issue-form, .composer-keyboard-active .issue-comment-composer, .composer-keyboard-active .pull-comment-composer, .composer-keyboard-active .update-reply { scroll-margin-block:12px; padding-bottom:env(safe-area-inset-bottom); } diff --git a/frontend/dashboard.js b/frontend/dashboard.js index f68f4db..f9ab728 100644 --- a/frontend/dashboard.js +++ b/frontend/dashboard.js @@ -9,6 +9,7 @@ { panel:qs('#issue-sheet .issue-sheet-panel'), workspace:qs('.issue-comment-composer'), composer:qs('#issue-comment'), submit:qs('#send-issue-comment'), status:qs('#issue-comment-status') }, { panel:qs('#pull-sheet .pull-sheet-panel'), workspace:qs('.pull-comment-composer'), composer:qs('#pull-comment'), submit:qs('#send-pull-comment'), status:qs('#pull-comment-status') }, { panel:qs('#update-sheet .update-sheet-panel'), workspace:qs('.update-reply'), composer:qs('#update-reply'), submit:qs('#send-update-reply'), status:qs('#update-reply-status') }, + { panel:qs('.create-issue-panel'), workspace:qs('#create-issue-form'), focusWithin:true }, ], }); mobileComposerViewport.start(); @@ -2773,6 +2774,7 @@ return; } qs('#create-issue-sheet').classList.remove('open'); + mobileComposerViewport.close(qs('.create-issue-panel')); clearTimeout(duplicateCheckTimer); qs('#create-issue-duplicates').hidden = true; creatingIssue = false; diff --git a/frontend/mobile-composer-viewport.js b/frontend/mobile-composer-viewport.js index b4cc250..544b411 100644 --- a/frontend/mobile-composer-viewport.js +++ b/frontend/mobile-composer-viewport.js @@ -14,7 +14,9 @@ function reveal() { if (!active) return; - active.workspace.scrollIntoView({ block:'end', inline:'nearest' }); + const focused = documentRef.activeElement; + const target = active.focusWithin && active.workspace.contains(focused) ? focused : active.workspace; + target.scrollIntoView({ block:active.focusWithin ? 'nearest' : 'end', inline:'nearest' }); } function applyGeometry() { @@ -59,12 +61,14 @@ entry.onFocusOut = () => schedule(() => { if (!entry.workspace.contains(documentRef.activeElement)) deactivate(entry); }); - entry.composer.addEventListener('focus', entry.onFocus); + entry.focusTarget = entry.focusWithin ? entry.workspace : entry.composer; + entry.focusEvent = entry.focusWithin ? 'focusin' : 'focus'; + entry.focusTarget.addEventListener(entry.focusEvent, entry.onFocus); entry.workspace.addEventListener('focusout', entry.onFocusOut); } function unbind(entry) { - entry.composer.removeEventListener('focus', entry.onFocus); + entry.focusTarget.removeEventListener(entry.focusEvent, entry.onFocus); entry.workspace.removeEventListener('focusout', entry.onFocusOut); } diff --git a/frontend/service-worker.js b/frontend/service-worker.js index b4c4ae7..05f3ecb 100644 --- a/frontend/service-worker.js +++ b/frontend/service-worker.js @@ -1,6 +1,6 @@ const BASE = new URL('./', self.location.href).pathname; importScripts(BASE + 'static/background-issue-sync.js'); -const CACHE = 'stackchain-dashboard-shell-v82'; +const CACHE = 'stackchain-dashboard-shell-v83'; const OFFLINE_LEASE_URL = new URL(BASE + '__offline-session-lease', self.location.origin).href; const OUTAGE_STATUSES = new Set([500, 502, 503, 504]); const NAVIGATION_TIMEOUT_MS = self.__STACKCHAIN_NAVIGATION_TIMEOUT_MS || 4000; diff --git a/tests/test_comment_next.py b/tests/test_comment_next.py index cea3bac..9165ac1 100644 --- a/tests/test_comment_next.py +++ b/tests/test_comment_next.py @@ -305,4 +305,4 @@ async def test_current_today_update_offers_reply_and_next_without_marking_read() assert '.update-reply-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));' in html assert '.update-reply-actions button { min-height:44px;' in html worker = (Path(__file__).parents[1] / "frontend" / "service-worker.js").read_text() - assert "stackchain-dashboard-shell-v82" in worker + assert "stackchain-dashboard-shell-v83" in worker diff --git a/tests/test_later_sync.py b/tests/test_later_sync.py index 9195cc1..20c51b1 100644 --- a/tests/test_later_sync.py +++ b/tests/test_later_sync.py @@ -347,5 +347,5 @@ async def test_dashboard_syncs_every_later_change_and_exposes_account_status(): def test_later_sync_ships_atomically_in_the_offline_shell(): source = (Path(__file__).parents[1] / "frontend" / "service-worker.js").read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/later-sync.js'" in source diff --git a/tests/test_markdown_renderer.py b/tests/test_markdown_renderer.py index c9952c1..967be78 100644 --- a/tests/test_markdown_renderer.py +++ b/tests/test_markdown_renderer.py @@ -137,4 +137,4 @@ def test_markdown_work_bodies_are_mobile_safe_block_containers(): assert ".markdown-content { min-width:0; max-width:100%; overflow-wrap:anywhere;" in css assert ".markdown-content pre { max-width:100%; overflow-x:auto;" in css assert ".markdown-content a { min-height:44px;" in css - assert "stackchain-dashboard-shell-v82" in worker + assert "stackchain-dashboard-shell-v83" in worker diff --git a/tests/test_mobile_composer_integration.py b/tests/test_mobile_composer_integration.py index 84866eb..379cecd 100644 --- a/tests/test_mobile_composer_integration.py +++ b/tests/test_mobile_composer_integration.py @@ -9,7 +9,7 @@ CSS = ROOT / "frontend" / "dashboard.css" WORKER = ROOT / "frontend" / "service-worker.js" -def test_all_conversation_composers_are_wired_to_keyboard_safe_panels(): +def test_all_text_entry_flows_are_wired_to_keyboard_safe_panels(): html = HTML.read_text() dashboard = DASHBOARD.read_text() css = CSS.read_text() @@ -23,9 +23,15 @@ def test_all_conversation_composers_are_wired_to_keyboard_safe_panels(): ]: for selector in (panel, workspace, composer, submit, status): assert repr(selector) in dashboard + assert "panel:qs('.create-issue-panel')" in dashboard + assert "workspace:qs('#create-issue-form')" in dashboard + assert "focusWithin:true" in dashboard + assert "mobileComposerViewport.close(qs('.create-issue-panel'))" in dashboard assert "height:var(--composer-viewport-height,100dvh)" in css assert "top:var(--composer-viewport-top,0px)" in css assert ".composer-keyboard-active" in css + assert ".create-issue-panel.composer-keyboard-active" in css + assert ".composer-keyboard-active .create-issue-form :is(input,textarea,select,button) { scroll-margin-block:12px;" in css def test_offline_shell_contains_every_local_dashboard_runtime_asset(): @@ -35,7 +41,7 @@ def test_offline_shell_contains_every_local_dashboard_runtime_asset(): shell_assets = set(re.findall(r"BASE \+ '([^']+)'", worker.split("async function sessionCsrf", 1)[0])) assert local_assets <= shell_assets, f"Offline shell is missing: {sorted(local_assets - shell_assets)}" - assert "stackchain-dashboard-shell-v82" in worker + assert "stackchain-dashboard-shell-v83" in worker def test_all_conversation_composers_offer_accessible_mobile_mentions(): diff --git a/tests/test_mobile_composer_viewport.py b/tests/test_mobile_composer_viewport.py index ed55b34..4fcbef3 100644 --- a/tests/test_mobile_composer_viewport.py +++ b/tests/test_mobile_composer_viewport.py @@ -6,7 +6,7 @@ from pathlib import Path CONTROLLER = Path(__file__).resolve().parents[1] / "frontend" / "mobile-composer-viewport.js" -def run_controller_scenario(scenario: str) -> dict: +def run_controller_scenario(scenario: str, *, focus_within: bool = False) -> dict: harness = f""" const createController = require({json.dumps(str(CONTROLLER))}); class Target {{ @@ -41,7 +41,7 @@ const status = element(); status.workspace = workspace; const document = {{activeElement:null}}; const scheduled = []; const controller = createController({{ - entries:[{{panel, workspace, composer, submit, status}}], viewport, mediaQuery, document, + entries:[{{panel, workspace, composer, submit, status, focusWithin:{json.dumps(focus_within)}}}], viewport, mediaQuery, document, schedule: callback => scheduled.push(callback), }}); function flush() {{ while (scheduled.length) scheduled.shift()(); }} @@ -127,3 +127,39 @@ process.stdout.write(JSON.stringify({geometry:panel.style.values, resize:viewpor ) assert result == {"geometry": {}, "resize": 0, "reveals": 0} + + +def test_focus_within_reveals_each_active_capture_field_without_duplicate_viewport_listeners(): + result = run_controller_scenario( + """ +controller.start(); +panel.scrollTop = 180; +document.activeElement = composer; +workspace.dispatch('focusin', {target:composer}); +document.activeElement = submit; +workspace.dispatch('focusin', {target:submit}); +viewport.dispatch('resize'); +flush(); +process.stdout.write(JSON.stringify({ + composerReveals:composer.reveals.length, + submitReveals:submit.reveals.length, + workspaceReveals:workspace.reveals.length, + resizeListeners:viewport.count('resize'), + scrollListeners:viewport.count('scroll'), + geometry:panel.style.values, +})); +""", + focus_within=True, + ) + + assert result == { + "composerReveals": 1, + "submitReveals": 2, + "workspaceReveals": 0, + "resizeListeners": 1, + "scrollListeners": 1, + "geometry": { + "--composer-viewport-top": "12px", + "--composer-viewport-height": "360px", + }, + } diff --git a/tests/test_plan_today.py b/tests/test_plan_today.py index a4a738c..91aeff6 100644 --- a/tests/test_plan_today.py +++ b/tests/test_plan_today.py @@ -292,6 +292,6 @@ async def test_plan_today_wires_cancel_back_and_success_through_overlay_history( def test_plan_today_controller_is_available_in_the_offline_shell(): source = SERVICE_WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/plan-today.js'" in source assert "BASE + 'static/plan-today-preview.js'" in source diff --git a/tests/test_service_worker.py b/tests/test_service_worker.py index d9958f8..e41be0e 100644 --- a/tests/test_service_worker.py +++ b/tests/test_service_worker.py @@ -122,7 +122,7 @@ async function dispatchNotificationClick(route) {{ def test_resumable_today_session_ships_in_a_new_offline_shell(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/my-work.js'" in source assert "BASE + 'static/dashboard.js'" in source assert "BASE + 'static/dashboard.css'" in source @@ -131,14 +131,14 @@ def test_resumable_today_session_ships_in_a_new_offline_shell(): def test_ownership_exit_runtime_rolls_the_offline_shell_cache(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/dashboard.js'" in source def test_offline_review_next_ships_today_completion_atomically(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/today-completion.js'" in source assert "BASE + 'static/dashboard.js'" in source @@ -146,7 +146,7 @@ def test_offline_review_next_ships_today_completion_atomically(): def test_duplicate_aware_capture_ships_in_a_new_offline_shell(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/create-issue-sheet.js'" in source assert "BASE + 'static/dashboard.js'" in source @@ -154,14 +154,14 @@ def test_duplicate_aware_capture_ships_in_a_new_offline_shell(): def test_exact_later_picker_ships_atomically_in_a_new_offline_shell(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/later-picker.js'" in source def test_navigation_deadline_ships_in_a_new_shell_cache(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/dashboard.css'" in source assert "BASE + 'static/dashboard.js'" in source assert "BASE + 'static/install-app.js'" in source @@ -170,21 +170,21 @@ def test_navigation_deadline_ships_in_a_new_shell_cache(): def test_today_convergence_ships_in_a_new_shell_cache(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/today-sync.js'" in source def test_mobile_search_viewport_ships_in_a_new_offline_shell(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/mobile-search-viewport.js'" in source def test_update_ownership_flow_ships_atomically_in_a_new_offline_shell(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/update-ownership.js'" in source @@ -385,7 +385,7 @@ def test_one_session_bound_csrf_proof_is_reused_for_a_background_drain(): def test_queue_today_ships_atomically_in_a_new_offline_shell(): source = WORKER.read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/queue-today.js'" in source diff --git a/tests/test_today_readiness.py b/tests/test_today_readiness.py index 13d56d6..f503995 100644 --- a/tests/test_today_readiness.py +++ b/tests/test_today_readiness.py @@ -221,7 +221,7 @@ async def test_today_blocker_opens_existing_preview_and_preserves_readiness_gate def test_readiness_runtime_is_available_in_offline_shell(): service_worker = SERVICE_WORKER.read_text() - assert "const CACHE = 'stackchain-dashboard-shell-v82';" in service_worker + assert "const CACHE = 'stackchain-dashboard-shell-v83';" in service_worker assert "BASE + 'static/today-readiness.js'" in service_worker diff --git a/tests/test_today_sync.py b/tests/test_today_sync.py index 432643c..c6ff213 100644 --- a/tests/test_today_sync.py +++ b/tests/test_today_sync.py @@ -127,7 +127,7 @@ sync.enqueueConfiguration(120, {{'issue:r:1:':60}}); def test_inflight_today_drain_ships_in_a_new_offline_shell(): source = (Path(__file__).parents[1] / "frontend" / "service-worker.js").read_text() - assert "stackchain-dashboard-shell-v82" in source + assert "stackchain-dashboard-shell-v83" in source assert "BASE + 'static/today-sync.js'" in source -- 2.43.0