style: new avatar and avatar group components (#2584)

* style: new avatar components

* chore: bug fixes

* chore: add pixel to size

* chore: add comments to helper functions

* fix: build errors

packages/ui/package.json

@@ -10,13 +10,13 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
     "lint": "eslint src/",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@types/react-color" : "^3.0.9",
+    "@types/react-color": "^3.0.9",
     "@types/node": "^20.5.2",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",

packages/ui/src/avatar/avatar-group.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+// ui
+import { Tooltip } from "../tooltip";
+// types
+import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
+
+type Props = {
+  /**
+   * The children of the avatar group.
+   * These should ideally should be `Avatar` components
+   */
+  children: React.ReactNode;
+  /**
+   * The maximum number of avatars to display.
+   * If the number of children exceeds this value, the additional avatars will be replaced by a count of the remaining avatars.
+   * @default 2
+   */
+  max?: number;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+};
+
+export const AvatarGroup: React.FC<Props> = (props) => {
+  const { children, max = 2, showTooltip = true, size = "md" } = props;
+
+  // calculate total length of avatars inside the group
+  const totalAvatars = React.Children.toArray(children).length;
+
+  // slice the children to the maximum number of avatars
+  const avatars = React.Children.toArray(children).slice(0, max);
+
+  // assign the necessary props from the AvatarGroup component to the Avatar components
+  const avatarsWithUpdatedProps = avatars.map((avatar) => {
+    const updatedProps: Partial<Props> = {
+      showTooltip,
+      size,
+    };
+
+    return React.cloneElement(avatar as React.ReactElement, updatedProps);
+  });
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <div className={`flex ${sizeInfo.spacing}`}>
+      {avatarsWithUpdatedProps.map((avatar, index) => (
+        <div key={index} className="ring-1 ring-custom-border-200 rounded-full">
+          {avatar}
+        </div>
+      ))}
+      {max < totalAvatars && (
+        <Tooltip
+          tooltipContent={`${totalAvatars} total`}
+          disabled={!showTooltip}
+        >
+          <div
+            className={`${
+              !isAValidNumber(size) ? sizeInfo.avatarSize : ""
+            } ring-1 ring-custom-border-200 bg-custom-primary-500 text-white rounded-full grid place-items-center text-[9px]`}
+            style={
+              isAValidNumber(size)
+                ? {
+                    width: `${size}px`,
+                    height: `${size}px`,
+                  }
+                : {}
+            }
+          >
+            +{totalAvatars - max}
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+};

packages/ui/src/avatar/avatar.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+// ui
+import { Tooltip } from "../tooltip";
+
+export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
+
+type Props = {
+  /**
+   * The name of the avatar which will be displayed on the tooltip
+   */
+  name?: string;
+  /**
+   * The background color if the avatar image fails to load
+   */
+  fallbackBackgroundColor?: string;
+  /**
+   * The text to display if the avatar image fails to load
+   */
+  fallbackText?: string;
+  /**
+   * The text color if the avatar image fails to load
+   */
+  fallbackTextColor?: string;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+  /**
+   * The shape of the avatar
+   * Possible values: "circle", "square"
+   * @default "circle"
+   */
+  shape?: "circle" | "square";
+  /**
+   * The source of the avatar image
+   */
+  src?: string;
+};
+
+/**
+ * Get the size details based on the size prop
+ * @param size The size of the avatar
+ * @returns The size details
+ */
+export const getSizeInfo = (size: TAvatarSize) => {
+  switch (size) {
+    case "sm":
+      return {
+        avatarSize: "h-4 w-4",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+    case "md":
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+    case "base":
+      return {
+        avatarSize: "h-6 w-6",
+        fontSize: "text-sm",
+        spacing: "-space-x-1.5",
+      };
+    case "lg":
+      return {
+        avatarSize: "h-7 w-7",
+        fontSize: "text-sm",
+        spacing: "-space-x-1.5",
+      };
+    default:
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+  }
+};
+
+/**
+ * Get the border radius based on the shape prop
+ * @param shape The shape of the avatar
+ * @returns The border radius
+ */
+export const getBorderRadius = (shape: "circle" | "square") => {
+  switch (shape) {
+    case "circle":
+      return "rounded-full";
+    case "square":
+      return "rounded-md";
+    default:
+      return "rounded-full";
+  }
+};
+
+/**
+ * Check if the value is a valid number
+ * @param value The value to check
+ * @returns Whether the value is a valid number or not
+ */
+export const isAValidNumber = (value: any) => {
+  return typeof value === "number" && !isNaN(value);
+};
+
+export const Avatar: React.FC<Props> = (props) => {
+  const {
+    name,
+    fallbackBackgroundColor,
+    fallbackText,
+    fallbackTextColor,
+    showTooltip = true,
+    size = "md",
+    shape = "circle",
+    src,
+  } = props;
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <Tooltip
+      tooltipContent={fallbackText ?? name ?? "?"}
+      disabled={!showTooltip}
+    >
+      <div
+        className={`${
+          !isAValidNumber(size) ? sizeInfo.avatarSize : ""
+        } overflow-hidden grid place-items-center ${getBorderRadius(shape)}`}
+        style={
+          isAValidNumber(size)
+            ? {
+                height: `${size}px`,
+                width: `${size}px`,
+              }
+            : {}
+        }
+      >
+        {src ? (
+          <img
+            src={src}
+            className={`h-full w-full ${getBorderRadius(shape)}`}
+            alt={name}
+          />
+        ) : (
+          <div
+            className={`${
+              sizeInfo.fontSize
+            } grid place-items-center h-full w-full ${getBorderRadius(shape)}`}
+            style={{
+              backgroundColor:
+                fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
+              color: fallbackTextColor ?? "#ffffff",
+            }}
+          >
+            {name ? name[0].toUpperCase() : fallbackText ?? "?"}
+          </div>
+        )}
+      </div>
+    </Tooltip>
+  );
+};

packages/ui/src/avatar/index.ts

@@ -0,0 +1,2 @@
+export * from "./avatar-group";
+export * from "./avatar";

packages/ui/src/index.ts

@@ -1,9 +1,10 @@
+export * from "./avatar";
+export * from "./breadcrumbs";
 export * from "./button";
+export * from "./dropdowns";
 export * from "./form-fields";
+export * from "./icons";
 export * from "./progress";
 export * from "./spinners";
-export * from "./loader";
 export * from "./tooltip";
-export * from "./icons";
+export * from "./loader";
-export * from "./breadcrumbs";
-export * from "./dropdowns";

web/components/command-palette/issue/change-issue-assignee.tsx

@@ -9,7 +9,7 @@ import useProjectMembers from "hooks/use-project-members";
 // constants
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar } from "@plane/ui";
 // icons
 import { Check } from "lucide-react";
 // types
@@ -31,13 +31,13 @@ export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }
   const { members } = useProjectMembers(workspaceSlug as string, projectId as string);
 
   const options =
-    members?.map(({ member }: any) => ({
+    members?.map(({ member }) => ({
       value: member.id,
       query: member.display_name,
       content: (
         <>
           <div className="flex items-center gap-2">
-            <Avatar user={member} />
+            <Avatar name={member.display_name} src={member.avatar} showTooltip={false} />
             {member.display_name}
           </div>
           {issue.assignees.includes(member.id) && (

web/components/core/filters/filters-list.tsx

@@ -1,18 +1,14 @@
 import React from "react";
-
+import { X } from "lucide-react";
-// icons
-import { PriorityIcon, StateGroupIcon } from "@plane/ui";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
-import { X } from "lucide-react";
 
 type Props = {
   filters: Partial<IIssueFilterOptions>;
@@ -149,7 +145,7 @@ export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilt
                             key={memberId}
                             className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
                           >
-                            <Avatar user={member} />
+                            <Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />
                             <span>{member?.display_name}</span>
                             <span
                               className="cursor-pointer"
@@ -173,7 +169,7 @@ export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilt
                             key={`${memberId}-${key}`}
                             className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
                           >
-                            <Avatar user={member} />
+                            <Avatar name={member?.display_name} src={member?.avatar} />
                             <span>{member?.display_name}</span>
                             <span
                               className="cursor-pointer"

web/components/core/filters/index.ts

@@ -1,4 +1,3 @@
 export * from "./date-filter-modal";
 export * from "./date-filter-select";
 export * from "./filters-list";
-export * from "./workspace-filters-list";

web/components/core/filters/workspace-filters-list.tsx

@@ -1,347 +0,0 @@
-import { FC } from "react";
-// icons
-import { X } from "lucide-react";
-import { PriorityIcon, StateGroupIcon } from "@plane/ui";
-// ui
-import { Avatar } from "components/ui";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import { IIssueLabels, IProject, IUserLite, IWorkspaceIssueFilterOptions, TStateGroups } from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  filters: Partial<IWorkspaceIssueFilterOptions>;
-  setFilters: (updatedFilter: Partial<IWorkspaceIssueFilterOptions>) => void;
-  clearAllFilters: (...args: any) => void;
-  labels: IIssueLabels[] | undefined;
-  members: IUserLite[] | undefined;
-  stateGroup: string[] | undefined;
-  project?: IProject[] | undefined;
-};
-
-export const WorkspaceFiltersList: FC<Props> = (props) => {
-  const { filters, setFilters, clearAllFilters, labels, members, project } = props;
-
-  if (!filters) return <></>;
-
-  const nullFilters = Object.keys(filters).filter((key) => filters[key as keyof IWorkspaceIssueFilterOptions] === null);
-
-  return (
-    <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
-      {Object.keys(filters).map((filterKey) => {
-        const key = filterKey as keyof typeof filters;
-
-        if (filters[key] === null || (filters[key]?.length ?? 0) <= 0) return null;
-
-        return (
-          <div
-            key={key}
-            className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
-          >
-            <span className="capitalize text-custom-text-200">
-              {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
-            </span>
-            {filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
-              <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
-            ) : Array.isArray(filters[key]) ? (
-              <div className="space-x-2">
-                <div className="flex flex-wrap items-center gap-1">
-                  {key === "state_group"
-                    ? filters.state_group?.map((stateGroup) => {
-                        const group = stateGroup as TStateGroups;
-
-                        return (
-                          <p
-                            key={group}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                            style={{
-                              color: STATE_GROUP_COLORS[group],
-                              backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
-                            }}
-                          >
-                            <span>
-                              <StateGroupIcon stateGroup={group} color={undefined} />
-                            </span>
-                            <span>{group}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  state_group: filters.state_group?.filter((g) => g !== group),
-                                })
-                              }
-                            >
-                              <X className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : key === "priority"
-                    ? filters.priority?.map((priority: any) => (
-                        <p
-                          key={priority}
-                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
-                            priority === "urgent"
-                              ? "bg-red-500/20 text-red-500"
-                              : priority === "high"
-                              ? "bg-orange-500/20 text-orange-500"
-                              : priority === "medium"
-                              ? "bg-yellow-500/20 text-yellow-500"
-                              : priority === "low"
-                              ? "bg-green-500/20 text-green-500"
-                              : "bg-custom-background-90 text-custom-text-200"
-                          }`}
-                        >
-                          <span>
-                            <PriorityIcon priority={priority} />
-                          </span>
-                          <span>{priority === "null" ? "None" : priority}</span>
-                          <span
-                            className="cursor-pointer"
-                            onClick={() =>
-                              setFilters({
-                                priority: filters.priority?.filter((p: any) => p !== priority),
-                              })
-                            }
-                          >
-                            <X className="h-3 w-3" />
-                          </span>
-                        </p>
-                      ))
-                    : key === "assignees"
-                    ? filters.assignees?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <X className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "subscriber"
-                    ? filters.subscriber?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <X className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "created_by"
-                    ? filters.created_by?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={`${memberId}-${key}`}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  created_by: filters.created_by?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <X className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "labels"
-                    ? filters.labels?.map((labelId: string) => {
-                        const label = labels?.find((l) => l.id === labelId);
-
-                        if (!label) return null;
-                        const color = label.color !== "" ? label.color : "#0f172a";
-                        return (
-                          <div
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
-                            style={{
-                              color: color,
-                              backgroundColor: `${color}20`, // add 20% opacity
-                            }}
-                            key={labelId}
-                          >
-                            <div
-                              className="h-1.5 w-1.5 rounded-full"
-                              style={{
-                                backgroundColor: color,
-                              }}
-                            />
-                            <span>{label.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  labels: filters.labels?.filter((l: any) => l !== labelId),
-                                })
-                              }
-                            >
-                              <X
-                                className="h-3 w-3"
-                                style={{
-                                  color: color,
-                                }}
-                              />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "start_date"
-                    ? filters.start_date?.map((date: string) => {
-                        if (filters.start_date && filters.start_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  start_date: filters.start_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <X className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "target_date"
-                    ? filters.target_date?.map((date: string) => {
-                        if (filters.target_date && filters.target_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  target_date: filters.target_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <X className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "project"
-                    ? filters.project?.map((projectId) => {
-                        const currentProject = project?.find((p) => p.id === projectId);
-                        return (
-                          <p
-                            key={currentProject?.id}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                          >
-                            <span>{currentProject?.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  project: filters.project?.filter((p) => p !== projectId),
-                                })
-                              }
-                            >
-                              <X className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : (filters[key] as any)?.join(", ")}
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setFilters({
-                        [key]: null,
-                      })
-                    }
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-x-1 capitalize">
-                {filters[key as keyof typeof filters]}
-                <button
-                  type="button"
-                  onClick={() =>
-                    setFilters({
-                      [key]: null,
-                    })
-                  }
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
-      {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
-        <button
-          type="button"
-          onClick={clearAllFilters}
-          className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
-        >
-          <span>Clear all filters</span>
-          <X className="h-3 w-3" />
-        </button>
-      )}
-    </div>
-  );
-};

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

@@ -10,10 +10,9 @@ import useIssuesView from "hooks/use-issues-view";
 import emptyLabel from "public/empty-state/empty_label.svg";
 import emptyMembers from "public/empty-state/empty_members.svg";
 // components
-import { StateGroupIcon } from "@plane/ui";
 import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, StateGroupIcon } from "@plane/ui";
 // types
 import {
   IModule,
@@ -138,17 +137,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     key={assignee.assignee_id}
                     title={
                       <div className="flex items-center gap-2">
-                        <Avatar
+                        <Avatar name={assignee.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
-                          user={{
-                            id: assignee.assignee_id,
-                            avatar: assignee.avatar ?? "",
-                            first_name: assignee.first_name ?? "",
-                            last_name: assignee.last_name ?? "",
-                            display_name: assignee.display_name ?? "",
-                          }}
-                          height="18px"
-                          width="18px"
-                        />
                         <span>{assignee.display_name}</span>
                       </div>
                     }

web/components/cycles/active-cycle-details.tsx

@@ -1,16 +1,14 @@
 import { MouseEvent } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
-// services
-import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { AssigneesList } from "components/ui/avatar";
 import { SingleProgressStats } from "components/core";
 import {
+  AvatarGroup,
   Loader,
   Tooltip,
   LinearProgressIndicator,
@@ -19,6 +17,7 @@ import {
   LayersIcon,
   StateGroupIcon,
   PriorityIcon,
+  Avatar,
 } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
@@ -31,9 +30,7 @@ import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } fro
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
-import { ICycle, IIssue } from "types";
+import { ICycle } from "types";
-// fetch-keys
-import { CURRENT_CYCLE_LIST, CYCLES_LIST, CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
 
 const stateGroups = [
   {
@@ -69,9 +66,6 @@ interface IActiveCycleDetails {
 }
 
 export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
-  // services
-  const cycleService = new CycleService();
-
   const router = useRouter();
 
   const { workspaceSlug, projectId } = props;
@@ -306,7 +300,11 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
 
                 {cycle.assignees.length > 0 && (
                   <div className="flex items-center gap-1 text-custom-text-200">
-                    <AssigneesList users={cycle.assignees} length={4} />
+                    <AvatarGroup>
+                      {cycle.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
                   </div>
                 )}
               </div>
@@ -406,7 +404,11 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
                         <div className={`flex items-center gap-2 text-custom-text-200`}>
                           {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
                             <div className="-my-0.5 flex items-center justify-center gap-2">
-                              <AssigneesList users={issue.assignee_details} length={3} showLength={false} />
+                              <AvatarGroup showTooltip={false}>
+                                {issue.assignee_details.map((assignee: any) => (
+                                  <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                                ))}
+                              </AvatarGroup>
                             </div>
                           ) : (
                             ""

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

@@ -1,16 +1,14 @@
 import React, { Fragment } from "react";
-
-// headless ui
 import { Tab } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar } from "@plane/ui";
 // types
 import { ICycle } from "types";
-// types
+
 type Props = {
   cycle: ICycle;
 };
@@ -71,10 +69,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
       </Tab.List>
       {cycle.total_issues > 0 ? (
         <Tab.Panels as={Fragment}>
-          <Tab.Panel
+          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
-            as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
-          >
             {cycle.distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)
                 return (
@@ -82,15 +77,8 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     key={assignee.assignee_id}
                     title={
                       <div className="flex items-center gap-2">
-                        <Avatar
+                        <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
-                          user={{
+
-                            id: assignee.assignee_id,
-                            avatar: assignee.avatar ?? "",
-                            first_name: assignee.first_name ?? "",
-                            last_name: assignee.last_name ?? "",
-                            display_name: assignee.display_name ?? "",
-                          }}
-                        />
                         <span>{assignee.display_name}</span>
                       </div>
                     }
@@ -105,13 +93,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     title={
                       <div className="flex items-center gap-2">
                         <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                          <img
+                          <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
-                            src="/user.png"
-                            height="100%"
-                            width="100%"
-                            className="rounded-full"
-                            alt="User"
-                          />
                         </div>
                         <span>No assignee</span>
                       </div>
@@ -122,10 +104,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                 );
             })}
           </Tab.Panel>
-          <Tab.Panel
+          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
-            as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
-          >
             {cycle.distribution.labels.map((label, index) => (
               <SingleProgressStats
                 key={label.label_id ?? `no-label-${index}`}

web/components/cycles/cycles-board-card.tsx

@@ -1,16 +1,12 @@
 import { FC, MouseEvent, useState } from "react";
-
 import { useRouter } from "next/router";
-
-// next imports
 import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
 // ui
-import { AssigneesList } from "components/ui/avatar";
+import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
-import { CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
 // icons
 import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // helpers
@@ -197,7 +193,11 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
               {cycle.assignees.length > 0 && (
                 <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
                   <div className="flex items-center gap-1 cursor-default">
-                    <AssigneesList users={cycle.assignees} length={3} />
+                    <AvatarGroup showTooltip={false}>
+                      {cycle.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
                   </div>
                 </Tooltip>
               )}

web/components/cycles/cycles-list-item.tsx

@@ -8,9 +8,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
-import { AssigneesList } from "components/ui";
 // ui
-import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon } from "@plane/ui";
+import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar } from "@plane/ui";
 // icons
 import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
 // helpers
@@ -207,7 +206,11 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
             <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
               <div className="flex items-center justify-center gap-1 cursor-default w-16">
                 {cycle.assignees.length > 0 ? (
-                  <AssigneesList users={cycle.assignees} length={2} />
+                  <AvatarGroup showTooltip={false}>
+                    {cycle.assignees.map((assignee) => (
+                      <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                    ))}
+                  </AvatarGroup>
                 ) : (
                   <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
                     <User2 className="h-4 w-4 text-custom-text-400" />

web/components/cycles/cycles-view.tsx

@@ -25,7 +25,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
   const { cycle: cycleStore } = useMobxStore();
 
   // api call to fetch cycles list
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId && filter ? `CYCLES_LIST_${projectId}_${filter}` : null,
     workspaceSlug && projectId && filter ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null
   );
@@ -36,10 +36,10 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
     <>
       {layout === "list" && (
         <>
-          {!isLoading ? (
+          {cyclesList ? (
             <CyclesList cycles={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
           ) : (
-            <Loader className="space-y-4">
+            <Loader className="space-y-4 p-8">
               <Loader.Item height="50px" />
               <Loader.Item height="50px" />
               <Loader.Item height="50px" />
@@ -50,7 +50,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
 
       {layout === "board" && (
         <>
-          {!isLoading ? (
+          {cyclesList ? (
             <CyclesBoard
               cycles={cyclesList}
               filter={filter}
@@ -59,7 +59,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
               peekCycle={peekCycle}
             />
           ) : (
-            <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+            <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3 p-8">
               <Loader.Item height="200px" />
               <Loader.Item height="200px" />
               <Loader.Item height="200px" />
@@ -70,7 +70,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
 
       {layout === "gantt" && (
         <>
-          {!isLoading ? (
+          {cyclesList ? (
             <CyclesListGanttChartView cycles={cyclesList} workspaceSlug={workspaceSlug} />
           ) : (
             <Loader className="space-y-4">

web/components/cycles/index.ts

@@ -7,8 +7,6 @@ export * from "./form";
 export * from "./modal";
 export * from "./select";
 export * from "./sidebar";
-export * from "./single-cycle-card";
-export * from "./single-cycle-list";
 export * from "./transfer-issues-modal";
 export * from "./transfer-issues";
 export * from "./cycles-list";

web/components/cycles/sidebar.tsx

@@ -15,8 +15,8 @@ import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { CycleDeleteModal } from "components/cycles/delete-modal";
 // ui
-import { Avatar, CustomRangeDatePicker } from "components/ui";
+import { CustomRangeDatePicker } from "components/ui";
-import { CustomMenu, Loader, LayersIcon } from "@plane/ui";
+import { Avatar, CustomMenu, Loader, LayersIcon } from "@plane/ui";
 // icons
 import { ChevronDown, LinkIcon, Trash2, UserCircle2, AlertCircle, ChevronRight, MoveRight } from "lucide-react";
 // helpers
@@ -137,7 +137,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          await submitChanges({
+          submitChanges({
             start_date: renderDateFormat(`${watch("start_date")}`),
             end_date: renderDateFormat(`${watch("end_date")}`),
           });
@@ -211,7 +211,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          await submitChanges({
+          submitChanges({
             start_date: renderDateFormat(`${watch("start_date")}`),
             end_date: renderDateFormat(`${watch("end_date")}`),
           });
@@ -349,41 +349,37 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               )}
               <div className="relative flex h-full w-52 items-center gap-2.5">
                 <Popover className="flex h-full items-center justify-center rounded-lg">
-                  {({}) => (
+                  <Popover.Button
-                    <>
+                    disabled={isCompleted ?? false}
-                      <Popover.Button
+                    className="text-sm text-custom-text-300 font-medium cursor-default"
-                        disabled={isCompleted ?? false}
+                  >
-                        className="text-sm text-custom-text-300 font-medium cursor-default"
+                    {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
-                      >
+                  </Popover.Button>
-                        {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
-                      </Popover.Button>
 
-                      <Transition
+                  <Transition
-                        as={React.Fragment}
+                    as={React.Fragment}
-                        enter="transition ease-out duration-200"
+                    enter="transition ease-out duration-200"
-                        enterFrom="opacity-0 translate-y-1"
+                    enterFrom="opacity-0 translate-y-1"
-                        enterTo="opacity-100 translate-y-0"
+                    enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-in duration-150"
+                    leave="transition ease-in duration-150"
-                        leaveFrom="opacity-100 translate-y-0"
+                    leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 translate-y-1"
+                    leaveTo="opacity-0 translate-y-1"
-                      >
+                  >
-                        <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                    <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
-                          <CustomRangeDatePicker
+                      <CustomRangeDatePicker
-                            value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
+                        value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
-                            onChange={(val) => {
+                        onChange={(val) => {
-                              if (val) {
+                          if (val) {
-                                handleStartDateChange(val);
+                            handleStartDateChange(val);
-                              }
+                          }
-                            }}
+                        }}
-                            startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                        startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                            endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                        endDate={watch("end_date") ? `${watch("end_date")}` : null}
-                            maxDate={new Date(`${watch("end_date")}`)}
+                        maxDate={new Date(`${watch("end_date")}`)}
-                            selectsStart
+                        selectsStart
-                          />
+                      />
-                        </Popover.Panel>
+                    </Popover.Panel>
-                      </Transition>
+                  </Transition>
-                    </>
-                  )}
                 </Popover>
                 <MoveRight className="h-4 w-4 text-custom-text-300" />
                 <Popover className="flex h-full items-center justify-center rounded-lg">
@@ -441,7 +437,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               </div>
               <div className="flex items-center w-1/2 rounded-sm">
                 <div className="flex items-center gap-2.5">
-                  <Avatar user={cycleDetails.owned_by} />
+                  <Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
                   <span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
                 </div>
               </div>
@@ -497,7 +493,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                       <Disclosure.Panel>
                         <div className="flex flex-col gap-3">
                           {isStartValid && isEndValid ? (
-                            <div className=" h-full w-full pt-4">
+                            <div className="h-full w-full pt-4">
                               <div className="flex  items-start  gap-4 py-2 text-xs">
                                 <div className="flex items-center gap-3 text-custom-text-100">
                                   <div className="flex items-center justify-center gap-1">

web/components/cycles/single-cycle-card.tsx

@@ -1,389 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { SingleProgressStats } from "components/core";
-// ui
-import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
-import { AssigneesList } from "components/ui/avatar";
-// icons
-import {
-  AlarmClock,
-  AlertTriangle,
-  ArrowRight,
-  CalendarDays,
-  ChevronDown,
-  LinkIcon,
-  Pencil,
-  Star,
-  Target,
-  Trash2,
-} from "lucide-react";
-// helpers
-import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-// types
-import { ICycle } from "types";
-
-type TSingleStatProps = {
-  cycle: ICycle;
-  handleEditCycle: () => void;
-  handleDeleteCycle: () => void;
-  handleAddToFavorites: () => void;
-  handleRemoveFromFavorites: () => void;
-};
-
-const stateGroups = [
-  {
-    key: "backlog_issues",
-    title: "Backlog",
-    color: "#dee2e6",
-  },
-  {
-    key: "unstarted_issues",
-    title: "Unstarted",
-    color: "#26b5ce",
-  },
-  {
-    key: "started_issues",
-    title: "Started",
-    color: "#f7ae59",
-  },
-  {
-    key: "cancelled_issues",
-    title: "Cancelled",
-    color: "#d687ff",
-  },
-  {
-    key: "completed_issues",
-    title: "Completed",
-    color: "#09a953",
-  },
-];
-
-export const SingleCycleCard: React.FC<TSingleStatProps> = ({
-  cycle,
-  handleEditCycle,
-  handleDeleteCycle,
-  handleAddToFavorites,
-  handleRemoveFromFavorites,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-  const isCompleted = cycleStatus === "completed";
-  const endDate = new Date(cycle.end_date ?? "");
-  const startDate = new Date(cycle.start_date ?? "");
-
-  const handleCopyText = () => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
-      });
-    });
-  };
-
-  const progressIndicatorData = stateGroups.map((group, index) => ({
-    id: index,
-    name: group.title,
-    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
-    color: group.color,
-  }));
-
-  const groupedIssues: any = {
-    backlog: cycle.backlog_issues,
-    unstarted: cycle.unstarted_issues,
-    started: cycle.started_issues,
-    completed: cycle.completed_issues,
-    cancelled: cycle.cancelled_issues,
-  };
-
-  return (
-    <div>
-      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-200 text-xs shadow">
-        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-          <a className="w-full">
-            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
-              <div className="flex items-center justify-between gap-1">
-                <span className="flex items-center gap-1">
-                  <span className="h-5 w-5">
-                    <ContrastIcon
-                      className="h-5 w-5"
-                      color={`${
-                        cycleStatus === "current"
-                          ? "#09A953"
-                          : cycleStatus === "upcoming"
-                          ? "#F7AE59"
-                          : cycleStatus === "completed"
-                          ? "#3F76FF"
-                          : cycleStatus === "draft"
-                          ? "rgb(var(--color-text-200))"
-                          : ""
-                      }`}
-                    />
-                  </span>
-                  <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
-                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 15)}</h3>
-                  </Tooltip>
-                </span>
-                <span className="flex items-center gap-1 capitalize">
-                  <span
-                    className={`rounded-full px-1.5 py-0.5
-                    ${
-                      cycleStatus === "current"
-                        ? "bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                  >
-                    {cycleStatus === "current" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <RunningIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
-                      </span>
-                    ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <AlarmClock className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
-                      </span>
-                    ) : cycleStatus === "completed" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        {cycle.total_issues - cycle.completed_issues > 0 && (
-                          <Tooltip
-                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
-                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
-                            }`}
-                          >
-                            <span>
-                              <AlertTriangle className="h-3.5 w-3.5" />
-                            </span>
-                          </Tooltip>
-                        )}{" "}
-                        Completed
-                      </span>
-                    ) : (
-                      cycleStatus
-                    )}
-                  </span>
-                  {cycle.is_favorite ? (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleAddToFavorites();
-                      }}
-                    >
-                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                    </button>
-                  )}
-                </span>
-              </div>
-              <div className="flex h-4 items-center justify-start gap-5 text-custom-text-200">
-                {cycleStatus !== "draft" && (
-                  <>
-                    <div className="flex items-start gap-1">
-                      <CalendarDays className="h-4 w-4" />
-                      <span>{renderShortDateWithYearFormat(startDate)}</span>
-                    </div>
-                    <ArrowRight className="h-4 w-4" />
-                    <div className="flex items-start gap-1">
-                      <Target className="h-4 w-4" />
-                      <span>{renderShortDateWithYearFormat(endDate)}</span>
-                    </div>
-                  </>
-                )}
-              </div>
-
-              <div className="flex justify-between items-end">
-                <div className="flex flex-col gap-2 text-xs text-custom-text-200">
-                  <div className="flex items-center gap-2">
-                    <div className="w-16">Creator:</div>
-                    <div className="flex items-center gap-2.5 text-custom-text-200">
-                      {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
-                        <img
-                          src={cycle.owned_by.avatar}
-                          height={16}
-                          width={16}
-                          className="rounded-full"
-                          alt={cycle.owned_by.display_name}
-                        />
-                      ) : (
-                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
-                          {cycle.owned_by.display_name.charAt(0)}
-                        </span>
-                      )}
-                      <span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
-                    </div>
-                  </div>
-                  <div className="flex h-5 items-center gap-2">
-                    <div className="w-16">Members:</div>
-                    {cycle.assignees.length > 0 ? (
-                      <div className="flex items-center gap-1 text-custom-text-200">
-                        <AssigneesList users={cycle.assignees} length={4} />
-                      </div>
-                    ) : (
-                      "No members"
-                    )}
-                  </div>
-                </div>
-
-                <div className="flex items-center">
-                  {!isCompleted && (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleEditCycle();
-                      }}
-                      className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </button>
-                  )}
-
-                  <CustomMenu width="auto" verticalEllipsis>
-                    {!isCompleted && (
-                      <CustomMenu.MenuItem
-                        onClick={(e) => {
-                          e.preventDefault();
-                          handleDeleteCycle();
-                        }}
-                      >
-                        <span className="flex items-center justify-start gap-2">
-                          <Trash2 className="h-4 w-4" />
-                          <span>Delete cycle</span>
-                        </span>
-                      </CustomMenu.MenuItem>
-                    )}
-                    <CustomMenu.MenuItem
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleCopyText();
-                      }}
-                    >
-                      <span className="flex items-center justify-start gap-2">
-                        <LinkIcon className="h-4 w-4" />
-                        <span>Copy cycle link</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                </div>
-              </div>
-            </div>
-          </a>
-        </Link>
-
-        <div className="flex h-full flex-col rounded-b-[10px]">
-          <Disclosure>
-            {({ open }) => (
-              <div
-                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-200 bg-custom-background-80 text-custom-text-200 ${
-                  open ? "" : "flex-row"
-                }`}
-              >
-                <div className="flex w-full items-center gap-2 px-4 py-1">
-                  <span>Progress</span>
-                  <Tooltip
-                    tooltipContent={
-                      <div className="flex w-56 flex-col">
-                        {Object.keys(groupedIssues).map((group, index) => (
-                          <SingleProgressStats
-                            key={index}
-                            title={
-                              <div className="flex items-center gap-2">
-                                <span
-                                  className="block h-3 w-3 rounded-full "
-                                  style={{
-                                    backgroundColor: stateGroups[index].color,
-                                  }}
-                                />
-                                <span className="text-xs capitalize">{group}</span>
-                              </div>
-                            }
-                            completed={groupedIssues[group]}
-                            total={cycle.total_issues}
-                          />
-                        ))}
-                      </div>
-                    }
-                    position="bottom"
-                  >
-                    <div className="flex w-full items-center">
-                      <LinearProgressIndicator data={progressIndicatorData} noTooltip />
-                    </div>
-                  </Tooltip>
-                  <Disclosure.Button>
-                    <span className="p-1">
-                      <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
-                    </span>
-                  </Disclosure.Button>
-                </div>
-                <Transition show={open}>
-                  <Disclosure.Panel>
-                    <div className="overflow-hidden rounded-b-md bg-custom-background-80 py-3 shadow">
-                      <div className="col-span-2 space-y-3 px-4">
-                        <div className="space-y-3 text-xs">
-                          {stateGroups.map((group) => (
-                            <div key={group.key} className="flex items-center justify-between gap-2">
-                              <div className="flex  items-center gap-2">
-                                <span
-                                  className="block h-2 w-2 rounded-full"
-                                  style={{
-                                    backgroundColor: group.color,
-                                  }}
-                                />
-                                <h6 className="text-xs">{group.title}</h6>
-                              </div>
-                              <div>
-                                <span>
-                                  {cycle[group.key as keyof ICycle] as number}{" "}
-                                  <span className="text-custom-text-200">
-                                    -{" "}
-                                    {cycle.total_issues > 0
-                                      ? `${Math.round(
-                                          ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
-                                        )}%`
-                                      : "0%"}
-                                  </span>
-                                </span>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </Disclosure.Panel>
-                </Transition>
-              </div>
-            )}
-          </Disclosure>
-        </div>
-      </div>
-    </div>
-  );
-};

web/components/cycles/single-cycle-list.tsx

@@ -1,369 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
-// icons
-import {
-  AlarmClock,
-  AlertTriangle,
-  ArrowRight,
-  CalendarDays,
-  LinkIcon,
-  Pencil,
-  Star,
-  Target,
-  Trash2,
-} from "lucide-react";
-// helpers
-import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-// types
-import { ICycle } from "types";
-
-type TSingleStatProps = {
-  cycle: ICycle;
-  handleEditCycle: () => void;
-  handleDeleteCycle: () => void;
-  handleAddToFavorites: () => void;
-  handleRemoveFromFavorites: () => void;
-};
-
-const stateGroups = [
-  {
-    key: "backlog_issues",
-    title: "Backlog",
-    color: "#dee2e6",
-  },
-  {
-    key: "unstarted_issues",
-    title: "Unstarted",
-    color: "#26b5ce",
-  },
-  {
-    key: "started_issues",
-    title: "Started",
-    color: "#f7ae59",
-  },
-  {
-    key: "cancelled_issues",
-    title: "Cancelled",
-    color: "#d687ff",
-  },
-  {
-    key: "completed_issues",
-    title: "Completed",
-    color: "#09a953",
-  },
-];
-
-type progress = {
-  progress: number;
-};
-
-function RadialProgressBar({ progress }: progress) {
-  const [circumference, setCircumference] = useState(0);
-
-  useEffect(() => {
-    const radius = 40;
-    const circumference = 2 * Math.PI * radius;
-    setCircumference(circumference);
-  }, []);
-
-  const progressOffset = ((100 - progress) / 100) * circumference;
-
-  return (
-    <div className="relative h-4 w-4">
-      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
-        <circle
-          className={"stroke-current opacity-10"}
-          cx="50"
-          cy="50"
-          r="40"
-          strokeWidth="12"
-          fill="none"
-          strokeDasharray={`${circumference} ${circumference}`}
-        />
-        <circle
-          className={`stroke-current`}
-          cx="50"
-          cy="50"
-          r="40"
-          strokeWidth="12"
-          fill="none"
-          strokeDasharray={`${circumference} ${circumference}`}
-          strokeDashoffset={progressOffset}
-          transform="rotate(-90 50 50)"
-        />
-      </svg>
-    </div>
-  );
-}
-
-export const SingleCycleList: React.FC<TSingleStatProps> = ({
-  cycle,
-  handleEditCycle,
-  handleDeleteCycle,
-  handleAddToFavorites,
-  handleRemoveFromFavorites,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-  const isCompleted = cycleStatus === "completed";
-  const endDate = new Date(cycle.end_date ?? "");
-  const startDate = new Date(cycle.start_date ?? "");
-
-  const handleCopyText = () => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
-      });
-    });
-  };
-
-  const progressIndicatorData = stateGroups.map((group, index) => ({
-    id: index,
-    name: group.title,
-    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
-    color: group.color,
-  }));
-
-  const completedIssues = cycle.completed_issues + cycle.cancelled_issues;
-
-  const percentage = cycle.total_issues > 0 ? (completedIssues / cycle.total_issues) * 100 : 0;
-
-  return (
-    <div>
-      <div className="flex flex-col text-xs hover:bg-custom-background-80">
-        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-          <a className="w-full">
-            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
-              <div className="flex items-center justify-between gap-1">
-                <div className="flex items-start gap-2">
-                  <ContrastIcon
-                    className="mt-1 h-5 w-5"
-                    color={`${
-                      cycleStatus === "current"
-                        ? "#09A953"
-                        : cycleStatus === "upcoming"
-                        ? "#F7AE59"
-                        : cycleStatus === "completed"
-                        ? "#3F76FF"
-                        : cycleStatus === "draft"
-                        ? "rgb(var(--color-text-200))"
-                        : ""
-                    }`}
-                  />
-                  <div className="max-w-2xl">
-                    <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
-                      <h3 className="break-words w-full text-base font-semibold">{truncateText(cycle.name, 60)}</h3>
-                    </Tooltip>
-                    <p className="mt-2 text-custom-text-200 break-words w-full">{cycle.description}</p>
-                  </div>
-                </div>
-                <div className="flex-shrink-0 flex items-center gap-4">
-                  <span
-                    className={`rounded-full px-1.5 py-0.5
-                    ${
-                      cycleStatus === "current"
-                        ? "bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                  >
-                    {cycleStatus === "current" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <RunningIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
-                      </span>
-                    ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1">
-                        <AlarmClock className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
-                      </span>
-                    ) : cycleStatus === "completed" ? (
-                      <span className="flex items-center gap-1">
-                        {cycle.total_issues - cycle.completed_issues > 0 && (
-                          <Tooltip
-                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
-                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
-                            }`}
-                          >
-                            <span>
-                              <AlertTriangle className="h-3.5 w-3.5" />
-                            </span>
-                          </Tooltip>
-                        )}{" "}
-                        Completed
-                      </span>
-                    ) : (
-                      cycleStatus
-                    )}
-                  </span>
-
-                  {cycleStatus !== "draft" && (
-                    <div className="flex items-center justify-start gap-2 text-custom-text-200">
-                      <div className="flex items-start gap-1 whitespace-nowrap">
-                        <CalendarDays className="h-4 w-4" />
-                        <span>{renderShortDateWithYearFormat(startDate)}</span>
-                      </div>
-                      <ArrowRight className="h-4 w-4" />
-                      <div className="flex items-start gap-1 whitespace-nowrap">
-                        <Target className="h-4 w-4" />
-                        <span>{renderShortDateWithYearFormat(endDate)}</span>
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="flex items-center gap-2.5 text-custom-text-200">
-                    {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
-                      <img
-                        src={cycle.owned_by.avatar}
-                        height={16}
-                        width={16}
-                        className="rounded-full"
-                        alt={cycle.owned_by.display_name}
-                      />
-                    ) : (
-                      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
-                        {cycle.owned_by.display_name.charAt(0)}
-                      </span>
-                    )}
-                  </div>
-                  <Tooltip
-                    position="top-right"
-                    tooltipContent={
-                      <div className="flex w-80 items-center gap-2 px-4 py-1">
-                        <span>Progress</span>
-                        <LinearProgressIndicator data={progressIndicatorData} />
-                      </div>
-                    }
-                  >
-                    <span
-                      className={`rounded-md px-1.5 py-1
-                    ${
-                      cycleStatus === "current"
-                        ? "border border-green-600 bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "border border-orange-300 bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "border border-blue-500 bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                    >
-                      {cycleStatus === "current" ? (
-                        <span className="flex gap-1 whitespace-nowrap">
-                          {cycle.total_issues > 0 ? (
-                            <>
-                              <RadialProgressBar progress={(cycle.completed_issues / cycle.total_issues) * 100} />
-                              <span>{Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %</span>
-                            </>
-                          ) : (
-                            <span className="normal-case">No issues present</span>
-                          )}
-                        </span>
-                      ) : cycleStatus === "upcoming" ? (
-                        <span className="flex gap-1">
-                          <RadialProgressBar progress={100} /> Yet to start
-                        </span>
-                      ) : cycleStatus === "completed" ? (
-                        <span className="flex gap-1">
-                          <RadialProgressBar progress={100} />
-                          <span>{Math.round(percentage)} %</span>
-                        </span>
-                      ) : (
-                        <span className="flex gap-1">
-                          <RadialProgressBar progress={(cycle.total_issues / cycle.completed_issues) * 100} />
-                          {cycleStatus}
-                        </span>
-                      )}
-                    </span>
-                  </Tooltip>
-                  {cycle.is_favorite ? (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleAddToFavorites();
-                      }}
-                    >
-                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                    </button>
-                  )}
-                  <div className="flex items-center">
-                    <CustomMenu width="auto" verticalEllipsis>
-                      {!isCompleted && (
-                        <CustomMenu.MenuItem
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleEditCycle();
-                          }}
-                        >
-                          <span className="flex items-center justify-start gap-2">
-                            <Pencil className="h-4 w-4" />
-                            <span>Edit Cycle</span>
-                          </span>
-                        </CustomMenu.MenuItem>
-                      )}
-                      {!isCompleted && (
-                        <CustomMenu.MenuItem
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleDeleteCycle();
-                          }}
-                        >
-                          <span className="flex items-center justify-start gap-2">
-                            <Trash2 className="h-4 w-4" />
-                            <span>Delete cycle</span>
-                          </span>
-                        </CustomMenu.MenuItem>
-                      )}
-                      <CustomMenu.MenuItem
-                        onClick={(e) => {
-                          e.preventDefault();
-                          handleCopyText();
-                        }}
-                      >
-                        <span className="flex items-center justify-start gap-2">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy cycle link</span>
-                        </span>
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
-        </Link>
-      </div>
-    </div>
-  );
-};

web/components/integration/github/single-user-select.tsx

@@ -1,12 +1,9 @@
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
 import { WorkspaceService } from "services/workspace.service";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
-import { CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
@@ -52,7 +49,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),

web/components/integration/jira/import-users.tsx

@@ -2,15 +2,14 @@ import { FC } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { useFormContext, useFieldArray, Controller } from "react-hook-form";
-// fetch keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // services
 import { WorkspaceService } from "services/workspace.service";
-// components
+// ui
-import { Avatar } from "components/ui";
+import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
-import { CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
 // types
 import { IJiraImporterForm } from "types";
+// fetch keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 const workspaceService = new WorkspaceService();
 
@@ -39,7 +38,7 @@ export const JiraImportUsers: FC = () => {
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),

web/components/issues/issue-layouts/filters/applied-filters/members.tsx

@@ -1,9 +1,7 @@
 import { observer } from "mobx-react-lite";
-
-// ui
-import { Avatar } from "components/ui";
-// icons
 import { X } from "lucide-react";
+// ui
+import { Avatar } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
@@ -25,7 +23,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
 
         return (
           <div key={memberId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
-            <Avatar user={memberDetails} height="16px" width="16px" />
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
             <span className="normal-case">{memberDetails.display_name}</span>
             <button
               type="button"

web/components/issues/issue-layouts/filters/header/filters/assignee.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from "react";
-
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, Loader } from "@plane/ui";
-import { Loader } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
@@ -45,7 +43,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
                     key={`assignees-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar user={member} height="18px" width="18px" />}
+                    icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
                     title={member.display_name}
                   />
                 ))}

web/components/issues/issue-layouts/filters/header/filters/created-by.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from "react";
-
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, Loader } from "@plane/ui";
-import { Loader } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
@@ -45,7 +43,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
                     key={`created-by-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar user={member} height="18px" width="18px" />}
+                    icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />}
                     title={member.display_name}
                   />
                 ))}

web/components/issues/issue-layouts/kanban/headers/assignee.tsx

@@ -3,7 +3,8 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
-import { Avatar } from "components/ui";
+// ui
+import { Avatar } from "@plane/ui";
 
 export interface IAssigneesHeader {
   column_id: string;
@@ -16,7 +17,7 @@ export interface IAssigneesHeader {
   handleKanBanToggle: any;
 }
 
-export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
+export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
 
 export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
   const {

web/components/issues/issue-layouts/kanban/properties.tsx

@@ -114,17 +114,6 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
         />
       )}
 
-      {/* assignee */}
-      {displayProperties && displayProperties?.assignee && (
-        <IssuePropertyAssignee
-          projectId={issue?.project_detail?.id || null}
-          value={issue?.assignees || null}
-          hideDropdownArrow
-          onChange={handleAssignee}
-          disabled={false}
-        />
-      )}
-
       {/* start date */}
       {displayProperties && displayProperties?.start_date && (
         <IssuePropertyDate
@@ -186,6 +175,18 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           </div>
         </Tooltip>
       )}
+
+      {/* assignee */}
+      {displayProperties && displayProperties?.assignee && (
+        <IssuePropertyAssignee
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.assignees || null}
+          hideDropdownArrow
+          onChange={handleAssignee}
+          disabled={false}
+          multiple
+        />
+      )}
     </div>
   );
 });

web/components/issues/issue-layouts/list/default.tsx

@@ -39,7 +39,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
         list.length > 0 &&
         list.map((_list: any) => (
           <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
-            <div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3">
+            <div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3 bg-custom-background-90">
               <ListGroupByHeaderRoot
                 column_id={getValueFromObject(_list, listKey) as string}
                 column_value={_list}
@@ -193,7 +193,7 @@ export const List: React.FC<IList> = observer((props) => {
           issues={issues}
           group_by={group_by}
           list={members}
-          listKey={`member.id`}
+          listKey={`id`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           display_properties={display_properties}
@@ -206,7 +206,7 @@ export const List: React.FC<IList> = observer((props) => {
           issues={issues}
           group_by={group_by}
           list={members}
-          listKey={`member.id`}
+          listKey={`id`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           display_properties={display_properties}

web/components/issues/issue-layouts/list/headers/assignee.tsx

@@ -2,7 +2,8 @@ import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
-import { Avatar } from "components/ui";
+// ui
+import { Avatar } from "@plane/ui";
 
 export interface IAssigneesHeader {
   column_id: string;
@@ -10,7 +11,7 @@ export interface IAssigneesHeader {
   issues_count: number;
 }
 
-export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
+export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
 
 export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
   const { column_id, column_value, issues_count } = props;
@@ -20,11 +21,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
   return (
     <>
       {assignee && (
-        <HeaderGroupByCard
+        <HeaderGroupByCard icon={<Icon user={assignee} />} title={assignee?.display_name || ""} count={issues_count} />
-          icon={<Icon user={assignee?.member} />}
-          title={assignee?.member?.display_name || ""}
-          count={issues_count}
-        />
       )}
     </>
   );

web/components/issues/issue-layouts/list/headers/created-by.tsx

@@ -19,8 +19,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
     <>
       {createdBy && (
         <HeaderGroupByCard
-          icon={<Icon user={createdBy?.member} />}
+          icon={<Icon user={createdBy} />}
-          title={createdBy?.member?.display_name || ""}
+          title={createdBy?.display_name || ""}
           count={issues_count}
         />
       )}

web/components/issues/issue-layouts/list/properties.tsx

@@ -94,6 +94,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
           hideDropdownArrow
           onChange={handleAssignee}
           disabled={false}
+          multiple
         />
       )}
 

web/components/issues/issue-layouts/properties/assignee.tsx

@@ -1,16 +1,13 @@
 import { Fragment, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
-
 import { usePopper } from "react-popper";
-// ui
-import { AssigneesList, Avatar } from "components/ui";
 import { Combobox } from "@headlessui/react";
-import { Tooltip } from "@plane/ui";
 import { Check, ChevronDown, Search, User2 } from "lucide-react";
+// ui
+import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
 // types
 import { Placement } from "@popperjs/core";
-import { RootStore } from "store/root";
 
 export interface IIssuePropertyAssignee {
   view?: "profile" | "workspace" | "project";
@@ -41,7 +38,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
     multiple = false,
   } = props;
 
-  const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
+  const { workspace: workspaceStore, project: projectStore } = useMobxStore();
   const workspaceSlug = workspaceStore?.workspaceSlug;
 
   const [query, setQuery] = useState("");
@@ -49,17 +46,17 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const projectMembers = projectId && projectStore?.members?.[projectId];
+  const projectMembers = projectId ? projectStore?.members?.[projectId] : undefined;
 
   const fetchProjectMembers = () =>
     workspaceSlug && projectId && projectStore.fetchProjectMembers(workspaceSlug, projectId);
 
-  const options = (projectMembers ? projectMembers : [])?.map((member) => ({
+  const options = (projectMembers ?? [])?.map((member) => ({
     value: member.member.id,
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member.member.display_name} src={member.member.avatar} showTooltip={false} />
         {member.member.display_name}
       </div>
     ),
@@ -83,7 +80,15 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
     >
       <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
         {value && value.length > 0 && Array.isArray(value) ? (
-          <AssigneesList userIds={value} length={3} showLength={true} />
+          <AvatarGroup showTooltip={false}>
+            {value.map((assigneeId) => {
+              const member = projectMembers?.find((m) => m.member.id === assigneeId)?.member;
+
+              if (!member) return null;
+
+              return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+            })}
+          </AvatarGroup>
         ) : (
           <span
             className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -33,8 +33,6 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
 
   const issueCount = issueStore.getIssuesCount;
 
-  console.log("issueCount", issueCount);
-
   return (
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <ProjectAppliedFiltersRoot />

web/components/issues/select/assignee.tsx

@@ -1,12 +1,9 @@
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
-import { CustomSearchSelect } from "@plane/ui";
 import { User2 } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -35,7 +32,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
         {member.member.is_bot ? member.member.first_name : member.member.display_name}
       </div>
     ),
@@ -50,7 +47,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
         <div className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="-my-0.5 flex items-center justify-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength />
+              <AvatarGroup showTooltip={false}>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">

web/components/issues/sidebar-select/assignee.tsx

@@ -1,14 +1,10 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
 import { ProjectService } from "services/project";
 // ui
-import { CustomSearchSelect } from "@plane/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
-import { AssigneesList, Avatar } from "components/ui/avatar";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -37,7 +33,7 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -50,7 +46,15 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
         <>
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="-my-0.5 flex items-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
+              <AvatarGroup>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
               <span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
             </div>
           ) : (

web/components/modules/module-card-item.tsx

@@ -9,8 +9,7 @@ import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList } from "components/ui";
+import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
-import { CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
 // icons
 import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // helpers
@@ -164,7 +163,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               {module.members_detail.length > 0 && (
                 <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
                   <div className="flex items-center gap-1 cursor-default">
-                    <AssigneesList users={module.members_detail} length={3} />
+                    <AvatarGroup showTooltip={false}>
+                      {module.members_detail.map((member) => (
+                        <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                      ))}
+                    </AvatarGroup>
                   </div>
                 </Tooltip>
               )}

web/components/modules/module-list-item.tsx

@@ -9,8 +9,7 @@ import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList } from "components/ui";
+import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
-import { CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
 // helpers
@@ -174,7 +173,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
               <div className="flex items-center justify-center gap-1 cursor-default w-16">
                 {module.members_detail.length > 0 ? (
-                  <AssigneesList users={module.members_detail} length={2} />
+                  <AvatarGroup showTooltip={false}>
+                    {module.members_detail.map((member) => (
+                      <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                    ))}
+                  </AvatarGroup>
                 ) : (
                   <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
                     <User2 className="h-4 w-4 text-custom-text-400" />

web/components/modules/select/lead.tsx

@@ -4,8 +4,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, CustomSearchSelect } from "@plane/ui";
-import { CustomSearchSelect } from "@plane/ui";
 // icons
 import { UserCircle } from "lucide-react";
 // fetch-keys
@@ -34,7 +33,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -48,7 +47,11 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       value={value}
       label={
         <div className="flex items-center gap-2">
-          {selectedOption ? <Avatar user={selectedOption} /> : <UserCircle className="h-4 w-4 text-custom-text-200" />}
+          {selectedOption ? (
+            <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
+          ) : (
+            <UserCircle className="h-4 w-4 text-custom-text-200" />
+          )}
           {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
         </div>
       }

web/components/modules/select/members.tsx

@@ -4,9 +4,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
-// icons
-import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -32,7 +30,7 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -45,7 +43,15 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
         <div className="flex items-center gap-2 text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
+              <AvatarGroup>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
               <span className="text-custom-text-200">{value.length} Assignees</span>
             </div>
           ) : (

web/components/modules/sidebar-select/select-lead.tsx

@@ -4,8 +4,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, CustomSearchSelect } from "@plane/ui";
-import { CustomSearchSelect } from "@plane/ui";
 // icons
 import { ChevronDown, UserCircle2 } from "lucide-react";
 // fetch-keys
@@ -36,7 +35,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} height="18px" width="18px" />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -58,7 +57,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
           customButton={
             selectedOption ? (
               <div className="flex items-center justify-start gap-2 p-0.5 w-full">
-                <Avatar user={selectedOption} />
+                <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
                 <span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
               </div>
             ) : (

web/components/modules/sidebar-select/select-members.tsx

@@ -1,14 +1,10 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
-import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // fetch-keys
@@ -38,7 +34,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} height="18px" width="18px" />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
         {member.member.display_name}
       </div>
     ),
@@ -57,8 +53,16 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
           customButtonClassName="rounded-sm"
           customButton={
             value && value.length > 0 && Array.isArray(value) ? (
-              <div className="flex items-center gap-2 p-0.5 w-full">
+              <div className="px-1">
-                <AssigneesList userIds={value} length={2} />
+                <AvatarGroup showTooltip={false}>
+                  {value.map((assigneeId) => {
+                    const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                    if (!member) return null;
+
+                    return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                  })}
+                </AvatarGroup>
               </div>
             ) : (
               <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">

web/components/project/card.tsx

@@ -8,16 +8,15 @@ import { RootStore } from "store/root";
 import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+// components
+import { DeleteProjectModal, JoinProjectModal } from "components/project";
 // ui
-import { Button, Tooltip } from "@plane/ui";
+import { Avatar, AvatarGroup, Button, Tooltip } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
 import type { IProject } from "types";
-// components
-import { DeleteProjectModal, JoinProjectModal } from "components/project";
-import { AssigneesList } from "components/ui";
 
 export type ProjectCardProps = {
   project: IProject;
@@ -177,7 +176,17 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
                 >
                   {projectMembersIds.length > 0 ? (
                     <div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
-                      <AssigneesList userIds={projectMembersIds} length={3} showLength />
+                      <AvatarGroup showTooltip={false}>
+                        {projectMembersIds.map((memberId) => {
+                          const member = project.members?.find((m) => m.id === memberId);
+
+                          if (!member) return null;
+
+                          return (
+                            <Avatar key={member.id} name={member.member__display_name} src={member.member__avatar} />
+                          );
+                        })}
+                      </AvatarGroup>
                     </div>
                   ) : (
                     <span className="text-sm italic text-custom-text-400">No Member Yet</span>

web/components/project/member-select.tsx

@@ -1,15 +1,12 @@
 import React from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
-
-// store
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Ban } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, CustomSearchSelect } from "@plane/ui";
-import { CustomSearchSelect } from "@plane/ui";
-// icon
-import { Ban } from "lucide-react";
 
 type Props = {
   value: any;
@@ -41,7 +38,7 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -54,7 +51,7 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
       value={value}
       label={
         <div className="flex items-center gap-2">
-          {selectedOption && <Avatar user={selectedOption} />}
+          {selectedOption && <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />}
           {selectedOption ? (
             selectedOption?.display_name
           ) : (

web/components/project/members-select.tsx

@@ -4,7 +4,9 @@ import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search, User2 } from "lucide-react";
 // components
-import { AssigneesList, Avatar, Tooltip } from "components/ui";
+import { Tooltip } from "components/ui";
+// ui
+import { Avatar, AvatarGroup } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
@@ -63,7 +65,7 @@ export const MembersSelect: React.FC<Props> = ({
     query: member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member} />
+        <Avatar name={member.display_name} src={member.avatar} />
         {member.display_name}
       </div>
     ),
@@ -87,7 +89,15 @@ export const MembersSelect: React.FC<Props> = ({
     >
       <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
         {value && value.length > 0 && Array.isArray(value) ? (
-          <AssigneesList userIds={value} length={3} showLength />
+          <AvatarGroup showTooltip={false}>
+            {value.map((assigneeId) => {
+              const member = members?.find((m) => m.id === assigneeId);
+
+              if (!member) return null;
+
+              return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+            })}
+          </AvatarGroup>
         ) : (
           <span
             className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
@@ -143,7 +153,7 @@ export const MembersSelect: React.FC<Props> = ({
                     value={option.value}
                     className={({ active, selected }) =>
                       `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
+                        active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
                   >

web/components/project/send-project-invitation-modal.tsx

@@ -3,11 +3,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { useForm, Controller, useFieldArray } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
-// ui
-import { Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
-import { Avatar } from "components/ui";
-//icons
 import { ChevronDown, Plus, X } from "lucide-react";
+// ui
+import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
 // services
 import { ProjectService } from "services/project";
 import { WorkspaceService } from "services/workspace.service";
@@ -139,7 +137,7 @@ export const SendProjectInvitationModal: React.FC<Props> = (props) => {
     query: person.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={person.member} />
+        <Avatar name={person.member?.display_name} src={person.member?.avatar} />
         {person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
       </div>
     ),
@@ -189,29 +187,33 @@ export const SendProjectInvitationModal: React.FC<Props> = (props) => {
                               control={control}
                               name={`members.${index}.member_id`}
                               rules={{ required: "Please select a member" }}
-                              render={({ field: { value, onChange } }) => (
+                              render={({ field: { value, onChange } }) => {
-                                <CustomSearchSelect
+                                const selectedMember = people?.find((p) => p.member.id === value)?.member;
-                                  value={value}
+
-                                  customButton={
+                                return (
-                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
+                                  <CustomSearchSelect
-                                      {value && value !== "" ? (
+                                    value={value}
-                                        <div className="flex items-center gap-2">
+                                    customButton={
-                                          <Avatar user={people?.find((p) => p.member.id === value)?.member} />
+                                      <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
-                                          {people?.find((p) => p.member.id === value)?.member.display_name}
+                                        {value && value !== "" ? (
-                                        </div>
+                                          <div className="flex items-center gap-2">
-                                      ) : (
+                                            <Avatar name={selectedMember?.display_name} src={selectedMember?.avatar} />
-                                        <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
+                                            {selectedMember?.display_name}
-                                      )}
+                                          </div>
-                                      <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                                        ) : (
-                                    </button>
+                                          <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
-                                  }
+                                        )}
-                                  onChange={(val: string) => {
+                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
-                                    onChange(val);
+                                      </button>
-                                  }}
+                                    }
-                                  options={options}
+                                    onChange={(val: string) => {
-                                  width="w-full min-w-[12rem]"
+                                      onChange(val);
-                                />
+                                    }}
-                              )}
+                                    options={options}
+                                    width="w-full min-w-[12rem]"
+                                  />
+                                );
+                              }}
                             />
                             {errors.members && errors.members[index]?.member_id && (
                               <span className="text-sm px-1 text-red-500">

web/components/ui/avatar.tsx

@@ -1,148 +0,0 @@
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-// services
-import { WorkspaceService } from "services/workspace.service";
-// icons
-import User from "public/user.png";
-import { Plus } from "lucide-react";
-// types
-import { IUser, IUserLite } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type AvatarProps = {
-  user?: Partial<IUser> | Partial<IUserLite> | null;
-  index?: number;
-  height?: string;
-  width?: string;
-  fontSize?: string;
-  showName?: boolean;
-};
-
-// services
-const workspaceService = new WorkspaceService();
-
-export const Avatar: React.FC<AvatarProps> = ({
-  user,
-  index,
-  height = "24px",
-  width = "24px",
-  fontSize = "12px",
-  showName,
-}) => (
-  <div
-    className={`relative rounded border-[0.5px] ${
-      index && index !== 0 ? "-ml-3.5 border-custom-border-200" : "border-transparent"
-    }`}
-    style={{
-      height: height,
-      width: width,
-    }}
-  >
-    {user && user.avatar && user.avatar !== "" ? (
-      <div
-        className={`rounded border-[0.5px] ${
-          index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent"
-        }`}
-        style={{
-          height: height,
-          width: width,
-        }}
-      >
-        <img
-          src={user.avatar}
-          className="absolute top-0 left-0 h-full w-full object-cover rounded"
-          alt={user.display_name}
-        />
-      </div>
-    ) : (
-      <div
-        className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700  border-[0.5px] border-custom-border-200"
-        style={{
-          height: height,
-          width: width,
-          fontSize: fontSize,
-        }}
-      >
-        {user?.display_name?.charAt(0)}
-      </div>
-    )}
-    {showName && <span>{user?.display_name ? user?.display_name : user?.first_name}</span>}
-  </div>
-);
-
-type AsigneesListProps = {
-  users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
-  userIds?: string[];
-  height?: string;
-  width?: string;
-  length?: number;
-  showLength?: boolean;
-};
-
-export const AssigneesList: React.FC<AsigneesListProps> = ({
-  users,
-  userIds,
-  height = "24px",
-  width = "24px",
-  length = 3,
-  showLength = true,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug as string) : null
-  );
-
-  if ((users && users.length === 0) || (userIds && userIds.length === 0))
-    return (
-      <div className="h-5 w-5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-80">
-        <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
-      </div>
-    );
-
-  return (
-    <>
-      {users && (
-        <>
-          {users.slice(0, length).map((user, index) => (
-            <Avatar key={user?.id} user={user} index={index} height={height} width={width} />
-          ))}
-          {users.length > length ? (
-            <div className="-ml-3.5 relative h-6 w-6 rounded">
-              <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                <Plus className="h-3 w-3 -mr-0.5" />
-                {users.length - length}
-              </div>
-            </div>
-          ) : null}
-        </>
-      )}
-      {userIds && (
-        <>
-          {userIds.slice(0, length).map((userId, index) => {
-            const user = people?.find((p) => p.member.id === userId)?.member;
-
-            return <Avatar key={userId} user={user} index={index} height={height} width={width} />;
-          })}
-          {showLength ? (
-            userIds.length > length ? (
-              <div className="-ml-3.5 relative h-6 w-6 rounded">
-                <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                  <Plus className="h-3 w-3 -mr-0.5" />
-                  {userIds.length - length}
-                </div>
-              </div>
-            ) : null
-          ) : (
-            ""
-          )}
-        </>
-      )}
-    </>
-  );
-};

web/components/ui/index.ts

@@ -3,7 +3,6 @@ export * from "./dropdowns";
 export * from "./graphs";
 export * from "./input";
 export * from "./text-area";
-export * from "./avatar";
 export * from "./date";
 export * from "./datepicker";
 export * from "./empty-space";

web/components/views/index.ts

@@ -1,7 +1,6 @@
 export * from "./delete-view-modal";
 export * from "./form";
 export * from "./modal";
-export * from "./select-filters";
 export * from "./view-list-item";
 export * from "./views-list";
 export * from "./workspace-dashboard";

web/components/views/select-filters.tsx

@@ -1,258 +0,0 @@
-import { useState } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// services
-import { ProjectStateService, ProjectService } from "services/project";
-import { IssueLabelService } from "services/issue";
-// ui
-import { Avatar, MultiLevelDropdown } from "components/ui";
-// icons
-import { PriorityIcon, StateGroupIcon } from "@plane/ui";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { IIssueFilterOptions } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
-// constants
-import { PRIORITIES } from "constants/project";
-import { DATE_FILTER_OPTIONS } from "constants/filters";
-
-type Props = {
-  filters: Partial<IIssueFilterOptions>;
-  onSelect: (option: any) => void;
-  direction?: "left" | "right";
-  height?: "sm" | "md" | "rg" | "lg";
-};
-
-const projectService = new ProjectService();
-const projectStateService = new ProjectStateService();
-const issueLabelService = new IssueLabelService();
-
-export const SelectFilters: React.FC<Props> = ({ filters, onSelect, direction = "right", height = "md" }) => {
-  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
-  const [dateFilterType, setDateFilterType] = useState<{
-    title: string;
-    type: "start_date" | "target_date";
-  }>({
-    title: "",
-    type: "start_date",
-  });
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const statesList = getStatesList(states);
-
-  const { data: members } = useSWR(
-    projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: issueLabels } = useSWR(
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId.toString())
-      : null
-  );
-
-  const projectFilterOption = [
-    {
-      id: "priority",
-      label: "Priority",
-      value: PRIORITIES,
-      hasChildren: true,
-      children: PRIORITIES.map((priority) => ({
-        id: priority === null ? "null" : priority,
-        label: (
-          <div className="flex items-center gap-2 capitalize">
-            <PriorityIcon priority={priority} />
-            {priority ?? "None"}
-          </div>
-        ),
-        value: {
-          key: "priority",
-          value: priority === null ? "null" : priority,
-        },
-        selected: filters?.priority?.includes(priority === null ? "null" : priority),
-      })),
-    },
-    {
-      id: "state",
-      label: "State",
-      value: statesList,
-      hasChildren: true,
-      children: statesList?.map((state) => ({
-        id: state.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <StateGroupIcon stateGroup={state.group} color={state.color} />
-            {state.name}
-          </div>
-        ),
-        value: {
-          key: "state",
-          value: state.id,
-        },
-        selected: filters?.state?.includes(state.id),
-      })),
-    },
-    {
-      id: "assignees",
-      label: "Assignees",
-      value: members,
-      hasChildren: true,
-      children: members?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "assignees",
-          value: member.member.id,
-        },
-        selected: filters?.assignees?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "created_by",
-      label: "Created by",
-      value: members,
-      hasChildren: true,
-      children: members?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "created_by",
-          value: member.member.id,
-        },
-        selected: filters?.created_by?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "labels",
-      label: "Labels",
-      value: issueLabels,
-      hasChildren: true,
-      children: issueLabels?.map((label) => ({
-        id: label.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <div
-              className="h-2 w-2 rounded-full"
-              style={{
-                backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
-              }}
-            />
-            {label.name}
-          </div>
-        ),
-        value: {
-          key: "labels",
-          value: label.id,
-        },
-        selected: filters?.labels?.includes(label.id),
-      })),
-    },
-    {
-      id: "start_date",
-      label: "Start date",
-      value: DATE_FILTER_OPTIONS,
-      hasChildren: true,
-      children: [
-        ...DATE_FILTER_OPTIONS.map((option) => ({
-          id: option.name,
-          label: option.name,
-          value: {
-            key: "start_date",
-            value: option.value,
-          },
-          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], [option.value]),
-        })),
-        {
-          id: "custom",
-          label: "Custom",
-          value: "custom",
-          element: (
-            <button
-              onClick={() => {
-                setIsDateFilterModalOpen(true);
-                setDateFilterType({
-                  title: "Start date",
-                  type: "start_date",
-                });
-              }}
-              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-            >
-              Custom
-            </button>
-          ),
-        },
-      ],
-    },
-    {
-      id: "target_date",
-      label: "Due date",
-      value: DATE_FILTER_OPTIONS,
-      hasChildren: true,
-      children: [
-        ...DATE_FILTER_OPTIONS.map((option) => ({
-          id: option.name,
-          label: option.name,
-          value: {
-            key: "target_date",
-            value: option.value,
-          },
-          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], [option.value]),
-        })),
-        {
-          id: "custom",
-          label: "Custom",
-          value: "custom",
-          element: (
-            <button
-              onClick={() => {
-                setIsDateFilterModalOpen(true);
-                setDateFilterType({
-                  title: "Due date",
-                  type: "target_date",
-                });
-              }}
-              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-            >
-              Custom
-            </button>
-          ),
-        },
-      ],
-    },
-  ];
-  return (
-    <>
-      <MultiLevelDropdown
-        label="Filters"
-        onSelect={onSelect}
-        direction={direction}
-        height={height}
-        options={projectFilterOption}
-      />
-    </>
-  );
-};

web/components/workspace/member-select.tsx

@@ -2,9 +2,8 @@ import React, { FC, useState, Fragment } from "react";
 // popper js
 import { usePopper } from "react-popper";
 // ui
-import { Input, Tooltip } from "@plane/ui";
+import { Avatar, Input } from "@plane/ui";
 import { Listbox } from "@headlessui/react";
-import { Avatar } from "components/ui";
 // icons
 import { Check, Search, User2 } from "lucide-react";
 // types
@@ -49,32 +48,22 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
       : options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
-    <Tooltip
+    <div
-      tooltipHeading="Assignee"
+      className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
-      tooltipContent={
-        options && options.length > 0
-          ? options.map((assignee) => assignee?.member.display_name).join(", ")
-          : "No Assignee"
-      }
-      position="top"
-    >
-      <div
-        className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
             "
-      >
+    >
-        {value ? (
+      {value ? (
-          <>
+        <>
-            <Avatar height="18px" width="18px" user={value?.member} />
+          <Avatar name={value?.member.display_name} src={value?.member.avatar} />
-            <span className="text-xs leading-4"> {value?.member.display_name}</span>
+          <span className="text-xs leading-4"> {value?.member.display_name}</span>
-          </>
+        </>
-        ) : (
+      ) : (
-          <>
+        <>
-            <User2 className="h-[18px] w-[18px]" />
+          <User2 className="h-[18px] w-[18px]" />
-            <span className="text-xs leading-4">{placeholder}</span>
+          <span className="text-xs leading-4">{placeholder}</span>
-          </>
+        </>
-        )}
+      )}
-      </div>
+    </div>
-    </Tooltip>
   );
 
   return (
@@ -122,7 +111,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
                     {({ selected }) => (
                       <>
                         <div className="flex items-center gap-2">
-                          <Avatar user={workspaceMember.member} />
+                          <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
                           {workspaceMember.member.display_name}
                         </div>
                         {selected && <Check className="h-3.5 w-3.5" />}

web/components/workspace/sidebar-dropdown.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { Menu, Transition } from "@headlessui/react";
 import { useTheme } from "next-themes";
+import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
@@ -12,11 +13,8 @@ import useToast from "hooks/use-toast";
 // services
 import { UserService } from "services/user.service";
 import { AuthService } from "services/auth.service";
-// components
+// ui
-import { Avatar } from "components/ui";
+import { Avatar, Loader } from "@plane/ui";
-import { Loader } from "@plane/ui";
-// icons
-import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
 // types
 import { IWorkspace } from "types";
 
@@ -240,7 +238,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
       {!themeStore.sidebarCollapsed && (
         <Menu as="div" className="relative flex-shrink-0">
           <Menu.Button className="grid place-items-center outline-none">
-            <Avatar user={user} height="28px" width="28px" fontSize="14px" />
+            <Avatar name={user?.display_name} src={user?.avatar} size={32} shape="square" />
           </Menu.Button>
 
           <Transition

web/constants/issue.ts

@@ -394,7 +394,7 @@ export const getValueFromObject = (object: Object, key: string): string | number
   let value: any = object;
   if (!value || keys.length === 0) return null;
 
-  for (const _key of keys) value = value[_key];
+  for (const _key of keys) value = value?.[_key];
   return value;
 };