Add profile detail and notes to self

src/app/components/ChatMessage.svelte

@@ -17,8 +17,10 @@
   import Icon from "@lib/components/Icon.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Content from "@app/components/Content.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
   import {colors, displayReaction} from "@app/state"
+  import {pushDrawer} from "@app/modal"
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
 
   export let event: TrustedEvent
@@ -32,6 +34,8 @@
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
   const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))
 
+  const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
+
   const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
     $ps.find(({status}) => statuses.includes(status))
 
@@ -53,16 +57,19 @@
   class="group chat relative flex w-full flex-col gap-1 p-2 text-left"
   class:chat-start={event.pubkey !== $pubkey}
   class:chat-end={event.pubkey === $pubkey}>
-  <div class="chat-bubble max-w-sm">
-    <div class="flex gap-2">
+  <div class="chat-bubble max-w-sm mx-1">
+    <div class="flex gap-2 items-start">
       {#if showPubkey}
-        <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+        <button type="button" on:click|stopPropagation={showProfile}>
+          <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+        </button>
       {/if}
       <div class="-mt-1 flex-grow pr-1">
         {#if showPubkey}
           <div class="flex items-center gap-2">
-            <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
-              >{$profileDisplay}</strong>
+            <button type="button" class="text-bold text-sm" style="color: {colorValue}" on:click|stopPropagation={showProfile}>
+              {$profileDisplay}
+            </button>
             <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
           </div>
         {/if}

src/app/components/ProfileDetail.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {sleep} from '@welshman/lib'
+  import {feedFromFilter} from '@welshman/feeds'
+  import {NOTE, displayProfile, displayPubkey} from '@welshman/util'
+  import type {TrustedEvent} from '@welshman/util'
+  import {deriveProfile, displayNip05, feedLoader} from '@welshman/app'
+  import {createScroller} from "@lib/html"
+  import Avatar from "@lib/components/Avatar.svelte"
+  import Spinner from '@lib/components/Spinner.svelte'
+  import Content from "@app/components/Content.svelte"
+
+  export let pubkey
+
+  const profile = deriveProfile(pubkey)
+  const pubkeyDisplay = displayPubkey(pubkey)
+
+  const feed = feedFromFilter({kinds: [NOTE], authors: [pubkey]})
+
+  const loader = feedLoader.getLoader(feed, {
+    onEvent: (event: TrustedEvent) => {
+      events = events.concat(event)
+    },
+  })
+
+  let element: Element
+  let events: TrustedEvent[] = []
+
+  onMount(() => {
+    const scroller = createScroller({
+      element: element,
+      onScroll: async () => {
+        const $loader = await loader
+
+        $loader(10)
+      },
+    })
+
+    return () => scroller.stop()
+  })
+</script>
+
+<div class="flex flex-col gap-4 p-4 max-w-full" bind:this={element}>
+  {#if $profile}
+    <div class="flex max-w-full gap-3">
+      <div class="py-1">
+        <Avatar src={$profile?.picture} size={10} />
+      </div>
+      <div class="flex min-w-0 flex-col">
+        <div class="flex items-center gap-2">
+          <div class="text-bold overflow-hidden text-ellipsis">
+            {displayProfile($profile, pubkeyDisplay)}
+          </div>
+        </div>
+        <div class="overflow-hidden text-ellipsis text-sm opacity-75">
+          {$profile?.nip05 ? displayNip05($profile.nip05) : pubkeyDisplay}
+        </div>
+      </div>
+    </div>
+    <Content event={{content: $profile.about, tags: []}} hideMedia />
+    <p class="text-xl">Recent notes</p>
+    <div class="flex flex-col gap-2">
+      {#each events as event (event.id)}
+        <div class="card2 bg-alt">
+          <Content {event} />
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <p class="flex center my-12">
+      {#await sleep(3000)}
+        <Spinner loading />
+      {:then}
+        Unable to find this profile.
+      {/await}
+    </p>
+  {/if}
+</div>