add tags view

src/view/com/composer/text-input/web/TagDecorator.ts

@@ -31,10 +31,11 @@ function getDecorations(doc: ProsemirrorNode) {
 
       let match
       while ((match = TAG_REGEX.exec(textContent))) {
-        const [, m] = match
+        const [m] = match
+        const hasLeadingSpace = /^\s/.test(m)
         const tag = m.trim().replace(/\p{P}+$/gu, '')
         if (tag.length > 66) continue
-        const from = match.index + 1
+        const from = match.index + (hasLeadingSpace ? 1 : 0)
         const to = from + tag.length + 1
         decorations.push(
           Decoration.inline(paragraphNode.pos + from, paragraphNode.pos + to, {

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

@@ -2,7 +2,7 @@ import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Linking, StyleSheet, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
-import {AtUri, AppBskyFeedDefs} from '@atproto/api'
+import {AtUri, AppBskyFeedDefs, AppBskyFeedPost} from '@atproto/api'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -326,11 +326,33 @@ export const PostThreadItem = observer(function PostThreadItem({
                 </ContentHider>
               )}
             </ContentHider>
+
+            {AppBskyFeedPost.isRecord(item.post.record) &&
+            item.post.record.tags?.length ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  flexWrap: 'wrap',
+                  gap: 8,
+                  paddingBottom: 12,
+                }}>
+                {item.post.record.tags.map(tag => (
+                  <Text
+                    key={tag}
+                    type="xs-medium"
+                    style={[styles.tag, pal.viewLight, pal.textLight]}>
+                    #{tag}
+                  </Text>
+                ))}
+              </View>
+            ) : null}
+
             <ExpandedPostDetails
               post={item.post}
               translatorUrl={translatorUrl}
               needsTranslation={needsTranslation}
             />
+
             {hasEngagement ? (
               <View style={[styles.expandedInfo, pal.border]}>
                 {item.post.repostCount ? (
@@ -720,4 +742,9 @@ const styles = StyleSheet.create({
     // @ts-ignore web only
     cursor: 'pointer',
   },
+  tag: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
 })

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

@@ -69,6 +69,7 @@ export function RichText({
   for (const segment of richText.segments()) {
     const link = segment.link
     const mention = segment.mention
+    const tag = segment.tag
     if (mention && AppBskyRichtextFacet.validateMention(mention).success) {
       els.push(
         <TextLink
@@ -91,6 +92,17 @@ export function RichText({
           dataSet={WORD_WRAP}
         />,
       )
+    } else if (tag && AppBskyRichtextFacet.validateTag(tag).success) {
+      els.push(
+        <TextLink
+          key={key}
+          type={type}
+          text={segment.text}
+          href={`/search?q=${tag.tag}`}
+          style={[style, lineHeightStyle, pal.link]}
+          dataSet={WORD_WRAP}
+        />,
+      )
     } else {
       els.push(segment.text)
     }