Days per grid page option

[jzgom067]

This PR adds a dropdown that lets users select how many days to show on the results grid.

Overview

This option is displayed next to the time zone option on the results and painting pages. On the event editor, it's shown below the grid.

• On the event editor, text indicating that the grid is a preview was added, since there was space across from the days per page selector. This text is slightly different depending on if you're editing the event.

The value selected is saved to local storage, and the value for the mobile layout is separate from the desktop layout. They also have different options, between 4 and 7 on mobile and 7 and 14 on desktop.

This option depends on a new hook, useGridPageDays, which handles the logic of checking local storage and validating the value before setting the option.

New ScheduleGrid Props

• pageDays determines how many days are shown on each grid page.
• useCompactHeader determines if the compact header layout should be used.
• setGridDisplayed allows the parent component to know if a grid is displayed, for use in the editor.

Grid Header Changes

To fit additional days on the grid, a "compact" grid header was created that shrinks the weekdays into single characters and the dates into just numbers. These features dynamically activate based on the screen size, so a large enough screen will show the original "uncompacted" header with the additional days.

Fixed Out of Bounds Page Bug

There was an issue where, if you were at the last grid page and increased the number of days per page, the current grid page would be out of bounds. This has been fixed.

Somewhat related to this, the logic for checking if the user has viewed all grid pages when painting has been simplified.

Fixed Mobile Event Editor Grid Header

The mobile event editor didn't have a sticky header on the grid preview, which has now been added.

[coderabbitai]

Walkthrough

Adds a persisted “Days per page” setting with mobile and desktop options, selector UI, and localStorage handling. ScheduleGrid now uses the selected day count, clamps invalid pages, reports display state, and supports compact headers. ScheduleHeader renders condensed date layouts in compact mode. Event results, painting, and editor views expose the setting in their responsive panels, while painting tracks last-page visitation through grid updates and the editor conditionally displays preview controls.

---

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: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/features/event/grid/lib/use-grid.ts (1)

47-55: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Boundary check fix is correct; consider stabilizing paginate's identity.

The generalized < 0/> 0 check correctly supports the multi-step jump used by the pagination clamp fix in grid.tsx. Since paginate isn't memoized, it's a new reference every render, which causes the pagination useEffect in grid.tsx (which lists paginate as a dependency) to re-run on every render rather than only when currentPage/totalPages change.

♻️ Optional: stabilize with `useCallback`

-  const paginate = (newDirection: number) => {
+  const paginate = useCallback((newDirection: number) => {
     if (
       (newDirection < 0 && currentPage > 0) ||
       (newDirection > 0 && currentPage < view.totalPages - 1)
     ) {
       setCurrentPage([currentPage + newDirection, newDirection]);
       onPaginate(currentPage + newDirection, view.totalPages);
     }
-  };
+  }, [currentPage, view.totalPages, onPaginate]);

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8c2cc00e-7559-4d4f-bbfe-28d4a8aa701f

📥 Commits

Reviewing files that changed from the base of the PR and between 5b58301 and 3e0073e.

📒 Files selected for processing (9)

• frontend/src/app/(event)/[event-code]/page-client.tsx
• frontend/src/app/(event)/[event-code]/painting/page-client.tsx
• frontend/src/features/event/components/selectors/grid-page-days.tsx
• frontend/src/features/event/editor/editor.tsx
• frontend/src/features/event/grid/grid.tsx
• frontend/src/features/event/grid/lib/constants.ts
• frontend/src/features/event/grid/lib/use-grid.ts
• frontend/src/features/event/grid/lib/use-page-days.ts
• frontend/src/features/event/grid/schedule-header.tsx