feat: a few tabs for module, deal services tab for mobiles

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

@@ -1,6 +1,7 @@
 
 .tab {
     @media (max-width: 48em) {
+        width: 100%;
         border-bottom-width: 3px;
     }
 }

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

@@ -2,11 +2,12 @@ import React, { FC, ReactNode } from "react";
 import { IconEdit, IconHistory } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { Box, Tabs, Text } from "@mantine/core";
+import TabsList from "@/app/deals/drawers/DealEditorDrawer/components/TabsList";
 import DealStatusHistoryTab from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/DealStatusHistoryTab";
 import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema, ProjectSchema } from "@/lib/client";
-import { MODULES } from "@/modules/modules";
+import MODULES from "@/modules/modules";
 import styles from "../DealEditorDrawer.module.css";
 
 type Props = {
@@ -50,29 +51,58 @@ const DealEditorBody: FC<Props> = props => {
         </Tabs.Tab>
     );
 
-    const getModuleTabs = () =>
-        props.project?.builtInModules.map(module => {
-            const info = MODULES[module.key].renderInfo;
-            return getTab(info.key, info.label, info.icon);
-        });
+    const getModuleTabs = (): ReactNode[] => {
+        if (!props.project) return [];
+        const tabs: ReactNode[] = [];
 
-    const getModuleTabPanels = () =>
-        props.project?.builtInModules.map(module =>
-            getTabPanel(module.key, MODULES[module.key]?.getTab?.(props))
-        );
+        for (const module of props.project.builtInModules) {
+            const moduleInfo = MODULES[module.key];
+            for (const tab of moduleInfo.tabs) {
+                if (
+                    (tab.device === "desktop" && isMobile) ||
+                    (tab.device === "mobile" && !isMobile)
+                )
+                    continue;
+
+                tabs.push(getTab(tab.key, tab.label, tab.icon));
+            }
+        }
+
+        return tabs;
+    };
+
+    const getModuleTabPanels = () => {
+        if (!props.project) return [];
+        const tabPanels: ReactNode[] = [];
+
+        for (const module of props.project.builtInModules) {
+            const moduleInfo = MODULES[module.key];
+            for (const tab of moduleInfo.tabs) {
+                if (
+                    (tab.device === "desktop" && isMobile) ||
+                    (tab.device === "mobile" && !isMobile)
+                )
+                    continue;
+
+                tabPanels.push(getTabPanel(tab.key, tab.tab(props)));
+            }
+        }
+
+        return tabPanels;
+    };
 
     return (
         <Tabs
             defaultValue="general"
             orientation={isMobile ? "horizontal" : "vertical"}
-            h={"97vh"}
-            mih={"97vh"}
+            h={isMobile ? "min-content" : "97vh"}
+            mih={isMobile ? "min-content" : "97vh"}
             classNames={{ tab: styles.tab }}>
-            <Tabs.List>
+            <TabsList>
                 {getTab("general", "Общая информация", <IconEdit />)}
                 {getTab("history", "История", <IconHistory />)}
                 {getModuleTabs()}
-            </Tabs.List>
+            </TabsList>
 
             {getTabPanel("general", <GeneralTab {...props} />)}
             {getTabPanel("history", <DealStatusHistoryTab {...props} />)}

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

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from "react";
+import { ScrollArea, Tabs } from "@mantine/core";
+import useIsMobile from "@/hooks/utils/useIsMobile";
+
+type Props = {
+    children: ReactNode;
+};
+
+const TabsList: FC<Props> = ({ children }) => {
+    const isMobile = useIsMobile();
+
+    if (!isMobile) {
+        return <Tabs.List>{children}</Tabs.List>;
+    }
+
+    return (
+        <ScrollArea scrollbarSize={0}>
+            <Tabs.List
+                style={{
+                    flexWrap: "nowrap",
+                    minWidth: "100%",
+                    width: "max-content",
+                }}>
+                {children}
+            </Tabs.List>
+        </ScrollArea>
+    );
+};
+
+export default TabsList;