feat: drawers registry

src/app/deals/components/shared/Board/Board.tsx

@@ -13,7 +13,7 @@ type Props = {
 };
 
 const Board: FC<Props> = ({ board }) => {
-    const { selectedBoard, onUpdateBoard } = useBoardsContext();
+    const { selectedBoard, onUpdateBoard, onDeleteBoard } = useBoardsContext();
     const isMobile = useIsMobile();
     const [isHovered, setIsHovered] = useState(false);
 
@@ -49,6 +49,7 @@ const Board: FC<Props> = ({ board }) => {
                                 isHovered={
                                     selectedBoard?.id === board.id || isHovered
                                 }
+                                onDeleteBoard={onDeleteBoard}
                                 board={board}
                                 startEditing={startEditing}
                             />

src/app/deals/components/shared/BoardMenu/BoardMenu.tsx

@@ -1,18 +1,21 @@
 import React, { FC } from "react";
 import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
 import { Box, Group, Menu, Text } from "@mantine/core";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { BoardSchema } from "@/lib/client";
 
 type Props = {
     board: BoardSchema;
     startEditing: () => void;
+    onDeleteBoard: (board: BoardSchema) => void;
     isHovered?: boolean;
 };
 
-const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true }) => {
-    const { onDeleteBoard } = useBoardsContext();
-
+const BoardMenu: FC<Props> = ({
+    board,
+    startEditing,
+    onDeleteBoard,
+    isHovered = true,
+}) => {
     return (
         <Menu>
             <Menu.Target>

src/app/deals/components/shared/Header/Header.tsx

@@ -6,17 +6,16 @@ import Boards from "@/app/deals/components/shared/Boards/Boards";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/useIsMobile";
 
 const Header = () => {
-    const {
-        projects,
-        setSelectedProjectId,
-        selectedProject,
-        setIsEditorDrawerOpened: setIsProjectsDrawerOpened,
-    } = useProjectsContext();
-    const { setIsEditorDrawerOpened } = useBoardsContext();
+    const { projects, setSelectedProjectId, refetchProjects, selectedProject } =
+        useProjectsContext();
+    const { refetchBoards } = useBoardsContext();
+    const { openDrawer } = useDrawersContext();
     const isMobile = useIsMobile();
+
     const getDesktopHeader = () => {
         return (
             <Flex
@@ -45,19 +44,44 @@ const Header = () => {
         );
     };
 
+    const selectProjectId = async (projectId: number | null) => {
+        await refetchProjects();
+        setSelectedProjectId(projectId);
+    };
+
+    const openProjectsEditorDrawer = () => {
+        openDrawer({
+            key: "projectsEditorDrawer",
+            props: {
+                setSelectedProjectId: selectProjectId,
+            },
+        });
+    };
+
+    const openBoardsEditorDrawer = () => {
+        if (!selectedProject) return;
+        openDrawer({
+            key: "projectBoardsEditorDrawer",
+            props: {
+                project: selectedProject,
+            },
+            onClose: refetchBoards,
+        });
+    };
+
     const getMobileHeader = () => {
         return (
             <>
                 <Group justify={"space-between"}>
                     <Box
                         p={"md"}
-                        onClick={() => setIsProjectsDrawerOpened(true)}>
+                        onClick={openProjectsEditorDrawer}>
                         <IconChevronLeft />
                     </Box>
                     <Text>{selectedProject?.name}</Text>
                     <Box
                         p={"md"}
-                        onClick={() => setIsEditorDrawerOpened(true)}>
+                        onClick={openBoardsEditorDrawer}>
                         <IconSettings />
                     </Box>
                 </Group>

src/app/deals/components/shared/StatusColumnHeader/StatusColumnHeader.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from "react";
 import { Group, Text } from "@mantine/core";
-import styles from "./StatusColumnHeader.module.css";
 import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 import { StatusSchema } from "@/lib/client";
+import styles from "./StatusColumnHeader.module.css";
 
 type Props = {
     status: StatusSchema;
@@ -12,7 +13,9 @@ type Props = {
 };
 
 const StatusColumnHeader: FC<Props> = ({ status, isDragging }) => {
-    const { onUpdateStatus } = useStatusesContext();
+    const { onUpdateStatus, onDeleteStatus, refetchStatuses } =
+        useStatusesContext();
+    const { selectedBoard } = useBoardsContext();
 
     const handleSave = (value: string) => {
         const newValue = value.trim();
@@ -48,8 +51,11 @@ const StatusColumnHeader: FC<Props> = ({ status, isDragging }) => {
                             {status.name}
                         </Text>
                         <StatusMenu
+                            board={selectedBoard}
                             status={status}
                             handleEdit={startEditing}
+                            refetchStatuses={refetchStatuses}
+                            onDeleteStatus={onDeleteStatus}
                         />
                     </>
                 )}

src/app/deals/components/shared/StatusMenu/StatusMenu.tsx

@@ -6,26 +6,35 @@ import {
     IconTrash,
 } from "@tabler/icons-react";
 import { Box, Group, Menu, Text } from "@mantine/core";
-import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/useIsMobile";
-import { StatusSchema } from "@/lib/client";
+import { BoardSchema, StatusSchema } from "@/lib/client";
 
 type Props = {
     status: StatusSchema;
     handleEdit: () => void;
+    board: BoardSchema | null;
+    onDeleteStatus: (status: StatusSchema) => void;
+    refetchStatuses?: () => void;
+    withChangeOrderButton?: boolean;
 };
 
-const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
+const StatusMenu: FC<Props> = ({
+    status,
+    handleEdit,
+    board,
+    onDeleteStatus,
+    refetchStatuses,
+    withChangeOrderButton = true,
+}) => {
     const isMobile = useIsMobile();
-    const { onDeleteStatus, setIsEditorDrawerOpened } = useStatusesContext();
+    const { openDrawer } = useDrawersContext();
 
     return (
         <Menu>
             <Menu.Target>
                 <Box
-                    style={{
-                        cursor: "pointer",
-                    }}
+                    style={{ cursor: "pointer" }}
                     onClick={e => e.stopPropagation()}>
                     <IconDotsVertical />
                 </Box>
@@ -51,11 +60,18 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
                         <Text>Удалить</Text>
                     </Group>
                 </Menu.Item>
-                {isMobile && (
+                {isMobile && withChangeOrderButton && (
                     <Menu.Item
                         onClick={e => {
                             e.stopPropagation();
-                            setIsEditorDrawerOpened(true);
+                            if (!board) return;
+                            openDrawer({
+                                key: "boardStatusesEditorDrawer",
+                                props: {
+                                    board,
+                                },
+                                onClose: refetchStatuses,
+                            });
                         }}>
                         <Group wrap={"nowrap"}>
                             <IconExchange />