tylerg/auth-yes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
auth-yes/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph1.md

2.4 KiB
Raw Blame History

TASK METADATA

  • Target Files: ui/components/SessionsPage.tsx, ui/components/AuthenticatedLayout.tsx, ui/components/layout/Navbar.tsx, ui/components/layout/MobileSidebar.tsx, ui/components/layout/UserMenu.tsx, ui/components/sessions/SessionTable.tsx, ui/components/sessions/SessionDeck.tsx, ui/components/sessions/SessionsScript.tsx, ui/ui_scripts.test.ts
  • Core Objective: Phase 1 (Sessions & Layout Extraction): Refactor AuthenticatedLayout.tsx (372 lines) and SessionsPage.tsx (754 lines) by extracting layout components into ui/components/layout/ and session table/script components into ui/components/sessions/.
  • Dependencies: tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md
  • Additional Important Notes: Strictly 100% pure Hono SSR JSX. Client scripts must be extracted as pure SSR JSX script components rendering <script dangerouslySetInnerHTML={{ __html: ... }}>. Must pass ui/ui_scripts.test.ts.

2. Architectural Considerations & Risks

  • Risks:
    • Breaking active session extension (extendSession), revocation (revoke-btn), or scope modal bindings if DOM element IDs or event listener selectors are altered.
    • Breaking mobile navigation sidebar drawer toggle (openMobileMenu, closeMobileMenu).
  • Mitigation:
    • Retain exact DOM IDs (delegateDrawer, tabDirectPass, tabWorkshopPass, sessionsMobileDeck, etc.) and CSS selectors.

3. Proposed Implementation

  1. Layout Decomposition (ui/components/layout/):

    • Navbar.tsx: Top navigation header, logo, brand link, and desktop navigation items.
    • MobileSidebar.tsx: Mobile slide-out drawer navigation with route links.
    • UserMenu.tsx: User profile trigger and popover dropdown.
    • AuthenticatedLayout.tsx: Refactor to compose the extracted layout components.

  2. Sessions Decomposition (ui/components/sessions/):

    • SessionTable.tsx: Desktop table rendering for active interactive and delegated sessions.
    • SessionDeck.tsx: Mobile responsive card deck view (< 768px).
    • SessionsScript.tsx: SSR JSX script component containing client-side event handlers and tab switcher.
    • SessionsPage.tsx: Assemble the subcomponents into the clean page shell.

  3. Quality Gates & Validation:

    • Run deno fmt, deno task lint, deno task check.
    • Run deno test --allow-all (specifically ui/ui_scripts.test.ts).