fix: tab settings must be visible only for project owners

src/components/ProjectSettingsPage/ProjectSettingsPage.i18n/en.json

@@ -28,5 +28,7 @@
     "Before delete a project, you must move it to another project or delete": "Before delete a project, you must move it to another project or delete",
     "Cannot delete project now": "Cannot delete project now",
     "Ok, got it": "Ok, got it",
-    "Project key": "Project key"
+    "Project key": "Project key",
+    "Goals": "Goals",
+    "Settings": "Settings"
 }

src/components/ProjectSettingsPage/ProjectSettingsPage.i18n/ru.json

@@ -28,5 +28,7 @@
     "Before delete a project, you must move it to another project or delete": "Перед удалением проект необходимо перенести в другой проект или удалить",
     "Cannot delete project now": "Невозможно сейчас удалить проект",
     "Ok, got it": "Хорошо, сделаю",
-    "Project key": "Ключ проекта"
+    "Project key": "Ключ проекта",
+    "Goals": "Цели",
+    "Settings": "Настройки"
 }

src/components/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -1,8 +1,10 @@
-import { ChangeEvent, useCallback, useState } from 'react';
+import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter as useNextRouter } from 'next/router';
 import dynamic from 'next/dynamic';
+import NextLink from 'next/link';
 import { gapS, gray9, warn0 } from '@taskany/colors';
 import {
     Button,
@@ -16,12 +18,14 @@ import {
     FormMultiInput,
     ModalHeader,
     ModalContent,
+    TabsMenuItem,
+    TabsMenu,
 } from '@taskany/bricks';
 import { IconExclamationCircleSolid } from '@taskany/icons';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';
 import { PageSep } from '../PageSep';
-import { useRouter } from '../../hooks/router';
+import { routes, useRouter } from '../../hooks/router';
 import { SettingsCard, SettingsContent } from '../SettingsContent';
 import { dispatchModalEvent, ModalEvent } from '../../utils/dispatchModal';
 import { Page } from '../Page';
@@ -35,7 +39,6 @@ import { ActivityByIdReturnType, ProjectUpdateReturnType } from '../../../trpc/i
 import { Tip } from '../Tip';
 import { TextList, TextListItem } from '../TextList';
 import { CommonHeader } from '../CommonHeader';
-import { ProjectTabsMenu } from '../ProjectTabsMenu/ProjectTabsMenu';
 
 import { tr } from './ProjectSettingsPage.i18n';
 
@@ -60,6 +63,7 @@ const StyledModalActions = styled.div`
 
 export const ProjectSettingsPage = ({ user, ssrTime, params: { id } }: ExternalPageProps) => {
     const router = useRouter();
+    const nextRouter = useNextRouter();
     const [lastProjectCache, setLastProjectCache] = useLocalStorage('lastProjectCache');
     const [currentProjectCache, setCurrentProjectCache] = useLocalStorage('currentProjectCache');
     const [recentProjectsCache, setRecentProjectsCache] = useLocalStorage('recentProjectsCache', {});
@@ -178,12 +182,26 @@ export const ProjectSettingsPage = ({ user, ssrTime, params: { id } }: ExternalP
         })
         .join('');
 
+    const tabsMenuOptions: Array<[string, string]> = useMemo(
+        () => [
+            [tr('Goals'), routes.project(id)],
+            [tr('Settings'), routes.projectSettings(id)],
+        ],
+        [id],
+    );
+
     if (!project.data) return null;
 
     return (
         <Page user={user} ssrTime={ssrTime} title={pageTitle}>
             <CommonHeader title={project.data.title} description={project.data.description}>
-                <ProjectTabsMenu id={id} />
+                <TabsMenu>
+                    {tabsMenuOptions.map(([title, href]) => (
+                        <NextLink key={title} href={href} passHref legacyBehavior>
+                            <TabsMenuItem active={nextRouter.asPath.split('?')[0] === href}>{title}</TabsMenuItem>
+                        </NextLink>
+                    ))}
+                </TabsMenu>
             </CommonHeader>
 
             <PageSep />

src/components/ProjectsPage/ProjectsPage.i18n/en.json

@@ -4,5 +4,7 @@
     "Reset": "Reset",
     "created by": "created by",
     "Projects": "Projects",
-    "description": "This is page with all projects hierarchy. You can open goals and issues for any project right here. "
+    "description": "This is page with all projects hierarchy. You can open goals and issues for any project right here. ",
+    "Goals": "Goals",
+    "Settings": "Settings"
 }

src/components/ProjectsPage/ProjectsPage.i18n/ru.json

@@ -4,5 +4,7 @@
     "Reset": "Сбросить",
     "created by": "автор",
     "Projects": "Проекты",
-    "description": "Это страница со всей иерархией проектов. Вы можете открывать цели и задачи прямо здесь."
+    "description": "Это страница со всей иерархией проектов. Вы можете открывать цели и задачи прямо здесь.",
+    "Goals": "Цели",
+    "Settings": "Настройки"
 }

src/components/ProjectsPage/ProjectsPage.tsx

@@ -1,7 +1,8 @@
 import { MouseEventHandler, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useRouter as useNextRouter } from 'next/router';
 import dynamic from 'next/dynamic';
-import { Button, nullable } from '@taskany/bricks';
+import NextLink from 'next/link';
+import { Button, TabsMenu, TabsMenuItem, nullable } from '@taskany/bricks';
 
 import { PageContent, Page } from '../Page';
 import { refreshInterval } from '../../utils/config';
@@ -25,7 +26,7 @@ import { CommonHeader } from '../CommonHeader';
 import { useProjectResource } from '../../hooks/useProjectResource';
 import { WatchButton } from '../WatchButton/WatchButton';
 import { StarButton } from '../StarButton/StarButton';
-import { ProjectTabsMenu } from '../ProjectTabsMenu/ProjectTabsMenu';
+import { routes } from '../../hooks/router';
 
 import { tr } from './ProjectsPage.i18n';
 
@@ -218,6 +219,17 @@ export const ProjectsPage = ({ user, ssrTime, params: { id }, defaultPresetFallb
 
     const { toggleProjectWatching, toggleProjectStar } = useProjectResource(id);
 
+    const tabsMenuOptions: Array<[string, string, boolean]> = useMemo(
+        () =>
+            id
+                ? [
+                      [tr('Goals'), routes.project(id), false],
+                      [tr('Settings'), routes.projectSettings(id), true],
+                  ]
+                : [[tr('Goals'), routes.projects(), false]],
+        [id],
+    );
+
     return (
         <Page user={user} ssrTime={ssrTime} title={pageTitle}>
             <CommonHeader
@@ -234,7 +246,15 @@ export const ProjectsPage = ({ user, ssrTime, params: { id }, defaultPresetFallb
                     </>
                 ))}
             >
-                <ProjectTabsMenu id={id} />
+                <TabsMenu>
+                    {tabsMenuOptions.map(([title, href, ownerOnly]) =>
+                        nullable(ownerOnly ? project?._isOwner : true, () => (
+                            <NextLink key={title} href={href} passHref legacyBehavior>
+                                <TabsMenuItem active={nextRouter.asPath.split('?')[0] === href}>{title}</TabsMenuItem>
+                            </NextLink>
+                        )),
+                    )}
+                </TabsMenu>
             </CommonHeader>
 
             <FiltersPanel