UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: унификация крошек, предложений и quick-actions dropdown

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

@@ -4,23 +4,25 @@
  * See the LICENSE file for details.
  */
 
-import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import type { EProjectFeatureKey } from "@plane/constants";
-import { Breadcrumbs } from "@plane/ui";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { BreadcrumbNavigationSearchDropdown } from "@plane/ui";
 // components
-import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useUserPermissions } from "@/hooks/store/user";
 // local imports
 import { getProjectFeatureNavigation } from "../projects/navigation/helper";
 
 type TProjectFeatureBreadcrumbProps = {
   workspaceSlug: string;
   projectId: string;
-  featureKey: EProjectFeatureKey;
+  featureKey: TNavigationItem["key"];
   isLast?: boolean;
   additionalNavigationItems?: TNavigationItem[];
 };
@@ -29,8 +31,11 @@ export const ProjectFeatureBreadcrumb = observer(function ProjectFeatureBreadcru
   props: TProjectFeatureBreadcrumbProps
 ) {
   const { workspaceSlug, projectId, featureKey, isLast = false, additionalNavigationItems } = props;
+  const { t } = useTranslation();
+  const router = useAppRouter();
   // store hooks
   const { getPartialProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const project = getPartialProjectById(projectId);
 
@@ -41,26 +46,44 @@ export const ProjectFeatureBreadcrumb = observer(function ProjectFeatureBreadcru
   // if additional navigation items are provided, add them to the navigation items
   const allNavigationItems = [...(additionalNavigationItems || []), ...navigationItems];
 
-  const currentNavigationItem = allNavigationItems.find((item) => item.key === featureKey);
-  const icon = currentNavigationItem?.icon as ReactNode;
-  const name = currentNavigationItem?.name;
-  const href = currentNavigationItem?.href;
+  const availableNavigationItems = allNavigationItems.filter(
+    (item) =>
+      item.shouldRender &&
+      allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug.toString(), projectId.toString())
+  );
+
+  const currentNavigationItem = availableNavigationItems.find((item) => item.key === featureKey);
+  const Icon = currentNavigationItem?.icon;
+  const name = currentNavigationItem ? t(currentNavigationItem.i18n_key) : undefined;
+
+  const switcherOptions = availableNavigationItems.map(
+    (item): ICustomSearchSelectOption => ({
+      value: item.key,
+      query: t(item.i18n_key),
+      content: (
+        <div className="flex items-center gap-2">
+          <item.icon className="h-3.5 w-3.5 text-tertiary" />
+          <span>{t(item.i18n_key)}</span>
+        </div>
+      ),
+    })
+  );
 
   return (
-    <>
-      <Breadcrumbs.Item
-        component={
-          <BreadcrumbLink
-            key={featureKey}
-            label={name}
-            isLast={isLast}
-            href={href}
-            icon={<Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
-          />
+    <BreadcrumbNavigationSearchDropdown
+      selectedItem={featureKey}
+      navigationItems={switcherOptions}
+      onChange={(value: string) => {
+        const nextNavigationItem = availableNavigationItems.find((item) => item.key === value);
+        if (nextNavigationItem?.href) {
+          router.push(nextNavigationItem.href);
         }
-        showSeparator={false}
-        isLast={isLast}
-      />
-    </>
+      }}
+      title={name}
+      icon={Icon ? <Icon className="h-3.5 w-3.5 text-tertiary" /> : undefined}
+      isLast={isLast}
+      openOnLabelClick
+      showLastChevron={false}
+    />
   );
 });

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

@@ -9,21 +9,20 @@ import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 // plane imports
 import type { ICustomSearchSelectOption } from "@plane/types";
-import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
 import type { TProject } from "@/plane-web/types";
+import { BreadcrumbNavigationSearchDropdown } from "@plane/ui";
 
 type TProjectBreadcrumbProps = {
   workspaceSlug: string;
   projectId: string;
-  handleOnClick?: () => void;
 };
 
 export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TProjectBreadcrumbProps) {
-  const { workspaceSlug, projectId, handleOnClick } = props;
+  const { workspaceSlug, projectId } = props;
   // router
   const router = useAppRouter();
   // store hooks
@@ -61,26 +60,16 @@ export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TPro
   );
 
   return (
-    <>
-      <Breadcrumbs.Item
-        component={
-          <BreadcrumbNavigationSearchDropdown
-            selectedItem={currentProjectDetails.id}
-            navigationItems={switcherOptions}
-            onChange={(value: string) => {
-              router.push(`/${workspaceSlug}/projects/${value}/issues`);
-            }}
-            title={currentProjectDetails?.name}
-            icon={renderIcon(currentProjectDetails)}
-            handleOnClick={() => {
-              if (handleOnClick) handleOnClick();
-              else router.push(`/${workspaceSlug}/projects/${currentProjectDetails.id}/issues/`);
-            }}
-            shouldTruncate
-          />
-        }
-        showSeparator={false}
-      />
-    </>
+    <BreadcrumbNavigationSearchDropdown
+      selectedItem={currentProjectDetails.id}
+      navigationItems={switcherOptions}
+      onChange={(value: string) => {
+        router.push(`/${workspaceSlug}/projects/${value}/issues`);
+      }}
+      title={currentProjectDetails?.name}
+      icon={renderIcon(currentProjectDetails)}
+      openOnLabelClick
+      shouldTruncate
+    />
   );
 });

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

@@ -10,6 +10,7 @@ import { useParams } from "next/navigation";
 import { Circle } from "lucide-react";
 // plane imports
 import {
+  EProjectFeatureKey,
   EUserPermissions,
   EUserPermissionsLevel,
   SPACE_BASE_PATH,
@@ -17,12 +18,10 @@ import {
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { NewTabIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { NewTabIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 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 { AppHeaderPrimaryActionButton } from "@/components/core/app-header/primary-action-button";
 // constants
@@ -37,6 +36,7 @@ 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 { ProjectFeatureBreadcrumb } from "@/plane-web/components/breadcrumbs/project-feature";
 
 export const IssuesHeader = observer(function IssuesHeader() {
   // router
@@ -66,19 +66,14 @@ export const IssuesHeader = observer(function IssuesHeader() {
 
   return (
     <Header>
-      <Header.LeftItem>
-        <div className="flex items-center gap-2.5">
+      <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()} />
-            <Breadcrumbs.Item
-              component={
-                <BreadcrumbLink
-                  label={t("work_items")}
-                  href={`/${workspaceSlug}/projects/${projectId}/issues/`}
-                  icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
-                  isLast
-                />
-              }
+            <ProjectFeatureBreadcrumb
+              workspaceSlug={workspaceSlug?.toString()}
+              projectId={projectId?.toString()}
+              featureKey={EProjectFeatureKey.WORK_ITEMS}
               isLast
             />
           </Breadcrumbs>

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

@@ -21,7 +21,7 @@ export const ExternalContoursBoardRoot = observer(function ExternalContoursBoard
   const { hasAnyItems, isFiltering, loader } = useProjectExternalContoursBoard();
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden px-8 pb-6">
+    <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden px-8 pb-6">
       {loader === "init-loading" && !hasAnyItems ? (
         <div className="flex flex-1 items-center justify-center text-13 text-secondary">{t("loading")}...</div>
       ) : (

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

@@ -10,15 +10,14 @@ import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TransferIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
-import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 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 { ProjectFeatureBreadcrumb } from "@/plane-web/components/breadcrumbs/project-feature";
 import { useExternalContoursFilter } from "./filters/provider";
 import { ExternalContourCreateModalRoot } from "./create-modal";
 
@@ -38,19 +37,14 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
 
   return (
     <Header>
-      <Header.LeftItem>
-        <div className="flex min-w-0 flex-grow items-center gap-4">
+      <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"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
-            <Breadcrumbs.Item
-              component={
-                <BreadcrumbLink
-                  label={t("external_contours_page.title")}
-                  href={`/${workspaceSlug}/projects/${projectId}/external-contours/`}
-                  icon={<TransferIcon className="h-4 w-4 text-tertiary" />}
-                  isLast
-                />
-              }
+            <ProjectFeatureBreadcrumb
+              workspaceSlug={workspaceSlug?.toString()}
+              projectId={projectId?.toString()}
+              featureKey="external_contours"
               isLast
             />
           </Breadcrumbs>

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

@@ -88,9 +88,13 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden bg-surface-1">
-      {filter && <FiltersRow filter={filter} />}
+      {filter && (
+        <div className="w-full shrink-0 px-4 py-4">
+          <FiltersRow filter={filter} />
+        </div>
+      )}
 
-      <div className="flex min-h-0 flex-1 overflow-hidden pt-2">
+      <div className="flex min-h-0 flex-1 overflow-hidden">
         <ExternalContoursBoardRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
         {inboxIssueId && (
           <ExternalContoursContentRoot

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

@@ -9,12 +9,12 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 // ui
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { AppHeaderPrimaryActionButton } from "@/components/core/app-header/primary-action-button";
+import { FiltersRoot } from "@/components/inbox/inbox-filter";
 import { InboxIssueCreateModalRoot } from "@/components/inbox/modals/create-modal";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -22,7 +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 { IntakeIcon } from "@plane/propel/icons";
+import { ProjectFeatureBreadcrumb } from "@/plane-web/components/breadcrumbs/project-feature";
 
 export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
   // states
@@ -44,19 +44,14 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
 
   return (
     <Header>
-      <Header.LeftItem>
-        <div className="flex flex-grow items-center gap-4">
+      <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"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
-            <Breadcrumbs.Item
-              component={
-                <BreadcrumbLink
-                  label={t("sidebar.intake")}
-                  href={`/${workspaceSlug}/projects/${projectId}/intake/`}
-                  icon={<IntakeIcon className="h-4 w-4 text-tertiary" />}
-                  isLast
-                />
-              }
+            <ProjectFeatureBreadcrumb
+              workspaceSlug={workspaceSlug?.toString()}
+              projectId={projectId?.toString()}
+              featureKey={EProjectFeatureKey.INTAKE}
               isLast
             />
           </Breadcrumbs>
@@ -72,15 +67,16 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
       <Header.RightItem>
         {currentProjectDetails?.inbox_view && workspaceSlug && projectId && isAuthorized ? (
           <div className="flex items-center gap-2">
+            <FiltersRoot className="shrink-0" />
             <InboxIssueCreateModalRoot
               workspaceSlug={workspaceSlug.toString()}
               projectId={projectId.toString()}
               modalState={createIssueModal}
               handleModalClose={() => setCreateIssueModal(false)}
             />
-            <Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
+            <AppHeaderPrimaryActionButton onClick={() => setCreateIssueModal(true)}>
               {t("add_work_item")}
-            </Button>
+            </AppHeaderPrimaryActionButton>
           </div>
         ) : (
           <></>