tidy up post reasons (#9194)

src/lib/moderation/create-sanitized-display-name.ts

@@ -1,3 +1,5 @@
+import {type ModerationUI} from '@atproto/api'
+
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import type * as bsky from '#/types/bsky'
@@ -5,9 +7,10 @@ import type * as bsky from '#/types/bsky'
 export function createSanitizedDisplayName(
   profile: bsky.profile.AnyProfileView,
   noAt = false,
+  moderation?: ModerationUI,
 ) {
   if (profile.displayName != null && profile.displayName !== '') {
-    return sanitizeDisplayName(profile.displayName)
+    return sanitizeDisplayName(profile.displayName, moderation)
   } else {
     return sanitizeHandle(profile.handle, noAt ? '' : '@')
   }

src/view/com/posts/PostFeedItem.tsx

@@ -9,21 +9,17 @@ import {
   type ModerationDecision,
   RichText as RichTextAPI,
 } from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {useActorStatus} from '#/lib/actor-status'
-import {isReasonFeedSource, type ReasonFeedSource} from '#/lib/api/feed/types'
+import {type ReasonFeedSource} from '#/lib/api/feed/types'
 import {MAX_POST_LINES} from '#/lib/constants'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
-import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {sanitizeHandle} from '#/lib/strings/handles'
 import {countLines} from '#/lib/strings/helpers'
 import {
   POST_TOMBSTONE,
@@ -38,14 +34,10 @@ import {
   buildPostSourceKey,
   setUnstablePostSource,
 } from '#/state/unstable-post-source'
-import {FeedNameText} from '#/view/com/util/FeedInfoText'
+import {Link} from '#/view/com/util/Link'
-import {Link, TextLinkOnWebOnly} from '#/view/com/util/Link'
 import {PostMeta} from '#/view/com/util/PostMeta'
-import {Text} from '#/view/com/util/text/Text'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
-import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
-import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
 import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
@@ -56,10 +48,10 @@ import {PostRepliedTo} from '#/components/Post/PostRepliedTo'
 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
 import {PostControls} from '#/components/PostControls'
 import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
-import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {RichText} from '#/components/RichText'
 import {SubtleHover} from '#/components/SubtleHover'
 import * as bsky from '#/types/bsky'
+import {PostFeedReason} from './PostFeedReason'
 
 interface FeedItemProps {
   record: AppBskyFeedPost.Record
@@ -173,7 +165,6 @@ let FeedItemInner = ({
   const navigation = useNavigation<NavigationProp>()
   const pal = usePalette('default')
   const gate = useGate()
-  const {_} = useLingui()
 
   const [hover, setHover] = useState(false)
 
@@ -275,11 +266,6 @@ let FeedItemInner = ({
     },
   ]
 
-  const {currentAccount} = useSession()
-  const isOwner =
-    AppBskyFeedDefs.isReasonRepost(reason) &&
-    reason.by.did === currentAccount?.did
-
   /**
    * If `post[0]` in this slice is the actual root post (not an orphan thread),
    * then we may have a threadgate record to reference
@@ -334,99 +320,14 @@ let FeedItemInner = ({
           )}
         </View>
 
-        <View style={{paddingTop: 10, flexShrink: 1}}>
+        <View style={[a.pt_sm, a.flex_shrink]}>
-          {isReasonFeedSource(reason) ? (
+          {reason && (
-            <Link href={reason.href}>
+            <PostFeedReason
-              <Text
+              reason={reason}
-                type="sm-bold"
+              moderation={moderation}
-                style={pal.textLight}
+              onOpenReposter={onOpenReposter}
-                lineHeight={1.2}
+            />
-                numberOfLines={1}>
+          )}
-                <Trans context="from-feed">
-                  From{' '}
-                  <FeedNameText
-                    type="sm-bold"
-                    uri={reason.uri}
-                    href={reason.href}
-                    lineHeight={1.2}
-                    numberOfLines={1}
-                    style={pal.textLight}
-                  />
-                </Trans>
-              </Text>
-            </Link>
-          ) : AppBskyFeedDefs.isReasonRepost(reason) ? (
-            <Link
-              style={styles.includeReason}
-              href={makeProfileLink(reason.by)}
-              title={
-                isOwner
-                  ? _(msg`Reposted by you`)
-                  : _(
-                      msg`Reposted by ${sanitizeDisplayName(
-                        reason.by.displayName || reason.by.handle,
-                      )}`,
-                    )
-              }
-              onBeforePress={onOpenReposter}>
-              <RepostIcon
-                style={{color: pal.colors.textLight, marginRight: 3}}
-                width={13}
-                height={13}
-              />
-              <Text
-                type="sm-bold"
-                style={pal.textLight}
-                lineHeight={1.2}
-                numberOfLines={1}>
-                {isOwner ? (
-                  <Trans>Reposted by you</Trans>
-                ) : (
-                  <Trans>
-                    Reposted by{' '}
-                    <ProfileHoverCard did={reason.by.did}>
-                      <TextLinkOnWebOnly
-                        type="sm-bold"
-                        style={pal.textLight}
-                        lineHeight={1.2}
-                        numberOfLines={1}
-                        text={
-                          <Text
-                            emoji
-                            type="sm-bold"
-                            style={pal.textLight}
-                            lineHeight={1.2}>
-                            {sanitizeDisplayName(
-                              reason.by.displayName ||
-                                sanitizeHandle(reason.by.handle),
-                              moderation.ui('displayName'),
-                            )}
-                          </Text>
-                        }
-                        href={makeProfileLink(reason.by)}
-                        onBeforePress={onOpenReposter}
-                      />
-                    </ProfileHoverCard>
-                  </Trans>
-                )}
-              </Text>
-            </Link>
-          ) : AppBskyFeedDefs.isReasonPin(reason) ? (
-            <View style={styles.includeReason}>
-              <PinIcon
-                style={{color: pal.colors.textLight, marginRight: 3}}
-                width={13}
-                height={13}
-              />
-              <Text
-                type="sm-bold"
-                style={pal.textLight}
-                lineHeight={1.2}
-                numberOfLines={1}>
-                <Trans>Pinned</Trans>
-              </Text>
-            </View>
-          ) : null}
         </View>
       </View>
 
@@ -602,12 +503,6 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  includeReason: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 2,
-    marginLeft: -16,
-  },
   layout: {
     flexDirection: 'row',
     marginTop: 1,

src/view/com/posts/PostFeedReason.tsx

@@ -0,0 +1,139 @@
+import {StyleSheet, View} from 'react-native'
+import {AppBskyFeedDefs, type ModerationDecision} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isReasonFeedSource, type ReasonFeedSource} from '#/lib/api/feed/types'
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
+import {makeProfileLink} from '#/lib/routes/links'
+import {useSession} from '#/state/session'
+import {atoms as a, useTheme} from '#/alf'
+import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
+import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
+import {Link, WebOnlyInlineLinkText} from '#/components/Link'
+import {ProfileHoverCard} from '#/components/ProfileHoverCard'
+import {Text} from '#/components/Typography'
+import {FeedNameText} from '../util/FeedInfoText'
+
+export function PostFeedReason({
+  reason,
+  moderation,
+  onOpenReposter,
+}: {
+  reason:
+    | ReasonFeedSource
+    | AppBskyFeedDefs.ReasonRepost
+    | AppBskyFeedDefs.ReasonPin
+    | {[k: string]: unknown; $type: string}
+  moderation?: ModerationDecision
+  onOpenReposter?: () => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const {currentAccount} = useSession()
+
+  if (isReasonFeedSource(reason)) {
+    return (
+      <Link label={_(msg`Go to feed`)} to={reason.href}>
+        <Text
+          style={[
+            t.atoms.text_contrast_medium,
+            a.font_medium,
+            a.leading_snug,
+            a.leading_snug,
+          ]}
+          numberOfLines={1}>
+          <Trans context="from-feed">
+            From{' '}
+            <FeedNameText
+              uri={reason.uri}
+              href={reason.href}
+              style={[
+                t.atoms.text_contrast_medium,
+                a.font_medium,
+                a.leading_snug,
+              ]}
+              numberOfLines={1}
+            />
+          </Trans>
+        </Text>
+      </Link>
+    )
+  }
+
+  if (AppBskyFeedDefs.isReasonRepost(reason)) {
+    const isOwner = reason.by.did === currentAccount?.did
+    const reposter = createSanitizedDisplayName(
+      reason.by,
+      false,
+      moderation?.ui('displayName'),
+    )
+    return (
+      <Link
+        style={styles.includeReason}
+        to={makeProfileLink(reason.by)}
+        label={
+          isOwner ? _(msg`Reposted by you`) : _(msg`Reposted by ${reposter}`)
+        }
+        onPress={onOpenReposter}>
+        <RepostIcon
+          style={[t.atoms.text_contrast_medium, {marginRight: 3}]}
+          width={13}
+          height={13}
+        />
+        <Text
+          style={[t.atoms.text_contrast_medium, a.font_medium, a.leading_snug]}
+          numberOfLines={1}>
+          {isOwner ? (
+            <Trans>Reposted by you</Trans>
+          ) : (
+            <Trans>
+              Reposted by{' '}
+              <ProfileHoverCard did={reason.by.did}>
+                <WebOnlyInlineLinkText
+                  label={reposter}
+                  numberOfLines={1}
+                  to={makeProfileLink(reason.by)}
+                  onPress={onOpenReposter}
+                  style={[
+                    t.atoms.text_contrast_medium,
+                    a.font_medium,
+                    a.leading_snug,
+                  ]}>
+                  {reposter}
+                </WebOnlyInlineLinkText>
+              </ProfileHoverCard>
+            </Trans>
+          )}
+        </Text>
+      </Link>
+    )
+  }
+
+  if (AppBskyFeedDefs.isReasonPin(reason)) {
+    return (
+      <View style={styles.includeReason}>
+        <PinIcon
+          style={[t.atoms.text_contrast_medium, {marginRight: 3}]}
+          width={13}
+          height={13}
+        />
+        <Text
+          style={[t.atoms.text_contrast_medium, a.font_medium, a.leading_snug]}
+          numberOfLines={1}>
+          <Trans>Pinned</Trans>
+        </Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  includeReason: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 2,
+    marginLeft: -16,
+  },
+})

src/view/com/util/FeedInfoText.tsx

@@ -1,54 +1,51 @@
-import {type StyleProp, StyleSheet, type TextStyle} from 'react-native'
+import {type StyleProp, type TextStyle} from 'react-native'
 
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {type TypographyVariant} from '#/lib/ThemeContext'
 import {useFeedSourceInfoQuery} from '#/state/queries/feed'
-import {TextLinkOnWebOnly} from './Link'
+import {atoms as a, platform} from '#/alf'
+import {WebOnlyInlineLinkText} from '#/components/Link'
 import {LoadingPlaceholder} from './LoadingPlaceholder'
 
 export function FeedNameText({
-  type = 'md',
   uri,
   href,
-  lineHeight,
   numberOfLines,
   style,
 }: {
-  type?: TypographyVariant
   uri: string
   href: string
-  lineHeight?: number
   numberOfLines?: number
   style?: StyleProp<TextStyle>
 }) {
   const {data, isError} = useFeedSourceInfoQuery({uri})
 
   let inner
-  if (data?.displayName || isError) {
+  if (data || isError) {
     const displayName = data?.displayName || uri.split('/').pop() || ''
     inner = (
-      <TextLinkOnWebOnly
+      <WebOnlyInlineLinkText
-        type={type}
+        to={href}
+        label={displayName}
         style={style}
-        lineHeight={lineHeight}
+        numberOfLines={numberOfLines}>
-        numberOfLines={numberOfLines}
+        {sanitizeDisplayName(displayName)}
-        href={href}
+      </WebOnlyInlineLinkText>
-        text={sanitizeDisplayName(displayName)}
-      />
     )
   } else {
     inner = (
       <LoadingPlaceholder
         width={80}
         height={8}
-        style={styles.loadingPlaceholder}
+        style={[
+          a.ml_2xs,
+          platform({
+            native: [a.mt_2xs],
+            web: [{top: -1}],
+          }),
+        ]}
       />
     )
   }
 
   return inner
 }
-
-const styles = StyleSheet.create({
-  loadingPlaceholder: {position: 'relative', top: 1, left: 2},
-})