add delete btn

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -113,7 +113,7 @@ export const ProfileStarterPacks = React.forwardRef<
             testID="listsEmpty"
             style={[{padding: 18, borderTopWidth: 1}, pal.border]}>
             <Text style={pal.textLight}>
-              <Trans>You have no feeds.</Trans>
+              <Trans>You have no starter packs.</Trans>
             </Text>
           </View>
         )

src/screens/StarterPack/Wizard/State.tsx

@@ -95,20 +95,7 @@ function reducer(state: State, action: Action): State {
       break
   }
 
-  switch (updatedState.currentStep) {
+  updatedState.canNext = !updatedState.processing
-    case 'Details':
-      updatedState = {
-        ...updatedState,
-        canNext: Boolean(updatedState.description),
-      }
-      break
-    default: {
-      updatedState = {
-        ...updatedState,
-        canNext: true,
-      }
-    }
-  }
 
   return updatedState
 }

src/screens/StarterPack/Wizard/index.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import {Keyboard, TouchableOpacity, View} from 'react-native'
-import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
+import {
+  KeyboardAwareScrollView,
+  useKeyboardController,
+} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
   AppBskyActorDefs,
@@ -44,6 +47,7 @@ import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
+import * as Prompt from '#/components/Prompt'
 import {WizardEditListDialog} from '#/components/StarterPack/Wizard/WizardEditListDialog'
 import {Text} from '#/components/Typography'
 import {Provider} from './State'
@@ -52,12 +56,11 @@ export function Wizard({
   route,
 }: NativeStackScreenProps<CommonNavigatorParams, 'StarterPackWizard'>) {
   const params = route.params
-  const {name, rkey} = params ?? {}
+  const {name, rkey} = params
   const {currentAccount} = useSession()
 
   const {_} = useLingui()
 
-  // TODO load query here
   const {
     data: did,
     isLoading: isLoadingDid,
@@ -147,6 +150,16 @@ function WizardInner({
     did: currentAccount?.did,
     staleTime: 0,
   })
+  const {setEnabled} = useKeyboardController()
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setEnabled(true)
+      return () => {
+        setEnabled(false)
+      }
+    }, [setEnabled]),
+  )
 
   const setMinimalShellMode = useSetMinimalShellMode()
 
@@ -347,6 +360,8 @@ function WizardInner({
     }
   }
 
+  const deleteStarterPack = async () => {}
+
   const onNext = () => {
     if (state.currentStep === 'Details' && !state.name) {
       dispatch({
@@ -412,7 +427,9 @@ function WizardInner({
         <View style={[{width: 65}]} />
       </View>
 
-      <Container>
+      <Container
+        showDeleteBtn={Boolean(did && rkey)}
+        deleteStarterPack={deleteStarterPack}>
         <StepView />
       </Container>
 
@@ -423,9 +440,18 @@ function WizardInner({
   )
 }
 
-function Container({children}: {children: React.ReactNode}) {
+function Container({
+  showDeleteBtn,
+  deleteStarterPack,
+  children,
+}: {
+  showDeleteBtn: boolean
+  deleteStarterPack: () => Promise<void>
+  children: React.ReactNode
+}) {
   const {_} = useLingui()
   const [state, dispatch] = useWizardState()
+  const control = useDialogControl()
 
   if (state.currentStep === 'Profiles' || state.currentStep === 'Feeds') {
     return <View style={[a.flex_1]}>{children}</View>
@@ -437,37 +463,55 @@ function Container({children}: {children: React.ReactNode}) {
       keyboardShouldPersistTaps="handled">
       {children}
       {state.currentStep === 'Details' && (
-        <Button
+        <>
-          label={_(msg`Next`)}
+          <Button
-          variant="solid"
+            label={_(msg`Next`)}
-          color="primary"
+            variant="solid"
-          size="medium"
+            color="primary"
-          style={[a.mx_xl, a.mb_lg, {marginTop: 60}]}
+            size="medium"
-          onPress={() => dispatch({type: 'Next'})}
+            style={[a.mx_xl, a.mb_lg, {marginTop: 35}]}
-          disabled={!state.canNext}>
+            onPress={() => dispatch({type: 'Next'})}
-          <ButtonText>
+            disabled={!state.canNext}>
-            <Trans>Next</Trans>
+            <ButtonText>
-          </ButtonText>
+              <Trans>Next</Trans>
-        </Button>
+            </ButtonText>
+          </Button>
+          {showDeleteBtn && (
+            <Button
+              label={_(msg`Next`)}
+              variant="outline"
+              color="negative"
+              size="medium"
+              style={[a.mx_xl, a.mb_lg]}
+              onPress={control.open}
+              disabled={!state.canNext}>
+              <ButtonText>
+                <Trans>Delete</Trans>
+              </ButtonText>
+            </Button>
+          )}
+          <Prompt.Outer control={control}>
+            <Prompt.TitleText>
+              <Trans>Delete starter pack?</Trans>
+            </Prompt.TitleText>
+            <Prompt.DescriptionText>
+              <Trans>Are you sure you want delete this starter pack?</Trans>
+            </Prompt.DescriptionText>
+            <Prompt.Actions>
+              <Prompt.Action
+                onPress={deleteStarterPack}
+                color="negative"
+                cta={_(msg`Delete`)}
+              />
+              <Prompt.Cancel />
+            </Prompt.Actions>
+          </Prompt.Outer>
+        </>
       )}
     </KeyboardAwareScrollView>
   )
 }
 
-function StepView() {
-  const [state] = useWizardState()
-
-  if (state.currentStep === 'Details') {
-    return <StepDetails />
-  }
-  if (state.currentStep === 'Profiles') {
-    return <StepProfiles />
-  }
-  if (state.currentStep === 'Feeds') {
-    return <StepFeeds />
-  }
-}
-
 function Footer({
   onNext,
   nextBtnText,
@@ -522,16 +566,14 @@ function Footer({
       )}
 
       <View style={[a.flex_row, a.gap_xs]}>
-        <View style={[a.flex_row]}>
+        {items.slice(0, 6).map((p, index) => (
-          {items.slice(0, 6).map((p, index) => (
+          <UserAvatar
-            <UserAvatar
+            key={index}
-              key={index}
+            avatar={p.avatar}
-              avatar={p.avatar}
+            size={28}
-              size={28}
+            type={state.currentStep === 'Profiles' ? 'user' : 'algo'}
-              type={state.currentStep === 'Profiles' ? 'user' : 'algo'}
+          />
-            />
+        ))}
-          ))}
-        </View>
       </View>
 
       {items.length === 0 ? (
@@ -596,7 +638,7 @@ function Footer({
           color="primary"
           size="small"
           onPress={onNext}
-          disabled={!state.canNext || state.processing}>
+          disabled={!state.canNext}>
           <ButtonText>{nextBtnText}</ButtonText>
           {state.processing && <Loader size="xs" style={{color: 'white'}} />}
         </Button>
@@ -619,3 +661,17 @@ function getName(item: AppBskyActorDefs.ProfileViewBasic | GeneratorView) {
   }
   return ''
 }
+
+function StepView() {
+  const [state] = useWizardState()
+
+  if (state.currentStep === 'Details') {
+    return <StepDetails />
+  }
+  if (state.currentStep === 'Profiles') {
+    return <StepProfiles />
+  }
+  if (state.currentStep === 'Feeds') {
+    return <StepFeeds />
+  }
+}