Refactor UI components and add NewSessionPage; replace TestPage with NewSessionPage, implement ActionsSidebarWrapper, and enhance ActionsPopover and ControlsPopover with Popover component for improved UI interactions.

2025-10-15 17:00:30 +05:00
parent 728d727cd1
commit d4d5bf609f
8 changed files with 257 additions and 44 deletions
@@ -0,0 +1,78 @@
+import FloatingActionButton from "./FloatingActionButton";
+import Popover from "./Popover";
+import MoreIcon from "../icons/MoreIcon";
+import { useEffect, useRef, useState } from "react";
+import Button from "./Button";
+import ChatFilledIcon from "../icons/ChatFilledIcon";
+import UsersFilledIcon from "../icons/UsersFilledIcon";
+import ShareFilledIcon from "../icons/ShareFilledIcon";
+import CogFilledIcon from "../icons/CogFilledIcon";
+
+function ControlsPopover() {
+  const [isOpened, setIsOpened] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsOpened(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="2xl:hidden order-3 relative">
+      <FloatingActionButton
+        ref={buttonRef}
+        className="!bg-[#7B60F3]"
+        onClick={() => setIsOpened(!isOpened)}
+      >
+        <div className="size-4 text-white">
+          <MoreIcon />
+        </div>
+      </FloatingActionButton>
+      <Popover
+        isOpened={isOpened}
+        buttonRef={buttonRef}
+        className="w-[248px] bottom-[72px]"
+      >
+        <Button variant="tertiary" className="w-full !justify-start">
+          <div className="size-4">
+            <ChatFilledIcon />
+          </div>
+          Чат
+        </Button>
+        <Button variant="tertiary" className="w-full !justify-start">
+          <div className="size-4">
+            <UsersFilledIcon />
+          </div>
+          Участники
+        </Button>
+        <Button variant="tertiary" className="w-full !justify-start">
+          <div className="size-4">
+            <ShareFilledIcon />
+          </div>
+          Пригласить
+        </Button>
+        <Button variant="tertiary" className="w-full !justify-start">
+          <div className="size-4">
+            <CogFilledIcon />
+          </div>
+          Настройки
+        </Button>
+      </Popover>
+    </div>
+  );
+}
+
+export default ControlsPopover;