[Neue] Post avi, PostMeta cleanup (#5450)

* Support emoji in text with custom font * Add emoji support to elements that need it * Remove unused file causing lint failure * Add web only link variant * Refactor PostMeta * Reduce avi size in feeds * Fix alignment, emoji, in PostMeta * Smaller avis in notifications * Shrink post placeholder avi * Handle the handle again * Link cleanup * Cleanup unused props * Fix text wrapping in timestamp * Fix underline color * Tighten up spacing * Web only whiteSpace
2024-09-24 20:10:13 -05:00
parent 2429d5d1ae
commit b38d4697b7
10 changed files with 120 additions and 117 deletions
@@ -7,9 +7,9 @@ import {
  ViewStyle,
 } from 'react-native'

-import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {s} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
 import {atoms as a, useTheme as useTheme_NEW} from '#/alf'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
 import {
@@ -53,8 +53,8 @@ export function PostLoadingPlaceholder({
  return (
    <View style={[styles.post, pal.view, style]}>
      <LoadingPlaceholder
-        width={52}
-        height={52}
+        width={42}
+        height={42}
        style={[
          styles.avatar,
          {
@@ -1,44 +1,40 @@
 import React, {memo, useCallback} from 'react'
-import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
+import {StyleProp, 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, web} from '#/alf'
+import {WebOnlyInlineLinkText} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
-import {TextLinkOnWebOnly} from './Link'
-import {Text} from './text/Text'
+import {Text} from '#/components/Typography'
 import {TimeElapsed} from './TimeElapsed'
 import {PreviewableUserAvatar} from './UserAvatar'

 interface PostMetaOpts {
  author: AppBskyActorDefs.ProfileViewBasic
  moderation: ModerationDecision | undefined
-  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 +49,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,63 +70,67 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
        </View>
      )}
      <ProfileHoverCard inline did={opts.author.did}>
-        <Text
-          numberOfLines={1}
-          style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
-          <TextLinkOnWebOnly
-            type={opts.displayNameType || 'lg-bold'}
-            style={[pal.text]}
-            lineHeight={1.2}
+        <Text numberOfLines={1} style={[a.flex_shrink]}>
+          <WebOnlyInlineLinkText
+            to={profileLink}
+            label={_(msg`View profile`)}
            disableMismatchWarning
-            text={
-              <Text
-                type={opts.displayNameType || 'lg-bold'}
-                emoji
-                style={[pal.text]}
-                lineHeight={1.2}>
-                {forceLTR(
-                  sanitizeDisplayName(
-                    displayName,
-                    opts.moderation?.ui('displayName'),
-                  ),
-                )}
-              </Text>
-            }
-            href={profileLink}
-            onBeforePress={onBeforePressAuthor}
-          />
-          <TextLinkOnWebOnly
-            type="md"
+            onPress={onBeforePressAuthor}
+            style={[t.atoms.text]}>
+            <Text emoji style={[a.text_md, a.font_bold, a.leading_tight]}>
+              {forceLTR(
+                sanitizeDisplayName(
+                  displayName,
+                  opts.moderation?.ui('displayName'),
+                ),
+              )}
+            </Text>
+          </WebOnlyInlineLinkText>
+          <WebOnlyInlineLinkText
+            to={profileLink}
+            label={_(msg`View profile`)}
            disableMismatchWarning
-            style={[pal.textLight, {flexShrink: 4}]}
-            text={
-              <Text emoji style={[pal.textLight, {flexShrink: 4}]}>
-                {NON_BREAKING_SPACE + sanitizeHandle(handle, '@')}
-              </Text>
-            }
-            href={profileLink}
-            onBeforePress={onBeforePressAuthor}
-            anchorNoUnderline
-          />
+            disableUnderline
+            onPress={onBeforePressAuthor}
+            style={[a.text_md, t.atoms.text_contrast_medium, a.leading_tight]}>
+            <Text
+              emoji
+              style={[
+                a.text_md,
+                t.atoms.text_contrast_medium,
+                a.leading_tight,
+              ]}>
+              {NON_BREAKING_SPACE + sanitizeHandle(handle, '@')}
+            </Text>
+          </WebOnlyInlineLinkText>
        </Text>
      </ProfileHoverCard>
-      {!isAndroid && (
-        <Text type="md" style={pal.textLight} accessible={false}>
-          &middot;
-        </Text>
-      )}
+
+      <Text
+        style={[a.text_md, t.atoms.text_contrast_medium]}
+        accessible={false}>
+        &middot;
+      </Text>
+
      <TimeElapsed timestamp={opts.timestamp}>
        {({timeElapsed}) => (
-          <TextLinkOnWebOnly
-            type="md"
-            style={pal.textLight}
-            text={timeElapsed}
-            accessibilityLabel={niceDate(i18n, opts.timestamp)}
+          <WebOnlyInlineLinkText
+            to={opts.postHref}
+            label={niceDate(i18n, opts.timestamp)}
            title={niceDate(i18n, opts.timestamp)}
-            accessibilityHint=""
-            href={opts.postHref}
-            onBeforePress={onBeforePressPost}
-          />
+            disableMismatchWarning
+            disableUnderline
+            onPress={onBeforePressPost}
+            style={[
+              a.text_md,
+              t.atoms.text_contrast_medium,
+              a.leading_tight,
+              web({
+                whiteSpace: 'nowrap',
+              }),
+            ]}>
+            {timeElapsed}
+          </WebOnlyInlineLinkText>
        )}
      </TimeElapsed>
    </View>
@@ -129,21 +138,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,
-  },
-})
@@ -24,15 +24,15 @@ import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'

 import {HITSLOP_20} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {InfoCircleIcon} from '#/lib/icons'
 import {moderatePost_wrapped} from '#/lib/moderatePost_wrapped'
+import {makeProfileLink} from '#/lib/routes/links'
 import {s} from '#/lib/styles'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {precacheProfile} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
-import {usePalette} from 'lib/hooks/usePalette'
-import {InfoCircleIcon} from 'lib/icons'
-import {makeProfileLink} from 'lib/routes/links'
-import {precacheProfile} from 'state/queries/profile'
-import {ComposerOptsQuote} from 'state/shell/composer'
+import {ComposerOptsQuote} from '#/state/shell/composer'
 import {atoms as a, useTheme} from '#/alf'
 import {RichText} from '#/components/RichText'
 import {ContentHider} from '../../../../components/moderation/ContentHider'
@@ -238,7 +238,6 @@ export function QuoteEmbed({
            author={quote.author}
            moderation={moderation}
            showAvatar
-            authorHasWarning={false}
            postHref={itemHref}
            timestamp={quote.indexedAt}
          />