[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/lib/link-meta/bsky.ts

@@ -122,11 +122,7 @@ export async function getPostAsQuote(
     cid: threadView.thread.post.cid,
     text: threadView.thread.postRecord?.text || '',
     indexedAt: threadView.thread.post.indexedAt,
-    author: {
-      handle: threadView.thread.post.author.handle,
-      displayName: threadView.thread.post.author.displayName,
-      avatar: threadView.thread.post.author.avatar,
-    },
+    author: threadView.thread.post.author,
   }
 }
 

src/lib/routes/links.ts

@@ -0,0 +1,15 @@
+import {isInvalidHandle} from 'lib/strings/handles'
+
+export function makeProfileLink(
+  info: {
+    did: string
+    handle: string
+  },
+  ...segments: string[]
+) {
+  return [
+    `/profile`,
+    `${isInvalidHandle(info.handle) ? info.did : info.handle}`,
+    ...segments,
+  ].join('/')
+}

src/lib/strings/handles.ts

@@ -11,3 +11,11 @@ export function createFullHandle(name: string, domain: string): string {
   domain = (domain || '').replace(/^[.]+/, '')
   return `${name}.${domain}`
 }
+
+export function isInvalidHandle(handle: string): boolean {
+  return handle === 'handle.invalid'
+}
+
+export function sanitizeHandle(handle: string, prefix = ''): string {
+  return isInvalidHandle(handle) ? '⚠Invalid Handle' : `${prefix}${handle}`
+}

src/lib/styles.ts

@@ -25,13 +25,13 @@ export const colors = {
   blue6: '#012561',
   blue7: '#001040',
 
-  red1: '#ffe6f2',
-  red2: '#fba2ce',
-  red3: '#ec4899',
-  red4: '#d1106f',
-  red5: '#97074e',
-  red6: '#690436',
-  red7: '#4F0328',
+  red1: '#ffe6eb',
+  red2: '#fba2b2',
+  red3: '#ec4868',
+  red4: '#d11043',
+  red5: '#970721',
+  red6: '#690419',
+  red7: '#4F0314',
 
   pink1: '#f8ccff',
   pink2: '#e966ff',
@@ -53,6 +53,7 @@ export const colors = {
 
   unreadNotifBg: '#ebf6ff',
   brandBlue: '#0066FF',
+  like: '#ec4899',
 }
 
 export const gradients = {
@@ -224,6 +225,7 @@ export const s = StyleSheet.create({
   green5: {color: colors.green5},
 
   brandBlue: {color: colors.brandBlue},
+  likeColor: {color: colors.like},
 })
 
 export function lh(