From 21123dab4300bb55c0198e57c6c8ff2cee3be0b0 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Sun, 9 Jun 2024 10:05:34 -0700
Subject: [PATCH] Add ActorLabel

---
 .../appcom/vocabulary/ActorLabel.tsx          | 54 +++++++++++++++++++
 src/components/appcom/vocabulary/Label.tsx    | 14 ++---
 src/components/appcom/vocabulary/common.ts    |  4 ++
 src/components/appcom/vocabulary/index.tsx    |  2 +
 src/view/screens/DebugAppcom.tsx              | 19 +++++++
 5 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 src/components/appcom/vocabulary/ActorLabel.tsx

diff --git a/src/components/appcom/vocabulary/ActorLabel.tsx b/src/components/appcom/vocabulary/ActorLabel.tsx
new file mode 100644
index 0000000000..dac73541c3
--- /dev/null
+++ b/src/components/appcom/vocabulary/ActorLabel.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import {AtUri} from '@atproto/api'
+import {z} from 'zod'
+
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {color} from './common'
+import {Label} from './Label'
+
+const actorLabelProps = z.object({
+  uri: z.string(),
+  field: z.enum(['handle', 'displayName', 'description']),
+  color,
+  size: z
+    .number()
+    .positive()
+    .default(16)
+    .transform(v => ({fontSize: v})),
+  lineHeight: z
+    .number()
+    .positive()
+    .default(1)
+    .transform(v => ({lineHeight: v})),
+  weight: z
+    .enum(['normal', 'semibold', 'bold'])
+    .default('normal')
+    .transform(v => ({fontWeight: v})),
+})
+
+export type ActorLabelProps = z.infer<typeof actorLabelProps>
+
+export function ActorLabel(props: React.PropsWithChildren<ActorLabelProps>) {
+  const propsParsed = actorLabelProps.parse(props)
+  const urip = new AtUri(propsParsed.uri)
+
+  const {data: did} = useResolveDidQuery(urip.host)
+  const {data: profile} = useProfileQuery({did})
+
+  let text = ''
+  if (profile) {
+    if (props.field === 'handle') {
+      text = profile.handle
+    }
+    if (props.field === 'displayName') {
+      text = profile.displayName || profile.handle
+    }
+    if (props.field === 'description') {
+      text = profile.description || ''
+    }
+  }
+
+  // TODO loading, error
+  return <Label {...props} text={text} />
+}
diff --git a/src/components/appcom/vocabulary/Label.tsx b/src/components/appcom/vocabulary/Label.tsx
index 6d11f07f9e..3ba3049969 100644
--- a/src/components/appcom/vocabulary/Label.tsx
+++ b/src/components/appcom/vocabulary/Label.tsx
@@ -2,20 +2,12 @@ import React from 'react'
 import {z} from 'zod'
 
 import {Text} from '#/components/Typography'
+import {color} from './common'
 import {useFontColor} from './hooks'
 
-const labelProps = z.object({
+export const labelProps = z.object({
   text: z.string(),
-  color: z
-    .enum([
-      'default',
-      'primary',
-      'secondary',
-      'positive',
-      'negative',
-      'inverted',
-    ])
-    .default('default'),
+  color,
   size: z
     .number()
     .positive()
diff --git a/src/components/appcom/vocabulary/common.ts b/src/components/appcom/vocabulary/common.ts
index e894a7aa02..b85a6ebe32 100644
--- a/src/components/appcom/vocabulary/common.ts
+++ b/src/components/appcom/vocabulary/common.ts
@@ -30,3 +30,7 @@ export const pad = z
       })),
   ])
   .optional()
+
+export const color = z
+  .enum(['default', 'primary', 'secondary', 'positive', 'negative', 'inverted'])
+  .default('default')
diff --git a/src/components/appcom/vocabulary/index.tsx b/src/components/appcom/vocabulary/index.tsx
index ab10bebbab..e9e1aaaf8e 100644
--- a/src/components/appcom/vocabulary/index.tsx
+++ b/src/components/appcom/vocabulary/index.tsx
@@ -5,6 +5,7 @@ import {ZodError} from 'zod'
 
 import {Text} from '#/components/Typography'
 import type {AppComNode} from '../types'
+import {ActorLabel} from './ActorLabel'
 import {Avatar} from './Avatar'
 import {Box} from './Box'
 import {Embed} from './Embed'
@@ -14,6 +15,7 @@ import {Stack} from './Stack'
 import {Tabs} from './Tabs'
 
 export const VOCAB: Record<string, React.ComponentType<any>> = {
+  ActorLabel,
   Avatar,
   Box,
   Embed,
diff --git a/src/view/screens/DebugAppcom.tsx b/src/view/screens/DebugAppcom.tsx
index 5bc5ff0bcc..637f86fa08 100644
--- a/src/view/screens/DebugAppcom.tsx
+++ b/src/view/screens/DebugAppcom.tsx
@@ -85,6 +85,25 @@ const DEFAULT_AC = h('Stack', {gap: 10}, [
           h('Avatar', {uri: 'at://pfrazee.com/'}),
         ]),
       ]),
+      h('Box', {pad: {x: 10}}, [
+        h('Label', {text: 'ActorLabel', size: 10, weight: 'bold'}),
+      ]),
+      h('Box', {border: 'secondary', corner: 8, pad: {x: 16, y: 12}}, [
+        h('Stack', {gap: 10}, [
+          h('Stack', {direction: 'row', gap: 8}, [
+            h('Label', {weight: 'bold', text: 'Display Name:'}),
+            h('ActorLabel', {uri: 'bsky.app', field: 'displayName'}),
+          ]),
+          h('Stack', {direction: 'row', gap: 8}, [
+            h('Label', {weight: 'bold', text: 'Handle:'}),
+            h('ActorLabel', {uri: 'bsky.app', field: 'handle'}),
+          ]),
+          h('Stack', {direction: 'row', gap: 8}, [
+            h('Label', {weight: 'bold', text: 'Description:'}),
+            h('ActorLabel', {uri: 'bsky.app', field: 'description'}),
+          ]),
+        ]),
+      ]),
       h('Box', {pad: {x: 10}}, [
         h('Label', {text: 'Embed (Actor)', size: 10, weight: 'bold'}),
       ]),