feat(github): improve mobile dashboard parity (#3614)
This commit is contained in:
José Almeida
@@ -49,6 +49,7 @@ outcomes that expose those contracts.
|
||||
- [GitHub task pull request sync coordination](requirements/github-task-pr-sync-coordination.md)
|
||||
- [GitHub PR discovery health](requirements/github-pr-discovery-health.md)
|
||||
- [GitHub workflow attention](requirements/github-workflow-attention.md)
|
||||
- [GitHub dashboard mobile](requirements/github-dashboard-mobile.md)
|
||||
- [GitLab Integration](requirements/gitlab-integration.md)
|
||||
- [GitLab MR Status Chip](requirements/gitlab-mr-status-chip.md)
|
||||
- [GitLab MR Badge on the Sidebar and Tasks-List Rows](requirements/gitlab-mr-task-list-badges.md)
|
||||
@@ -84,6 +85,7 @@ outcomes that expose those contracts.
|
||||
- [GitHub task pull request sync coordination](system-design/github-task-pr-sync-coordination.md)
|
||||
- [GitHub PR discovery health](system-design/github-pr-discovery-health.md)
|
||||
- [GitHub workflow attention](system-design/github-workflow-attention.md)
|
||||
- [GitHub dashboard mobile](system-design/github-dashboard-mobile.md)
|
||||
- [Pull request link copy actions](system-design/pr-link-copy-actions.md)
|
||||
- [GitLab Integration System Design Part 1](system-design/gitlab-integration-01.md)
|
||||
- [GitLab Integration System Design Part 2](system-design/gitlab-integration-02.md)
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
status: active
|
||||
system: integrations
|
||||
created: 2026-09-11
|
||||
owners:
|
||||
- Kandev
|
||||
---
|
||||
# GitHub dashboard mobile requirements
|
||||
|
||||
## Overview
|
||||
|
||||
Phone users need discoverable GitHub queries and usable result actions. Integrations owns provider queries, their scope, and the dashboard outcomes. Shared task-view navigation is independently owned by [UI](../../ui/requirements/mobile-task-view-access.md).
|
||||
|
||||
## Requirements
|
||||
|
||||
### REQ-INTEGRATIONS-GITHUB-MOBILE-001: GitHub dashboard mobile parity
|
||||
|
||||
**Intent:** Preserve desktop dashboard capabilities through focused phone interactions.
|
||||
|
||||
#### Acceptance criteria
|
||||
|
||||
- **AC-INTEGRATIONS-GITHUB-MOBILE-001.1:** Saved queries shall distinguish loading, failure with retry, and an empty collection. A failed save shall retain the entered name and repository and permit retry; successful persistence shall close the form. Workspace changes shall not apply stale outcomes to the new workspace.
|
||||
- **AC-INTEGRATIONS-GITHUB-MOBILE-001.2:** Below 768px, a labeled current-view control shall open an inset bottom drawer. The trigger shall stay on one line without compressing result count or refresh metadata; its full name shall remain accessible. A separate status row shall label the result count and group updated time with Refresh below the query input. Changing PR/issue kind shall keep the drawer open; selecting a query or Done shall close it. Save shall remain reachable with long collections. Existing per-kind defaults, delete confirmation, and default-action isolation shall continue to work.
|
||||
- **AC-INTEGRATIONS-GITHUB-MOBILE-001.3:** Phone and coarse-pointer result actions shall have at least 44px hit targets. Long titles and repository names shall remain readable without horizontal overflow. Linked tasks shall expose their workflow step without requiring hover while retaining direct task navigation.
|
||||
- **AC-INTEGRATIONS-GITHUB-MOBILE-001.4:** Phone pagination shall expose previous, next, current/total page, and direct page selection through an in-app bottom drawer, not an operating-system select menu. Opening the chooser shall reveal and mark the current page. Selecting another page shall navigate once and dismiss; selecting the current page shall dismiss without refetching. Existing search limits and filter-triggered page resets shall remain unchanged, with no horizontal overflow.
|
||||
- **AC-INTEGRATIONS-GITHUB-MOBILE-001.5:** Drawer and page controls shall support dismissal, focus return, internal scrolling, safe-area clearance, and translated labels. Desktop query state and preferences shall remain unchanged by phone composition.
|
||||
|
||||
## Compatibility
|
||||
|
||||
The [saved-query defaults contract](../../ui/requirements/github-saved-query-defaults.md) remains authoritative for default selection and scope; the drawer replaces only that document's historical filter-sheet presentation.
|
||||
|
||||
## Out of scope
|
||||
|
||||
New query storage, renamed/edited saved queries, changed authentication, direct dashboard merge/review actions, and shared task-view data semantics.
|
||||
|
||||
## Implementation plans
|
||||
|
||||
- [GitHub mobile parity](../../../plans/github-mobile-parity/plan.md)
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
status: current
|
||||
system: integrations
|
||||
requirements:
|
||||
- REQ-INTEGRATIONS-GITHUB-MOBILE-001
|
||||
---
|
||||
# GitHub dashboard mobile design
|
||||
|
||||
## Boundaries and mapping
|
||||
|
||||
`REQ-INTEGRATIONS-GITHUB-MOBILE-001` maps to query recovery (AC .1), picker composition (AC .2/.5), result rows (AC .3), and pagination (AC .4). The existing GitHub workspace settings and portable user settings remain the persistence boundary. [Shared task-view access](../../ui/system-design/mobile-task-view-access.md) owns the separate app-navigation entry.
|
||||
|
||||
## Query recovery
|
||||
|
||||
`useSavedPresets` exposes load status and retry along with existing mutations. Preserve generation/cancellation guards and pending mutation queues. Unavailable workspace data must not be written as an empty collection. Portable snapshot hydration must not overwrite a newer local mutation. Retry the settings read explicitly; query-result Refresh remains a different action.
|
||||
|
||||
Associate workspace data and load status with the workspace ID so the first render after navigation cannot expose the previous workspace's snapshot or enable writes against it. Cached portable queries remain available alongside loading/error feedback on both desktop and phone.
|
||||
|
||||
`useSavedPresetActions.onConfirmSave` reports whether persistence succeeded in the originating scope. `SavePresetDialog` awaits the outcome, prevents duplicate submission, retains values on failure, and closes only on success. Scope changes discard the old form. Existing error toasts remain localized.
|
||||
|
||||
A save completion must belong to the same navigation generation, including A-to-B-to-A navigation. Keep the Save action's accessible name stable while pending and announce progress in one localized status region.
|
||||
|
||||
## Picker composition
|
||||
|
||||
`GitHubPageClient` keeps one shared query state; `useResponsiveBreakpoint` selects phone presentation below 768px. Extract a domain-owned mobile Views drawer, keeping `PresetsScopeBar` for desktop. The page toolbar supplies the labeled current-view opener. Kind selection applies existing defaults while leaving the drawer open. Final query selection closes it. Default/delete remain separate row actions.
|
||||
|
||||
Reuse the geometry of `components/kanban/mobile-menu-sheet.tsx`: inset bottom Drawer, fixed header/kind controls, one min-h-0 body scroller, dynamic maximum height, and a safe-area footer containing Save. Restore focus to the actual opener except when moving into Save; do not stack open overlays.
|
||||
|
||||
Open the save form after the Views drawer or desktop saved-query menu completes its close/focus callback. Cancel pending opening work on unmount and retain the mounted initiating trigger for focus return when the form closes.
|
||||
|
||||
The mobile Views trigger is a full-width, 44px-high, single-line button. Truncate its visible current-view label while retaining the full accessible name and the complete name inside the drawer. `IntegrationListToolbar` separates mobile secondary information into a row after the query input: Results plus a tabular count on the left, updated time and a touch-sized Refresh on the right. The timestamp can truncate within the remaining width. Desktop retains its inline title/count and refresh group. This shared toolbar composition also applies to GitLab and host-plugin consumers without changing their query or pagination contracts.
|
||||
|
||||
The result-count translation owns pluralization and word order; its numeric span retains tabular styling. Loading uses separate localized copy, without a stale count.
|
||||
|
||||
## Result rows
|
||||
|
||||
Use `ChangeRequestRow` and `IntegrationStartTaskMenu` for both PRs and issues. Phone titles/repository metadata wrap; independent links and task controls retain their semantics. Shared linked-task indicators use conditional touch sizing and inline step context on touch devices; desktop retains compact tooltip presentation.
|
||||
|
||||
## Pagination
|
||||
|
||||
Keep the numbered desktop footer. Phone pagination uses Previous, a page selector labeled with current/total page, and Next. `MobileResultsPagination` owns a controlled domain-local `Drawer` using the shared UI primitives. Its header and Done action stay fixed above a single scroll body capped at 80dvh with bottom safe-area clearance. Opening focuses and scrolls to the selected page; `aria-current="page"` and a check mark identify it. Each 44px page button dismisses the drawer and only calls `onPageChange` for a different page. Escape, dismissal, and selection return focus to the trigger. Preserve the 1000-result ceiling and the existing `useGitHubSearch` page reset. The result list owns its separate scrolling and the footer clears bottom safe areas.
|
||||
|
||||
If a refreshed total no longer includes the current page, opening the chooser uses the drawer's default focus fallback (Done) instead of suppressing focus without a target. Choosing an available page still navigates exactly once.
|
||||
|
||||
## Verification
|
||||
|
||||
Use hook tests for deferred load/save errors, retries, successful empty collections, and stale workspace responses. Mobile Playwright exercises drawer hierarchy, save failure recovery, long names, task actions, many-page navigation, focus, and geometry. Desktop tests retain saved-query/default and result-action coverage.
|
||||
@@ -19,6 +19,8 @@ runtime, and workspace lifecycle/state ownership.
|
||||
|
||||
### Requirements
|
||||
|
||||
- [Mobile task-view access](requirements/mobile-task-view-access.md)
|
||||
|
||||
- [Control sizing](requirements/control-sizing.md)
|
||||
- [ACP model summary](requirements/acp-model-configuration-summary.md)
|
||||
- [ACP Shell Command Output](requirements/acp-shell-command-output.md)
|
||||
@@ -155,6 +157,7 @@ runtime, and workspace lifecycle/state ownership.
|
||||
|
||||
### Design
|
||||
|
||||
- [Mobile task-view access](system-design/mobile-task-view-access.md)
|
||||
- [Agent launch prompt composer](system-design/agent-launch-prompt-composer.md)
|
||||
- [Control sizing](system-design/control-sizing.md)
|
||||
- [Adaptive Kanban](system-design/adaptive-kanban.md)
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
status: active
|
||||
system: ui
|
||||
created: 2026-09-11
|
||||
owners:
|
||||
- Kandev
|
||||
---
|
||||
# Mobile task-view access requirements
|
||||
|
||||
## Overview
|
||||
|
||||
The shared phone navigation should expose the task-sidebar views available from desktop page chrome. UI owns this reusable navigation contract; task filtering and persistence retain their existing owners.
|
||||
|
||||
## Requirements
|
||||
|
||||
### REQ-UI-MOBILE-TASK-VIEWS-001: Shared phone task-view access
|
||||
|
||||
**Intent:** Reach existing task views without first opening a task.
|
||||
|
||||
#### Acceptance criteria
|
||||
|
||||
- **AC-UI-MOBILE-TASK-VIEWS-001.1:** Shared phone navigation in a Kanban workspace shall expose Task views. Selecting it shall close navigation and open the existing mobile task-view surface with its saved views and editor. Task dialogs opened from that surface shall retain their drafts across phone orientation changes.
|
||||
- **AC-UI-MOBILE-TASK-VIEWS-001.2:** Choosing a task shall navigate to that task and preserve browser Back to the originating page. Dismissal shall return focus to a visible navigation opener. GitHub queries, Threads views, and sidebar task views shall remain separate collections.
|
||||
|
||||
## Out of scope
|
||||
|
||||
Office navigation changes, new task-view storage, and a global navigation redesign.
|
||||
|
||||
## Implementation plans
|
||||
|
||||
- [GitHub mobile parity](../../../plans/github-mobile-parity/plan.md)
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
status: current
|
||||
system: ui
|
||||
requirements:
|
||||
- REQ-UI-MOBILE-TASK-VIEWS-001
|
||||
---
|
||||
# Mobile task-view access design
|
||||
|
||||
## Boundary and mapping
|
||||
|
||||
`REQ-UI-MOBILE-TASK-VIEWS-001` maps to the shared menu entry and overlay handoff described below. Existing sidebar view state and `SessionTaskSwitcherSheet` own filtering and task actions. This design does not merge those views with GitHub or Threads saved queries.
|
||||
|
||||
## Components and flow
|
||||
|
||||
Extend `AppNavSections` and its hoisted `useAppNavDialogs` controls with a localized Task views action for phone Kanban workspaces. Close the navigation surface before opening the task drawer. Mount the existing `SessionTaskSwitcherSheet` lazily in the hoisted dialogs, with the current workspace and workflow context and presentation=drawer. Do not mount it before the first request. Once requested, retain its controller until navigation or workspace changes so closing the drawer can hand off to task creation, editing, and confirmation dialogs without losing their state.
|
||||
|
||||
The existing drawer's `SidebarFilterBar` provides saved view selection/editing. Task navigation from a non-task route pushes the task route so Back returns to the origin; in-workbench task switching retains its established navigation policy. Dismissal restores a visible app-navigation trigger. Do not add Office task controls to this Kanban surface.
|
||||
|
||||
Only the navigation entry is gated by phone width. A controller already requested by the user remains mounted across breakpoints, so turning the phone sideways cannot discard a draft in a task dialog.
|
||||
|
||||
## Verification
|
||||
|
||||
A phone E2E starts at /github, opens app navigation, selects Task views, chooses a saved sidebar view, opens a matching task, and returns with Back. Cover dismissal and a workspace without tasks. Existing task-workbench switching tests protect its navigation policy.
|
||||
Reference in New Issue
Block a user