Tweak rendering of hashtags and expanded posts for clarity and information density

src/view/com/Tag.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, Pressable} from 'react-native'
+import {StyleSheet, Pressable, StyleProp, TextStyle} from 'react-native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -7,18 +7,25 @@ import {
 
 import {isWeb} from 'platform/detection'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme} from 'lib/ThemeContext'
 import {Text, CustomTextProps} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 
 export function Tag({
   value,
   textSize,
+  smallSigil,
+  style,
 }: {
   value: string
   textSize?: CustomTextProps['type']
+  smallSigil?: boolean
+  style?: StyleProp<TextStyle>
 }) {
-  const pal = usePalette('default')
+  const theme = useTheme()
   const type = textSize || 'xs-medium'
+  const typeFontSize = theme.typography[type].fontSize || 16
+  const hashtagFontSize = typeFontSize * (smallSigil ? 0.8 : 1)
 
   return (
     <TextLink
@@ -26,8 +33,19 @@ export function Tag({
       text={`#${value}`}
       accessible
       href={`/search?q=${value}`}
-      style={[pal.textLight]}
+      style={style}>
-    />
+      <Text
+        style={[
+          style,
+          {
+            fontSize: hashtagFontSize,
+            fontWeight: '500',
+          },
+        ]}>
+        #
+      </Text>
+      {value}
+    </TextLink>
   )
 }
 

src/view/com/post-thread/PostThreadItem.tsx

@@ -53,7 +53,6 @@ export const PostThreadItem = observer(function PostThreadItem({
   const [deleted, setDeleted] = React.useState(false)
   const styles = useStyles()
   const record = item.postRecord
-  const hasEngagement = item.post.likeCount || item.post.repostCount
 
   const itemUri = item.post.uri
   const itemCid = item.post.cid
@@ -332,25 +331,29 @@ export const PostThreadItem = observer(function PostThreadItem({
               )}
             </ContentHider>
 
-            {AppBskyFeedPost.isRecord(item.post.record) &&
+            <View style={[styles.expandedInfo, pal.border]}>
-            item.post.record.tags?.length ? (
+              {item.post.repostCount ? (
-              <View
+                <Link href={repostsHref} title={repostsTitle}>
-                style={[
+                  <Text testID="repostCount" type="lg" style={pal.textLight}>
-                  pal.border,
+                    <Text type="xl-bold" style={pal.text}>
-                  {
+                      {formatCount(item.post.repostCount)}
-                    flexDirection: 'row',
+                    </Text>{' '}
-                    flexWrap: 'wrap',
+                    {pluralize(item.post.repostCount, 'repost')}
-                    gap: 8,
+                  </Text>
-                    paddingBottom: 12,
+                </Link>
-                    marginBottom: 12,
+              ) : null}
-                    borderBottomWidth: 1,
+              {item.post.likeCount ? (
-                  },
+                <Link href={likesHref} title={likesTitle}>
-                ]}>
+                  <Text testID="likeCount" type="lg" style={pal.textLight}>
-                {item.post.record.tags.map(tag => (
+                    <Text type="xl-bold" style={pal.text}>
-                  <Tag key={tag} value={tag} textSize="md-medium" />
+                      {formatCount(item.post.likeCount)}
-                ))}
+                    </Text>{' '}
-              </View>
+                    {pluralize(item.post.likeCount, 'like')}
-            ) : null}
+                  </Text>
+                </Link>
+              ) : null}
+              <Text style={pal.textLight}>{niceDate(item.post.indexedAt)}</Text>
+            </View>
 
             <ExpandedPostDetails
               post={item.post}
@@ -358,43 +361,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               needsTranslation={needsTranslation}
             />
 
-            {hasEngagement ? (
+            <View style={{paddingTop: 15, paddingBottom: 5}}>
-              <View style={[styles.expandedInfo, pal.border]}>
-                {item.post.repostCount ? (
-                  <Link
-                    style={styles.expandedInfoItem}
-                    href={repostsHref}
-                    title={repostsTitle}>
-                    <Text testID="repostCount" type="lg" style={pal.textLight}>
-                      <Text type="xl-bold" style={pal.text}>
-                        {formatCount(item.post.repostCount)}
-                      </Text>{' '}
-                      {pluralize(item.post.repostCount, 'repost')}
-                    </Text>
-                  </Link>
-                ) : (
-                  <></>
-                )}
-                {item.post.likeCount ? (
-                  <Link
-                    style={styles.expandedInfoItem}
-                    href={likesHref}
-                    title={likesTitle}>
-                    <Text testID="likeCount" type="lg" style={pal.textLight}>
-                      <Text type="xl-bold" style={pal.text}>
-                        {formatCount(item.post.likeCount)}
-                      </Text>{' '}
-                      {pluralize(item.post.likeCount, 'like')}
-                    </Text>
-                  </Link>
-                ) : (
-                  <></>
-                )}
-              </View>
-            ) : (
-              <></>
-            )}
-            <View style={[s.pb5]}>
               <PostCtrls
                 big
                 itemUri={itemUri}
@@ -649,17 +616,37 @@ function ExpandedPostDetails({
   translatorUrl: string
 }) {
   const pal = usePalette('default')
+  const hasTags =
+    AppBskyFeedPost.isRecord(post.record) && post.record.tags?.length
+  if (!hasTags && !needsTranslation) {
+    return null
+  }
   return (
-    <View style={[s.flexRow, s.mt2, s.mb10]}>
+    <View
-      <Text style={pal.textLight}>{niceDate(post.indexedAt)}</Text>
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginTop: 10,
+        marginBottom: 2,
+        rowGap: 6,
+        columnGap: 8,
+      }}>
       {needsTranslation && (
-        <>
+        <Link href={translatorUrl} title="Translate">
-          <Text style={pal.textLight}> • </Text>
+          <Text style={pal.link}>Translate</Text>
-          <Link href={translatorUrl} title="Translate">
+        </Link>
-            <Text style={pal.link}>Translate</Text>
-          </Link>
-        </>
       )}
+      {hasTags && AppBskyFeedPost.isRecord(post.record)
+        ? post.record.tags!.map(tag => (
+            <Tag
+              key={tag}
+              value={tag}
+              textSize="md"
+              style={pal.textLight}
+              smallSigil
+            />
+          ))
+        : null}
     </View>
   )
 }
@@ -714,7 +701,7 @@ const useStyles = () => {
     },
     postTextLargeContainer: {
       paddingHorizontal: 0,
-      paddingBottom: 10,
+      // paddingBottom: 10,
     },
     translateLink: {
       marginBottom: 6,
@@ -727,14 +714,14 @@ const useStyles = () => {
     },
     expandedInfo: {
       flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'baseline',
+      gap: 12,
       paddingVertical: 10,
+      paddingHorizontal: 2,
       borderTopWidth: 1,
       borderBottomWidth: 1,
       marginTop: 5,
-      marginBottom: 15,
-    },
-    expandedInfoItem: {
-      marginRight: 10,
     },
     loadMore: {
       flexDirection: 'row',

src/view/com/util/Link.tsx

@@ -148,19 +148,22 @@ export const TextLink = observer(function TextLink({
   title,
   onPress,
   warnOnMismatchingLabel,
+  children,
   ...orgProps
-}: {
+}: React.PropsWithChildren<
-  testID?: string
+  {
-  type?: TypographyVariant
+    testID?: string
-  style?: StyleProp<TextStyle>
+    type?: TypographyVariant
-  href: string
+    style?: StyleProp<TextStyle>
-  text: string | JSX.Element | React.ReactNode
+    href: string
-  numberOfLines?: number
+    text: string | JSX.Element | React.ReactNode
-  lineHeight?: number
+    numberOfLines?: number
-  dataSet?: any
+    lineHeight?: number
-  title?: string
+    dataSet?: any
-  warnOnMismatchingLabel?: boolean
+    title?: string
-} & TextProps) {
+    warnOnMismatchingLabel?: boolean
+  } & TextProps
+>) {
   const {...props} = useLinkProps({to: sanitizeUrl(href)})
   const store = useStores()
   const navigation = useNavigation<NavigationProp>()
@@ -215,7 +218,7 @@ export const TextLink = observer(function TextLink({
       hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
       {...props}
       {...orgProps}>
-      {text}
+      {children || text}
     </Text>
   )
 })

src/view/com/util/text/RichText.tsx

@@ -95,7 +95,15 @@ export function RichText({
         />,
       )
     } else if (tag && AppBskyRichtextFacet.validateTag(tag).success) {
-      els.push(<Tag key={key} value={tag.tag} textSize={type} />)
+      els.push(
+        <Tag
+          key={key}
+          value={tag.tag}
+          textSize={type}
+          style={pal.link}
+          smallSigil
+        />,
+      )
     } else {
       els.push(segment.text)
     }