add indicator on how many more items can be added

src/components/StarterPack/Wizard/WizardFeedCard.tsx

@@ -60,6 +60,7 @@ export function WizardFeedCard({
         color={includesFeed ? 'secondary' : 'primary'}
         size="small"
         style={{paddingVertical: 6}}
+        disabled={!includesFeed && state.feeds.length >= 3}
         onPress={onAdd}>
         <ButtonText>
           {includesFeed ? <Trans>Remove</Trans> : <Trans>Add</Trans>}

src/components/StarterPack/Wizard/WizardProfileCard.tsx

@@ -66,6 +66,7 @@ export function WizardProfileCard({
           color={includesProfile ? 'secondary' : 'primary'}
           size="small"
           style={{paddingVertical: 6}}
+          disabled={!includesProfile && state.profiles.length >= 50}
           onPress={onPressAddRemove}>
           <ButtonText>
             {includesProfile ? <Trans>Remove</Trans> : <Trans>Add</Trans>}

src/screens/StarterPack/Wizard/index.tsx

@@ -511,7 +511,14 @@ function Footer({
           },
         ],
       ]}>
+      <View style={[a.absolute, {right: 14, top: 23}]}>
+        <Text style={[a.font_bold]}>
+          {items.length}/{state.currentStep === 'Profiles' ? 50 : 3}
+        </Text>
+      </View>
+
       <View style={[a.flex_row, a.gap_xs]}>
+        <View style={[a.flex_row]}>
           {items.slice(0, 6).map((p, index) => (
             <UserAvatar
               key={index}
@@ -521,6 +528,7 @@ function Footer({
             />
           ))}
         </View>
+      </View>
 
       {items.length === 0 ? (
         <View style={[a.gap_sm]}>