chore: layout refactor (#2522)

* chore: pages layout refactor * chore: view layout refactor * chore: view layout refactor * chore: inbox layout refactor * chore: draft issue layout refactor * chore: archived issue layout refactor * chore: draft issue header layout fix * chore: layout code refactor * chore: code refactor * chore: project setting layout fix
2023-10-23 16:54:26 +05:30 · 2023-10-23 16:54:26 +05:30 · 1786a395dc
commit 1786a395dc
parent d7a36f5b04
24 changed files with 461 additions and 429 deletions
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@ -2,7 +2,7 @@ import * as React from "react";

 import { useRouter } from "next/router";
 import Link from "next/link";
-import { ArrowLeft, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 // ui
 import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // helpers
@ -23,15 +23,6 @@ export const CyclesHeader: React.FC<ICyclesHeader> = (props) => {
      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
    >
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => router.back()}
-          >
-            <ArrowLeft fontSize={14} strokeWidth={2} />
-          </button>
-        </div>
        <div>
          <Breadcrumbs onBack={() => router.back()}>
            <BreadcrumbItem
--- a/web/components/headers/index.ts
+++ b/web/components/headers/index.ts
@ -13,3 +13,8 @@ export * from "./cycles";
 export * from "./modules";
 export * from "./project-settings";
 export * from "./workspace-settings";
+export * from "./pages";
+export * from "./project-draft-issues";
+export * from "./project-archived-issue-details";
+export * from "./project-archived-issues";
+export * from "./project-issue-details";
--- a/web/components/headers/modules.tsx
+++ b/web/components/headers/modules.tsx
@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
-import { ArrowLeft, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 // components
 // ui
 import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
@ -37,15 +37,6 @@ export const ModulesHeader: FC<IModulesHeader> = (props) => {
      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
    >
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => router.back()}
-          >
-            <ArrowLeft fontSize={14} strokeWidth={2} />
-          </button>
-        </div>
        <div>
          <Breadcrumbs onBack={() => router.back()}>
            <BreadcrumbItem
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@ -0,0 +1,64 @@
+import { FC } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+
+export interface IPagesHeaderProps {
+  showButton?: boolean;
+}
+
+export const PagesHeader: FC<IPagesHeaderProps> = observer((props) => {
+  const { showButton = false } = props;
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
+          </Breadcrumbs>
+        </div>
+      </div>
+      {showButton && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            prependIcon={<Plus />}
+            size="sm"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "d" });
+              document.dispatchEvent(e);
+            }}
+          >
+            Create Page
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+});
--- a/web/components/headers/profile-preferences.tsx
+++ b/web/components/headers/profile-preferences.tsx
@ -1,5 +1,4 @@
 import { useRouter } from "next/router";
-import { ArrowLeft } from "lucide-react";
 // components
 import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";

@ -11,15 +10,6 @@ export const ProfilePreferencesHeader = () => {
      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
    >
      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => router.back()}
-          >
-            <ArrowLeft fontSize={14} strokeWidth={2} />
-          </button>
-        </div>
        <div>
          <Breadcrumbs onBack={() => router.back()}>
            <BreadcrumbItem title="My Profile Preferences" />
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@ -0,0 +1,64 @@
+import { FC } from "react";
+import useSWR from "swr";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+// services
+import { IssueArchiveService } from "services/issue";
+
+const issueArchiveService = new IssueArchiveService();
+
+export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, archivedIssueId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
+  const { data: issueDetails } = useSWR<IIssue | undefined>(
+    workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
+    workspaceSlug && projectId && archivedIssueId
+      ? () =>
+          issueArchiveService.retrieveArchivedIssue(
+            workspaceSlug as string,
+            projectId as string,
+            archivedIssueId as string
+          )
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
+              <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                <p className="truncate">{`${truncateText(
+                  issueDetails?.project_detail.name ?? "Project",
+                  32
+                )} Issues`}</p>
+              </a>
+            </Link>
+
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived  Issues`} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@ -0,0 +1,40 @@
+import { FC } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+
+export const ProjectArchivedIssuesHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <Link href={`/${workspaceSlug}/projects`}>
+              <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                <p>Projects</p>
+              </a>
+            </Link>
+
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@ -0,0 +1,44 @@
+import { FC } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+
+export const ProjectDraftIssueHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
+
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Draft Issues`} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@ -1,21 +1,54 @@
-import { useState } from "react";
-
+import { FC, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // components
 import { CreateInboxIssueModal } from "components/inbox";
-// ui
-import { Button } from "@plane/ui";
-// icons
-import { Plus } from "lucide-react";
+// helper
+import { truncateText } from "helpers/string.helper";

-export const ProjectInboxHeader = () => {
+export const ProjectInboxHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
  const [createIssueModal, setCreateIssueModal] = useState(false);

+  const { project: projectStore } = useMobxStore();
+
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
  return (
-    <>
-      <CreateInboxIssueModal isOpen={createIssueModal} onClose={() => setCreateIssueModal(false)} />
-      <Button onClick={() => setCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
-        Add Issue
-      </Button>
-    </>
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`} />
+          </Breadcrumbs>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <CreateInboxIssueModal isOpen={createIssueModal} onClose={() => setCreateIssueModal(false)} />
+        <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => setCreateIssueModal(true)}>
+          Add Issue
+        </Button>
+      </div>
+    </div>
  );
-};
+});
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@ -0,0 +1,58 @@
+import { FC } from "react";
+import useSWR from "swr";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// ui
+import { Breadcrumbs } from "@plane/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+// services
+import { IssueService } from "services/issue";
+// constants
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+
+// services
+const issueService = new IssueService();
+
+export const ProjectIssueDetailsHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: issueDetails } = useSWR(
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <Breadcrumbs.BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p className="truncate">{`${truncateText(
+                      issueDetails?.project_detail.name ?? "Project",
+                      32
+                    )} Issues`}</p>
+                  </a>
+                </Link>
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem
+              title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
+                issueDetails?.sequence_id ?? "..."
+              } Details`}
+              unshrinkTitle
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@ -2,7 +2,6 @@ import { FC } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";

-import { ArrowLeft } from "lucide-react";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // helper
@ -28,15 +27,6 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
    >
      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => router.back()}
-          >
-            <ArrowLeft fontSize={14} strokeWidth={2} />
-          </button>
-        </div>
        <div>
          <Breadcrumbs onBack={() => router.back()}>
            <BreadcrumbItem
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@ -2,7 +2,7 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@ -42,15 +42,6 @@ export const ProjectViewsHeader: React.FC = observer(() => {
        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
      >
        <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
-          <div className="block md:hidden">
-            <button
-              type="button"
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-              onClick={() => router.back()}
-            >
-              <ArrowLeft className="h-3 w-3" strokeWidth={2} />
-            </button>
-          </div>
          <div>
            <Breadcrumbs onBack={() => router.back()}>
              <BreadcrumbItem
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { ArrowLeft, Search, Plus } from "lucide-react";
+import { Search, Plus } from "lucide-react";
 // ui
 import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
 // helper
@ -19,15 +19,6 @@ export const ProjectsHeader = observer(() => {
      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
    >
      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => router.back()}
-          >
-            <ArrowLeft fontSize={14} strokeWidth={2} />
-          </button>
-        </div>
        <div>
          <Breadcrumbs onBack={() => router.back()}>
            <BreadcrumbItem
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@ -4,7 +4,6 @@ import useSWR from "swr";
 import { useRouter } from "next/router";
 import Link from "next/link";

-import { ArrowLeft } from "lucide-react";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // hooks
@ -37,15 +36,6 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
    >
      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => router.back()}
-          >
-            <ArrowLeft fontSize={14} strokeWidth={2} />
-          </button>
-        </div>
        <div>
          <Breadcrumbs onBack={() => router.back()}>
            <BreadcrumbItem
--- a/web/layouts/setting-layout/project-setting-layout/layout.tsx
+++ b/web/layouts/setting-layout/project-setting-layout/layout.tsx
@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 // layouts
-import { UserAuthWrapper, ProjectAuthWrapper } from "layouts/auth-layout";
+import { UserAuthWrapper, ProjectAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout";
 // components
 import { AppSidebar } from "layouts/app-layout";
 import { ProjectSettingsSidebar } from "./sidebar";
@ -16,22 +16,24 @@ export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
  return (
    <>
      <UserAuthWrapper>
-        <ProjectAuthWrapper>
-          <div className="relative flex h-screen w-full overflow-hidden">
-            <AppSidebar />
-            <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
-              {header}
-              <div className="h-full w-full overflow-hidden">
-                <div className="flex gap-2 relative h-full w-full overflow-x-hidden overflow-y-scroll">
-                  <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-                    <ProjectSettingsSidebar />
+        <WorkspaceAuthWrapper>
+          <ProjectAuthWrapper>
+            <div className="relative flex h-screen w-full overflow-hidden">
+              <AppSidebar />
+              <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
+                {header}
+                <div className="h-full w-full overflow-hidden">
+                  <div className="flex gap-2 relative h-full w-full overflow-x-hidden overflow-y-scroll">
+                    <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+                      <ProjectSettingsSidebar />
+                    </div>
+                    {children}
                  </div>
-                  {children}
                </div>
-              </div>
-            </main>
-          </div>
-        </ProjectAuthWrapper>
+              </main>
+            </div>
+          </ProjectAuthWrapper>
+        </WorkspaceAuthWrapper>
      </UserAuthWrapper>
    </>
  );
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";

 import { useRouter } from "next/router";
-import Link from "next/link";

 import useSWR, { mutate } from "swr";

@ -13,11 +12,12 @@ import { IssueService, IssueArchiveService } from "services/issue";
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
+import { ProjectArchivedIssueDetailsHeader } from "components/headers";
 // ui
-import { ArchiveIcon, Breadcrumbs, Loader } from "@plane/ui";
+import { ArchiveIcon, Loader } from "@plane/ui";
 // icons
 import { History } from "lucide-react";
 // types
@ -25,8 +25,6 @@ import { IIssue } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";

 const defaultValues: Partial<IIssue> = {
  name: "",
@ -143,30 +141,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
  };

  return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs onBack={() => router.back()}>
-          <Breadcrumbs.BreadcrumbItem
-            link={
-              <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
-                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                  <p className="truncate">{`${truncateText(
-                    issueDetails?.project_detail.name ?? "Project",
-                    32
-                  )} Issues`}</p>
-                </a>
-              </Link>
-            }
-          />
-          <Breadcrumbs.BreadcrumbItem
-            title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
-              issueDetails?.sequence_id ?? "..."
-            } Details`}
-            unshrinkTitle
-          />
-        </Breadcrumbs>
-      }
-    >
+    <AppLayout header={<ProjectArchivedIssueDetailsHeader />} withProjectWrapper>
      {issueDetails && projectId ? (
        <div className="flex h-full overflow-hidden">
          <div className="w-2/3 h-full overflow-y-auto space-y-2 divide-y-2 divide-custom-border-300 p-5">
@ -217,7 +192,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
          </div>
        </Loader>
      )}
-    </ProjectAuthorizationWrapper>
+    </AppLayout>
  );
 };

--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@ -1,60 +1,24 @@
 import { useRouter } from "next/router";
-import Link from "next/link";

-import useSWR from "swr";
-
-// services
-import { ProjectService } from "services/project";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
-// helper
-import { truncateText } from "helpers/string.helper";
 // ui
-import { ArchiveIcon, BreadcrumbItem, Breadcrumbs } from "@plane/ui";
+import { ArchiveIcon } from "@plane/ui";
+import { ProjectArchivedIssuesHeader } from "components/headers";
 // icons
 import { X } from "lucide-react";
 // types
 import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
-
-// services
-const projectService = new ProjectService();

 const ProjectArchivedIssues: NextPage = () => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
-  );
-
  return (
    <IssueViewContextProvider>
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem
-              link={
-                <Link href={`/${workspaceSlug}/projects`}>
-                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                    <p>Projects</p>
-                  </a>
-                </Link>
-              }
-            />
-            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`} />
-          </Breadcrumbs>
-        }
-        // right={
-        //   <div className="flex items-center gap-2">
-        //     <IssuesFilterView />
-        //   </div>
-        // }
-      >
+      <AppLayout header={<ProjectArchivedIssuesHeader />} withProjectWrapper>
        <div className="h-full w-full flex flex-col">
          <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
            <button
@ -70,7 +34,7 @@ const ProjectArchivedIssues: NextPage = () => {
          </div>
          {/* <IssuesView /> */}
        </div>
-      </ProjectAuthorizationWrapper>
+      </AppLayout>
    </IssueViewContextProvider>
  );
 };
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@ -1,60 +1,22 @@
 import { useRouter } from "next/router";
-import Link from "next/link";
-
-import useSWR from "swr";
-
-// services
-import { ProjectService } from "services/project";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
-// helper
-import { truncateText } from "helpers/string.helper";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
+import { ProjectDraftIssueHeader } from "components/headers";
 // icons
 import { X, PenSquare } from "lucide-react";
 // types
 import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
-
-// services
-const projectService = new ProjectService();

 const ProjectDraftIssues: NextPage = () => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
-  );
-
  return (
    <IssueViewContextProvider>
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem
-              link={
-                <Link href={`/${workspaceSlug}/projects`}>
-                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                    <p>Projects</p>
-                  </a>
-                </Link>
-              }
-            />
-            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Draft Issues`} />
-          </Breadcrumbs>
-        }
-        // right={
-        //   <div className="flex items-center gap-2">
-        //     <IssuesFilterView />
-        //   </div>
-        // }
-      >
+      <AppLayout header={<ProjectDraftIssueHeader />} withProjectWrapper>
        <div className="h-full w-full flex flex-col">
          <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
            <button
@ -69,7 +31,7 @@ const ProjectDraftIssues: NextPage = () => {
            </button>
          </div>
        </div>
-      </ProjectAuthorizationWrapper>
+      </AppLayout>
    </IssueViewContextProvider>
  );
 };
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@ -1,30 +1,20 @@
 import { useRouter } from "next/router";
-import Link from "next/link";

 import { NextPage } from "next";
 import useSWR from "swr";
 // hooks
 import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // components
 import { InboxActionsHeader, InboxMainContent, InboxIssuesListSidebar } from "components/inbox";
 import { ProjectInboxHeader } from "components/headers";
-// helper
-import { truncateText } from "helpers/string.helper";
-// ui
-import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";

 const ProjectInbox: NextPage = () => {
  const router = useRouter();
  const { workspaceSlug, projectId, inboxId } = router.query;

-  const { inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore();
-
-  const projectDetails =
-    workspaceSlug && projectId
-      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
-      : undefined;
+  const { inboxFilters: inboxFiltersStore } = useMobxStore();

  useSWR(
    workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null,
@ -34,23 +24,7 @@ const ProjectInbox: NextPage = () => {
  );

  return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs onBack={() => router.back()}>
-          <BreadcrumbItem
-            link={
-              <Link href={`/${workspaceSlug}/projects`}>
-                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                  <p>Projects</p>
-                </a>
-              </Link>
-            }
-          />
-          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "", 32)} Inbox`} />
-        </Breadcrumbs>
-      }
-      right={<ProjectInboxHeader />}
-    >
+    <AppLayout header={<ProjectInboxHeader />} withProjectWrapper>
      <div className="flex flex-col h-full">
        <InboxActionsHeader />
        <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
@ -60,7 +34,7 @@ const ProjectInbox: NextPage = () => {
          </div>
        </div>
      </div>
-    </ProjectAuthorizationWrapper>
+    </AppLayout>
  );
 };

--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@ -1,8 +1,6 @@
 import React, { useCallback, useEffect } from "react";

 import { useRouter } from "next/router";
-import Link from "next/link";
-
 import useSWR, { mutate } from "swr";

 // react-hook-form
@ -12,12 +10,13 @@ import { IssueService } from "services/issue";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // components
+import { ProjectIssueDetailsHeader } from "components/headers";
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
 import { EmptyState } from "components/common";
-import { Breadcrumbs, Loader } from "@plane/ui";
+import { Loader } from "@plane/ui";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // types
@ -26,7 +25,6 @@ import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
 // helper
-import { truncateText } from "helpers/string.helper";

 const defaultValues: Partial<IIssue> = {
  assignees_list: [],
@ -118,30 +116,7 @@ const IssueDetailsPage: NextPage = () => {
  }, [issueDetails, reset, issueId]);

  return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs onBack={() => router.back()}>
-          <Breadcrumbs.BreadcrumbItem
-            link={
-              <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
-                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                  <p className="truncate">{`${truncateText(
-                    issueDetails?.project_detail.name ?? "Project",
-                    32
-                  )} Issues`}</p>
-                </a>
-              </Link>
-            }
-          />
-          <Breadcrumbs.BreadcrumbItem
-            title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
-              issueDetails?.sequence_id ?? "..."
-            } Details`}
-            unshrinkTitle
-          />
-        </Breadcrumbs>
-      }
-    >
+    <AppLayout header={<ProjectIssueDetailsHeader />} withProjectWrapper>
      {error ? (
        <EmptyState
          image={emptyIssue}
@ -182,7 +157,7 @@ const IssueDetailsPage: NextPage = () => {
          </div>
        </Loader>
      )}
-    </ProjectAuthorizationWrapper>
+    </AppLayout>
  );
 };

--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import Link from "next/link";

 import { useRouter } from "next/router";

@ -22,21 +21,22 @@ import { IssueLabelService } from "services/issue";
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // components
 import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
+import { PagesHeader } from "components/headers";
 // ui
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs, CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
 import { ArrowLeft, Lock, LinkIcon, Palette, Plus, Star, Unlock, X, ChevronDown } from "lucide-react";
 // helpers
 import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
 import type { NextPage } from "next";
@ -303,22 +303,7 @@ const SinglePage: NextPage = () => {
  }, [memberDetails]);

  return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs onBack={() => router.back()}>
-          <BreadcrumbItem
-            link={
-              <Link href={`/${workspaceSlug}/projects`}>
-                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                  <p>Projects</p>
-                </a>
-              </Link>
-            }
-          />
-          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
-        </Breadcrumbs>
-      }
-    >
+    <AppLayout header={<PagesHeader />} withProjectWrapper>
      {error ? (
        <EmptyState
          image={emptyPage}
@ -644,7 +629,7 @@ const SinglePage: NextPage = () => {
          <Loader.Item height="200px" />
        </Loader>
      )}
-    </ProjectAuthorizationWrapper>
+    </AppLayout>
  );
 };

--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@ -1,33 +1,24 @@
 import { useState, Fragment } from "react";
-import Link from "next/link";

 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";

-import useSWR from "swr";
-
 // headless ui
 import { Tab } from "@headlessui/react";
-// services
-import { ProjectService } from "services/project";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
 // icons
-import { LayoutGrid, List, Plus } from "lucide-react";
+import { LayoutGrid, List } from "lucide-react";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
-// ui
-import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
+import { PagesHeader } from "components/headers";
 // types
 import { TPageViewProps } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";

 const AllPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.AllPagesList), {
  ssr: false,
@ -47,9 +38,6 @@ const OtherPagesList = dynamic<TPagesListProps>(() => import("components/pages")

 const tabsList = ["Recent", "All", "Favorites", "Created by me", "Created by others"];

-// services
-const projectService = new ProjectService();
-
 const ProjectPages: NextPage = () => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;
@ -61,11 +49,6 @@ const ProjectPages: NextPage = () => {

  const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");

-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
-  );
-
  const currentTabValue = (tab: string | null) => {
    switch (tab) {
      case "Recent":
@ -85,7 +68,7 @@ const ProjectPages: NextPage = () => {
  };

  return (
-    <>
+    <AppLayout header={<PagesHeader showButton />} withProjectWrapper>
      {workspaceSlug && projectId && (
        <CreateUpdatePageModal
          isOpen={createUpdatePageModal}
@ -95,119 +78,89 @@ const ProjectPages: NextPage = () => {
          projectId={projectId.toString()}
        />
      )}
-
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem
-              link={
-                <Link href={`/${workspaceSlug}/projects`}>
-                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                    <p>Projects</p>
-                  </a>
-                </Link>
-              }
-            />
-            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
-          </Breadcrumbs>
-        }
-        right={
-          <Button
-            variant="primary"
-            prependIcon={<Plus />}
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "d" });
-              document.dispatchEvent(e);
-            }}
-          >
-            Create Page
-          </Button>
-        }
-      >
-        <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
-          <div className="flex gap-4 justify-between">
-            <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
-            <div className="flex gap-x-1">
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                  viewType === "list" ? "bg-custom-background-80" : ""
-                }`}
-                onClick={() => setViewType("list")}
-              >
-                <List className="h-4 w-4" />
-              </button>
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                  viewType === "detailed" ? "bg-custom-background-80" : ""
-                }`}
-                onClick={() => setViewType("detailed")}
-              >
-                <LayoutGrid className="h-4 w-4" />
-              </button>
-            </div>
+      <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
+        <div className="flex gap-4 justify-between">
+          <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
+          <div className="flex gap-x-1">
+            <button
+              type="button"
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                viewType === "list" ? "bg-custom-background-80" : ""
+              }`}
+              onClick={() => setViewType("list")}
+            >
+              <List className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                viewType === "detailed" ? "bg-custom-background-80" : ""
+              }`}
+              onClick={() => setViewType("detailed")}
+            >
+              <LayoutGrid className="h-4 w-4" />
+            </button>
          </div>
-          <Tab.Group
-            as={Fragment}
-            defaultIndex={currentTabValue(pageTab)}
-            onChange={(i) => {
-              switch (i) {
-                case 0:
-                  return setPageTab("Recent");
-                case 1:
-                  return setPageTab("All");
-                case 2:
-                  return setPageTab("Favorites");
-                case 3:
-                  return setPageTab("Created by me");
-                case 4:
-                  return setPageTab("Created by others");
-
-                default:
-                  return setPageTab("Recent");
-              }
-            }}
-          >
-            <Tab.List as="div" className="mb-6 flex items-center justify-between">
-              <div className="flex gap-4 items-center flex-wrap">
-                {tabsList.map((tab, index) => (
-                  <Tab
-                    key={`${tab}-${index}`}
-                    className={({ selected }) =>
-                      `rounded-full border px-5 py-1.5 text-sm outline-none ${
-                        selected
-                          ? "border-custom-primary bg-custom-primary text-white"
-                          : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
-                      }`
-                    }
-                  >
-                    {tab}
-                  </Tab>
-                ))}
-              </div>
-            </Tab.List>
-            <Tab.Panels as={Fragment}>
-              <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">
-                <RecentPagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <AllPagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <FavoritePagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <MyPagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <OtherPagesList viewType={viewType} />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
        </div>
-      </ProjectAuthorizationWrapper>
-    </>
+        <Tab.Group
+          as={Fragment}
+          defaultIndex={currentTabValue(pageTab)}
+          onChange={(i) => {
+            switch (i) {
+              case 0:
+                return setPageTab("Recent");
+              case 1:
+                return setPageTab("All");
+              case 2:
+                return setPageTab("Favorites");
+              case 3:
+                return setPageTab("Created by me");
+              case 4:
+                return setPageTab("Created by others");
+
+              default:
+                return setPageTab("Recent");
+            }
+          }}
+        >
+          <Tab.List as="div" className="mb-6 flex items-center justify-between">
+            <div className="flex gap-4 items-center flex-wrap">
+              {tabsList.map((tab, index) => (
+                <Tab
+                  key={`${tab}-${index}`}
+                  className={({ selected }) =>
+                    `rounded-full border px-5 py-1.5 text-sm outline-none ${
+                      selected
+                        ? "border-custom-primary bg-custom-primary text-white"
+                        : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
+                    }`
+                  }
+                >
+                  {tab}
+                </Tab>
+              ))}
+            </div>
+          </Tab.List>
+          <Tab.Panels as={Fragment}>
+            <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">
+              <RecentPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <AllPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <FavoritePagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <MyPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <OtherPagesList viewType={viewType} />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
+    </AppLayout>
  );
 };

--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@ -24,7 +24,7 @@ const ProjectViews: NextPage = () => {
  );

  return (
-    <AppLayout header={<ProjectViewsHeader />}>
+    <AppLayout header={<ProjectViewsHeader />} withProjectWrapper>
      <ProjectViewsList />
    </AppLayout>
  );
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@ -12,7 +12,7 @@ import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
-import { UserAuthorizationLayout } from "layouts/auth-layout-legacy/user-authorization-wrapper";
+import { UserAuthWrapper } from "layouts/auth-layout";
 // ui
 import { Button } from "@plane/ui";
 // icons
@ -103,7 +103,7 @@ const UserInvitationsPage: NextPage = () => {
  };

  return (
-    <UserAuthorizationLayout>
+    <UserAuthWrapper>
      <DefaultLayout>
        <div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
          <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
@ -210,7 +210,7 @@ const UserInvitationsPage: NextPage = () => {
          ) : null}
        </div>
      </DefaultLayout>
-    </UserAuthorizationLayout>
+    </UserAuthWrapper>
  );
 };