feat: navbar buttons depended on selected project

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

@@ -1,16 +1,15 @@
 "use client";
 
 import { FC } from "react";
-import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
-import { Flex, Group, Indicator } from "@mantine/core";
+import { IconFilter } from "@tabler/icons-react";
+import { Button, Divider, Flex, Group, Indicator } from "@mantine/core";
 import { modals } from "@mantine/modals";
+import style from "@/app/deals/components/desktop/ViewSelectButton/ViewSelectButton.module.css";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
-import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
-import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
-import { useDrawersContext } from "@/drawers/DrawersContext";
+import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
 export type View = "board" | "table" | "schedule";
@@ -22,37 +21,11 @@ type Props = {
 
 const TopToolPanel: FC<Props> = ({ view, setView }) => {
     const { dealsFiltersForm, isChangedFilters } = useDealsContext();
-    const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
-        useProjectsContext();
-    const { openDrawer } = useDrawersContext();
+    const { selectedProject } = useProjectsContext();
     const isMobile = useIsMobile();
 
     if (isMobile) return;
 
-    const onCreateClick = () => {
-        modals.openContextModal({
-            modal: "enterNameModal",
-            title: "Создание проекта",
-            withCloseButton: true,
-            innerProps: {
-                onChange: projectsCrud.onCreate,
-            },
-        });
-    };
-
-    const onEditClick = () => {
-        if (!selectedProject) return;
-
-        openDrawer({
-            key: "projectEditorDrawer",
-            props: {
-                value: selectedProject,
-                onChange: value => projectsCrud.onUpdate(value.id, value),
-                onDelete: projectsCrud.onDelete,
-            },
-        });
-    };
-
     const viewFiltersModalMap = {
         table: "dealsTableFiltersModal",
         board: "dealsBoardFiltersModal",
@@ -75,11 +48,12 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
     };
 
     return (
-        <Group justify={"space-between"}>
+        <Group>
             <ViewSelector
                 value={view}
                 onChange={setView}
             />
+            <Divider orientation={"vertical"} />
             <Flex
                 wrap={"nowrap"}
                 align={"center"}
@@ -87,24 +61,19 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
                 <Indicator
                     zIndex={100}
                     disabled={!isChangedFilters}
-                    offset={3}
+                    offset={5}
                     size={8}>
-                    <ActionIconWithTip onClick={onFiltersClick}>
-                        <IconFilter />
-                    </ActionIconWithTip>
+                    <SmallPageBlock
+                        style={{ borderRadius: "var(--mantine-radius-xl)" }}>
+                        <Button
+                            unstyled
+                            onClick={onFiltersClick}
+                            radius="xl"
+                            className={style.container}>
+                            <IconFilter />
+                        </Button>
+                    </SmallPageBlock>
                 </Indicator>
-                <ActionIconWithTip onClick={onEditClick}>
-                    <IconEdit />
-                </ActionIconWithTip>
-                <ActionIconWithTip onClick={onCreateClick}>
-                    <IconPlus />
-                </ActionIconWithTip>
-                <ProjectSelect
-                    data={projects}
-                    value={selectedProject}
-                    onChange={value => value && setSelectedProjectId(value.id)}
-                    style={{ width: 250 }}
-                />
             </Flex>
         </Group>
     );