refactor: removed unused page block

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;

src/app/deals/components/mobile/BoardMobile/BoardMobile.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from "react";
-import classNames from "classnames";
-import { Box, Text } from "@mantine/core";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
-import { BoardSchema } from "@/lib/client";
-import styles from "./BoardMobile.module.css";
-
-type Props = {
-    board: BoardSchema;
-};
-
-const BoardMobile: FC<Props> = ({ board }) => {
-    const { selectedBoard } = useBoardsContext();
-
-    return (
-        <Box
-            px={"md"}
-            py={"xs"}
-            className={classNames(
-                styles["board-mobile"],
-                selectedBoard?.id === board.id &&
-                    styles["board-mobile-selected"]
-            )}>
-            <Text style={{ textWrap: "nowrap" }}>{board.name}</Text>
-        </Box>
-    );
-};
-
-export default BoardMobile;

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

@@ -1,5 +1,5 @@
 
-.board-mobile {
+.board {
     min-width: 50px;
     flex-wrap: nowrap;
     gap: 3px;
@@ -8,7 +8,7 @@
     border-bottom: 2px solid gray;
 }
 
-.board-mobile-selected {
+.board-selected {
     border: 2px solid gray;
     border-bottom: 0;
 }

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

@@ -0,0 +1,63 @@
+import React, { FC, useState } from "react";
+import classNames from "classnames";
+import { Box, Group, Text } from "@mantine/core";
+import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import useIsMobile from "@/hooks/useIsMobile";
+import { BoardSchema } from "@/lib/client";
+import styles from "./Board.module.css";
+
+type Props = {
+    board: BoardSchema;
+};
+
+const Board: FC<Props> = ({ board }) => {
+    const { selectedBoard, onUpdateBoard } = useBoardsContext();
+    const isMobile = useIsMobile();
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
+        <Group
+            px={"md"}
+            py={"xs"}
+            className={classNames(
+                styles.board,
+                selectedBoard?.id === board.id && styles["board-selected"]
+            )}
+            justify={"space-between"}
+            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 style={{ textWrap: "nowrap" }}>
+                                {board.name}
+                            </Text>
+                        </Box>
+                        <BoardMenu
+                            isHovered={
+                                !isMobile &&
+                                (selectedBoard?.id === board.id || isHovered)
+                            }
+                            board={board}
+                            startEditing={startEditing}
+                        />
+                    </>
+                )}
+                modalTitle={"Редактирование доски"}
+            />
+        </Group>
+    );
+};
+
+export default Board;

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

@@ -2,18 +2,18 @@
 
 import React from "react";
 import { Group, ScrollArea } from "@mantine/core";
-import BoardMobile from "@/app/deals/components/mobile/BoardMobile/BoardMobile";
+import Board from "@/app/deals/components/shared/Board/Board";
-import CreateBoardButtonMobile from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile";
+import CreateBoardButton from "@/app/deals/components/shared/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 BoardsMobile = () => {
+const Boards = () => {
     const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
     const isMobile = useIsMobile();
 
-    const renderBoard = (board: BoardSchema) => <BoardMobile board={board} />;
+    const renderBoard = (board: BoardSchema) => <Board board={board} />;
 
     const onDragEnd = (itemId: number, newLexorank: string) => {
         onUpdateBoard(itemId, { lexorank: newLexorank });
@@ -28,8 +28,8 @@ const BoardsMobile = () => {
             offsetScrollbars={"x"}
             scrollbars={"x"}
             scrollbarSize={0}
-            w={"100vw"}
+            w={"100%"}
-            mt={5}
+            mt={"xs"}
             mb={"sm"}>
             <Group
                 wrap={"nowrap"}
@@ -43,10 +43,10 @@ const BoardsMobile = () => {
                     dragHandleStyle={{ cursor: "pointer" }}
                     disabled={isMobile}
                 />
-                <CreateBoardButtonMobile />
+                <CreateBoardButton />
             </Group>
         </ScrollArea>
     );
 };
 
-export default BoardsMobile;
+export default Boards;

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

@@ -1,11 +1,11 @@
 
 .create-button {
-    padding: 8px 10px 9px;
+    padding: 10px 10px 9px;
     border-bottom: 2px solid gray;
 }
 
 .spacer {
-    height: 43px;
+    height: 45px;
     border-bottom: 2px solid gray;
     width: 100%;
 }

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

@@ -1,10 +1,10 @@
 import { IconPlus } from "@tabler/icons-react";
 import { Box, Space } from "@mantine/core";
-import styles from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import styles from "./CreateBoardButton.module.css";
 
-const CreateBoardButtonMobile = () => {
+const CreateBoardButton = () => {
     const { onCreateBoard } = useBoardsContext();
 
     return (
@@ -32,4 +32,4 @@ const CreateBoardButtonMobile = () => {
     );
 };
 
-export default CreateBoardButtonMobile;
+export default CreateBoardButton;

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

@@ -2,8 +2,7 @@
 
 import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
 import { Box, Group, Stack, Text } from "@mantine/core";
-import Boards from "@/app/deals/components/desktop/Boards/Boards";
+import Boards from "@/app/deals/components/shared/Boards/Boards";
-import BoardsMobile from "@/app/deals/components/mobile/BoardsMobile/BoardsMobile";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
@@ -24,10 +23,9 @@ const Header = () => {
         return (
             <Group
                 w={"100%"}
-                justify={"space-between"}
+                justify={"end"}
                 wrap={"nowrap"}
                 pr={"md"}>
-                <Boards />
                 <Group wrap={"nowrap"}>
                     <ColorSchemeToggle />
                     <ProjectSelect
@@ -42,22 +40,19 @@ const Header = () => {
 
     const getMobileHeader = () => {
         return (
-            <Stack gap={0}>
+            <Group justify={"space-between"}>
-                <Group justify={"space-between"}>
+                <Box
-                    <Box
+                    p={"md"}
-                        p={"md"}
+                    onClick={() => setIsProjectsDrawerOpened(true)}>
-                        onClick={() => setIsProjectsDrawerOpened(true)}>
+                    <IconChevronLeft />
-                        <IconChevronLeft />
+                </Box>
-                    </Box>
+                <Text>{selectedProject?.name}</Text>
-                    <Text>{selectedProject?.name}</Text>
+                <Box
-                    <Box
+                    p={"md"}
-                        p={"md"}
+                    onClick={() => setIsEditorDrawerOpened(true)}>
-                        onClick={() => setIsEditorDrawerOpened(true)}>
+                    <IconSettings />
-                        <IconSettings />
+                </Box>
-                    </Box>
+            </Group>
-                </Group>
-                <BoardsMobile />
-            </Stack>
         );
     };
 
@@ -65,7 +60,12 @@ const Header = () => {
         <Group
             justify={"flex-end"}
             w={"100%"}>
-            {isMobile ? getMobileHeader() : getDesktopHeader()}
+            <Stack
+                gap={0}
+                w={"100%"}>
+                {isMobile ? getMobileHeader() : getDesktopHeader()}
+                <Boards />
+            </Stack>
         </Group>
     );
 };

src/app/deals/page.tsx

@@ -15,12 +15,8 @@ export default function DealsPage() {
         <ProjectsContextProvider>
             <BoardsContextProvider>
                 <PageContainer>
-                    <PageBlock
-                        transparent
-                        style={{ padding: 0 }}>
-                        <Header />
-                    </PageBlock>
                     <PageBlock className={"mobile-padding-height"}>
+                        <Header />
                         <StatusesContextProvider>
                             <DealsContextProvider>
                                 <Funnel />

src/components/layout/PageBlock/PageBlock.module.css

@@ -19,10 +19,7 @@
 }
 
 .mobile-padding-height {
-    height: 100% !important;
+    height: 100vh;
-    @media (min-width: 48em) {
-        height: 89vh;
-    }
 }
 
 .container-full-height {

src/components/layout/SmallPageBlock/SmallPageBlock.module.css

@@ -1,33 +0,0 @@
-
-.container {
-    @mixin dark {
-        background-color: var(--mantine-color-dark-7-5);
-        box-shadow: var(--dark-shadow);
-    }
-    @mixin light {
-        background-color: var(--color-light-whitesmoke);
-        box-shadow: var(--light-shadow);
-    }
-}
-
-.container-active {
-    @mixin dark {
-        background-color: var(--mantine-color-dark-8);
-        box-shadow: var(--dark-thick-shadow);
-    }
-    @mixin light {
-        background-color: white;
-        box-shadow: var(--light-thick-shadow);
-    }
-}
-
-.container:hover {
-    @mixin dark {
-        background-color: var(--mantine-color-dark-8);
-        box-shadow: var(--dark-thick-shadow);
-    }
-    @mixin light {
-        background-color: white;
-        box-shadow: var(--light-thick-shadow);
-    }
-}

src/components/layout/SmallPageBlock/SmallPageBlock.tsx

@@ -1,25 +0,0 @@
-import { CSSProperties, FC, ReactNode } from "react";
-import classNames from "classnames";
-import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css";
-import { Box } from "@mantine/core";
-
-type Props = {
-    children: ReactNode;
-    style?: CSSProperties;
-    active?: boolean;
-};
-
-const SmallPageBlock: FC<Props> = ({ children, style, active = false }) => {
-    return (
-        <Box
-            bdrs={"lg"}
-            className={classNames(
-                styles.container,
-                active && styles["container-active"]
-            )}
-            style={style}>
-            {children}
-        </Box>
-    );
-};
-export default SmallPageBlock;

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css

@@ -1,5 +1,4 @@
 .container {
-    border-width: 0;
     @mixin dark {
         background-color: var(--mantine-color-dark-7);
     }

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -7,7 +7,6 @@ import {
     useComputedColorScheme,
     useMantineColorScheme,
 } from "@mantine/core";
-import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import style from "./ColorSchemeToggle.module.css";
 
 export function ColorSchemeToggle() {
@@ -21,23 +20,21 @@ export function ColorSchemeToggle() {
     };
 
     return (
-        <SmallPageBlock>
+        <ActionIcon
-            <ActionIcon
+            onClick={toggleColorScheme}
-                onClick={toggleColorScheme}
+            variant="default"
-                variant="default"
+            size="xl"
-                size="xl"
+            radius="lg"
-                radius="lg"
+            aria-label="Toggle color scheme"
-                aria-label="Toggle color scheme"
+            className={style.container}>
-                className={style.container}>
+            <IconSun
-                <IconSun
+                className={classNames(style.icon, style.light)}
-                    className={classNames(style.icon, style.light)}
+                stroke={1.5}
-                    stroke={1.5}
+            />
-                />
+            <IconMoon
-                <IconMoon
+                className={classNames(style.icon, style.dark)}
-                    className={classNames(style.icon, style.dark)}
+                stroke={1.5}
-                    stroke={1.5}
+            />
-                />
+        </ActionIcon>
-            </ActionIcon>
-        </SmallPageBlock>
     );
 }