UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: KANBAN АВАТАРЫ ИСПОЛНИТЕЛЕЙ

plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx

@@ -87,6 +87,10 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
   const checkerItemsCompleted = issue.checker_items_completed_count ?? 0;
   const hasCheckerProgress = checkerBlocksTotal > 0;
   const assigneeIds = issue.assignee_ids ?? [];
+  const visibleAssigneeIds = assigneeIds.slice(0, 3);
+  const assigneeCount = assigneeIds.length;
+  const assigneeStackWidthClass =
+    assigneeCount > 3 ? "w-[68px]" : assigneeCount === 3 ? "w-[62px]" : assigneeCount === 2 ? "w-[44px]" : "w-7";
   const cornerControlClasses = cn(
     "flex h-12 w-12 -translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full border bg-transparent shadow-none ring-0 transition-colors outline-none",
     isActive
@@ -252,17 +256,55 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
         disabled={isReadOnly || !updateIssue}
         multiple
         buttonVariant="transparent-without-text"
-        className="h-7 w-7"
-        buttonContainerClassName="h-7 w-7"
+        className={cn("h-7 min-w-7", assigneeStackWidthClass)}
+        buttonContainerClassName={cn("h-7 min-w-7", assigneeStackWidthClass)}
         button={
           <div
             data-control-link-ignore="true"
             className={cn(
-              "flex h-7 min-w-7 items-center justify-center rounded-full border-0 bg-transparent p-0 shadow-none outline-none transition-colors [&_.bg-accent-subtle]:!bg-transparent [&_.border-subtle-1]:!border-0",
+              "relative flex h-7 min-w-7 items-center justify-start overflow-visible rounded-full border-0 bg-transparent p-0 shadow-none outline-none transition-colors [&_.border-subtle-1]:!border-0",
+              assigneeStackWidthClass,
               isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]" : "text-white"
             )}
           >
-            <ButtonAvatars showTooltip={false} userIds={assigneeIds} size={26} />
+            {assigneeCount > 0 ? (
+              <div className={cn("relative h-[26px] overflow-visible", assigneeStackWidthClass)}>
+                {visibleAssigneeIds.map((userId, index) => {
+                  const userDetails = getUserDetails(userId);
+
+                  return (
+                    <div
+                      key={userId}
+                      className="absolute top-0 h-[26px] w-[26px] rounded-full border border-black/10"
+                      style={{ left: index * 18, zIndex: 10 + index }}
+                    >
+                      <Avatar
+                        src={getFileURL(userDetails?.avatar_url ?? "")}
+                        name={userDetails?.display_name}
+                        size={26}
+                        showTooltip={false}
+                        className="border-0 shadow-none ring-0 outline-none"
+                      />
+                    </div>
+                  );
+                })}
+                {assigneeCount > 3 && (
+                  <span
+                    className="absolute -top-2 z-50 font-semibold"
+                    style={{
+                      color: isActive ? "rgba(var(--nodedc-on-card-active-rgb), 0.7)" : "#B3B3B8",
+                      fontSize: "11px",
+                      lineHeight: 1,
+                      right: "-4px",
+                    }}
+                  >
+                    {assigneeCount}
+                  </span>
+                )}
+              </div>
+            ) : (
+              <ButtonAvatars showTooltip={false} userIds={assigneeIds} size={26} />
+            )}
           </div>
         }
       />