Add profile detail modal

src/app/components/Profile.svelte

@@ -9,10 +9,11 @@
     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 {pubkeyLink} from "@app/state"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushModal} from "@app/modal"
 
   export let pubkey
 
@@ -21,19 +22,21 @@
   const handle = deriveHandleForPubkey(pubkey)
   const score = deriveUserWotScore(pubkey)
 
+  const openProfile = () => pushModal(ProfileDetail, {pubkey})
+
   $: following =
     pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
 </script>
 
 <div class="flex max-w-full gap-3">
-  <Link external href={pubkeyLink(pubkey)} class="py-1">
+  <Button on:click={openProfile} class="py-1">
     <Avatar src={$profile?.picture} size={10} />
-  </Link>
+  </Button>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
-      <Link external href={pubkeyLink(pubkey)} class="text-bold overflow-hidden text-ellipsis">
+      <Button on:click={openProfile} class="text-bold overflow-hidden text-ellipsis">
         {$profileDisplay}
-      </Link>
+      </Button>
       <WotScore score={$score} active={following} />
     </div>
     <div class="overflow-hidden text-ellipsis text-sm opacity-75">