WIP: Migrate calendar integration frontend to React Query

- Migrate all calendar components from useApi to React Query hooks
- Fix Chakra UI v3 compatibility issues (Card, Progress, spacing props, leftIcon)
- Update backend Meeting model to include calendar fields
- Replace imperative API calls with declarative React Query patterns
- Remove old OpenAPI generated files that conflict with new structure

www/app/room/[roomName]/page.tsx

@@ -3,10 +3,18 @@
 import { useEffect, useState } from "react";
 import { Box, Spinner, VStack, Text } from "@chakra-ui/react";
 import { useRouter } from "next/navigation";
-import useApi from "../../lib/useApi";
-import useSessionStatus from "../../lib/useSessionStatus";
+import type { components } from "../../reflector-api";
+import { useAuth } from "../../lib/AuthProvider";
+import {
+  useRoomGetByName,
+  useRoomUpcomingMeetings,
+  useRoomActiveMeetings,
+  useRoomsCreateMeeting,
+} from "../../lib/apiHooks";
 import MeetingSelection from "../../[roomName]/MeetingSelection";
-import { Meeting, Room } from "../../api";
+
+type Meeting = components["schemas"]["Meeting"];
+type Room = components["schemas"]["Room"];
 
 interface RoomPageProps {
   params: {
@@ -17,66 +25,26 @@ interface RoomPageProps {
 export default function RoomPage({ params }: RoomPageProps) {
   const { roomName } = params;
   const router = useRouter();
-  const api = useApi();
-  const { data: session } = useSessionStatus();
+  const auth = useAuth();
 
-  const [room, setRoom] = useState<Room | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [checkingMeetings, setCheckingMeetings] = useState(false);
+  // React Query hooks
+  const roomQuery = useRoomGetByName(roomName);
+  const activeMeetingsQuery = useRoomActiveMeetings(roomName);
+  const upcomingMeetingsQuery = useRoomUpcomingMeetings(roomName);
+  const createMeetingMutation = useRoomsCreateMeeting();
 
-  const isOwner = session?.user?.id === room?.user_id;
+  const room = roomQuery.data;
+  const activeMeetings = activeMeetingsQuery.data || [];
+  const upcomingMeetings = upcomingMeetingsQuery.data || [];
 
-  useEffect(() => {
-    if (!api) return;
+  const isLoading = roomQuery.isLoading;
+  const isCheckingMeetings =
+    (room?.ics_enabled &&
+      (activeMeetingsQuery.isLoading || upcomingMeetingsQuery.isLoading)) ||
+    createMeetingMutation.isPending;
 
-    const fetchRoom = async () => {
-      try {
-        // Get room details
-        const roomData = await api.v1RoomsRetrieve({ roomName });
-        setRoom(roomData);
-
-        // Check if we should show meeting selection
-        if (roomData.ics_enabled) {
-          setCheckingMeetings(true);
-
-          // Check for active meetings
-          const activeMeetings = await api.v1RoomsListActiveMeetings({
-            roomName,
-          });
-
-          // Check for upcoming meetings
-          const upcomingEvents = await api.v1RoomsListUpcomingMeetings({
-            roomName,
-            minutesAhead: 30,
-          });
-
-          // If there's only one active meeting and no upcoming, auto-join
-          if (activeMeetings.length === 1 && upcomingEvents.length === 0) {
-            handleMeetingSelect(activeMeetings[0]);
-          } else if (
-            activeMeetings.length === 0 &&
-            upcomingEvents.length === 0
-          ) {
-            // No meetings, create unscheduled
-            handleCreateUnscheduled();
-          }
-          // Otherwise, show selection UI (handled by render)
-        } else {
-          // ICS not enabled, use traditional flow
-          handleCreateUnscheduled();
-        }
-      } catch (err) {
-        console.error("Failed to fetch room:", err);
-        // Room not found or error
-        router.push("/rooms");
-      } finally {
-        setLoading(false);
-        setCheckingMeetings(false);
-      }
-    };
-
-    fetchRoom();
-  }, [api, roomName]);
+  const isOwner =
+    auth.status === "authenticated" && auth.user?.id === room?.user_id;
 
   const handleMeetingSelect = (meeting: Meeting) => {
     // Navigate to the classic room page with the meeting
@@ -86,18 +54,46 @@ export default function RoomPage({ params }: RoomPageProps) {
   };
 
   const handleCreateUnscheduled = async () => {
-    if (!api) return;
-
     try {
       // Create a new unscheduled meeting
-      const meeting = await api.v1RoomsCreateMeeting({ roomName });
+      const meeting = await createMeetingMutation.mutateAsync({
+        params: {
+          path: { room_name: roomName },
+        },
+      });
       handleMeetingSelect(meeting);
     } catch (err) {
       console.error("Failed to create meeting:", err);
     }
   };
 
-  if (loading || checkingMeetings) {
+  // Auto-navigate logic based on query results
+  useEffect(() => {
+    if (!room || isLoading || isCheckingMeetings) return;
+
+    if (room.ics_enabled) {
+      // If there's only one active meeting and no upcoming, auto-join
+      if (activeMeetings.length === 1 && upcomingMeetings.length === 0) {
+        handleMeetingSelect(activeMeetings[0]);
+      } else if (activeMeetings.length === 0 && upcomingMeetings.length === 0) {
+        // No meetings, create unscheduled
+        handleCreateUnscheduled();
+      }
+      // Otherwise, show selection UI (handled by render)
+    } else {
+      // ICS not enabled, use traditional flow
+      handleCreateUnscheduled();
+    }
+  }, [room, activeMeetings, upcomingMeetings, isLoading, isCheckingMeetings]);
+
+  // Handle room not found
+  useEffect(() => {
+    if (roomQuery.isError) {
+      router.push("/rooms");
+    }
+  }, [roomQuery.isError, router]);
+
+  if (isLoading || isCheckingMeetings) {
     return (
       <Box
         minH="100vh"
@@ -106,9 +102,9 @@ export default function RoomPage({ params }: RoomPageProps) {
         justifyContent="center"
         bg="gray.50"
       >
-        <VStack spacing={4}>
+        <VStack gap={4}>
           <Spinner size="xl" color="blue.500" />
-          <Text>{loading ? "Loading room..." : "Checking meetings..."}</Text>
+          <Text>{isLoading ? "Loading room..." : "Checking meetings..."}</Text>
         </VStack>
       </Box>
     );

www/app/room/[roomName]/wait/page.tsx

@@ -6,17 +6,20 @@ import {
   HStack,
   Text,
   Spinner,
-  Progress,
-  Card,
-  CardBody,
   Button,
   Icon,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { FaClock, FaArrowLeft } from "react-icons/fa";
-import useApi from "../../../lib/useApi";
-import { CalendarEventResponse } from "../../../api";
+import type { components } from "../../../reflector-api";
+import {
+  useRoomUpcomingMeetings,
+  useRoomActiveMeetings,
+  useRoomJoinMeeting,
+} from "../../../lib/apiHooks";
+
+type CalendarEventResponse = components["schemas"]["CalendarEventResponse"];
 
 interface WaitingPageProps {
   params: {
@@ -32,37 +35,41 @@ export default function WaitingPage({ params }: WaitingPageProps) {
 
   const [event, setEvent] = useState<CalendarEventResponse | null>(null);
   const [timeRemaining, setTimeRemaining] = useState<number>(0);
-  const [loading, setLoading] = useState(true);
   const [checkingMeeting, setCheckingMeeting] = useState(false);
-  const api = useApi();
+
+  // Use React Query hooks
+  const upcomingMeetingsQuery = useRoomUpcomingMeetings(roomName);
+  const activeMeetingsQuery = useRoomActiveMeetings(roomName);
+  const joinMeetingMutation = useRoomJoinMeeting();
+  const loading = upcomingMeetingsQuery.isLoading;
 
   useEffect(() => {
-    if (!api || !eventId) return;
+    if (!eventId || !upcomingMeetingsQuery.data) return;
 
-    const fetchEvent = async () => {
-      try {
-        const events = await api.v1RoomsListUpcomingMeetings({
-          roomName,
-          minutesAhead: 60,
-        });
+    const targetEvent = upcomingMeetingsQuery.data.find(
+      (e) => e.id === eventId,
+    );
+    if (targetEvent) {
+      setEvent(targetEvent);
+    } else if (!upcomingMeetingsQuery.isLoading) {
+      // Event not found or already started
+      router.push(`/room/${roomName}`);
+    }
+  }, [
+    eventId,
+    upcomingMeetingsQuery.data,
+    upcomingMeetingsQuery.isLoading,
+    router,
+    roomName,
+  ]);
 
-        const targetEvent = events.find((e) => e.id === eventId);
-        if (targetEvent) {
-          setEvent(targetEvent);
-        } else {
-          // Event not found or already started
-          router.push(`/room/${roomName}`);
-        }
-      } catch (err) {
-        console.error("Failed to fetch event:", err);
-        router.push(`/room/${roomName}`);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchEvent();
-  }, [api, eventId, roomName]);
+  // Handle query errors
+  useEffect(() => {
+    if (upcomingMeetingsQuery.error) {
+      console.error("Failed to fetch event:", upcomingMeetingsQuery.error);
+      router.push(`/room/${roomName}`);
+    }
+  }, [upcomingMeetingsQuery.error, router, roomName]);
 
   useEffect(() => {
     if (!event) return;
@@ -81,25 +88,25 @@ export default function WaitingPage({ params }: WaitingPageProps) {
     };
 
     const checkForActiveMeeting = async () => {
-      if (!api || checkingMeeting) return;
+      if (checkingMeeting) return;
 
       setCheckingMeeting(true);
       try {
-        // Check for active meetings
-        const activeMeetings = await api.v1RoomsListActiveMeetings({
-          roomName,
-        });
+        // Refetch active meetings to get latest data
+        const result = await activeMeetingsQuery.refetch();
+        if (!result.data) return;
 
         // Find meeting for this calendar event
-        const calendarMeeting = activeMeetings.find(
+        const calendarMeeting = result.data.find(
           (m) => m.calendar_event_id === eventId,
         );
 
         if (calendarMeeting) {
           // Meeting is now active, join it
-          const meeting = await api.v1RoomsJoinMeeting({
-            roomName,
-            meetingId: calendarMeeting.id,
+          const meeting = await joinMeetingMutation.mutateAsync({
+            params: {
+              path: { room_name: roomName, meeting_id: calendarMeeting.id },
+            },
           });
 
           // Navigate to the meeting room
@@ -128,7 +135,14 @@ export default function WaitingPage({ params }: WaitingPageProps) {
       clearInterval(interval);
       if (checkInterval) clearInterval(checkInterval);
     };
-  }, [event, api, eventId, roomName, checkingMeeting]);
+  }, [
+    event,
+    eventId,
+    roomName,
+    checkingMeeting,
+    activeMeetingsQuery,
+    joinMeetingMutation,
+  ]);
 
   const formatTime = (ms: number) => {
     const totalSeconds = Math.floor(ms / 1000);
@@ -165,7 +179,7 @@ export default function WaitingPage({ params }: WaitingPageProps) {
         justifyContent="center"
         bg="gray.50"
       >
-        <VStack spacing={4}>
+        <VStack gap={4}>
           <Spinner size="xl" color="blue.500" />
           <Text>Loading meeting details...</Text>
         </VStack>
@@ -182,12 +196,10 @@ export default function WaitingPage({ params }: WaitingPageProps) {
         justifyContent="center"
         bg="gray.50"
       >
-        <VStack spacing={4}>
+        <VStack gap={4}>
           <Text fontSize="lg">Meeting not found</Text>
-          <Button
-            leftIcon={<FaArrowLeft />}
-            onClick={() => router.push(`/room/${roomName}`)}
-          >
+          <Button onClick={() => router.push(`/room/${roomName}`)}>
+            <FaArrowLeft />
             Back to Room
           </Button>
         </VStack>
@@ -203,75 +215,91 @@ export default function WaitingPage({ params }: WaitingPageProps) {
       justifyContent="center"
       bg="gray.50"
     >
-      <Card maxW="lg" width="100%" mx={4}>
-        <CardBody>
-          <VStack spacing={6} py={4}>
-            <Icon as={FaClock} boxSize={16} color="blue.500" />
+      <Box
+        maxW="lg"
+        width="100%"
+        mx={4}
+        bg="white"
+        borderRadius="lg"
+        boxShadow="md"
+        p={6}
+      >
+        <VStack gap={6}>
+          <Icon as={FaClock} boxSize={16} color="blue.500" />
 
-            <VStack spacing={2}>
-              <Text fontSize="2xl" fontWeight="bold">
-                {event.title || "Scheduled Meeting"}
-              </Text>
-              <Text color="gray.600" textAlign="center">
-                The meeting will start automatically when it's time
-              </Text>
-            </VStack>
+          <VStack gap={2}>
+            <Text fontSize="2xl" fontWeight="bold">
+              {event.title || "Scheduled Meeting"}
+            </Text>
+            <Text color="gray.600" textAlign="center">
+              The meeting will start automatically when it's time
+            </Text>
+          </VStack>
 
-            <Box width="100%">
-              <Text
-                fontSize="4xl"
-                fontWeight="bold"
-                textAlign="center"
-                color="blue.600"
-              >
-                {formatTime(timeRemaining)}
-              </Text>
-              <Progress
-                value={getProgressValue()}
-                colorScheme="blue"
-                size="sm"
-                mt={4}
+          <Box width="100%">
+            <Text
+              fontSize="4xl"
+              fontWeight="bold"
+              textAlign="center"
+              color="blue.600"
+            >
+              {formatTime(timeRemaining)}
+            </Text>
+            <Box
+              width="100%"
+              height="8px"
+              bg="gray.200"
+              borderRadius="full"
+              mt={4}
+              position="relative"
+              overflow="hidden"
+            >
+              <Box
+                width={`${getProgressValue()}%`}
+                height="100%"
+                bg="blue.500"
                 borderRadius="full"
+                transition="width 0.3s ease"
               />
             </Box>
+          </Box>
 
-            {event.description && (
-              <Box width="100%" p={4} bg="gray.100" borderRadius="md">
-                <Text fontSize="sm" fontWeight="semibold" mb={1}>
-                  Meeting Description
-                </Text>
-                <Text fontSize="sm" color="gray.700">
-                  {event.description}
-                </Text>
-              </Box>
-            )}
-
-            <VStack spacing={3} width="100%">
-              <Text fontSize="sm" color="gray.500">
-                Scheduled for {new Date(event.start_time).toLocaleString()}
+          {event.description && (
+            <Box width="100%" p={4} bg="gray.100" borderRadius="md">
+              <Text fontSize="sm" fontWeight="semibold" mb={1}>
+                Meeting Description
               </Text>
+              <Text fontSize="sm" color="gray.700">
+                {event.description}
+              </Text>
+            </Box>
+          )}
 
-              {checkingMeeting && (
-                <HStack spacing={2}>
-                  <Spinner size="sm" color="blue.500" />
-                  <Text fontSize="sm" color="blue.600">
-                    Checking if meeting has started...
-                  </Text>
-                </HStack>
-              )}
-            </VStack>
+          <VStack gap={3} width="100%">
+            <Text fontSize="sm" color="gray.500">
+              Scheduled for {new Date(event.start_time).toLocaleString()}
+            </Text>
 
-            <Button
-              variant="outline"
-              leftIcon={<FaArrowLeft />}
-              onClick={() => router.push(`/room/${roomName}`)}
-              width="100%"
-            >
-              Back to Meeting Selection
-            </Button>
+            {checkingMeeting && (
+              <HStack gap={2}>
+                <Spinner size="sm" color="blue.500" />
+                <Text fontSize="sm" color="blue.600">
+                  Checking if meeting has started...
+                </Text>
+              </HStack>
+            )}
           </VStack>
-        </CardBody>
-      </Card>
+
+          <Button
+            variant="outline"
+            onClick={() => router.push(`/room/${roomName}`)}
+            width="100%"
+          >
+            <FaArrowLeft />
+            Back to Meeting Selection
+          </Button>
+        </VStack>
+      </Box>
     </Box>
   );
 }