[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

5 files changed, 29 insertions, 4 deletions

diff --git a/src/state/models/content/list.ts b/src/state/models/content/list.ts
index d5c9e649e..c5ac72e49 100644
--- a/src/state/models/content/list.ts
+++ b/src/state/models/content/list.ts
@@ -1,4 +1,4 @@
-import {makeAutoObservable} from 'mobx'
+import {makeAutoObservable, runInAction} from 'mobx'
 import {
   AtUri,
   AppBskyGraphGetList as GetList,
@@ -115,6 +115,7 @@ export class ListModel {
     }
     this._xLoading(replace)
     try {
+      await this._resolveUri()
       const res = await this.rootStore.agent.app.bsky.graph.getList({
         list: this.uri,
         limit: PAGE_SIZE,
@@ -146,6 +147,7 @@ export class ListModel {
     if (!this.isOwner) {
       throw new Error('Cannot edit this list')
     }
+    await this._resolveUri()
 
     // get the current record
     const {rkey} = new AtUri(this.uri)
@@ -179,6 +181,7 @@ export class ListModel {
     if (!this.list) {
       return
     }
+    await this._resolveUri()
 
     // fetch all the listitem records that belong to this list
     let cursor
@@ -220,6 +223,7 @@ export class ListModel {
     if (!this.list) {
       return
     }
+    await this._resolveUri()
     await this.rootStore.agent.app.bsky.graph.muteActorList({
       list: this.list.uri,
     })
@@ -231,6 +235,7 @@ export class ListModel {
     if (!this.list) {
       return
     }
+    await this._resolveUri()
     await this.rootStore.agent.app.bsky.graph.unmuteActorList({
       list: this.list.uri,
     })
@@ -273,6 +278,22 @@ export class ListModel {
   // helper functions
   // =
 
+  async _resolveUri() {
+    const urip = new AtUri(this.uri)
+    if (!urip.host.startsWith('did:')) {
+      try {
+        urip.host = await apilib.resolveName(this.rootStore, urip.host)
+      } catch (e: any) {
+        runInAction(() => {
+          this.error = e.toString()
+        })
+      }
+    }
+    runInAction(() => {
+      this.uri = urip.toString()
+    })
+  }
+
   _replaceAll(res: GetList.Response) {
     this.items = []
     this._appendAll(res)
diff --git a/src/state/models/discovery/user-autocomplete.ts b/src/state/models/discovery/user-autocomplete.ts
index 601e10ea0..461073e45 100644
--- a/src/state/models/discovery/user-autocomplete.ts
+++ b/src/state/models/discovery/user-autocomplete.ts
@@ -2,6 +2,7 @@ import {makeAutoObservable, runInAction} from 'mobx'
 import {AppBskyActorDefs} from '@atproto/api'
 import AwaitLock from 'await-lock'
 import {RootStoreModel} from '../root-store'
+import {isInvalidHandle} from 'lib/strings/handles'
 
 export class UserAutocompleteModel {
   // state
@@ -81,7 +82,7 @@ export class UserAutocompleteModel {
       actor: this.rootStore.me.did || '',
     })
     runInAction(() => {
-      this.follows = res.data.follows
+      this.follows = res.data.follows.filter(f => !isInvalidHandle(f.handle))
       for (const f of this.follows) {
         this.knownHandles.add(f.handle)
       }
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) {
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 17740a77f..e33a34acf 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -208,6 +208,7 @@ export interface ComposerOptsQuote {
   text: string
   indexedAt: string
   author: {
+    did: string
     handle: string
     displayName?: string
     avatar?: string