feat: header in deal editor for mobile

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css

@@ -2,3 +2,12 @@
 .tab {
     border-bottom-width: 3px;
 }
+
+.header-board {
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
+    @mixin dark {
+        color: var(--mantine-color-dark-2);
+    }
+}

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import { Drawer } from "@mantine/core";
 import DealEditorBody from "@/app/deals/drawers/DealEditorDrawer/components/DealEditorBody";
+import Header from "@/app/deals/drawers/DealEditorDrawer/components/Header";
 import { DrawerProps } from "@/drawers/types";
 import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
 import useIsMobile from "@/hooks/utils/useIsMobile";
@@ -20,6 +21,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
     props,
 }) => {
     const isMobile = useIsMobile();
+    const [deal, setDeal] = useState(props.deal);
 
     return (
         <Drawer
@@ -27,19 +29,24 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
             position={"right"}
             onClose={onClose}
             removeScrollProps={{ allowPinchZoom: true }}
-            withCloseButton={false}
+            withCloseButton={isMobile}
             opened={opened}
             trapFocus={false}
+            title={isMobile && <Header deal={deal} />}
             styles={{
                 body: {
-                    height: "100%",
                     display: "flex",
                     flexDirection: "column",
                     padding: 0,
                 },
+                header: {
+                    paddingBlock: 0,
+                },
             }}>
             <DealEditorBody
                 {...props}
+                deal={deal}
+                setDeal={setDeal}
                 onClose={onClose}
             />
         </Drawer>

src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { IconCircleDotted, IconEdit } from "@tabler/icons-react";
 import { Tabs, Text } from "@mantine/core";
 import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
@@ -10,10 +10,11 @@ type Props = {
     project: ProjectSchema;
     dealsCrud: DealsCrud;
     deal: DealSchema;
+    setDeal: React.Dispatch<React.SetStateAction<DealSchema>>;
     onClose: () => void;
 };
 
-const DealEditorBody: FC<Props> = ({ project, dealsCrud, deal, onClose }) => {
+const DealEditorBody: FC<Props> = props => {
     return (
         <Tabs
             defaultValue="general"
@@ -32,12 +33,7 @@ const DealEditorBody: FC<Props> = ({ project, dealsCrud, deal, onClose }) => {
             </Tabs.List>
 
             <Tabs.Panel value="general">
-                <GeneralTab
+                <GeneralTab {...props} />
-                    project={project}
-                    dealsCrud={dealsCrud}
-                    deal={deal}
-                    onClose={onClose}
-                />
             </Tabs.Panel>
             <Tabs.Panel value="mock">
                 <Text>mock</Text>

src/app/deals/drawers/DealEditorDrawer/components/Header.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { Stack, Text } from "@mantine/core";
+import { DealSchema } from "@/lib/client";
+import styles from "../DealEditorDrawer.module.css";
+
+type Props = {
+    deal: DealSchema;
+};
+
+const Header: FC<Props> = ({ deal }) => {
+    return (
+        <Stack gap={0}>
+            <Text>{deal.name}</Text>
+            <Text
+                size={"xs"}
+                className={styles["header-board"]}>
+                {deal.board.name}
+            </Text>
+        </Stack>
+    );
+};
+
+export default Header;

src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import React, { FC } from "react";
 import { Stack, Text, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer";
@@ -12,14 +12,19 @@ type Props = {
     project: ProjectSchema;
     dealsCrud: DealsCrud;
     deal: DealSchema;
+    setDeal: React.Dispatch<React.SetStateAction<DealSchema>>;
     onClose: () => void;
 };
 
-const GeneralTab: FC<Props> = ({ project, deal, dealsCrud, onClose }) => {
+const GeneralTab: FC<Props> = ({
-    const [initialValues, setInitialValues] =
+    project,
-        useState<Partial<DealSchema>>(deal);
+    deal,
+    setDeal,
+    dealsCrud,
+    onClose,
+}) => {
     const form = useForm<Partial<DealSchema>>({
-        initialValues,
+        initialValues: deal,
         validate: {
             name: value => !value && "Введите название",
             board: value => !value && "Выберите доску",
@@ -33,7 +38,10 @@ const GeneralTab: FC<Props> = ({ project, deal, dealsCrud, onClose }) => {
             boardId: values.board?.id,
             statusId: values.status?.id,
         });
-        setInitialValues(values);
+        setDeal(prev => ({
+            ...prev,
+            ...values,
+        }));
     };
 
     const onDelete = () => {
@@ -64,7 +72,7 @@ const GeneralTab: FC<Props> = ({ project, deal, dealsCrud, onClose }) => {
                 />
                 <Footer
                     form={form}
-                    initialValues={initialValues}
+                    initialValues={deal}
                     onDelete={onDelete}
                 />
             </Stack>