[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.

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">
+      <PageHead title="Profile - Activity" />
-        <h3 className="text-lg font-medium">Recent activity</h3>
+      <div className="flex h-full w-full flex-col overflow-hidden py-5">
-        {canDownloadActivity && <DownloadActivityButton />}
+        <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>
   );
 });
 

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>
     </>
   );

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 },

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>
     </>
   );

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>
     </>
   );

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" />

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"

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>

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">