Use ScreenHider on lists

src/view/screens/ProfileList.tsx

@@ -1,6 +1,12 @@
 import React, {useCallback, useMemo} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
-import {AppBskyGraphDefs, AtUri, RichText as RichTextAPI} from '@atproto/api'
+import {
+  AppBskyGraphDefs,
+  AtUri,
+  moderateUserList,
+  ModerationOpts,
+  RichText as RichTextAPI,
+} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -14,6 +20,7 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
 import {useModalControls} from '#/state/modals'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {
   useListBlockMutation,
   useListDeleteMutation,
@@ -62,6 +69,7 @@ import * as Toast from 'view/com/util/Toast'
 import {CenteredView} from 'view/com/util/Views'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
+import {ScreenHider} from '#/components/moderation/ScreenHider'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
@@ -82,6 +90,7 @@ export function ProfileListScreen(props: Props) {
     AtUri.make(handleOrDid, 'app.bsky.graph.list', rkey).toString(),
   )
   const {data: list, error: listError} = useListQuery(resolvedUri?.uri)
+  const moderationOpts = useModerationOpts()
 
   if (resolveError) {
     return (
@@ -102,8 +111,13 @@ export function ProfileListScreen(props: Props) {
     )
   }
 
-  return resolvedUri && list ? (
+  return resolvedUri && list && moderationOpts ? (
-    <ProfileListScreenLoaded {...props} uri={resolvedUri.uri} list={list} />
+    <ProfileListScreenLoaded
+      {...props}
+      uri={resolvedUri.uri}
+      list={list}
+      moderationOpts={moderationOpts}
+    />
   ) : (
     <LoadingScreen />
   )
@@ -113,7 +127,12 @@ function ProfileListScreenLoaded({
   route,
   uri,
   list,
-}: Props & {uri: string; list: AppBskyGraphDefs.ListView}) {
+  moderationOpts,
+}: Props & {
+  uri: string
+  list: AppBskyGraphDefs.ListView
+  moderationOpts: ModerationOpts
+}) {
   const {_} = useLingui()
   const queryClient = useQueryClient()
   const {openComposer} = useComposerControls()
@@ -125,6 +144,10 @@ function ProfileListScreenLoaded({
   const isCurateList = list.purpose === 'app.bsky.graph.defs#curatelist'
   const isScreenFocused = useIsFocused()
 
+  const moderation = React.useMemo(() => {
+    return moderateUserList(list, moderationOpts)
+  }, [list, moderationOpts])
+
   useSetTitle(list.name)
 
   useFocusEffect(
@@ -162,46 +185,50 @@ function ProfileListScreenLoaded({
 
   if (isCurateList) {
     return (
-      <View style={s.hContentRegion}>
+      <ScreenHider
-        <PagerWithHeader
+        screenDescription={_(msg`list`)}
-          items={SECTION_TITLES_CURATE}
+        modui={moderation.ui('contentView')}>
-          isHeaderReady={true}
+        <View style={s.hContentRegion}>
-          renderHeader={renderHeader}
+          <PagerWithHeader
-          onCurrentPageSelected={onCurrentPageSelected}>
+            items={SECTION_TITLES_CURATE}
-          {({headerHeight, scrollElRef, isFocused}) => (
+            isHeaderReady={true}
-            <FeedSection
+            renderHeader={renderHeader}
-              ref={feedSectionRef}
+            onCurrentPageSelected={onCurrentPageSelected}>
-              feed={`list|${uri}`}
+            {({headerHeight, scrollElRef, isFocused}) => (
-              scrollElRef={scrollElRef as ListRef}
+              <FeedSection
-              headerHeight={headerHeight}
+                ref={feedSectionRef}
-              isFocused={isScreenFocused && isFocused}
+                feed={`list|${uri}`}
-            />
+                scrollElRef={scrollElRef as ListRef}
-          )}
+                headerHeight={headerHeight}
-          {({headerHeight, scrollElRef}) => (
+                isFocused={isScreenFocused && isFocused}
-            <AboutSection
+              />
-              ref={aboutSectionRef}
+            )}
-              scrollElRef={scrollElRef as ListRef}
+            {({headerHeight, scrollElRef}) => (
-              list={list}
+              <AboutSection
-              onPressAddUser={onPressAddUser}
+                ref={aboutSectionRef}
-              headerHeight={headerHeight}
+                scrollElRef={scrollElRef as ListRef}
-            />
+                list={list}
-          )}
+                onPressAddUser={onPressAddUser}
-        </PagerWithHeader>
+                headerHeight={headerHeight}
-        <FAB
+              />
-          testID="composeFAB"
+            )}
-          onPress={() => openComposer({})}
+          </PagerWithHeader>
-          icon={
+          <FAB
-            <ComposeIcon2
+            testID="composeFAB"
-              strokeWidth={1.5}
+            onPress={() => openComposer({})}
-              size={29}
+            icon={
-              style={{color: 'white'}}
+              <ComposeIcon2
-            />
+                strokeWidth={1.5}
-          }
+                size={29}
-          accessibilityRole="button"
+                style={{color: 'white'}}
-          accessibilityLabel={_(msg`New post`)}
+              />
-          accessibilityHint=""
+            }
-        />
+            accessibilityRole="button"
-      </View>
+            accessibilityLabel={_(msg`New post`)}
+            accessibilityHint=""
+          />
+        </View>
+      </ScreenHider>
     )
   }
   return (