UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: расширенный home layout и аналитические панели

plane-src/apps/web/ce/components/breadcrumbs/common.tsx

@@ -6,18 +6,28 @@
 
 // local components
 import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+import { useUserProfile } from "@/hooks/store/user";
 import { ProjectBreadcrumb } from "./project";
 
 type TCommonProjectBreadcrumbProps = {
   workspaceSlug: string;
   projectId: string;
+  shouldTruncate?: boolean;
 };
 
 export function CommonProjectBreadcrumbs(props: TCommonProjectBreadcrumbProps) {
-  const { workspaceSlug, projectId } = props;
+  const { workspaceSlug, projectId, shouldTruncate } = props;
   // preferences
   const { preferences: projectPreferences } = useProjectNavigationPreferences();
+  const { data: userProfile } = useUserProfile();
+  const shouldUseCompactToolbar = userProfile?.theme?.nodedcCompactToolbar === true;
 
   if (projectPreferences.navigationMode === "TABBED") return null;
-  return <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />;
+  return (
+    <ProjectBreadcrumb
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      shouldTruncate={shouldTruncate ?? shouldUseCompactToolbar}
+    />
+  );
 }

plane-src/apps/web/ce/components/breadcrumbs/expanded-toolbar-breadcrumbs.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { observer } from "mobx-react";
+import { Breadcrumbs } from "@plane/ui";
+import { useUserProfile } from "@/hooks/store/user";
+
+type TExpandedToolbarBreadcrumbsProps = {
+  children: ReactNode;
+  isLoading?: boolean;
+  onBack?: () => void;
+};
+
+export const ExpandedToolbarBreadcrumbs = observer(function ExpandedToolbarBreadcrumbs(
+  props: TExpandedToolbarBreadcrumbsProps
+) {
+  const { children, isLoading = false, onBack } = props;
+  const { data: userProfile } = useUserProfile();
+  const [target, setTarget] = useState<HTMLElement | null>(null);
+
+  const isCompactToolbar = userProfile?.theme?.nodedcCompactToolbar === true;
+
+  useEffect(() => {
+    if (isCompactToolbar || typeof document === "undefined") {
+      setTarget(null);
+      return;
+    }
+
+    const animationFrame = window.requestAnimationFrame(() => {
+      setTarget(document.querySelector<HTMLElement>("[data-nodedc-expanded-breadcrumbs-slot]"));
+    });
+
+    return () => window.cancelAnimationFrame(animationFrame);
+  }, [isCompactToolbar]);
+
+  const content = (
+    <div className="flex min-w-0 items-center gap-2.5 overflow-visible">
+      <Breadcrumbs
+        onBack={onBack}
+        isLoading={isLoading}
+        className={isCompactToolbar ? "flex-grow-0" : "nodedc-expanded-breadcrumbs flex-grow-0"}
+      >
+        {children}
+      </Breadcrumbs>
+    </div>
+  );
+
+  if (!isCompactToolbar && target) return createPortal(content, target);
+
+  return content;
+});

plane-src/apps/web/ce/components/breadcrumbs/project.tsx

@@ -19,10 +19,11 @@ import { BreadcrumbNavigationSearchDropdown } from "@plane/ui";
 type TProjectBreadcrumbProps = {
   workspaceSlug: string;
   projectId: string;
+  shouldTruncate?: boolean;
 };
 
 export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TProjectBreadcrumbProps) {
-  const { workspaceSlug, projectId } = props;
+  const { workspaceSlug, projectId, shouldTruncate = true } = props;
   // router
   const router = useAppRouter();
   // store hooks
@@ -69,7 +70,7 @@ export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TPro
       title={currentProjectDetails?.name}
       icon={renderIcon(currentProjectDetails)}
       openOnLabelClick
-      shouldTruncate
+      shouldTruncate={shouldTruncate}
     />
   );
 });

plane-src/apps/web/ce/components/issues/header.tsx

@@ -21,7 +21,7 @@ import { useTranslation } from "@plane/i18n";
 import { NewTabIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Header } from "@plane/ui";
 import { CountChip } from "@/components/common/count-chip";
 import { AppHeaderPrimaryActionButton } from "@/components/core/app-header/primary-action-button";
 // constants
@@ -31,11 +31,12 @@ import { HeaderFilters } from "@/components/issues/filters";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
-import { useUserPermissions } from "@/hooks/store/user";
+import { useUserPermissions, useUserProfile } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { ExpandedToolbarBreadcrumbs } from "@/plane-web/components/breadcrumbs/expanded-toolbar-breadcrumbs";
 import { ProjectFeatureBreadcrumb } from "@/plane-web/components/breadcrumbs/project-feature";
 
 export const IssuesHeader = observer(function IssuesHeader() {
@@ -53,40 +54,46 @@ export const IssuesHeader = observer(function IssuesHeader() {
 
   const { toggleCreateIssueModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
+  const { data: userProfile } = useUserProfile();
   const { isMobile } = usePlatformOS();
 
   const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH;
   const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`;
 
   const issuesCount = getGroupIssueCount(undefined, undefined, false);
+  const isCompactToolbar = userProfile?.theme?.nodedcCompactToolbar === true;
   const canUserCreateIssue = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.PROJECT
   );
 
+  const breadcrumbsContent = (
+    <>
+      <ExpandedToolbarBreadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"}>
+        <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+        <ProjectFeatureBreadcrumb
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          featureKey={EProjectFeatureKey.WORK_ITEMS}
+          isLast
+        />
+      </ExpandedToolbarBreadcrumbs>
+      {isCompactToolbar && issuesCount && issuesCount > 0 ? (
+        <Tooltip
+          isMobile={isMobile}
+          tooltipContent={t("issues_header.count_tooltip", { count: issuesCount })}
+          position="bottom"
+        >
+          <CountChip count={issuesCount} />
+        </Tooltip>
+      ) : null}
+    </>
+  );
+
   return (
     <Header>
       <Header.LeftItem className="nodedc-bottom-dock-left">
-        <div className="flex min-w-0 items-center gap-2.5 overflow-hidden">
-          <Breadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"} className="flex-grow-0">
-            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
-            <ProjectFeatureBreadcrumb
-              workspaceSlug={workspaceSlug?.toString()}
-              projectId={projectId?.toString()}
-              featureKey={EProjectFeatureKey.WORK_ITEMS}
-              isLast
-            />
-          </Breadcrumbs>
-          {issuesCount && issuesCount > 0 ? (
-            <Tooltip
-              isMobile={isMobile}
-              tooltipContent={t("issues_header.count_tooltip", { count: issuesCount })}
-              position="bottom"
-            >
-              <CountChip count={issuesCount} />
-            </Tooltip>
-          ) : null}
-        </div>
+        {breadcrumbsContent}
         {currentProjectDetails?.anchor ? (
           <a
             href={publishedURL}

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

@@ -10,13 +10,14 @@ import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Header } from "@plane/ui";
 import { AppHeaderPrimaryActionButton } from "@/components/core/app-header/primary-action-button";
 import { FiltersToggle } from "@/components/rich-filters/filters-toggle";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useUserPermissions } from "@/hooks/store/user";
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { ExpandedToolbarBreadcrumbs } from "@/plane-web/components/breadcrumbs/expanded-toolbar-breadcrumbs";
 import { ProjectFeatureBreadcrumb } from "@/plane-web/components/breadcrumbs/project-feature";
 import { useExternalContoursFilter } from "./filters/provider";
 import { ExternalContourCreateModalRoot } from "./create-modal";
@@ -39,7 +40,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
     <Header>
       <Header.LeftItem className="nodedc-bottom-dock-left">
         <div className="flex min-w-0 flex-grow items-center gap-4 overflow-hidden">
-          <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
+          <ExpandedToolbarBreadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
             <ProjectFeatureBreadcrumb
               workspaceSlug={workspaceSlug?.toString()}
@@ -47,7 +48,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
               featureKey="external_contours"
               isLast
             />
-          </Breadcrumbs>
+          </ExpandedToolbarBreadcrumbs>
 
           {(loader === "mutation-loading" || loader === "issue-loading") && (
             <div className="flex items-center gap-1.5 text-tertiary">

plane-src/apps/web/ce/components/projects/settings/intake/header.tsx

@@ -11,7 +11,7 @@ import { RefreshCcw } from "lucide-react";
 // ui
 import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Header } from "@plane/ui";
 // components
 import { AppHeaderPrimaryActionButton } from "@/components/core/app-header/primary-action-button";
 import { FiltersRoot } from "@/components/inbox/inbox-filter";
@@ -22,6 +22,7 @@ import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import { useUserPermissions } from "@/hooks/store/user";
 // plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { ExpandedToolbarBreadcrumbs } from "@/plane-web/components/breadcrumbs/expanded-toolbar-breadcrumbs";
 import { ProjectFeatureBreadcrumb } from "@/plane-web/components/breadcrumbs/project-feature";
 
 export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
@@ -46,7 +47,7 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
     <Header>
       <Header.LeftItem className="nodedc-bottom-dock-left">
         <div className="flex min-w-0 flex-grow items-center gap-4 overflow-hidden">
-          <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
+          <ExpandedToolbarBreadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
             <ProjectFeatureBreadcrumb
               workspaceSlug={workspaceSlug?.toString()}
@@ -54,7 +55,7 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
               featureKey={EProjectFeatureKey.INTAKE}
               isLast
             />
-          </Breadcrumbs>
+          </ExpandedToolbarBreadcrumbs>
 
           {loader === "pagination-loading" && (
             <div className="flex items-center gap-1.5 text-tertiary">