78 lines
3.0 KiB
Markdown
78 lines
3.0 KiB
Markdown
# TASK METADATA
|
|
|
|
- **Target Files:** `ui/components/AppLaunchpadPage.tsx`,
|
|
`ui/components/SessionsPage.tsx`, `ui/components/PasskeysPage.tsx`
|
|
- **Core Objective:** Convert Launchpad, Sessions, and Passkeys views from rigid
|
|
desktop tables into responsive, touch-friendly card decks with device icons,
|
|
AAGUID brand chips, and 1-tap revocation actions.
|
|
- **Dependencies:**
|
|
`tasks/new/2026-0824.04.gem.feat.ui-shell.design-tokens-and-adaptive-nav-2215.md`
|
|
- **Additional Important Notes:** Must ensure single-tap revocation and
|
|
add-passkey actions work flawlessly on mobile touchscreens without accidental
|
|
mis-clicks.
|
|
|
|
---
|
|
|
|
## 1. TASK METADATA
|
|
|
|
The header block specifies target user hub templates, core objective,
|
|
dependencies, and constraints.
|
|
|
|
## 2. Architectural Considerations & Risks
|
|
|
|
### Risks
|
|
|
|
- **Accidental Session Revocation:** Touchscreens have a higher risk of
|
|
accidental taps on destructive actions (e.g. revoking the active session).
|
|
- _Mitigation:_ Highlight the "Current Device" with an emerald badge to
|
|
distinguish it from remote sessions, and provide confirmation feedback on
|
|
single-tap revocation.
|
|
- **Information Density vs Screen Space:** Displaying raw UUIDs, AAGUIDs, and
|
|
long User-Agent strings clutters mobile viewports.
|
|
- _Mitigation:_ Truncate IDs to 8 characters with a 1-tap copy action, and
|
|
display friendly device labels (📱 Phone, 💻 Laptop) and known AAGUID vendor
|
|
names (Google Password Manager, Apple Keychain, YubiKey).
|
|
|
|
### Alternatives
|
|
|
|
- **Responsive Table Overflow vs Card Decks:** Horizontal scrolling tables on
|
|
mobile force uncomfortable two-axis panning. Adaptive card stacks provide a
|
|
native, scannable layout on narrow screens while maintaining full metadata
|
|
clarity.
|
|
|
|
## 3. Proposed Implementation
|
|
|
|
### Phase 1: Application Launchpad Card Grid
|
|
|
|
1. In `ui/components/AppLaunchpadPage.tsx`:
|
|
- Structure app items into modern elevated cards with app logo/glyph,
|
|
application name, domain link, and role badge (`Admin` / `Member` /
|
|
`Viewer`).
|
|
- Add full-width 48px "Launch App ↗" button on mobile, switching to fluid
|
|
grid tiles on desktop.
|
|
|
|
### Phase 2: Adaptive Sessions Cards
|
|
|
|
1. In `ui/components/SessionsPage.tsx`:
|
|
- Replace table rows on mobile with structured cards:
|
|
- Device type icon and IP badge.
|
|
- "Current Device" badge for active session.
|
|
- Formatted relative timestamp ("Active now", "Created 2 hours ago").
|
|
- Single-tap "Revoke Session" button.
|
|
- Prominent top action: "Revoke All Other Sessions".
|
|
|
|
### Phase 3: Adaptive Passkeys Manager
|
|
|
|
1. In `ui/components/PasskeysPage.tsx`:
|
|
- Render passkey cards with authenticator vendor badge (via AAGUID lookup).
|
|
- Display passkey nickname, truncated credential ID, and creation date.
|
|
- Large "Add Another Passkey" hero action button for easy multi-device
|
|
enrollment.
|
|
- Single-tap "Remove Passkey" button with confirmation.
|
|
|
|
### Phase 4: Verification & Quality Gates
|
|
|
|
1. Run `deno fmt ui/**/*.tsx`.
|
|
2. Run `deno task lint` and `deno task check`.
|
|
3. Run `deno task test` to ensure all dashboard rendering tests pass.
|