Fix profile hover card blocked state (#4480)

* Fix: mini profile on hover allows following a blocker/blocked user (#4423) (#4440)

* Tweaks

---------

Co-authored-by: Michał Gołda <michal.golda@hotmail.com>

src/components/ProfileHoverCard/index.web.tsx

@@ -5,6 +5,7 @@ import {flip, offset, shift, size, useFloating} from '@floating-ui/react-dom'
 import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {getModerationCauseKey} from '#/lib/moderation'
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -31,6 +32,7 @@ import {Loader} from '#/components/Loader'
 import {Portal} from '#/components/Portal'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
+import {ProfileLabel} from '../moderation/ProfileHeaderAlerts'
 import {ProfileHoverCardProps} from './types'
 
 const floatingMiddlewares = [
@@ -374,7 +376,10 @@ function Inner({
     profile: profileShadow,
     logContext: 'ProfileHoverCard',
   })
-  const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
+  const isBlockedUser =
+    profile.viewer?.blocking ||
+    profile.viewer?.blockedBy ||
+    profile.viewer?.blockingByList
   const following = formatCount(profile.followsCount || 0)
   const followers = formatCount(profile.followersCount || 0)
   const pluralizedFollowers = plural(profile.followersCount || 0, {
@@ -405,29 +410,41 @@ function Inner({
           />
         </Link>
 
-        {!isMe && (
+        {!isMe &&
-          <Button
+          (isBlockedUser ? (
-            size="small"
+            <Link
-            color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
+              to={profileURL}
-            variant="solid"
+              label={_(msg`View blocked user's profile`)}
-            label={
+              onPress={hide}
-              profileShadow.viewer?.following
+              size="small"
-                ? _(msg`Following`)
+              color="secondary"
-                : _(msg`Follow`)
+              variant="solid"
-            }
+              style={[a.rounded_full]}>
-            style={[a.rounded_full]}
+              <ButtonText>{_(msg`View profile`)}</ButtonText>
-            onPress={profileShadow.viewer?.following ? unfollow : follow}>
+            </Link>
-            <ButtonIcon
+          ) : (
-              position="left"
+            <Button
-              icon={profileShadow.viewer?.following ? Check : Plus}
+              size="small"
-            />
+              color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
-            <ButtonText>
+              variant="solid"
-              {profileShadow.viewer?.following
+              label={
-                ? _(msg`Following`)
+                profileShadow.viewer?.following
-                : _(msg`Follow`)}
+                  ? _(msg`Following`)
-            </ButtonText>
+                  : _(msg`Follow`)
-          </Button>
+              }
-        )}
+              style={[a.rounded_full]}
+              onPress={profileShadow.viewer?.following ? unfollow : follow}>
+              <ButtonIcon
+                position="left"
+                icon={profileShadow.viewer?.following ? Check : Plus}
+              />
+              <ButtonText>
+                {profileShadow.viewer?.following
+                  ? _(msg`Following`)
+                  : _(msg`Follow`)}
+              </ButtonText>
+            </Button>
+          ))}
       </View>
 
       <Link to={profileURL} label={_(msg`View profile`)} onPress={hide}>
@@ -443,7 +460,19 @@ function Inner({
         </View>
       </Link>
 
-      {!blockHide && (
+      {isBlockedUser && (
+        <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+          {moderation.ui('profileView').alerts.map(cause => (
+            <ProfileLabel
+              key={getModerationCauseKey(cause)}
+              cause={cause}
+              disableDetailsDialog
+            />
+          ))}
+        </View>
+      )}
+
+      {!isBlockedUser && (
         <>
           <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.pt_xs]}>
             <InlineLinkText

src/components/moderation/ProfileHeaderAlerts.tsx

@@ -43,7 +43,13 @@ export function ProfileHeaderAlerts({
   )
 }
 
-function ProfileLabel({cause}: {cause: ModerationCause}) {
+export function ProfileLabel({
+  cause,
+  disableDetailsDialog,
+}: {
+  cause: ModerationCause
+  disableDetailsDialog?: boolean
+}) {
   const t = useTheme()
   const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause)
@@ -51,6 +57,7 @@ function ProfileLabel({cause}: {cause: ModerationCause}) {
   return (
     <>
       <Button
+        disabled={disableDetailsDialog}
         label={desc.name}
         onPress={() => {
           control.open()
@@ -87,7 +94,9 @@ function ProfileLabel({cause}: {cause: ModerationCause}) {
         )}
       </Button>
 
-      <ModerationDetailsDialog control={control} modcause={cause} />
+      {!disableDetailsDialog && (
+        <ModerationDetailsDialog control={control} modcause={cause} />
+      )}
     </>
   )
 }