Skip to content

Move view switcher from header into content toolbar above events - #170

Merged
snackman merged 2 commits into
masterfrom
ui/view-switcher-in-section
Sep 29, 2026
Merged

snackman merged 2 commits into
masterfrom
ui/view-switcher-in-section

Conversation

@snackman

Copy link
Copy Markdown
Owner

What

The Map / List / Table / Gallery switcher moves out of the site header into a new toolbar row directly above the events. That makes it clearer that it controls how the events below are shown.

  • New ViewToolbar: the event count (e.g. 189 events) sits on the left and the segmented view switcher on the right. It uses --theme-bg-list so it reads as part of the content area. It sits right under the FilterBar.
  • It lives inside the existing collapsible filter wrapper, so on mobile it hides and shows with the filter bar on scroll. On desktop it stays visible. Map view keeps its full-height layout because the toolbar is shrink-0 above <main class="flex-1">.
  • Header: the switcher and the viewMode/onViewChange props are removed. It now shows only the logo, the check-in button and sign-in/profile.
  • Accessibility: the buttons sit in a role=group labelled "View events as". Each button has aria-pressed, an aria-label and a title tooltip, plus a visible focus ring. On screens narrower than sm, only the active option shows its text label and the others are icon-only. All four options show labels on sm and up.
  • Theming: uses the generic theme tokens (--theme-accent, --theme-accent-muted, --theme-border-primary, --theme-text-*, --theme-bg-primary). I checked it in light-blue and dark.
  • Persistence: useViewMode is unchanged, so the view mode is still saved to localStorage (sheeets-view). I checked that clicking a view, then reloading, keeps it.
  • EventApp.tsx diff is minimal: one import, one <ViewToolbar/> line, and the removed Header props.

Verification

  • npx tsc --noEmit: passes
  • npx next build: passes
  • npm test: 260 pass, 4 fail. The failures are in src/lib/__tests__/conferences.test.ts and filters.test.ts, which this PR doesn't touch.
  • Screenshots: I took Playwright before/after shots of /kbw2026 in every view, at 1440px and 390px. They are kept locally and not committed.

🤖 Generated with Claude Code

Adds a ViewToolbar row (result count left, view switcher right) directly
above the events content, inside the collapsible filter wrapper so it
hides/shows with the filter bar on mobile scroll. Removes the switcher
from the site header. Buttons use aria-pressed in a labelled group, with
tooltips; on mobile only the active option shows its text label. Styles
use theme tokens. localStorage persistence unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Sep 29, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
sheeets Ready Ready Preview Sep 29, 2026 2:00pm UTC

Request Review

…bar)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@snackman
snackman merged commit 884a95e into master Sep 29, 2026
3 checks passed
@snackman
snackman deleted the ui/view-switcher-in-section branch September 30, 2026 00:51

This branch was successfully deployed

1 active deployment
Preview — 623f3d02 Deployed Sep 29, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant