[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

src/view/com/notifications/FeedItem.tsx

@@ -19,6 +19,7 @@ import {PostThreadModel} from 'state/models/content/post-thread'
 import {s, colors} from 'lib/styles'
 import {ago} from 'lib/strings/time'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeHandle} from 'lib/strings/handles'
 import {pluralize} from 'lib/strings/helpers'
 import {HeartIconSolid} from 'lib/icons'
 import {Text} from '../util/text/Text'
@@ -36,6 +37,7 @@ import {
 } from 'lib/labeling/helpers'
 import {ProfileModeration} from 'lib/labeling/types'
 import {formatCount} from '../util/numeric/format'
+import {makeProfileLink} from 'lib/routes/links'
 
 const MAX_AUTHORS = 5
 
@@ -63,7 +65,7 @@ export const FeedItem = observer(function ({
       const urip = new AtUri(item.subjectUri)
       return `/profile/${urip.host}/post/${urip.rkey}`
     } else if (item.isFollow) {
-      return `/profile/${item.author.handle}`
+      return makeProfileLink(item.author)
     } else if (item.isReply) {
       const urip = new AtUri(item.uri)
       return `/profile/${urip.host}/post/${urip.rkey}`
@@ -92,7 +94,7 @@ export const FeedItem = observer(function ({
   const authors: Author[] = useMemo(() => {
     return [
       {
-        href: `/profile/${item.author.handle}`,
+        href: makeProfileLink(item.author),
         did: item.author.did,
         handle: item.author.handle,
         displayName: item.author.displayName,
@@ -104,7 +106,7 @@ export const FeedItem = observer(function ({
       },
       ...(item.additional?.map(({author}) => {
         return {
-          href: `/profile/${author.handle}`,
+          href: makeProfileLink(author),
           did: author.did,
           handle: author.handle,
           displayName: author.displayName,
@@ -158,7 +160,7 @@ export const FeedItem = observer(function ({
     action = 'liked your post'
     icon = 'HeartIconSolid'
     iconStyle = [
-      s.red3 as FontAwesomeIconStyle,
+      s.likeColor as FontAwesomeIconStyle,
       {position: 'relative', top: -4},
     ]
   } else if (item.isRepost) {
@@ -377,7 +379,7 @@ function ExpandedAuthorsList({
               {sanitizeDisplayName(author.displayName || author.handle)}
                
               <Text style={[pal.textLight]} lineHeight={1.2}>
-                {author.handle}
+                {sanitizeHandle(author.handle)}
               </Text>
             </Text>
           </View>

src/view/com/notifications/InvitedUsers.tsx

@@ -16,6 +16,7 @@ import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {makeProfileLink} from 'lib/routes/links'
 
 export const InvitedUsers = observer(() => {
   const store = useStores()
@@ -58,14 +59,14 @@ function InvitedUser({
         />
       </View>
       <View style={s.flex1}>
-        <Link href={`/profile/${profile.handle}`}>
+        <Link href={makeProfileLink(profile)}>
           <UserAvatar avatar={profile.avatar} size={35} />
         </Link>
         <Text style={[styles.desc, pal.text]}>
           <TextLink
             type="md-bold"
             style={pal.text}
-            href={`/profile/${profile.handle}`}
+            href={makeProfileLink(profile)}
             text={sanitizeDisplayName(profile.displayName || profile.handle)}
           />{' '}
           joined using your invite code!