Show all members button on chat

src/app/components/ChatItem.svelte

@@ -7,7 +7,7 @@
   import {pubkey, inboxRelaySelectionsByPubkey, loadInboxRelaySelections} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import Name from "@app/components/Name.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
 
@@ -35,11 +35,11 @@
       <div class="flex min-w-0 items-center gap-2">
         {#if others.length === 1}
           <ProfileCircle pubkey={others[0]} size={5} />
-          <Name pubkey={others[0]} />
+          <ProfileName pubkey={others[0]} />
         {:else}
           <ProfileCircles pubkeys={others} size={5} />
           <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-            <Name pubkey={others[0]} />
+            <ProfileName pubkey={others[0]} />
             and {others.length - 1}
             {others.length > 2 ? "others" : "other"}
           </p>

src/app/components/ProfileList.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Profile from "@app/components/Profile.svelte"
+
+  export let pubkeys
+</script>
+
+<div class="row-2">
+  {#each pubkeys as pubkey (pubkey)}
+    <Profile {pubkey} />
+  {/each}
+</div>

src/app/components/ProfileMultiSelect.svelte

@@ -8,7 +8,7 @@
   import Button from "@lib/components/Button.svelte"
   import Suggestions from "@lib/editor/Suggestions.svelte"
   import SuggestionProfile from "@lib/editor/SuggestionProfile.svelte"
-  import Name from "@app/components/Name.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushDrawer} from "@app/modal"
 
@@ -54,7 +54,7 @@
           <Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
         </Button>
         <Button on:click={() => onClick(pubkey)}>
-          <Name {pubkey} />
+          <ProfileName {pubkey} />
         </Button>
       </div>
     {/each}

src/routes/home/[chat]/+page.svelte

@@ -27,12 +27,16 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
-  import Name from "@app/components/Name.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
   import {deriveChat, splitChatId} from "@app/state"
+  import {pushModal} from "@app/modal"
   import {sendWrapped} from "@app/commands"
 
   const id = $page.params.chat === "notes" ? $pubkey! : $page.params.chat
@@ -47,6 +51,8 @@
 
   const assertNotNil = <T,>(x: T | undefined) => x!
 
+  const showMembers = () => pushModal(ProfileList, {pubkeys: others})
+
   const onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
     const template = createEvent(DIRECT_MESSAGE, {content, tags})
@@ -101,14 +107,21 @@
     <PageBar>
       <div slot="title" class="row-2">
         {#if others.length === 1}
-          <ProfileCircle pubkey={others[0]} size={5} />
+          {@const pubkey = others[0]}
-          <Name pubkey={others[0]} />
+          {@const showProfile = () => pushModal(ProfileDetail, {pubkey})}
+          <Button on:click={showProfile}>
+            <ProfileCircle {pubkey} size={5} />
+            <ProfileName {pubkey} />
+          </Button>
         {:else}
           <ProfileCircles pubkeys={others} size={5} />
           <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-            <Name pubkey={others[0]} />
+            <ProfileName pubkey={others[0]} />
             and {others.length - 1}
             {others.length > 2 ? "others" : "other"}
+            <Button on:click={showMembers} class="btn btn-link">
+              Show all members
+            </Button>
           </p>
         {/if}
       </div>