optimize for the web

src/components/dialogs/StarterPackDialog.tsx

@@ -11,6 +11,7 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {type NavigationProp} from '#/lib/routes/types'
+import {isWeb} from '#/platform/detection'
 import {
   invalidateActorStarterPacksWithMembershipQuery,
   useActorStarterPacksWithMembershipsQuery,
@@ -30,7 +31,7 @@ import * as bsky from '#/types/bsky'
 import {AvatarStack} from '../AvatarStack'
 import {PlusLarge_Stroke2_Corner0_Rounded} from '../icons/Plus'
 import {StarterPack} from '../icons/StarterPack'
-import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '../icons/Times'
+import {TimesLarge_Stroke2_Corner0_Rounded} from '../icons/Times'
 
 type StarterPackWithMembership =
   AppBskyGraphGetStarterPacksWithMembership.StarterPackWithMembership
@@ -56,9 +57,11 @@ export function StarterPackDialog({
       fromDialog: true,
       targetDid: targetDid,
       onSuccess: () => {
+        setTimeout(() => {
           if (!control.isOpen) {
             control.open()
           }
+        }, 0)
       },
     })
   }, [navigation, control, targetDid])
@@ -88,8 +91,9 @@ function Empty({onStartWizard}: {onStartWizard: () => void}) {
   const {_} = useLingui()
   const t = useTheme()
 
+  isWeb
   return (
-    <View style={[a.gap_2xl, {paddingTop: 64}]}>
+    <View style={[a.gap_2xl, {paddingTop: isWeb ? 100 : 64}]}>
       <View style={[a.gap_xs, a.align_center]}>
         <StarterPack
           width={48}
@@ -130,6 +134,8 @@ function StarterPackList({
   enabled?: boolean
 }) {
   const {_} = useLingui()
+  const t = useTheme()
+
   const {
     data,
     refetch,
@@ -171,19 +177,27 @@ function StarterPackList({
     control.close()
   }, [control])
 
+  const XIcon = React.useMemo(() => {
+    return (
+      <TimesLarge_Stroke2_Corner0_Rounded
+        fill={t.atoms.text_contrast_medium.color}
+      />
+    )
+  }, [t])
+
   const listHeader = (
     <>
       <View
         style={[
           {justifyContent: 'space-between', flexDirection: 'row'},
-          a.my_lg,
+          isWeb ? a.mb_2xl : a.my_lg,
           a.align_center,
         ]}>
         <Text style={[a.text_lg, a.font_bold]}>
           <Trans>Add to starter packs</Trans>
         </Text>
         <Button label={_(msg`Close`)} onPress={onClose}>
-          <ButtonIcon icon={XIcon} />
+          <ButtonIcon icon={() => XIcon} />
         </Button>
       </View>
       {membershipItems.length > 0 && (
@@ -213,7 +227,6 @@ function StarterPackList({
   )
 
   return (
-    <>
     <Dialog.InnerFlatList
       data={isLoading ? [{}] : membershipItems}
       renderItem={
@@ -236,9 +249,8 @@ function StarterPackList({
       onEndReachedThreshold={0.1}
       ListHeaderComponent={listHeader}
       ListEmptyComponent={<Empty onStartWizard={onStartWizard} />}
-        contentContainerStyle={[a.px_2xl, a.pt_lg]}
+      style={isWeb ? [a.px_md, {minHeight: 500}] : [a.px_2xl, a.pt_lg]}
     />
-    </>
   )
 }
 

src/screens/StarterPack/Wizard/index.tsx

@@ -283,7 +283,6 @@ function WizardInner({
         currentListItems: currentListItems,
       })
     } else {
-      console.log('Creating new starter pack: ', state.profiles)
       createStarterPack({
         name: state.name?.trim() || getDefaultName(),
         description: state.description?.trim(),