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}>

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import {onMount} from 'svelte'
-  import {sortBy, sleep} from "@welshman/lib"
+  import {sortBy, displayUrl, sleep} from "@welshman/lib"
   import {page} from "$app/stores"
   import {repository, subscribe} from "@welshman/app"
   import type {Thunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
@@ -13,6 +14,7 @@
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import ThreadReply from "@app/components/ThreadReply.svelte"
   import {REPLY, deriveEvent, decodeRelay} from "@app/state"
+  import {makeSpacePath} from "@app/routes"
 
   const {relay, id} = $page.params
   const url = decodeRelay(relay)
@@ -71,10 +73,15 @@
       <p>Failed to load thread.</p>
     {/await}
   {/if}
-  <Button class="mb-2 mt-5 flex items-center gap-2" on:click={back}>
-    <Icon icon="alt-arrow-left" />
-    Go back
-  </Button>
+  <div class="flex items-center justify-between">
+    <Button class="mb-2 mt-5 flex items-center gap-2" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Link href={makeSpacePath(url)}>
+      @<span class="text-primary">{displayUrl(url)}</span>
+    </Link>
+  </div>
 </div>
 {#if showReply}
   <ThreadReply {url} event={$event} onClose={closeReply} onSubmit={closeReply} />