Add member lists, use member lists to build room lists

src/app/components/MenuSpace.svelte

@@ -11,11 +11,14 @@
   import SpaceInvite from "@app/components/SpaceInvite.svelte"
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import ProfileList from "@app/components/ProfileList.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import {
     getMembershipRoomsByUrl,
     getMembershipUrls,
+    hasMembershipUrl,
     userMembership,
+    memberships,
     roomsByUrl,
     GENERAL,
   } from "@app/state"
@@ -34,6 +37,9 @@
     showMenu = !showMenu
   }
 
+  const showMembers = () =>
+    pushModal(ProfileList, {pubkeys: members, title: `Members of`, subtitle: displayRelayUrl(url)})
+
   const createInvite = () => pushModal(SpaceInvite, {url})
 
   const leaveSpace = () => pushModal(SpaceExit, {url})
@@ -57,6 +63,7 @@
 
   $: rooms = getMembershipRoomsByUrl(url, $userMembership)
   $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
+  $: members = $memberships.filter(l => hasMembershipUrl(l, url)).map(l => l.event.pubkey)
 
   onMount(async () => {
     const error = (await checkRelayConnection(url)) || (await checkRelayAuth(url))
@@ -78,6 +85,12 @@
         <ul
           transition:fly
           class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+          <li>
+            <Button on:click={showMembers}>
+              <Icon icon="user-rounded" />
+              View Members ({members.length})
+            </Button>
+          </li>
           <li>
             <Button on:click={createInvite}>
               <Icon icon="link-round" />

src/app/components/PrimaryNav.svelte

@@ -72,7 +72,7 @@
 
 <div
   class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
-  <div class="flex content-padding-x content-sizing justify-between px-2">
+  <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-4 sm:gap-8">
       <PrimaryNavItem title="Search" href="/people">
         <Avatar icon="magnifer" class="!h-10 !w-10" />

src/app/components/ProfileList.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import Profile from "@app/components/Profile.svelte"
 
+  export let title
+  export let subtitle = ""
   export let pubkeys
 </script>
 
-<div class="row-2">
+<div class="column gap-4">
+  <ModalHeader>
+    <div slot="title">{title}</div>
+    <div slot="info">{subtitle}</div>
+  </ModalHeader>
   {#each pubkeys as pubkey (pubkey)}
-    <Profile {pubkey} />
+    <div class="card2 bg-alt">
+      <Profile {pubkey} />
+    </div>
   {/each}
+  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>