diff --git a/apps/mobile/src/features/identity/IdentityAvatar.tsx b/apps/mobile/src/features/identity/IdentityAvatar.tsx index 3e3ab28d65d..d640c03a80f 100644 --- a/apps/mobile/src/features/identity/IdentityAvatar.tsx +++ b/apps/mobile/src/features/identity/IdentityAvatar.tsx @@ -13,6 +13,7 @@ export function IdentityAvatar(props: { readonly name?: string | null | undefined; readonly size?: "micro" | "sm" | "md"; readonly className?: string; + readonly highlighted?: boolean; }) { const model = identityAvatar({ personId: props.personId, @@ -26,10 +27,18 @@ export function IdentityAvatar(props: { return ( - + {model.initials} diff --git a/apps/mobile/src/features/identity/ParticipantStack.tsx b/apps/mobile/src/features/identity/ParticipantStack.tsx index eda60df41f6..b53956727cb 100644 --- a/apps/mobile/src/features/identity/ParticipantStack.tsx +++ b/apps/mobile/src/features/identity/ParticipantStack.tsx @@ -53,28 +53,29 @@ export function ParticipantStack(props: { username={lead.username} name={lead.name} size="micro" + highlighted={lead.personId === claimPersonId} /> {extras.length > 0 ? ( - + +{extras.length} ) : null} - {youParticipated ? ( - - - - ) : null} ); } diff --git a/apps/mobile/src/features/identity/participantStackSurface.test.ts b/apps/mobile/src/features/identity/participantStackSurface.test.ts index ef64d87a877..4cdcb3cab7b 100644 --- a/apps/mobile/src/features/identity/participantStackSurface.test.ts +++ b/apps/mobile/src/features/identity/participantStackSurface.test.ts @@ -13,7 +13,13 @@ describe("mobile participation indicator surface", () => { const listV2 = readSource("../threads/thread-list-v2-items.tsx"); const board = readSource("../board/BoardScreen.tsx"); - expect(stack).toContain('testID="you-participated-indicator"'); + expect(stack).toContain('testID={youParticipated ? "you-participated-indicator"'); + expect(stack).toContain("+{extras.length}"); + expect(stack).toContain('"border border-primary bg-primary/15"'); + expect(stack).not.toContain(">✓"); + expect(stack).toContain("highlighted={lead.personId === claimPersonId}"); + const avatar = readSource("./IdentityAvatar.tsx"); + expect(avatar).toContain('props.highlighted && "bg-primary"'); expect(stack).toContain("isClaimedNonStarterParticipant"); expect(stack).toContain("You participated"); expect(listV1).toContain("environmentId={thread.environmentId}"); diff --git a/apps/web/src/components/identity/IdentityAvatar.tsx b/apps/web/src/components/identity/IdentityAvatar.tsx index d41462c5b9b..cee49d7b440 100644 --- a/apps/web/src/components/identity/IdentityAvatar.tsx +++ b/apps/web/src/components/identity/IdentityAvatar.tsx @@ -7,6 +7,7 @@ export function IdentityAvatar(props: { readonly name?: string | null | undefined; readonly size?: "micro" | "sm" | "md"; readonly className?: string; + readonly highlighted?: boolean; /** `null` suppresses the native title when a parent owns richer tooltip content. */ readonly title?: string | null; }) { @@ -33,7 +34,10 @@ export function IdentityAvatar(props: { sizeClass, props.className, )} - style={{ backgroundColor: model.backgroundColor, color: model.color }} + style={{ + backgroundColor: props.highlighted ? "var(--primary)" : model.backgroundColor, + color: props.highlighted ? "var(--primary-foreground)" : model.color, + }} > {model.initials} diff --git a/apps/web/src/components/identity/ParticipantStack.tsx b/apps/web/src/components/identity/ParticipantStack.tsx index 760fa81b147..979e6a2d4c1 100644 --- a/apps/web/src/components/identity/ParticipantStack.tsx +++ b/apps/web/src/components/identity/ParticipantStack.tsx @@ -4,7 +4,6 @@ import { isClaimedNonStarterParticipant, } from "@t3tools/client-runtime/state/identity"; import type { ThreadParticipantSummary } from "@t3tools/contracts"; -import { CheckIcon } from "lucide-react"; import { identityClaimPersonIdByEnvironmentAtom } from "../../state/identity"; import { IdentityAvatar } from "./IdentityAvatar"; import { participantDisplayLabel } from "./ParticipantStack.logic"; @@ -53,24 +52,23 @@ export function ParticipantStack(props: { name={lead.name} size="micro" title={null} + highlighted={lead.personId === claimPersonId} /> {extras.length > 0 ? ( +{extras.length} ) : null} - {youParticipated ? ( - - - - ) : null} ); @@ -91,6 +89,7 @@ export function ParticipantStack(props: { name={person.name} size="micro" title={null} + highlighted={person.personId === claimPersonId} /> {participantDisplayLabel(person)} diff --git a/apps/web/src/forkSurfaceExistence.test.ts b/apps/web/src/forkSurfaceExistence.test.ts index 22dbe806de8..7eb0383d37c 100644 --- a/apps/web/src/forkSurfaceExistence.test.ts +++ b/apps/web/src/forkSurfaceExistence.test.ts @@ -137,7 +137,13 @@ describe("fork surface existence (anti stack-drop)", () => { expect(stack).toContain("