46 lines
2.0 KiB
Markdown
46 lines
2.0 KiB
Markdown
# TASK METADATA
|
|
|
|
- **Target Files:** `ui/components/SessionsPage.tsx`,
|
|
`ui/components/sessions/EventCockpitDeck.tsx`,
|
|
`ui/components/sessions/DirectPassDrawer.tsx`,
|
|
`ui/components/sessions/WorkshopDrawer.tsx`,
|
|
`ui/components/sessions/ScopeModal.tsx`, `ui/ui_scripts.test.ts`
|
|
- **Core Objective:** Phase 1 (UI Sessions Decomposition): Refactor the
|
|
monolithic `SessionsPage.tsx` (~1,500 lines) by extracting sub-sections into
|
|
clean, dedicated subcomponents under `ui/components/sessions/` while
|
|
preserving zero-framework SSR JSX purity and client script integrity.
|
|
- **Dependencies:**
|
|
`tasks/new/2026-0825.01.jul.story.arch.monolith-decomposition-roadmap-1845.md`
|
|
- **Additional Important Notes:** Must pass `ui/ui_scripts.test.ts` with zero
|
|
client-side syntax errors.
|
|
|
|
---
|
|
|
|
### 2. Architectural Considerations & Risks
|
|
|
|
- **Risks:**
|
|
- Client-side script breakage or broken DOM element bindings if IDs/forms are
|
|
altered during component extraction.
|
|
- HTML5 form validation collisions if form elements are improperly nested.
|
|
- **Alternatives:**
|
|
- Extracting to static external JS files; deferred to maintain hermetic SSR
|
|
script validation within `ui_scripts.test.ts`.
|
|
|
|
### 3. Proposed Implementation
|
|
|
|
1. **Create Subcomponents (`ui/components/sessions/`):**
|
|
- `EventCockpitDeck.tsx`: The Event Cockpit banner and live active event
|
|
cards.
|
|
- `DirectPassDrawer.tsx`: The 1:1 Direct Pass delegation form, presets, and
|
|
`#handoffModal`.
|
|
- `WorkshopDrawer.tsx`: The Multi-Claim Workshop Pass form, seat presets,
|
|
vanity slug/PIN inputs, and `#eventHandoffModal`.
|
|
- `ScopeModal.tsx`: The custom scope editor modal dialog.
|
|
2. **Refactor `ui/components/SessionsPage.tsx`:**
|
|
- Import and assemble the subcomponents cleanly into the main page shell.
|
|
- Retain the single header button (`[+ Delegate Session]`), segmented flexbox
|
|
tab switcher, and Active Sessions table.
|
|
3. **Quality Gates & Validation:**
|
|
- Run `deno fmt`, `deno task lint`, `deno task check`.
|
|
- Run `deno test --allow-all` (specifically `ui/ui_scripts.test.ts`).
|