little tweaks

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -147,20 +147,11 @@ export const ProfileStarterPacks = React.forwardRef<
 })
 
 function CreateAnother() {
-  const t = useTheme()
   const {_} = useLingui()
   const navigation = useNavigation<NavigationProp>()
 
   return (
-    <View
+    <View style={[a.px_md, a.py_lg, a.justify_between, a.gap_lg]}>
-      style={[
-        a.px_md,
-        a.py_lg,
-        a.justify_between,
-        a.gap_lg,
-        a.border_t,
-        t.atoms.border_contrast_medium,
-      ]}>
       <Button
         label={_(msg`Create a starter pack`)}
         variant="ghost"

src/components/StarterPack/Wizard/WizardFeedCard.tsx

@@ -28,8 +28,11 @@ export function WizardFeedCard({
   const isDiscover = generator.uri === DISCOVER_FEED_URI
   const includesFeed =
     isDiscover || state.feeds.some(f => f.uri === generator.uri)
+  const isDisabled = isDiscover || (!includesFeed && state.feeds.length >= 3)
 
   const onPressAddRemove = () => {
+    if (isDisabled) return
+
     Keyboard.dismiss()
     if (includesFeed) {
       dispatch({type: 'RemoveFeed', feedUri: generator.uri})
@@ -74,7 +77,7 @@ export function WizardFeedCard({
             : _(msg`Add ${generator.displayName} to starter pack`)
         }
         value={includesFeed}
-        disabled={isDiscover}
+        disabled={isDisabled}
         onChange={onPressAddRemove}>
         <Checkbox />
       </Toggle.Item>

src/components/StarterPack/Wizard/WizardProfileCard.tsx

@@ -27,8 +27,12 @@ export function WizardProfileCard({
   const {currentAccount} = useSession()
 
   const includesProfile = state.profiles.some(p => p.did === profile.did)
+  const isMe = profile.did === currentAccount?.did
+  const isDisabled = isMe || state.profiles.length >= 50
 
   const onPressAddRemove = () => {
+    if (isDisabled) return
+
     Keyboard.dismiss()
     if (profile.did === currentAccount?.did) return
 
@@ -67,27 +71,26 @@ export function WizardProfileCard({
           @{profile?.handle}
         </Text>
       </View>
-      {profile.did !== currentAccount?.did && (
+      <Toggle.Item
-        <Toggle.Item
+        name={_(msg`Person toggle`)}
-          name={_(msg`Person toggle`)}
+        label={
-          label={
+          includesProfile
-            includesProfile
+            ? _(
-              ? _(
+                msg`Remove ${
-                  msg`Remove ${
+                  profile.displayName || profile.handle
-                    profile.displayName || profile.handle
+                } from starter pack`,
-                  } from starter pack`,
+              )
-                )
+            : _(
-              : _(
+                msg`Add ${
-                  msg`Add ${
+                  profile.displayName || profile.handle
-                    profile.displayName || profile.handle
+                } to starter pack`,
-                  } to starter pack`,
+              )
-                )
+        }
-          }
+        value={includesProfile}
-          value={includesProfile}
+        disabled={isDisabled}
-          onChange={onPressAddRemove}>
+        onChange={onPressAddRemove}>
-          <Checkbox />
+        <Checkbox />
-        </Toggle.Item>
+      </Toggle.Item>
-      )}
     </Pressable>
   )
 }

src/screens/StarterPack/Wizard/State.tsx

@@ -66,7 +66,7 @@ function reducer(state: State, action: Action): State {
 
   switch (action.type) {
     case 'SetName':
-      updatedState = {...state, name: action.name}
+      updatedState = {...state, name: action.name.slice(0, 50)}
       break
     case 'SetDescription':
       updatedState = {...state, description: action.description}

src/screens/StarterPack/Wizard/StepDetails.tsx

@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
 import {useProfileQuery} from 'state/queries/profile'
 import {useSession} from 'state/session'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
 import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
@@ -14,6 +14,7 @@ import {Text} from '#/components/Typography'
 
 export function StepDetails() {
   const {_} = useLingui()
+  const t = useTheme()
   const [state, dispatch] = useWizardState()
 
   const {currentAccount} = useSession()
@@ -42,15 +43,22 @@ export function StepDetails() {
           <TextField.LabelText>
             <Trans>What do you want to call your starter pack?</Trans>
           </TextField.LabelText>
-          <TextField.Input
+          <TextField.Root>
-            label={_(
+            <TextField.Input
-              msg`${
+              label={_(
-                currentProfile?.displayName || currentProfile?.handle
+                msg`${
-              }'s starter pack`,
+                  currentProfile?.displayName || currentProfile?.handle
-            )}
+                }'s starter pack`,
-            value={state.name}
+              )}
-            onChangeText={text => dispatch({type: 'SetName', name: text})}
+              value={state.name}
-          />
+              onChangeText={text => dispatch({type: 'SetName', name: text})}
+            />
+            <TextField.SuffixText label={_(`${state.name?.length} out of 50`)}>
+              <Text style={[t.atoms.text_contrast_medium]}>
+                {state.name?.length ?? 0}/50
+              </Text>
+            </TextField.SuffixText>
+          </TextField.Root>
         </View>
         <View>
           <TextField.LabelText>

src/screens/StarterPack/Wizard/index.tsx

@@ -189,7 +189,7 @@ function WizardInner({
     msg`${
       currentProfile?.displayName || `@${currentProfile?.handle}`
     }'s Starter Pack`,
-  )
+  ).slice(0, 50)
 
   const wizardUiStrings: Record<
     WizardStep,