refactor: migrate web Avatar to @makeplane/propel Avatar

apps/web/core/components/analytics/work-items/workitems-insight-table.tsx

@@ -10,13 +10,14 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { UserRound } from "lucide-react";
+import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
 // plane package imports
 import type { AnalyticsTableDataMap, WorkItemInsightColumns } from "@plane/types";
 // plane web components
-import { Avatar } from "@plane/ui";
+
 import { getFileURL } from "@plane/utils";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
@@ -111,10 +112,10 @@ const WorkItemsInsightTable = observer(function WorkItemsInsightTable() {
                 <div className="flex items-center gap-2">
                   {row.original.avatar_url && row.original.avatar_url !== "" ? (
                     <Avatar
-                      name={row.original.display_name}
+                      alt={row.original.display_name}
+                      fallback={row.original.display_name?.[0]?.toUpperCase()}
                       src={getFileURL(row.original.avatar_url)}
-                      size={24}
-                      shape="circle"
+                      size="sm"
                     />
                   ) : (
                     <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-layer-1 capitalize">

apps/web/core/components/comments/card/display.tsx

@@ -9,6 +9,7 @@ import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { EditorRefApi } from "@plane/editor";
 import { useHashScroll } from "@plane/hooks";
@@ -22,7 +23,6 @@ import { LiteTextEditor } from "@/components/editor/lite-text";
 import { CommentReactions } from "../comment-reaction";
 import { CommentCardEditForm } from "./edit-form";
 import { EmojiReactionButton, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
-import { Avatar } from "@plane/ui";
 import { useMember } from "@/hooks/store/use-member";
 
 export type TCommentCardDisplayProps = {
@@ -118,7 +118,7 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: TC
         </div>
       )}
       <div className="relative mb-3 flex w-full items-center gap-2">
-        <Avatar size="sm" name={displayName} src={getFileURL(avatarUrl)} className="shrink-0" />
+        <Avatar alt={displayName} fallback={displayName?.[0]?.toUpperCase()} size="2xs" src={getFileURL(avatarUrl)} />
         <div className="flex flex-1 flex-wrap items-center gap-1">
           <div className="text-caption-sm-medium">{displayName}</div>
           <div className="text-caption-sm-regular text-tertiary">

apps/web/core/components/common/applied-filters/members.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // plane ui
-import { Avatar } from "@plane/ui";
+import { Avatar } from "@makeplane/propel/components/avatar";
 // helpers
 import { getFileURL } from "@plane/utils";
 // types
@@ -36,10 +36,10 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
         return (
           <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             <Avatar
-              name={memberDetails.display_name}
+              alt={memberDetails.display_name}
+              fallback={memberDetails.display_name?.[0]?.toUpperCase()}
               src={getFileURL(memberDetails.avatar_url)}
-              showTooltip={false}
-              size={"sm"}
+              size="2xs"
             />
             <span className="normal-case">{memberDetails.display_name}</span>
             {editable && (

apps/web/core/components/common/avatar-group-overflow.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { AvatarGroup, type AvatarGroupSize } from "@makeplane/propel/components/avatar-group";
+
+type Props = {
+  children: React.ReactNode;
+  /**
+   * Shared size for every avatar in the stack.
+   */
+  size: AvatarGroupSize;
+  /**
+   * The maximum number of avatars to display. If the number of children exceeds this value, the
+   * additional avatars are replaced by a count of the remaining avatars.
+   * @default 2
+   */
+  max?: number;
+};
+
+/**
+ * An overlapping avatar stack that collapses the tail into a `+N` counter.
+ *
+ * Propel's `AvatarGroup` renders every child it is given, so the capping behaviour that
+ * `@plane/ui`'s `AvatarGroup` provided through `max` lives here as app chrome. The overflow
+ * indicator is a Propel `Avatar` with a `fallback`, matching the Avatar Group overflow pattern.
+ */
+export function AvatarGroupOverflow(props: Props) {
+  const { children, size, max = 2 } = props;
+
+  const avatars = React.Children.toArray(children);
+  const totalAvatars = avatars.length;
+  // If there is only one avatar past the limit, render it instead of a "+1" counter.
+  const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
+  const overflowCount = totalAvatars - max;
+
+  return (
+    <AvatarGroup size={size}>
+      {avatars.slice(0, maxAvatarsToRender)}
+      {maxAvatarsToRender < totalAvatars && (
+        <Avatar alt={`${overflowCount} more members`} fallback={`+${overflowCount}`} />
+      )}
+    </AvatarGroup>
+  );
+}

apps/web/core/components/common/filters/created-by.tsx

@@ -8,7 +8,8 @@ import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
-import { Avatar, Loader } from "@plane/ui";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -78,10 +79,10 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                       onClick={() => handleUpdate(member.id)}
                       icon={
                         <Avatar
-                          name={member.display_name}
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
                           src={getFileURL(member.avatar_url)}
-                          showTooltip={false}
-                          size="md"
+                          size="xs"
                         />
                       }
                       title={currentUser?.id === member.id ? "You" : member?.display_name}

apps/web/core/components/core/description-versions/dropdown-item.tsx

@@ -6,9 +6,10 @@
 
 import { observer } from "mobx-react";
 // plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
 import type { TDescriptionVersion } from "@plane/types";
-import { Avatar, CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/ui";
 import { calculateTimeAgo, getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
@@ -31,8 +32,9 @@ export const DescriptionVersionsDropdownItem = observer(function DescriptionVers
     <CustomMenu.MenuItem key={version.id} className="flex items-center gap-1" onClick={() => onClick(version.id)}>
       <span className="flex-shrink-0">
         <Avatar
-          name={versionCreator?.display_name ?? t("common.deactivated_user")}
-          size="sm"
+          alt={versionCreator?.display_name ?? t("common.deactivated_user")}
+          fallback={(versionCreator?.display_name ?? t("common.deactivated_user"))?.[0]?.toUpperCase()}
+          size="2xs"
           src={getFileURL(versionCreator?.avatar_url ?? "")}
         />
       </span>

apps/web/core/components/core/description-versions/modal.tsx

@@ -7,14 +7,15 @@
 import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { CopyIcon, ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TDescriptionVersion } from "@plane/types";
-import { Avatar, EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
 import { calculateTimeAgo, cn, getFileURL } from "@plane/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text";
@@ -85,9 +86,10 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
               {t("description_versions.edited_by")}
               <span className="flex-shrink-0">
                 <Avatar
-                  size="sm"
+                  alt={versionCreator?.display_name}
+                  fallback={versionCreator?.display_name?.[0]?.toUpperCase()}
+                  size="2xs"
                   src={getFileURL(versionCreator?.avatar_url ?? "")}
-                  name={versionCreator?.display_name}
                 />
               </span>
             </p>

apps/web/core/components/core/sidebar/progress-stats/assignee.tsx

@@ -6,8 +6,8 @@
 
 import { observer } from "mobx-react";
 // plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
-import { Avatar } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // assets
 import emptyMembers from "@/app/assets/empty-state/empty_members.svg?url";
@@ -43,7 +43,12 @@ export const AssigneeStatComponent = observer(function AssigneeStatComponent(pro
                 key={assignee?.id}
                 title={
                   <div className="flex items-center gap-2">
-                    <Avatar name={assignee?.title ?? undefined} src={getFileURL(assignee?.avatar_url ?? "")} />
+                    <Avatar
+                      alt={assignee?.title ?? undefined}
+                      fallback={assignee?.title?.[0]?.toUpperCase()}
+                      src={getFileURL(assignee?.avatar_url ?? "")}
+                      size="xs"
+                    />
                     <span>{assignee?.title ?? ""}</span>
                   </div>
                 }

apps/web/core/components/cycles/active-cycle/cycle-stats.tsx

@@ -12,14 +12,15 @@ import { CalendarCheck } from "lucide-react";
 // headless ui
 import { Tab } from "@headlessui/react";
 // plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
 import { PriorityIcon } from "@plane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import type { ICycle } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // ui
-import { Loader, Avatar } from "@plane/ui";
+import { Loader } from "@plane/ui";
 import { cn, renderFormattedDate, renderFormattedDateWithoutYear, getFileURL } from "@plane/utils";
 // assets
 import darkAssigneeAsset from "@/app/assets/empty-state/active-cycle/assignee-dark.webp?url";
@@ -273,8 +274,10 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                         title={
                           <div className="flex items-center gap-2">
                             <Avatar
-                              name={assignee?.display_name ?? undefined}
+                              alt={assignee?.display_name ?? undefined}
+                              fallback={assignee?.display_name?.[0]?.toUpperCase()}
                               src={getFileURL(assignee?.avatar_url ?? "")}
+                              size="xs"
                             />
 
                             <span>{assignee.display_name}</span>

apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx

@@ -11,13 +11,15 @@ import { SquareUser } from "lucide-react";
 // plane types
 import { EEstimateSystem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { Avatar } from "@makeplane/propel/components/avatar";
 import { MembersPropertyIcon, WorkItemsIcon } from "@plane/propel/icons";
 import type { ICycle } from "@plane/types";
 // plane ui
-import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
+import { TextArea } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
+import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useMember } from "@/hooks/store/use-member";
 // plane web constants
@@ -83,7 +85,12 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
           </div>
           <div className="flex w-3/5 items-center rounded-xs">
             <div className="flex items-center gap-2.5">
-              <Avatar name={cycleOwnerDetails?.display_name} src={getFileURL(cycleOwnerDetails?.avatar_url ?? "")} />
+              <Avatar
+                alt={cycleOwnerDetails?.display_name}
+                fallback={cycleOwnerDetails?.display_name?.[0]?.toUpperCase()}
+                src={getFileURL(cycleOwnerDetails?.avatar_url ?? "")}
+                size="xs"
+              />
               <span className="text-13 text-secondary">{cycleOwnerDetails?.display_name}</span>
             </div>
           </div>
@@ -98,19 +105,19 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
             <div className="flex items-center gap-2.5">
               {cycleDetails?.assignee_ids && cycleDetails.assignee_ids.length > 0 ? (
                 <>
-                  <AvatarGroup showTooltip>
+                  <AvatarGroupOverflow size="xs">
                     {cycleDetails.assignee_ids.map((member) => {
                       const memberDetails = getUserDetails(member);
                       return (
                         <Avatar
                           key={memberDetails?.id}
-                          name={memberDetails?.display_name ?? ""}
+                          alt={memberDetails?.display_name ?? ""}
+                          fallback={memberDetails?.display_name?.[0]?.toUpperCase()}
                           src={getFileURL(memberDetails?.avatar_url ?? "")}
-                          showTooltip={false}
                         />
                       );
                     })}
-                  </AvatarGroup>
+                  </AvatarGroupOverflow>
                 </>
               ) : (
                 <span className="px-1.5 text-13 text-tertiary">{t("no_assignee")}</span>

apps/web/core/components/cycles/list/cycle-list-item-action.tsx

@@ -14,13 +14,15 @@ import { Eye, CalendarDays } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
+import { Avatar } from "@makeplane/propel/components/avatar";
 import { TransferIcon, WorkItemsIcon, MembersPropertyIcon } from "@plane/propel/icons";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ICycle, TCycleGroups } from "@plane/types";
-import { Avatar, AvatarGroup, FavoriteStar } from "@plane/ui";
+import { FavoriteStar } from "@plane/ui";
 import { getDate, getFileURL, generateQueryParams } from "@plane/utils";
 // components
+import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { MergedDateDisplay } from "@/components/dropdowns/merged-date";
@@ -266,14 +268,19 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
         <Tooltip label={`${cycleDetails.assignee_ids?.length} Members`} layout="stacked" disabled={isMobile}>
           <div className="flex w-min cursor-default items-center justify-center">
             {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
-              <AvatarGroup showTooltip={false}>
+              <AvatarGroupOverflow size="xs">
                 {cycleDetails.assignee_ids?.map((assignee_id) => {
                   const member = getUserDetails(assignee_id);
                   return (
-                    <Avatar key={member?.id} name={member?.display_name} src={getFileURL(member?.avatar_url ?? "")} />
+                    <Avatar
+                      key={member?.id}
+                      alt={member?.display_name}
+                      fallback={member?.display_name?.[0]?.toUpperCase()}
+                      src={getFileURL(member?.avatar_url ?? "")}
+                    />
                   );
                 })}
-              </AvatarGroup>
+              </AvatarGroupOverflow>
             ) : (
               <MembersPropertyIcon className="h-4 w-4 text-tertiary" />
             )}