The Setline مسار السهرة

Roster+ is a premium mobile + web app for booking DJs and live artists in the GCC / Dubai nightlife scene. Two sides: promoters book artists; artists get booked. It is dark-only, bilingual (Arabic / Latin), with a restrained sodium-amber accent. This document is the full picture of what has been done, the design direction chosen, the UI system, and what remains — so an external reviewer has everything needed to critique it.

1 · Tech & constraints (important)

• Stack: Next.js 15 (output: 'export' — fully static) + Capacitor 7 (iOS/Android). A shared web/ source is reused by the native app via path aliases.
• Blast radius: changes to web/src ship to BOTH the Capacitor app and the live website rosterplus.io. There is no separate web-only path.
• Already bilingual: the app has a working i18n system (EN + AR dictionaries, useT(), locale cookie) and RTL support ([dir='rtl'], IBM Plex Sans Arabic). It also has its own design tokens (graphite + sodium-amber) and brand fonts (Chillax / Satoshi via Fontshare).
• Live deploy is owner-gated. Nothing here is on the production site yet. All design work is on a branch + a public preview.

2 · The direction — "The Setline"

After two rejected passes (flat glass cards; then a "Roster Rail" motif), the chosen concept is the Setline / مسار السهرة: a live vertical time-spine (22:00 → 04:00) where the booking night itself becomes the interface. It behaves differently per screen but is one idea, so it's a screenshot signature rather than decoration:

References borrowed (direction from GPT-5.5): Flighty — the confidence of a live status timeline; Berghain / Ostgut Ton poster language — timetable-as-culture, severe type, black + one accent; Qasimi — bilingual Arabic/Latin restraint (Arabic as information, never ornament).

3 · The UI system we will use

Material & discipline

• Ground: near-black graphite (#08090b / #0c0d10), fine grain overlay, radial amber atmosphere behind heroes.
• Photography: full-bleed for heroes, framed for cards; one unified "sodium-graphite" grade (desaturate + contrast + crush) so all artist images read as one system. No circular avatars.
• Glass only as an overlay (search, floating controls) — never the default surface. Content surfaces are solid graphite sheets.
• Amber discipline: the sodium-amber accent is reserved for state only — availability, the Setline, the selected time/date, the one primary CTA. Target < 5% of any screen. Amber never floods, never on body copy or every border.
• Safe areas respected and marked: content clears the status bar / Dynamic Island and the home indicator.

Type

• Display / poster: Anton (condensed heavy) for Latin set-times and names, used as architecture. (Brand default display remains Chillax.)
• Body / UI: Satoshi / Inter.
• Data / labels: JetBrains Mono, uppercase, tabular figures.
• Arabic: IBM Plex Sans Arabic — never forced through the condensed Latin face; more line-height; no letter-spacing.

4 · Arabic (reviewed with GPT-5.5)

The app is genuinely bilingual, so copy goes through i18n. GPT-5.5 reviewed the Arabic; corrected glossary in use:

RTL rules applied: CSS logical properties (the amber spine flips side automatically); times / numbers / currency / artist names isolated with dir="ltr"/<bdi>; no letter-spacing on Arabic; Arabic keeps IBM Plex Sans Arabic via per-glyph font fallback.

5 · What's DONE

Functional fixes (shipped to the branch, verified)

• done Auth self-revocation fix (5ef61d3). Removing another device / "sign out others" was bricking the current session ("Invalid or expired token" everywhere) because revokeRefreshTokens is per-user. Proven live, then fixed: the API re-mints a fresh session token and the client silently re-establishes. needs backend deploy — owner-gated
• done PDF download fix (e0d4cf6). Capacitor WebView can't anchor-download; routed through a native share sheet. Verified on-device.
• done Dashboard atmosphere backdrop (17ea8a8).
• done Signed APK v1.2 built (bundles the above).

Design

• done Public interactive preview (this site): roster-native-preview.pages.dev — the v3 Setline concept (Home / Discover / Artist), bilingual, safe-areas marked, plus the Magnific reference layouts used. Imagery generated with Magnific; art direction from GPT-5.5.
• done Phase 1 — Tonight hero (6fc289e). First real application into the app: an additive Level-1 hero above the promoter dashboard (amber spine + live booking count + discover CTA). Existing tokens + i18n. Does not touch functional flows.
• done Phase 2 — Discover reskin (6b9c265). Image-led artist cards with the amber availability spine (only when bookable); booked artists greyscaled. Search / favorites / request-booking flow unchanged. RTL correct.
• done Phase 1 refine — Home hero = a real object (8abda39). The promoter Tonight hero now surfaces ONE actionable booking (soonest upcoming confirmed/contracted → else awaiting-response → else "start a booking"), not a vanity count; single primary action; status by icon + shape + text.
• done One booking-status vocabulary + StatusPill fix (88f3c5b). Extracted the status→label map into one shared module (list + hero + pill). Fixed a real defect: StatusPill was rendering the raw untranslated status, so Arabic users saw English "confirmed".
• done Phase 3 — artist profile "book bar" (d5b8ca3). Availability as a semantic state (filled amber dot vs hollow ring), fee, then the existing accessible Request-booking dialog → POST /bookings. No new booking state, no premature press-and-hold (per the review).
• done Phase 4 — one shared hero for all roles (c25519e). Promoter, artist and organisation now render from ONE component + ONE selection/data contract (lib/hero-object.ts); role variants differ only in copy, never CSS. The hero priority is reconciled into one rule everywhere — expiring hold → request needing action → next confirmed/contracted → start CTA. Contract documented in docs/SETLINE-HERO.md.
• done Auth self-revocation — backend deployed. The backend half (session re-mint) shipped as an isolated backend-only release to api.rosterplus.io (prod rev tagged for rollback; no frontend bundled); full auth matrix (login/refresh/remove-device/sign-out-others/recovery/logout) re-verified live, no regression. The matching client half is on the mobile app; the live web client's revoke-recovery lands with a later (gated) web deploy.

LIVE The redesign + the auth client half are now deployed to rosterplus.io (main 4d1f8aa, cherry-picked web-only onto main — no phase9 app, no backend change; prod rev tagged for rollback). Verified live: site healthy, setline CSS served, auth revoke-recovery now fixed end-to-end (backend + web). Dev continues on feat/setline-redesign.

branch feat/setline-redesign (off feat/phase9-capacitor). Both phases: tsc clean, next build 24/24 pages, EN + Arabic render verified.

6 · What's LEFT

The agreed model is NOT a wholesale replacement of the working, data-driven app. The Setline is a design-language layer + Level-1 hero moments; the functional dashboards, bookings, wallet, messaging and auth keep working. Rollout is lowest-risk first.

Cross-cutting gaps to close before wide rollout (GPT-5.5's checklist)

• Setline as a real component: data contract + states for cross-midnight, timezone, venue hours, holds, hold-expiry, confirmed / expired / cancelled, and empty / loading / error.
• Accessibility: press-and-hold needs a keyboard + screen-reader alternative; reduced-motion; ≥44px targets; amber-on-dark contrast tested; visible focus.
• Fonts / performance: self-host / subset Anton (and Arabic) for offline Capacitor; avoid layout shift from late display fonts.
• Full RTL sweep of every surface (forms, filters, chat, wallet, modals, toasts) — not just the redesigned screens.
• Regression smoke tests before any deploy: login / session-revoke / booking create / wallet / PDF-share / Capacitor iOS + Android / static web.
• color-scheme: dark for native inputs/pickers; verify Capacitor status/nav bars.

Gated / external dependencies

• shipped Auth fix backend half — DEPLOYED to api.rosterplus.io as an isolated backend-only release (rollback-tagged, no frontend). Full auth matrix re-verified live. The live web client's revoke-recovery (client half) still awaits a separate, gated web deploy.
• shipped Deploy to rosterplus.io — DONE (main 4d1f8aa, web-only, rollback-tagged). Live.
• gate iOS: App Store Connect key is ready (full Admin, same Transcenda Apple account); the io.rosterplus.app app record / bundle must be created in the ASC UI by the owner.

7 · Questions for the external reviewer

1. Is "the Setline" the right central concept for a booking product, or does it over-index on nightlife aesthetics at the cost of the promoter's operational speed?
2. Design-language-layer vs deeper: is applying the Setline as hero moments (keeping functional dashboards) the right restraint, or should more of the IA change?
3. The press-and-hold "lock the night" interaction — premium, or friction on the most important action? What's the right confirm pattern?
4. Arabic register + the bilingual treatment — is مسار السهرة the right brand term; is the Arabic authoritative rather than decorative?
5. Anything missed in the gap list before this touches a live, transactional, dual-target (app + web) product?

8 · Adopted from the first external review

An external reviewer audited the concept (it saw the mock, not this brief — now corrected). Its design spine was right; these points are accepted and folded into the plan above:

• adopt Setline used selectively, not everywhere. Rule now explicit: the Setline appears only where time / availability / booking progression is the primary decision (Discover, Artist timeline, hold, event-night). Utility screens (settings, payments, contracts, inbox) stay plain — shared skin + tokens only.
• shipped Home hero = a real, actionable object. Instead of a vanity live-count, the promoter hero resolves to the single thing that needs attention: expiring hold → next confirmed booking → else "start a booking" CTA. (Refines Phase 1.)
• shipped One booking-state vocabulary, defined before Phase 5. Draft → Availability requested → Available → Soft hold → Offer → Terms agreed → Contract pending → Deposit due → Confirmed → Completed; terminal Declined / Expired / Cancelled. One word = one legal meaning; reconcile against the real API status enum.
• adopt Press-and-hold is a final gesture only, after a full review (event → performance → fee breakdown incl. agency/VAT/travel → contract → deposit) — never the sole confirmation of a high-value booking. Validates keeping Phase 5 gated and designing the multi-step flow first.
• shipped Semantic state, never colour alone. Amber can't carry every state; each of available / expiring / confirmed / declined / disabled gets its own text + icon + shape, not just amber-vs-grey. (a11y.)
• adopt One Setline component with variants, not three bespoke CSS blocks. Factor a shared primitive when Phase 3 lands, rather than a third hand-rolled block.
• adopt Enumerate failure/empty states for the new flow — no-availability, hold-expired, artist-declined, fee-changed, schedule-conflict, payment-failed — before building it.

Not adopted (aimed at the mock, already handled in web/src): "rename Book→Bookings / You→Workspace" (no such tabs — real nav already says Bookings); "no search/filters" (directory has search + favourites; richer facets are an enhancement, not a gap); "Arabic is decorative" (real dictionaries + RTL exist); "no booking flow / press-hold is the only confirmation" (real inquiry→contract→payout flow exists; press-hold isn't built); "placeholder imagery" (mock's 2 stock images; app uses artist avatar_url).