Add member lists, use member lists to build room lists

src/app/commands.ts

@@ -18,6 +18,7 @@ import {
   getListTags,
   getRelayTags,
   isShareableRelayUrl,
+  getRelayTagValues,
 } from "@welshman/util"
 import type {TrustedEvent, EventTemplate, List} from "@welshman/util"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
@@ -145,31 +146,35 @@ export const broadcastUserData = async (relays: string[]) => {
 export const addSpaceMembership = async (url: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const event = await addToListPublicly(list, ["r", url]).reconcile(nip44EncryptToSelf)
+  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
 
-  return publishThunk({event, relays: ctx.app.router.WriteRelays().getUrls()}).result
+  return publishThunk({event, relays}).result
 }
 
 export const removeSpaceMembership = async (url: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const pred = (t: string[]) => t[t[0] === "r" ? 1 : 2] === url
   const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
+  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
 
-  return publishThunk({event, relays: ctx.app.router.WriteRelays().getUrls()}).result
+  return publishThunk({event, relays}).result
 }
 
 export const addRoomMembership = async (url: string, room: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const event = await addToListPublicly(list, tagRoom(room, url)).reconcile(nip44EncryptToSelf)
+  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
 
-  return publishThunk({event, relays: ctx.app.router.WriteRelays().getUrls()}).result
+  return publishThunk({event, relays}).result
 }
 
 export const removeRoomMembership = async (url: string, room: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const pred = (t: string[]) => equals(tagRoom(room, url), t)
   const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
+  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
 
-  return publishThunk({event, relays: ctx.app.router.WriteRelays().getUrls()}).result
+  return publishThunk({event, relays}).result
 }
 
 export const setRelayPolicy = (url: string, read: boolean, write: boolean) => {

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>

src/app/state.ts

@@ -275,8 +275,21 @@ export const {
 
 // Membership
 
+export const hasMembershipUrl = (list: List | undefined, url: string) =>
+  getListTags(list).some(t => {
+    if (t[0] === "r") return t[1] === url
+    if (t[0] === "~") return t[2] === url
+
+    return false
+  })
+
 export const getMembershipUrls = (list?: List) => sort(getRelayTagValues(getListTags(list)))
 
+export const getMembershipRooms = (list?: List) =>
+  getListTags(list)
+    .filter(t => t[0] === "~")
+    .map(t => ({url: t[2], room: t[1]}))
+
 export const getMembershipRoomsByUrl = (url: string, list?: List) =>
   sort(
     getListTags(list)
@@ -320,7 +333,9 @@ export const readMessage = (event: TrustedEvent): Maybe<ChannelMessage> => {
 
   const [_, room, url] = roomTags[0]
 
-  return {url, room, event}
+  if (!url || !room) return undefined
+
+  return {url: normalizeRelayUrl(url), room, event}
 }
 
 export const channelMessages = deriveEventsMapped<ChannelMessage>(repository, {
@@ -342,19 +357,30 @@ export const makeChannelId = (url: string, room: string) => `${url}|${room}`
 
 export const splitChannelId = (id: string) => id.split("|")
 
-export const channels = derived(channelMessages, $channelMessages => {
-  const messagesByChannelId = new Map<string, ChannelMessage[]>()
+export const channels = derived(
+  [memberships, channelMessages],
+  ([$memberships, $channelMessages]) => {
+    const messagesByChannelId = new Map<string, ChannelMessage[]>()
 
-  for (const message of $channelMessages) {
-    pushToMapKey(messagesByChannelId, makeChannelId(message.url, message.room), message)
-  }
+    // Add known rooms by membership so we don't have to scan messages to load all rooms
+    for (const membership of $memberships) {
+      for (const {url, room} of getMembershipRooms(membership)) {
+        messagesByChannelId.set(makeChannelId(url, room), [])
+      }
+    }
 
-  return Array.from(messagesByChannelId.entries()).map(([id, messages]) => {
-    const [url, room] = splitChannelId(id)
+    // Add messages/rooms without memberships
+    for (const message of $channelMessages) {
+      pushToMapKey(messagesByChannelId, makeChannelId(message.url, message.room), message)
+    }
 
-    return {id, url, room, messages}
-  })
-})
+    return Array.from(messagesByChannelId.entries()).map(([id, messages]) => {
+      const [url, room] = splitChannelId(id)
+
+      return {id, url, room, messages}
+    })
+  },
+)
 
 export const {
   indexStore: channelsById,