Merge pull request #8766 from internet-development/binaryfiddler/starter-pack

Update starter pack wizard screen

src/screens/StarterPack/Wizard/index.tsx

@@ -4,21 +4,24 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Image} from 'expo-image'
 import {
-  AppBskyActorDefs,
+  type AppBskyActorDefs,
-  AppBskyGraphDefs,
+  type AppBskyGraphDefs,
   AtUri,
-  ModerationOpts,
+  type ModerationOpts,
 } from '@atproto/api'
-import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
+import {type GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {type NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {STARTER_PACK_MAX_SIZE} from '#/lib/constants'
 import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController'
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
-import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NavigationProp,
+} from '#/lib/routes/types'
 import {logEvent} from '#/lib/statsig/statsig'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -41,19 +44,22 @@ import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State'
+import {
+  useWizardState,
+  type WizardStep,
+} from '#/screens/StarterPack/Wizard/State'
 import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails'
 import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds'
 import {StepProfiles} from '#/screens/StarterPack/Wizard/StepProfiles'
 import {atoms as a, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import * as Layout from '#/components/Layout'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
 import {WizardEditListDialog} from '#/components/StarterPack/Wizard/WizardEditListDialog'
 import {Text} from '#/components/Typography'
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 import {Provider} from './State'
 
 export function Wizard({
@@ -279,6 +285,17 @@ function WizardInner({
     )
   }
 
+  const items =
+    state.currentStep === 'Profiles'
+      ? [profile, ...state.profiles]
+      : state.feeds
+
+  const isEditEnabled =
+    (state.currentStep === 'Profiles' && items.length > 1) ||
+    (state.currentStep === 'Feeds' && items.length > 0)
+
+  const editDialogControl = useDialogControl()
+
   return (
     <Layout.Center style={[a.flex_1]}>
       <Layout.Header.Outer>
@@ -292,12 +309,24 @@ function WizardInner({
             }
           }}
         />
-        <Layout.Header.Content>
+        <Layout.Header.Content align="left">
           <Layout.Header.TitleText>
             {currUiStrings.header}
           </Layout.Header.TitleText>
         </Layout.Header.Content>
+        {isEditEnabled ? (
+          <Button
+            label={_(msg`Edit`)}
+            color="secondary"
+            size="small"
+            onPress={editDialogControl.open}>
+            <ButtonText>
+              <Trans>Edit</Trans>
+            </ButtonText>
+          </Button>
+        ) : (
           <Layout.Header.Slot />
+        )}
       </Layout.Header.Outer>
 
       <Container>
@@ -314,10 +343,16 @@ function WizardInner({
         <Footer
           onNext={onNext}
           nextBtnText={currUiStrings.nextBtn}
-          moderationOpts={moderationOpts}
           profile={profile}
         />
       )}
+      <WizardEditListDialog
+        control={editDialogControl}
+        state={state}
+        dispatch={dispatch}
+        moderationOpts={moderationOpts}
+        profile={profile}
+      />
     </Layout.Center>
   )
 }
@@ -357,18 +392,14 @@ function Container({children}: {children: React.ReactNode}) {
 function Footer({
   onNext,
   nextBtnText,
-  moderationOpts,
   profile,
 }: {
   onNext: () => void
   nextBtnText: string
-  moderationOpts: ModerationOpts
   profile: AppBskyActorDefs.ProfileViewDetailed
 }) {
-  const {_} = useLingui()
   const t = useTheme()
-  const [state, dispatch] = useWizardState()
+  const [state] = useWizardState()
-  const editDialogControl = useDialogControl()
   const {bottom: bottomInset} = useSafeAreaInsets()
 
   const items =
@@ -376,10 +407,6 @@ function Footer({
       ? [profile, ...state.profiles]
       : state.feeds
 
-  const isEditEnabled =
-    (state.currentStep === 'Profiles' && items.length > 1) ||
-    (state.currentStep === 'Feeds' && items.length > 0)
-
   const minimumItems = state.currentStep === 'Profiles' ? 8 : 0
 
   const textStyles = [a.text_md]
@@ -416,14 +443,26 @@ function Footer({
         </View>
       )}
 
-      <View style={[a.flex_row, a.gap_xs]}>
+      <View style={[a.flex_row]}>
         {items.slice(0, 6).map((p, index) => (
-          <UserAvatar
+          <View
             key={index}
+            style={[
+              a.rounded_full,
+              {
+                borderWidth: 0.5,
+                borderColor: t.atoms.bg.backgroundColor,
+              },
+              state.currentStep === 'Profiles'
+                ? {zIndex: 1 - index, marginLeft: index > 0 ? -8 : 0}
+                : {marginRight: 4},
+            ]}>
+            <UserAvatar
               avatar={p.avatar}
               size={32}
               type={state.currentStep === 'Profiles' ? 'user' : 'algo'}
             />
+          </View>
         ))}
       </View>
 
@@ -523,56 +562,31 @@ function Footer({
 
       <View
         style={[
-          a.flex_row,
           a.w_full,
-          a.justify_between,
           a.align_center,
+          a.gap_2xl,
           isNative ? a.mt_sm : a.mt_md,
         ]}>
-        {isEditEnabled ? (
+        {state.currentStep === 'Profiles' && items.length < 8 && (
-          <Button
+          <Text style={[a.font_bold, textStyles, t.atoms.text_contrast_medium]}>
-            label={_(msg`Edit`)}
-            variant="solid"
-            color="secondary"
-            size="small"
-            style={{width: 70}}
-            onPress={editDialogControl.open}>
-            <ButtonText>
-              <Trans>Edit</Trans>
-            </ButtonText>
-          </Button>
-        ) : (
-          <View style={{width: 70, height: 35}} />
-        )}
-        {state.currentStep === 'Profiles' && items.length < 8 ? (
-          <>
-            <Text
-              style={[a.font_bold, textStyles, t.atoms.text_contrast_medium]}>
             <Trans>Add {8 - items.length} more to continue</Trans>
           </Text>
-            <View style={{width: 70}} />
+        )}
-          </>
-        ) : (
         <Button
           label={nextBtnText}
-            variant="solid"
+          style={[a.w_full, a.py_md, a.px_2xl]}
           color="primary"
-            size="small"
+          size="large"
           onPress={onNext}
-            disabled={!state.canNext || state.processing}>
+          disabled={
+            !state.canNext ||
+            state.processing ||
+            (state.currentStep === 'Profiles' && items.length < 8)
+          }>
           <ButtonText>{nextBtnText}</ButtonText>
-            {state.processing && <Loader size="xs" style={{color: 'white'}} />}
+          {state.processing && <ButtonIcon icon={Loader} />}
         </Button>
-        )}
       </View>
-
-      <WizardEditListDialog
-        control={editDialogControl}
-        state={state}
-        dispatch={dispatch}
-        moderationOpts={moderationOpts}
-        profile={profile}
-      />
     </View>
   )
 }