UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выделение action-set и упрощение mobile header внешнего контура

2026-04-20 21:12:42 +03:00
parent ab2a5ffb9a
commit c880c0a319
3 changed files with 218 additions and 99 deletions
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { MoreHorizontal, Bell, BellOff } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
+import { CheckCircleFilledIcon, CloseCircleFilledIcon, CopyLinkIcon, NewTabIcon } from "@plane/propel/icons";
+import { CustomMenu } from "@plane/ui";
+
+type Props = {
+  canOpenTargetWorkItem: boolean;
+  canReviewClosedRequest: boolean;
+  includeDecisionActions?: boolean;
+  isSubscribed?: boolean;
+  isSubscriptionLoading?: boolean;
+  onAccept?: () => void;
+  onCopy: () => void;
+  onDecline?: () => void;
+  onOpenTarget?: () => void;
+  onToggleSubscription?: () => void;
+};
+
+export const ExternalContourActionsMenu = (props: Props) => {
+  const {
+    canOpenTargetWorkItem,
+    canReviewClosedRequest,
+    includeDecisionActions = false,
+    isSubscribed,
+    isSubscriptionLoading = false,
+    onAccept,
+    onCopy,
+    onDecline,
+    onOpenTarget,
+    onToggleSubscription,
+  } = props;
+  const { t } = useTranslation();
+
+  return (
+    <CustomMenu
+      customButton={<MoreHorizontal className="size-4" />}
+      customButtonClassName={getIconButtonStyling("secondary", "lg")}
+      placement="bottom-start"
+    >
+      {includeDecisionActions && canReviewClosedRequest && onAccept && (
+        <CustomMenu.MenuItem onClick={onAccept}>
+          <div className="flex items-center gap-2 text-success-secondary">
+            <CheckCircleFilledIcon width={14} height={14} />
+            {t("external_contours_page.actions.accept")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+
+      {includeDecisionActions && canReviewClosedRequest && onDecline && (
+        <CustomMenu.MenuItem onClick={onDecline}>
+          <div className="flex items-center gap-2 text-danger-secondary">
+            <CloseCircleFilledIcon width={14} height={14} />
+            {t("external_contours_page.actions.decline")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+
+      <CustomMenu.MenuItem onClick={onCopy}>
+        <div className="flex items-center gap-2">
+          <CopyLinkIcon width={14} height={14} />
+          {t("external_contours_page.actions.copy")}
+        </div>
+      </CustomMenu.MenuItem>
+
+      {canOpenTargetWorkItem && onOpenTarget && (
+        <CustomMenu.MenuItem onClick={onOpenTarget}>
+          <div className="flex items-center gap-2">
+            <NewTabIcon width={14} height={14} />
+            {t("external_contours_page.actions.open")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+
+      {canOpenTargetWorkItem && onToggleSubscription && (
+        <CustomMenu.MenuItem onClick={onToggleSubscription} disabled={isSubscriptionLoading || isSubscribed === undefined}>
+          <div className="flex items-center gap-2">
+            {isSubscribed ? <BellOff width={14} height={14} /> : <Bell width={14} height={14} />}
+            {isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+    </CustomMenu>
+  );
+};