feat: boards dnd editor for mobile

src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import React, { FC } from "react";
-import { IconChevronLeft } from "@tabler/icons-react";
-import { Box, Center, Drawer, Group, rem, Text } from "@mantine/core";
-import Board from "@/app/deals/components/Board/Board";
+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 CreateBoardButtonMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButtonMobile";
+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";
 
@@ -20,8 +20,22 @@ const ProjectBoardsEditorDrawer: FC = () => {
     const { selectedProject } = useProjectsContext();
     const onClose = () => setIsEditorDrawerOpened(false);
 
-    const renderBoard = (board: BoardSchema) => {
-        return <Board board={board} />;
+    const renderDraggable = () => (
+        <Box p={"xs"}>
+            <IconGripVertical size={22} />
+        </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) => {
@@ -55,13 +69,16 @@ const ProjectBoardsEditorDrawer: FC = () => {
                 </Center>
                 <Box p={"lg"} />
             </Group>
+            <Divider />
             <SortableDnd
                 initialItems={boards}
-                renderItem={renderBoard}
                 onDragEnd={onDragEnd}
+                renderItem={renderBoard}
+                renderDraggable={renderDraggable}
+                dragHandleStyle={{ width: "auto" }}
                 vertical
             />
-            <CreateBoardButtonMobile />
+            <CreateBoardButton />
         </Drawer>
     );
 };