From ad5cc148584b420611e1328ae702785829cb6d51 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 18:19:28 +0000
Subject: [PATCH] chore(tasks): add UI redesign task for sessions drawer

Create a system analysis task plan in `tasks/new/` detailing how to redesign
the Sessions management page's header and unified drawer, strictly adhering to
the Auth-Yes SSR JSX standards and vanilla JS implementations.

Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
---
 ....story.ui.redesign-sessions-drawer-1812.md | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 tasks/new/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md

diff --git a/tasks/new/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md b/tasks/new/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md
new file mode 100644
index 0000000..22673e9
--- /dev/null
+++ b/tasks/new/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md
@@ -0,0 +1,48 @@
+# 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.