Add FullscreenExitIcon component; refactor Popover to PopoverWrapper for better functionality; update ChatPopup and ControlsPopover to utilize new PopoverWrapper; enhance NewSessionPage with fullscreen toggle functionality and improved button interactions.

client/src/components/ui/ControlsPopover.tsx

@@ -1,5 +1,5 @@
 import FloatingActionButton from "./FloatingActionButton";
-import Popover from "./Popover";
+import PopoverWrapper from "./PopoverWrapper";
 import MoreIcon from "../icons/MoreIcon";
 import { useEffect, useRef, useState } from "react";
 import Button from "./Button";
@@ -7,9 +7,16 @@ import ChatFilledIcon from "../icons/ChatFilledIcon";
 import UsersFilledIcon from "../icons/UsersFilledIcon";
 import ShareFilledIcon from "../icons/ShareFilledIcon";
 import CogFilledIcon from "../icons/CogFilledIcon";
+import usePopupStore from "../../store/popupStore";
+import useModalStore from "../../store/modalStore";
+import ChatPopup from "../popups/ChatPopup";
+import ParticipantsPopup from "../popups/ParticipantsPopup";
+import SharePopup from "../popups/SharePopup";
+import SettingsModal from "../modals/SettingsModal";
 
 function ControlsPopover() {
   const [isOpened, setIsOpened] = useState(false);
+
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -30,8 +37,11 @@ function ControlsPopover() {
     };
   }, []);
 
+  const { setPopup } = usePopupStore();
+  const { setModal } = useModalStore();
+
   return (
-    <div className="2xl:hidden order-3 relative">
+    <div className="2xl:hidden order-3 relative ah-full">
       <FloatingActionButton
         ref={buttonRef}
         className="!bg-[#7B60F3]"
@@ -41,36 +51,54 @@ function ControlsPopover() {
           <MoreIcon />
         </div>
       </FloatingActionButton>
-      <Popover
+      <PopoverWrapper
         isOpened={isOpened}
         buttonRef={buttonRef}
-        className="w-[248px] bottom-[72px]"
+        className="w-[248px] !bottom-[72px] min-h-full !fixed left-1/2 -translate-x-1/2"
       >
-        <Button variant="tertiary" className="w-full !justify-start">
+        <Button
+          variant="tertiary"
+          className="w-full !justify-start"
+          onClick={() => setPopup(<ChatPopup />)}
+        >
           <div className="size-4">
             <ChatFilledIcon />
           </div>
           Чат
         </Button>
-        <Button variant="tertiary" className="w-full !justify-start">
+        <Button
+          variant="tertiary"
+          className="w-full !justify-start"
+          onClick={() => setPopup(<ParticipantsPopup />)}
+        >
           <div className="size-4">
             <UsersFilledIcon />
           </div>
           Участники
         </Button>
-        <Button variant="tertiary" className="w-full !justify-start">
+        <Button
+          variant="tertiary"
+          className="w-full !justify-start"
+          onClick={() =>
+            setPopup(<SharePopup link="https://estate.stream/ahdy12jdco1" />)
+          }
+        >
           <div className="size-4">
             <ShareFilledIcon />
           </div>
           Пригласить
         </Button>
-        <Button variant="tertiary" className="w-full !justify-start">
+        <Button
+          variant="tertiary"
+          className="w-full !justify-start"
+          onClick={() => setModal(<SettingsModal />)}
+        >
           <div className="size-4">
             <CogFilledIcon />
           </div>
           Настройки
         </Button>
-      </Popover>
+      </PopoverWrapper>
     </div>
   );
 }