Skip to content

Commit 7efb137

Browse files
waleedlatif1waleedlatif1
committed
improvement(emcn): collapse MemberAvatar into Avatar with name and src props
1 parent 7800fb3 commit 7efb137

22 files changed

Lines changed: 263 additions & 148 deletions

File tree

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -251,11 +251,12 @@ and — on activatable rows only — the hover band. Never hand-roll any of it,
251251
`RESOURCE_TILE_FILL` for a glyph, `RESOURCE_TILE_PLAIN` for a brand logo or favicon.
252252

253253

254-
**One member avatar.** Every member list, owner cell, and ranking renders
255-
`MemberAvatar` from `components/member-avatar/member-avatar` — a 14px photo, or the
256-
initial on the neutral disc. Never hand-roll an avatar or give a person a
257-
`getUserColor` hash; per-person colors belong to live collaboration (presence,
258-
cursors), where the color matches that person's cursor.
254+
**One member avatar.** Every member list, owner cell, and ranking renders emcn
255+
`<Avatar size='xs' name={…} src={…} aria-hidden />` — a 14px photo, or the initial
256+
on the neutral disc (`aria-hidden` because the name is always beside it). Never
257+
hand-roll an avatar or give a person a `getUserColor` hash; per-person colors
258+
belong to live collaboration (presence, cursors), where the color matches that
259+
person's cursor.
259260

260261
## Header action order
261262

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

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

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -248,11 +248,12 @@ and — on activatable rows only — the hover band. Never hand-roll any of it,
248248
`RESOURCE_TILE_FILL` for a glyph, `RESOURCE_TILE_PLAIN` for a brand logo or favicon.
249249

250250

251-
**One member avatar.** Every member list, owner cell, and ranking renders
252-
`MemberAvatar` from `components/member-avatar/member-avatar` — a 14px photo, or the
253-
initial on the neutral disc. Never hand-roll an avatar or give a person a
254-
`getUserColor` hash; per-person colors belong to live collaboration (presence,
255-
cursors), where the color matches that person's cursor.
251+
**One member avatar.** Every member list, owner cell, and ranking renders emcn
252+
`<Avatar size='xs' name={…} src={…} aria-hidden />` — a 14px photo, or the initial
253+
on the neutral disc (`aria-hidden` because the name is always beside it). Never
254+
hand-roll an avatar or give a person a `getUserColor` hash; per-person colors
255+
belong to live collaboration (presence, cursors), where the color matches that
256+
person's cursor.
256257

257258
## Header action order
258259

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export function ChangelogTimeline({ initialEntries }: ChangelogTimelineProps) {
108108
title={`@${contributor}`}
109109
className='block size-6 shrink-0'
110110
>
111-
<Avatar className='size-6 ring-2 ring-[var(--bg)]'>
111+
<Avatar size='sm' className='ring-2 ring-[var(--bg)]'>
112112
<AvatarImage
113113
src={`https://avatars.githubusercontent.com/${contributor}`}
114114
alt={`@${contributor}`}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,7 @@ function UserAvatar({ user, index }: UserAvatarProps) {
3535
referrerPolicy='no-referrer'
3636
/>
3737
)}
38-
<AvatarFallback
39-
style={{ background: color }}
40-
className='border-0 font-semibold text-[7px] text-white leading-none'
41-
>
38+
<AvatarFallback style={{ background: color }} className='border-0 font-semibold text-white'>
4239
{initials}
4340
</AvatarFallback>
4441
</Avatar>
@@ -98,7 +95,7 @@ export function PresenceAvatars({
9895
style={{ zIndex: 0 }}
9996
aria-label={`${overflowCount} more ${overflowCount === 1 ? 'user' : 'users'}`}
10097
>
101-
<AvatarFallback className='border-0 bg-gray-700 font-semibold text-[7px] text-white leading-none'>
98+
<AvatarFallback className='border-0 bg-gray-700 font-semibold text-[7px] text-white'>
10299
+{overflowCount}
103100
</AvatarFallback>
104101
</Avatar>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MemberAvatar } from '@/components/member-avatar/member-avatar'
1+
import { Avatar } from '@sim/emcn'
22
import type { ResourceCell } from '@/app/workspace/[workspaceId]/components/resource/resource'
33
import type { WorkspaceMember } from '@/hooks/queries/workspace'
44

@@ -22,7 +22,7 @@ export function ownerCell(
2222
if (!member) return { label: null }
2323

2424
return {
25-
icon: <MemberAvatar name={member.name} image={member.image} />,
25+
icon: <Avatar size='xs' name={member.name} src={member.image} aria-hidden />,
2626
label: member.name,
2727
}
2828
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,7 @@ const Pagination = memo(function Pagination({
562562
})
563563

564564
interface CellContentProps {
565-
/** Pre-rendered icon node (a glyph or a `MemberAvatar`); auto-sized to the chip icon size. */
565+
/** Pre-rendered icon node (a glyph or a person's `Avatar`); auto-sized to the chip icon size. */
566566
icon?: ReactNode
567567
label: string
568568
content?: ReactNode

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
44
import {
5+
Avatar,
56
Button,
67
ChipCombobox,
78
ChipConfirmModal,
@@ -25,7 +26,6 @@ import { useParams, useRouter } from 'next/navigation'
2526
import { useQueryStates } from 'nuqs'
2627
import { usePostHog } from 'posthog-js/react'
2728
import { getDocumentIcon } from '@/components/icons/document-icons'
28-
import { MemberAvatar } from '@/components/member-avatar/member-avatar'
2929
import { useLimitUpgradeToast } from '@/lib/billing/client'
3030
import { captureEvent } from '@/lib/posthog/client'
3131
import {
@@ -1936,7 +1936,7 @@ function FilesContent() {
19361936
(members ?? []).map((m) => ({
19371937
value: m.userId,
19381938
label: m.name,
1939-
iconElement: <MemberAvatar name={m.name} image={m.image} />,
1939+
iconElement: <Avatar size='xs' name={m.name} src={m.image} aria-hidden />,
19401940
})),
19411941
[members]
19421942
)

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22

33
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
44
import type { ChipDropdownOption } from '@sim/emcn'
5-
import { Button, ChipConfirmModal, ChipDropdown, Tooltip, toast } from '@sim/emcn'
5+
import { Avatar, Button, ChipConfirmModal, ChipDropdown, Tooltip, toast } from '@sim/emcn'
66
import { Database, FolderPlus, Pencil, Plus, Trash } from '@sim/emcn/icons'
77
import { createLogger } from '@sim/logger'
88
import { getErrorMessage } from '@sim/utils/errors'
99
import { useParams, useRouter } from 'next/navigation'
1010
import { useQueryStates } from 'nuqs'
11-
import { MemberAvatar } from '@/components/member-avatar/member-avatar'
1211
import { MAX_KNOWLEDGE_BATCH_ITEMS } from '@/lib/knowledge/constants'
1312
import type { KnowledgeBaseData } from '@/lib/knowledge/types'
1413
import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
@@ -1329,7 +1328,7 @@ function KnowledgeContent() {
13291328
(members ?? []).map((m) => ({
13301329
value: m.userId,
13311330
label: m.name,
1332-
iconElement: <MemberAvatar name={m.name} image={m.image} />,
1331+
iconElement: <Avatar size='xs' name={m.name} src={m.image} aria-hidden />,
13331332
})),
13341333
[members]
13351334
)

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
'use client'
22

33
import type { ReactNode } from 'react'
4-
import { OverflowText } from '@sim/emcn'
5-
import { MemberAvatar } from '@/components/member-avatar/member-avatar'
4+
import { Avatar, OverflowText } from '@sim/emcn'
65
import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
76
import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
87

@@ -29,7 +28,7 @@ interface MemberRowProps {
2928
export function MemberRow({ name, email, image, status, roleControl, menu }: MemberRowProps) {
3029
return (
3130
<div className={ROW_CLASSES}>
32-
<MemberAvatar name={name} image={image} />
31+
<Avatar size='xs' name={name} src={image} aria-hidden />
3332
<OverflowText label={email} className='flex-1 text-[var(--text-body)] text-sm' />
3433
<span className={ROW_STATUS_CLASSES}>{status}</span>
3534
{roleControl}

0 commit comments

Comments
 (0)