78 lines
3.5 KiB
Markdown
78 lines
3.5 KiB
Markdown
# 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.
|