Add member lists, use member lists to build room lists

src/routes/chat/+page.svelte

@@ -49,23 +49,28 @@
     <label class="input input-bordered flex flex-grow items-center gap-2">
       <Icon icon="magnifer" />
       <!-- svelte-ignore a11y-autofocus -->
-      <input autofocus bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
+      <input
+        autofocus
+        bind:value={term}
+        class="grow"
+        type="text"
+        placeholder="Search for conversations..." />
     </label>
     <Button class="btn btn-primary" on:click={startChat}>
       <Icon icon="add-circle" />
     </Button>
   </div>
   <div slot="content" class="col-2">
-  {#each chats as { id, pubkeys, messages } (id)}
-    <ChatItem {id} {pubkeys} {messages} class="bg-alt card2" />
-  {:else}
-    <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
-      <p>No chats found! Try starting one up.</p>
-      <Button class="btn btn-primary" on:click={startChat}>
-        <Icon icon="add-circle" />
-        Start a Chat
-      </Button>
-    </div>
-  {/each}
+    {#each chats as { id, pubkeys, messages } (id)}
+      <ChatItem {id} {pubkeys} {messages} class="bg-alt card2" />
+    {:else}
+      <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
+        <p>No chats found! Try starting one up.</p>
+        <Button class="btn btn-primary" on:click={startChat}>
+          <Icon icon="add-circle" />
+          Start a Chat
+        </Button>
+      </div>
+    {/each}
   </div>
 </ContentSearch>

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

@@ -52,7 +52,8 @@
 
   const assertNotNil = <T,>(x: T | undefined) => x!
 
-  const showMembers = () => pushModal(ProfileList, {pubkeys: others})
+  const showMembers = () =>
+    pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
 
   const onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]

src/routes/people/+page.svelte

@@ -31,10 +31,15 @@
 
 <Page>
   <ContentSearch>
-    <label slot="input" class="input input-bordered row-2">
+    <label slot="input" class="row-2 input input-bordered">
       <Icon icon="magnifer" />
       <!-- svelte-ignore a11y-autofocus -->
-      <input autofocus bind:value={term} class="grow" type="text" placeholder="Search for people..." />
+      <input
+        autofocus
+        bind:value={term}
+        class="grow"
+        type="text"
+        placeholder="Search for people..." />
     </label>
     <div slot="content" class="col-2" bind:this={element}>
       {#each pubkeys.slice(0, limit) as pubkey (pubkey)}

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

@@ -1,17 +1,26 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import {page} from "$app/stores"
+  import {load} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Delay from "@lib/components/Delay.svelte"
   import Button from "@lib/components/Button.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
-  import {decodeRelay} from "@app/state"
+  import {decodeRelay, MEMBERSHIPS} from "@app/state"
   import {pushDrawer} from "@app/modal"
 
   const openMenu = () => pushDrawer(MenuSpace, {url})
 
   $: url = decodeRelay($page.params.relay)
+
+  onMount(() => {
+    load({
+      filters: [{kinds: [MEMBERSHIPS], "#r": [url]}],
+      relays: [url],
+    })
+  })
 </script>
 
 {#key url}