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,

src/lib/components/ContentSearch.svelte

@@ -1,10 +1,10 @@
-<div class="col-2 h-full content-padding-t content-padding-x {$$props.class}">
+<div class="col-2 content-padding-t content-padding-x h-full {$$props.class}">
   <div class="z-feature">
     <div class="content-sizing">
       <slot name="input" />
     </div>
   </div>
-  <div class="overflow-auto pt-2 scroll-container">
+  <div class="scroll-container overflow-auto pt-2">
     <div class="content-sizing">
       <slot name="content" />
     </div>

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}