refactor: tabs navigation

.vscode/settings.json

@@ -9,5 +9,6 @@
   "[ignore]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
   },
-  "prettier.trailingComma": "none"
+  "prettier.trailingComma": "none",
+  "eslint.workingDirectories": [{ "pattern": "./apps/*/" }, { "pattern": "./packages/*/" }]
 }

apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx

@@ -1,14 +1,16 @@
 import { FC, HTMLAttributes, PropsWithChildren } from 'react'
 import { Route } from 'react-router-dom'
 
-import { ProjectSettingsPage } from '@harnessio/ui/views'
+import { useTranslationsStore } from '@utils/viewUtils'
+
+import { ProjectSettingsTabNav } from '@harnessio/ui/views'
 
 import RootViewWrapper from './root-view-wrapper'
 
 const Layout = () => {
   return (
-    <div className="bg-background-1 sticky top-[55px] z-40">
-      <ProjectSettingsPage />
+    <div className="bg-background-1 top-14.5 sticky z-40">
+      <ProjectSettingsTabNav useTranslationStore={useTranslationsStore} />
     </div>
   )
 }

apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx

@@ -13,7 +13,7 @@ const RepoViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>>
       path="*"
       element={
         <>
-          <div className="layer-high bg-background-1 sticky top-[55px]">
+          <div className="layer-high bg-background-1 top-14.5 sticky">
             <RepoSubheader useTranslationStore={useTranslationsStore} />
           </div>
           {children}

apps/gitness/src/pages-v2/project/project-settings-layout.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom'
+
+import { ProjectSettingsTabNav } from '@harnessio/ui/views'
+
+import { useTranslationStore } from '../../i18n/stores/i18n-store'
+
+export const ProjectSettingsLayout = () => {
+  return (
+    <>
+      <div className="sticky top-14.5 z-40 bg-background-1">
+        <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
+      </div>
+      <Outlet />
+    </>
+  )
+}

apps/gitness/src/pages-v2/project/settings-layout.tsx

@@ -1,12 +1,14 @@
 import { Outlet } from 'react-router-dom'
 
-import { ProjectSettingsPage } from '@harnessio/ui/views'
+import { ProjectSettingsTabNav } from '@harnessio/ui/views'
+
+import { useTranslationStore } from '../../i18n/stores/i18n-store'
 
 export const SettingsLayout = () => {
   return (
     <>
       <div className="sticky top-[55px] z-40 bg-background-1">
-        <ProjectSettingsPage />
+        <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
     </>

apps/gitness/src/pages-v2/repo/repo-layout.tsx

@@ -10,7 +10,7 @@ const RepoLayout = () => {
 
   return (
     <>
-      <div className="layer-high sticky top-[55px] bg-background-1">
+      <div className="layer-high sticky top-14.5 bg-background-1">
         <RepoSubheader showPipelinesTab={!isMFE} useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />

apps/gitness/src/routes.tsx

@@ -28,15 +28,15 @@ import { ProjectLabelsList } from './pages-v2/project/labels/project-labels-list
 import { ProjectGeneralSettingsPageContainer } from './pages-v2/project/project-general-settings-container'
 import { ImportProjectContainer } from './pages-v2/project/project-import-container'
 import { ProjectMemberListPage } from './pages-v2/project/project-member-list'
-import { SettingsLayout as ProjectSettingsLayout } from './pages-v2/project/settings-layout'
+import { ProjectSettingsLayout } from './pages-v2/project/project-settings-layout'
 import PullRequestChanges from './pages-v2/pull-request/pull-request-changes'
 import { PullRequestCommitPage } from './pages-v2/pull-request/pull-request-commits'
 import { CreatePullRequest } from './pages-v2/pull-request/pull-request-compare'
 import PullRequestConversationPage from './pages-v2/pull-request/pull-request-conversation'
 import PullRequestDataProvider from './pages-v2/pull-request/pull-request-data-provider'
 import PullRequestLayout from './pages-v2/pull-request/pull-request-layout'
 import PullRequestListPage from './pages-v2/pull-request/pull-request-list'
-import { RepoLabelFormContainer } from './pages-v2/repo/labels/label-form-container.tsx'
+import { RepoLabelFormContainer } from './pages-v2/repo/labels/label-form-container'
 import { RepoLabelsList } from './pages-v2/repo/labels/labels-list-container'
 import { RepoBranchesListPage } from './pages-v2/repo/repo-branch-list'
 import { RepoBranchSettingsRulesPageContainer } from './pages-v2/repo/repo-branch-rules-container'

packages/pipeline-graph/src/pipeline-graph-internal.tsx

@@ -75,7 +75,7 @@ export function PipelineGraphInternal(props: PipelineGraphInternalProps) {
 
       // draw lines
       if (svgGroupRef.current) {
-        let allPaths: { level1: string[]; level2: string[] } = { level1: [], level2: [] }
+        const allPaths: { level1: string[]; level2: string[] } = { level1: [], level2: [] }
         connections.map(portPair => {
           const levelPaths = getPortsConnectionPath({
             pipelineGraphRoot: rootContainerEl,
@@ -199,5 +199,3 @@ export function PipelineGraphInternal(props: PipelineGraphInternalProps) {
     </div>
   )
 }
-
-export default PipelineGraphInternal

packages/pipeline-graph/src/pipeline-graph.tsx

@@ -1,6 +1,6 @@
 import { Canvas } from './components/canvas/canvas'
 import GraphProvider from './context/graph-provider'
-import PipelineGraphInternal, { PipelineGraphInternalProps } from './pipeline-graph-internal'
+import { PipelineGraphInternal, PipelineGraphInternalProps } from './pipeline-graph-internal'
 import { NodeContent } from './types/node-content'
 
 import './pipeline-graph.css'

packages/ui/locales/en/views.json

@@ -251,7 +251,12 @@
     },
     "removeMember": "Remove member",
     "inviteNewMember": "Invite new member",
-    "members": "Members"
+    "members": "Members",
+    "tabs": {
+      "general": "General",
+      "members": "Members",
+      "labels": "Labels"
+    }
   },
   "landingPage": {
     "selectProject": "Select a project to get started",
@@ -262,6 +267,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commits",
     "changes": "Changes",
     "noCommitsYet": "No commits yet",
     "noCommitDataDescription": "There are no commits yet.",
@@ -314,7 +320,6 @@
     "compareChangesDraftButton": "Draft pull request",
     "compareChangesDraftButtonLoading": "Drafting pull request...",
     "replyHere": "Reply here",
-    "commits": "Commits",
     "noUsers": "No users found.",
     "showDiff": "Show Diff",
     "deletedFileDiff": "This file was deleted.",
@@ -381,6 +386,8 @@
     "sshKeys": "My SSH keys",
     "addSshKeyDescription": "SSH keys allow you to establish a secure connection to your code repository.",
     "addSshKey": "Add new SSH key",
+    "GeneralTab": "General",
+    "KeysTab": "Keys and Tokens",
     "saving": "Saving...",
     "generalTab": "General",
     "keysTab": "Keys and Tokens"

packages/ui/locales/es/views.json

@@ -251,7 +251,12 @@
     },
     "removeMember": "Remove member",
     "inviteNewMember": "Invite new member",
-    "members": ""
+    "members": "",
+    "tabs": {
+      "general": "General",
+      "members": "Members",
+      "labels": "Labels"
+    }
   },
   "landingPage": {
     "selectProject": "Select a project to get started",
@@ -262,6 +267,7 @@
   },
   "pullRequests": {
     "conversation": "",
+    "commits": "",
     "changes": "",
     "noCommitsYet": "",
     "noCommitDataDescription": "",
@@ -309,8 +315,7 @@
     "compareChangesDiffLink": "aprender más sobre las comparaciones de diferencias",
     "compareChangesFormTitle": "Agregar un título",
     "compareChangesFormDescription": "Agregar una descripción",
-    "replyHere": "",
-    "commits": ""
+    "replyHere": ""
   },
   "notFound": {
     "title": "Algo salió mal…",
@@ -371,6 +376,8 @@
     "sshKeys": "My SSH keys",
     "addSshKeyDescription": "SSH keys allow you to establish a secure connection to your code repository.",
     "addSshKey": "Add new SSH key",
+    "GeneralTab": "General",
+    "KeysTab": "Keys and Tokens",
     "saving": "Saving...",
     "generalTab": "General",
     "keysTab": "Keys and Tokens"

packages/ui/locales/fr/views.json

@@ -251,7 +251,12 @@
     },
     "removeMember": "Remove member",
     "inviteNewMember": "Invite new member",
-    "members": ""
+    "members": "",
+    "tabs": {
+      "general": "General",
+      "members": "Members",
+      "labels": "Labels"
+    }
   },
   "landingPage": {
     "selectProject": "Sélectionnez un projet pour commencer",
@@ -262,6 +267,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commets",
     "changes": "Changements",
     "noCommitsYet": "",
     "noCommitDataDescription": "",
@@ -310,7 +316,6 @@
     "compareChangesFormTitle": "Ajouter un titre",
     "compareChangesFormDescription": "Ajouter une description",
     "replyHere": "Repondre ici",
-    "commits": "Commets",
     "noUsers": "Aucun utilisateur trouvé.",
     "showDiff": "Afficher la différence",
     "deletedFileDiff": "Ce fichier a été supprimé.",
@@ -377,6 +382,8 @@
     "sshKeys": "Mes clés SSH",
     "addSshKeyDescription": "Les clés SSH vous permettent d'établir une connexion sécurisée avec votre dépôt de code.",
     "addSshKey": "Ajouter une nouvelle clé SSH",
+    "GeneralTab": "General",
+    "KeysTab": "Keys and Tokens",
     "saving": "Enregistrement...",
     "generalTab": "Général",
     "keysTab": "Clés et Jetons"

packages/ui/src/components/chat/chat-diff-viewer.tsx

@@ -65,16 +65,16 @@ export const ChatDiffViewer = ({ data, mode = 4, lang = 'go', fileName }: ChatDi
   }, [data, lang, setDiffInstanceCb])
 
   return (
-    <div className="border-borders-1 bg-background-1 mr-7 mt-3 flex flex-col rounded-md border">
+    <div className="mr-7 mt-3 flex flex-col rounded-md border border-borders-1 bg-background-1">
       {fileName && (
-        <span className="bg-background-2 text-foreground-1 text-14 rounded-[inherit] p-4 font-medium">{fileName}</span>
+        <span className="rounded-[inherit] bg-background-2 p-4 text-14 font-medium text-foreground-1">{fileName}</span>
       )}
       {diffFileInstance && (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         <DiffView
           style={{ '--diff-plain-lineNumber--': 'hsl(var(--canary-background-01))' } as CSSProperties}
-          className="text-foreground-8 w-full"
+          className="w-full text-foreground-8"
           diffFile={diffFileInstance}
           diffViewFontSize={14}
           diffViewHighlight={true}

packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx

@@ -4,7 +4,7 @@ import { Chat } from '@/components'
 
 export const ChatEmptyPreviewWrapper: FC = () => {
   return (
-    <div className="border-borders-4 h-[calc(100vh-100px)] border-r">
+    <div className="h-[calc(100vh-100px)] border-r border-borders-4">
       <Chat.Root>
         <Chat.Body>
           <Chat.EmptyState />

packages/ui/src/components/chat_deprecated.tsx

@@ -5,17 +5,17 @@ import { cn } from '@/utils/cn'
 
 // Root Container
 const Root: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="w-full h-full overflow-y-auto flex flex-col">{children}</div>
+  return <div className="flex size-full flex-col overflow-y-auto">{children}</div>
 }
 
 // Body
 const Body: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="flex-1 flex flex-col gap-6 mb-3 p-6">{children}</div>
+  return <div className="mb-3 flex flex-1 flex-col gap-6 p-6">{children}</div>
 }
 
 // Footer
 const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="sticky bottom-0 p-6 pt-0 bg-background">{children}</div>
+  return <div className="sticky bottom-0 bg-background p-6 pt-0">{children}</div>
 }
 
 // Message Component
@@ -48,8 +48,8 @@ const Message: React.FC<MessageProps> = ({ self, time, avatar, actions, children
         >
           {children}
         </div>
-        <div className="flex gap-3 items-center justify-between mt-1">
-          <div>{actions && <div className="flex gap-1 items-center justify-start">{actions}</div>}</div>
+        <div className="mt-1 flex items-center justify-between gap-3">
+          <div>{actions && <div className="flex items-center justify-start gap-1">{actions}</div>}</div>
           {time && (
             <Text size={1} className="text-primary opacity-20">
               {time}
@@ -68,9 +68,9 @@ interface TypingProps {
 
 const Typing: React.FC<TypingProps> = ({ avatar }) => {
   return (
-    <div className="flex items-center gap-3 mt-3">
+    <div className="mt-3 flex items-center gap-3">
       {avatar}
-      <div className="flex gap-1 text-success text-lg font-medium" aria-live="polite">
+      <div className="flex gap-1 text-lg font-medium text-success" aria-live="polite">
         <span className="dot animate-bounce">&middot;</span>
         <span className="dot animate-bounce" style={{ animationDelay: '0.15s' }}>
           &middot;
@@ -115,10 +115,10 @@ const InputField: React.FC<InputFieldProps> = ({
   sendIcon = <Icon name="chevron-up" size={16} />
 }) => {
   return (
-    <div className="sticky bottom-0 bg-background flex items-center gap-2">
+    <div className="sticky bottom-0 flex items-center gap-2 bg-background">
       <Input
         ref={inputRef}
-        className="flex-1 pt-6 px-4 pb-16 rounded-lg focus:ring-0"
+        className="flex-1 rounded-lg px-4 pb-16 pt-6 focus:ring-0"
         value={value}
         onChange={onChange}
         onKeyDown={onKeyDown}
@@ -130,7 +130,7 @@ const InputField: React.FC<InputFieldProps> = ({
         variant="outline"
         size="icon"
         disabled={disabled}
-        className="absolute right-3.5 bottom-3.5 z-10 w-6 h-6"
+        className="absolute bottom-3.5 right-3.5 z-10 size-6"
       >
         {sendIcon}
       </Button>

packages/ui/src/components/language-selector/language-dialog.tsx

@@ -40,7 +40,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
               }}
             >
               <div className="flex items-center gap-2">
-                <div className="bg-background-12 text-12 text-foreground-3 flex size-6 items-center justify-center rounded">
+                <div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 text-foreground-3">
                   {lang.code}
                 </div>
                 <span

packages/ui/src/components/multi-select.tsx

@@ -48,7 +48,7 @@ export const MultiSelect = <T = unknown,>({
         </Label>
       )}
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 px-3 transition-colors data-[state=open]:border-borders-8 bg-input-background">
+        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 bg-input-background px-3 transition-colors data-[state=open]:border-borders-8">
           {placeholder}
           <Icon name="chevron-down" className="chevron-down ml-auto" size={12} />
         </DropdownMenu.Trigger>

packages/ui/src/components/navbar-project-chooser.tsx

@@ -24,7 +24,7 @@ function Root({ logo }: ProjectProps) {
 
   return (
     <div className="flex w-full flex-col place-items-start px-3 pb-3">
-      <div className="flex h-[58px] px-1 items-center">{logo}</div>
+      <div className="flex h-[58px] items-center px-1">{logo}</div>
       <SearchBox
         width="full"
         placeholder="Search..."

packages/ui/src/components/navbar-skeleton/group.tsx

@@ -22,7 +22,7 @@ export function Group({ children, title, topBorder, isSubMenu = false, titleClas
     >
       {title && (
         <div className={cn('text-foreground-7 mt-1.5', isSubMenu ? 'mb-3' : 'mb-1.5', titleClassName)}>
-          <p className="text-xs font-normal px-2.5">{title}</p>
+          <p className="px-2.5 text-xs font-normal">{title}</p>
         </div>
       )}
       {children}

packages/ui/src/components/problems.tsx

@@ -41,7 +41,7 @@ const ProblemsComponent = {
         role="button"
         tabIndex={0}
         onClick={onClick}
-        className={`width-100 flex flex-1 cursor-pointer items-center gap-2 text-nowrap py-0.5 justify-between px-4 ${rowClasses}`}
+        className={`width-100 flex flex-1 cursor-pointer items-center justify-between gap-2 text-nowrap px-4 py-0.5 ${rowClasses}`}
       >
         {children}
       </div>

packages/ui/src/components/repo-subheader.tsx

@@ -23,7 +23,7 @@ export const RepoSubheader = ({
   const { t } = useTranslationStore()
 
   return (
-    <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+    <SandboxLayout.SubHeader className="top-14.5 h-11 overflow-hidden">
       <TabNav.Root>
         <TabNav.Item to="summary">{t('views:repos.summary', 'Summary')}</TabNav.Item>
         <TabNav.Item to="code">{t('views:repos.files', 'Files')}</TabNav.Item>

packages/ui/src/components/table.tsx

@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom',
       asStackedList:
-        'bg-background-surface rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
+        'rounded-md border bg-background-surface [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
     }
   },
   defaultVariants: {