UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: перевод внешних контуров на shell предложений

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/external-contours/page.tsx

@@ -5,53 +5,74 @@
  */
 
 import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import { EInboxIssueCurrentTab } from "@plane/types";
 import { useTranslation } from "@plane/i18n";
-import { TransferIcon } from "@plane/propel/icons";
+import darkIntakeAsset from "@/app/assets/empty-state/disabled-feature/intake-dark.webp?url";
+import lightIntakeAsset from "@/app/assets/empty-state/disabled-feature/intake-light.webp?url";
 import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { EUserProjectRoles } from "@plane/types";
+import { ExternalContoursRoot } from "@/plane-web/components/projects/external-contours/root";
 import type { Route } from "./+types/page";
 
-function ProjectExternalContoursPage(_props: Route.ComponentProps) {
+function ProjectExternalContoursPage({ params }: Route.ComponentProps) {
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = params;
+  const searchParams = useSearchParams();
+  const navigationTab = searchParams.get("currentTab");
+  const inboxIssueId = searchParams.get("inboxIssueId");
+  const { resolvedTheme } = useTheme();
   const { t } = useTranslation();
   const { currentProjectDetails } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = resolvedTheme === "light" ? lightIntakeAsset : darkIntakeAsset;
+
+  if (currentProjectDetails?.inbox_view === false)
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <DetailedEmptyState
+          title={t("external_contours_page.disabled.title")}
+          description={t("external_contours_page.disabled.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("external_contours_page.disabled.button"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/settings/projects/${projectId}/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      </div>
+    );
 
   const pageTitle = currentProjectDetails?.name
     ? t("external_contours_page.page_label", { workspace: currentProjectDetails.name })
     : t("external_contours_page.page_label", { workspace: "NODE.DC" });
 
+  const currentNavigationTab = navigationTab
+    ? navigationTab === "open"
+      ? EInboxIssueCurrentTab.OPEN
+      : EInboxIssueCurrentTab.CLOSED
+    : undefined;
+
   return (
     <div className="flex h-full flex-col">
       <PageHead title={pageTitle} />
-      <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-5 py-6 md:px-8">
-        <section className="rounded-xl border border-subtle bg-surface-1 p-6">
-          <div className="flex items-start gap-4">
-            <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-accent-primary/10 text-accent-primary">
-              <TransferIcon className="h-5 w-5 fill-current" />
-            </div>
-            <div className="flex flex-col gap-2">
-              <h1 className="text-2xl font-semibold text-primary">{t("external_contours_page.empty_state.title")}</h1>
-              <p className="max-w-3xl text-sm text-secondary">
-                {t("external_contours_page.empty_state.description")}
-              </p>
-            </div>
-          </div>
-        </section>
-
-        <section className="grid gap-4 lg:grid-cols-2">
-          <div className="rounded-xl border border-dashed border-subtle bg-surface-1 p-6">
-            <p className="mb-2 text-base font-semibold text-primary">
-              {t("external_contours_page.empty_state.request_title")}
-            </p>
-            <p className="text-sm text-secondary">{t("external_contours_page.empty_state.request_description")}</p>
-          </div>
-
-          <div className="rounded-xl border border-dashed border-subtle bg-surface-1 p-6">
-            <p className="mb-2 text-base font-semibold text-primary">
-              {t("external_contours_page.empty_state.list_title")}
-            </p>
-            <p className="text-sm text-secondary">{t("external_contours_page.empty_state.list_description")}</p>
-          </div>
-        </section>
+      <div className="h-full w-full overflow-hidden">
+        <ExternalContoursRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          inboxIssueId={inboxIssueId || undefined}
+          inboxAccessible={currentProjectDetails?.inbox_view || false}
+          navigationTab={currentNavigationTab}
+        />
       </div>
     </div>
   );