Add Hider component (#4960)

Co-authored-by: Hailey <me@haileyok.com>

src/components/moderation/Hider.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {ModerationUI} from '@atproto/api'
+
+import {
+  ModerationCauseDescription,
+  useModerationCauseDescription,
+} from '#/lib/moderation/useModerationCauseDescription'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+type Context = {
+  isContentVisible: boolean
+  setIsContentVisible: (show: boolean) => void
+  info: ModerationCauseDescription
+  showInfoDialog: () => void
+  meta: {
+    isNoPwi: boolean
+    noOverride: boolean
+  }
+}
+
+const Context = React.createContext<Context>({} as Context)
+
+export const useScreenHider = () => React.useContext(Context)
+
+export function Outer({
+  modui,
+  children,
+}: React.PropsWithChildren<{
+  modui: ModerationUI
+}>) {
+  const control = useModerationDetailsDialogControl()
+  const blur = modui.blurs[0]
+  const [isContentVisible, setIsContentVisible] = React.useState(!blur)
+  const info = useModerationCauseDescription(blur)
+
+  const meta = {
+    isNoPwi: Boolean(
+      modui.blurs.find(
+        cause =>
+          cause.type === 'label' &&
+          cause.labelDef.identifier === '!no-unauthenticated',
+      ),
+    ),
+    noOverride: modui.noOverride,
+  }
+
+  const showInfoDialog = () => {
+    control.open()
+  }
+
+  const onSetContentVisible = (show: boolean) => {
+    if (meta.noOverride) return
+    setIsContentVisible(show)
+  }
+
+  const ctx = {
+    isContentVisible,
+    setIsContentVisible: onSetContentVisible,
+    showInfoDialog,
+    info,
+    meta,
+  }
+
+  return (
+    <Context.Provider value={ctx}>
+      {children}
+      <ModerationDetailsDialog control={control} modcause={blur} />
+    </Context.Provider>
+  )
+}
+
+export function Content({children}: {children: React.ReactNode}) {
+  const ctx = useScreenHider()
+  return ctx.isContentVisible ? children : null
+}
+
+export function Mask({children}: {children: React.ReactNode}) {
+  const ctx = useScreenHider()
+  return ctx.isContentVisible ? null : children
+}

src/view/screens/ProfileList.tsx

@@ -71,7 +71,7 @@ import {CenteredView} from 'view/com/util/Views'
 import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
-import {ScreenHider} from '#/components/moderation/ScreenHider'
+import * as Hider from '#/components/moderation/Hider'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
@@ -189,15 +189,13 @@ function ProfileListScreenLoaded({
     return <Header rkey={rkey} list={list} preferences={preferences} />
   }, [rkey, list, preferences])
 
-  if (isHidden) {
-    return <ListHiddenScreen list={list} preferences={preferences} />
-  }
-
   if (isCurateList) {
     return (
-      <ScreenHider
+      <Hider.Outer modui={moderation.ui('contentView')}>
-        screenDescription={'list'}
+        <Hider.Mask>
-        modui={moderation.ui('contentView')}>
+          <ListHiddenScreen list={list} preferences={preferences} />
+        </Hider.Mask>
+        <Hider.Content>
           <View style={s.hContentRegion}>
             <PagerWithHeader
               items={SECTION_TITLES_CURATE}
@@ -238,13 +236,16 @@ function ProfileListScreenLoaded({
               accessibilityHint=""
             />
           </View>
-      </ScreenHider>
+        </Hider.Content>
+      </Hider.Outer>
     )
   }
   return (
-    <ScreenHider
+    <Hider.Outer modui={moderation.ui('contentView')}>
-      screenDescription={_(msg`list`)}
+      <Hider.Mask>
-      modui={moderation.ui('contentView')}>
+        <ListHiddenScreen list={list} preferences={preferences} />
+      </Hider.Mask>
+      <Hider.Content>
         <View style={s.hContentRegion}>
           <PagerWithHeader
             items={SECTION_TITLES_MOD}
@@ -274,7 +275,8 @@ function ProfileListScreenLoaded({
             accessibilityHint=""
           />
         </View>
-    </ScreenHider>
+      </Hider.Content>
+    </Hider.Outer>
   )
 }