Modernise list create/edit dialog (#8223)

src/screens/Profile/Header/EditProfileDialog.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useState} from 'react'
-import {Dimensions, View} from 'react-native'
+import {useWindowDimensions, View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -28,8 +28,6 @@ import {useSimpleVerificationState} from '#/components/verification'
 const DISPLAY_NAME_MAX_GRAPHEMES = 64
 const DESCRIPTION_MAX_GRAPHEMES = 256
 
-const SCREEN_HEIGHT = Dimensions.get('window').height
-
 export function EditProfileDialog({
   profile,
   control,
@@ -42,6 +40,7 @@ export function EditProfileDialog({
   const {_} = useLingui()
   const cancelControl = Dialog.useDialogControl()
   const [dirty, setDirty] = useState(false)
+  const {height} = useWindowDimensions()
 
   const onPressCancel = useCallback(() => {
     if (dirty) {
@@ -56,7 +55,7 @@ export function EditProfileDialog({
       control={control}
       nativeOptions={{
         preventDismiss: dirty,
-        minHeight: SCREEN_HEIGHT,
+        minHeight: height,
       }}
       webOptions={{
         onBackgroundPress: () => {
@@ -186,8 +185,7 @@ function DialogInner({
         newUserAvatar,
         newUserBanner,
       })
-      onUpdate?.()
-      control.close()
+      control.close(() => onUpdate?.())
       Toast.show(_(msg({message: 'Profile updated', context: 'toast'})))
     } catch (e: any) {
       logger.error('Failed to update user profile', {message: String(e)})
@@ -369,7 +367,7 @@ function DialogInner({
               defaultValue={description}
               onChangeText={setDescription}
               multiline
-              label={_(msg`Display name`)}
+              label={_(msg`Description`)}
               placeholder={_(msg`Tell us a bit about yourself`)}
               testID="editProfileDescriptionInput"
             />

src/screens/ProfileList/components/MoreOptionsMenu.tsx

@@ -8,7 +8,6 @@ import {shareUrl} from '#/lib/sharing'
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
 import {
   useListBlockMutation,
   useListDeleteMutation,
@@ -18,6 +17,7 @@ import {useRemoveFeedMutation} from '#/state/queries/preferences'
 import {useSession} from '#/state/session'
 import {Button, ButtonIcon} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
+import {CreateOrEditListDialog} from '#/components/dialogs/lists/CreateOrEditListDialog'
 import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowOutOfBox'
 import {ChainLink_Stroke2_Corner0_Rounded as ChainLink} from '#/components/icons/ChainLink'
 import {DotGrid_Stroke2_Corner0_Rounded as DotGridIcon} from '#/components/icons/DotGrid'
@@ -44,7 +44,7 @@ export function MoreOptionsMenu({
 }) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const {openModal} = useModalControls()
+  const editListDialogControl = useDialogControl()
   const deleteListPromptControl = useDialogControl()
   const reportDialogControl = useReportDialogControl()
   const navigation = useNavigation<NavigationProp>()
@@ -80,13 +80,6 @@ export function MoreOptionsMenu({
     }
   }
 
-  const onPressEdit = () => {
-    openModal({
-      name: 'create-or-edit-list',
-      list,
-    })
-  }
-
   const onPressDelete = async () => {
     await deleteList({uri: list.uri})
 
@@ -201,7 +194,7 @@ export function MoreOptionsMenu({
             <Menu.Group>
               <Menu.Item
                 label={_(msg`Edit list details`)}
-                onPress={onPressEdit}>
+                onPress={editListDialogControl.open}>
                 <Menu.ItemText>
                   <Trans>Edit list details</Trans>
                 </Menu.ItemText>
@@ -275,6 +268,8 @@ export function MoreOptionsMenu({
         </Menu.Outer>
       </Menu.Root>
 
+      <CreateOrEditListDialog control={editListDialogControl} list={list} />
+
       <Prompt.Basic
         control={deleteListPromptControl}
         title={_(msg`Delete this list?`)}