[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

2 files changed, 5 insertions, 6 deletions

diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index cbaafd1fd..50cfa0570 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -21,6 +21,7 @@ import {
 } from 'lib/icons'
 import {Link} from 'view/com/util/Link'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {makeProfileLink} from 'lib/routes/links'
 
 export const BottomBarWeb = observer(() => {
   const store = useStores()
@@ -87,7 +88,7 @@ export const BottomBarWeb = observer(() => {
           )
         }}
       </NavItem>
-      <NavItem routeName="Profile" href={`/profile/${store.me.handle}`}>
+      <NavItem routeName="Profile" href={makeProfileLink(store.me)}>
         {() => (
           <UserIcon
             size={28}
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} />