Availability Slider

frontend/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-popover": "^1.1.13",
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-toast": "^1.2.15",
     "@vercel/analytics": "^2.0.1",

frontend/src/app/(event)/[event-code]/page-client.tsx

@@ -2,17 +2,19 @@
 
 import { useState } from "react";
 
+import { AnimatePresence, motion } from "framer-motion";
 import { PencilIcon, ShareIcon, SquarePenIcon } from "lucide-react";
 
 import KebabMenu from "@/components/kebab-menu";
 import { EventInformation } from "@/core/event/types";
 import EmptyButton from "@/features/button/components/empty";
 import LinkButton from "@/features/button/components/link";
+import TimeZoneSelector from "@/features/event/components/selectors/timezone";
 import ScheduleGrid from "@/features/event/grid/grid";
 import AttendeesPanel from "@/features/event/results/attendees/desktop-panel";
 import AttendeesDrawer from "@/features/event/results/attendees/mobile-drawer";
+import AvailabilityFilters from "@/features/event/results/components/availability-filters";
 import { getResultBanners } from "@/features/event/results/components/banners";
-import DisplaySettings from "@/features/event/results/components/display-settings";
 import {
   ResultsProvider,
   useResultsContext,
@@ -86,6 +88,34 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
     currentUser !== null,
   );
 
+  /* DISPLAY SETTINGS */
+  const renderTimezoneSelector = (id: string) => (
+    <div className="bg-panel shrink-0 rounded-3xl p-6 text-sm">
+      Displaying event in
+      <TimeZoneSelector
+        id={id}
+        value={timezone}
+        onChange={handleTZChange}
+        drawerNesting={0}
+      />
+    </div>
+  );
+
+  const availabilityFilters = (
+    <motion.div
+      key="availability-filters"
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: "auto" }}
+      exit={{ opacity: 0, height: 0 }}
+      transition={{ type: "tween", ease: "easeInOut", duration: 0.3 }}
+      className="shrink-0 overflow-hidden"
+    >
+      <div className="bg-panel rounded-3xl p-6 text-sm">
+        <AvailabilityFilters />
+      </div>
+    </motion.div>
+  );
+
   /* BUTTONS */
   const paintingButton = (
     <LinkButton
@@ -154,11 +184,8 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
           timeslots={timeslots}
         />
 
-        <div className="bg-panel shrink-0 rounded-3xl p-6 text-sm md:hidden">
-          <DisplaySettings
-            timezone={timezone}
-            onTimezoneChange={handleTZChange}
-          />
+        <div className="md:hidden">
+          {renderTimezoneSelector("timezone-select-mobile")}
         </div>
 
         {/* Mobile Spacer & Drawer */}
@@ -171,6 +198,7 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
             onSnapChange={setDrawerSnap}
             eventTitle={eventTitle}
             eventCode={eventCode}
+            numParticipants={participants.length}
           />
         </div>
 
@@ -185,12 +213,10 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
           {banners}
           <div className="flex max-h-[calc(100vh-18rem)] flex-col gap-y-4">
             <AttendeesPanel />
-            <div className="bg-panel shrink-0 rounded-3xl p-6 text-sm">
-              <DisplaySettings
-                timezone={timezone}
-                onTimezoneChange={handleTZChange}
-              />
-            </div>
+            <AnimatePresence initial={false}>
+              {participants.length > 1 && availabilityFilters}
+            </AnimatePresence>
+            {renderTimezoneSelector("timezone-select-desktop")}
           </div>
         </div>
       </div>