55 lines
2.4 KiB
Markdown
55 lines
2.4 KiB
Markdown
# 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`).
|