auth-yes/tasks/new/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md

TASK METADATA

• Target Files:
  • ui/components/SessionsPage.tsx
  • ui/ui_scripts.test.ts
• Core Objective: Redesign the Sessions management page header and drawer to eliminate dual competing top buttons, restoring the clean single [+ Delegate Session] header action, and unifying both pass creation workflows (1:1 Direct Pass vs. Multi-Claim Workshop Pass) into clean internal drawer tabs.
• Dependencies: None.
• Additional Important Notes: Must maintain 100% compliance with zero-framework SSR JSX standards and pass ui/ui_scripts.test.ts without client-side syntax errors.

---

Architectural Considerations & Risks

• Risks: The primary risk involves introducing JavaScript syntax errors when consolidating the drawer forms and adding the tab-switching logic. Since this is an SSR JSX environment without a framework like React, all DOM manipulation and state management (like toggling tabs) rely on raw inline or embedded <script> blocks. A syntax error here could break the page interactions and fail the ui/ui_scripts.test.ts gate.
• Alternatives: We could keep the forms completely separate, but this violates the core objective of eliminating cognitive clutter and unified navigation. The proposed vanilla JavaScript tab toggle is the most native and compliant approach for this specific architectural boundary.
• UX Consistency: The Event Cockpit Deck must remain rendered above the Active Sessions table to ensure real-time visibility for workshop hosts.

Proposed Implementation

1. Header Consolidation

• In ui/components/SessionsPage.tsx, locate the top header section.
• Remove the [🎟️ + Create Workshop Pass] button completely.
• Retain only the single, primary [🔑 + Delegate Session] button (and ensure it triggers openDelegateDrawer()).

2. Drawer Consolidation (#delegateDrawer)

• Remove the entire #eventDrawer DOM node.
• Inside #delegateDrawer, introduce a segmented flexbox tab selector at the top of the form area.
• Add the following styling for the tab container: display: flex; background: var(--surface-muted); padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); gap: 4px;
• Add styling for the tab buttons: flex: 1; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); border: none; font-weight: 600; cursor: pointer; transition: all 0.15s; (Use an .active class with background: var(--surface-card); color: var(--primary); box-shadow: var(--shadow-xs);).
• Wrap the existing 1:1 Direct Pass form fields inside a <div id="tabDirectPass">.
• Move the fields from the deleted #eventDrawer into a new <div id="tabWorkshopPass" style="display: none;"> inside #delegateDrawer.

3. JavaScript Tab-Switching Logic

• Add vanilla JavaScript functions to the embedded <script> block in SessionsPage.tsx to handle tab switching.
• Implement a function (e.g., switchDelegateTab(tabId)) that:
  • Toggles display: block and display: none between #tabDirectPass and #tabWorkshopPass.
  • Updates the active state styling on the corresponding tab buttons.

4. Code Cleanup

• Remove the openEventDrawer() and closeEventDrawer() functions from the <script> block.
• Ensure closeDelegateDrawer() correctly resets the forms or hides the drawer.

5. Quality Gates

• Run deno fmt and deno task lint to ensure code style compliance.
• Run deno task test to ensure ui/ui_scripts.test.ts passes, verifying there are no syntax errors in the newly consolidated <script> block.