feat: table view for mobiles

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

@@ -1,9 +1,7 @@
 "use client";
 
-import { useState } from "react";
-import TopToolPanel, {
-    View,
-} from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
+import { Box } from "@mantine/core";
+import TopToolPanel from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
 import {
     BoardView,
     ScheduleView,
@@ -12,11 +10,14 @@ import {
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { DealsContextProvider } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import useView from "@/app/deals/hooks/useView";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
 
 const PageBody = () => {
     const { selectedBoard } = useBoardsContext();
     const { selectedProject } = useProjectsContext();
-    const [view, setView] = useState<View>("board");
+
+    const { view, setView } = useView();
 
     const getViewContent = () => {
         switch (view) {
@@ -42,7 +43,11 @@ const PageBody = () => {
                 view={view}
                 setView={setView}
             />
-            {getViewContent()}
+            <PageBlock
+                fullScreenMobile
+                style={{ flex: 1 }}>
+                <Box h={"100%"}>{getViewContent()}</Box>
+            </PageBlock>
         </DealsContextProvider>
     );
 };

src/app/deals/components/shared/views/BoardView.tsx

@@ -1,12 +1,11 @@
 import { Space } from "@mantine/core";
 import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
 import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
-import PageBlock from "@/components/layout/PageBlock/PageBlock";
 
 export const BoardView = () => (
-    <PageBlock style={{ height: "100%" }}>
+    <>
         <MainBlockHeader />
         <Space h="md" />
         <Funnel />
-    </PageBlock>
+    </>
 );

src/app/deals/components/shared/views/ScheduleView.tsx

@@ -1,5 +1,3 @@
-import PageBlock from "@/components/layout/PageBlock/PageBlock";
-
 export const ScheduleView = () => {
-    return <PageBlock>-</PageBlock>;
+    return <>-</>;
 };

src/app/deals/components/shared/views/TableView.tsx

@@ -1,8 +1,3 @@
 import DealsTable from "@/app/deals/components/desktop/DealsTable/DealsTable";
-import PageBlock from "@/components/layout/PageBlock/PageBlock";
 
-export const TableView = () => (
-    <PageBlock style={{ height: "100%" }}>
-        <DealsTable />
-    </PageBlock>
-);
+export const TableView = () => <DealsTable />;