5c1be5657e
Generates a planning task file in `tasks/new/` detailing the architecture, requirements, and steps for Phase 3 of the Event & Session Overhaul, specifically addressing the page hierarchy, the 2-state drawer machine, and layout bugs. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
86 lines
4.2 KiB
Markdown
86 lines
4.2 KiB
Markdown
# TASK METADATA
|
|
|
|
- **Target Files:** `ui/components/SessionsPage.tsx`,
|
|
`ui/components/sessions/WorkshopDrawer.tsx`,
|
|
`ui/components/sessions/SessionsScript.tsx`
|
|
- **Core Objective:** Overhaul visual hierarchy of `/dashboard/sessions` and
|
|
enforce strict 2-state mutually exclusive rendering in `WorkshopDrawer.tsx`.
|
|
- **Dependencies:** None.
|
|
- **Additional Important Notes:** Must use pure vanilla JavaScript for DOM
|
|
manipulation (no React/framework state). Ensure copy pills trigger accessible
|
|
notifications (aria-live/toast). Fix double emoji bug in JS. Ensure mobile
|
|
title wrapping. All changes must pass `ui/ui_scripts.test.ts`.
|
|
|
|
---
|
|
|
|
## Architectural Considerations & Risks
|
|
|
|
- **Risks:**
|
|
- **DOM Manipulation Regression:** Because this UI operates strictly on
|
|
vanilla JavaScript, changing the layout and grouping DOM elements within new
|
|
containers (like `#eventCreateState` and `#eventHandoffState`) risks
|
|
breaking existing DOM ID bindings in `SessionsScript.tsx` if IDs are changed
|
|
or misplaced. We must strictly preserve all existing DOM IDs.
|
|
- **Test Compatibility:** The client-side scripts are tested via hermetic
|
|
`new Function()` execution in `ui/ui_scripts.test.ts` (`validateJsSyntax`).
|
|
The script modifications must remain structurally valid and strictly avoid
|
|
any unsupported syntax or external framework dependencies.
|
|
- **Mobile Layout Breakage:** When fixing the long titles to wrap correctly,
|
|
we must ensure CSS properties like `word-break: break-word` and
|
|
`overflow-wrap: break-word` don't inadvertently stretch flex containers
|
|
horizontally on small screens.
|
|
|
|
- **Alternatives:**
|
|
- The proposed container-based 2-state machine approach for
|
|
`WorkshopDrawer.tsx` is native and robust. It's the most appropriate
|
|
solution given our constraints (no client-side frameworks). Using a
|
|
class-based toggle could also work, but explicit element display
|
|
manipulation is clearer for the specific 2-state requirement.
|
|
|
|
## Proposed Implementation
|
|
|
|
### 1. Page Hierarchy Update (`ui/components/SessionsPage.tsx`)
|
|
|
|
- Relocate the main header block (containing `<h1>Active Sessions & Passes</h1>`
|
|
and the `[ 🔑 Delegate Session ]` button) to be the uppermost visible element
|
|
below the `#status-banner`.
|
|
- Move the `EventCockpitDeck` component to render below the new header block.
|
|
- Keep the `SessionTable` and `SessionDeck` at the bottom.
|
|
|
|
### 2. WorkshopDrawer 2-State Machine (`ui/components/sessions/WorkshopDrawer.tsx`)
|
|
|
|
- Wrap the initial creation form (`#eventForm`), including inputs, submit
|
|
button, and cancel button, into a new container `div` with
|
|
`id="eventCreateState"`. Default this container to `display: block`.
|
|
- Rename or wrap the `#eventHandoffModal` content into a new container `div`
|
|
with `id="eventHandoffState"`. Default this container to `display: none`.
|
|
- In `#eventHandoffState`, ensure it contains the 3 cards (PIN + /join, Direct
|
|
Link, CLI 1-Liner) and update the final button to be a single "Dismiss"
|
|
button.
|
|
- Ensure `createdEventTitle` has `overflow-wrap: break-word` and
|
|
`word-break: break-word` along with a max-width to allow long titles to wrap
|
|
cleanly on mobile screens.
|
|
|
|
### 3. JavaScript Logic Update (`ui/components/sessions/SessionsScript.tsx`)
|
|
|
|
- **State Toggling:** Update `handleCreateEvent` so that upon successful
|
|
creation, it sets
|
|
`document.getElementById('eventCreateState').style.display = 'none'` and
|
|
`document.getElementById('eventHandoffState').style.display = 'block'`.
|
|
- **Drawer Reset:** Ensure when the delegate drawer is closed (via
|
|
`closeDelegateDrawer` or the new Dismiss button), the states are reset:
|
|
`#eventCreateState` to block, `#eventHandoffState` to none.
|
|
- **Emoji Fix:** Remove the hardcoded `'🎟️ '` prefix from the event title
|
|
injection line:
|
|
`document.getElementById('createdEventTitle').textContent = ev.name + ' Live!';`
|
|
- **Accessibility / Toast:** Ensure `copyEventHandoff` function already triggers
|
|
`showNotice` (which acts as a toast). Verify ARIA roles for the banner if
|
|
necessary, or just rely on the existing `showNotice` function which is already
|
|
in place.
|
|
|
|
### 4. Quality Gates
|
|
|
|
- Run Deno tests: `deno test --allow-all` (specifically validating
|
|
`ui/ui_scripts.test.ts`).
|
|
- Run code formatting: `deno fmt`.
|