feat: init

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+import { DraftIcon } from "@plane/propel/icons";
+import { EIssuesStoreType } from "@plane/types";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { CountChip } from "@/components/common/count-chip";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+
+export const WorkspaceDraftHeader = observer(() => {
+  // state
+  const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { paginationInfo } = useWorkspaceDraftIssues();
+  const { joinedProjectIds } = useProject();
+
+  const { t } = useTranslation();
+  // check if user is authorized to create draft work item
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isDraftIssueModalOpen}
+        storeType={EIssuesStoreType.WORKSPACE_DRAFT}
+        onClose={() => setIsDraftIssueModalOpen(false)}
+        isDraft
+      />
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2.5">
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-custom-text-300" />} />
+                }
+              />
+            </Breadcrumbs>
+            {paginationInfo?.total_count && paginationInfo?.total_count > 0 ? (
+              <CountChip count={paginationInfo?.total_count} />
+            ) : (
+              <></>
+            )}
+          </div>
+        </Header.LeftItem>
+
+        <Header.RightItem>
+          {joinedProjectIds && joinedProjectIds.length > 0 && (
+            <Button
+              variant="primary"
+              size="sm"
+              className="items-center gap-1"
+              onClick={() => setIsDraftIssueModalOpen(true)}
+              disabled={!isAuthorizedUser}
+            >
+              {t("workspace_draft_issues.draft_an_issue")}
+            </Button>
+          )}
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local imports
+import { WorkspaceDraftHeader } from "./header";
+
+export default function WorkspaceDraftLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceDraftHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { WorkspaceDraftIssuesRoot } from "@/components/issues/workspace-draft";
+
+const WorkspaceDraftPage = () => {
+  // router
+  const { workspaceSlug: routeWorkspaceSlug } = useParams();
+  const pageTitle = "Workspace Draft";
+
+  // derived values
+  const workspaceSlug = (routeWorkspaceSlug as string) || undefined;
+
+  if (!workspaceSlug) return null;
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative h-full w-full overflow-hidden overflow-y-auto">
+        <WorkspaceDraftIssuesRoot workspaceSlug={workspaceSlug} />
+      </div>
+    </>
+  );
+};
+
+export default WorkspaceDraftPage;