feat: ✨ rooms rec mobile (#567)

* feat: ✨ working

* feat: ✨ horizontal scroll

* fix: 🐛 duped logic

* Update src/components/availability/room-recommendations.tsx

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

Author: ethancha0

src/components/availability/availability.tsx

@@ -11,6 +11,7 @@ import { GroupResponses } from "@/components/availability/group-responses";
 import { AvailabilityHeader } from "@/components/availability/header/availability-header";
 import { PersonalAvailability } from "@/components/availability/personal-availability";
 import {
+	deduplicateRooms,
 	groupRawRoomsByKey,
 	RoomRecommendationSettings,
 } from "@/components/availability/room-recommendations";
@@ -45,6 +46,8 @@ import { useAvailabilityStore } from "@/store/useAvailabilityStore";
 import { MobilePersonalAvailabilitySidebar } from "../nav/mobile-personal-availability";
 import { PersonalAvailabilitySidebar } from "../nav/personal-availability-sidebar";
 import { MobileGroupResponses } from "./mobile-group-responses";
+import { MobileRoomRecommendations } from "./mobile-room-recommendations";
+import { MobileRoomWheelPicker } from "./mobile-room-wheel-picker";
 import { MobileScheduleSettings } from "./mobile-schedule-settings";
 
 const LG_UP_MEDIA = "(min-width: 1024px)";
@@ -239,6 +242,7 @@ export function Availability({
 	} = useRoomRecommendations(availabilityDates);
 
 	const [selectedRoomIds, setSelectedRoomIds] = useState<string[]>([]);
+	const [isMobileRoomsDrawerOpen, setIsMobileRoomsDrawerOpen] = useState(false);
 
 	const showRoomPreviews =
 		availabilityView === "group" || availabilityView === "schedule";
@@ -254,6 +258,17 @@ export function Availability({
 		[studyRooms],
 	);
 
+	const mobileRoomCount = useMemo(
+		() => deduplicateRooms(studyRooms).length,
+		[studyRooms],
+	);
+
+	useEffect(() => {
+		if (availabilityView !== "group") {
+			setIsMobileRoomsDrawerOpen(false);
+		}
+	}, [availabilityView]);
+
 	const handleImportSlotsFromMeeting = useCallback(
 		({
 			meetingAvailabilities,
@@ -430,13 +445,23 @@ export function Availability({
 	}, [router, returnToPath, setAvailabilityView, user]);
 
 	const handleMobileOpenAttendees = useCallback(() => {
+		setIsMobileRoomsDrawerOpen(false);
 		setIsMobileDrawerOpen(true);
 	}, [setIsMobileDrawerOpen]);
 
 	const handleMobileSchedule = useCallback(() => {
 		setAvailabilityView("schedule");
 	}, [setAvailabilityView]);
 
+	const handleMobileOpenRooms = useCallback(() => {
+		setIsMobileDrawerOpen(false);
+		setIsMobileRoomsDrawerOpen(true);
+	}, [setIsMobileDrawerOpen]);
+
+	const handleCloseMobileRooms = useCallback(() => {
+		setIsMobileRoomsDrawerOpen(false);
+	}, []);
+
 	return (
 		<StudyRoomHoverProvider
 			showRoomPreviews={showRoomPreviews}
@@ -582,17 +607,46 @@ export function Availability({
 										onOpenAttendees={handleMobileOpenAttendees}
 									/>
 								) : (
-									<MobileGroupResponses
-										isOwner={isMeetingOwner}
-										respondedMembersCount={Math.max(
-											0,
-											members.length - pendingMembers.length,
-										)}
-										pendingMembersCount={pendingMembers.length}
-										onAddAvailability={handleMobileAddAvailability}
-										onOpenAttendees={handleMobileOpenAttendees}
-										onSchedule={handleMobileSchedule}
-									/>
+									<>
+										{hasSearchedRooms &&
+											studyRooms.length > 0 &&
+											!isMobileRoomsDrawerOpen && (
+												<MobileRoomWheelPicker
+													rawRooms={studyRooms}
+													rawRoomsByKey={rawRoomsByKey}
+													filters={roomFilters}
+													selectedRoomIds={selectedRoomIds}
+													onSelectedRoomIdsChange={setSelectedRoomIds}
+												/>
+											)}
+										<MobileGroupResponses
+											isOwner={isMeetingOwner}
+											respondedMembersCount={Math.max(
+												0,
+												members.length - pendingMembers.length,
+											)}
+											pendingMembersCount={pendingMembers.length}
+											roomCount={mobileRoomCount}
+											hasSearchedRooms={hasSearchedRooms}
+											onAddAvailability={handleMobileAddAvailability}
+											onOpenAttendees={handleMobileOpenAttendees}
+											onOpenRooms={handleMobileOpenRooms}
+											onSchedule={handleMobileSchedule}
+										/>
+										<MobileRoomRecommendations
+											open={isMobileRoomsDrawerOpen}
+											onClose={handleCloseMobileRooms}
+											rawRooms={studyRooms}
+											hasSearched={hasSearchedRooms}
+											filters={roomFilters}
+											onFiltersChange={setRoomFilters}
+											onShowBestRooms={handleShowBestRooms}
+											isLoading={isRoomsLoading}
+											errorMessage={studyRoomsError}
+											selectedRoomIds={selectedRoomIds}
+											onSelectedRoomIdsChange={setSelectedRoomIds}
+										/>
+									</>
 								)}
 							</div>
 						</div>

src/components/availability/mobile-group-responses.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+	Apartment,
 	CalendarMonthOutlined,
 	EditCalendarOutlined,
 	PeopleAltOutlined,
@@ -20,23 +21,42 @@ export interface MobileGroupResponsesProps {
 	isOwner: boolean;
 	respondedMembersCount: number;
 	pendingMembersCount: number;
+	roomCount: number;
+	hasSearchedRooms: boolean;
 	onAddAvailability: () => void;
 	onOpenAttendees: () => void;
+	onOpenRooms: () => void;
 	onSchedule: () => void;
 }
 
 export function MobileGroupResponses({
 	isOwner,
 	respondedMembersCount,
 	pendingMembersCount,
+	roomCount,
+	hasSearchedRooms,
 	onAddAvailability,
 	onOpenAttendees,
+	onOpenRooms,
 	onSchedule,
 }: MobileGroupResponsesProps) {
+	const roomsLabel = hasSearchedRooms
+		? `${roomCount} ${roomCount === 1 ? "Room" : "Rooms"}`
+		: "Rooms";
+
 	return (
 		<div>
 			<MobileIsland>
 				<div className="flex w-full min-w-0">
+					<Button color="inherit" sx={actionButtonSx} onClick={onOpenRooms}>
+						<Stack spacing={0.5} alignItems="center">
+							<Apartment fontSize="small" />
+							<Typography variant="caption">{roomsLabel}</Typography>
+						</Stack>
+					</Button>
+
+					<Divider orientation="vertical" flexItem />
+
 					<Button color="inherit" sx={actionButtonSx} onClick={onOpenAttendees}>
 						<Stack spacing={0.5} alignItems="center">
 							<PeopleAltOutlined fontSize="small" />

src/components/availability/mobile-room-recommendations.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import {
+	RoomRecommendationSettings,
+	type StudyRoomApiEntry,
+} from "@/components/availability/room-recommendations";
+import { MuiBottomSheet } from "@/components/ui/mui/mui-bottom-sheet";
+import type { RoomFilters } from "@/lib/types/studyrooms";
+
+const mobileSheetPaperSx = { px: 2, py: 1 } as const;
+
+export interface MobileRoomRecommendationsProps {
+	open: boolean;
+	onClose: () => void;
+	rawRooms: StudyRoomApiEntry[];
+	hasSearched: boolean;
+	filters: RoomFilters;
+	onFiltersChange: (filters: RoomFilters) => void;
+	onShowBestRooms: () => void;
+	isLoading: boolean;
+	errorMessage: string | null;
+	selectedRoomIds: string[];
+	onSelectedRoomIdsChange: (ids: string[]) => void;
+}
+
+export function MobileRoomRecommendations({
+	open,
+	onClose,
+	...roomProps
+}: MobileRoomRecommendationsProps) {
+	return (
+		<MuiBottomSheet open={open} onClose={onClose} paperSx={mobileSheetPaperSx}>
+			<RoomRecommendationSettings layout="sheet" {...roomProps} />
+		</MuiBottomSheet>
+	);
+}