address feedback

src/components/dialogs/StarterPackDialog.tsx

@@ -4,7 +4,7 @@ import {
   type AppBskyGraphGetStarterPacksWithMembership,
   AppBskyGraphStarterpack,
 } from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
+import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
@@ -20,7 +20,6 @@ import {
   useListMembershipRemoveMutation,
 } from '#/state/queries/list-memberships'
 import * as Toast from '#/view/com/util/Toast'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -28,6 +27,7 @@ import {Divider} from '#/components/Divider'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import * as bsky from '#/types/bsky'
+import {AvatarStack} from '../AvatarStack'
 import {PlusLarge_Stroke2_Corner0_Rounded} from '../icons/Plus'
 import {StarterPack} from '../icons/StarterPack'
 import {TimesLarge_Stroke2_Corner0_Rounded} from '../icons/Times'
@@ -107,7 +107,9 @@ function Empty({onStartWizard}: {onStartWizard: () => void}) {
           size="small"
           onPress={onStartWizard}>
           <ButtonText>
-            <Trans>Create</Trans>
+            <Trans comment="Text on button to create a new starter pack">
+              Create
+            </Trans>
           </ButtonText>
           <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
         </Button>
@@ -200,7 +202,9 @@ function StarterPackList({
               size="small"
               onPress={onStartWizard}>
               <ButtonText>
-                <Trans>Create</Trans>
+                <Trans comment="Text on button to create a new starter pack">
+                  Create
+                </Trans>
               </ButtonText>
               <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
             </Button>
@@ -347,22 +351,12 @@ function StarterPackItem({
           {starterPack.listItemsSample &&
             starterPack.listItemsSample.length > 0 && (
               <>
-                {starterPack.listItemsSample?.slice(0, 4).map((p, index) => (
+                <AvatarStack
-                  <UserAvatar
+                  size={32}
-                    key={p.subject.did}
+                  profiles={starterPack.listItemsSample
-                    avatar={p.subject.avatar}
+                    ?.slice(0, 4)
-                    size={32}
+                    .map(p => p.subject)}
-                    type={'user'}
+                />
-                    style={[
-                      {
-                        zIndex: 1 - index,
-                        marginLeft: index > 0 ? -2 : 0,
-                        borderWidth: 0.5,
-                        borderColor: t.atoms.bg.backgroundColor,
-                      },
-                    ]}
-                  />
-                ))}
 
                 {starterPack.list?.listItemCount &&
                   starterPack.list.listItemCount > 4 && (
@@ -372,7 +366,12 @@ function StarterPackItem({
                         t.atoms.text_contrast_medium,
                         a.ml_xs,
                       ]}>
-                      {`+${starterPack.list.listItemCount - 4} more`}
+                      <Trans>
+                        <Plural
+                          value={starterPack.list.listItemCount - 4}
+                          other="+# more"
+                        />
+                      </Trans>
                     </Text>
                   )}
               </>

src/screens/StarterPack/Wizard/index.tsx

@@ -483,30 +483,44 @@ function Footer({
           <Text style={[a.text_center, textStyles]}>
             {
               items.length < 2 ? (
-                <Trans>
+                currentAccount?.did === items[0].did ? (
-                  It's just{' '}
+                  <Trans>
-                  <Text style={[a.font_bold, textStyles]} emoji>
+                    It's just you right now! Add more people to your starter
-                    {currentAccount?.did === items[0].did
+                    pack by searching above.
-                      ? 'you'
+                  </Trans>
-                      : getName(items[0])}{' '}
+                ) : (
-                  </Text>
+                  <Trans>
-                  right now! Add more people to your starter pack by searching
+                    It's just{' '}
-                  above.
+                    <Text style={[a.font_bold, textStyles]} emoji>
-                </Trans>
+                      {getName(items[0])}{' '}
+                    </Text>
+                    right now! Add more people to your starter pack by searching
+                    above.
+                  </Trans>
+                )
               ) : items.length === 2 ? (
-                <Trans>
+                currentAccount?.did === items[0].did ? (
-                  <Text style={[a.font_bold, textStyles]}>
+                  <Trans>
-                    {currentAccount?.did === items[0].did
+                    <Text style={[a.font_bold, textStyles]}>You</Text> and
-                      ? 'you'
+                    <Text> </Text>
-                      : getName(items[0])}
+                    <Text style={[a.font_bold, textStyles]} emoji>
-                  </Text>{' '}
+                      {getName(items[1] /* [0] is self, skip it */)}{' '}
-                  and
+                    </Text>
-                  <Text> </Text>
+                    are included in your starter pack
-                  <Text style={[a.font_bold, textStyles]} emoji>
+                  </Trans>
-                    {getName(items[1] /* [0] is self, skip it */)}{' '}
+                ) : (
-                  </Text>
+                  <Trans>
-                  are included in your starter pack
+                    <Text style={[a.font_bold, textStyles]}>
-                </Trans>
+                      {getName(items[0])}
+                    </Text>{' '}
+                    and
+                    <Text> </Text>
+                    <Text style={[a.font_bold, textStyles]} emoji>
+                      {getName(items[1] /* [0] is self, skip it */)}{' '}
+                    </Text>
+                    are included in your starter pack
+                  </Trans>
+                )
               ) : items.length > 2 ? (
                 <Trans context="profiles">
                   <Text style={[a.font_bold, textStyles]} emoji>