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

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