fix(settings): use one member avatar with profile photos everywhere

Author: waleedlatif1

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

@@ -251,11 +251,11 @@ 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.
 
 
-**Member avatars are deliberately two components, not one.** `member-list.tsx`
-renders a 14px neutral marker for the dense Teammates/Organization roster, where
-the email is the primary content; `components/permissions/member-row.tsx` renders
-a 36px `getUserColor`-hashed avatar for member *management* rows that carry a name,
-an email, and a role control. Same shape, different job — do not merge them.
+**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.
 
 ## Header action order
 

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

@@ -248,11 +248,11 @@ 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.
 
 
-**Member avatars are deliberately two components, not one.** `member-list.tsx`
-renders a 14px neutral marker for the dense Teammates/Organization roster, where
-the email is the primary content; `components/permissions/member-row.tsx` renders
-a 36px `getUserColor`-hashed avatar for member *management* rows that carry a name,
-an email, and a role control. Same shape, different job — do not merge them.
+**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.
 
 ## Header action order
 

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-members-section.tsx

@@ -67,7 +67,7 @@ export function CredentialMembersSection({ credentialId, isAdmin }: CredentialMe
             return (
               <MemberRow
                 key={member.id}
-                member={member}
+                member={{ ...member, userImage: member.userImage ?? null }}
                 roleOptions={MEMBER_ROLE_OPTIONS}
                 lockReason={lockReason}
                 canManage={isAdmin}

apps/sim/app/workspace/[workspaceId]/components/index.ts

@@ -15,8 +15,7 @@ export { MessageActions } from './message-actions'
 export type { BulkOutcome } from './resource/bulk-outcome'
 export { reportBulkOutcome } from './resource/bulk-outcome'
 export { FloatingOverflowText } from './resource/components/floating-overflow-text'
-export type { OwnerAvatarProps } from './resource/components/owner-cell'
-export { OwnerAvatar, ownerCell } from './resource/components/owner-cell'
+export { ownerCell } from './resource/components/owner-cell'
 export {
   type ChromeActionSpec,
   ResourceChromeFallback,

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

@@ -1,2 +1 @@
-export type { OwnerAvatarProps } from './owner-cell'
-export { OwnerAvatar, ownerCell } from './owner-cell'
+export { ownerCell } from './owner-cell'

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

@@ -1,36 +1,7 @@
-import { memo } from 'react'
+import { MemberAvatar } from '@/components/member-avatar/member-avatar'
 import type { ResourceCell } from '@/app/workspace/[workspaceId]/components/resource/resource'
 import type { WorkspaceMember } from '@/hooks/queries/workspace'
 
-export interface OwnerAvatarProps {
-  name: string
-  image: string | null
-}
-
-/**
- * The canonical 14px workspace-member avatar — a photo, or the member's initial on a neutral
- * disc. Shared so a member reads identically in a resource row's owner cell and in the
- * owner/uploaded-by filter options on every list.
- */
-export const OwnerAvatar = memo(function OwnerAvatar({ name, image }: OwnerAvatarProps) {
-  if (image) {
-    return (
-      <img
-        src={image}
-        alt={name}
-        referrerPolicy='no-referrer'
-        className='size-[14px] rounded-full border border-[var(--border)] object-cover'
-      />
-    )
-  }
-
-  return (
-    <span className='flex size-[14px] items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
-      {name.charAt(0).toUpperCase()}
-    </span>
-  )
-})
-
 /**
  * Resolves a user ID into a ResourceCell with an avatar icon and display name.
  * Returns null label while members are still loading to avoid flashing raw IDs.
@@ -51,7 +22,7 @@ export function ownerCell(
   if (!member) return { label: null }
 
   return {
-    icon: <OwnerAvatar name={member.name} image={member.image} />,
+    icon: <MemberAvatar name={member.name} image={member.image} />,
     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 (svg/img/span avatar); auto-sized to the chip icon size. */
+  /** Pre-rendered icon node (a glyph or a `MemberAvatar`); auto-sized to the chip icon size. */
   icon?: ReactNode
   label: string
   content?: ReactNode

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

@@ -25,6 +25,7 @@ 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 {
@@ -79,10 +80,7 @@ import {
   useFolderRowDragDrop,
 } from '@/app/workspace/[workspaceId]/components/folders'
 import { ResourceActionBar } from '@/app/workspace/[workspaceId]/components/resource/components/action-bar'
-import {
-  OwnerAvatar,
-  ownerCell,
-} from '@/app/workspace/[workspaceId]/components/resource/components/owner-cell'
+import { ownerCell } from '@/app/workspace/[workspaceId]/components/resource/components/owner-cell'
 import {
   FilesEmptyState,
   ResourceNoResults,
@@ -1938,7 +1936,7 @@ function FilesContent() {
       (members ?? []).map((m) => ({
         value: m.userId,
         label: m.name,
-        iconElement: <OwnerAvatar name={m.name} image={m.image} />,
+        iconElement: <MemberAvatar name={m.name} image={m.image} />,
       })),
     [members]
   )

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

@@ -8,6 +8,7 @@ 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'
@@ -39,10 +40,7 @@ import {
 } from '@/app/workspace/[workspaceId]/components/folders'
 import { reportBulkOutcome } from '@/app/workspace/[workspaceId]/components/resource/bulk-outcome'
 import { ResourceActionBar } from '@/app/workspace/[workspaceId]/components/resource/components/action-bar'
-import {
-  OwnerAvatar,
-  ownerCell,
-} from '@/app/workspace/[workspaceId]/components/resource/components/owner-cell'
+import { ownerCell } from '@/app/workspace/[workspaceId]/components/resource/components/owner-cell'
 import {
   KnowledgeEmptyState,
   ResourceNoResults,
@@ -1331,7 +1329,7 @@ function KnowledgeContent() {
       (members ?? []).map((m) => ({
         value: m.userId,
         label: m.name,
-        iconElement: <OwnerAvatar name={m.name} image={m.image} />,
+        iconElement: <MemberAvatar name={m.name} image={m.image} />,
       })),
     [members]
   )

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

@@ -1 +1 @@
-export { MemberAvatar, MemberRow, MemberSection } from './member-list'
+export { MemberRow, MemberSection } from './member-list'