UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: унификация shell карточки внешнего контура с внутренним peek

2026-04-20 21:07:49 +03:00
parent 8bf6f2a510
commit ab2a5ffb9a
6 changed files with 563 additions and 78 deletions
@@ -4,22 +4,57 @@
 * See the LICENSE file for details.
 */

-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import Link from "next/link";
+import { MoreHorizontal, MoveDiagonal, MoveRight } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
 import { Button } from "@plane/propel/button";
-import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
+import {
+  CenterPanelIcon,
+  CheckCircleFilledIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CloseCircleFilledIcon,
+  CopyLinkIcon,
+  FullScreenPanelIcon,
+  NewTabIcon,
+  SidePanelIcon,
+} from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
-import { ControlLink, Header, Row } from "@plane/ui";
+import { ControlLink, CustomMenu, CustomSelect, Header, Row, Tooltip } from "@plane/ui";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
 import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
 import { useProject } from "@/hooks/store/use-project";
+import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { ExternalContourStatePill } from "./state-pill";
 import { ExternalContourDeclineModal } from "./decline-modal";
+import { ExternalContourSubscription } from "./subscription";
+
+export type TExternalContourPeekMode = "side-peek" | "modal" | "full-screen";
+
+const PEEK_OPTIONS: { key: TExternalContourPeekMode; icon: any; i18n_title: string }[] = [
+  {
+    key: "side-peek",
+    icon: SidePanelIcon,
+    i18n_title: "common.side_peek",
+  },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    i18n_title: "common.modal",
+  },
+  {
+    key: "full-screen",
+    icon: FullScreenPanelIcon,
+    i18n_title: "common.full_screen",
+  },
+];

 type Props = {
  workspaceSlug: string;
@@ -27,6 +62,11 @@ type Props = {
  contourRequest: TExternalContourRequest;
  hasDirectTargetAccess: boolean;
  isSubmitting: TNameDescriptionLoader;
+  removeRoutePeekId: () => void;
+  peekMode: TExternalContourPeekMode;
+  setPeekMode: (value: TExternalContourPeekMode) => void;
+  currentTab: TInboxIssueCurrentTab;
+  embedIssue?: boolean;
 };

 export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
@@ -36,16 +76,27 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
    contourRequest,
    hasDirectTargetAccess,
    isSubmitting,
+    removeRoutePeekId,
+    peekMode,
+    setPeekMode,
+    currentTab,
+    embedIssue = false,
  } = props;
+  const parentRef = useRef<HTMLDivElement>(null);
  const { t } = useTranslation();
  const router = useAppRouter();
  const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
-  const { currentTab, decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
+  const { decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
+  const { currentTab: boardCurrentTab, columnIdsMap } = useProjectExternalContoursBoard();
  const { getProjectById } = useProject();

  const issue = contourRequest.issue;
  const currentRequestId = contourRequest.id;
-  const hasRelativeNavigation = !!currentRequestId && filteredRequestIds.includes(currentRequestId);
+  const boardRequestIds =
+    boardCurrentTab === currentTab ? [...(columnIdsMap.outgoing ?? []), ...(columnIdsMap.incoming ?? [])] : [];
+  const relativeRequestIds = boardRequestIds.includes(currentRequestId) ? boardRequestIds : filteredRequestIds;
+  const currentMode = PEEK_OPTIONS.find((mode) => mode.key === peekMode);
+  const hasRelativeNavigation = !!currentRequestId && relativeRequestIds.includes(currentRequestId);
  const canReviewClosedRequest =
    contourRequest.capabilities?.can_source_decide ??
    (contourRequest.status === "closed" && contourRequest.source_decision !== "accepted");
@@ -53,18 +104,18 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont

  const redirectToRelativeIssue = useCallback(
    (direction: "next" | "prev") => {
-      if (!filteredRequestIds || !currentRequestId || !hasRelativeNavigation || filteredRequestIds.length <= 1) return;
-      const currentIssueIndex = filteredRequestIds.findIndex((requestId) => requestId === currentRequestId);
+      if (!relativeRequestIds || !currentRequestId || !hasRelativeNavigation || relativeRequestIds.length <= 1) return;
+      const currentIssueIndex = relativeRequestIds.findIndex((requestId) => requestId === currentRequestId);
      if (currentIssueIndex === -1) return;
      const nextIssueIndex =
        direction === "next"
-          ? (currentIssueIndex + 1) % filteredRequestIds.length
-          : (currentIssueIndex - 1 + filteredRequestIds.length) % filteredRequestIds.length;
-      const nextIssueId = filteredRequestIds[nextIssueIndex];
+          ? (currentIssueIndex + 1) % relativeRequestIds.length
+          : (currentIssueIndex - 1 + relativeRequestIds.length) % relativeRequestIds.length;
+      const nextIssueId = relativeRequestIds[nextIssueIndex];
      if (!nextIssueId) return;
      router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
    },
-    [currentRequestId, currentTab, filteredRequestIds, hasRelativeNavigation, router, sourceProjectId, workspaceSlug]
+    [currentRequestId, currentTab, hasRelativeNavigation, relativeRequestIds, router, sourceProjectId, workspaceSlug]
  );

  useEffect(() => {
@@ -78,6 +129,8 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
  }, [redirectToRelativeIssue]);

  const targetProjectIdentifier = issue.project_detail?.identifier || getProjectById(issue.project_id || "")?.identifier;
+  const requestTab = contourRequest.status === "closed" ? EInboxIssueCurrentTab.CLOSED : EInboxIssueCurrentTab.OPEN;
+  const requestLink = `/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${requestTab}&inboxIssueId=${contourRequest.id}`;
  const workItemLink = generateWorkItemLink({
    workspaceSlug: workspaceSlug?.toString(),
    projectId: issue.project_id,
@@ -87,7 +140,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
  });

  const handleCopyLink = () =>
-    copyUrlToClipboard(workItemLink).then(() =>
+    copyUrlToClipboard(requestLink).then(() =>
      setToast({
        type: TOAST_TYPE.SUCCESS,
        title: t("common.link_copied"),
@@ -132,26 +185,72 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
        onSubmit={(comment) => handleDecision("decline", comment)}
      />

-      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 px-4 lg:flex">
-        <div className="flex items-center gap-4">
+      <Row
+        ref={parentRef}
+        className={`relative z-15 hidden h-full w-full items-center justify-between gap-4 px-6 py-5 lg:flex ${
+          currentMode?.key === "full-screen" ? "border-b border-subtle/70" : ""
+        }`}
+      >
+        <div className="flex min-w-0 items-center gap-4">
+          <Tooltip tooltipContent={t("common.close_peek_view")}>
+            <button onClick={removeRoutePeekId}>
+              <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
+            </button>
+          </Tooltip>
+
+          {hasDirectTargetAccess && (
+            <Tooltip tooltipContent={t("issue.open_in_full_screen")}>
+              <Link href={workItemLink} onClick={() => removeRoutePeekId()}>
+                <MoveDiagonal className="h-4 w-4 text-tertiary hover:text-secondary" />
+              </Link>
+            </Tooltip>
+          )}
+
+          {currentMode && !embedIssue && (
+            <CustomSelect
+              value={currentMode}
+              onChange={(value: TExternalContourPeekMode) => setPeekMode(value)}
+              customButton={
+                <Tooltip tooltipContent={t("common.toggle_peek_view_layout")}>
+                  <button type="button">
+                    <currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />
+                  </button>
+                </Tooltip>
+              }
+            >
+              {PEEK_OPTIONS.map((mode) => (
+                <CustomSelect.Option key={mode.key} value={mode.key}>
+                  <div
+                    className={`flex items-center gap-1.5 ${
+                      currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
+                    }`}
+                  >
+                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                    {t(mode.i18n_title)}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+
          {issue?.project_id && issue.sequence_id && (
            <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
              {targetProjectIdentifier}-{issue.sequence_id}
            </h3>
          )}
          <ExternalContourStatePill request={contourRequest} />
-          <div className="flex w-full items-center justify-end">
+          <div className="flex min-w-0 flex-1 items-center justify-end">
            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
          </div>
        </div>

-        <div className="nodedc-external-detail-toolbar">
+        <div className="nodedc-external-detail-toolbar min-w-0">
          <div className="nodedc-external-toolbar-cluster">
            <button
              type="button"
              aria-label="Previous request"
              onClick={() => redirectToRelativeIssue("prev")}
-              disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
+              disabled={!hasRelativeNavigation || relativeRequestIds.length <= 1}
              className="nodedc-external-icon-button"
            >
              <ChevronUpIcon className="size-3.5" />
@@ -160,7 +259,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
              type="button"
              aria-label="Next request"
              onClick={() => redirectToRelativeIssue("next")}
-              disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
+              disabled={!hasRelativeNavigation || relativeRequestIds.length <= 1}
              className="nodedc-external-icon-button"
            >
              <ChevronDownIcon className="size-3.5" />
@@ -187,28 +286,79 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
              </div>
            )}

-            <Button
-              variant="secondary"
-              size="lg"
-              prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
-              onClick={handleCopyLink}
-              className="nodedc-external-action-button"
-            >
-              {t("external_contours_page.actions.copy")}
-            </Button>
            {hasDirectTargetAccess && (
-              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />} className="nodedc-external-action-button">
-                  {t("external_contours_page.actions.open")}
-                </Button>
-              </ControlLink>
+              <ExternalContourSubscription
+                workspaceSlug={workspaceSlug}
+                projectId={issue.project_id || sourceProjectId}
+                issueId={issue.id}
+                buttonClassName="!h-10 rounded-[18px] border-transparent bg-layer-2/80 px-4 shadow-none backdrop-blur-xl hover:!bg-layer-2-active focus-visible:outline-none"
+              />
            )}
+
+            <Tooltip tooltipContent={t("common.actions.copy_link")}>
+              <IconButton
+                variant="secondary"
+                size="lg"
+                onClick={handleCopyLink}
+                icon={CopyLinkIcon}
+                className="size-10 rounded-[18px] border-transparent bg-layer-2/80 shadow-none backdrop-blur-xl hover:bg-layer-2-active focus-visible:outline-none"
+              />
+            </Tooltip>
+
+            <CustomMenu
+              customButton={<MoreHorizontal className="size-4" />}
+              customButtonClassName={getIconButtonStyling("secondary", "lg")}
+              placement="bottom-start"
+            >
+              <CustomMenu.MenuItem onClick={handleCopyLink}>
+                <div className="flex items-center gap-2">
+                  <CopyLinkIcon width={14} height={14} />
+                  {t("external_contours_page.actions.copy")}
+                </div>
+              </CustomMenu.MenuItem>
+              {hasDirectTargetAccess && (
+                <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
+                  <div className="flex items-center gap-2">
+                    <NewTabIcon width={14} height={14} />
+                    {t("external_contours_page.actions.open")}
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+            </CustomMenu>
          </div>
        </div>
      </Row>

      <Header className="justify-start lg:hidden">
        <div className="flex w-full items-center gap-2">
+          <button onClick={removeRoutePeekId}>
+            <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
+          </button>
+          {hasDirectTargetAccess && (
+            <ControlLink href={workItemLink} onClick={() => removeRoutePeekId()} target="_self">
+              <MoveDiagonal className="h-4 w-4 text-tertiary hover:text-secondary" />
+            </ControlLink>
+          )}
+          {currentMode && !embedIssue && (
+            <CustomSelect
+              value={currentMode}
+              onChange={(value: TExternalContourPeekMode) => setPeekMode(value)}
+              customButton={<currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />}
+            >
+              {PEEK_OPTIONS.map((mode) => (
+                <CustomSelect.Option key={mode.key} value={mode.key}>
+                  <div
+                    className={`flex items-center gap-1.5 ${
+                      currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
+                    }`}
+                  >
+                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                    {t(mode.i18n_title)}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
          <ExternalContourStatePill request={contourRequest} />
          <div className="ml-auto flex items-center gap-2">
            {canReviewClosedRequest && (
@@ -226,13 +376,26 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
                {t("external_contours_page.traceability.source_decision_accepted")}
              </div>
            )}
-            {hasDirectTargetAccess && (
-              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                <Button variant="secondary" size="sm" className="nodedc-external-action-button">
-                  {t("external_contours_page.actions.open")}
-                </Button>
-              </ControlLink>
-            )}
+            <CustomMenu
+              customButton={<MoreHorizontal className="size-4" />}
+              customButtonClassName={getIconButtonStyling("secondary", "lg")}
+              placement="bottom-start"
+            >
+              <CustomMenu.MenuItem onClick={handleCopyLink}>
+                <div className="flex items-center gap-2">
+                  <CopyLinkIcon width={14} height={14} />
+                  {t("external_contours_page.actions.copy")}
+                </div>
+              </CustomMenu.MenuItem>
+              {hasDirectTargetAccess && (
+                <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
+                  <div className="flex items-center gap-2">
+                    <NewTabIcon width={14} height={14} />
+                    {t("external_contours_page.actions.open")}
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+            </CustomMenu>
          </div>
        </div>
      </Header>