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

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>
         ) : (
           <></>