View transitions

[jzgom067]

This PR adds view transitions to the site, used between the results and painting pages as well as theme transitions.

New useViewTransition Hook

This handles the centralized logic for waiting for a new page to load before applying the view transition.

Theme Transition

When the theme changes, a view transition is used to smoothly change themes.

• This only occurs when the resolved theme changes, so if switching from "Dark" to "System" results in the same theme, nothing happens. Otherwise, the screen would essentially freeze while it transitions to the same thing that's already displayed.

Small Necessary Changes

In order for the view transitions to work, a few small changes were made:

• A background color was added to the ScheduleGrid component, so when it moves over other elements they are fully obscured.
• The mobile results drawer now initially starts at a snap point of 0 with a .35s delay. This way, the view transition from the painting page completes before the drawer animates in.

SIDE NOTE: Contrary to what I originally thought (and mentioned in our meeting), the loading.tsx files did NOT have to be deleted to get this to work. I found a way around it that was much simpler than my original attempt.

[coderabbitai]

Walkthrough

Adds shared hooks and CSS for document view transitions, including navigation fallback behavior and theme changes. Event grids, drawers, mobile footer islands, and page navigation now expose named transition surfaces. Painting and results navigation uses transition-aware actions, while the mobile attendees drawer stages snap-point changes during navigation. Theme selection now uses the new transition-aware theme hook.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d8384664-b0b7-4aa8-9067-60e4ccfd2504

📥 Commits

Reviewing files that changed from the base of the PR and between b19df1b and 284e57b.

📒 Files selected for processing (13)

• frontend/src/app/(event)/[event-code]/page-client.tsx
• frontend/src/app/(event)/[event-code]/painting/page-client.tsx
• frontend/src/components/mobile-footer-island.tsx
• frontend/src/features/drawer/components/base.tsx
• frontend/src/features/drawer/props.ts
• frontend/src/features/event/grid/grid.tsx
• frontend/src/features/event/grid/lib/constants.ts
• frontend/src/features/event/results/attendees/mobile-drawer.tsx
• frontend/src/features/header/components/theme-picker.tsx
• frontend/src/lib/hooks/use-theme-toggle.ts
• frontend/src/lib/hooks/use-view-transition.ts
• frontend/src/styles/globals.css
• frontend/src/styles/view-transition.css