feat: project editor

src/app/deals/components/desktop/CreateProjectButton/CreateProjectButton.tsx

@@ -1,36 +0,0 @@
-import { IconPlus } from "@tabler/icons-react";
-import { ActionIcon, Box } from "@mantine/core";
-import { modals } from "@mantine/modals";
-import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import style from "./CreateProjectButton.module.css";
-
-const CreateProjectButton = () => {
-    const { projectsCrud } = useProjectsContext();
-
-    const onCreateClick = () => {
-        modals.openContextModal({
-            modal: "enterNameModal",
-            title: "Создание проекта",
-            withCloseButton: true,
-            innerProps: {
-                onComplete: (name: string) => {
-                    projectsCrud.onCreate(name);
-                },
-            },
-        });
-    };
-
-    return (
-        <Box>
-            <ActionIcon
-                variant={"default"}
-                onClick={onCreateClick}
-                radius="lg"
-                className={style.container}>
-                <IconPlus />
-            </ActionIcon>
-        </Box>
-    );
-};
-
-export default CreateProjectButton;

src/app/deals/components/desktop/ProjectAction/ProjectAction.tsx

@@ -0,0 +1,26 @@
+import { FC, PropsWithChildren } from "react";
+import { ActionIcon, Box } from "@mantine/core";
+import style from "./ProjectAction.module.css";
+
+type Props = {
+    onClick: () => void;
+};
+
+const ProjectAction: FC<PropsWithChildren<Props>> = ({
+    onClick,
+    children,
+}) => {
+    return (
+        <Box>
+            <ActionIcon
+                variant={"default"}
+                onClick={onClick}
+                radius="lg"
+                className={style.container}>
+                {children}
+            </ActionIcon>
+        </Box>
+    );
+};
+
+export default ProjectAction;

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -1,19 +1,43 @@
 "use client";
 
+import { IconEdit, IconPlus } from "@tabler/icons-react";
 import { Flex, Group } from "@mantine/core";
-import CreateProjectButton from "@/app/deals/components/desktop/CreateProjectButton/CreateProjectButton";
+import { modals } from "@mantine/modals";
+import ProjectAction from "@/app/deals/components/desktop/ProjectAction/ProjectAction";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
 const TopToolPanel = () => {
-    const { projects, setSelectedProjectId, selectedProject } =
+    const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
         useProjectsContext();
+    const { openDrawer } = useDrawersContext();
     const isMobile = useIsMobile();
 
     if (isMobile) return;
 
+    const onCreateClick = () => {
+        modals.openContextModal({
+            modal: "enterNameModal",
+            title: "Создание проекта",
+            withCloseButton: true,
+            innerProps: {
+                onComplete: projectsCrud.onCreate,
+            },
+        });
+    };
+
+    const onEditClick = () => {
+        if (!selectedProject) return;
+
+        openDrawer({
+            key: "selectedProjectEditorDrawer",
+            props: { project: selectedProject, projectsCrud },
+        });
+    };
+
     return (
         <Group justify={"space-between"}>
             <ViewSelector />
@@ -21,7 +45,12 @@ const TopToolPanel = () => {
                 wrap={"nowrap"}
                 align={"center"}
                 gap={"sm"}>
-                <CreateProjectButton />
+                <ProjectAction onClick={onEditClick}>
+                    <IconEdit />
+                </ProjectAction>
+                <ProjectAction onClick={onCreateClick}>
+                    <IconPlus />
+                </ProjectAction>
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}