use Dialog.InnerFlatlist

src/components/dialogs/StarterPackDialog.tsx

@@ -19,7 +19,6 @@ import {
   useListMembershipAddMutation,
   useListMembershipRemoveMutation,
 } from '#/state/queries/list-memberships'
-import {List} from '#/view/com/util/List'
 import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
@@ -72,38 +71,15 @@ export function StarterPackDialog({
     ],
   })
 
-  const onClose = React.useCallback(() => {
-    control.close()
-  }, [control])
-
-  const t = useTheme()
-
   return (
     <Dialog.Outer control={control}>
       <Dialog.Handle />
-      <Dialog.Inner label={_(msg`Add to starter packs`)} style={[a.w_full]}>
+      <StarterPackList
-        <View>
+        control={control}
-          <View
+        onStartWizard={wrappedNavToWizard}
-            style={[
+        targetDid={targetDid}
-              {justifyContent: 'space-between', flexDirection: 'row'},
+        enabled={enabled}
-              a.my_lg,
+      />
-            ]}>
-            <Text style={[a.text_lg, a.font_bold]}>
-              <Trans>Add to starter packs</Trans>
-            </Text>
-            <TimesLarge_Stroke2_Corner0_Rounded
-              onPress={onClose}
-              fill={t.atoms.text_contrast_medium.color}
-            />
-          </View>
-
-          <StarterPackList
-            onStartWizard={wrappedNavToWizard}
-            targetDid={targetDid}
-            enabled={enabled}
-          />
-        </View>
-      </Dialog.Inner>
     </Dialog.Outer>
   )
 }
@@ -113,8 +89,7 @@ function Empty({onStartWizard}: {onStartWizard: () => void}) {
   const t = useTheme()
 
   return (
-    <View
+    <View style={[a.gap_2xl, {paddingTop: 64}]}>
-      style={[a.align_center, a.gap_2xl, {paddingTop: 64, paddingBottom: 64}]}>
       <View style={[a.gap_xs, a.align_center]}>
         <StarterPack
           width={48}
@@ -125,30 +100,35 @@ function Empty({onStartWizard}: {onStartWizard: () => void}) {
         </Text>
       </View>
 
-      <Button
+      <View style={[a.align_center]}>
-        label={_(msg`Create starter pack`)}
+        <Button
-        color="secondary_inverted"
+          label={_(msg`Create starter pack`)}
-        size="small"
+          color="secondary_inverted"
-        onPress={onStartWizard}>
+          size="small"
-        <ButtonText>
+          onPress={onStartWizard}>
-          <Trans>Create</Trans>
+          <ButtonText>
-        </ButtonText>
+            <Trans>Create</Trans>
-        <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
+          </ButtonText>
-      </Button>
+          <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
+        </Button>
+      </View>
     </View>
   )
 }
 
 function StarterPackList({
+  control,
   onStartWizard,
   targetDid,
   enabled,
 }: {
+  control: Dialog.DialogControlProps
   onStartWizard: () => void
   targetDid: string
   enabled?: boolean
 }) {
   const {_} = useLingui()
+  const t = useTheme()
 
   const {
     data,
@@ -187,54 +167,81 @@ function StarterPackList({
     [targetDid],
   )
 
-  const ListHeaderComponent = React.useCallback(
+  const onClose = React.useCallback(() => {
-    () => (
+    control.close()
-      <>
+  }, [control])
-        <View style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
+
-          <Text style={[a.text_md, a.font_bold]}>
+  const listHeader = (
-            <Trans>New starter pack</Trans>
+    <>
-          </Text>
+      <View
-          <Button
+        style={[
-            label={_(msg`Create starter pack`)}
+          {justifyContent: 'space-between', flexDirection: 'row'},
-            color="secondary_inverted"
+          a.my_lg,
-            size="small"
+          a.align_center,
-            onPress={onStartWizard}>
+        ]}>
-            <ButtonText>
+        <Text style={[a.text_lg, a.font_bold]}>
-              <Trans>Create</Trans>
+          <Trans>Add to starter packs</Trans>
-            </ButtonText>
+        </Text>
-            <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
+        <TimesLarge_Stroke2_Corner0_Rounded
-          </Button>
+          onPress={onClose}
-        </View>
+          fill={t.atoms.text_contrast_medium.color}
-        <Divider />
+        />
-      </>
+      </View>
-    ),
+      {membershipItems.length > 0 && (
-    [_, onStartWizard],
+        <>
+          <View
+            style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
+            <Text style={[a.text_md, a.font_bold]}>
+              <Trans>New starter pack</Trans>
+            </Text>
+            <Button
+              label={_(msg`Create starter pack`)}
+              color="secondary_inverted"
+              size="small"
+              onPress={onStartWizard}>
+              <ButtonText>
+                <Trans>Create</Trans>
+              </ButtonText>
+              <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
+            </Button>
+          </View>
+          <Divider />
+        </>
+      )}
+    </>
   )
 
   if (isLoading) {
     return (
-      <View style={[a.align_center, a.p_xl]}>
+      <>
-        <Loader size="xl" />
+        <Dialog.Close />
-      </View>
+        <Dialog.ScrollableInner
+          contentContainerStyle={[a.align_center, a.p_xl]}
+          label={_(msg`Add to starter packs`)}>
+          <Loader size="xl" />
+        </Dialog.ScrollableInner>
+      </>
     )
   }
 
   return (
-    <List
+    <>
-      data={membershipItems}
+      <Dialog.Close />
-      renderItem={renderItem}
+      <Dialog.InnerFlatList
-      keyExtractor={(item: StarterPackWithMembership, index: number) =>
+        data={membershipItems}
-        item.starterPack.uri || index.toString()
+        renderItem={renderItem}
-      }
+        keyExtractor={(item: StarterPackWithMembership, index: number) =>
-      refreshing={false}
+          item.starterPack.uri || index.toString()
-      onRefresh={_onRefresh}
+        }
-      onEndReached={_onEndReached}
+        refreshing={false}
-      onEndReachedThreshold={0.1}
+        onRefresh={_onRefresh}
-      ListHeaderComponent={
+        onEndReached={_onEndReached}
-        membershipItems.length > 0 ? ListHeaderComponent : null
+        onEndReachedThreshold={0.1}
-      }
+        ListHeaderComponent={listHeader}
-      ListEmptyComponent={<Empty onStartWizard={onStartWizard} />}
+        ListEmptyComponent={<Empty onStartWizard={onStartWizard} />}
-    />
+        contentContainerStyle={[a.px_2xl, a.pt_lg]}
+      />
+    </>
   )
 }