style(schedule): add chrome density prototype variants by chiptus · Pull Request #216 · chiptus/UpLine

chiptus · 2026-07-24T10:34:57Z

Throwaway prototype answering "the schedule view feels packed on mobile": switchable chrome variants on the real schedule routes, flipped via the floating pill or ?variant=.
Draft on purpose — pick a winner, then it gets folded in properly and src/pages/EditionView/prototype/ deleted; NOTES.md there logs each iteration and the verdict placeholder.

Current variant set (iteration 6–8): the chrome verdict is the content-first "top nav + auto-hide" design (no boxed banners, no timezone bar, unboxed timeline, sticky day toolbar + date/time strip + day-spanning list headers with embedded filters, mobile bottom tab bar hides on scroll down). The pill compares header/status treatments on that shared chrome:

current — baseline, renders like main
autohide-countdown — slim identity row; "Schedule soon" / "N days to go", dot only when live
autohide-dates — identity row with a color-coded dot in every phase: slate "Schedule soon" / amber "Jul 1–3" / red pulsing "Live"
autohide-cta — dates + dot, but pre-schedule says "Vote now"
collapse — full hero (title, logo, Tickets/Website, phase sentence as subtitle) at rest; scrolled, a compact identity (logo + name + phase dot) takes over the top bar's center

Verification

Open /festivals/tomorrowland/editions/2026/schedule/timeline and flip variants with the floating pill or ←/→ keys; the choice survives navigation and reloads.
Non-live states: /festivals/anta (pre-schedule) and /festivals/reveal-playground/editions/days (planning) show the phase status per variant.
In all non-current variants on mobile, scroll down: the bottom tab bar slides away; scroll up brings it back.
In collapse, scroll past the hero: the top bar center switches to the compact festival identity.
Timeline: day toolbar and date/time strip stick below the fixed top bar; list day headers stick for their whole day and carry the Filters trigger.
Variant current renders identically to main.

🤖 Generated with Claude Code

https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

vercel · 2026-07-24T10:35:02Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
upline	Ready	Preview, Comment	Jul 25, 2026 8:22am

… switcher Four switchable chrome treatments (current / quiet / commandbar / compact) on the real schedule routes to answer: how should the stacked banners, switcher, timezone bar and filters consolidate so mobile feels less packed? Throwaway — see src/pages/EditionView/prototype/NOTES.md for the verdict placeholder; the folder and all PROTOTYPE-marked call sites get deleted once a variant wins. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

Iteration 2 from feedback (leaning compact, icon strip too wide, want the date/time header sticky): compact tries a dropdown view switcher while commandbar keeps the icon strip for width comparison; all non-current variants lift the timeline date band + hour scale into a sticky strip synced to the horizontal scroll. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

Iteration 3 from feedback (content-first wins on density; the dropdown hid the views and the bar changed shape per view): all variants now share the content-first base and differ in navigation mechanism, each consistent across Now/Timeline/List — underline top tabs, a unified sticky bar with fixed slots, or a switcher docked above the bottom tab bar on mobile. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

Fifth variant from feedback on the bottom dock: keep the current-style segmented switcher at the top of the content-first base, and slide the mobile Vote/Schedule/Explore bar away while scrolling down (back on scroll up or near the top) so content gets the whole screen. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

Iteration 5: the list groups slots per festival day on non-current variants, so the sticky day header's range spans the whole day (it previously sat inside the day's first time slot and un-stuck after one screen). On the autohide variant the standalone filters row is gone — the filter trigger lives inside the sticky day header. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

…atus Iteration 6: only current + autohide remain (tabs/unibar/thumbbar deleted). The identity row's Live-dot slot generalizes to all phases: pre-schedule shows 'Schedule soon', planning shows the countdown, live keeps the pulsing dot, post-festival shows nothing. The variant choice persists in sessionStorage so router redirects can't drop it. Decisions from review: auto-hide applies everywhere; Tickets/Website buttons are dropped for now with a follow-up to move them to the info tab. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

Iteration 7: the pill flips between countdown (baseline), dates + a color-coded status dot in every phase, and a vote-CTA flavor where pre-schedule says 'Vote now'. Chrome is identical across the three; legacy ?variant=autohide maps to the countdown flavor. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

Iteration 8: fifth pill option — the current-style hero (title, logo, Tickets/Website, full phase sentence as a quiet subtitle) shows at rest; once scrolled out of view a compact identity (logo + truncated name + color-coded phase dot) takes over the top bar's center slot. Rest of the chrome matches the auto-hide variants. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017tH8MLLh9iywh4UHTMy42o

Copilot

Pull request overview

This PR introduces a throwaway “chrome density” prototype for the Edition Schedule experience, enabling multiple header/chrome variants to be toggled on real schedule routes (via a floating pill, arrow keys, or ?variant=) to pick a mobile-friendly winner before folding it in properly.

Changes:

Add a ChromeVariantProvider + switcher UI and wire it into EditionLayout to persist/share the selected chrome variant.
Adjust Schedule Timeline/List UI (sticky offsets, framing, grouping) based on the selected variant.
Add prototype-only components/hooks to support the new chrome behaviors (e.g., list day sticky header, hide-on-scroll behavior).

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/pages/EditionView/tabs/ScheduleTab/TimelineTab.tsx	Hides the time badge in non-`current` variants.
src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx	Adds `showLabel` option to force “Filters” text visibility (prototype).
src/pages/EditionView/tabs/ScheduleTab/list/TimeSlotGroup.tsx	Formatting-only change for `formatTimeOnly` call.
src/pages/EditionView/tabs/ScheduleTab/list/ListTab.tsx	Uses `useChromeVariant` to simplify non-`current` list chrome.
src/pages/EditionView/tabs/ScheduleTab/list/ListSchedule.tsx	Groups list schedule by festival day for non-`current` variants; adds prototype day header.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineToolbar.tsx	Adjusts sticky top offset based on chrome variant.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineContainer.tsx	Introduces sticky time scale header for non-`current` variants with horizontal sync.
src/pages/EditionView/tabs/ScheduleTab/horizontal/Timeline.tsx	Drops the “framing box” around timeline in non-`current` variants.
src/pages/EditionView/tabs/ScheduleTab/horizontal/StageLabels.tsx	Adds `className` to allow variant-specific label positioning.
src/pages/EditionView/TabNavigation/TabNavigation.tsx	Adds “hide bottom bar on scroll down” behavior for non-`current` variants.
src/pages/EditionView/prototype/useHideOnScrollDown.ts	New hook to detect scroll-down and hide fixed chrome (prototype).
src/pages/EditionView/prototype/NOTES.md	Documents prototype iterations and intended cleanup/verdict.
src/pages/EditionView/prototype/ListDayHeader.tsx	New sticky per-day list header that can host filters (prototype).
src/pages/EditionView/prototype/EditionHeaderVariants.tsx	New per-variant edition header rendering (identity row / collapse hero).
src/pages/EditionView/prototype/chromeVariant.tsx	New variant context/provider, URL/session persistence, and floating switcher UI.
src/pages/EditionView/PhaseBanner.tsx	Exports `bannerMessage` for use by the prototype header variants.
src/pages/EditionView/EditionLayout.tsx	Wraps edition view with `ChromeVariantProvider` and swaps in `EditionHeaderVariants`.
src/components/layout/AppHeader.tsx	Adds `collapsedIdentity` slot to support the “collapse” header variant.
prototype-mobile-driver.mjs	Adds a throwaway Playwright driver script for mobile viewport screenshots (prototype).

+          <div className="ml-auto md:ml-0">
+            <ScheduleFilterSheet tab="list" />
+          </div>


+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  useEffect(() => {
+    if (!stickyHeader) return;
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    function handleScroll() {
+      setScrollLeft(container?.scrollLeft ?? 0);
+    }
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [stickyHeader]);


+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      const target = event.target as HTMLElement | null;
+      if (
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable)
+      ) {
+        return;
+      }
+      if (event.key === "ArrowLeft") step(-1);
+      if (event.key === "ArrowRight") step(1);
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  });


+  // No production gate: this ships on a draft prototype PR so the preview
+  // deploy can flip variants too. The whole folder is deleted after the
+  // verdict — it must never reach main.
+  return (
+    <ChromeVariantContext.Provider value={variant}>
+      {children}
+      <VariantSwitcher variant={variant} onChange={setVariant} />
+    </ChromeVariantContext.Provider>


vercel Bot deployed to Preview July 24, 2026 10:35 View deployment

vercel Bot deployed to Preview July 24, 2026 10:49 View deployment

vercel Bot deployed to Preview July 24, 2026 11:03 View deployment

claude added 3 commits July 24, 2026 11:03

chiptus force-pushed the claude/frontend-design-layout-br8y1f branch from 2606951 to e01a10f Compare July 24, 2026 11:03

vercel Bot deployed to Preview July 24, 2026 11:07 View deployment

vercel Bot deployed to Preview July 24, 2026 11:38 View deployment

vercel Bot deployed to Preview July 24, 2026 12:15 View deployment

vercel Bot deployed to Preview July 25, 2026 07:52 View deployment

vercel Bot deployed to Preview July 25, 2026 08:04 View deployment

vercel Bot deployed to Preview July 25, 2026 08:22 View deployment

This was referenced Jul 25, 2026

Spec: consolidate edition chrome — identity row, auto-hiding bottom nav, sticky schedule headers #231

Open

Wrap-up: glossary update, successor PR, prototype closure #237

Open

chiptus requested a review from Copilot July 25, 2026 13:37

Copilot started reviewing on behalf of chiptus July 25, 2026 13:37 View session

Copilot AI reviewed Jul 25, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style(schedule): add chrome density prototype variants - #216

style(schedule): add chrome density prototype variants#216
chiptus wants to merge 8 commits into
mainfrom
claude/frontend-design-layout-br8y1f

chiptus commented Jul 24, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

chiptus commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Verification

Uh oh!

vercel Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chiptus commented Jul 24, 2026 •

edited

Loading

vercel Bot commented Jul 24, 2026 •

edited

Loading