don't underline handle in post meta (#3591)

* alignment remove the unnecessary styles now seriously? flex-end everything flex shrink test test rm unneeded flex flex the text don't underline handle in post meta * use `paddingLeft` * use `paddingLeft` but with `4` * Fix overflow color * Use nbsp to make mobile work --------- Co-authored-by: Dan Abramov <[email protected]>
bluesky-social · Apr 18, 2024 · 086dc93 · 086dc93
1 parent 7e16276
commit 086dc93
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
@@ -2,34 +2,35 @@ import React, {ComponentProps, memo, useMemo} from 'react'
 import {
   GestureResponderEvent,
   Platform,
+  Pressable,
   StyleProp,
-  TextStyle,
   TextProps,
+  TextStyle,
+  TouchableOpacity,
   View,
   ViewStyle,
-  Pressable,
-  TouchableOpacity,
 } from 'react-native'
-import {useLinkProps, StackActions} from '@react-navigation/native'
-import {Text} from './text/Text'
-import {TypographyVariant} from 'lib/ThemeContext'
-import {router} from '../../../routes'
-import {
-  convertBskyAppUrlIfNeeded,
-  isExternalUrl,
-  linkRequiresWarning,
-} from 'lib/strings/url-helpers'
-import {isAndroid, isWeb} from 'platform/detection'
 import {sanitizeUrl} from '@braintree/sanitize-url'
-import {PressableWithHover} from './PressableWithHover'
+import {StackActions, useLinkProps} from '@react-navigation/native'
+
 import {useModalControls} from '#/state/modals'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper'
 import {
   DebouncedNavigationProp,
   useNavigationDeduped,
 } from 'lib/hooks/useNavigationDeduped'
+import {
+  convertBskyAppUrlIfNeeded,
+  isExternalUrl,
+  linkRequiresWarning,
+} from 'lib/strings/url-helpers'
+import {TypographyVariant} from 'lib/ThemeContext'
+import {isAndroid, isWeb} from 'platform/detection'
+import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper'
 import {useTheme} from '#/alf'
+import {router} from '../../../routes'
+import {PressableWithHover} from './PressableWithHover'
+import {Text} from './text/Text'
 
 type Event =
   | React.MouseEvent<HTMLAnchorElement, MouseEvent>
@@ -149,6 +150,7 @@ export const TextLink = memo(function TextLink({
   onPress,
   disableMismatchWarning,
   navigationAction,
+  anchorNoUnderline,
   ...orgProps
 }: {
   testID?: string
@@ -162,6 +164,7 @@ export const TextLink = memo(function TextLink({
   title?: string
   disableMismatchWarning?: boolean
   navigationAction?: 'push' | 'replace' | 'navigate'
+  anchorNoUnderline?: boolean
 } & TextProps) {
   const {...props} = useLinkProps({to: sanitizeUrl(href)})
   const navigation = useNavigationDeduped()
@@ -172,6 +175,11 @@ export const TextLink = memo(function TextLink({
     console.error('Unable to detect mismatching label')
   }
 
+  if (anchorNoUnderline) {
+    dataSet = dataSet ?? {}
+    dataSet.noUnderline = 1
+  }
+
   props.onPress = React.useCallback(
     (e?: Event) => {
       const requiresWarning =
@@ -267,6 +275,7 @@ interface TextLinkOnWebOnlyProps extends TextProps {
   navigationAction?: 'push' | 'replace' | 'navigate'
   disableMismatchWarning?: boolean
   onPointerEnter?: () => void
+  anchorNoUnderline?: boolean
 }
 export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({
   testID,

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
@@ -35,6 +35,11 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
   const handle = opts.author.handle
   const prefetchProfileQuery = usePrefetchProfileQuery()
 
+  const profileLink = makeProfileLink(opts.author)
+  const onPointerEnter = isWeb
+    ? () => prefetchProfileQuery(opts.author.did)
+    : undefined
+
   return (
     <View style={[styles.container, opts.style]}>
       {opts.showAvatar && (
@@ -49,11 +54,10 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
           />
         </View>
       )}
-      <View style={styles.maxWidth}>
+      <Text numberOfLines={1} style={[styles.maxWidth, pal.textLight]}>
         <TextLinkOnWebOnly
           type={opts.displayNameType || 'lg-bold'}
           style={[pal.text, opts.displayNameStyle]}
-          numberOfLines={1}
           lineHeight={1.2}
           disableMismatchWarning
           text={
@@ -62,22 +66,21 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
                 displayName,
                 opts.moderation?.ui('displayName'),
               )}
-              &nbsp;
-              <Text
-                type="md"
-                numberOfLines={1}
-                lineHeight={1.2}
-                style={pal.textLight}>
-                {sanitizeHandle(handle, '@')}
-              </Text>
             </>
           }
-          href={makeProfileLink(opts.author)}
-          onPointerEnter={
-            isWeb ? () => prefetchProfileQuery(opts.author.did) : undefined
-          }
+          href={profileLink}
+          onPointerEnter={onPointerEnter}
+        />
+        <TextLinkOnWebOnly
+          type="md"
+          disableMismatchWarning
+          style={[pal.textLight, {flexShrink: 4}]}
+          text={'\xa0' + sanitizeHandle(handle, '@')}
+          href={profileLink}
+          onPointerEnter={onPointerEnter}
+          anchorNoUnderline
         />
-      </View>
+      </Text>
       {!isAndroid && (
         <Text
           type="md"
@@ -110,7 +113,7 @@ export {PostMeta}
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     paddingBottom: 2,
     gap: 4,
     zIndex: 1,