From 30e0069651f9d4236c7b212c4cf99c62afd0016c Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 9 Jan 2026 20:33:51 +0200
Subject: [PATCH] fix: use stable keys and proper types in StackedAvatars

Use profile.did as React key instead of array index to prevent
reconciliation issues when the follows list changes order.
Updated type to use bsky.profile.AnyProfileView for better type safety.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/ProgressGuide/List.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ProgressGuide/List.tsx b/src/components/ProgressGuide/List.tsx
index 88a81b7356..5bd55de8d3 100644
--- a/src/components/ProgressGuide/List.tsx
+++ b/src/components/ProgressGuide/List.tsx
@@ -14,6 +14,7 @@ import {Button, ButtonIcon} from '#/components/Button'
 import {Person_Stroke2_Corner2_Rounded 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'
 import {FollowDialog} from './FollowDialog'
 import {ProgressGuideTask} from './Task'
 
@@ -92,7 +93,7 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
   return null
 }
 
-function StackedAvatars({follows}: {follows?: {avatar?: string}[]}) {
+function StackedAvatars({follows}: {follows?: bsky.profile.AnyProfileView[]}) {
   const t = useTheme()
   const {centerColumnOffset} = useLayoutBreakpoints()
 
@@ -113,7 +114,7 @@ function StackedAvatars({follows}: {follows?: {avatar?: string}[]}) {
       {/* Show followed user avatars */}
       {followedAvatars.map((follow, i) => (
         <View
-          key={i}
+          key={follow.did}
           style={[
             a.rounded_full,
             {