Refactor PostMeta

src/view/com/util/PostMeta.tsx

@@ -1,44 +1,46 @@
 import React, {memo, useCallback} from 'react'
-import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
 import {AppBskyActorDefs, ModerationDecision, ModerationUI} from '@atproto/api'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
 import {forceLTR} from '#/lib/strings/bidi'
 import {NON_BREAKING_SPACE} from '#/lib/strings/constants'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {niceDate} from '#/lib/strings/time'
-import {TypographyVariant} from '#/lib/ThemeContext'
 import {isAndroid} from '#/platform/detection'
 import {precacheProfile} from '#/state/queries/profile'
+import {atoms as a, useTheme} from '#/alf'
+import {WebOnlyInlineLinkText} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
-import {TextLinkOnWebOnly} from './Link'
+import {Text} from '#/components/Typography'
-import {Text} from './text/Text'
 import {TimeElapsed} from './TimeElapsed'
 import {PreviewableUserAvatar} from './UserAvatar'
 
 interface PostMetaOpts {
   author: AppBskyActorDefs.ProfileViewBasic
   moderation: ModerationDecision | undefined
+  /**
+   * @deprecated not in use for 6+ months
+   */
   authorHasWarning: boolean
   postHref: string
   timestamp: string
   showAvatar?: boolean
   avatarModeration?: ModerationUI
   avatarSize?: number
-  displayNameType?: TypographyVariant
   displayNameStyle?: StyleProp<TextStyle>
   onOpenAuthor?: () => void
   style?: StyleProp<ViewStyle>
 }
 
 let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
-  const {i18n} = useLingui()
+  const t = useTheme()
+  const {i18n, _} = useLingui()
 
-  const pal = usePalette('default')
   const displayName = opts.author.displayName || opts.author.handle
   const handle = opts.author.handle
   const profileLink = makeProfileLink(opts.author)
@@ -53,9 +55,18 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
   }, [queryClient, opts.author])
 
   return (
-    <View style={[styles.container, opts.style]}>
+    <View
+      style={[
+        a.flex_1,
+        a.flex_row,
+        a.align_center,
+        a.pb_2xs,
+        a.gap_xs,
+        a.z_10,
+        opts.style,
+      ]}>
       {opts.showAvatar && (
-        <View style={styles.avatar}>
+        <View style={[a.self_center, a.mr_2xs]}>
           <PreviewableUserAvatar
             size={opts.avatarSize || 16}
             profile={opts.author}
@@ -65,20 +76,15 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
         </View>
       )}
       <ProfileHoverCard inline did={opts.author.did}>
-        <Text
+        <Text numberOfLines={1} style={[a.flex_shrink, opts.displayNameStyle]}>
-          numberOfLines={1}
+          <WebOnlyInlineLinkText
-          style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
+            to={profileLink}
-          <TextLinkOnWebOnly
+            label={_(msg`View profile`)}
-            type={opts.displayNameType || 'lg-bold'}
-            style={[pal.text]}
-            lineHeight={1.2}
             disableMismatchWarning
-            text={
+            onPress={onBeforePressAuthor}>
             <Text
-                type={opts.displayNameType || 'lg-bold'}
               emoji
-                style={[pal.text]}
+              style={[a.text_md, a.font_bold, t.atoms.text, a.leading_snug]}>
-                lineHeight={1.2}>
               {forceLTR(
                 sanitizeDisplayName(
                   displayName,
@@ -86,38 +92,39 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
                 ),
               )}
             </Text>
-            }
+          </WebOnlyInlineLinkText>
-            href={profileLink}
+          <WebOnlyInlineLinkText
-            onBeforePress={onBeforePressAuthor}
+            to={profileLink}
-          />
+            label={_(msg`View profile`)}
-          <TextLinkOnWebOnly
-            type="md"
             disableMismatchWarning
-            style={[pal.textLight, {flexShrink: 4}]}
+            disableUnderline
-            text={NON_BREAKING_SPACE + sanitizeHandle(handle, '@')}
+            onPress={onBeforePressAuthor}
-            href={profileLink}
+            style={[a.text_md, t.atoms.text_contrast_medium, a.leading_snug]}>
-            onBeforePress={onBeforePressAuthor}
+            {NON_BREAKING_SPACE + sanitizeHandle(handle, '@')}
-            anchorNoUnderline
+          </WebOnlyInlineLinkText>
-          />
         </Text>
       </ProfileHoverCard>
+
       {!isAndroid && (
-        <Text type="md" style={pal.textLight} accessible={false}>
+        <Text
+          style={[a.text_md, t.atoms.text_contrast_medium]}
+          accessible={false}>
           &middot;
         </Text>
       )}
+
       <TimeElapsed timestamp={opts.timestamp}>
         {({timeElapsed}) => (
-          <TextLinkOnWebOnly
+          <WebOnlyInlineLinkText
-            type="md"
+            to={opts.postHref}
-            style={pal.textLight}
+            label={niceDate(i18n, opts.timestamp)}
-            text={timeElapsed}
-            accessibilityLabel={niceDate(i18n, opts.timestamp)}
             title={niceDate(i18n, opts.timestamp)}
-            accessibilityHint=""
+            disableMismatchWarning
-            href={opts.postHref}
+            disableUnderline
-            onBeforePress={onBeforePressPost}
+            onPress={onBeforePressPost}
-          />
+            style={[a.text_md, t.atoms.text_contrast_medium, a.leading_snug]}>
+            {timeElapsed}
+          </WebOnlyInlineLinkText>
         )}
       </TimeElapsed>
     </View>
@@ -125,21 +132,3 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
 }
 PostMeta = memo(PostMeta)
 export {PostMeta}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingBottom: 2,
-    gap: 4,
-    zIndex: 1,
-    flex: 1,
-  },
-  avatar: {
-    alignSelf: 'center',
-  },
-  maxWidth: {
-    flex: isAndroid ? 1 : undefined,
-    flexShrink: isAndroid ? undefined : 1,
-  },
-})