[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, 4 insertions, 2 deletions

diff --git a/src/state/models/feeds/custom-feed.ts b/src/state/models/feeds/custom-feed.ts
index 1303952ea..3c6d52755 100644
--- a/src/state/models/feeds/custom-feed.ts
+++ b/src/state/models/feeds/custom-feed.ts
@@ -2,6 +2,7 @@ import {AppBskyFeedDefs} from '@atproto/api'
 import {makeAutoObservable, runInAction} from 'mobx'
 import {RootStoreModel} from 'state/models/root-store'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeHandle} from 'lib/strings/handles'
 import {updateDataOptimistically} from 'lib/async/revertible'
 import {track} from 'lib/analytics/analytics'
 
@@ -42,7 +43,7 @@ export class CustomFeedModel {
     if (this.data.displayName) {
       return sanitizeDisplayName(this.data.displayName)
     }
-    return `Feed by @${this.data.creator.handle}`
+    return `Feed by ${sanitizeHandle(this.data.creator.handle, '@')}`
   }
 
   get isSaved() {
diff --git a/src/state/models/feeds/multi-feed.ts b/src/state/models/feeds/multi-feed.ts
index 1fc57a86b..fdcd208cd 100644
--- a/src/state/models/feeds/multi-feed.ts
+++ b/src/state/models/feeds/multi-feed.ts
@@ -5,6 +5,7 @@ import {RootStoreModel} from '../root-store'
 import {CustomFeedModel} from './custom-feed'
 import {PostsFeedModel} from './posts'
 import {PostsFeedSliceModel} from './posts-slice'
+import {makeProfileLink} from 'lib/routes/links'
 
 const FEED_PAGE_SIZE = 10
 const FEEDS_PAGE_SIZE = 3
@@ -107,7 +108,7 @@ export class PostsMultiFeedModel {
         _reactKey: `__feed_footer_${i}__`,
         type: 'feed-footer',
         title: feedInfo.displayName,
-        uri: `/profile/${feedInfo.data.creator.did}/feed/${urip.rkey}`,
+        uri: makeProfileLink(feedInfo.data.creator, 'feed', urip.rkey),
       })
     }
     if (!this.hasMore) {