feat: select view buttons

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Group } from "@mantine/core";
+import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import useIsMobile from "@/hooks/utils/useIsMobile";
+
+const TopToolPanel = () => {
+    const { projects, setSelectedProjectId, selectedProject } =
+        useProjectsContext();
+    const isMobile = useIsMobile();
+
+    if (isMobile) return;
+
+    return (
+        <Group justify={"space-between"}>
+            <ViewSelector />
+            <ProjectSelect
+                data={projects}
+                value={selectedProject}
+                onChange={value => value && setSelectedProjectId(value.id)}
+            />
+        </Group>
+    );
+};
+
+export default TopToolPanel;

src/app/deals/components/desktop/ViewSelectButton/ViewSelectButton.module.css

@@ -0,0 +1,9 @@
+.container {
+    width: 100%;
+    border-radius: var(--mantine-radius-xl);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: var(--mantine-spacing-xs);
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { FC, PropsWithChildren } from "react";
+import { Button } from "@mantine/core";
+import { useViewContext, View } from "@/app/deals/contexts/ViewContext";
+import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
+import style from "./ViewSelectButton.module.css";
+
+type Props = {
+    viewName: View;
+};
+
+const ViewSelectButton: FC<PropsWithChildren<Props>> = ({
+    viewName,
+    children,
+}) => {
+    const { view, setView } = useViewContext();
+
+    return (
+        <SmallPageBlock
+            active={view === viewName}
+            style={{ borderRadius: "var(--mantine-radius-xl)" }}>
+            <Button
+                unstyled
+                onClick={() => setView(viewName)}
+                radius="xl"
+                className={style.container}>
+                {children}
+            </Button>
+        </SmallPageBlock>
+    );
+};
+
+export default ViewSelectButton;

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

@@ -0,0 +1,25 @@
+import {
+    IconCalendarWeekFilled,
+    IconLayoutDashboard,
+    IconMenu2,
+} from "@tabler/icons-react";
+import { Group } from "@mantine/core";
+import ViewSelectButton from "@/app/deals/components/desktop/ViewSelectButton/ViewSelectButton";
+
+const ViewSelector = () => {
+    return (
+        <Group>
+            <ViewSelectButton viewName={"board"}>
+                <IconLayoutDashboard />
+            </ViewSelectButton>
+            <ViewSelectButton viewName={"table"}>
+                <IconMenu2 />
+            </ViewSelectButton>
+            <ViewSelectButton viewName={"schedule"}>
+                <IconCalendarWeekFilled />
+            </ViewSelectButton>
+        </Group>
+    );
+};
+
+export default ViewSelector;

src/app/deals/components/shared/Boards/Boards.module.css

@@ -1,6 +1,6 @@
 .container {
     @media (min-width: 48em) {
-        max-width: calc(100vw - 450px);
+        max-width: calc(100vw - 210px - var(--mantine-spacing-md));
     }
     @media (max-width: 48em) {
         max-width: 100vw;

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Space } from "@mantine/core";
+import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
+import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
+import { DealsContextProvider } from "@/app/deals/contexts/DealsContext";
+import { useViewContext } from "@/app/deals/contexts/ViewContext";
+
+const PageBody = () => {
+    const { view } = useViewContext();
+
+    if (view === "board")
+        return (
+            <>
+                <MainBlockHeader />
+                <Space h={"md"} />
+                <DealsContextProvider>
+                    <Funnel />
+                </DealsContextProvider>
+            </>
+        );
+
+    if (view === "table") return <>-</>;
+
+    return <>-</>;
+};
+
+export default PageBody;

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -1,6 +1,6 @@
 
 .container {
-    height: calc(100vh - 150px);
+    height: calc(100vh - 210px);
     @media (max-width: 48em) {
         width: 80vw;
         height: calc(100vh - 215px);