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

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