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("