ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: frontend read-layer и первый экран двусторонней доски внешних контуров

plane-src/apps/web/ce/components/projects/external-contours/root.tsx

@@ -4,18 +4,15 @@
  * See the LICENSE file for details.
  */
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { PanelLeft } from "lucide-react";
-import { useTranslation } from "@plane/i18n";
 import { TransferIcon } from "@plane/propel/icons";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
-import { cn } from "@plane/utils";
+import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
+import { ExternalContoursBoardRoot } from "./board-root";
 import { ExternalContoursContentRoot } from "./content-root";
-import { ExternalContoursEmptyState } from "./empty-state";
-import { ExternalContoursSidebar } from "./sidebar";
 
 type TExternalContoursRoot = {
   workspaceSlug: string;
@@ -26,10 +23,16 @@ type TExternalContoursRoot = {
 
 export const ExternalContoursRoot = observer(function ExternalContoursRoot(props: TExternalContoursRoot) {
   const { workspaceSlug, projectId, inboxIssueId, navigationTab } = props;
-  const [isMobileSidebar, setIsMobileSidebar] = useState(true);
-  const { t } = useTranslation();
   const { loader, error, currentTab, currentProjectId, requestIds, handleCurrentTab, fetchRequests } =
     useProjectExternalContours();
+  const {
+    error: boardError,
+    currentProjectId: boardProjectId,
+    currentTab: boardCurrentTab,
+    fetchBoard,
+    handleCurrentTab: handleBoardCurrentTab,
+    loader: boardLoader,
+  } = useProjectExternalContoursBoard();
 
   useEffect(() => {
     if (!workspaceSlug || !projectId) return;
@@ -56,7 +59,24 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspaceSlug, projectId, navigationTab]);
 
-  if (error && error?.status === "init-error") {
+  useEffect(() => {
+    if (!workspaceSlug || !projectId) return;
+
+    const resolvedTab = navigationTab || EInboxIssueCurrentTab.OPEN;
+    const hasProjectChanged = boardProjectId && boardProjectId !== projectId;
+
+    if (boardProjectId === projectId && boardCurrentTab === resolvedTab && boardLoader === "init-loading") return;
+
+    if (hasProjectChanged || boardCurrentTab !== resolvedTab) {
+      void handleBoardCurrentTab(workspaceSlug, projectId, resolvedTab);
+      return;
+    }
+
+    void fetchBoard(workspaceSlug.toString(), projectId.toString(), resolvedTab);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspaceSlug, projectId, navigationTab]);
+
+  if (error && error?.status === "init-error" && !!inboxIssueId) {
     return (
       <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
         <TransferIcon className="size-[60px]" strokeWidth={1.5} />
@@ -65,50 +85,26 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
     );
   }
 
+  if (boardError && boardError?.status === "init-error" && !inboxIssueId) {
+    return (
+      <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
+        <TransferIcon className="size-[60px]" strokeWidth={1.5} />
+        <div className="text-secondary">{boardError?.message}</div>
+      </div>
+    );
+  }
+
   return (
     <>
-      {!inboxIssueId && (
-        <div className="flex h-12 w-full items-center border-b border-subtle px-4 lg:hidden">
-          <PanelLeft
-            onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-            className={cn("h-4 w-4", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
-          />
-        </div>
-      )}
       <div className="flex h-full w-full overflow-hidden bg-surface-1 pt-2">
-        <div
-          className={cn(
-            "absolute top-[50px] bottom-0 z-10 w-full flex-shrink-0 bg-surface-1 transition-all lg:!relative lg:!top-0 lg:w-2/6",
-            isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0"
-          )}
-        >
-          <ExternalContoursSidebar
-            setIsMobileSidebar={setIsMobileSidebar}
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId.toString()}
-            inboxIssueId={inboxIssueId}
-          />
-        </div>
-
         {inboxIssueId ? (
           <ExternalContoursContentRoot
-            setIsMobileSidebar={setIsMobileSidebar}
-            isMobileSidebar={isMobileSidebar}
             workspaceSlug={workspaceSlug.toString()}
             projectId={projectId.toString()}
             inboxIssueId={inboxIssueId.toString()}
           />
         ) : (
-          <div className="flex h-full w-full flex-col overflow-hidden px-8">
-            <div className="hidden h-20 shrink-0 lg:block" />
-            <div className="flex min-h-0 flex-1 items-center justify-center">
-              <ExternalContoursEmptyState
-                compact
-                title={t("external_contours_page.empty_state.detail_title")}
-                description={t("external_contours_page.empty_state.detail_description")}
-              />
-            </div>
-          </div>
+          <ExternalContoursBoardRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
         )}
       </div>
     </>