Use `SearchablePeopleList` for add user to list dialog, replace old modal (#8212)

* move to dialogs dir

* make searchable people list more generic

* new list-add-remove-users dialog

* update header text

* fix header on android

* delete old modal

* reduce spacing on items

1 files changed, 30 insertions, 22 deletions

diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index 966534d97..61f1eb745 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -5,7 +5,7 @@ import {
   AppBskyGraphDefs,
   AtUri,
   moderateUserList,
-  ModerationOpts,
+  type ModerationOpts,
   RichText as RichTextAPI,
 } from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -21,8 +21,11 @@ import {useSetTitle} from '#/lib/hooks/useSetTitle'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {ComposeIcon2} from '#/lib/icons'
 import {makeListLink} from '#/lib/routes/links'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {NavigationProp} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {shareUrl} from '#/lib/sharing'
 import {cleanError} from '#/lib/strings/errors'
 import {toShareUrl} from '#/lib/strings/url-helpers'
@@ -38,12 +41,12 @@ import {
   useListMuteMutation,
   useListQuery,
 } from '#/state/queries/list'
-import {FeedDescriptor} from '#/state/queries/post-feed'
+import {type FeedDescriptor} from '#/state/queries/post-feed'
 import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
 import {
   useAddSavedFeedsMutation,
   usePreferencesQuery,
-  UsePreferencesQueryResponse,
+  type UsePreferencesQueryResponse,
   useRemoveFeedMutation,
   useUpdateSavedFeedsMutation,
 } from '#/state/queries/preferences'
@@ -60,10 +63,10 @@ import {EmptyState} from '#/view/com/util/EmptyState'
 import {FAB} from '#/view/com/util/fab/FAB'
 import {Button} from '#/view/com/util/forms/Button'
 import {
-  DropdownItem,
+  type DropdownItem,
   NativeDropdown,
 } from '#/view/com/util/forms/NativeDropdown'
-import {ListRef} from '#/view/com/util/List'
+import {type ListRef} from '#/view/com/util/List'
 import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
 import {LoadingScreen} from '#/view/com/util/LoadingScreen'
 import {Text} from '#/view/com/util/text/Text'
@@ -72,6 +75,7 @@ import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
 import {atoms as a} from '#/alf'
 import {Button as NewButton, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
+import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog'
 import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
 import * as Layout from '#/components/Layout'
 import * as Hider from '#/components/moderation/Hider'
@@ -157,12 +161,12 @@ function ProfileListScreenLoaded({
   const {rkey} = route.params
   const feedSectionRef = React.useRef<SectionRef>(null)
   const aboutSectionRef = React.useRef<SectionRef>(null)
-  const {openModal} = useModalControls()
   const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST
   const isScreenFocused = useIsFocused()
   const isHidden = list.labels?.findIndex(l => l.val === '!hide') !== -1
   const isOwner = currentAccount?.did === list.creator.did
   const scrollElRef = useAnimatedRef()
+  const addUserDialogControl = useDialogControl()
   const sectionTitlesCurate = [_(msg`Posts`), _(msg`People`)]
 
   const moderation = React.useMemo(() => {
@@ -177,17 +181,11 @@ function ProfileListScreenLoaded({
     }, [setMinimalShellMode]),
   )
 
-  const onPressAddUser = useCallback(() => {
-    openModal({
-      name: 'list-add-remove-users',
-      list,
-      onChange() {
-        if (isCurateList) {
-          truncateAndInvalidate(queryClient, FEED_RQKEY(`list|${list.uri}`))
-        }
-      },
-    })
-  }, [openModal, list, isCurateList, queryClient])
+  const onChangeMembers = useCallback(() => {
+    if (isCurateList) {
+      truncateAndInvalidate(queryClient, FEED_RQKEY(`list|${list.uri}`))
+    }
+  }, [list.uri, isCurateList, queryClient])
 
   const onCurrentPageSelected = React.useCallback(
     (index: number) => {
@@ -225,7 +223,7 @@ function ProfileListScreenLoaded({
                   headerHeight={headerHeight}
                   isFocused={isScreenFocused && isFocused}
                   isOwner={isOwner}
-                  onPressAddUser={onPressAddUser}
+                  onPressAddUser={addUserDialogControl.open}
                 />
               )}
               {({headerHeight, scrollElRef}) => (
@@ -233,7 +231,7 @@ function ProfileListScreenLoaded({
                   ref={aboutSectionRef}
                   scrollElRef={scrollElRef as ListRef}
                   list={list}
-                  onPressAddUser={onPressAddUser}
+                  onPressAddUser={addUserDialogControl.open}
                   headerHeight={headerHeight}
                 />
               )}
@@ -253,6 +251,11 @@ function ProfileListScreenLoaded({
               accessibilityHint=""
             />
           </View>
+          <ListAddRemoveUsersDialog
+            control={addUserDialogControl}
+            list={list}
+            onChange={onChangeMembers}
+          />
         </Hider.Content>
       </Hider.Outer>
     )
@@ -268,7 +271,7 @@ function ProfileListScreenLoaded({
           <AboutSection
             list={list}
             scrollElRef={scrollElRef as ListRef}
-            onPressAddUser={onPressAddUser}
+            onPressAddUser={addUserDialogControl.open}
             headerHeight={0}
           />
           <FAB
@@ -286,6 +289,11 @@ function ProfileListScreenLoaded({
             accessibilityHint=""
           />
         </View>
+        <ListAddRemoveUsersDialog
+          control={addUserDialogControl}
+          list={list}
+          onChange={onChangeMembers}
+        />
       </Hider.Content>
     </Hider.Outer>
   )