feat: division between mobile and desktop components, boards for mobile

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

@@ -0,0 +1,7 @@
+
+.board {
+    min-width: 130px;
+    flex-wrap: nowrap;
+    gap: 3px;
+}
+

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

@@ -0,0 +1,59 @@
+import React, { FC, useState } from "react";
+import { Box, Group, Text } from "@mantine/core";
+import styles from "@/app/deals/components/desktop/Board/Board.module.css";
+import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import { BoardSchema } from "@/lib/client";
+
+type Props = {
+    board: BoardSchema;
+};
+
+const Board: FC<Props> = ({ board }) => {
+    const { selectedBoard } = useBoardsContext();
+    const [isHovered, setIsHovered] = useState(false);
+    const { onUpdateBoard } = useBoardsContext();
+
+    return (
+        <SmallPageBlock active={selectedBoard?.id === board.id}>
+            <Group
+                px={"md"}
+                py={"xs"}
+                bdrs={"lg"}
+                justify={"space-between"}
+                className={styles.board}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}>
+                <InPlaceInput
+                    defaultValue={board.name}
+                    onComplete={value =>
+                        onUpdateBoard(board.id, { name: value })
+                    }
+                    inputStyles={{
+                        input: {
+                            height: 25,
+                            minHeight: 25,
+                        },
+                    }}
+                    getChildren={startEditing => (
+                        <>
+                            <Box>
+                                <Text>{board.name}</Text>
+                            </Box>
+                            <BoardMenu
+                                isHovered={isHovered}
+                                board={board}
+                                startEditing={startEditing}
+                            />
+                        </>
+                    )}
+                    modalTitle={"Редактирование доски"}
+                />
+            </Group>
+        </SmallPageBlock>
+    );
+};
+
+export default Board;

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

@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { Group, ScrollArea } from "@mantine/core";
+import Board from "@/app/deals/components/desktop/Board/Board";
+import CreateBoardButton from "@/app/deals/components/desktop/CreateBoardButton/CreateBoardButton";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import SortableDnd from "@/components/dnd/SortableDnd";
+import useIsMobile from "@/hooks/useIsMobile";
+import { BoardSchema } from "@/lib/client";
+
+const Boards = () => {
+    const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
+    const isMobile = useIsMobile();
+
+    const renderBoard = (board: BoardSchema) => <Board board={board} />;
+
+    const onDragEnd = (itemId: number, newLexorank: string) => {
+        onUpdateBoard(itemId, { lexorank: newLexorank });
+    };
+
+    const selectBoard = (board: BoardSchema) => {
+        setSelectedBoard(board);
+    };
+
+    return (
+        <ScrollArea
+            offsetScrollbars={"x"}
+            scrollbars={"x"}
+            scrollbarSize={0}
+            w={"100%"}>
+            <Group
+                wrap={"nowrap"}
+                gap={0}>
+                <SortableDnd
+                    initialItems={boards}
+                    renderItem={renderBoard}
+                    onDragEnd={onDragEnd}
+                    onItemClick={selectBoard}
+                    containerStyle={{ flexWrap: "nowrap" }}
+                    dragHandleStyle={{ cursor: "pointer" }}
+                    disabled={isMobile}
+                />
+                <CreateBoardButton />
+            </Group>
+        </ScrollArea>
+    );
+};
+
+export default Boards;

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

@@ -0,0 +1,34 @@
+import { IconPlus } from "@tabler/icons-react";
+import { Box } from "@mantine/core";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+
+const CreateBoardButton = () => {
+    const { onCreateBoard } = useBoardsContext();
+
+    return (
+        <SmallPageBlock style={{ cursor: "pointer" }}>
+            <InPlaceInput
+                placeholder={"Название доски"}
+                onComplete={onCreateBoard}
+                getChildren={startEditing => (
+                    <Box
+                        p={"sm"}
+                        onClick={startEditing}>
+                        <IconPlus />
+                    </Box>
+                )}
+                modalTitle={"Создание доски"}
+                inputStyles={{
+                    wrapper: {
+                        marginLeft: 15,
+                        marginRight: 15,
+                    },
+                }}
+            />
+        </SmallPageBlock>
+    );
+};
+
+export default CreateBoardButton;