[APP-782] Support invalid handles correctly (#1049)

* Update profile link construction to support handle.invalid

* Update list links  to support using handles

* Use did for isMe check to ensure invalid handles dont distort the check

* Shift the red (error) colors away from the pink spectrum

* Add ThemedText helper component

* Add sanitizedHandle() helper to render invalid handles well

* Fix regression: only show avatar in PostMeta when needed

* Restore the color of likes

* Remove users with invalid handles from default autosuggests

1 files changed, 15 insertions, 21 deletions

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index efc9fe694..0680bbc06 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -17,6 +17,7 @@ import {PreviewableUserAvatar} from '../util/UserAvatar'
 import {s} from 'lib/styles'
 import {niceDate} from 'lib/strings/time'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeHandle} from 'lib/strings/handles'
 import {pluralize} from 'lib/strings/helpers'
 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
 import {useStores} from 'state/index'
@@ -31,6 +32,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 import {formatCount} from '../util/numeric/format'
 import {TimeElapsed} from 'view/com/util/TimeElapsed'
+import {makeProfileLink} from 'lib/routes/links'
 
 const PARENT_REPLY_LINE_LENGTH = 8
 
@@ -51,20 +53,20 @@ export const PostThreadItem = observer(function PostThreadItem({
   const itemCid = item.post.cid
   const itemHref = React.useMemo(() => {
     const urip = new AtUri(item.post.uri)
-    return `/profile/${item.post.author.handle}/post/${urip.rkey}`
-  }, [item.post.uri, item.post.author.handle])
+    return makeProfileLink(item.post.author, 'post', urip.rkey)
+  }, [item.post.uri, item.post.author])
   const itemTitle = `Post by ${item.post.author.handle}`
-  const authorHref = `/profile/${item.post.author.handle}`
+  const authorHref = makeProfileLink(item.post.author)
   const authorTitle = item.post.author.handle
   const likesHref = React.useMemo(() => {
     const urip = new AtUri(item.post.uri)
-    return `/profile/${item.post.author.handle}/post/${urip.rkey}/liked-by`
-  }, [item.post.uri, item.post.author.handle])
+    return makeProfileLink(item.post.author, 'post', urip.rkey, 'liked-by')
+  }, [item.post.uri, item.post.author])
   const likesTitle = 'Likes on this post'
   const repostsHref = React.useMemo(() => {
     const urip = new AtUri(item.post.uri)
-    return `/profile/${item.post.author.handle}/post/${urip.rkey}/reposted-by`
-  }, [item.post.uri, item.post.author.handle])
+    return makeProfileLink(item.post.author, 'post', urip.rkey, 'reposted-by')
+  }, [item.post.uri, item.post.author])
   const repostsTitle = 'Reposts of this post'
 
   const primaryLanguage = store.preferences.contentLanguages[0] || 'en'
@@ -185,7 +187,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     numberOfLines={1}
                     lineHeight={1.2}>
                     {sanitizeDisplayName(
-                      item.post.author.displayName || item.post.author.handle,
+                      item.post.author.displayName ||
+                        sanitizeHandle(item.post.author.handle),
                     )}
                   </Text>
                 </Link>
@@ -223,7 +226,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 href={authorHref}
                 title={authorTitle}>
                 <Text type="md" style={[pal.textLight]} numberOfLines={1}>
-                  @{item.post.author.handle}
+                  {sanitizeHandle(item.post.author.handle, '@')}
                 </Text>
               </Link>
             </View>
@@ -297,11 +300,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               itemCid={itemCid}
               itemHref={itemHref}
               itemTitle={itemTitle}
-              author={{
-                avatar: item.post.author.avatar!,
-                handle: item.post.author.handle,
-                displayName: item.post.author.displayName!,
-              }}
+              author={item.post.author}
               text={item.richText?.text || record.text}
               indexedAt={item.post.indexedAt}
               isAuthor={item.post.author.did === store.me.did}
@@ -362,8 +361,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
             <View style={styles.layoutContent}>
               <PostMeta
-                authorHandle={item.post.author.handle}
-                authorDisplayName={item.post.author.displayName}
+                author={item.post.author}
                 authorHasWarning={!!item.post.author.labels?.length}
                 timestamp={item.post.indexedAt}
                 postHref={itemHref}
@@ -399,11 +397,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 itemCid={itemCid}
                 itemHref={itemHref}
                 itemTitle={itemTitle}
-                author={{
-                  avatar: item.post.author.avatar!,
-                  handle: item.post.author.handle,
-                  displayName: item.post.author.displayName!,
-                }}
+                author={item.post.author}
                 text={item.richText?.text || record.text}
                 indexedAt={item.post.indexedAt}
                 isAuthor={item.post.author.did === store.me.did}