ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: интерактивные карточки и фильтры двусторонней доски внешних контуров

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

@@ -24,6 +24,7 @@ type Props = {
 
 type TFilterOption = {
   avatarUrl?: string | null;
+  color?: string | null;
   id: string;
   label: string;
 };
@@ -39,8 +40,18 @@ const DEFAULT_SORTING_KEY = "updated_at:desc";
 export const ExternalContoursBoardFiltersRow = observer(function ExternalContoursBoardFiltersRow(props: Props) {
   const { projectId, workspaceSlug } = props;
   const { t } = useTranslation();
-  const { activeFiltersCount, clearFilters, filters, isSortingDefault, items, sorting, updateFilters, updateSorting } =
-    useProjectExternalContoursBoard();
+  const {
+    activeFiltersCount,
+    clearFilters,
+    filters,
+    getColumnRequestIds,
+    getRequestById,
+    isSortingDefault,
+    items,
+    sorting,
+    updateFilters,
+    updateSorting,
+  } = useProjectExternalContoursBoard();
 
   const [searchQuery, setSearchQuery] = useState(filters.search ?? "");
   const debouncedSearchQuery = useDebounce(searchQuery, 400);
@@ -60,11 +71,33 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
     void updateFilters(workspaceSlug, projectId, { search: nextSearch || undefined });
   }, [debouncedSearchQuery, filters.search, projectId, searchQuery, updateFilters, workspaceSlug]);
 
-  const requests = Object.values(items);
+  const visibleRequestIds = [...getColumnRequestIds("outgoing"), ...getColumnRequestIds("incoming")];
+  const visibleRequests = visibleRequestIds.flatMap((requestId) => {
+    const request = getRequestById(requestId);
+    return request ? [request] : [];
+  });
+  const cachedRequests = Object.values(items);
 
-  const assigneeOptions = useMemo(() => getAssigneeOptions(requests), [requests]);
-  const requesterOptions = useMemo(() => getRequesterOptions(requests), [requests]);
-  const priorityOptions = useMemo(() => getPriorityOptions(requests, t), [requests, t]);
+  const contourOptions = useMemo(
+    () =>
+      getCounterpartyProjectOptions(
+        visibleRequests,
+        cachedRequests,
+        filters.counterparty_project_ids ?? [],
+        projectId
+      ),
+    [cachedRequests, filters.counterparty_project_ids, projectId, visibleRequests]
+  );
+  const stateOptions = useMemo(
+    () => getStateOptions(visibleRequests, cachedRequests, filters.state_ids ?? []),
+    [cachedRequests, filters.state_ids, visibleRequests]
+  );
+  const assigneeOptions = useMemo(() => getAssigneeOptions(visibleRequests, cachedRequests, filters.assignee_ids ?? []), [cachedRequests, filters.assignee_ids, visibleRequests]);
+  const requesterOptions = useMemo(
+    () => getRequesterOptions(visibleRequests, cachedRequests, filters.requested_by_ids ?? []),
+    [cachedRequests, filters.requested_by_ids, visibleRequests]
+  );
+  const priorityOptions = useMemo(() => getPriorityOptions(visibleRequests, cachedRequests, filters.priority ?? [], t), [cachedRequests, filters.priority, t, visibleRequests]);
 
   const sortingOptions = useMemo<TSortingOption[]>(
     () => [
@@ -119,6 +152,72 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
             )}
           </div>
 
+          <MultiSelectDropdown
+            value={filters.counterparty_project_ids ?? []}
+            onChange={(value) =>
+              void updateFilters(workspaceSlug, projectId, {
+                counterparty_project_ids: value.length > 0 ? value : undefined,
+              })
+            }
+            options={contourOptions}
+            keyExtractor={(option) => option.value}
+            queryArray={["label"]}
+            inputPlaceholder={t("external_contours_page.board.filters.search_contour")}
+            buttonContainerClassName="h-10"
+            optionsContainerClassName="w-72"
+            disabled={contourOptions.length === 0 && (filters.counterparty_project_ids?.length ?? 0) === 0}
+            buttonContent={(isOpen) => (
+              <FilterTrigger
+                label={t("external_contours_page.board.filters.contour")}
+                count={filters.counterparty_project_ids?.length ?? 0}
+                isOpen={isOpen}
+              />
+            )}
+            renderItem={({ value, selected }) => {
+              const option = contourOptions.find((item) => item.value === value);
+              if (!option) return null;
+
+              return (
+                <div className="flex w-full items-center justify-between gap-2 text-secondary">
+                  <span className="truncate text-12 font-medium">{option.data.label}</span>
+                  {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+                </div>
+              );
+            }}
+          />
+
+          <MultiSelectDropdown
+            value={filters.state_ids ?? []}
+            onChange={(value) => void updateFilters(workspaceSlug, projectId, { state_ids: value.length > 0 ? value : undefined })}
+            options={stateOptions}
+            keyExtractor={(option) => option.value}
+            queryArray={["label"]}
+            inputPlaceholder={t("external_contours_page.board.filters.search_state")}
+            buttonContainerClassName="h-10"
+            optionsContainerClassName="w-64"
+            disabled={stateOptions.length === 0 && (filters.state_ids?.length ?? 0) === 0}
+            buttonContent={(isOpen) => (
+              <FilterTrigger label={t("state")} count={filters.state_ids?.length ?? 0} isOpen={isOpen} />
+            )}
+            renderItem={({ value, selected }) => {
+              const option = stateOptions.find((item) => item.value === value);
+              if (!option) return null;
+
+              return (
+                <div className="flex w-full items-center justify-between gap-2 text-secondary">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span
+                      className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                      style={{ backgroundColor: option.data.color || "rgba(255,255,255,0.3)" }}
+                    />
+                    <span className="truncate text-12 font-medium">{option.data.label}</span>
+                  </div>
+                  {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+                </div>
+              );
+            }}
+          />
+
           <MultiSelectDropdown
             value={filters.priority ?? []}
             onChange={(value) => void updateFilters(workspaceSlug, projectId, { priority: value.length > 0 ? value : undefined })}
@@ -223,10 +322,10 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
           <button
             type="button"
             className={cn(
-              "flex h-10 items-center gap-2 rounded-full px-3 text-12 font-medium transition-all",
+              "nodedc-toolbar-pill !min-h-10 !px-4 text-12 font-medium",
               filters.has_unread_updates
-                ? "bg-accent-primary text-accent-on-primary"
-                : "bg-white/5 text-secondary hover:bg-white/8 hover:text-primary"
+                ? "!bg-[rgb(var(--nodedc-accent-rgb))] !text-[#0b1117]"
+                : "text-secondary"
             )}
             onClick={() =>
               void updateFilters(workspaceSlug, projectId, {
@@ -239,7 +338,12 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
           </button>
 
           {shouldShowClear && (
-            <Button variant="secondary" size="lg" className="!h-10 !rounded-full !px-4" onClick={() => void clearFilters(workspaceSlug, projectId)}>
+            <Button
+              variant="secondary"
+              size="lg"
+              className="nodedc-toolbar-pill !h-10 !rounded-full !px-4"
+              onClick={() => void clearFilters(workspaceSlug, projectId)}
+            >
               {t("common.clear")}
             </Button>
           )}
@@ -296,11 +400,10 @@ function FilterTrigger(props: TFilterTriggerProps) {
 
   return (
     <div
+      data-active={isOpen || count > 0}
       className={cn(
-        "flex h-10 items-center gap-2 rounded-full bg-white/5 px-3 text-12 font-medium text-secondary transition-all hover:bg-white/8 hover:text-primary",
-        {
-          "bg-white/8 text-primary": isOpen || count > 0,
-        }
+        "nodedc-toolbar-pill !min-h-10 gap-2 !px-4 text-12 font-medium",
+        isOpen || count > 0 ? "text-[rgb(var(--nodedc-accent-rgb))]" : "text-secondary"
       )}
     >
       {icon}
@@ -311,26 +414,107 @@ function FilterTrigger(props: TFilterTriggerProps) {
   );
 }
 
-const getPriorityOptions = (requests: TExternalContourRequest[], t: ReturnType<typeof useTranslation>["t"]) => {
-  const priorityKeys = new Set<string>();
+const sortFilterOptions = (options: TFilterOption[]) => options.sort((left, right) => left.label.localeCompare(right.label));
 
-  requests.forEach((request) => {
-    if (request.issue.priority && request.issue.priority !== "none") priorityKeys.add(request.issue.priority);
-  });
+const buildOptionsWithSelectedFallback = (
+  visibleRequests: TExternalContourRequest[],
+  cachedRequests: TExternalContourRequest[],
+  selectedIds: string[],
+  getOption: (request: TExternalContourRequest) => TFilterOption | null
+) => {
+  const optionMap = new Map<string, TFilterOption>();
 
-  return ISSUE_PRIORITIES.filter((priority) => priority.key !== "none" && priorityKeys.has(priority.key)).map((priority) => ({
-    data: {
-      id: priority.key,
-      label: t(priority.key),
-    },
-    value: priority.key,
+  const upsertOption = (request: TExternalContourRequest) => {
+    const option = getOption(request);
+    if (!option?.id || optionMap.has(option.id)) return;
+    optionMap.set(option.id, option);
+  };
+
+  visibleRequests.forEach(upsertOption);
+
+  if (selectedIds.length > 0) {
+    cachedRequests.forEach((request) => {
+      const option = getOption(request);
+      if (!option?.id || !selectedIds.includes(option.id) || optionMap.has(option.id)) return;
+      optionMap.set(option.id, option);
+    });
+  }
+
+  return sortFilterOptions(Array.from(optionMap.values())).map((option) => ({
+    data: option,
+    value: option.id,
   }));
 };
 
-const getAssigneeOptions = (requests: TExternalContourRequest[]) => {
+const getCounterpartyProjectOptions = (
+  visibleRequests: TExternalContourRequest[],
+  cachedRequests: TExternalContourRequest[],
+  selectedIds: string[],
+  currentProjectId: string
+) =>
+  buildOptionsWithSelectedFallback(visibleRequests, cachedRequests, selectedIds, (request) => {
+    const project = request.direction === "incoming" ? request.source_project : request.target_project;
+    const fallbackName = request.direction === "incoming" ? request.source_project_name : request.target_project_name;
+
+    if (!project?.id || project.id === currentProjectId) return null;
+
+    return {
+      id: project.id,
+      label: project.name || project.identifier || fallbackName || "NODE.DC",
+    };
+  });
+
+const getStateOptions = (
+  visibleRequests: TExternalContourRequest[],
+  cachedRequests: TExternalContourRequest[],
+  selectedIds: string[]
+) =>
+  buildOptionsWithSelectedFallback(visibleRequests, cachedRequests, selectedIds, (request) => {
+    const state = request.issue.state_detail;
+    if (!state?.id) return null;
+
+    return {
+      id: state.id,
+      label: state.name || "Без статуса",
+      color: state.color || null,
+    };
+  });
+
+const getPriorityOptions = (
+  visibleRequests: TExternalContourRequest[],
+  cachedRequests: TExternalContourRequest[],
+  selectedIds: string[],
+  t: ReturnType<typeof useTranslation>["t"]
+) => {
+  const priorityKeys = new Set<string>();
+
+  [...visibleRequests, ...cachedRequests].forEach((request) => {
+    if (request.issue.priority && request.issue.priority !== "none") priorityKeys.add(request.issue.priority);
+  });
+
+  selectedIds.forEach((priority) => {
+    if (priority && priority !== "none") priorityKeys.add(priority);
+  });
+
+  return ISSUE_PRIORITIES.filter((priority) => priority.key !== "none" && priorityKeys.has(priority.key))
+    .map((priority) => ({
+      data: {
+        id: priority.key,
+        label: t(priority.key),
+      },
+      value: priority.key,
+    }))
+    .sort((left, right) => left.data.label.localeCompare(right.data.label));
+};
+
+const getAssigneeOptions = (
+  visibleRequests: TExternalContourRequest[],
+  cachedRequests: TExternalContourRequest[],
+  selectedIds: string[]
+) => {
   const assigneeMap = new Map<string, TFilterOption>();
 
-  requests.forEach((request) => {
+  const upsertAssignees = (request: TExternalContourRequest) => {
     request.issue.assignee_details?.forEach((assignee) => {
       if (!assignee?.id || assigneeMap.has(assignee.id)) return;
       assigneeMap.set(assignee.id, {
@@ -339,31 +523,41 @@ const getAssigneeOptions = (requests: TExternalContourRequest[]) => {
         avatarUrl: assignee.avatar_url || "",
       });
     });
-  });
+  };
 
-  return Array.from(assigneeMap.values())
-    .sort((left, right) => left.label.localeCompare(right.label))
-    .map((option) => ({ data: option, value: option.id }));
+  visibleRequests.forEach(upsertAssignees);
+
+  if (selectedIds.length > 0) {
+    cachedRequests.forEach((request) => {
+      request.issue.assignee_details?.forEach((assignee) => {
+        if (!assignee?.id || !selectedIds.includes(assignee.id) || assigneeMap.has(assignee.id)) return;
+        assigneeMap.set(assignee.id, {
+          id: assignee.id,
+          label: assignee.display_name || "NODE.DC",
+          avatarUrl: assignee.avatar_url || "",
+        });
+      });
+    });
+  }
+
+  return sortFilterOptions(Array.from(assigneeMap.values())).map((option) => ({ data: option, value: option.id }));
 };
 
-const getRequesterOptions = (requests: TExternalContourRequest[]) => {
-  const requesterMap = new Map<string, TFilterOption>();
-
-  requests.forEach((request) => {
+const getRequesterOptions = (
+  visibleRequests: TExternalContourRequest[],
+  cachedRequests: TExternalContourRequest[],
+  selectedIds: string[]
+) =>
+  buildOptionsWithSelectedFallback(visibleRequests, cachedRequests, selectedIds, (request) => {
     const requesterId = request.requested_by?.id || request.requested_by_id || request.issue.created_by_detail?.id;
     const requesterLabel =
       request.requested_by?.display_name || request.requested_by_name || request.issue.created_by_detail?.display_name;
 
-    if (!requesterId || !requesterLabel || requesterMap.has(requesterId)) return;
+    if (!requesterId || !requesterLabel) return null;
 
-    requesterMap.set(requesterId, {
+    return {
       id: requesterId,
       label: requesterLabel,
       avatarUrl: request.issue.created_by_detail?.avatar_url || "",
-    });
+    };
   });
-
-  return Array.from(requesterMap.values())
-    .sort((left, right) => left.label.localeCompare(right.label))
-    .map((option) => ({ data: option, value: option.id }));
-};

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

@@ -4,14 +4,37 @@
  * See the LICENSE file for details.
  */
 
-import Link from "next/link";
+import { useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { CalendarDays } from "lucide-react";
 import { observer } from "mobx-react";
+import { EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type {
+  IState,
+  TExternalContourBoardDirection,
+  TExternalContourRequest,
+  TInboxIssueCurrentTab,
+  TIssue,
+} from "@plane/types";
 import { Avatar } from "@plane/ui";
-import { cn, renderFormattedDate } from "@plane/utils";
-import type { TExternalContourBoardDirection, TExternalContourRequest, TInboxIssueCurrentTab } from "@plane/types";
-import { ExternalContourStatePill } from "./state-pill";
+import { cn, renderFormattedDate, renderFormattedPayloadDate } from "@plane/utils";
+import { DateDropdown } from "@/components/dropdowns/date";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { MemberDropdownBase } from "@/components/dropdowns/member/base";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { WorkItemStateDropdownBase } from "@/components/dropdowns/state/base";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
+import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+import { IssueService } from "@/services/issue/issue.service";
 
 type Props = {
   currentTab: TInboxIssueCurrentTab;
@@ -21,72 +44,340 @@ type Props = {
   workspaceSlug: string;
 };
 
+const issueService = new IssueService();
+
+const basePillClasses =
+  "inline-flex min-h-9 items-center gap-1.5 rounded-full border-0 px-2.5 py-1 text-[11px] font-medium shadow-none outline-none transition-colors";
+
+const buildSourceStateMap = (
+  states: { id: string; name: string; color: string; group: IState["group"] }[] | undefined,
+  projectId: string | null
+) =>
+  Object.fromEntries(
+    (states ?? []).map((state, index) => [
+      state.id,
+      {
+        id: state.id,
+        color: state.color,
+        default: false,
+        description: "",
+        group: state.group,
+        name: state.name,
+        order: index + 1,
+        project_id: projectId ?? "",
+        sequence: index + 1,
+        workspace_id: "",
+      } satisfies IState,
+    ])
+  );
+
+const resolveRequestStatus = (issue: TExternalContourRequest["issue"], fallbackStatus: TExternalContourRequest["status"]) => {
+  const stateGroup = issue.state_detail?.group;
+  if (!stateGroup) return fallbackStatus;
+  return stateGroup === "completed" || stateGroup === "cancelled" ? "closed" : "open";
+};
+
 export const ExternalContoursBoardItem = observer(function ExternalContoursBoardItem(props: Props) {
   const { currentTab, direction, projectId, request, workspaceSlug } = props;
+  const router = useAppRouter();
+  const searchParams = useSearchParams();
   const { t } = useTranslation();
+  const { getUserDetails, workspace } = useMember();
+  const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const { getStateById, getProjectStateIds } = useProjectState();
+  const {
+    currentTab: boardCurrentTab,
+    fetchBoard,
+    upsertBoardItems,
+  } = useProjectExternalContoursBoard();
+  const {
+    fetchTargetOptions,
+    getTargetOptionsByProjectId,
+    updateRequest,
+    updateRequestIssue,
+  } = useProjectExternalContours();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [isSourceOptionsLoading, setIsSourceOptionsLoading] = useState(false);
+
   const issue = request.issue;
+  const selectedInboxIssueId = searchParams.get("inboxIssueId");
+  const isActive = selectedInboxIssueId === request.id;
   const requester = request.requested_by?.display_name || request.requested_by_name || issue.created_by_detail?.display_name || "NODE.DC";
   const requesterAvatar = issue.created_by_detail?.avatar_url || "";
   const counterpartContourName =
     direction === "outgoing"
       ? request.target_project?.name || request.target_project_name || issue.project_detail?.name
       : request.source_project?.name || request.source_project_name;
-  const assigneeDetails = issue.assignee_details?.slice(0, 2) ?? [];
-  const lastUpdatedAt = issue.updated_at || request.updated_at;
+  const targetProjectId = issue.project_id || request.target_project?.id || request.target_project_id || null;
+  const projectRole = targetProjectId
+    ? getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, targetProjectId)
+    : undefined;
+  const canEditTargetIssue =
+    direction === "incoming" && !!targetProjectId && projectRole !== undefined && projectRole !== EUserPermissions.GUEST;
+  const canEditSourceRequest = direction === "outgoing" && !!request.capabilities?.can_edit_request && !!targetProjectId;
+  const canEditCard = canEditTargetIssue || canEditSourceRequest;
+  const requestLink = `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`;
+  const targetOptions = getTargetOptionsByProjectId(targetProjectId);
+  const sourceStateMap = useMemo(
+    () => buildSourceStateMap(targetOptions?.states, targetProjectId),
+    [targetOptions?.states, targetProjectId]
+  );
+  const sourceStateIds = useMemo(() => targetOptions?.states?.map((state) => state.id) ?? [], [targetOptions?.states]);
+  const selectedState = canEditTargetIssue ? getStateById(issue.state_id) : sourceStateMap[issue.state_id ?? ""];
+  const projectStateIds = issue.project_id ? getProjectStateIds(issue.project_id) : [];
+  const foregroundClasses = isActive ? "text-[#111111]" : "text-white";
+  const subtleTextClasses = isActive ? "text-[#2F4721]" : "text-[#B3B3B8]";
+  const pillBackgroundClasses =
+    isActive ? "bg-black/10 text-[#111111]" : "bg-[rgb(var(--nodedc-card-passive-rgb))] text-white";
+  const iconBubbleClasses = isActive ? "bg-black text-[rgb(var(--nodedc-card-active-rgb))]" : "bg-[#111214] text-white";
+  const statusIconColor = selectedState?.color ?? (isActive ? "#111111" : "var(--text-color-primary)");
+  const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
+
+  if (!issue) return null;
+
+  const stopCardPropagation = (event: React.MouseEvent) => {
+    event.stopPropagation();
+  };
+
+  const openDetail = () => {
+    if (isActive) return;
+    router.push(requestLink);
+  };
+
+  const syncBoardAfterMutation = async () => {
+    await fetchBoard(workspaceSlug, projectId, boardCurrentTab ?? currentTab);
+  };
+
+  const ensureSourceOptions = async () => {
+    if (!canEditSourceRequest || !targetProjectId) return;
+
+    const tasks: Promise<unknown>[] = [];
+    if (!targetOptions) {
+      setIsSourceOptionsLoading(true);
+      tasks.push(fetchTargetOptions(workspaceSlug, projectId, targetProjectId));
+    }
+    if (!workspace.workspaceMemberIds) {
+      tasks.push(workspace.fetchWorkspaceMembers(workspaceSlug));
+    }
+
+    if (tasks.length === 0) return;
+
+    try {
+      await Promise.all(tasks);
+    } finally {
+      setIsSourceOptionsLoading(false);
+    }
+  };
+
+  const handleTargetIssueUpdate = async (data: Partial<TIssue>) => {
+    if (!targetProjectId || !issue.id || isUpdating) return;
+
+    setIsUpdating(true);
+    try {
+      const updatedIssue = await issueService.patchIssue(workspaceSlug, targetProjectId, issue.id, data);
+      const nextIssue = { ...issue, ...updatedIssue };
+      const nextRequest = {
+        ...request,
+        issue: nextIssue,
+        status: resolveRequestStatus(nextIssue, request.status),
+      };
+
+      updateRequestIssue(request.id, nextIssue);
+      upsertBoardItems([nextRequest]);
+      await syncBoardAfterMutation();
+    } catch {
+      setToast({ title: t("error"), type: TOAST_TYPE.ERROR, message: t("issue_could_not_be_updated") });
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleSourceRequestUpdate = async (data: Partial<TIssue>) => {
+    if (!canEditSourceRequest || isUpdating) return;
+
+    setIsUpdating(true);
+    try {
+      const updatedRequest = await updateRequest(workspaceSlug, projectId, request.id, data);
+      if (updatedRequest) {
+        upsertBoardItems([updatedRequest]);
+      }
+      await syncBoardAfterMutation();
+    } catch {
+      setToast({ title: t("error"), type: TOAST_TYPE.ERROR, message: t("issue_could_not_be_updated") });
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleCardUpdate = async (data: Partial<TIssue>) => {
+    if (canEditTargetIssue) {
+      await handleTargetIssueUpdate(data);
+      return;
+    }
+
+    await handleSourceRequestUpdate(data);
+  };
 
   return (
-    <Link
-      href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`}
-      className="block"
-    >
-      <div className="nodedc-external-card relative flex min-h-[13rem] flex-col gap-4 px-5 py-5 transition-all hover:bg-white/5">
-        <div className="space-y-1">
-          <div className="flex items-center justify-between gap-3">
-            <div className="flex min-w-0 items-center gap-3">
-              <Avatar src={requesterAvatar} name={requester} size="md" />
-              <div className="min-w-0">
-                <div className="truncate text-[15px] leading-5 font-semibold text-primary">{requester}</div>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-2">
-              {request.has_unread_updates && <span className="size-2 rounded-full bg-accent-primary" />}
-              <ExternalContourStatePill request={request} />
-            </div>
-          </div>
-
-          <div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">
-            {counterpartContourName || t("common.none")}
-          </div>
-        </div>
-
-        <div className="flex flex-1 items-center justify-center px-3 text-center">
-          <h3 className="line-clamp-3 w-full text-center text-16 leading-7 font-semibold text-primary">{issue.name}</h3>
-        </div>
-
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-2">
-            {assigneeDetails.length > 0 ? (
-              assigneeDetails.map((assignee, index) => (
-                <div key={assignee.id} className={cn(index > 0 && "-ml-2")}>
-                  <Avatar src={assignee.avatar_url || ""} name={assignee.display_name || "NODE.DC"} size="md" />
+    <div className="block">
+      <div
+        data-active={isActive}
+        className="nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col px-6 py-5 transition-all hover:bg-white/5"
+        role="button"
+        tabIndex={0}
+        onClick={openDetail}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openDetail();
+          }
+        }}
+      >
+        <div className={cn("relative flex min-h-[220px] flex-col px-1", foregroundClasses)}>
+          <div className="space-y-0.5">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 flex-1 items-center gap-3">
+                <div className="shrink-0">
+                  <Avatar src={requesterAvatar} name={requester} size="md" />
                 </div>
-              ))
-            ) : (
-              <div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
-            )}
+                <div className={cn("truncate text-body-sm-medium leading-5", foregroundClasses)}>{requester}</div>
+              </div>
+
+              <div className="flex shrink-0 items-center gap-2" onClick={stopCardPropagation}>
+                {request.has_unread_updates && (
+                  <span
+                    className={cn("size-2 rounded-full", isActive ? "bg-black/70" : "bg-accent-primary")}
+                    title={t("external_contours_page.list.unread_updates")}
+                  />
+                )}
+
+                <PriorityDropdown
+                  value={issue.priority}
+                  onChange={(priority) => void handleCardUpdate({ priority })}
+                  disabled={!canEditCard || isUpdating}
+                  buttonVariant="transparent-without-text"
+                  button={
+                    <div
+                      className={cn(
+                        "flex h-8 w-8 items-center justify-center rounded-full border-0 shadow-none outline-none",
+                        iconBubbleClasses
+                      )}
+                    >
+                      <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+                    </div>
+                  }
+                />
+
+                {canEditTargetIssue ? (
+                  <StateDropdown
+                    projectId={issue.project_id ?? undefined}
+                    stateIds={projectStateIds ?? []}
+                    value={issue.state_id}
+                    onChange={(stateId) => void handleCardUpdate({ state_id: stateId })}
+                    disabled={!canEditCard || isUpdating}
+                    buttonVariant="transparent-without-text"
+                    button={
+                      <div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
+                        <StateGroupIcon
+                          stateGroup={selectedState?.group ?? "backlog"}
+                          color={statusIconColor}
+                          className="h-3.5 w-3.5"
+                          percentage={selectedState?.order}
+                        />
+                      </div>
+                    }
+                  />
+                ) : (
+                  <WorkItemStateDropdownBase
+                    projectId={targetProjectId ?? undefined}
+                    value={issue.state_id}
+                    stateIds={sourceStateIds}
+                    getStateById={(stateId) => (stateId ? sourceStateMap[stateId] : undefined)}
+                    onChange={(stateId) => void handleCardUpdate({ state_id: stateId })}
+                    disabled={!canEditCard || isUpdating || !targetProjectId}
+                    isInitializing={isSourceOptionsLoading}
+                    onDropdownOpen={() => {
+                      void ensureSourceOptions();
+                    }}
+                    buttonVariant="transparent-without-text"
+                    button={
+                      <div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
+                        <StateGroupIcon
+                          stateGroup={selectedState?.group ?? "backlog"}
+                          color={statusIconColor}
+                          className="h-3.5 w-3.5"
+                          percentage={selectedState?.order}
+                        />
+                      </div>
+                    }
+                  />
+                )}
+              </div>
+            </div>
+
+            <div className={cn("truncate -mt-0.5 pl-8 text-[11px] font-medium leading-4", subtleTextClasses)}>
+              {counterpartContourName || t("common.none")}
+            </div>
           </div>
 
-          <div className="flex items-center gap-2">
-            <div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">{renderFormattedDate(lastUpdatedAt ?? "")}</div>
-            {issue.priority && issue.priority !== "none" && (
-              <div className="nodedc-external-priority-inline flex items-center justify-center">
-                <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
-              </div>
+          <div className="flex flex-1 items-center justify-center px-5 py-4 text-center">
+            <div className="line-clamp-4 max-w-full text-lg font-semibold leading-6">{issue.name}</div>
+          </div>
+
+          <div className="flex items-center justify-between gap-3" onClick={stopCardPropagation}>
+            {canEditTargetIssue ? (
+              <MemberDropdown
+                multiple
+                projectId={issue.project_id ?? undefined}
+                value={issue.assignee_ids ?? []}
+                onChange={(assigneeIds) => void handleCardUpdate({ assignee_ids: assigneeIds })}
+                disabled={!canEditCard || isUpdating}
+                buttonVariant="transparent-without-text"
+                button={
+                  <div className={cn(basePillClasses, pillBackgroundClasses, "pl-1 pr-2")}>
+                    <ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
+                  </div>
+                }
+              />
+            ) : (
+              <MemberDropdownBase
+                multiple
+                getUserDetails={getUserDetails}
+                memberIds={targetOptions?.member_ids ?? []}
+                value={issue.assignee_ids ?? []}
+                onChange={(assigneeIds) => void handleCardUpdate({ assignee_ids: assigneeIds })}
+                disabled={!canEditCard || isUpdating || !targetProjectId}
+                onDropdownOpen={() => {
+                  void ensureSourceOptions();
+                }}
+                buttonVariant="transparent-without-text"
+                button={
+                  <div className={cn(basePillClasses, pillBackgroundClasses, "pl-1 pr-2")}>
+                    <ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
+                  </div>
+                }
+              />
             )}
+
+            <DateDropdown
+              value={issue.target_date}
+              onChange={(targetDate) =>
+                void handleCardUpdate({
+                  target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
+                })
+              }
+              disabled={!canEditCard || isUpdating}
+              buttonVariant="transparent-without-text"
+              button={
+                <div className={cn(basePillClasses, pillBackgroundClasses)}>
+                  <CalendarDays className="h-3.5 w-3.5" />
+                  <span className="truncate">{dueDateLabel}</span>
+                </div>
+              }
+            />
           </div>
         </div>
       </div>
-    </Link>
+    </div>
   );
 });

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

@@ -125,10 +125,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
       remove: async () => undefined,
       update: async (_workspaceSlug: string, _projectId: string, requestId: string, data: Partial<TIssue>) => {
         try {
-          await updateRequest(workspaceSlug, sourceProjectId, requestId, {
-            name: data.name,
-            description_html: data.description_html,
-          });
+          await updateRequest(workspaceSlug, sourceProjectId, requestId, data);
         } catch {
           setToast({ title: t("error"), type: TOAST_TYPE.ERROR, message: t("issue_could_not_be_updated") });
         }