From 8d05e938be9900e13466f8ebf64c51b56482eee6 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 21 Oct 2025 20:59:26 +0500
Subject: [PATCH] Refactor Popup components to utilize DraggableContainer for
 improved drag-and-drop functionality and responsiveness. Update layout and
 styling in ParticipantsPopup, QRCodePopup, SharePopup, and ChatPopup to
 enhance user experience across different screen sizes.

---
 client/src/components/SessionUsersPanel2.tsx  |  3 +-
 client/src/components/popups/ChatPopup.tsx    |  2 +-
 .../components/popups/ParticipantsPopup.tsx   | 74 ++++++++++---------
 client/src/components/popups/QRCodePopup.tsx  | 53 +++++++------
 client/src/components/popups/SharePopup.tsx   | 59 ++++++++-------
 5 files changed, 106 insertions(+), 85 deletions(-)

diff --git a/client/src/components/SessionUsersPanel2.tsx b/client/src/components/SessionUsersPanel2.tsx
index 509271a..672a759 100644
--- a/client/src/components/SessionUsersPanel2.tsx
+++ b/client/src/components/SessionUsersPanel2.tsx
@@ -35,8 +35,7 @@ function SessionUsersPanel2() {
     <DraggableContainer
       enableSnapping={true}
       autoAlign={true}
-      // initialPosition={{ top: 20, left: 20 }}
-      initialCorner="bottom-right"
+      initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
       padding="1.111vw"
       className="flex gap-4"
     >
diff --git a/client/src/components/popups/ChatPopup.tsx b/client/src/components/popups/ChatPopup.tsx
index e9301ae..783f03e 100644
--- a/client/src/components/popups/ChatPopup.tsx
+++ b/client/src/components/popups/ChatPopup.tsx
@@ -40,7 +40,7 @@ export default function ChatPopup() {
       initialPosition={{ right: "5vw" }}
     >
       <PopupWrapper title="Чат" className="sm:overflow-hidden">
-        <div className="flex flex-col 2xl:h-[27.778vw] relative 2xl:-m-[1.389vw] -m-5">
+        <div className="flex flex-col 2xl:h-[19.444vw] max-sm:h-[97.5dvh] 2xl:-m-[1.389vw] -m-5">
           <MessageFeed messages={messages} />
           <MessageInput onMessageSend={onMessageSend} />
         </div>
diff --git a/client/src/components/popups/ParticipantsPopup.tsx b/client/src/components/popups/ParticipantsPopup.tsx
index d8b8134..e4e3ccf 100644
--- a/client/src/components/popups/ParticipantsPopup.tsx
+++ b/client/src/components/popups/ParticipantsPopup.tsx
@@ -10,44 +10,52 @@ import ShareFilledIcon from "../icons/ShareFilledIcon";
 import HandRaisedOffFilledIcon from "../icons/HandRaisedOffFilledIcon";
 import MicrophoneOffFilledIcon from "../icons/MicrophoneOffFilledIcon";
 import { Fragment, useRef } from "react";
+import DraggableContainer from "../DraggableContainer";
 
 export default function ParticipantsPopup() {
   const participants = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
   return (
-    <PopupWrapper title="Участники" draggable>
-      <div className="flex flex-col 2xl:gap-[1.667vw] gap-6 relative 2xl:-mt-[1.389vw] -mt-5">
-        <ul className="flex flex-col gap-0 2xl:gap-[1.111vw] 2xl:max-h-[calc(11.944vw+1.389vw)] overflow-y-auto 2xl:pt-[1.389vw] pt-5">
-          {participants.map((participant, index) => (
-            <Fragment key={index}>
-              <ParticipantItem id={participant.toString()} />
-              {index !== participants.length - 1 && (
-                <div className="w-full h-[1px] bg-[#F6F6F6]" />
-              )}
-            </Fragment>
-          ))}
-        </ul>
-        <Button
-          variant="primary"
-          onClick={() => {
-            if (navigator.share) {
-              navigator.share({
-                title: "Участники",
-                text: "Присоединяйся к моей встрече",
-                url: window.location.href,
-              });
-            } else {
-              navigator.clipboard.writeText(window.location.href);
-            }
-          }}
-        >
-          <p>Поделиться ссылкой</p>
-          <div className="2xl:size-[1.111vw] size-4">
-            <ShareFilledIcon />
-          </div>
-        </Button>
-      </div>
-    </PopupWrapper>
+    <DraggableContainer
+      enabled={window.innerWidth >= 640}
+      centerVertical
+      constrainToBounds
+      initialPosition={{ right: "5vw" }}
+    >
+      <PopupWrapper title="Участники">
+        <div className="flex flex-col 2xl:gap-[1.667vw] gap-6 relative 2xl:-mt-[1.389vw] -mt-5">
+          <ul className="flex flex-col gap-0 2xl:gap-[1.111vw] 2xl:max-h-[calc(11.944vw+1.389vw)] overflow-y-auto 2xl:pt-[1.389vw] pt-5">
+            {participants.map((participant, index) => (
+              <Fragment key={index}>
+                <ParticipantItem id={participant.toString()} />
+                {index !== participants.length - 1 && (
+                  <div className="w-full h-[1px] bg-[#F6F6F6]" />
+                )}
+              </Fragment>
+            ))}
+          </ul>
+          <Button
+            variant="primary"
+            onClick={() => {
+              if (navigator.share) {
+                navigator.share({
+                  title: "Участники",
+                  text: "Присоединяйся к моей встрече",
+                  url: window.location.href,
+                });
+              } else {
+                navigator.clipboard.writeText(window.location.href);
+              }
+            }}
+          >
+            <p>Поделиться ссылкой</p>
+            <div className="2xl:size-[1.111vw] size-4">
+              <ShareFilledIcon />
+            </div>
+          </Button>
+        </div>
+      </PopupWrapper>
+    </DraggableContainer>
   );
 }
 
diff --git a/client/src/components/popups/QRCodePopup.tsx b/client/src/components/popups/QRCodePopup.tsx
index bb66868..8b9b5ca 100644
--- a/client/src/components/popups/QRCodePopup.tsx
+++ b/client/src/components/popups/QRCodePopup.tsx
@@ -4,6 +4,7 @@ import ChevronLeftIcon from "../icons/ChevronLeftIcon";
 import usePopupStore from "../../store/popupStore";
 import SharePopup from "./SharePopup";
 import QRCode from "react-qr-code";
+import DraggableContainer from "../DraggableContainer";
 
 interface QRCodePopupProps {
   link: string;
@@ -13,31 +14,37 @@ function QRCodePopup({ link }: QRCodePopupProps) {
   const { setPopup } = usePopupStore();
 
   return (
-    <PopupWrapper
-      className="w-[21.667vw]"
-      draggable
-      leftButton={
-        <Button
-          variant="secondary"
-          size="small"
-          onClick={() => setPopup(<SharePopup link={link} />)}
-        >
-          <div className="2xl:size-[1.111vw] size-4">
-            <ChevronLeftIcon />
-          </div>
-        </Button>
-      }
+    <DraggableContainer
+      enabled={window.innerWidth >= 640}
+      centerVertical
+      constrainToBounds
+      initialPosition={{ right: "5vw" }}
     >
-      <div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 items-center">
-        <QRCode value={link} className="2xl:size-[10.556vw] size-[152px]" />
-        <div className="2xl:space-y-[0.556vw] space-y-2">
-          <p className="title-m font-medium">Подключайтесь к сеансу</p>
-          <p className="caption-s font-medium text-center text-[#CCCCCC]">
-            Можно даже с мобильным интернетом
-          </p>
+      <PopupWrapper
+        className="w-[21.667vw]"
+        leftButton={
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={() => setPopup(<SharePopup link={link} />)}
+          >
+            <div className="2xl:size-[1.111vw] size-4">
+              <ChevronLeftIcon />
+            </div>
+          </Button>
+        }
+      >
+        <div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 items-center">
+          <QRCode value={link} className="2xl:size-[10.556vw] size-[152px]" />
+          <div className="2xl:space-y-[0.556vw] space-y-2">
+            <p className="title-m font-medium">Подключайтесь к сеансу</p>
+            <p className="caption-s font-medium text-center text-[#CCCCCC]">
+              Можно даже с мобильным интернетом
+            </p>
+          </div>
         </div>
-      </div>
-    </PopupWrapper>
+      </PopupWrapper>
+    </DraggableContainer>
   );
 }
 
diff --git a/client/src/components/popups/SharePopup.tsx b/client/src/components/popups/SharePopup.tsx
index c45f4d8..97f6ead 100644
--- a/client/src/components/popups/SharePopup.tsx
+++ b/client/src/components/popups/SharePopup.tsx
@@ -5,6 +5,7 @@ import Button from "../ui/Button";
 import LinkShare from "../ui/LinkShare";
 import usePopupStore from "../../store/popupStore";
 import QRCodePopup from "./QRCodePopup";
+import DraggableContainer from "../DraggableContainer";
 
 function SharePopup({ link }: { link: string }) {
   const { setPopup } = usePopupStore();
@@ -22,37 +23,43 @@ function SharePopup({ link }: { link: string }) {
   }
 
   return (
-    <PopupWrapper
-      title="Пригласить"
-      draggable
-      leftButton={
+    <DraggableContainer
+      enabled={window.innerWidth >= 640}
+      centerVertical
+      constrainToBounds
+      initialPosition={{ right: "5vw" }}
+    >
+      <PopupWrapper
+        title="Пригласить"
+        leftButton={
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={() => setPopup(<QRCodePopup link={link} />)}
+          >
+            <div className="2xl:size-[1.111vw] size-4">
+              <QRIcon />
+            </div>
+          </Button>
+        }
+      >
+        <div className="2xl:mb-[1.389vw] mb-3 2xl:space-y-[0.833vw] space-y-3">
+          <p className="title-s font-medium">Скопировать ссылку</p>
+          <LinkShare link={link} />
+        </div>
         <Button
-          variant="secondary"
-          size="small"
-          onClick={() => setPopup(<QRCodePopup link={link} />)}
+          variant="primary"
+          size="large"
+          className="w-full"
+          onClick={handleShare}
         >
+          Отправить
           <div className="2xl:size-[1.111vw] size-4">
-            <QRIcon />
+            <ShareFilledIcon />
           </div>
         </Button>
-      }
-    >
-      <div className="2xl:mb-[1.389vw] mb-3 2xl:space-y-[0.833vw] space-y-3">
-        <p className="title-s font-medium">Скопировать ссылку</p>
-        <LinkShare link={link} />
-      </div>
-      <Button
-        variant="primary"
-        size="large"
-        className="w-full"
-        onClick={handleShare}
-      >
-        Отправить
-        <div className="2xl:size-[1.111vw] size-4">
-          <ShareFilledIcon />
-        </div>
-      </Button>
-    </PopupWrapper>
+      </PopupWrapper>
+    </DraggableContainer>
   );
 }