From e538bfad1fe0dc8eaca0a87f4654e278dbb7bc00 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 24 Jun 2024 17:15:35 +0530
Subject: [PATCH] [WEB-1702] chore: fix project archives breadcrumbs and minor
 ui fixes in profile page. (#4916)

* [WEB-1702] chore: fix project archives breadcrumbs.

* chore: minor padding fix in profile page.

* chore: update archive page breadcrumbs display logic.

* chore: add/ update page title.
---
 .../profile/[userId]/activity/page.tsx        | 34 +++++++++++--------
 .../[projectId]/archives/cycles/layout.tsx    |  2 +-
 .../(detail)/[projectId]/archives/header.tsx  | 11 +++---
 .../archives/issues/(list)/layout.tsx         |  2 +-
 .../[projectId]/archives/modules/layout.tsx   |  2 +-
 web/app/profile/appearance/page.tsx           |  2 +-
 web/app/profile/notifications/page.tsx        |  2 +-
 web/app/profile/page.tsx                      |  2 +-
 web/app/profile/security/page.tsx             |  2 +-
 9 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
index 8b5ba07e0c..cae273fd4c 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 // ui
 import { Button } from "@plane/ui";
 // components
+import { PageHead } from "@/components/core";
 import { DownloadActivityButton, WorkspaceActivityListPage } from "@/components/profile";
 // constants
 import { EUserWorkspaceRoles } from "@/constants/workspace";
@@ -50,22 +51,25 @@ const ProfileActivityPage = observer(() => {
     currentUser?.id === userId && !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden py-5">
-      <div className="flex items-center justify-between gap-2 px-5 md:px-9">
-        <h3 className="text-lg font-medium">Recent activity</h3>
-        {canDownloadActivity && <DownloadActivityButton />}
+    <>
+      <PageHead title="Profile - Activity" />
+      <div className="flex h-full w-full flex-col overflow-hidden py-5">
+        <div className="flex items-center justify-between gap-2 px-5 md:px-9">
+          <h3 className="text-lg font-medium">Recent activity</h3>
+          {canDownloadActivity && <DownloadActivityButton />}
+        </div>
+        <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
+          {activityPages}
+          {pageCount < totalPages && resultsCount !== 0 && (
+            <div className="flex w-full items-center justify-center text-xs">
+              <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+                Load more
+              </Button>
+            </div>
+          )}
+        </div>
       </div>
-      <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
-        {activityPages}
-        {pageCount < totalPages && resultsCount !== 0 && (
-          <div className="flex w-full items-center justify-center text-xs">
-            <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
-              Load more
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
+    </>
   );
 });
 
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
index ced92a6ac8..5da3018b3f 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
@@ -7,7 +7,7 @@ import { ProjectArchivesHeader } from "../header";
 export default function ProjectArchiveCyclesLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <AppHeader header={<ProjectArchivesHeader />} />
+      <AppHeader header={<ProjectArchivesHeader activeTab="cycles" />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index 8d7e934060..5f6db17a8a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 // ui
 import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
 // components
@@ -15,12 +15,15 @@ import { useIssues, useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
-export const ProjectArchivesHeader: FC = observer(() => {
+type TProps = {
+  activeTab: 'issues' | 'cycles' | 'modules';
+}
+
+export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
+  const { activeTab } = props;
   // router
   const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
-  const pathname = usePathname();
-  const activeTab = pathname.split("/").pop();
   // store hooks
   const {
     issuesFilter: { issueFilters },
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
index d12a5e01dd..eb2df313da 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
@@ -7,7 +7,7 @@ import { ProjectArchivesHeader } from "../../header";
 export default function ProjectArchiveIssuesLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <AppHeader header={<ProjectArchivesHeader />} />
+      <AppHeader header={<ProjectArchivesHeader activeTab="issues" />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
index 333bcf74d6..c1e48db7c0 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
@@ -7,7 +7,7 @@ import { ProjectArchivesHeader } from "../header";
 export default function ProjectArchiveModulesLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <AppHeader header={<ProjectArchivesHeader />} />
+      <AppHeader header={<ProjectArchivesHeader activeTab="modules" />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );
diff --git a/web/app/profile/appearance/page.tsx b/web/app/profile/appearance/page.tsx
index 4a4c85d2f1..e3a2840d58 100644
--- a/web/app/profile/appearance/page.tsx
+++ b/web/app/profile/appearance/page.tsx
@@ -49,7 +49,7 @@ const ProfileAppearancePage = observer(() => {
 
   return (
     <>
-      <PageHead title="Profile - Theme Prefrence" />
+      <PageHead title="Profile - Appearance" />
       {userProfile ? (
         <ProfileSettingContentWrapper>
           <ProfileSettingContentHeader title="Appearance" />
diff --git a/web/app/profile/notifications/page.tsx b/web/app/profile/notifications/page.tsx
index f6bb1e4e51..b39563378b 100644
--- a/web/app/profile/notifications/page.tsx
+++ b/web/app/profile/notifications/page.tsx
@@ -23,7 +23,7 @@ export default function ProfileNotificationPage() {
 
   return (
     <>
-      <PageHead title="Profile - Email Preference" />
+      <PageHead title="Profile - Notifications" />
       <ProfileSettingContentWrapper>
         <ProfileSettingContentHeader
           title="Email notifications"
diff --git a/web/app/profile/page.tsx b/web/app/profile/page.tsx
index c0eba78e7d..b2ca0b1281 100644
--- a/web/app/profile/page.tsx
+++ b/web/app/profile/page.tsx
@@ -222,7 +222,7 @@ const ProfileSettingsPage = observer(() => {
             </Link> */}
             </div>
 
-            <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3 pb-8">
               <div className="flex flex-col gap-1">
                 <h4 className="text-sm">
                   First name<span className="text-red-500">*</span>
diff --git a/web/app/profile/security/page.tsx b/web/app/profile/security/page.tsx
index 503c099f6e..e1de5ef1f1 100644
--- a/web/app/profile/security/page.tsx
+++ b/web/app/profile/security/page.tsx
@@ -130,7 +130,7 @@ const SecurityPage = observer(() => {
 
   return (
     <>
-      <PageHead title="Profile - Change Password" />
+      <PageHead title="Profile - Security" />
       <ProfileSettingContentWrapper>
         <ProfileSettingContentHeader title="Change password" />
         <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 py-6">