feat: implement tabbed interface for room edit dialog

- Add General, Calendar, and Share tabs to organize room settings
- Move ICS settings to dedicated Calendar tab
- Move Zulip configuration to Share tab
- Keep basic room settings and webhooks in General tab
- Remove redundant migration file
- Fix Chakra UI v3 compatibility issues in calendar components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

server/migrations/versions/a256772ef058_add_ics_uid_to_calendar_event.py

@@ -1,46 +0,0 @@
-"""add_ics_uid_to_calendar_event
-
-Revision ID: a256772ef058
-Revises: d4a1c446458c
-Create Date: 2025-08-19 09:27:26.472456
-
-"""
-
-from typing import Sequence, Union
-
-import sqlalchemy as sa
-from alembic import op
-
-# revision identifiers, used by Alembic.
-revision: str = "a256772ef058"
-down_revision: Union[str, None] = "d4a1c446458c"
-branch_labels: Union[str, Sequence[str], None] = None
-depends_on: Union[str, Sequence[str], None] = None
-
-
-def upgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table("calendar_event", schema=None) as batch_op:
-        batch_op.add_column(sa.Column("ics_uid", sa.Text(), nullable=False))
-        batch_op.drop_constraint(batch_op.f("uq_room_calendar_event"), type_="unique")
-        batch_op.create_unique_constraint(
-            "uq_room_calendar_event", ["room_id", "ics_uid"]
-        )
-        batch_op.drop_column("external_id")
-
-    # ### end Alembic commands ###
-
-
-def downgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table("calendar_event", schema=None) as batch_op:
-        batch_op.add_column(
-            sa.Column("external_id", sa.TEXT(), autoincrement=False, nullable=True)
-        )
-        batch_op.drop_constraint("uq_room_calendar_event", type_="unique")
-        batch_op.create_unique_constraint(
-            batch_op.f("uq_room_calendar_event"), ["room_id", "external_id"]
-        )
-        batch_op.drop_column("ics_uid")
-
-    # ### end Alembic commands ###

www/app/(app)/rooms/[roomName]/calendar/page.tsx

@@ -5,69 +5,60 @@ import {
   VStack,
   Heading,
   Text,
-  Card,
   HStack,
   Badge,
   Spinner,
   Flex,
   Link,
   Button,
-  Alert,
   IconButton,
   Tooltip,
   Wrap,
 } from "@chakra-ui/react";
 import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { FaSync, FaClock, FaUsers, FaEnvelope } from "react-icons/fa";
 import { LuArrowLeft } from "react-icons/lu";
-import useApi from "../../../../lib/useApi";
-import { CalendarEventResponse } from "../../../../api";
+import {
+  useRoomCalendarEvents,
+  useRoomIcsSync,
+} from "../../../../lib/apiHooks";
+import type { components } from "../../../../reflector-api";
+
+type CalendarEventResponse = components["schemas"]["CalendarEventResponse"];
 
 export default function RoomCalendarPage() {
   const params = useParams();
   const router = useRouter();
   const roomName = params.roomName as string;
-  const api = useApi();
 
-  const [events, setEvents] = useState<CalendarEventResponse[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [syncing, setSyncing] = useState(false);
 
-  const fetchEvents = async () => {
-    if (!api) return;
+  // React Query hooks
+  const eventsQuery = useRoomCalendarEvents(roomName);
+  const syncMutation = useRoomIcsSync();
 
-    try {
-      setLoading(true);
-      setError(null);
-      const response = await api.v1RoomsListMeetings({ roomName });
-      setEvents(response);
-    } catch (err: any) {
-      setError(err.body?.detail || "Failed to load calendar events");
-    } finally {
-      setLoading(false);
-    }
-  };
+  const events = eventsQuery.data || [];
+  const loading = eventsQuery.isLoading;
+  const error = eventsQuery.error ? "Failed to load calendar events" : null;
 
   const handleSync = async () => {
-    if (!api) return;
-
     try {
       setSyncing(true);
-      await api.v1RoomsSyncIcs({ roomName });
-      await fetchEvents(); // Refresh events after sync
+      await syncMutation.mutateAsync({
+        params: {
+          path: { room_name: roomName },
+        },
+      });
+      // Refetch events after sync
+      await eventsQuery.refetch();
     } catch (err: any) {
-      setError(err.body?.detail || "Failed to sync calendar");
+      console.error("Sync failed:", err);
     } finally {
       setSyncing(false);
     }
   };
 
-  useEffect(() => {
-    fetchEvents();
-  }, [api, roomName]);
-
   const formatEventTime = (start: string, end: string) => {
     const startDate = new Date(start);
     const endDate = new Date(end);
@@ -125,7 +116,7 @@ export default function RoomCalendarPage() {
       <HStack fontSize="sm" color="gray.600" flexWrap="wrap">
         <FaUsers />
         <Text>Attendees:</Text>
-        <Wrap spacing={2}>
+        <Wrap gap={2}>
           {attendees.map((attendee, index) => {
             const email = getAttendeeEmail(attendee);
             const display = getAttendeeDisplay(attendee);
@@ -178,9 +169,9 @@ export default function RoomCalendarPage() {
 
   return (
     <Box w={{ base: "full", md: "container.xl" }} mx="auto" pt={2}>
-      <VStack align="stretch" spacing={6}>
+      <VStack align="stretch" gap={6}>
         <Flex justify="space-between" align="center">
-          <HStack spacing={3}>
+          <HStack gap={3}>
             <IconButton
               aria-label="Back to rooms"
               title="Back to rooms"
@@ -192,21 +183,25 @@ export default function RoomCalendarPage() {
             </IconButton>
             <Heading size="lg">Calendar for {roomName}</Heading>
           </HStack>
-          <Button
-            colorPalette="blue"
-            onClick={handleSync}
-            leftIcon={syncing ? <Spinner size="sm" /> : <FaSync />}
-            disabled={syncing}
-          >
+          <Button colorPalette="blue" onClick={handleSync} disabled={syncing}>
+            {syncing ? <Spinner size="sm" /> : <FaSync />}
             Force Sync
           </Button>
         </Flex>
 
         {error && (
-          <Alert.Root status="error">
-            <Alert.Indicator />
-            <Alert.Title>{error}</Alert.Title>
-          </Alert.Root>
+          <Box
+            p={4}
+            borderRadius="md"
+            bg="red.50"
+            borderLeft="4px solid"
+            borderColor="red.400"
+          >
+            <Text fontWeight="semibold" color="red.800">
+              Error
+            </Text>
+            <Text color="red.700">{error}</Text>
+          </Box>
         )}
 
         {loading ? (
@@ -214,32 +209,33 @@ export default function RoomCalendarPage() {
             <Spinner size="xl" />
           </Flex>
         ) : events.length === 0 ? (
-          <Card.Root>
-            <Card.Body>
+          <Box bg="white" borderRadius="lg" boxShadow="md" p={6}>
             <Text textAlign="center" color="gray.500">
               No calendar events found. Make sure your calendar is configured
               and synced.
             </Text>
-            </Card.Body>
-          </Card.Root>
+          </Box>
         ) : (
-          <VStack align="stretch" spacing={6}>
+          <VStack align="stretch" gap={6}>
             {/* Active Events */}
             {activeEvents.length > 0 && (
               <Box>
                 <Heading size="md" mb={3} color="green.600">
                   Active Now
                 </Heading>
-                <VStack align="stretch" spacing={3}>
+                <VStack align="stretch" gap={3}>
                   {activeEvents.map((event) => (
-                    <Card.Root
+                    <Box
                       key={event.id}
+                      bg="white"
+                      borderRadius="lg"
+                      boxShadow="md"
+                      p={6}
                       borderColor="green.200"
                       borderWidth={2}
                     >
-                      <Card.Body>
                       <Flex justify="space-between" align="start">
-                          <VStack align="start" spacing={2} flex={1}>
+                        <VStack align="start" gap={2} flex={1}>
                           <HStack>
                             <Heading size="sm">
                               {event.title || "Untitled Event"}
@@ -256,11 +252,7 @@ export default function RoomCalendarPage() {
                             </Text>
                           </HStack>
                           {event.description && (
-                              <Text
-                                fontSize="sm"
-                                color="gray.700"
-                                noOfLines={2}
-                              >
+                            <Text fontSize="sm" color="gray.700" noOfLines={2}>
                               {event.description}
                             </Text>
                           )}
@@ -272,8 +264,7 @@ export default function RoomCalendarPage() {
                           </Button>
                         </Link>
                       </Flex>
-                      </Card.Body>
-                    </Card.Root>
+                    </Box>
                   ))}
                 </VStack>
               </Box>

www/app/(app)/rooms/_components/ICSSettings.tsx

@@ -143,11 +143,7 @@ export default function ICSSettings({
   }
 
   return (
-    <VStack gap={4} align="stretch" mt={6}>
-      <Text fontWeight="semibold" fontSize="lg">
-        Calendar Integration (ICS)
-      </Text>
-
+    <VStack gap={4} align="stretch">
       <Field.Root>
         <Checkbox.Root
           checked={icsEnabled}

www/app/(app)/rooms/page.tsx

@@ -14,6 +14,7 @@ import {
   IconButton,
   createListCollection,
   useDisclosure,
+  Tabs,
 } from "@chakra-ui/react";
 import { useEffect, useMemo, useState } from "react";
 import { LuEye, LuEyeOff } from "react-icons/lu";
@@ -442,6 +443,14 @@ export default function RoomsList() {
               </Dialog.CloseTrigger>
             </Dialog.Header>
             <Dialog.Body>
+              <Tabs.Root defaultValue="general">
+                <Tabs.List>
+                  <Tabs.Trigger value="general">General</Tabs.Trigger>
+                  <Tabs.Trigger value="calendar">Calendar</Tabs.Trigger>
+                  <Tabs.Trigger value="share">Share</Tabs.Trigger>
+                </Tabs.List>
+
+                <Tabs.Content value="general" pt={6}>
                   <Field.Root>
                     <Field.Label>Room name</Field.Label>
                     <Input
@@ -453,7 +462,9 @@ export default function RoomsList() {
                     <Field.HelperText>
                       No spaces or special characters allowed
                     </Field.HelperText>
-                {nameError && <Field.ErrorText>{nameError}</Field.ErrorText>}
+                    {nameError && (
+                      <Field.ErrorText>{nameError}</Field.ErrorText>
+                    )}
                   </Field.Root>
 
                   <Field.Root mt={4}>
@@ -478,6 +489,7 @@ export default function RoomsList() {
                       <Checkbox.Label>Locked room</Checkbox.Label>
                     </Checkbox.Root>
                   </Field.Root>
+
                   <Field.Root mt={4}>
                     <Field.Label>Room size</Field.Label>
                     <Select.Root
@@ -508,6 +520,7 @@ export default function RoomsList() {
                       </Select.Positioner>
                     </Select.Root>
                   </Field.Root>
+
                   <Field.Root mt={4}>
                     <Field.Label>Recording type</Field.Label>
                     <Select.Root
@@ -517,7 +530,9 @@ export default function RoomsList() {
                           ...room,
                           recordingType: e.value[0],
                           recordingTrigger:
-                        e.value[0] !== "cloud" ? "none" : room.recordingTrigger,
+                            e.value[0] !== "cloud"
+                              ? "none"
+                              : room.recordingTrigger,
                         })
                       }
                       collection={recordingTypeCollection}
@@ -543,6 +558,7 @@ export default function RoomsList() {
                       </Select.Positioner>
                     </Select.Root>
                   </Field.Root>
+
                   <Field.Root mt={4}>
                     <Field.Label>Cloud recording start trigger</Field.Label>
                     <Select.Root
@@ -574,14 +590,15 @@ export default function RoomsList() {
                       </Select.Positioner>
                     </Select.Root>
                   </Field.Root>
-              <Field.Root mt={8}>
+
+                  <Field.Root mt={4}>
                     <Checkbox.Root
-                  name="zulipAutoPost"
-                  checked={room.zulipAutoPost}
+                      name="isShared"
+                      checked={room.isShared}
                       onCheckedChange={(e) => {
                         const syntheticEvent = {
                           target: {
-                        name: "zulipAutoPost",
+                            name: "isShared",
                             type: "checkbox",
                             checked: e.checked,
                           },
@@ -593,77 +610,9 @@ export default function RoomsList() {
                       <Checkbox.Control>
                         <Checkbox.Indicator />
                       </Checkbox.Control>
-                  <Checkbox.Label>
-                    Automatically post transcription to Zulip
-                  </Checkbox.Label>
+                      <Checkbox.Label>Shared room</Checkbox.Label>
                     </Checkbox.Root>
                   </Field.Root>
-              <Field.Root mt={4}>
-                <Field.Label>Zulip stream</Field.Label>
-                <Select.Root
-                  value={room.zulipStream ? [room.zulipStream] : []}
-                  onValueChange={(e) =>
-                    setRoomInput({
-                      ...room,
-                      zulipStream: e.value[0],
-                      zulipTopic: "",
-                    })
-                  }
-                  collection={streamCollection}
-                  disabled={!room.zulipAutoPost}
-                >
-                  <Select.HiddenSelect />
-                  <Select.Control>
-                    <Select.Trigger>
-                      <Select.ValueText placeholder="Select stream" />
-                    </Select.Trigger>
-                    <Select.IndicatorGroup>
-                      <Select.Indicator />
-                    </Select.IndicatorGroup>
-                  </Select.Control>
-                  <Select.Positioner>
-                    <Select.Content>
-                      {streamOptions.map((option) => (
-                        <Select.Item key={option.value} item={option}>
-                          {option.label}
-                          <Select.ItemIndicator />
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select.Positioner>
-                </Select.Root>
-              </Field.Root>
-              <Field.Root mt={4}>
-                <Field.Label>Zulip topic</Field.Label>
-                <Select.Root
-                  value={room.zulipTopic ? [room.zulipTopic] : []}
-                  onValueChange={(e) =>
-                    setRoomInput({ ...room, zulipTopic: e.value[0] })
-                  }
-                  collection={topicCollection}
-                  disabled={!room.zulipAutoPost}
-                >
-                  <Select.HiddenSelect />
-                  <Select.Control>
-                    <Select.Trigger>
-                      <Select.ValueText placeholder="Select topic" />
-                    </Select.Trigger>
-                    <Select.IndicatorGroup>
-                      <Select.Indicator />
-                    </Select.IndicatorGroup>
-                  </Select.Control>
-                  <Select.Positioner>
-                    <Select.Content>
-                      {topicOptions.map((option) => (
-                        <Select.Item key={option.value} item={option}>
-                          {option.label}
-                          <Select.ItemIndicator />
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select.Positioner>
-                </Select.Root>
-              </Field.Root>
 
                   {/* Webhook Configuration Section */}
                   <Field.Root mt={8}>
@@ -676,8 +625,8 @@ export default function RoomsList() {
                       onChange={handleRoomChange}
                     />
                     <Field.HelperText>
-                  Optional: URL to receive notifications when transcripts are
-                  ready
+                      Optional: URL to receive notifications when transcripts
+                      are ready
                     </Field.HelperText>
                   </Field.Root>
 
@@ -703,7 +652,9 @@ export default function RoomsList() {
                               size="sm"
                               variant="ghost"
                               aria-label={
-                            showWebhookSecret ? "Hide secret" : "Show secret"
+                                showWebhookSecret
+                                  ? "Hide secret"
+                                  : "Show secret"
                               }
                               onClick={() =>
                                 setShowWebhookSecret(!showWebhookSecret)
@@ -714,8 +665,8 @@ export default function RoomsList() {
                           )}
                         </Flex>
                         <Field.HelperText>
-                      Used for HMAC signature verification (auto-generated if
-                      left empty)
+                          Used for HMAC signature verification (auto-generated
+                          if left empty)
                         </Field.HelperText>
                       </Field.Root>
 
@@ -766,30 +717,9 @@ export default function RoomsList() {
                       )}
                     </>
                   )}
+                </Tabs.Content>
 
-              <Field.Root mt={4}>
-                <Checkbox.Root
-                  name="isShared"
-                  checked={room.isShared}
-                  onCheckedChange={(e) => {
-                    const syntheticEvent = {
-                      target: {
-                        name: "isShared",
-                        type: "checkbox",
-                        checked: e.checked,
-                      },
-                    };
-                    handleRoomChange(syntheticEvent);
-                  }}
-                >
-                  <Checkbox.HiddenInput />
-                  <Checkbox.Control>
-                    <Checkbox.Indicator />
-                  </Checkbox.Control>
-                  <Checkbox.Label>Shared room</Checkbox.Label>
-                </Checkbox.Root>
-              </Field.Root>
-
+                <Tabs.Content value="calendar" pt={6}>
                   <ICSSettings
                     roomId={editRoomId ?? undefined}
                     roomName={room.name}
@@ -815,6 +745,103 @@ export default function RoomsList() {
                     }}
                     isOwner={true}
                   />
+                </Tabs.Content>
+
+                <Tabs.Content value="share" pt={6}>
+                  <Field.Root>
+                    <Checkbox.Root
+                      name="zulipAutoPost"
+                      checked={room.zulipAutoPost}
+                      onCheckedChange={(e) => {
+                        const syntheticEvent = {
+                          target: {
+                            name: "zulipAutoPost",
+                            type: "checkbox",
+                            checked: e.checked,
+                          },
+                        };
+                        handleRoomChange(syntheticEvent);
+                      }}
+                    >
+                      <Checkbox.HiddenInput />
+                      <Checkbox.Control>
+                        <Checkbox.Indicator />
+                      </Checkbox.Control>
+                      <Checkbox.Label>
+                        Automatically post transcription to Zulip
+                      </Checkbox.Label>
+                    </Checkbox.Root>
+                  </Field.Root>
+
+                  <Field.Root mt={4}>
+                    <Field.Label>Zulip stream</Field.Label>
+                    <Select.Root
+                      value={room.zulipStream ? [room.zulipStream] : []}
+                      onValueChange={(e) =>
+                        setRoomInput({
+                          ...room,
+                          zulipStream: e.value[0],
+                          zulipTopic: "",
+                        })
+                      }
+                      collection={streamCollection}
+                      disabled={!room.zulipAutoPost}
+                    >
+                      <Select.HiddenSelect />
+                      <Select.Control>
+                        <Select.Trigger>
+                          <Select.ValueText placeholder="Select stream" />
+                        </Select.Trigger>
+                        <Select.IndicatorGroup>
+                          <Select.Indicator />
+                        </Select.IndicatorGroup>
+                      </Select.Control>
+                      <Select.Positioner>
+                        <Select.Content>
+                          {streamOptions.map((option) => (
+                            <Select.Item key={option.value} item={option}>
+                              {option.label}
+                              <Select.ItemIndicator />
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select.Positioner>
+                    </Select.Root>
+                  </Field.Root>
+
+                  <Field.Root mt={4}>
+                    <Field.Label>Zulip topic</Field.Label>
+                    <Select.Root
+                      value={room.zulipTopic ? [room.zulipTopic] : []}
+                      onValueChange={(e) =>
+                        setRoomInput({ ...room, zulipTopic: e.value[0] })
+                      }
+                      collection={topicCollection}
+                      disabled={!room.zulipAutoPost}
+                    >
+                      <Select.HiddenSelect />
+                      <Select.Control>
+                        <Select.Trigger>
+                          <Select.ValueText placeholder="Select topic" />
+                        </Select.Trigger>
+                        <Select.IndicatorGroup>
+                          <Select.Indicator />
+                        </Select.IndicatorGroup>
+                      </Select.Control>
+                      <Select.Positioner>
+                        <Select.Content>
+                          {topicOptions.map((option) => (
+                            <Select.Item key={option.value} item={option}>
+                              {option.label}
+                              <Select.ItemIndicator />
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select.Positioner>
+                    </Select.Root>
+                  </Field.Root>
+                </Tabs.Content>
+              </Tabs.Root>
             </Dialog.Body>
             <Dialog.Footer>
               <Button variant="ghost" onClick={handleCloseDialog}>

www/app/lib/apiHooks.ts

@@ -710,3 +710,20 @@ export function useRoomIcsStatus(roomName: string | null) {
     },
   );
 }
+
+export function useRoomCalendarEvents(roomName: string | null) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/rooms/{room_name}/meetings",
+    {
+      params: {
+        path: { room_name: roomName || "" },
+      },
+    },
+    {
+      enabled: !!roomName && isAuthenticated,
+    },
+  );
+}