improvement(emcn): collapse MemberAvatar into Avatar with name and src props

Author: waleedlatif1

.claude/rules/sim-settings-pages.md

@@ -251,11 +251,12 @@ and — on activatable rows only — the hover band. Never hand-roll any of it,
   `RESOURCE_TILE_FILL` for a glyph, `RESOURCE_TILE_PLAIN` for a brand logo or favicon.
 
 
-**One member avatar.** Every member list, owner cell, and ranking renders
-`MemberAvatar` from `components/member-avatar/member-avatar` — a 14px photo, or the
-initial on the neutral disc. Never hand-roll an avatar or give a person a
-`getUserColor` hash; per-person colors belong to live collaboration (presence,
-cursors), where the color matches that person's cursor.
+**One member avatar.** Every member list, owner cell, and ranking renders emcn
+`<Avatar size='xs' name={…} src={…} aria-hidden />` — a 14px photo, or the initial
+on the neutral disc (`aria-hidden` because the name is always beside it). Never
+hand-roll an avatar or give a person a `getUserColor` hash; per-person colors
+belong to live collaboration (presence, cursors), where the color matches that
+person's cursor.
 
 ## Header action order
 

.claude/skills/add-settings-page/SKILL.md

@@ -55,8 +55,8 @@ For each page component, confirm the checklist in `.claude/rules/sim-settings-pa
    `.claude/rules/sim-settings-pages.md` for the token map and the row
    title/subtitle pairing convention):
    `git grep -nE "text-\[1[0-8]px\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'` — should
-   be 0. Display type above the scale (`text-[40px]` hero headings, the `text-[8px]`
-   member-avatar initial) is deliberate and out of scope.
+   be 0. Display type above the scale (`text-[40px]` hero headings) is deliberate
+   and out of scope.
 4. Confirm each page imports `SettingsPanel` and that its `NavigationItem` has an
    accurate `description` of consistent length with its peers.
    - Editable pages: confirm Save/Discard go through `SaveDiscardActions` and

.cursor/rules/sim-settings-pages.mdc

@@ -248,11 +248,12 @@ and — on activatable rows only — the hover band. Never hand-roll any of it,
   `RESOURCE_TILE_FILL` for a glyph, `RESOURCE_TILE_PLAIN` for a brand logo or favicon.
 
 
-**One member avatar.** Every member list, owner cell, and ranking renders
-`MemberAvatar` from `components/member-avatar/member-avatar` — a 14px photo, or the
-initial on the neutral disc. Never hand-roll an avatar or give a person a
-`getUserColor` hash; per-person colors belong to live collaboration (presence,
-cursors), where the color matches that person's cursor.
+**One member avatar.** Every member list, owner cell, and ranking renders emcn
+`<Avatar size='xs' name={…} src={…} aria-hidden />` — a 14px photo, or the initial
+on the neutral disc (`aria-hidden` because the name is always beside it). Never
+hand-roll an avatar or give a person a `getUserColor` hash; per-person colors
+belong to live collaboration (presence, cursors), where the color matches that
+person's cursor.
 
 ## Header action order
 

apps/sim/app/(landing)/changelog/components/changelog-timeline/changelog-timeline.tsx

@@ -108,7 +108,7 @@ export function ChangelogTimeline({ initialEntries }: ChangelogTimelineProps) {
                         title={`@${contributor}`}
                         className='block size-6 shrink-0'
                       >
-                        <Avatar className='size-6 ring-2 ring-[var(--bg)]'>
+                        <Avatar size='sm' className='ring-2 ring-[var(--bg)]'>
                           <AvatarImage
                             src={`https://avatars.githubusercontent.com/${contributor}`}
                             alt={`@${contributor}`}

apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx

@@ -35,10 +35,7 @@ function UserAvatar({ user, index }: UserAvatarProps) {
           referrerPolicy='no-referrer'
         />
       )}
-      <AvatarFallback
-        style={{ background: color }}
-        className='border-0 font-semibold text-[7px] text-white leading-none'
-      >
+      <AvatarFallback style={{ background: color }} className='border-0 font-semibold text-white'>
         {initials}
       </AvatarFallback>
     </Avatar>
@@ -98,7 +95,7 @@ export function PresenceAvatars({
               style={{ zIndex: 0 }}
               aria-label={`${overflowCount} more ${overflowCount === 1 ? 'user' : 'users'}`}
             >
-              <AvatarFallback className='border-0 bg-gray-700 font-semibold text-[7px] text-white leading-none'>
+              <AvatarFallback className='border-0 bg-gray-700 font-semibold text-[7px] text-white'>
                 +{overflowCount}
               </AvatarFallback>
             </Avatar>

apps/sim/app/workspace/[workspaceId]/components/resource/components/owner-cell/owner-cell.tsx

@@ -1,4 +1,4 @@
-import { MemberAvatar } from '@/components/member-avatar/member-avatar'
+import { Avatar } from '@sim/emcn'
 import type { ResourceCell } from '@/app/workspace/[workspaceId]/components/resource/resource'
 import type { WorkspaceMember } from '@/hooks/queries/workspace'
 
@@ -22,7 +22,7 @@ export function ownerCell(
   if (!member) return { label: null }
 
   return {
-    icon: <MemberAvatar name={member.name} image={member.image} />,
+    icon: <Avatar size='xs' name={member.name} src={member.image} aria-hidden />,
     label: member.name,
   }
 }

apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx

@@ -562,7 +562,7 @@ const Pagination = memo(function Pagination({
 })
 
 interface CellContentProps {
-  /** Pre-rendered icon node (a glyph or a `MemberAvatar`); auto-sized to the chip icon size. */
+  /** Pre-rendered icon node (a glyph or a person's `Avatar`); auto-sized to the chip icon size. */
   icon?: ReactNode
   label: string
   content?: ReactNode

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
+  Avatar,
   Button,
   ChipCombobox,
   ChipConfirmModal,
@@ -25,7 +26,6 @@ import { useParams, useRouter } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
 import { usePostHog } from 'posthog-js/react'
 import { getDocumentIcon } from '@/components/icons/document-icons'
-import { MemberAvatar } from '@/components/member-avatar/member-avatar'
 import { useLimitUpgradeToast } from '@/lib/billing/client'
 import { captureEvent } from '@/lib/posthog/client'
 import {
@@ -1936,7 +1936,7 @@ function FilesContent() {
       (members ?? []).map((m) => ({
         value: m.userId,
         label: m.name,
-        iconElement: <MemberAvatar name={m.name} image={m.image} />,
+        iconElement: <Avatar size='xs' name={m.name} src={m.image} aria-hidden />,
       })),
     [members]
   )

apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx

@@ -2,13 +2,12 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ChipDropdownOption } from '@sim/emcn'
-import { Button, ChipConfirmModal, ChipDropdown, Tooltip, toast } from '@sim/emcn'
+import { Avatar, Button, ChipConfirmModal, ChipDropdown, Tooltip, toast } from '@sim/emcn'
 import { Database, FolderPlus, Pencil, Plus, Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams, useRouter } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
-import { MemberAvatar } from '@/components/member-avatar/member-avatar'
 import { MAX_KNOWLEDGE_BATCH_ITEMS } from '@/lib/knowledge/constants'
 import type { KnowledgeBaseData } from '@/lib/knowledge/types'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
@@ -1329,7 +1328,7 @@ function KnowledgeContent() {
       (members ?? []).map((m) => ({
         value: m.userId,
         label: m.name,
-        iconElement: <MemberAvatar name={m.name} image={m.image} />,
+        iconElement: <Avatar size='xs' name={m.name} src={m.image} aria-hidden />,
       })),
     [members]
   )

apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { OverflowText } from '@sim/emcn'
-import { MemberAvatar } from '@/components/member-avatar/member-avatar'
+import { Avatar, OverflowText } from '@sim/emcn'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
@@ -29,7 +28,7 @@ interface MemberRowProps {
 export function MemberRow({ name, email, image, status, roleControl, menu }: MemberRowProps) {
   return (
     <div className={ROW_CLASSES}>
-      <MemberAvatar name={name} image={image} />
+      <Avatar size='xs' name={name} src={image} aria-hidden />
       <OverflowText label={email} className='flex-1 text-[var(--text-body)] text-sm' />
       <span className={ROW_STATUS_CLASSES}>{status}</span>
       {roleControl}