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/ActionsPopover.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import Button from "./Button";
 import MoreIcon from "../icons/MoreIcon";
-import Popover from "./Popover";
+import PopoverWrapper from "./PopoverWrapper";
 
 interface ActionsPopoverProps {
   options: {
@@ -47,7 +47,7 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
           <MoreIcon />
         </div>
       </button>
-      <Popover
+      <PopoverWrapper
         isOpened={isOpened}
         buttonRef={buttonRef}
         className="w-[17.222vw]"
@@ -55,7 +55,7 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
         {options.map((option) => (
           <Button
             variant="tertiary"
-            className="p-[0.833vw] button-s w-full flex items-center !rounded-none !justify-start gap-[0.556vw]"
+            className="w-full !justify-start"
             key={option.label}
             onClick={option.onClick}
             disabled={option.disabled}
@@ -64,7 +64,7 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
             {option.label}
           </Button>
         ))}
-      </Popover>
+      </PopoverWrapper>
     </div>
   );
 }

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>
   );
 }

client/src/components/ui/PopoverWrapper.tsx

@@ -9,7 +9,12 @@ interface PopoverProps {
   className?: string;
 }
 
-function Popover({ isOpened, buttonRef, children, className }: PopoverProps) {
+function PopoverWrapper({
+  isOpened,
+  buttonRef,
+  children,
+  className,
+}: PopoverProps) {
   const [openUpwards, setOpenUpwards] = useState(false);
   const [menuHeight, setMenuHeight] = useState(0);
 
@@ -30,19 +35,19 @@ function Popover({ isOpened, buttonRef, children, className }: PopoverProps) {
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           ref={(el) => {
-            setMenuHeight(el?.offsetHeight || 0);
+            if (el) setMenuHeight(el.offsetHeight);
           }}
           className={clsx(
-            "absolute z-10 right-0 bg-white 2xl:rounded-[1.111vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] overflow-hidden rounded-2xl 2xl:p-[0.278vw] p-1",
+            "absolute z-10 right-0 shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] overflow-hidden bg-white 2xl:rounded-[1.111vw] rounded-2xl",
             openUpwards ? "bottom-full" : "top-full",
             className
           )}
         >
-          {children}
+          <div className="2xl:p-[0.278vw] p-1">{children}</div>
         </motion.div>
       )}
     </AnimatePresence>
   );
 }
 
-export default Popover;
+export default PopoverWrapper;