Enhance Modal and Popup components with drag-and-drop functionality for mobile responsiveness. Implement drag handling in ModalContainer and PopupContainer, and adjust layout in ModalWrapper and PopupWrapper for better user experience. Update Tooltip and ActionsPopover for improved positioning and visibility. Clean up unused code and comments in HomePage and popupStore.

client/src/components/ui/ControlsPopover.tsx

@@ -1,7 +1,7 @@
 import FloatingActionButton from "./FloatingActionButton";
 import PopoverWrapper from "./PopoverWrapper";
 import MoreIcon from "../icons/MoreIcon";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import Button from "./Button";
 import ChatFilledIcon from "../icons/ChatFilledIcon";
 import UsersFilledIcon from "../icons/UsersFilledIcon";
@@ -14,44 +14,40 @@ import ParticipantsPopup from "../popups/ParticipantsPopup";
 import SharePopup from "../popups/SharePopup";
 import SettingsModal from "../modals/SettingsModal";
 import clsx from "clsx";
+import { useClickAway } from "@uidotdev/usehooks";
 
 function ControlsPopover() {
   const [isOpened, setIsOpened] = useState(false);
 
   const buttonRef = useRef<HTMLButtonElement>(null);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setIsOpened(false);
-      }
-    };
+  const ref = useClickAway<HTMLDivElement>(() => setIsOpened(false));
 
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("touchstart", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("touchstart", handleClickOutside);
-    };
-  }, []);
-
-  const { popup, setPopup } = usePopupStore();
+  const { setPopup } = usePopupStore();
   const { setModal } = useModalStore();
 
   function handleClickOpenChatPopup() {
-    console.log("handleClickOpenChatPopup");
+    setIsOpened(false);
     setPopup(<ChatPopup />);
   }
 
-  useEffect(() => {
-    console.log(popup);
-  }, [popup]);
+  function handleClickOpenParticipantsPopup() {
+    setIsOpened(false);
+    setPopup(<ParticipantsPopup />);
+  }
+
+  function handleClickOpenSharePopup() {
+    setIsOpened(false);
+    setPopup(<SharePopup link="https://estate.stream/ahdy12jdco1" />);
+  }
+
+  function handleClickOpenSettingsModal() {
+    setIsOpened(false);
+    setModal(<SettingsModal />);
+  }
 
   return (
-    <div className="relative order-3 2xl:hidden">
+    <div className="order-3 2xl:hidden" ref={ref}>
       <FloatingActionButton
         ref={buttonRef}
         className={clsx(isOpened && "!bg-[#7B60F3]")}
@@ -64,7 +60,8 @@ function ControlsPopover() {
       <PopoverWrapper
         isOpened={isOpened}
         parentElRef={buttonRef}
-        className="w-[248px] !bottom-[72px] min-h-full !fixed left-1/2 -translate-x-1/2"
+        position="center"
+        className="w-[248px]"
       >
         <Button
           variant="tertiary"
@@ -79,7 +76,7 @@ function ControlsPopover() {
         <Button
           variant="tertiary"
           className="w-full !justify-start"
-          onClick={() => setPopup(<ParticipantsPopup />)}
+          onClick={handleClickOpenParticipantsPopup}
         >
           <div className="size-4">
             <UsersFilledIcon />
@@ -89,9 +86,7 @@ function ControlsPopover() {
         <Button
           variant="tertiary"
           className="w-full !justify-start"
-          onClick={() =>
-            setPopup(<SharePopup link="https://estate.stream/ahdy12jdco1" />)
-          }
+          onClick={handleClickOpenSharePopup}
         >
           <div className="size-4">
             <ShareFilledIcon />
@@ -101,7 +96,7 @@ function ControlsPopover() {
         <Button
           variant="tertiary"
           className="w-full !justify-start"
-          onClick={() => setModal(<SettingsModal />)}
+          onClick={handleClickOpenSettingsModal}
         >
           <div className="size-4">
             <CogFilledIcon />