feat: boards on desktop as on mobile

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

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

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

@@ -1,67 +0,0 @@
-import React, { FC, useState } from "react";
-import { Box, Flex, Group, Text } from "@mantine/core";
-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";
-import styles from "./Board.module.css";
-
-type Props = {
-    board: BoardSchema;
-};
-
-const Board: FC<Props> = ({ board }) => {
-    const { selectedBoard } = useBoardsContext();
-    const isSelected = selectedBoard?.id === board.id;
-    const [isHovered, setIsHovered] = useState(false);
-    const { onUpdateBoard } = useBoardsContext();
-
-    return (
-        <Flex>
-            <SmallPageBlock
-                style={{
-                    borderBottomColor: "dodgerblue",
-                    borderBottomWidth: isSelected ? "3px" : undefined,
-                }}
-                active={isSelected}>
-                <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>
-        </Flex>
-    );
-};
-
-export default Board;

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

@@ -1,52 +0,0 @@
-"use client";
-
-import React from "react";
-import { Group } 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 (
-        <Group
-            wrap={"nowrap"}
-            gap={"md"}
-            pr={"sm"}
-            style={{ maxWidth: "100%", overflow: "hidden" }}>
-            <SortableDnd
-                initialItems={boards}
-                renderItem={renderBoard}
-                onDragEnd={onDragEnd}
-                onItemClick={selectBoard}
-                containerStyle={{
-                    flexWrap: "nowrap",
-                    gap: "var(--mantine-spacing-md)",
-                    paddingBlock: "var(--mantine-spacing-md)",
-                    paddingLeft: "var(--mantine-spacing-md)",
-                }}
-                dragHandleStyle={{ cursor: "pointer" }}
-                disabled={isMobile}
-                swiperEnabled
-            />
-            <CreateBoardButton />
-        </Group>
-    );
-};
-
-export default Boards;

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

@@ -1,35 +0,0 @@
-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={"xs"}
-                        onClick={startEditing}>
-                        <IconPlus />
-                    </Box>
-                )}
-                modalTitle={"Создание доски"}
-                inputStyles={{
-                    wrapper: {
-                        padding: 4,
-                        marginLeft: 15,
-                        marginRight: 15,
-                    },
-                }}
-            />
-        </SmallPageBlock>
-    );
-};
-
-export default CreateBoardButton;