From 43b071a05fcb23eff8fd6fcb337386a715f54a9f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Sat, 15 Jun 2024 18:53:35 -0700
Subject: [PATCH] little tweaks

---
 .../StarterPack/ProfileStarterPacks.tsx       | 11 +----
 .../StarterPack/Wizard/WizardFeedCard.tsx     |  5 ++-
 .../StarterPack/Wizard/WizardProfileCard.tsx  | 45 ++++++++++---------
 src/screens/StarterPack/Wizard/State.tsx      |  2 +-
 .../StarterPack/Wizard/StepDetails.tsx        | 28 +++++++-----
 src/screens/StarterPack/Wizard/index.tsx      |  2 +-
 6 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx
index 8aef725cb0..985aa9746d 100644
--- a/src/components/StarterPack/ProfileStarterPacks.tsx
+++ b/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
-      style={[
-        a.px_md,
-        a.py_lg,
-        a.justify_between,
-        a.gap_lg,
-        a.border_t,
-        t.atoms.border_contrast_medium,
-      ]}>
+    <View style={[a.px_md, a.py_lg, a.justify_between, a.gap_lg]}>
       <Button
         label={_(msg`Create a starter pack`)}
         variant="ghost"
diff --git a/src/components/StarterPack/Wizard/WizardFeedCard.tsx b/src/components/StarterPack/Wizard/WizardFeedCard.tsx
index 4640aead9a..c7198943c5 100644
--- a/src/components/StarterPack/Wizard/WizardFeedCard.tsx
+++ b/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>
diff --git a/src/components/StarterPack/Wizard/WizardProfileCard.tsx b/src/components/StarterPack/Wizard/WizardProfileCard.tsx
index 270a81c6a3..c66c885985 100644
--- a/src/components/StarterPack/Wizard/WizardProfileCard.tsx
+++ b/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
-          name={_(msg`Person toggle`)}
-          label={
-            includesProfile
-              ? _(
-                  msg`Remove ${
-                    profile.displayName || profile.handle
-                  } from starter pack`,
-                )
-              : _(
-                  msg`Add ${
-                    profile.displayName || profile.handle
-                  } to starter pack`,
-                )
-          }
-          value={includesProfile}
-          onChange={onPressAddRemove}>
-          <Checkbox />
-        </Toggle.Item>
-      )}
+      <Toggle.Item
+        name={_(msg`Person toggle`)}
+        label={
+          includesProfile
+            ? _(
+                msg`Remove ${
+                  profile.displayName || profile.handle
+                } from starter pack`,
+              )
+            : _(
+                msg`Add ${
+                  profile.displayName || profile.handle
+                } to starter pack`,
+              )
+        }
+        value={includesProfile}
+        disabled={isDisabled}
+        onChange={onPressAddRemove}>
+        <Checkbox />
+      </Toggle.Item>
     </Pressable>
   )
 }
diff --git a/src/screens/StarterPack/Wizard/State.tsx b/src/screens/StarterPack/Wizard/State.tsx
index 80a5912fb4..9a4867548e 100644
--- a/src/screens/StarterPack/Wizard/State.tsx
+++ b/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}
diff --git a/src/screens/StarterPack/Wizard/StepDetails.tsx b/src/screens/StarterPack/Wizard/StepDetails.tsx
index 234f9956c4..42ef0c20a2 100644
--- a/src/screens/StarterPack/Wizard/StepDetails.tsx
+++ b/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
-            label={_(
-              msg`${
-                currentProfile?.displayName || currentProfile?.handle
-              }'s starter pack`,
-            )}
-            value={state.name}
-            onChangeText={text => dispatch({type: 'SetName', name: text})}
-          />
+          <TextField.Root>
+            <TextField.Input
+              label={_(
+                msg`${
+                  currentProfile?.displayName || currentProfile?.handle
+                }'s starter pack`,
+              )}
+              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>
diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
index 5614074d2f..6b02d6dfc5 100644
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/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,