Modernise list create/edit dialog (#8223)

src/components/Dialog/index.tsx

···
         scrollEventThrottle={50}
         onScroll={isAndroid ? onScroll : undefined}
         keyboardShouldPersistTaps="handled"
-        stickyHeaderIndices={header ? [0] : undefined}>
+        // TODO: figure out why this positions the header absolutely (rather than stickily)
+        // on Android. fine to disable for now, because we don't have any
+        // dialogs that use this that actually scroll -sfn
+        stickyHeaderIndices={ios(header ? [0] : undefined)}>
         {header}
         {children}
       </KeyboardAwareScrollView>

src/components/dialogs/lists/CreateOrEditListDialog.tsx

···
+import {useCallback, useEffect, useMemo, useState} from 'react'
+import {useWindowDimensions, View} from 'react-native'
+import {type AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
+import {msg, Plural, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {cleanError} from '#/lib/strings/errors'
+import {useWarnMaxGraphemeCount} from '#/lib/strings/helpers'
+import {richTextToString} from '#/lib/strings/rich-text-helpers'
+import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
+import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
+import {type ImageMeta} from '#/state/gallery'
+import {
+  useListCreateMutation,
+  useListMetadataMutation,
+} from '#/state/queries/list'
+import {useAgent} from '#/state/session'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import * as Toast from '#/view/com/util/Toast'
+import {EditableUserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
+import {Loader} from '#/components/Loader'
+import * as Prompt from '#/components/Prompt'
+import {Text} from '#/components/Typography'
+
+const DISPLAY_NAME_MAX_GRAPHEMES = 64
+const DESCRIPTION_MAX_GRAPHEMES = 300
+
+export function CreateOrEditListDialog({
+  control,
+  list,
+  purpose,
+  onSave,
+}: {
+  control: Dialog.DialogControlProps
+  list?: AppBskyGraphDefs.ListView
+  purpose?: AppBskyGraphDefs.ListPurpose
+  onSave?: (uri: string) => void
+}) {
+  const {_} = useLingui()
+  const cancelControl = Dialog.useDialogControl()
+  const [dirty, setDirty] = useState(false)
+  const {height} = useWindowDimensions()
+
+  // 'You might lose unsaved changes' warning
+  useEffect(() => {
+    if (isWeb && dirty) {
+      const abortController = new AbortController()
+      const {signal} = abortController
+      window.addEventListener('beforeunload', evt => evt.preventDefault(), {
+        signal,
+      })
+      return () => {
+        abortController.abort()
+      }
+    }
+  }, [dirty])
+
+  const onPressCancel = useCallback(() => {
+    if (dirty) {
+      cancelControl.open()
+    } else {
+      control.close()
+    }
+  }, [dirty, control, cancelControl])
+
+  return (
+    <Dialog.Outer
+      control={control}
+      nativeOptions={{
+        preventDismiss: dirty,
+        minHeight: height,
+      }}
+      testID="createOrEditListDialog">
+      <DialogInner
+        list={list}
+        purpose={purpose}
+        onSave={onSave}
+        setDirty={setDirty}
+        onPressCancel={onPressCancel}
+      />
+
+      <Prompt.Basic
+        control={cancelControl}
+        title={_(msg`Discard changes?`)}
+        description={_(msg`Are you sure you want to discard your changes?`)}
+        onConfirm={() => control.close()}
+        confirmButtonCta={_(msg`Discard`)}
+        confirmButtonColor="negative"
+      />
+    </Dialog.Outer>
+  )
+}
+
+function DialogInner({
+  list,
+  purpose,
+  onSave,
+  setDirty,
+  onPressCancel,
+}: {
+  list?: AppBskyGraphDefs.ListView
+  purpose?: AppBskyGraphDefs.ListPurpose
+  onSave?: (uri: string) => void
+  setDirty: (dirty: boolean) => void
+  onPressCancel: () => void
+}) {
+  const activePurpose = useMemo(() => {
+    if (list?.purpose) {
+      return list.purpose
+    }
+    if (purpose) {
+      return purpose
+    }
+    return 'app.bsky.graph.defs#curatelist'
+  }, [list, purpose])
+  const isCurateList = activePurpose === 'app.bsky.graph.defs#curatelist'
+
+  const {_} = useLingui()
+  const t = useTheme()
+  const agent = useAgent()
+  const control = Dialog.useDialogContext()
+  const {
+    mutateAsync: createListMutation,
+    error: createListError,
+    isError: isCreateListError,
+    isPending: isCreatingList,
+  } = useListCreateMutation()
+  const {
+    mutateAsync: updateListMutation,
+    error: updateListError,
+    isError: isUpdateListError,
+    isPending: isUpdatingList,
+  } = useListMetadataMutation()
+  const [imageError, setImageError] = useState('')
+  const [displayNameTooShort, setDisplayNameTooShort] = useState(false)
+  const initialDisplayName = list?.name || ''
+  const [displayName, setDisplayName] = useState(initialDisplayName)
+  const initialDescription = list?.description || ''
+  const [descriptionRt, setDescriptionRt] = useState<RichTextAPI>(() => {
+    const text = list?.description
+    const facets = list?.descriptionFacets
+
+    if (!text || !facets) {
+      return new RichTextAPI({text: text || ''})
+    }
+
+    // We want to be working with a blank state here, so let's get the
+    // serialized version and turn it back into a RichText
+    const serialized = richTextToString(new RichTextAPI({text, facets}), false)
+
+    const richText = new RichTextAPI({text: serialized})
+    richText.detectFacetsWithoutResolution()
+
+    return richText
+  })
+
+  const [listAvatar, setListAvatar] = useState<string | undefined | null>(
+    list?.avatar,
+  )
+  const [newListAvatar, setNewListAvatar] = useState<
+    ImageMeta | undefined | null
+  >()
+
+  const dirty =
+    displayName !== initialDisplayName ||
+    descriptionRt.text !== initialDescription ||
+    listAvatar !== list?.avatar
+
+  useEffect(() => {
+    setDirty(dirty)
+  }, [dirty, setDirty])
+
+  const onSelectNewAvatar = useCallback(
+    (img: ImageMeta | null) => {
+      setImageError('')
+      if (img === null) {
+        setNewListAvatar(null)
+        setListAvatar(null)
+        return
+      }
+      try {
+        setNewListAvatar(img)
+        setListAvatar(img.path)
+      } catch (e: any) {
+        setImageError(cleanError(e))
+      }
+    },
+    [setNewListAvatar, setListAvatar, setImageError],
+  )
+
+  const onPressSave = useCallback(async () => {
+    setImageError('')
+    setDisplayNameTooShort(false)
+    try {
+      if (displayName.length === 0) {
+        setDisplayNameTooShort(true)
+        return
+      }
+
+      let richText = new RichTextAPI(
+        {text: descriptionRt.text.trimEnd()},
+        {cleanNewlines: true},
+      )
+
+      await richText.detectFacets(agent)
+      richText = shortenLinks(richText)
+      richText = stripInvalidMentions(richText)
+
+      if (list) {
+        await updateListMutation({
+          uri: list.uri,
+          name: displayName,
+          description: richText.text,
+          descriptionFacets: richText.facets,
+          avatar: newListAvatar,
+        })
+        Toast.show(
+          isCurateList
+            ? _(msg({message: 'User list updated', context: 'toast'}))
+            : _(msg({message: 'Moderation list updated', context: 'toast'})),
+        )
+        control.close(() => onSave?.(list.uri))
+      } else {
+        const {uri} = await createListMutation({
+          purpose: activePurpose,
+          name: displayName,
+          description: richText.text,
+          descriptionFacets: richText.facets,
+          avatar: newListAvatar,
+        })
+        Toast.show(
+          isCurateList
+            ? _(msg({message: 'User list created', context: 'toast'}))
+            : _(msg({message: 'Moderation list created', context: 'toast'})),
+        )
+        control.close(() => onSave?.(uri))
+      }
+    } catch (e: any) {
+      logger.error('Failed to create/edit list', {message: String(e)})
+    }
+  }, [
+    list,
+    createListMutation,
+    updateListMutation,
+    onSave,
+    control,
+    displayName,
+    descriptionRt,
+    newListAvatar,
+    setImageError,
+    activePurpose,
+    isCurateList,
+    agent,
+    _,
+  ])
+
+  const displayNameTooLong = useWarnMaxGraphemeCount({
+    text: displayName,
+    maxCount: DISPLAY_NAME_MAX_GRAPHEMES,
+  })
+  const descriptionTooLong = useWarnMaxGraphemeCount({
+    text: descriptionRt,
+    maxCount: DESCRIPTION_MAX_GRAPHEMES,
+  })
+
+  const cancelButton = useCallback(
+    () => (
+      <Button
+        label={_(msg`Cancel`)}
+        onPress={onPressCancel}
+        size="small"
+        color="primary"
+        variant="ghost"
+        style={[a.rounded_full]}
+        testID="editProfileCancelBtn">
+        <ButtonText style={[a.text_md]}>
+          <Trans>Cancel</Trans>
+        </ButtonText>
+      </Button>
+    ),
+    [onPressCancel, _],
+  )
+
+  const saveButton = useCallback(
+    () => (
+      <Button
+        label={_(msg`Save`)}
+        onPress={onPressSave}
+        disabled={
+          !dirty ||
+          isCreatingList ||
+          isUpdatingList ||
+          displayNameTooLong ||
+          descriptionTooLong
+        }
+        size="small"
+        color="primary"
+        variant="ghost"
+        style={[a.rounded_full]}
+        testID="editProfileSaveBtn">
+        <ButtonText style={[a.text_md, !dirty && t.atoms.text_contrast_low]}>
+          <Trans>Save</Trans>
+        </ButtonText>
+        {(isCreatingList || isUpdatingList) && <ButtonIcon icon={Loader} />}
+      </Button>
+    ),
+    [
+      _,
+      t,
+      dirty,
+      onPressSave,
+      isCreatingList,
+      isUpdatingList,
+      displayNameTooLong,
+      descriptionTooLong,
+    ],
+  )
+
+  const onChangeDisplayName = useCallback(
+    (text: string) => {
+      setDisplayName(text)
+      if (text.length > 0 && displayNameTooShort) {
+        setDisplayNameTooShort(false)
+      }
+    },
+    [displayNameTooShort],
+  )
+
+  const onChangeDescription = useCallback(
+    (newText: string) => {
+      const richText = new RichTextAPI({text: newText})
+      richText.detectFacetsWithoutResolution()
+
+      setDescriptionRt(richText)
+    },
+    [setDescriptionRt],
+  )
+
+  const title = list
+    ? isCurateList
+      ? _(msg`Edit user list`)
+      : _(msg`Edit moderation list`)
+    : isCurateList
+      ? _(msg`Create user list`)
+      : _(msg`Create moderation list`)
+
+  return (
+    <Dialog.ScrollableInner
+      label={title}
+      style={[a.overflow_hidden, web({maxWidth: 500})]}
+      contentContainerStyle={[a.px_0, a.pt_0]}
+      header={
+        <Dialog.Header renderLeft={cancelButton} renderRight={saveButton}>
+          <Dialog.HeaderText>{title}</Dialog.HeaderText>
+        </Dialog.Header>
+      }>
+      {isUpdateListError && (
+        <ErrorMessage message={cleanError(updateListError)} />
+      )}
+      {isCreateListError && (
+        <ErrorMessage message={cleanError(createListError)} />
+      )}
+      {imageError !== '' && <ErrorMessage message={imageError} />}
+      <View style={[a.pt_xl, a.px_xl, a.gap_xl]}>
+        <View>
+          <TextField.LabelText>
+            <Trans>List avatar</Trans>
+          </TextField.LabelText>
+          <View style={[a.align_start]}>
+            <EditableUserAvatar
+              size={80}
+              avatar={listAvatar}
+              onSelectNewAvatar={onSelectNewAvatar}
+              type="list"
+            />
+          </View>
+        </View>
+        <View>
+          <TextField.LabelText>
+            <Trans>List name</Trans>
+          </TextField.LabelText>
+          <TextField.Root isInvalid={displayNameTooLong || displayNameTooShort}>
+            <Dialog.Input
+              defaultValue={displayName}
+              onChangeText={onChangeDisplayName}
+              label={_(msg`Name`)}
+              placeholder={_(msg`e.g. Great Posters`)}
+              testID="editListNameInput"
+            />
+          </TextField.Root>
+          {(displayNameTooLong || displayNameTooShort) && (
+            <Text
+              style={[
+                a.text_sm,
+                a.mt_xs,
+                a.font_bold,
+                {color: t.palette.negative_400},
+              ]}>
+              {displayNameTooLong ? (
+                <Trans>
+                  List name is too long.{' '}
+                  <Plural
+                    value={DISPLAY_NAME_MAX_GRAPHEMES}
+                    other="The maximum number of characters is #."
+                  />
+                </Trans>
+              ) : displayNameTooShort ? (
+                <Trans>List must have a name.</Trans>
+              ) : null}
+            </Text>
+          )}
+        </View>
+
+        <View>
+          <TextField.LabelText>
+            <Trans>List description</Trans>
+          </TextField.LabelText>
+          <TextField.Root isInvalid={descriptionTooLong}>
+            <Dialog.Input
+              defaultValue={descriptionRt.text}
+              onChangeText={onChangeDescription}
+              multiline
+              label={_(msg`Description`)}
+              placeholder={_(msg`e.g. The posters that never miss.`)}
+              testID="editProfileDescriptionInput"
+            />
+          </TextField.Root>
+          {descriptionTooLong && (
+            <Text
+              style={[
+                a.text_sm,
+                a.mt_xs,
+                a.font_bold,
+                {color: t.palette.negative_400},
+              ]}>
+              <Trans>
+                List description is too long.{' '}
+                <Plural
+                  value={DESCRIPTION_MAX_GRAPHEMES}
+                  other="The maximum number of characters is #."
+                />
+              </Trans>
+            </Text>
+          )}
+        </View>
+      </View>
+    </Dialog.ScrollableInner>
+  )
+}

src/lib/strings/helpers.ts

···
 import {useCallback, useMemo} from 'react'
+import {type RichText} from '@atproto/api'
 import Graphemer from 'graphemer'
+
+import {shortenLinks} from './rich-text-manip'
 
 export function enforceLen(
   str: string,
···
   text,
   maxCount,
 }: {
-  text: string
+  text: string | RichText
   maxCount: number
 }) {
   const splitter = useMemo(() => new Graphemer(), [])
 
   return useMemo(() => {
-    return splitter.countGraphemes(text) > maxCount
+    if (typeof text === 'string') {
+      return splitter.countGraphemes(text) > maxCount
+    } else {
+      return shortenLinks(text).graphemeLength > maxCount
+    }
   }, [splitter, maxCount, text])
 }
 

src/screens/Profile/Header/EditProfileDialog.tsx

···
 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'
···
 const DISPLAY_NAME_MAX_GRAPHEMES = 64
 const DESCRIPTION_MAX_GRAPHEMES = 256
 
-const SCREEN_HEIGHT = Dimensions.get('window').height
-
 export function EditProfileDialog({
   profile,
   control,
···
   const {_} = useLingui()
   const cancelControl = Dialog.useDialogControl()
   const [dirty, setDirty] = useState(false)
+  const {height} = useWindowDimensions()
 
   const onPressCancel = useCallback(() => {
     if (dirty) {
···
       control={control}
       nativeOptions={{
         preventDismiss: dirty,
-        minHeight: SCREEN_HEIGHT,
+        minHeight: height,
       }}
       webOptions={{
         onBackgroundPress: () => {
···
         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)})
···
               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

···
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
 import {
   useListBlockMutation,
   useListDeleteMutation,
···
 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'
···
 }) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const {openModal} = useModalControls()
+  const editListDialogControl = useDialogControl()
   const deleteListPromptControl = useDialogControl()
   const reportDialogControl = useReportDialogControl()
   const navigation = useNavigation<NavigationProp>()
···
     }
   }
 
-  const onPressEdit = () => {
-    openModal({
-      name: 'create-or-edit-list',
-      list,
-    })
-  }
-
   const onPressDelete = async () => {
     await deleteList({uri: list.uri})
 
···
             <Menu.Group>
               <Menu.Item
                 label={_(msg`Edit list details`)}
-                onPress={onPressEdit}>
+                onPress={editListDialogControl.open}>
                 <Menu.ItemText>
                   <Trans>Edit list details</Trans>
                 </Menu.ItemText>
···
           )}
         </Menu.Outer>
       </Menu.Root>
+
+      <CreateOrEditListDialog control={editListDialogControl} list={list} />
 
       <Prompt.Basic
         control={deleteListPromptControl}

src/state/modals/index.tsx

···
 import React from 'react'
-import {type AppBskyGraphDefs} from '@atproto/api'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-
-export interface CreateOrEditListModal {
-  name: 'create-or-edit-list'
-  purpose?: string
-  list?: AppBskyGraphDefs.ListView
-  onSave?: (uri: string) => void
-}
 
 export interface UserAddRemoveListsModal {
   name: 'user-add-remove-lists'
···
   | ContentLanguagesSettingsModal
 
   // Lists
-  | CreateOrEditListModal
   | UserAddRemoveListsModal
 
   // Bluesky access

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

···
 
 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

···
 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'
···
 
   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

···
 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'
···
   }
 
   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

···
-import React from 'react'
+import {useCallback} from 'react'
 import {AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
···
   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'
 
···
   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: [
···
     ],
   })
 
+  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>
···
           </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

···
-import React from 'react'
+import {useCallback} from 'react'
 import {AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
···
   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'
 
···
   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: [
···
     ],
   })
 
+  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>
···
           </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>
   )
 }