Enhance DraggableContainer to support dragHandleRef for improved drag functionality. Update Popup components (PopupHeader, PopupWrapper, ChatPopup, ParticipantsPopup, QRCodePopup, SharePopup) to utilize dragHandleRef, allowing dragging only from specified elements. Improve cursor styles during dragging for better user experience.

client/src/components/PopupHeader.tsx

@@ -5,13 +5,17 @@ import Button from "./ui/Button";
 interface PopupHeaderProps {
   title?: string;
   leftButton?: React.ReactNode;
+  ref?: React.RefObject<HTMLDivElement | null>;
 }
 
-function PopupHeader({ title, leftButton }: PopupHeaderProps) {
+function PopupHeader({ title, leftButton, ref }: PopupHeaderProps) {
   const { setPopup } = usePopupStore();
 
   return (
-    <div className="2xl:p-[1.111vw] p-4 flex justify-between items-center select-none relative">
+    <div
+      ref={ref}
+      className="2xl:p-[1.111vw] p-4 flex justify-between items-center select-none relative"
+    >
       <div className="2xl:size-[2.222vw] size-8">{leftButton}</div>
       {title && (
         <p className="flex-1 font-medium text-center title-s">{title}</p>