Enhance DraggableContainer with new props for enabling/disabling functionality and dragging. Update Popup components to improve structure and responsiveness, removing unnecessary draggable props. Integrate console logging for debugging in PopupContainer and ControlsPopover.

client/src/components/ui/ControlsPopover.tsx

@@ -38,17 +38,26 @@ function ControlsPopover() {
     };
   }, []);
 
-  const { setPopup } = usePopupStore();
+  const { popup, setPopup } = usePopupStore();
   const { setModal } = useModalStore();
 
+  function handleClickOpenChatPopup() {
+    console.log("handleClickOpenChatPopup");
+    setPopup(<ChatPopup />);
+  }
+
+  useEffect(() => {
+    console.log(popup);
+  }, [popup]);
+
   return (
-    <div className="2xl:hidden order-3 relative">
+    <div className="relative order-3 2xl:hidden">
       <FloatingActionButton
         ref={buttonRef}
         className={clsx(isOpened && "!bg-[#7B60F3]")}
         onClick={() => setIsOpened(!isOpened)}
       >
-        <div className="size-4 text-white">
+        <div className="text-white size-4">
           <MoreIcon />
         </div>
       </FloatingActionButton>
@@ -60,7 +69,7 @@ function ControlsPopover() {
         <Button
           variant="tertiary"
           className="w-full !justify-start"
-          onClick={() => setPopup(<ChatPopup />)}
+          onClick={handleClickOpenChatPopup}
         >
           <div className="size-4">
             <ChatFilledIcon />