feat: drawers registry

2025-08-22 17:04:59 +04:00
parent cb67c913ad
commit b5753ed3a2
28 changed files with 680 additions and 285 deletions
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx
@ -1,47 +1,21 @@
 "use client";

-import React, { FC, ReactNode } from "react";
-import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
-import { Box, Center, Divider, Drawer, Group, rem, Text } from "@mantine/core";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
-import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
-import CreateStatusButton from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton";
-import StatusMobile from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile";
-import SortableDnd from "@/components/dnd/SortableDnd";
-import { StatusSchema } from "@/lib/client";
+import React, { FC } from "react";
+import { Drawer, rem } from "@mantine/core";
+import StatusesDrawerBody from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody";
+import { BoardStatusesContextProvider } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
+import { DrawerProps } from "@/drawers/types";
+import { BoardSchema } from "@/lib/client";

-const BoardStatusesEditorDrawer: FC = () => {
-    const {
-        statuses,
-        onUpdateStatus,
-        isEditorDrawerOpened,
-        setIsEditorDrawerOpened,
-    } = useStatusesContext();
-    const { selectedBoard } = useBoardsContext();
-    const onClose = () => setIsEditorDrawerOpened(false);
-
-    const renderDraggable = () => (
-        <Box p={"xs"}>
-            <IconGripVertical />
-        </Box>
-    );
-
-    const renderStatus = (
-        status: StatusSchema,
-        renderDraggable?: (item: StatusSchema) => ReactNode
-    ) => {
-        return (
-            <Group wrap={"nowrap"}>
-                {renderDraggable && renderDraggable(status)}
-                <StatusMobile status={status} />
-            </Group>
-        );
-    };
-
-    const onDragEnd = (itemId: number, newLexorank: string) => {
-        onUpdateStatus(itemId, { lexorank: newLexorank });
-    };
+type Props = {
+    board: BoardSchema;
+};

+const BoardStatusesEditorDrawer: FC<DrawerProps<Props>> = ({
+    opened,
+    onClose,
+    props: { board },
+}) => {
    return (
        <Drawer
            size={"100%"}
@ -49,7 +23,7 @@ const BoardStatusesEditorDrawer: FC = () => {
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
-            opened={isEditorDrawerOpened}
+            opened={opened}
            trapFocus={false}
            styles={{
                body: {
@ -59,27 +33,9 @@ const BoardStatusesEditorDrawer: FC = () => {
                    gap: rem(10),
                },
            }}>
-            <Group justify={"space-between"}>
-                <Box
-                    onClick={onClose}
-                    p={"xs"}>
-                    <IconChevronLeft />
-                </Box>
-                <Center>
-                    <Text>{selectedBoard?.name}</Text>
-                </Center>
-                <Box p={"lg"} />
-            </Group>
-            <Divider />
-            <SortableDnd
-                initialItems={statuses}
-                onDragEnd={onDragEnd}
-                renderItem={renderStatus}
-                renderDraggable={renderDraggable}
-                dragHandleStyle={{ width: "auto" }}
-                vertical
-            />
-            <CreateStatusButton />
+            <BoardStatusesContextProvider board={board}>
+                <StatusesDrawerBody onClose={onClose} />
+            </BoardStatusesContextProvider>
        </Drawer>
    );
 };
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx
@ -1,10 +1,11 @@
+import { FC } from "react";
 import { IconPlus } from "@tabler/icons-react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";

-const CreateStatusButton = () => {
-    const { onCreateStatus } = useStatusesContext();
+const CreateStatusButton: FC = () => {
+    const { onCreateStatus } = useBoardStatusesContext();

    const onStartCreating = () => {
        modals.openContextModal({
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody.tsx
@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Stack } from "@mantine/core";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import CreateProjectButton from "@/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton";
+import ProjectMobile from "@/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile";
+
+type Props = {
+    setSelectedProjectId: (projectId: number | null) => void;
+    onClose: () => void;
+};
+
+const ProjectsDrawerBody: FC<Props> = ({ setSelectedProjectId, onClose }) => {
+    const { projects } = useProjectsContext();
+
+    return (
+        <>
+            <Stack gap={0}>
+                {projects.map((project, index) => (
+                    <ProjectMobile
+                        key={index}
+                        project={project}
+                        setSelectedProjectId={setSelectedProjectId}
+                        closeDrawer={onClose}
+                    />
+                ))}
+            </Stack>
+            <CreateProjectButton />
+        </>
+    );
+};
+
+export default ProjectsDrawerBody;
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx
@ -1,16 +1,17 @@
 import React, { FC } from "react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
-import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
-import { StatusSchema } from "@/lib/client";
+import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
+import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
+import { BoardSchema, StatusSchema } from "@/lib/client";

 type Props = {
    status: StatusSchema;
+    board: BoardSchema;
 };

-const StatusMobile: FC<Props> = ({ status }) => {
-    const { onUpdateStatus } = useStatusesContext();
+const StatusMobile: FC<Props> = ({ status, board }) => {
+    const { onUpdateStatus, onDeleteStatus } = useBoardStatusesContext();

    const startEditing = () => {
        modals.openContextModal({
@ -34,9 +35,12 @@ const StatusMobile: FC<Props> = ({ status }) => {
            <Box>
                <Text>{status.name}</Text>
            </Box>
-            <BoardMenu
-                board={status}
-                startEditing={startEditing}
+            <StatusMenu
+                status={status}
+                board={board}
+                onDeleteStatus={onDeleteStatus}
+                handleEdit={startEditing}
+                withChangeOrderButton={false}
            />
        </Group>
    );
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody.tsx
@ -0,0 +1,68 @@
+import React, { FC, ReactNode } from "react";
+import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
+import { Box, Center, Divider, Group, Text } from "@mantine/core";
+import CreateStatusButton from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton";
+import StatusMobile from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile";
+import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
+import SortableDnd from "@/components/dnd/SortableDnd";
+import { StatusSchema } from "@/lib/client";
+
+type Props = {
+    onClose: () => void;
+};
+
+const StatusesDrawerBody: FC<Props> = ({ onClose }) => {
+    const { onUpdateStatus, board, statuses } = useBoardStatusesContext();
+
+    const renderDraggable = () => (
+        <Box p={"xs"}>
+            <IconGripVertical />
+        </Box>
+    );
+
+    const renderStatus = (
+        status: StatusSchema,
+        renderDraggable?: (item: StatusSchema) => ReactNode
+    ) => {
+        return (
+            <Group wrap={"nowrap"}>
+                {renderDraggable && renderDraggable(status)}
+                <StatusMobile
+                    status={status}
+                    board={board}
+                />
+            </Group>
+        );
+    };
+
+    const onDragEnd = (itemId: number, newLexorank: string) =>
+        onUpdateStatus(itemId, { lexorank: newLexorank });
+
+    return (
+        <>
+            <Group justify={"space-between"}>
+                <Box
+                    onClick={onClose}
+                    p={"xs"}>
+                    <IconChevronLeft />
+                </Box>
+                <Center>
+                    <Text>{board.name}</Text>
+                </Center>
+                <Box p={"lg"} />
+            </Group>
+            <Divider />
+            <SortableDnd
+                initialItems={statuses}
+                onDragEnd={onDragEnd}
+                renderItem={renderStatus}
+                renderDraggable={renderDraggable}
+                dragHandleStyle={{ width: "auto" }}
+                vertical
+            />
+            <CreateStatusButton />
+        </>
+    );
+};
+
+export default StatusesDrawerBody;
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext.tsx
@ -0,0 +1,78 @@
+"use client";
+
+import React, { createContext, FC, useContext } from "react";
+import useStatusesList from "@/hooks/useStatusesList";
+import { useStatusesOperations } from "@/hooks/useStatusesOperations";
+import { BoardSchema, StatusSchema, UpdateStatusSchema } from "@/lib/client";
+
+type BoardStatusesContextState = {
+    board: BoardSchema;
+    statuses: StatusSchema[];
+    setStatuses: React.Dispatch<React.SetStateAction<StatusSchema[]>>;
+    refetchStatuses: () => void;
+    onCreateStatus: (name: string) => void;
+    onUpdateStatus: (statusId: number, status: UpdateStatusSchema) => void;
+    onDeleteStatus: (status: StatusSchema) => void;
+};
+
+const BoardStatusesContext = createContext<
+    BoardStatusesContextState | undefined
+>(undefined);
+
+type Props = {
+    board: BoardSchema;
+};
+
+const useBoardStatusesContextState = ({ board }: Props) => {
+    const {
+        statuses,
+        setStatuses,
+        refetch: refetchStatuses,
+    } = useStatusesList({
+        boardId: board.id,
+    });
+
+    const { onCreateStatus, onUpdateStatus, onDeleteStatus } =
+        useStatusesOperations({
+            statuses,
+            setStatuses,
+            refetchStatuses,
+            boardId: board.id,
+        });
+
+    return {
+        board,
+        statuses,
+        setStatuses,
+        refetchStatuses,
+        onCreateStatus,
+        onUpdateStatus,
+        onDeleteStatus,
+    };
+};
+
+type BoardStatusesContextProviderProps = {
+    children: React.ReactNode;
+} & Props;
+
+export const BoardStatusesContextProvider: FC<
+    BoardStatusesContextProviderProps
+> = ({ children, ...props }) => {
+    const state = useBoardStatusesContextState(props);
+
+    return (
+        <BoardStatusesContext.Provider value={state}>
+            {children}
+        </BoardStatusesContext.Provider>
+    );
+};
+
+export const useBoardStatusesContext = () => {
+    const context = useContext(BoardStatusesContext);
+    if (!context) {
+        throw new Error(
+            "useBoardStatusesContext must be used within a BoardStatusesContextProvider"
+        );
+    }
+    return context;
+};
--- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx
+++ b/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx
@ -1,47 +1,21 @@
 "use client";

-import React, { FC, ReactNode } from "react";
-import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
-import { Box, Center, Divider, Drawer, Group, rem, Text } from "@mantine/core";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
-import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import BoardMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile";
-import CreateBoardButton from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton";
-import SortableDnd from "@/components/dnd/SortableDnd";
-import { BoardSchema } from "@/lib/client";
+import React, { FC } from "react";
+import { Drawer, rem } from "@mantine/core";
+import BoardsDrawerBody from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody";
+import { ProjectBoardsContextProvider } from "@/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext";
+import { DrawerProps } from "@/drawers/types";
+import { ProjectSchema } from "@/lib/client";

-const ProjectBoardsEditorDrawer: FC = () => {
-    const {
-        boards,
-        onUpdateBoard,
-        isEditorDrawerOpened,
-        setIsEditorDrawerOpened,
-    } = useBoardsContext();
-    const { selectedProject } = useProjectsContext();
-    const onClose = () => setIsEditorDrawerOpened(false);
-
-    const renderDraggable = () => (
-        <Box p={"xs"}>
-            <IconGripVertical />
-        </Box>
-    );
-
-    const renderBoard = (
-        board: BoardSchema,
-        renderDraggable?: (item: BoardSchema) => ReactNode
-    ) => {
-        return (
-            <Group wrap={"nowrap"}>
-                {renderDraggable && renderDraggable(board)}
-                <BoardMobile board={board} />
-            </Group>
-        );
-    };
-
-    const onDragEnd = (itemId: number, newLexorank: string) => {
-        onUpdateBoard(itemId, { lexorank: newLexorank });
-    };
+type Props = {
+    project: ProjectSchema;
+};

+const ProjectBoardsEditorDrawer: FC<DrawerProps<Props>> = ({
+    onClose,
+    opened,
+    props: { project },
+}) => {
    return (
        <Drawer
            size={"100%"}
@ -49,7 +23,7 @@ const ProjectBoardsEditorDrawer: FC = () => {
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
-            opened={isEditorDrawerOpened}
+            opened={opened}
            trapFocus={false}
            styles={{
                body: {
@ -59,27 +33,9 @@ const ProjectBoardsEditorDrawer: FC = () => {
                    gap: rem(10),
                },
            }}>
-            <Group justify={"space-between"}>
-                <Box
-                    onClick={onClose}
-                    p={"xs"}>
-                    <IconChevronLeft />
-                </Box>
-                <Center>
-                    <Text>{selectedProject?.name}</Text>
-                </Center>
-                <Box p={"lg"} />
-            </Group>
-            <Divider />
-            <SortableDnd
-                initialItems={boards}
-                onDragEnd={onDragEnd}
-                renderItem={renderBoard}
-                renderDraggable={renderDraggable}
-                dragHandleStyle={{ width: "auto" }}
-                vertical
-            />
-            <CreateBoardButton />
+            <ProjectBoardsContextProvider project={project}>
+                <BoardsDrawerBody onClose={onClose} />
+            </ProjectBoardsContextProvider>
        </Drawer>
    );
 };
--- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx
+++ b/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx
@ -2,16 +2,15 @@ import React, { FC } from "react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
-import { BoardSchema } from "@/lib/client";
+import { BoardSchema, UpdateBoardSchema } from "@/lib/client";

 type Props = {
    board: BoardSchema;
+    onUpdateBoard: (boardId: number, board: UpdateBoardSchema) => void;
+    onDeleteBoard: (board: BoardSchema) => void;
 };

-const BoardMobile: FC<Props> = ({ board }) => {
-    const { onUpdateBoard } = useBoardsContext();
-
+const BoardMobile: FC<Props> = ({ board, onUpdateBoard, onDeleteBoard }) => {
    const startEditing = () => {
        modals.openContextModal({
            modal: "enterNameModal",
@ -37,6 +36,7 @@ const BoardMobile: FC<Props> = ({ board }) => {
            <BoardMenu
                board={board}
                startEditing={startEditing}
+                onDeleteBoard={onDeleteBoard}
            />
        </Group>
    );
--- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody.tsx
+++ b/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody.tsx
@ -0,0 +1,71 @@
+import React, { FC, ReactNode } from "react";
+import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
+import { Box, Center, Divider, Group, Text } from "@mantine/core";
+import BoardMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile";
+import CreateBoardButton from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton";
+import { useProjectBoardsContext } from "@/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext";
+import SortableDnd from "@/components/dnd/SortableDnd";
+import { BoardSchema } from "@/lib/client";
+
+type Props = {
+    onClose: () => void;
+};
+
+const BoardsDrawerBody: FC<Props> = ({ onClose }) => {
+    const { boards, onUpdateBoard, onDeleteBoard, project, onCreateBoard } =
+        useProjectBoardsContext();
+
+    const renderDraggable = () => (
+        <Box p={"xs"}>
+            <IconGripVertical />
+        </Box>
+    );
+
+    const renderBoard = (
+        board: BoardSchema,
+        renderDraggable?: (item: BoardSchema) => ReactNode
+    ) => {
+        return (
+            <Group wrap={"nowrap"}>
+                {renderDraggable && renderDraggable(board)}
+                <BoardMobile
+                    board={board}
+                    onDeleteBoard={onDeleteBoard}
+                    onUpdateBoard={onUpdateBoard}
+                />
+            </Group>
+        );
+    };
+
+    const onDragEnd = (itemId: number, newLexorank: string) => {
+        onUpdateBoard(itemId, { lexorank: newLexorank });
+    };
+
+    return (
+        <>
+            <Group justify={"space-between"}>
+                <Box
+                    onClick={onClose}
+                    p={"xs"}>
+                    <IconChevronLeft />
+                </Box>
+                <Center>
+                    <Text>{project.name}</Text>
+                </Center>
+                <Box p={"lg"} />
+            </Group>
+            <Divider />
+            <SortableDnd
+                initialItems={boards}
+                onDragEnd={onDragEnd}
+                renderItem={renderBoard}
+                renderDraggable={renderDraggable}
+                dragHandleStyle={{ width: "auto" }}
+                vertical
+            />
+            <CreateBoardButton onCreateBoard={onCreateBoard} />
+        </>
+    );
+};
+
+export default BoardsDrawerBody;
--- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton.tsx
+++ b/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton.tsx
@ -1,11 +1,13 @@
+import { FC } from "react";
 import { IconPlus } from "@tabler/icons-react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";

-const CreateBoardButton = () => {
-    const { onCreateBoard } = useBoardsContext();
+type Props = {
+    onCreateBoard: (name: string) => void;
+};

+const CreateBoardButton: FC<Props> = ({ onCreateBoard }) => {
    const onStartCreating = () => {
        modals.openContextModal({
            modal: "enterNameModal",
@ -18,7 +20,9 @@ const CreateBoardButton = () => {
    };

    return (
-        <Group ml={"xs"} onClick={onStartCreating}>
+        <Group
+            ml={"xs"}
+            onClick={onStartCreating}>
            <IconPlus />
            <Box mt={5}>
                <Text>Создать доску</Text>
--- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx
+++ b/src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx
@ -0,0 +1,77 @@
+"use client";
+
+import React, { createContext, FC, useContext } from "react";
+import useBoardsList from "@/hooks/useBoardsList";
+import { useBoardsOperations } from "@/hooks/useBoardsOperations";
+import { BoardSchema, ProjectSchema, UpdateBoardSchema } from "@/lib/client";
+
+type ProjectBoardsContextState = {
+    boards: BoardSchema[];
+    setBoards: React.Dispatch<React.SetStateAction<BoardSchema[]>>;
+    project: ProjectSchema;
+    refetchBoards: () => void;
+    onCreateBoard: (name: string) => void;
+    onUpdateBoard: (boardId: number, board: UpdateBoardSchema) => void;
+    onDeleteBoard: (board: BoardSchema) => void;
+};
+
+const ProjectBoardsContext = createContext<
+    ProjectBoardsContextState | undefined
+>(undefined);
+
+type Props = {
+    project: ProjectSchema;
+};
+
+const useProjectBoardsContextState = ({ project }: Props) => {
+    const {
+        boards,
+        setBoards,
+        refetch: refetchBoards,
+    } = useBoardsList({ projectId: project?.id });
+
+    const { onCreateBoard, onUpdateBoard, onDeleteBoard } = useBoardsOperations(
+        {
+            boards,
+            setBoards,
+            refetchBoards,
+            projectId: project?.id,
+        }
+    );
+
+    return {
+        boards,
+        setBoards,
+        project,
+        refetchBoards,
+        onCreateBoard,
+        onUpdateBoard,
+        onDeleteBoard,
+    };
+};
+
+type ProjectBoardsContextProviderProps = {
+    children: React.ReactNode;
+} & Props;
+
+export const ProjectBoardsContextProvider: FC<
+    ProjectBoardsContextProviderProps
+> = ({ children, ...props }) => {
+    const state = useProjectBoardsContextState(props);
+
+    return (
+        <ProjectBoardsContext.Provider value={state}>
+            {children}
+        </ProjectBoardsContext.Provider>
+    );
+};
+
+export const useProjectBoardsContext = () => {
+    const context = useContext(ProjectBoardsContext);
+    if (!context) {
+        throw new Error(
+            "useProjectBoardsContext must be used within a ProjectBoardsContextProvider"
+        );
+    }
+    return context;
+};
--- a/src/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer.tsx
+++ b/src/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer.tsx
@ -1,16 +1,20 @@
 "use client";

 import React, { FC } from "react";
-import { Center, Divider, Drawer, rem, Stack, Text } from "@mantine/core";
-import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import CreateProjectButton from "@/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton";
-import ProjectMobile from "@/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile";
+import { Center, Divider, Drawer, rem, Text } from "@mantine/core";
+import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
+import ProjectsDrawerBody from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody";
+import { DrawerProps } from "@/drawers/types";

-const ProjectsEditorDrawer: FC = () => {
-    const { projects, isEditorDrawerOpened, setIsEditorDrawerOpened } =
-        useProjectsContext();
-    const onClose = () => setIsEditorDrawerOpened(false);
+type Props = {
+    setSelectedProjectId: (projectId: number | null) => void;
+};

+const ProjectsEditorDrawer: FC<DrawerProps<Props>> = ({
+    opened,
+    onClose,
+    props: { setSelectedProjectId },
+}) => {
    return (
        <Drawer
            size={"100%"}
@ -18,7 +22,7 @@ const ProjectsEditorDrawer: FC = () => {
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
-            opened={isEditorDrawerOpened}
+            opened={opened}
            trapFocus={false}
            styles={{
                body: {
@ -32,15 +36,12 @@ const ProjectsEditorDrawer: FC = () => {
                <Text>Проекты</Text>
            </Center>
            <Divider />
-            <Stack gap={0}>
-                {projects.map((project, index) => (
-                    <ProjectMobile
-                        key={index}
-                        project={project}
-                    />
-                ))}
-            </Stack>
-            <CreateProjectButton />
+            <ProjectsContextProvider>
+                <ProjectsDrawerBody
+                    setSelectedProjectId={setSelectedProjectId}
+                    onClose={onClose}
+                />
+            </ProjectsContextProvider>
        </Drawer>
    );
 };
--- a/src/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton.tsx
+++ b/src/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton.tsx
@ -1,9 +1,10 @@
+import { FC } from "react";
 import { IconPlus } from "@tabler/icons-react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";

-const CreateProjectButton = () => {
+const CreateProjectButton: FC = () => {
    const { onCreateProject } = useProjectsContext();

    const onStartCreating = () => {
--- a/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx
+++ b/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx
@ -8,11 +8,16 @@ import styles from "./../ProjectsEditorDrawer.module.css";

 type Props = {
    project: ProjectSchema;
+    setSelectedProjectId: (projectId: number | null) => void;
+    closeDrawer: () => void;
 };

-const ProjectMobile: FC<Props> = ({ project }) => {
-    const { onUpdateProject, setSelectedProjectId, setIsEditorDrawerOpened } =
-        useProjectsContext();
+const ProjectMobile: FC<Props> = ({
+    project,
+    setSelectedProjectId,
+    closeDrawer,
+}) => {
+    const { onUpdateProject } = useProjectsContext();

    const startEditing = () => {
        modals.openContextModal({
@ -28,7 +33,7 @@ const ProjectMobile: FC<Props> = ({ project }) => {

    const onClick = () => {
        setSelectedProjectId(project.id);
-        setIsEditorDrawerOpened(false);
+        closeDrawer();
    };

    return (