Add space name at top of thread

src/app/components/Profile.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {ctx} from "@welshman/lib"
   import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
   import {
     session,
@@ -9,11 +11,13 @@
     displayHandle,
     deriveProfileDisplay,
   } from "@welshman/app"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import WotScore from "@lib/components/WotScore.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushDrawer} from "@app/modal"
+  import {entityLink} from "@app/state"
 
   export let pubkey
 
@@ -21,6 +25,8 @@
   const profileDisplay = deriveProfileDisplay(pubkey)
   const handle = deriveHandleForPubkey(pubkey)
   const score = deriveUserWotScore(pubkey)
+  const relays = ctx.app.router.FromPubkeys([pubkey]).getUrls()
+  const nprofile = nip19.nprofileEncode({pubkey, relays})
 
   const onClick = () => pushDrawer(ProfileDetail, {pubkey})
 
@@ -29,9 +35,9 @@
 </script>
 
 <div class="flex max-w-full gap-3">
-  <Button on:click={onClick} class="py-1">
+  <Link external href={entityLink(nprofile)} class="py-1">
     <Avatar src={$profile?.picture} size={10} />
-  </Button>
+  </Link>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
       <Button class="text-bold overflow-hidden text-ellipsis" on:click={onClick}>