use useravatars for starter pack icon

src/components/StarterPack/StarterPackAvatarsIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyGraphDefs} from '@atproto/api'
+
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {atoms as a} from '#/alf'
+
+export function StarterPackAvatarsIcon({
+  starterPack,
+  size = 60,
+}: {
+  starterPack?: AppBskyGraphDefs.StarterPackView
+  size?: number
+}) {
+  if (!starterPack) return null
+
+  // TODO be sure we get this back from the server
+  const avatars = starterPack.listItemsSample?.map(item => item.subject.avatar)
+
+  return (
+    <View
+      style={[
+        a.rounded_sm,
+        {height: size, width: size, backgroundColor: '#0070FF'},
+      ]}>
+      <View style={[a.flex_1, a.flex_row]}>
+        <UserAvatar avatar={avatars![0]} size={size / 2} type="square" />
+        <UserAvatar avatar={avatars![1]} size={size / 2} type="square" />
+      </View>
+      <View style={[a.flex_1, a.flex_row]}>
+        <UserAvatar avatar={avatars![2]} size={size / 2} type="square" />
+        <UserAvatar avatar={avatars![3]} size={size / 2} type="square" />
+      </View>
+    </View>
+  )
+}

src/screens/StarterPack/Main/index.tsx

@@ -127,6 +127,7 @@ function Header({
         isOwner={isOwn}
         avatar={undefined}
         creator={creator}
+        starterPack={starterPack}
         avatarType="starter-pack">
         <View style={[a.flex_row, a.gap_sm]}>
           {__DEV__ && (

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -21,7 +21,9 @@ import {Text} from '../util/text/Text'
 import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
 import {CenteredView} from '../util/Views'
 import hairlineWidth = StyleSheet.hairlineWidth
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {AppBskyGraphDefs} from '@atproto/api'
+
+import {StarterPackAvatarsIcon} from '#/components/StarterPack/StarterPackAvatarsIcon'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -31,6 +33,7 @@ export function ProfileSubpageHeader({
   isOwner,
   creator,
   avatarType,
+  starterPack,
   children,
 }: React.PropsWithChildren<{
   isLoading?: boolean
@@ -44,6 +47,7 @@ export function ProfileSubpageHeader({
         handle: string
       }
     | undefined
+  starterPack?: AppBskyGraphDefs.StarterPackView
   avatarType: UserAvatarType | 'starter-pack'
 }>) {
   const setDrawerOpen = useSetDrawerOpen()
@@ -132,7 +136,7 @@ export function ProfileSubpageHeader({
           accessibilityHint=""
           style={{width: 58}}>
           {avatarType === 'starter-pack' ? (
-            <StarterPackIcon width={58} height={58} />
+            <StarterPackAvatarsIcon starterPack={starterPack} />
           ) : (
             <UserAvatar type={avatarType} size={58} avatar={avatar} />
           )}

src/view/com/util/UserAvatar.tsx

@@ -31,7 +31,7 @@ import * as Menu from '#/components/Menu'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
 
-export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
+export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler' | 'square'
 
 interface BaseUserAvatarProps {
   type?: UserAvatarType
@@ -168,6 +168,13 @@ let UserAvatar = ({
   const backgroundColor = pal.colors.backgroundLight
 
   const aviStyle = useMemo(() => {
+    if (type === 'square') {
+      return {
+        width: size,
+        height: size,
+        backgroundColor,
+      }
+    }
     if (type === 'algo' || type === 'list' || type === 'labeler') {
       return {
         width: size,