feat: tags page for mobiles

src/app/actions/components/PageBody/PageBody.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import { useMemo } from "react";
+import { RefObject, useMemo, useRef } from "react";
+import { IconTag } from "@tabler/icons-react";
 import { SimpleGrid, Stack } from "@mantine/core";
 import Action from "@/app/actions/components/Action/Action";
 import mobileButtonsData from "@/app/actions/data/mobileButtonsData";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import BuiltInLinkData from "@/types/BuiltInLinkData";
 
 const PageBody = () => {
     const { selectedProject, setSelectedProjectId, projects, modulesSet } =
@@ -20,6 +22,14 @@ const PageBody = () => {
         [modulesSet]
     );
 
+    const commonActionsData: RefObject<BuiltInLinkData[]> = useRef([
+        {
+            icon: IconTag,
+            label: "Теги",
+            href: "/tags",
+        },
+    ]);
+
     return (
         <PageBlock fullScreenMobile>
             <Stack p={"xs"}>
@@ -33,7 +43,10 @@ const PageBody = () => {
                 <SimpleGrid
                     type={"container"}
                     cols={2}>
-                    {filteredMobileButtonsData.map((data, index) => (
+                    {[
+                        ...commonActionsData.current,
+                        ...filteredMobileButtonsData,
+                    ].map((data, index) => (
                         <Action
                             linkData={data}
                             key={index}

src/app/deals/contexts/ProjectsContext.tsx

@@ -33,8 +33,6 @@ const useProjectsContextState = (): ProjectsContextState => {
         [projects, selectedProjectId]
     );
 
-    console.log(selectedProject);
-
     const modulesSet = useMemo(
         () =>
             new Set(

src/app/tags/components/PageBody/PageBody.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Center, Divider, Stack, Text } from "@mantine/core";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import TagsPageHeader from "@/app/tags/components/TagsPageHeader/TagsPageHeader";
+import TagsTable from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/components/TagsTable";
+import { DealTagsContextProvider } from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/contexts/DealTagsContext";
+
+const PageBody = () => {
+    const { selectedProject } = useProjectsContext();
+
+    if (!selectedProject) {
+        return (
+            <Center>
+                <Text>Проект не найден</Text>
+            </Center>
+        );
+    }
+
+    return (
+        <DealTagsContextProvider project={selectedProject}>
+            <Stack gap={"md"}>
+                <TagsPageHeader project={selectedProject} />
+                <Divider />
+                <TagsTable />
+            </Stack>
+        </DealTagsContextProvider>
+    );
+};
+
+export default PageBody;

src/app/tags/components/TagsPageHeader/TagsPageHeader.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import Link from "next/link";
+import { IconChevronLeft, IconPlus } from "@tabler/icons-react";
+import { Box, Group, Title } from "@mantine/core";
+import useDealTagActions from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/hooks/useDealTagActions";
+import { ProjectSchema } from "@/lib/client";
+
+type Props = {
+    project: ProjectSchema;
+};
+
+const TagsPageHeader: FC<Props> = ({ project }) => {
+    const { onCreateClick } = useDealTagActions();
+
+    return (
+        <Group
+            mx={"xs"}
+            mt={"md"}
+            wrap={"nowrap"}
+            justify={"space-between"}>
+            <Link href={"/actions"}>
+                <IconChevronLeft />
+            </Link>
+            <Title order={5}>Теги проекта "{project.name}"</Title>
+            <Box onClick={onCreateClick}>
+                <IconPlus />
+            </Box>
+        </Group>
+    );
+};
+
+export default TagsPageHeader;

src/app/tags/page.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import { Center, Loader } from "@mantine/core";
+import PageBody from "@/app/tags/components/PageBody/PageBody";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
+
+/*
+ *   Page for mobiles only
+ */
+export default async function TagsPage() {
+    return (
+        <Suspense
+            fallback={
+                <Center h="50vh">
+                    <Loader size="lg" />
+                </Center>
+            }>
+            <PageContainer>
+                <PageBlock fullScreenMobile>
+                    <PageBody />
+                </PageBlock>
+            </PageContainer>
+        </Suspense>
+    );
+}