Modernise list create/edit dialog (#8223)

src/view/com/composer/photos/EditImageDialog.web.tsx

@@ -19,7 +19,7 @@ import {type EditImageDialogProps} from './EditImageDialog'
 
 export function EditImageDialog(props: EditImageDialogProps) {
   return (
-    <Dialog.Outer control={props.control}>
+    <Dialog.Outer control={props.control} webOptions={{alignCenter: true}}>
       <Dialog.Handle />
       <DialogInner {...props} />
     </Dialog.Outer>

src/view/com/modals/Modal.tsx

@@ -7,7 +7,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useModalControls, useModals} from '#/state/modals'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
-import * as CreateOrEditListModal from './CreateOrEditList'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as InviteCodesModal from './InviteCodes'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
@@ -44,10 +43,7 @@ export function ModalsContainer() {
 
   let snapPoints: (string | number)[] = DEFAULT_SNAPPOINTS
   let element
-  if (activeModal?.name === 'create-or-edit-list') {
-    snapPoints = CreateOrEditListModal.snapPoints
-    element = <CreateOrEditListModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'user-add-remove-lists') {
+  if (activeModal?.name === 'user-add-remove-lists') {
     snapPoints = UserAddRemoveListsModal.snapPoints
     element = <UserAddRemoveListsModal.Component {...activeModal} />
   } else if (activeModal?.name === 'delete-account') {

src/view/com/modals/Modal.web.tsx

@@ -6,7 +6,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {type Modal as ModalIface} from '#/state/modals'
 import {useModalControls, useModals} from '#/state/modals'
-import * as CreateOrEditListModal from './CreateOrEditList'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as InviteCodesModal from './InviteCodes'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
@@ -48,9 +47,7 @@ function Modal({modal}: {modal: ModalIface}) {
   }
 
   let element
-  if (modal.name === 'create-or-edit-list') {
-    element = <CreateOrEditListModal.Component {...modal} />
-  } else if (modal.name === 'user-add-remove-lists') {
+  if (modal.name === 'user-add-remove-lists') {
     element = <UserAddRemoveLists.Component {...modal} />
   } else if (modal.name === 'delete-account') {
     element = <DeleteAccountModal.Component />

src/view/screens/Lists.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -10,11 +10,12 @@ import {
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {type NavigationProp} from '#/lib/routes/types'
-import {useModalControls} from '#/state/modals'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {MyLists} from '#/view/com/lists/MyLists'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {CreateOrEditListDialog} from '#/components/dialogs/lists/CreateOrEditListDialog'
 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
 import * as Layout from '#/components/Layout'
 
@@ -23,30 +24,18 @@ export function ListsScreen({}: Props) {
   const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
   const navigation = useNavigation<NavigationProp>()
-  const {openModal} = useModalControls()
   const requireEmailVerification = useRequireEmailVerification()
+  const createListDialogControl = useDialogControl()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
-  const onPressNewList = React.useCallback(() => {
-    openModal({
-      name: 'create-or-edit-list',
-      purpose: 'app.bsky.graph.defs#curatelist',
-      onSave: (uri: string) => {
-        try {
-          const urip = new AtUri(uri)
-          navigation.navigate('ProfileList', {
-            name: urip.hostname,
-            rkey: urip.rkey,
-          })
-        } catch {}
-      },
-    })
-  }, [openModal, navigation])
+  const onPressNewList = useCallback(() => {
+    createListDialogControl.open()
+  }, [createListDialogControl])
 
   const wrappedOnPressNewList = requireEmailVerification(onPressNewList, {
     instructions: [
@@ -56,6 +45,19 @@ export function ListsScreen({}: Props) {
     ],
   })
 
+  const onCreateList = useCallback(
+    (uri: string) => {
+      try {
+        const urip = new AtUri(uri)
+        navigation.navigate('ProfileList', {
+          name: urip.hostname,
+          rkey: urip.rkey,
+        })
+      } catch {}
+    },
+    [navigation],
+  )
+
   return (
     <Layout.Screen testID="listsScreen">
       <Layout.Header.Outer>
@@ -78,7 +80,14 @@ export function ListsScreen({}: Props) {
           </ButtonText>
         </Button>
       </Layout.Header.Outer>
+
       <MyLists filter="curate" style={a.flex_grow} />
+
+      <CreateOrEditListDialog
+        purpose="app.bsky.graph.defs#curatelist"
+        control={createListDialogControl}
+        onSave={onCreateList}
+      />
     </Layout.Screen>
   )
 }

src/view/screens/ModerationModlists.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -10,11 +10,12 @@ import {
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {type NavigationProp} from '#/lib/routes/types'
-import {useModalControls} from '#/state/modals'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {MyLists} from '#/view/com/lists/MyLists'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {CreateOrEditListDialog} from '#/components/dialogs/lists/CreateOrEditListDialog'
 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
 import * as Layout from '#/components/Layout'
 
@@ -23,30 +24,18 @@ export function ModerationModlistsScreen({}: Props) {
   const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
   const navigation = useNavigation<NavigationProp>()
-  const {openModal} = useModalControls()
   const requireEmailVerification = useRequireEmailVerification()
+  const createListDialogControl = useDialogControl()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
-  const onPressNewList = React.useCallback(() => {
-    openModal({
-      name: 'create-or-edit-list',
-      purpose: 'app.bsky.graph.defs#modlist',
-      onSave: (uri: string) => {
-        try {
-          const urip = new AtUri(uri)
-          navigation.navigate('ProfileList', {
-            name: urip.hostname,
-            rkey: urip.rkey,
-          })
-        } catch {}
-      },
-    })
-  }, [openModal, navigation])
+  const onPressNewList = useCallback(() => {
+    createListDialogControl.open()
+  }, [createListDialogControl])
 
   const wrappedOnPressNewList = requireEmailVerification(onPressNewList, {
     instructions: [
@@ -56,6 +45,19 @@ export function ModerationModlistsScreen({}: Props) {
     ],
   })
 
+  const onCreateList = useCallback(
+    (uri: string) => {
+      try {
+        const urip = new AtUri(uri)
+        navigation.navigate('ProfileList', {
+          name: urip.hostname,
+          rkey: urip.rkey,
+        })
+      } catch {}
+    },
+    [navigation],
+  )
+
   return (
     <Layout.Screen testID="moderationModlistsScreen">
       <Layout.Header.Outer>
@@ -78,7 +80,14 @@ export function ModerationModlistsScreen({}: Props) {
           </ButtonText>
         </Button>
       </Layout.Header.Outer>
+
       <MyLists filter="mod" style={a.flex_grow} />
+
+      <CreateOrEditListDialog
+        purpose="app.bsky.graph.defs#modlist"
+        control={createListDialogControl}
+        onSave={onCreateList}
+      />
     </Layout.Screen>
   )
 }