[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, 3 insertions, 5 deletions

diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 99fe9fc76..700857bbe 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -36,14 +36,12 @@ import {
 import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
 import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
 import {router} from '../../../routes'
+import {makeProfileLink} from 'lib/routes/links'
 
 const ProfileCard = observer(() => {
   const store = useStores()
   return (
-    <Link
-      href={`/profile/${store.me.handle}`}
-      style={styles.profileCard}
-      asAnchor>
+    <Link href={makeProfileLink(store.me)} style={styles.profileCard} asAnchor>
       <UserAvatar avatar={store.me.avatar} size={64} />
     </Link>
   )
@@ -252,7 +250,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
       />
       {store.session.hasSession && (
         <NavItem
-          href={`/profile/${store.me.handle}`}
+          href={makeProfileLink(store.me)}
           icon={<UserIcon strokeWidth={1.75} size={28} style={pal.text} />}
           iconFilled={
             <UserIconSolid strokeWidth={1.75} size={28} style={pal.text} />