Add Hider component

src/components/moderation/Hider.tsx

@@ -0,0 +1,108 @@
+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>({
+  isContentVisible: false,
+  setIsContentVisible: () => {},
+  // @ts-ignore
+  info: {},
+  showInfoDialog: () => {},
+  meta: {
+    isNoPwi: false,
+    noOverride: false,
+  },
+})
+
+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 = React.useMemo(
+    () => ({
+      isNoPwi: !!modui.blurs.find(
+        cause =>
+          cause.type === 'label' &&
+          cause.labelDef.identifier === '!no-unauthenticated',
+      ),
+      noOverride: modui.noOverride,
+    }),
+    [modui],
+  )
+
+  const showInfoDialog = React.useCallback(() => {
+    control.open()
+  }, [control])
+
+  const onSetContentVisible = React.useCallback(
+    (show: boolean) => {
+      if (meta.noOverride) return
+      setIsContentVisible(show)
+    },
+    [setIsContentVisible, meta],
+  )
+
+  const ctx = React.useMemo(
+    () => ({
+      isContentVisible,
+      setIsContentVisible: onSetContentVisible,
+      showInfoDialog,
+      info,
+      meta,
+    }),
+    [isContentVisible, onSetContentVisible, info, meta, showInfoDialog],
+  )
+
+  return (
+    <Context.Provider value={ctx}>
+      {children}
+      <ModerationDetailsDialog control={control} modcause={blur} />
+    </Context.Provider>
+  )
+}
+
+export function Content({
+  children,
+}: {
+  children: (context: Context) => React.ReactNode
+}) {
+  const ctx = React.useContext(Context)
+  const child = React.useMemo(() => children(ctx), [ctx, children])
+  return ctx.isContentVisible ? child : null
+}
+
+export function Mask({
+  children,
+}: {
+  children: (context: Context) => React.ReactNode
+}) {
+  const ctx = React.useContext(Context)
+  const child = React.useMemo(() => children(ctx), [ctx, children])
+  return !ctx.isContentVisible ? child : null
+}

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,14 @@ 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 +237,18 @@ 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 +278,9 @@ function ProfileListScreenLoaded({
               accessibilityHint=""
             />
           </View>
-    </ScreenHider>
+        )}
+      </Hider.Content>
+    </Hider.Outer>
   )
 }