Add shared rooms

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

@@ -74,6 +74,9 @@ export default function TranscriptBrowser() {
     React.useState<string>();
   const [deletedItemIds, setDeletedItemIds] = React.useState<string[]>();
 
+  const myRooms = rooms.filter((room) => !room.is_shared);
+  const sharedRooms = rooms.filter((room) => room.is_shared);
+
   useEffect(() => {
     setDeletedItemIds([]);
   }, [page, response]);
@@ -102,6 +105,7 @@ export default function TranscriptBrowser() {
   const handleSearch = () => {
     setPage(1);
     setSearchTerm(searchInputValue);
+    setSelectedSourceKind(null);
     setSelectedRoomId("");
     refetch();
   };
@@ -205,13 +209,42 @@ export default function TranscriptBrowser() {
 
             <Divider />
 
-            {rooms.length > 0 && (
+            {myRooms.length > 0 && (
               <>
-                <Heading size="sm" mb={2}>
-                  My Rooms
-                </Heading>
+                <Heading size="sm">My Rooms</Heading>
 
-                {rooms.map((room) => (
+                {myRooms.map((room) => (
+                  <Link
+                    key={room.id}
+                    as={NextLink}
+                    href="#"
+                    onClick={() => handleFilterTranscripts("room", room.id)}
+                    color={
+                      selectedSourceKind === "room" &&
+                      selectedRoomId === room.id
+                        ? "blue.500"
+                        : "gray.600"
+                    }
+                    _hover={{ color: "blue.300" }}
+                    fontWeight={
+                      selectedSourceKind === "room" &&
+                      selectedRoomId === room.id
+                        ? "bold"
+                        : "normal"
+                    }
+                    ml={4}
+                  >
+                    {room.name}
+                  </Link>
+                ))}
+              </>
+            )}
+
+            {sharedRooms.length > 0 && (
+              <>
+                <Heading size="sm">Shared Rooms</Heading>
+
+                {sharedRooms.map((room) => (
                   <Link
                     key={room.id}
                     as={NextLink}

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

@@ -65,6 +65,7 @@ const roomInitialState = {
   roomMode: "normal",
   recordingType: "cloud",
   recordingTrigger: "automatic-2nd-participant",
+  isShared: false,
 };
 
 export default function RoomsList() {
@@ -159,6 +160,7 @@ export default function RoomsList() {
         room_mode: room.roomMode,
         recording_type: room.recordingType,
         recording_trigger: room.recordingTrigger,
+        is_shared: room.isShared,
       };
 
       if (isEditing) {
@@ -203,6 +205,7 @@ export default function RoomsList() {
       roomMode: roomData.room_mode,
       recordingType: roomData.recording_type,
       recordingTrigger: roomData.recording_trigger,
+      isShared: roomData.is_shared,
     });
     setEditRoomId(roomId);
     setIsEditing(true);
@@ -236,6 +239,11 @@ export default function RoomsList() {
     });
   };
 
+  const myRooms =
+    response?.items.filter((roomData) => !roomData.is_shared) || [];
+  const sharedRooms =
+    response?.items.filter((roomData) => roomData.is_shared) || [];
+
   if (loading && !response)
     return (
       <Flex flexDir="column" align="center" justify="center" h="100%">
@@ -375,6 +383,15 @@ export default function RoomsList() {
                     isDisabled={!room.zulipAutoPost}
                   />
                 </FormControl>
+                <FormControl mt={4}>
+                  <Checkbox
+                    name="isShared"
+                    isChecked={room.isShared}
+                    onChange={handleRoomChange}
+                  >
+                    Shared room
+                  </Checkbox>
+                </FormControl>
               </ModalBody>
 
               <ModalFooter>
@@ -396,9 +413,10 @@ export default function RoomsList() {
           </Modal>
         </Flex>
 
-        <VStack>
-          {response?.items && response.items.length > 0 ? (
-            response.items.map((roomData) => (
+        <VStack align="start" mb={6} pt={4} gap={4}>
+          <Heading size="md">My Rooms</Heading>
+          {myRooms.length > 0 ? (
+            myRooms.map((roomData) => (
               <Card w={"full"} key={roomData.id}>
                 <CardBody>
                   <Flex align={"center"}>
@@ -445,9 +463,61 @@ export default function RoomsList() {
               </Card>
             ))
           ) : (
-            <Flex flexDir="column" align="center" justify="center" h="100%">
-              <Text>No rooms found</Text>
-            </Flex>
+            <Text>No rooms found</Text>
+          )}
+        </VStack>
+
+        <VStack align="start">
+          <Heading size="md">Shared Rooms</Heading>
+          {sharedRooms.length > 0 ? (
+            sharedRooms.map((roomData) => (
+              <Card w={"full"} key={roomData.id}>
+                <CardBody>
+                  <Flex align={"center"}>
+                    <Heading size="md">
+                      <Link href={`/${roomData.name}`}>{roomData.name}</Link>
+                    </Heading>
+                    <Spacer />
+                    {linkCopied === roomData.name ? (
+                      <Text mr={2} color="green.500">
+                        Link copied!
+                      </Text>
+                    ) : (
+                      <IconButton
+                        aria-label="Copy URL"
+                        icon={<FaLink />}
+                        onClick={() => handleCopyUrl(roomData.name)}
+                        mr={2}
+                      />
+                    )}
+
+                    <Menu closeOnSelect={true}>
+                      <MenuButton
+                        as={IconButton}
+                        icon={<FaEllipsisVertical />}
+                        aria-label="actions"
+                      />
+                      <MenuList>
+                        <MenuItem
+                          onClick={() => handleEditRoom(roomData.id, roomData)}
+                          icon={<FaPencil />}
+                        >
+                          Edit
+                        </MenuItem>
+                        <MenuItem
+                          onClick={() => handleDeleteRoom(roomData.id)}
+                          icon={<FaTrash color={"red.500"} />}
+                        >
+                          Delete
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </Flex>
+                </CardBody>
+              </Card>
+            ))
+          ) : (
+            <Text>No shared rooms found</Text>
           )}
         </VStack>
       </Container>

www/app/api/schemas.gen.ts

@@ -736,6 +736,10 @@ export const $Room = {
       type: "string",
       title: "Recording Trigger",
     },
+    is_shared: {
+      type: "boolean",
+      title: "Is Shared",
+    },
   },
   type: "object",
   required: [
@@ -750,6 +754,7 @@ export const $Room = {
     "room_mode",
     "recording_type",
     "recording_trigger",
+    "is_shared",
   ],
   title: "Room",
 } as const;

www/app/api/types.gen.ts

@@ -143,6 +143,7 @@ export type Room = {
   room_mode: string;
   recording_type: string;
   recording_trigger: string;
+  is_shared: boolean;
 };
 
 export type RtcOffer = {