97 lines
7.4 KiB
Markdown
97 lines
7.4 KiB
Markdown
# TASK METADATA
|
||
|
||
- **Target Files:** `server/routes/sessions.ts`, `server/routes/events.ts`, `ui/components/SessionsPage.tsx`, `ui/components/sessions/EventCockpitDeck.tsx`, `ui/components/sessions/EventAttendeesDrawer.tsx` (refactored/renamed to `EventGuestsDrawer.tsx`), `ui/components/sessions/SessionDeck.tsx`, `ui/components/sessions/SessionTable.tsx`, `ui/components/sessions/SessionsScript.tsx`, `server/tests/events.test.ts`, `server/tests/scopes.test.ts`, `ui/ui_scripts.test.ts`
|
||
- **Core Objective:** Implement Phase 5 Overhaul: Fix backend attendee session revocation permission checks, build a true fixed slide-over Guest Drawer, standardize dynamic countdown pills, add multi-event compact density toggle, and clean up page/session visual hierarchy.
|
||
- **Dependencies:** None.
|
||
- **Additional Important Notes:** Must remain 100% pure React-free Hono SSR JSX. All client interactions in `SessionsScript.tsx` must use native vanilla JavaScript DOM APIs.
|
||
|
||
---
|
||
|
||
## 2. Architectural Considerations & Risks
|
||
|
||
- **Risks:**
|
||
- **Zero-Trust Revocation Leakage:** When allowing event creators to delete/revoke attendee sessions via `DELETE /api/sessions/:id`, ensure the query strictly verifies that the session belongs to a guest user claimed under an event pass created by `auth.userId` (or that caller is global admin). Never allow arbitrary session deletions across different event creators.
|
||
- **DOM Stacking & Focus Trapping:** A fixed slide-over drawer must properly layer (`z-index: 1050`) over the background page and support backdrop dismissal and `Escape` key capture without disrupting background table states.
|
||
- **Mobile Density Regressions:** Ensure the mobile slide-up bottom sheet does not block necessary viewport scrolling or clip action buttons on small mobile viewports (320px–375px).
|
||
|
||
- **Alternatives:**
|
||
- *In-Page Expandable Row vs. Fixed Slide-Over Panel:* In-page expandable cards cause massive vertical jumping and layout disruption when 5–10 events are active. A dedicated fixed slide-over drawer (right panel on desktop, bottom sheet on mobile) provides isolated context, independent scrolling, and a pinned summary header without disturbing the background dashboard.
|
||
|
||
---
|
||
|
||
## 3. Proposed Implementation
|
||
|
||
### Phase 1: Backend Revocation Permission Fix (`server/routes/sessions.ts`)
|
||
|
||
1. **Authorize Event Creators in `DELETE /api/sessions/:id`:**
|
||
- Update `DELETE /api/sessions/:id` to check whether the target session is owned by `auth.userId`, or if caller is `isGlobalAdmin`, OR if the session belongs to a guest user of an event pass created by `auth.userId`:
|
||
```sql
|
||
SELECT s.id
|
||
FROM sessions s
|
||
JOIN users u ON s.user_id = u.id
|
||
WHERE s.id = ${targetSessionId}
|
||
AND (
|
||
s.user_id = ${auth.userId}
|
||
OR ${isAdmin}
|
||
OR EXISTS (
|
||
SELECT 1 FROM event_passes ep
|
||
WHERE ep.created_by = ${auth.userId}
|
||
AND u.username LIKE 'guest_' || ep.slug || '_%'
|
||
)
|
||
)
|
||
```
|
||
- If found, delete the session from Valkey cache (`valkey.del`) and PostgreSQL (`DELETE FROM sessions WHERE id = ${targetSessionId}`), logging the audit event.
|
||
- Return `{ success: true }`.
|
||
|
||
### Phase 2: Page Hierarchy & Section Titles (`ui/components/SessionsPage.tsx`)
|
||
|
||
1. **Page Title:**
|
||
- Update top `<h1>` in `SessionsPage.tsx` from `Active Sessions & Passes` to **`Sessions & Passes`**.
|
||
2. **Missing Section Headings:**
|
||
- Section 1: `<h2>Event Passes</h2>` (with compact density toggle).
|
||
- Section 2: Add a prominent `<h2>Sessions</h2>` heading directly above `SessionTable` and `SessionDeck` with subtitle *"Direct device logins, passkey authentications, and delegated agent tokens."*
|
||
|
||
### Phase 3: True Fixed Slide-Over Panel (`EventGuestsDrawer.tsx` & `SessionsScript.tsx`)
|
||
|
||
1. **Drawer Component Overhaul (`ui/components/sessions/EventAttendeesDrawer.tsx` -> `EventGuestsDrawer.tsx`):**
|
||
- Refactor the component from an in-line `<div class="card">` into a fixed slide-over overlay:
|
||
- **Desktop:** `position: fixed; top: 0; right: 0; width: 420px; height: 100vh; background: var(--surface-card); box-shadow: var(--shadow-lg); z-index: 1050; display: flex; flex-direction: column;`
|
||
- **Mobile:** Full-width slide-up bottom sheet (`width: 100vw; height: 80vh; bottom: 0; right: 0; border-radius: 16px 16px 0 0;`).
|
||
- **Backdrop:** Dimmed backdrop overlay (`position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1040;`) closing on click.
|
||
2. **Pinned Contextual Header:**
|
||
- **Title:** `<h2 id="guestDrawerTitle" style="margin: 0; font-size: 1.25rem;">[Event Name] Guests</h2>`
|
||
- **Subheader Context Bar:** `<div id="guestDrawerContext" style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem;">Event Pass · [N] / [Max] Claimed Seats · ⏳ [Xh Ym left] · (Expires [Time])</div>`
|
||
- **Close Button:** Accessible close button in top right.
|
||
3. **Streamlined Roster Rows (`SessionsScript.tsx`):**
|
||
- Discard repeated static expiration timestamps from individual rows.
|
||
- Render clean, distinct cards for each guest seat:
|
||
- **Left:** `Seat #[N]` (`guest_<slug>_<N>`) + relative join timestamp (`Joined 5m ago`).
|
||
- **Status Badge:** `🟢 Active` / `⏸️ Paused`.
|
||
- **Right Actions:** Compact `[ ⏸️ Pause ]` / `[ ▶️ Resume ]` toggle and `[ 🗑️ Revoke ]` trigger.
|
||
4. **Standardize Terminology:**
|
||
- Use **`Event Guests`** and **`Claimed Seats`** across all drawer titles, buttons (`[ 👥 Manage Guests (N) ]`), and notices.
|
||
|
||
### Phase 4: Dynamic Countdown Standardization & Density Polish (`EventCockpitDeck.tsx`, `SessionDeck.tsx`, `SessionTable.tsx`)
|
||
|
||
1. **Standardized Countdown Pill:**
|
||
- Create a reusable countdown formatter rendering: `⏳ 2h 45m left · (Expires 10:39 PM)` (or `⏳ 29d left · (Expires Sep 25)`).
|
||
- Dynamic status coloring: **Green** (healthy) -> **Amber** (<1h remaining) -> **Red** (expired).
|
||
- Apply consistently across Event Pass Cards and the Sessions Table/Deck.
|
||
2. **Multi-Event Compact Density Toggle (`EventCockpitDeck.tsx`):**
|
||
- Add a `[ 🗂️ Grid ]` / `[ 📋 Compact ]` density toggle at the top of the `Event Passes` section.
|
||
- In **Compact Mode**, collapse each event card into a sleek 1-row summary strip (`Title · 🟢 Active · ⏳ 2h 45m left · 12/50 Seats · PIN: 749-123 · [ 👥 Guests (12) ] · [ ▸ Details ]`), fitting 10+ active events in a single screen.
|
||
3. **Mobile Session Card Optimization (`SessionDeck.tsx`):**
|
||
- Remove the dedicated full-width bottom row on remote session cards.
|
||
- Move `[ 🗑️ Revoke ]` inline into the top card header row next to the status badge as a compact button (`btn-outline-danger`), reducing card height by 50% and fitting 4–5 more sessions per screen.
|
||
|
||
### Phase 5: Quality Gates & Testing
|
||
|
||
1. **Unit Tests (`server/tests/events.test.ts` & `scopes.test.ts`):**
|
||
- Test event host revoking a guest attendee session via `DELETE /api/sessions/:id` succeeds (200 OK).
|
||
- Test non-owner unauthorized user attempting to revoke an attendee session is rejected (404/403).
|
||
- Test guest list API returns active claimed seats.
|
||
2. **Hermetic UI Validation (`ui/ui_scripts.test.ts`):**
|
||
- Verify all vanilla JavaScript drawer controllers, density toggles, and countdown scripts in `SessionsScript.tsx` parse and evaluate cleanly with zero syntax errors.
|
||
3. **Formatting & Linting:**
|
||
- Ensure `deno fmt`, `deno task lint`, `deno task check`, and `deno test --allow-all` execute with 100% green status.
|