diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
index deb191f1a3..3b2333ed9a 100644
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/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,
- AppBskyGraphDefs,
+ type AppBskyActorDefs,
+ 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,7 +44,10 @@ 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'
@@ -53,7 +59,7 @@ 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 (
@@ -297,7 +314,19 @@ function WizardInner({
{currUiStrings.header}
-
+ {isEditEnabled ? (
+
+ ) : (
+
+ )}
@@ -314,10 +343,16 @@ function WizardInner({
)}
+
)
}
@@ -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 editDialogControl = useDialogControl()
+ const [state] = useWizardState()
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({
)}
-
+
{items.slice(0, 6).map((p, 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},
+ ]}>
+
+
))}
@@ -523,56 +562,31 @@ function Footer({
- {isEditEnabled ? (
-
- ) : (
-
- )}
- {state.currentStep === 'Profiles' && items.length < 8 ? (
- <>
-
- Add {8 - items.length} more to continue
-
-
- >
- ) : (
-
+ {state.currentStep === 'Profiles' && items.length < 8 && (
+
+ Add {8 - items.length} more to continue
+
)}
+
-
-
)
}