Availability Slider

[mirmirmirr]

This PR adds a slider to the results page that allows users to only show time slots with at least a certain number of people are available.

Availability Slider

The slider lives in the same panel as the "show best times" checkbox within a component named AvailabilityFilters. It acts as a master filter with the following interactions:

• By default, the slider is set to show times available with at least one person available which means all other interactions on the results page stay the same.
• If slider is set to showing at least x people:
  • hovering on a participant chip shows when that user is available AND when there are at least x people available
  • clicking on a participant chip is similar to hovering
  • participant chips are considered "disabled" (hover and click actions won't work) if they aren't available at a time that works for at least x people. However, this only applies if the chip isn't already selected or in removing mode.

To improve visual feedback, the slider has tick marks that are scaled and positioned based on the total number of participants. The endpoints are explicitly labeled with numbers and each major interval (multiples of 10 and 5) have sightly taller markers. The standard one by one increments are hidden if there are 50 or more participants to prevent overcrowding.

AvailabilityFilters Toast Replacement

Originally, when a user selected the checkbox and no matching times existed, a toast would appear in the bottom right corner, blocking the filter panel. This toast has been replaced with an inline banner to communicate problematic filter combinations.

Mobile Button

For mobile screens, a new filters button was added to the persistent footer, next to the Share button. The slider track was modified to be thicker for easier interaction.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a minimum-availability slider filter to the event results page. A new AvailabilityFilters component renders a Radix slider and checkbox; useEventResults gains minAvailability state and a refactored multi-stage filtering pipeline; ParticipantChip receives an includedInSlider prop; and the filter UI is wired into both the desktop sidebar and mobile attendees drawer.

Changes

Availability Filters Feature

Layer / File(s)	Summary
Filtering utilities and useEventResults refactor frontend/src/features/event/results/lib/utils.ts, frontend/src/lib/messages.ts, frontend/src/features/event/results/lib/use-results.ts	hasMutualAvailability and findConsensusAndConflicts updated to accept participantCount instead of a participants array. useEventResults gains minAvailability state with a clamping effect, replaces the prior single-pass derivation with a memoized three-stage pipeline (bestTimesCache → globalFilteredMap → filteredAvailabilities), refactors handleRemoveParticipant to await the server action and show success/error toasts, and exposes minAvailability, validParticipantsForList, and setMinAvailability. Message keys INFO_NO_MUTUAL_AVAILABILITY/INFO_NO_IDEAL_TIMES_BANNER are replaced with INFO_NO_OVERLAP.
AvailabilityFilters component frontend/package.json, frontend/src/features/event/results/components/availability-filters.tsx	New AvailabilityFilters component reads minAvailability, showOnlyBestTimes, and filteredAvailabilities from context, computes slider tick positions via useMemo, renders a checkbox to toggle best-times mode and a Radix slider bound to minAvailability, animates the displayed count label via framer-motion, and shows an error banner when no slots match. Adds @radix-ui/react-slider dependency.
ParticipantChip and ParticipantList slider inclusion frontend/src/features/event/results/attendees/participant-chip.tsx, frontend/src/features/event/results/attendees/participant-list.tsx	ParticipantChip receives a new includedInSlider boolean that gates hover triggering and non-removing click actions, and applies disabled/excluded styling when the participant is outside the slider range. ParticipantList computes this prop by checking each participant against validParticipantsForList from context.
Page-level UI wiring: desktop sidebar, mobile drawer, banners frontend/src/app/(event)/[event-code]/page-client.tsx, frontend/src/features/event/results/attendees/mobile-drawer.tsx, frontend/src/features/event/results/components/banners.tsx	Removes DisplaySettings and replaces it with a shared timezoneSelector element using TimeZoneSelector directly. Refactors the desktop sidebar to a motion.div wrapper with AnimatePresence that conditionally renders AvailabilityFilters when participants.length > 1. Extends AttendeesDrawer with a numParticipants prop and adds a "View Options" FloatingDrawer containing AvailabilityFilters in the mobile footer, shown only when numParticipants > 1. Updates banners.tsx to pass participants.length and use the new message constants.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 40.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[coderabbitai]

Actionable comments posted: 3

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/results/lib/use-results.ts (1)

66-88: 🎯 Functional Correctness | 🟠 Major

Keep the server mutation inside the transition. removeOptimisticParticipant(...) and updateOptimisticAvailabilities(...) run in startTransition, but await removePerson(...) happens after that transition ends. With React 19 useOptimistic, the optimistic overlay only stays while the action/transition is pending, so the removed participant can briefly reappear until revalidation lands. Await the mutation inside the same transition/action.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8c2bae8b-788c-45f1-8c34-24cba5ad1bc8

📥 Commits

Reviewing files that changed from the base of the PR and between 5e7277c and 08ef96d.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (12)

• frontend/package.json
• frontend/src/app/(event)/[event-code]/page-client.tsx
• frontend/src/features/event/results/attendees/mobile-drawer.tsx
• frontend/src/features/event/results/attendees/participant-chip.tsx
• frontend/src/features/event/results/attendees/participant-list.tsx
• frontend/src/features/event/results/components/availability-filters.tsx
• frontend/src/features/event/results/components/banners.tsx
• frontend/src/features/event/results/components/display-settings.tsx
• frontend/src/features/event/results/components/share-menu.tsx
• frontend/src/features/event/results/lib/use-results.ts
• frontend/src/features/event/results/lib/utils.ts
• frontend/src/lib/messages.ts

💤 Files with no reviewable changes (1)

• frontend/src/features/event/results/components/display-settings.tsx

[jzgom067]

Instead of adding side margins to the ticks, I think it would look better to have the knob extend slightly over the bounds of the track. This way, the knob can be centered on the ticks, and the ticks on the ends can be lined up with the concentric points of the ends.

Let me know if that doesn't make sense.

[mirmirmirr]

The radix library does not allow for extending the knob over the track. It intentionally keeps it within the bounds of the track to maintain calculations.

[jzgom067]

Also, I think it would make more sense to have the availability slider displayed above the time zone selector, since it will probably be used more often.