update design for stacked avatars

src/components/ProgressGuide/List.tsx

@@ -1,4 +1,10 @@
-import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {useState} from 'react'
+import {
+  type LayoutChangeEvent,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -11,7 +17,7 @@ import {
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useBreakpoints, useLayoutBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
-import {Person_Stroke2_Corner2_Rounded as PersonIcon} from '#/components/icons/Person'
+import {Person_Filled as PersonIcon} from '#/components/icons/Person'
 import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
@@ -51,7 +57,7 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
           a.flex_col,
           a.gap_md,
           a.rounded_md,
-          t.atoms.bg_contrast_25,
+          t.atoms.bg_contrast_50,
           a.p_lg,
           style,
         ]}>
@@ -112,70 +118,80 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
 
 function StackedAvatars({follows}: {follows?: bsky.profile.AnyProfileView[]}) {
   const t = useTheme()
-  const {centerColumnOffset} = useLayoutBreakpoints()
+  const [containerWidth, setContainerWidth] = useState(0)
 
-  // Smaller avatars for narrower viewport
-  const avatarSize = centerColumnOffset ? 30 : 37
-  const overlap = centerColumnOffset ? 9 : 11
-  const iconSize = centerColumnOffset ? 14 : 18
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width)
+  }
+
+  // Overlap ratio (22% of avatar size)
+  const overlapRatio = 0.22
+
+  // Calculate avatar size to fill container width
+  // Formula: containerWidth = avatarSize * count - overlap * (count - 1)
+  // Where overlap = avatarSize * overlapRatio
+  const visiblePortions = TOTAL_AVATARS - overlapRatio * (TOTAL_AVATARS - 1)
+  const avatarSize = containerWidth > 0 ? containerWidth / visiblePortions : 0
+  const overlap = avatarSize * overlapRatio
+  const iconSize = avatarSize * 0.45
 
-  // Use actual follows count, not the guide's event counter
   const followedAvatars = follows?.slice(0, TOTAL_AVATARS) ?? []
   const remainingSlots = TOTAL_AVATARS - followedAvatars.length
 
-  // Total width calculation: first avatar + (remaining * visible portion)
-  const totalWidth = avatarSize + (TOTAL_AVATARS - 1) * (avatarSize - overlap)
-
   return (
-    <View style={[a.flex_row, a.self_start, {width: totalWidth}]}>
-      {/* Show followed user avatars */}
-      {followedAvatars.map((follow, i) => (
-        <View
-          key={follow.did}
-          style={[
-            a.rounded_full,
-            {
-              marginLeft: i === 0 ? 0 : -overlap,
-              zIndex: TOTAL_AVATARS - i,
-              borderWidth: 2,
-              borderColor: t.atoms.bg_contrast_25.backgroundColor,
-            },
-          ]}>
-          <UserAvatar
-            type="user"
-            size={avatarSize - 4}
-            avatar={follow.avatar}
-          />
-        </View>
-      ))}
-      {/* Show placeholder avatars for remaining slots */}
-      {Array(remainingSlots)
-        .fill(0)
-        .map((_, i) => (
-          <View
-            key={`placeholder-${i}`}
-            style={[
-              a.align_center,
-              a.justify_center,
-              a.rounded_full,
-              t.atoms.bg_contrast_100,
-              {
-                width: avatarSize,
-                height: avatarSize,
-                marginLeft:
-                  followedAvatars.length === 0 && i === 0 ? 0 : -overlap,
-                zIndex: TOTAL_AVATARS - followedAvatars.length - i,
-                borderWidth: 2,
-                borderColor: t.atoms.bg_contrast_25.backgroundColor,
-              },
-            ]}>
-            <PersonIcon
-              width={iconSize}
-              height={iconSize}
-              fill={t.atoms.text_contrast_low.color}
-            />
-          </View>
-        ))}
+    <View style={[a.flex_row, a.flex_1]} onLayout={onLayout}>
+      {containerWidth > 0 && (
+        <>
+          {/* Show followed user avatars */}
+          {followedAvatars.map((follow, i) => (
+            <View
+              key={follow.did}
+              style={[
+                a.rounded_full,
+                {
+                  marginLeft: i === 0 ? 0 : -overlap,
+                  zIndex: TOTAL_AVATARS - i,
+                  borderWidth: 1,
+                  borderColor: t.atoms.bg_contrast_25.backgroundColor,
+                },
+              ]}>
+              <UserAvatar
+                type="user"
+                size={avatarSize - 2}
+                avatar={follow.avatar}
+              />
+            </View>
+          ))}
+          {/* Show placeholder avatars for remaining slots */}
+          {Array(remainingSlots)
+            .fill(0)
+            .map((_, i) => (
+              <View
+                key={`placeholder-${i}`}
+                style={[
+                  a.align_center,
+                  a.justify_center,
+                  a.rounded_full,
+                  t.atoms.bg_contrast_300,
+                  {
+                    width: avatarSize,
+                    height: avatarSize,
+                    marginLeft:
+                      followedAvatars.length === 0 && i === 0 ? 0 : -overlap,
+                    zIndex: TOTAL_AVATARS - followedAvatars.length - i,
+                    borderWidth: 1,
+                    borderColor: t.atoms.border_contrast_low.borderColor,
+                  },
+                ]}>
+                <PersonIcon
+                  width={iconSize}
+                  height={iconSize}
+                  fill={t.atoms.bg_contrast_50.backgroundColor}
+                />
+              </View>
+            ))}
+        </>
+      )}
     </View>
   )
 }