From 6bff06ae8436a3bad796f3aa13cbdc746c33289e Mon Sep 17 00:00:00 2001
From: C4rnivore <kirill.z13@mail.ru>
Date: Tue, 21 Oct 2025 11:51:47 +0500
Subject: [PATCH] Participants mobile;

---
 client/src/components/indicators/Warning.tsx  |  2 +-
 .../components/popups/ParticipantsPopup.tsx   | 41 ++++++++--
 client/src/components/ui/ActionsPopover.tsx   | 81 +++++++++++++------
 client/src/components/ui/Avatar.tsx           | 15 ++--
 client/src/components/ui/ControlsPopover.tsx  |  2 +-
 client/src/components/ui/PopoverWrapper.tsx   | 10 +--
 client/src/pages/HomePage.tsx                 | 55 +++++++------
 7 files changed, 134 insertions(+), 72 deletions(-)

diff --git a/client/src/components/indicators/Warning.tsx b/client/src/components/indicators/Warning.tsx
index 33a2cdd..9e45f27 100644
--- a/client/src/components/indicators/Warning.tsx
+++ b/client/src/components/indicators/Warning.tsx
@@ -10,7 +10,7 @@ export default function Warning({
   return (
     <div
       className={clsx(
-        "size-[1.111vw] border-[1px] border-white rounded-full flex items-center justify-center ",
+        "2xl:size-[1.111vw] size-[4.444vw] border-[1px] border-white rounded-full flex items-center justify-center ",
         type === "caution" && "bg-[#F9A530]",
         type === "critical" && "bg-[#FF4517]",
         className
diff --git a/client/src/components/popups/ParticipantsPopup.tsx b/client/src/components/popups/ParticipantsPopup.tsx
index 491876b..d6f007f 100644
--- a/client/src/components/popups/ParticipantsPopup.tsx
+++ b/client/src/components/popups/ParticipantsPopup.tsx
@@ -7,9 +7,12 @@ import XMarkFilledIcon from "../icons/XMarkFilledIcon";
 import Avatar from "../ui/Avatar";
 import Button from "../ui/Button";
 import ShareFilledIcon from "../icons/ShareFilledIcon";
+import HandRaisedOffFilledIcon from "../icons/HandRaisedOffFilledIcon";
+import MicrophoneOffFilledIcon from "../icons/MicrophoneOffFilledIcon";
+import { Fragment, useRef } from "react";
 
 export default function ParticipantsPopup() {
-  const participants = [1, 2, 3];
+  const participants = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
   return (
     <PopupWrapper
@@ -18,14 +21,14 @@ export default function ParticipantsPopup() {
       className="h-max 2xl:w-[21.667vw]"
     >
       <div className="flex flex-col gap-[1.667vw] relative">
-        <ul className="flex flex-col gap-[1.111vw]">
+        <ul className="flex flex-col gap-0 2xl:gap-[1.111vw] 2xl:max-h-auto max-h-[calc(100dvh-50vw)] overflow-y-auto">
           {participants.map((participant, index) => (
-            <>
-              <ParticipantItem key={participant} id={participant.toString()} />
+            <Fragment key={index}>
+              <ParticipantItem id={participant.toString()} />
               {index !== participants.length - 1 && (
                 <div className="w-full h-[1px] bg-[#F6F6F6]" />
               )}
-            </>
+            </Fragment>
           ))}
         </ul>
         <Button
@@ -53,9 +56,18 @@ export default function ParticipantsPopup() {
 }
 
 function ParticipantItem({ id }: { id: string }) {
+  const isMuted = true;
+  const isNotControlling = true;
+  const isMobile = window.innerWidth <= 360;
+  const parentRef = useRef<HTMLDivElement>(null);
+
   return (
-    <div className="flex items-center justify-between w-full h-[2.5vw]">
-      <div className="flex items-center gap-[0.833vw]">
+    <div
+      ref={parentRef}
+      onTouchEnd={(ev) => ev.stopPropagation()}
+      className="flex items-center justify-between w-full relative py-[2.222vw] 2xl:p-0"
+    >
+      <div className="flex items-center 2xl:gap-[0.833vw] gap-[3.333vw]">
         <Avatar size="medium" status="caution" />
         <div className="flex flex-col gap-[0.278vw]">
           <span className="button-m">Иван Иванович {id}</span>
@@ -63,7 +75,18 @@ function ParticipantItem({ id }: { id: string }) {
         </div>
       </div>
 
-      <div>
+      <div className="flex 2xl:gap-[0.556vw] gap-[2.222vw] items-center">
+        {isNotControlling && (
+          <div className="2xl:size-[1.111vw] size-[4.444vw] text-[#FF4517]">
+            <HandRaisedOffFilledIcon />
+          </div>
+        )}
+        {isMuted && (
+          <div className="2xl:size-[1.111vw] size-[4.444vw] text-[#FF4517]">
+            <MicrophoneOffFilledIcon />
+          </div>
+        )}
+
         <ActionsPopover
           options={[
             {
@@ -88,6 +111,8 @@ function ParticipantItem({ id }: { id: string }) {
               onClick: () => {},
             },
           ]}
+          parentRef={isMobile ? parentRef : undefined}
+          className={isMobile ? "left-0" : undefined}
         />
       </div>
     </div>
diff --git a/client/src/components/ui/ActionsPopover.tsx b/client/src/components/ui/ActionsPopover.tsx
index 831a101..bdd8627 100644
--- a/client/src/components/ui/ActionsPopover.tsx
+++ b/client/src/components/ui/ActionsPopover.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react";
 import Button from "./Button";
 import MoreIcon from "../icons/MoreIcon";
 import PopoverWrapper from "./PopoverWrapper";
+import clsx from "clsx";
 
 interface ActionsPopoverProps {
   options: {
@@ -10,47 +11,79 @@ interface ActionsPopoverProps {
     icon?: React.ReactNode;
     disabled?: boolean;
   }[];
+  isOpened?: boolean;
+  parentRef?: React.RefObject<HTMLDivElement | null>;
+  className?: string;
 }
 
-export default function ActionsPopover({ options }: ActionsPopoverProps) {
-  const [isOpened, setIsOpened] = useState(false);
-
+/**
+ * @param parentRef - Если передан, то кнопка активации опций не будет отображаться, а сам Popover будет отображаться по клику на parentRef.
+ */
+export default function ActionsPopover({
+  options,
+  isOpened = false,
+  parentRef,
+  className,
+}: ActionsPopoverProps) {
+  const [opened, setOpened] = useState(isOpened);
   const popoverRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
+    let isHandling = false;
+
     const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as Node)
-      ) {
-        setIsOpened(false);
+      // Предотвращаем двойное срабатывание mousedown и touchstart
+      if (isHandling) return;
+      isHandling = true;
+      setTimeout(() => {
+        isHandling = false;
+      }, 200);
+
+      const tgt = event.target as Node;
+      const clickedInsideParentElement = parentRef?.current?.contains(tgt);
+      const clickedInsidePopover = popoverRef.current?.contains(tgt);
+      if (clickedInsideParentElement && !clickedInsidePopover) {
+        //
+      } else {
+        // Если нет parentRef - закрытие только по клику вне popover и вне кнопки
+        const clickedInsideButton = buttonRef.current?.contains(tgt);
+        if (!clickedInsidePopover && !clickedInsideButton) {
+          setOpened(false);
+        }
       }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("touchstart", handleClickOutside);
+    parentRef?.current?.addEventListener("touchend", () => setOpened(!opened));
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
       document.removeEventListener("touchstart", handleClickOutside);
+      parentRef?.current?.addEventListener("touchend", () =>
+        setOpened(!opened)
+      );
     };
-  }, []);
+  }, [parentRef]);
 
   return (
-    <div className="relative" ref={popoverRef}>
-      <button
-        ref={buttonRef}
-        className="flex items-center justify-center gap-[0.139vw] size-[1.667vw] rounded-[0.556vw] text-[#CCCCCC] hover:text-[#7D7D7D] hover:bg-[#F3F3F3] active:text-[#141414] "
-        onClick={() => setIsOpened(!isOpened)}
-      >
-        <div className="2xl:size-[1.111vw] size-4 2xl:rounded-[0.556vw] rounded-2xl">
-          <MoreIcon />
-        </div>
-      </button>
+    <div className={!parentRef ? "relative" : ""} ref={popoverRef}>
+      {!parentRef && (
+        <button
+          ref={buttonRef}
+          className="flex items-center justify-center gap-[0.139vw] size-[1.667vw] rounded-[0.556vw] text-[#CCCCCC] hover:text-[#7D7D7D] hover:bg-[#F3F3F3] active:text-[#141414] "
+          onClick={() => setOpened(!opened)}
+        >
+          <div className="2xl:size-[1.111vw] size-4 2xl:rounded-[0.556vw] rounded-2xl">
+            <MoreIcon />
+          </div>
+        </button>
+      )}
+
       <PopoverWrapper
-        isOpened={isOpened}
-        buttonRef={buttonRef}
-        className="w-[17.222vw]"
+        isOpened={opened}
+        parentElRef={parentRef ? parentRef : buttonRef}
+        className={clsx("2xl:w-[17.222vw] w-[53.333vw]", className)}
       >
         {options.map((option) => (
           <Button
@@ -60,7 +93,9 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
             onClick={option.onClick}
             disabled={option.disabled}
           >
-            <div className="size-[1.111vw] ">{option.icon}</div>
+            <div className="2xl:size-[1.111vw] size-[4.444vw]">
+              {option.icon}
+            </div>
             {option.label}
           </Button>
         ))}
diff --git a/client/src/components/ui/Avatar.tsx b/client/src/components/ui/Avatar.tsx
index 96d3e94..2a7df1c 100644
--- a/client/src/components/ui/Avatar.tsx
+++ b/client/src/components/ui/Avatar.tsx
@@ -15,18 +15,21 @@ export default function Avatar({ size, status, src, name }: AvatarProps) {
     <div
       className={clsx(
         "rounded-full text-white relative",
-        size === "small" && "size-[2.222vw] button-s",
-        size === "medium" && "size-[2.5vw] button-m",
-        size === "large" && "size-[3.333vw] title-s"
+        size === "small" && "2xl:size-[2.222vw] size-[8.889vw] button-s",
+        size === "medium" && "2xl:size-[2.5vw] size-[10vw] button-m",
+        size === "large" && "2xl:size-[3.333vw] size-[13.333vw] title-s"
       )}
     >
       {GetAvatarImage(src, name)}
       <div
         className={clsx(
           "absolute",
-          size === "small" && "bottom-[1.389vw] left-[1.389vw]",
-          size === "medium" && "bottom-[1.667vw] left-[1.667vw]",
-          size === "large" && "bottom-[2.5vw] left-[2.5vw]"
+          size === "small" &&
+            "2xl:bottom-[1.389vw] bottom-[5.556vw] 2xl:left-[1.389vw] left-[5.556vw]",
+          size === "medium" &&
+            "2xl:bottom-[1.667vw] bottom-[6.667vw] 2xl:left-[1.667vw] left-[6.667vw]",
+          size === "large" &&
+            "2xl:bottom-[2.5vw] bottom-[10vw] 2xl:left-[2.5vw] left-[10vw]"
         )}
       >
         {status === "caution" && (
diff --git a/client/src/components/ui/ControlsPopover.tsx b/client/src/components/ui/ControlsPopover.tsx
index 6c56c1a..1c3b19b 100644
--- a/client/src/components/ui/ControlsPopover.tsx
+++ b/client/src/components/ui/ControlsPopover.tsx
@@ -54,7 +54,7 @@ function ControlsPopover() {
       </FloatingActionButton>
       <PopoverWrapper
         isOpened={isOpened}
-        buttonRef={buttonRef}
+        parentElRef={buttonRef}
         className="w-[248px] !bottom-[72px] min-h-full !fixed left-1/2 -translate-x-1/2"
       >
         <Button
diff --git a/client/src/components/ui/PopoverWrapper.tsx b/client/src/components/ui/PopoverWrapper.tsx
index e45ff68..f569fa2 100644
--- a/client/src/components/ui/PopoverWrapper.tsx
+++ b/client/src/components/ui/PopoverWrapper.tsx
@@ -4,14 +4,14 @@ import clsx from "clsx";
 
 interface PopoverProps {
   isOpened: boolean;
-  buttonRef: React.RefObject<HTMLButtonElement | null>;
+  parentElRef: React.RefObject<HTMLButtonElement | HTMLDivElement | null>;
   children: React.ReactNode;
   className?: string;
 }
 
 function PopoverWrapper({
   isOpened,
-  buttonRef,
+  parentElRef,
   children,
   className,
 }: PopoverProps) {
@@ -19,13 +19,13 @@ function PopoverWrapper({
   const [menuHeight, setMenuHeight] = useState(0);
 
   useEffect(() => {
-    if (isOpened && buttonRef.current) {
-      const buttonRect = buttonRef.current.getBoundingClientRect();
+    if (isOpened && parentElRef.current) {
+      const buttonRect = parentElRef.current.getBoundingClientRect();
       const spaceBelow = window.innerHeight - buttonRect.bottom;
       const spaceAbove = buttonRect.top;
       setOpenUpwards(spaceBelow < menuHeight && spaceAbove > menuHeight);
     }
-  }, [buttonRef, isOpened, menuHeight]);
+  }, [parentElRef, isOpened, menuHeight]);
 
   return (
     <AnimatePresence>
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index c48043c..7134009 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -9,10 +9,11 @@ import useModalStore from "../store/modalStore";
 import CogFilledIcon from "../components/icons/CogFilledIcon";
 // import SessionUsersPanel from "../components/SessionUsersPanel";
 import SharePopup from "../components/popups/SharePopup";
-import { useEffect } from "react";
-import useToastsStore from "../store/toastsStore";
+// import { useEffect } from "react";
+// import useToastsStore from "../store/toastsStore";
 import ChatPopup from "../components/popups/ChatPopup";
 import ChatFilledIcon from "../components/icons/ChatFilledIcon";
+import ParticipantsPopup from "../components/popups/ParticipantsPopup";
 
 function HomePage() {
   const { data: user } = useMe();
@@ -27,30 +28,30 @@ function HomePage() {
   const { setPopup } = usePopupStore();
   const { setModal } = useModalStore();
 
-  // -------------------------------- Toasts test --------------------------------
-  const { addToast } = useToastsStore();
+  // -------------------------------- Тосты --------------------------------
+  // const { addToast } = useToastsStore();
 
-  useEffect(() => {
-    addToast({
-      id: crypto.randomUUID(),
-      type: "warning",
-      title: "Тестовое предупреждение",
-      message: "Это тестовое предупреждение",
-      onDeny: () => {},
-      onAllow: () => {},
-    });
-    const timer = setTimeout(() => {
-      addToast({
-        id: crypto.randomUUID(),
-        type: "notification",
-        title: "Тестовое уведомление",
-        message: "Это тестовое уведомление",
-        onDeny: () => {},
-        onAllow: () => {},
-      });
-    }, 1000);
-    return () => clearTimeout(timer);
-  }, []);
+  // useEffect(() => {
+  //   addToast({
+  //     id: crypto.randomUUID(),
+  //     type: "warning",
+  //     title: "Тестовое предупреждение",
+  //     message: "Это тестовое предупреждение",
+  //     onDeny: () => {},
+  //     onAllow: () => {},
+  //   });
+  //   const timer = setTimeout(() => {
+  //     addToast({
+  //       id: crypto.randomUUID(),
+  //       type: "notification",
+  //       title: "Тестовое уведомление",
+  //       message: "Это тестовое уведомление",
+  //       onDeny: () => {},
+  //       onAllow: () => {},
+  //     });
+  //   }, 1000);
+  //   return () => clearTimeout(timer);
+  // }, []);
 
   return (
     <div className="py-8 min-h-screen bg-gray-50">
@@ -62,9 +63,7 @@ function HomePage() {
 
           <FloatingActionButton
             variant="default"
-            onClick={() =>
-              setPopup(<SharePopup link="https://estate.stream/ahdy12jdco1" />)
-            }
+            onClick={() => setPopup(<ParticipantsPopup />)}
           >
             <div className="2xl:size-[1.111vw] size-4 text-white">
               <ShareFilledIcon />