improvement(ui): reuse avatars for owners and members

Author: Bill Leoutsakos

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

@@ -1,4 +1,5 @@
 import { memo } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@sim/emcn'
 import type { ResourceCell } from '@/app/workspace/[workspaceId]/components/resource/resource'
 import type { WorkspaceMember } from '@/hooks/queries/workspace'
 
@@ -13,21 +14,11 @@ export interface OwnerAvatarProps {
  * 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>
+    <Avatar size='xs'>
+      {image && <AvatarImage src={image} alt={name} referrerPolicy='no-referrer' />}
+      <AvatarFallback>{name.charAt(0).toUpperCase()}</AvatarFallback>
+    </Avatar>
   )
 })
 

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

@@ -1,7 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { OverflowText } from '@sim/emcn'
+import { Avatar, AvatarFallback, AvatarImage, 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'
 
@@ -18,21 +18,11 @@ interface MemberAvatarProps {
  * the member's name when no image is available.
  */
 export function MemberAvatar({ name, image }: MemberAvatarProps) {
-  if (image) {
-    return (
-      <img
-        src={image}
-        alt={name}
-        referrerPolicy='no-referrer'
-        className='size-[14px] shrink-0 rounded-full border border-[var(--border)] object-cover'
-      />
-    )
-  }
-
   return (
-    <span className='flex size-[14px] shrink-0 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>
+    <Avatar size='xs'>
+      {image && <AvatarImage src={image} alt={name} referrerPolicy='no-referrer' />}
+      <AvatarFallback>{name.charAt(0).toUpperCase()}</AvatarFallback>
+    </Avatar>
   )
 }
 

packages/emcn/src/components/avatar/avatar.tsx

@@ -50,6 +50,8 @@ const avatarStatusVariants = cva(
   }
 )
 
+const AvatarSizeContext = React.createContext<VariantProps<typeof avatarVariants>['size']>('md')
+
 type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'
 
 interface AvatarProps
@@ -93,22 +95,24 @@ interface AvatarProps
  */
 const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
   ({ className, size, status, children, ...props }, ref) => (
-    <div className='relative inline-flex'>
-      <AvatarPrimitive.Root
-        ref={ref}
-        className={cn(avatarVariants({ size }), className)}
-        {...props}
-      >
-        {children}
-      </AvatarPrimitive.Root>
-      {status && (
-        <span
-          data-slot='avatar-status'
-          className={cn(avatarStatusVariants({ status, size }))}
-          aria-label={`Status: ${status}`}
-        />
-      )}
-    </div>
+    <AvatarSizeContext.Provider value={size ?? 'md'}>
+      <div className='relative inline-flex'>
+        <AvatarPrimitive.Root
+          ref={ref}
+          className={cn(avatarVariants({ size }), className)}
+          {...props}
+        >
+          {children}
+        </AvatarPrimitive.Root>
+        {status && (
+          <span
+            data-slot='avatar-status'
+            className={cn(avatarStatusVariants({ status, size }))}
+            aria-label={`Status: ${status}`}
+          />
+        )}
+      </div>
+    </AvatarSizeContext.Provider>
   )
 )
 Avatar.displayName = 'Avatar'
@@ -133,6 +137,7 @@ AvatarImage.displayName = 'AvatarImage'
 
 /**
  * Fallback component for Avatar. Displays initials or icon when image is unavailable.
+ * The xs size uses 8px initials; other sizes retain text-xs.
  *
  * Carries the package's only hardcoded `font-medium`, and deliberately: one or
  * two capitals at `text-xs` on a filled disc are a glyph, not running text, and
@@ -142,16 +147,20 @@ AvatarImage.displayName = 'AvatarImage'
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full border border-[var(--border-1)] bg-[var(--surface-4)] font-medium text-[var(--text-secondary)] text-xs',
-      className
-    )}
-    {...props}
-  />
-))
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(AvatarSizeContext)
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full border border-[var(--border-1)] bg-[var(--surface-4)] font-medium text-[var(--text-secondary)] text-xs',
+        size === 'xs' && 'text-[8px]',
+        className
+      )}
+      {...props}
+    />
+  )
+})
 AvatarFallback.displayName = 'AvatarFallback'
 
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, avatarStatusVariants }