Dannguyen/same room dialog

compose.yml

@@ -11,10 +11,10 @@ services:
       - 3002:3002
       - 3003:3003
       # See entrypoint - used for remote-devtools
-      - 8000:8000
-      - 8001:8001
-      - 8002:8002
-      - 8003:8003
+      # - 8000:8000
+      # - 8001:8001
+      # - 8002:8002
+      # - 8003:8003
     environment:
       # Used by entrypoint
       - DATA_DIR=/app/mnt/data

extension/src/components/dialog/AlreadyInRoomDialog.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@cb/lib/components/ui/button";
+import { DialogClose } from "@cb/lib/components/ui/dialog";
+import { cn } from "@cb/utils/cn";
+import { DialogOverlay } from "@radix-ui/react-dialog";
+import { RoomDialog, baseButtonClassName } from "./RoomDialog";
+
+interface AlreadyInRoomDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onCancel: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const AlreadyInRoomDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+}: AlreadyInRoomDialogProps) => {
+  return (
+    <RoomDialog
+      dialog={{ props: { open, onOpenChange } }}
+      title={{ node: "This account is already in the room" }}
+      content={{
+        props: {
+          className:
+            "w-[400px] gap-y-4 rounded-xl bg-white p-6 text-lg text-[#1E1E1E] dark:bg-[#262626] shadow-lg dark:text-[#FFFFFF]",
+          onClick: (e) => e.stopPropagation(),
+        },
+      }}
+      overlay={
+        <DialogOverlay className="fixed inset-0 z-[9999] dark:bg-black/30 bg-white/30 backdrop-blur-sm" />
+      }
+    >
+      <div className="flex w-full items-center justify-end gap-2">
+        <DialogClose asChild>
+          <Button
+            className={cn(baseButtonClassName, "flex-1")}
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+        </DialogClose>
+        <Button
+          className={cn(baseButtonClassName, "flex-1 bg-orange-500")}
+          onClick={onConfirm}
+        >
+          Join anyway
+        </Button>
+      </div>
+    </RoomDialog>
+  );
+};

extension/src/components/panel/BrowsePanel.tsx

@@ -1,3 +1,4 @@
+import { AlreadyInRoomDialog } from "@cb/components/dialog/AlreadyInRoomDialog";
 import { baseButtonClassName } from "@cb/components/dialog/RoomDialog";
 import { DefaultTable } from "@cb/components/table/DefaultTable";
 import { DefaultTableBody } from "@cb/components/table/DefaultTableBody";
@@ -6,12 +7,14 @@ import { DefaultTableRow } from "@cb/components/table/DefaultTableRow";
 import { Tooltip } from "@cb/components/tooltip";
 import { CSS, ROOM } from "@cb/constants";
 import { useRoomActions } from "@cb/hooks/store";
+import usePaginate from "@cb/hooks/usePaginate";
 import { Button } from "@cb/lib/components/ui/button";
 import InfiniteScroll from "@cb/lib/components/ui/InfiniteScroll";
 import { Input } from "@cb/lib/components/ui/input";
 import { Spinner } from "@cb/lib/components/ui/spinner";
 import { TableCell, TableRow } from "@cb/lib/components/ui/table";
 import { roomQuery } from "@cb/services/db";
+import { cn } from "@cb/utils/cn";
 import { throttle } from "lodash";
 import { CornerUpLeft } from "lucide-react";
 import React from "react";
@@ -21,11 +24,16 @@ const HOOK_LIMIT = 100;
 export const BrowsePanel = () => {
   const { home } = useRoomActions();
   const { join } = useRoomActions();
+  const { checkAlreadyInRoom } = useRoomActions();
+  const [showDialog, setShowDialog] = React.useState(false);
   const [inputRoomId, setInputRoomId] = React.useState("");
   const { data, loading, getNext, hasNext } = usePaginate({
     baseQuery: roomQuery,
     hookLimit: HOOK_LIMIT,
   });
+  React.useEffect(() => {
+    console.log("showDialog changed to:", showDialog);
+  }, [showDialog]);
 
   const onJoinRoom = React.useMemo(() => {
     return throttle(
@@ -34,11 +42,36 @@ export const BrowsePanel = () => {
         roomId: string
       ) => {
         reactEvent.stopPropagation();
+        const alreadyInRoom = await checkAlreadyInRoom(roomId);
+        if (alreadyInRoom) {
+          console.log("Already in the room - opening dialog");
+          setShowDialog(true);
+          return;
+        }
+        console.log("Joining room:", roomId);
         await join(roomId);
       },
       1000
     );
-  }, [join]);
+  }, [join, checkAlreadyInRoom]);
+
+  const onJoinAnyway = React.useMemo(() => {
+    return throttle(
+      async (
+        reactEvent: React.MouseEvent<Element> | React.KeyboardEvent<Element>
+      ) => {
+        reactEvent.stopPropagation();
+        setShowDialog(false);
+        await join(inputRoomId);
+        console.log("Joining anyway");
+      },
+      1000
+    );
+  }, [join, inputRoomId]);
+
+  const onCancel = () => {
+    setShowDialog(false);
+  };
 
   const onChangeRoomIdInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
@@ -47,6 +80,12 @@ export const BrowsePanel = () => {
 
   return (
     <div className="h-full w-full flex flex-col">
+      <AlreadyInRoomDialog
+        open={showDialog}
+        onOpenChange={setShowDialog}
+        onConfirm={onJoinAnyway}
+        onCancel={onCancel}
+      />
       <div className="w-full flex flex-row-reverse">
         <Tooltip
           trigger={{

extension/src/components/ui/Header.tsx

@@ -11,7 +11,7 @@ const Header = ({ className, ...props }: HeaderProps) => {
         <ThemeAwaredLogo />
       </div>
       <h2 className="font-medium">
-        Code<span className="text-codebuddy-pink">Buddy</span>
+        Code<span className="text-codebuddy-pink">Buddy2</span>
       </h2>
     </div>
   );

extension/src/store/roomStore.ts

@@ -110,6 +110,7 @@ interface RoomAction {
     selectSidebarTab: (identifier: SidebarTabIdentifier) => void;
     closeSidebarTab: () => void;
     getVariables: (url: string) => Question["variables"] | undefined;
+    checkAlreadyInRoom: (id: Id) => Promise<boolean>;
   };
   peers: {
     update: (id: Id, peer: Partial<UpdatePeerArgs>) => Promise<void>;
@@ -411,6 +412,26 @@ const createRoomStore = (background: BackgroundProxy, appStore: AppStore) => {
                 });
               }
             },
+            checkAlreadyInRoom: async (id: string) => {
+              try {
+                const username = appStore
+                  .getState()
+                  .actions.getAuthUser().username;
+                const room = await db.room.get(id);
+                if (room && Object.keys(room.users).includes(username)) {
+                  console.log(`User ${username} is already in room ${id}`);
+                  set((state) => {
+                    state.status = RoomStatus.IN_ROOM;
+                  });
+
+                  return true;
+                }
+                return false;
+              } catch (error) {
+                console.error("Failed to check already in room", error);
+                return false;
+              }
+            },
             leave: async () => {
               try {
                 get().actions.room.loading();