Merge pull request #47 from mrteye/feat-ui-sessions-layout-drawer-machine-plan-6316789782106551879

feat(ui): generate task plan for sessions layout and drawer machine

tasks/new/2026-0826.01.jul.feat.ui.sessions-layout-drawer-machine-2156.md

@@ -0,0 +1,85 @@
+# 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`.