From e5f0c32648be83908d3f4e06c8f746581b365527 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Wed, 10 Jun 2026 19:53:45 +0100
Subject: [PATCH] Kit/circular avatars (#927)

---
 .../features/channels/ui/ChannelScreenHeader.tsx  |  2 +-
 desktop/src/features/messages/ui/MessageRow.tsx   |  2 +-
 .../messages/ui/MessageThreadSummaryRow.tsx       | 15 +++++++++++----
 .../src/features/sidebar/ui/SidebarSection.tsx    |  6 +++---
 desktop/src/shared/ui/ViewLoadingFallback.tsx     |  2 +-
 desktop/src/shared/ui/avatar.tsx                  |  2 +-
 6 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
index 72d3380a5a..ce95191598 100644
--- a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
@@ -85,7 +85,7 @@ export function ChannelScreenHeader({
         activeChannel?.channelType === "dm" ? (
           <ProfileAvatar
             avatarUrl={activeDmAvatarUrl}
-            className="h-6 w-6 rounded-md text-[10px]"
+            className="h-6 w-6 rounded-full text-[10px]"
             iconClassName="h-3.5 w-3.5"
             label={activeChannelTitle}
             testId="chat-header-dm-avatar"
diff --git a/desktop/src/features/messages/ui/MessageRow.tsx b/desktop/src/features/messages/ui/MessageRow.tsx
index 4707e48d5b..cfaf0e874a 100644
--- a/desktop/src/features/messages/ui/MessageRow.tsx
+++ b/desktop/src/features/messages/ui/MessageRow.tsx
@@ -205,7 +205,7 @@ export const MessageRow = React.memo(
     const isThreadReplyLayout = layoutVariant === "thread-reply";
     const guideBleedPx = isThreadReplyLayout ? 4 : 0;
     const avatarSizeClass = "!h-9 !w-9";
-    const avatarButtonRadiusClass = "rounded-xl";
+    const avatarButtonRadiusClass = "rounded-full";
 
     const respondToDotColor =
       message.respondTo === "anyone"
diff --git a/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx b/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
index 13d75e7a13..6103bb403c 100644
--- a/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
@@ -21,11 +21,18 @@ function ParticipantAvatar({
     <div
       className={index > 0 ? "-ml-2" : ""}
       data-testid="message-thread-summary-participant"
-      style={{ zIndex: 10 - index }}
+      style={{
+        zIndex: 10 - index,
+        ...(index > 0 && {
+          mask: "radial-gradient(circle 16px at -4px 50%, transparent 99%, #fff 100%)",
+          WebkitMask:
+            "radial-gradient(circle 16px at -4px 50%, transparent 99%, #fff 100%)",
+        }),
+      }}
     >
       <UserAvatar
         avatarUrl={participant.avatarUrl}
-        className="h-7 w-7 text-[10px] ring-2 ring-background"
+        className="h-7 w-7 text-[10px]"
         displayName={participant.author}
         size="sm"
       />
@@ -88,14 +95,14 @@ export function MessageThreadSummaryRow({
 
       <button
         aria-label={summaryAriaLabel}
-        className="group relative isolate inline-flex h-8 w-fit max-w-full cursor-pointer items-center gap-1.5 rounded-[12px] text-left text-xs font-medium text-muted-foreground transition-[color,opacity] before:pointer-events-none before:absolute before:-bottom-0.5 before:-left-0.5 before:-right-2 before:-top-0.5 before:-z-10 before:rounded-[12px] before:content-[''] before:transition-[background-color,box-shadow] hover:text-foreground hover:opacity-90 hover:before:bg-background/95 hover:before:ring-1 hover:before:ring-border/70 focus-visible:outline-hidden focus-visible:before:bg-background/95 focus-visible:before:ring-1 focus-visible:before:ring-ring"
+        className="group relative isolate inline-flex h-8 w-fit max-w-full cursor-pointer items-center gap-1.5 rounded-full text-left text-xs font-medium text-muted-foreground transition-[color,opacity] before:pointer-events-none before:absolute before:-bottom-0.5 before:-left-0.5 before:-right-2 before:-top-0.5 before:-z-10 before:rounded-full before:content-[''] before:transition-[background-color,box-shadow] hover:text-foreground hover:opacity-90 hover:before:bg-background/95 hover:before:ring-1 hover:before:ring-border/70 focus-visible:outline-hidden focus-visible:before:bg-background/95 focus-visible:before:ring-1 focus-visible:before:ring-ring"
         data-thread-head-id={message.id}
         data-testid="message-thread-summary"
         onClick={() => onOpenThread(message)}
         style={{ marginLeft: `${marginLeftPx}px` }}
         type="button"
       >
-        <div className="flex shrink-0 items-center">
+        <div className="ml-0.5 flex shrink-0 items-center">
           {summary.participants.map((participant, index) => (
             <ParticipantAvatar
               index={index}
diff --git a/desktop/src/features/sidebar/ui/SidebarSection.tsx b/desktop/src/features/sidebar/ui/SidebarSection.tsx
index ccdd46098b..6d9210622d 100644
--- a/desktop/src/features/sidebar/ui/SidebarSection.tsx
+++ b/desktop/src/features/sidebar/ui/SidebarSection.tsx
@@ -70,7 +70,7 @@ function DmChannelIcon({
       <span className="relative flex h-5 w-5 shrink-0 items-center justify-center">
         <ProfileAvatar
           avatarUrl={primaryParticipant.avatarUrl}
-          className="h-5 w-5 rounded-[6px] border border-sidebar-border/80 bg-sidebar-accent/80 text-[9px] text-sidebar-foreground shadow-none"
+          className="h-5 w-5 rounded-full border border-sidebar-border/80 bg-sidebar-accent/80 text-[9px] text-sidebar-foreground shadow-none"
           iconClassName="h-3 w-3"
           label={primaryParticipant.label}
         />
@@ -91,13 +91,13 @@ function DmChannelIcon({
     <span className="relative flex h-5 w-7 shrink-0 items-center">
       <ProfileAvatar
         avatarUrl={primaryParticipant.avatarUrl}
-        className="absolute left-0 top-0 h-[18px] w-[18px] rounded-[6px] border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
+        className="absolute left-0 top-0 h-[18px] w-[18px] rounded-full border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
         iconClassName="h-2.5 w-2.5"
         label={primaryParticipant.label}
       />
       <ProfileAvatar
         avatarUrl={secondaryParticipant.avatarUrl}
-        className="absolute bottom-0 right-0 h-[18px] w-[18px] rounded-[6px] border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
+        className="absolute bottom-0 right-0 h-[18px] w-[18px] rounded-full border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
         iconClassName="h-2.5 w-2.5"
         label={secondaryParticipant.label}
       />
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index 3e0a6bf8e3..10aba7ec76 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -47,7 +47,7 @@ function MessageRowsSkeleton() {
     <>
       {["first", "second", "third", "fourth", "fifth"].map((row, index) => (
         <div className="flex gap-3" key={row}>
-          <Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
+          <Skeleton className="h-9 w-9 shrink-0 rounded-full" />
           <div className="min-w-0 flex-1 space-y-1 pt-0.5">
             <div className="flex items-baseline gap-2">
               <Skeleton className="h-3.5 w-28" />
diff --git a/desktop/src/shared/ui/avatar.tsx b/desktop/src/shared/ui/avatar.tsx
index ff2fc706bd..9c90537b70 100644
--- a/desktop/src/shared/ui/avatar.tsx
+++ b/desktop/src/shared/ui/avatar.tsx
@@ -10,7 +10,7 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-lg",
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
       className,
     )}
     {...props}