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

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

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

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

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>
+  );
+});

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

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>
+  );
+});

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>
+  );
+});

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>
+  );
+});

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
+// helper
-import { Button } from "@plane/ui";
+import { truncateText } from "helpers/string.helper";
-// icons
-import { Plus } from "lucide-react";
 
-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 (
-    <>
+    <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 onClick={() => setCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
+        <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => setCreateIssueModal(true)}>
           Add Issue
         </Button>
-    </>
+      </div>
+    </div>
   );
-};
+});

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>
+  );
+});

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

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

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

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

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,6 +16,7 @@ export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
   return (
     <>
       <UserAuthWrapper>
+        <WorkspaceAuthWrapper>
           <ProjectAuthWrapper>
             <div className="relative flex h-screen w-full overflow-hidden">
               <AppSidebar />
@@ -32,6 +33,7 @@ export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
               </main>
             </div>
           </ProjectAuthWrapper>
+        </WorkspaceAuthWrapper>
       </UserAuthWrapper>
     </>
   );

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
+    <AppLayout header={<ProjectArchivedIssueDetailsHeader />} withProjectWrapper>
-      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>
-      }
-    >
       {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>
   );
 };
 

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
+      <AppLayout header={<ProjectArchivedIssuesHeader />} withProjectWrapper>
-        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>
-        // }
-      >
         <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>
   );
 };

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
+      <AppLayout header={<ProjectDraftIssueHeader />} withProjectWrapper>
-        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>
-        // }
-      >
         <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>
   );
 };

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 { inboxFilters: inboxFiltersStore } = useMobxStore();
-
-  const projectDetails =
-    workspaceSlug && projectId
-      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
-      : undefined;
 
   useSWR(
     workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null,
@@ -34,23 +24,7 @@ const ProjectInbox: NextPage = () => {
   );
 
   return (
-    <ProjectAuthorizationWrapper
+    <AppLayout header={<ProjectInboxHeader />} withProjectWrapper>
-      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 />}
-    >
       <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>
   );
 };
 

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
+    <AppLayout header={<ProjectIssueDetailsHeader />} withProjectWrapper>
-      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>
-      }
-    >
       {error ? (
         <EmptyState
           image={emptyIssue}
@@ -182,7 +157,7 @@ const IssueDetailsPage: NextPage = () => {
           </div>
         </Loader>
       )}
-    </ProjectAuthorizationWrapper>
+    </AppLayout>
   );
 };
 

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
+    <AppLayout header={<PagesHeader />} withProjectWrapper>
-      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>
-      }
-    >
       {error ? (
         <EmptyState
           image={emptyPage}
@@ -644,7 +629,7 @@ const SinglePage: NextPage = () => {
           <Loader.Item height="200px" />
         </Loader>
       )}
-    </ProjectAuthorizationWrapper>
+    </AppLayout>
   );
 };
 

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 { PagesHeader } from "components/headers";
-import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
 // 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,35 +78,6 @@ 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>
@@ -206,8 +160,7 @@ const ProjectPages: NextPage = () => {
           </Tab.Panels>
         </Tab.Group>
       </div>
-      </ProjectAuthorizationWrapper>
+    </AppLayout>
-    </>
   );
 };
 

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

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