Add profile detail modal

src/routes/settings/about/+page.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
   import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import {PLATFORM_NAME, pubkeyLink} from "@app/state"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {PLATFORM_NAME} from "@app/state"
+  import {pushModal} from "@app/modal"
 
   const pubkey = "97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322"
+
+  const openProfile = () => pushModal(ProfileDetail, {pubkey})
 </script>
 
 <div class="mt-8 min-h-screen bg-base-200 sm:hero">
@@ -34,7 +39,7 @@
           <p class="text-sm">
             Built with 💜 by
             <span class="text-primary">
-              @<Link external href={pubkeyLink(pubkey)} class="link">hodlbod</Link>
+              @<Button on:click={openProfile} class="link">hodlbod</Button>
             </span>
           </p>
           <p class="text-xs">

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

@@ -120,8 +120,8 @@
     </div>
     <div class="grid grid-cols-3 gap-2">
       <Link href={threadsPath} class="btn btn-primary">
-        <Icon icon="notes-minimalistic" />
-        <div class="relative">
+        <div class="relative flex items-center gap-2">
+          <Icon icon="notes-minimalistic" />
           Threads
           {#if $notifications.has(threadsPath)}
             <div
@@ -133,12 +133,12 @@
       {#each $userRooms as room (room)}
         {@const roomPath = makeRoomPath(url, room)}
         <Link href={roomPath} class="btn btn-neutral">
-          {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
-            <Icon icon="lock" size={4} />
-          {:else}
-            <Icon icon="hashtag" />
-          {/if}
-          <div class="relative">
+          <div class="relative flex min-w-0 items-center gap-2 overflow-hidden">
+            {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
+              <Icon icon="lock" size={4} />
+            {:else}
+              <Icon icon="hashtag" />
+            {/if}
             <ChannelName {url} {room} />
             {#if $notifications.has(roomPath)}
               <div
@@ -150,12 +150,14 @@
       {/each}
       {#each $otherRooms as room (room)}
         <Link href={makeRoomPath(url, room)} class="btn btn-neutral">
-          {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
-            <Icon icon="lock" size={4} />
-          {:else}
-            <Icon icon="hashtag" />
-          {/if}
-          <ChannelName {url} {room} />
+          <div class="relative flex min-w-0 items-center gap-2 overflow-hidden">
+            {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
+              <Icon icon="lock" size={4} />
+            {:else}
+              <Icon icon="hashtag" />
+            {/if}
+            <ChannelName {url} {room} />
+          </div>
         </Link>
       {/each}
       <Button on:click={addRoom} class="btn btn-neutral">