Add ability to join a space

src/app/commands.ts

@@ -1,7 +1,24 @@
-import {uniqBy, now} from "@welshman/lib"
-import {GROUPS, asDecryptedEvent, readList, editList, makeList, createList} from "@welshman/util"
+import {uniqBy, uniq, now} from "@welshman/lib"
+import {GROUPS, asDecryptedEvent, getGroupTags, getRelayTagValues, readList, editList, makeList, createList} from "@welshman/util"
 import {pk, signer, repository, INDEXER_RELAYS} from "@app/base"
-import {getWriteRelayUrls, loadRelaySelections, publish, ensurePlaintext} from "@app/state"
+import {getWriteRelayUrls, loadGroup, loadGroupMembership, loadProfile, loadFollows, loadMutes, loadRelaySelections, publish, ensurePlaintext} from "@app/state"
+
+export const loadUserData = async (pubkey: string, hints: string[] = []) => {
+  const relaySelections = await loadRelaySelections(pubkey, INDEXER_RELAYS)
+  const relays = uniq([...getRelayTagValues(relaySelections?.tags || []), ...INDEXER_RELAYS, ...hints])
+  const membership = await loadGroupMembership(pubkey, relays)
+  const promises = [
+    loadProfile(pubkey, relays),
+    loadFollows(pubkey, relays),
+    loadMutes(pubkey, relays),
+  ]
+
+  for (const [_, nom, url] of getGroupTags(membership?.event.tags || [])) {
+    promises.push(loadGroup(nom, [url]))
+  }
+
+  await Promise.all(promises)
+}
 
 export type ModifyTags = (tags: string[][]) => string[][]
 

src/app/components/InfoNip29.svelte

@@ -21,8 +21,11 @@
     >. If you do decide to join someone else's, make sure to follow their directions for registering
     as a user.
   </p>
-  <div class="card2 flex-row justify-between">
-    groups.fiatjaf.com
+  <div class="alert !flex justify-between items-center">
+    <div class="flex gap-2 items-center">
+      <Icon icon="remote-controller-minimalistic" />
+      groups.fiatjaf.com
+    </div>
     <Button on:click={() => clip("groups.fiatjaf.com")}>
       <Icon icon="copy" />
     </Button>

src/app/components/LogIn.svelte

@@ -9,6 +9,7 @@
   import {pushToast} from "@app/toast"
   import {addSession} from "@app/base"
   import {loadHandle} from "@app/state"
+  import {loadUserData} from "@app/commands"
 
   const back = () => history.back()
 
@@ -23,9 +24,11 @@
       })
     }
 
-    const {pubkey} = handle
+    const {pubkey, relays = []} = handle
     const broker = Nip46Broker.get(pubkey, secret, handler)
 
+    loadUserData(pubkey, relays)
+
     if (await broker.connect()) {
       addSession({method: "nip46", pubkey, secret, handler})
       pushToast({message: "Successfully logged in!"})

src/app/components/PrimaryNav.svelte

@@ -13,7 +13,7 @@
   import Avatar from "@lib/components/Avatar.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
-  import {userProfile, userGroupsByNom} from "@app/state"
+  import {userProfile, displayGroup, userGroupsByNom} from "@app/state"
   import {pushModal} from "@app/modal"
   import {getPrimaryNavItemIndex} from "@app/routes"
 
@@ -51,9 +51,9 @@
       </PrimaryNavItem>
       {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
         {@const qualifiedGroup = qualifiedGroups[0]}
-        <PrimaryNavItem title={qualifiedGroup?.group.name} href="/spaces/{nom}">
+        <PrimaryNavItem title={displayGroup(qualifiedGroup?.group)} href="/spaces/{nom}">
           <div class="w-10 rounded-full border border-solid border-base-300">
-            <img alt={qualifiedGroup?.group.name} src={qualifiedGroup?.group.picture} />
+            <img alt={displayGroup(qualifiedGroup?.group)} src={qualifiedGroup?.group.picture} />
           </div>
         </PrimaryNavItem>
       {/each}

src/app/components/SpaceAdd.svelte

@@ -2,12 +2,12 @@
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import SpaceCreate from "@app/components/SpaceCreate.svelte"
-  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/modal"
 
   const startCreate = () => pushModal(SpaceCreate)
 
-  const startJoin = () => pushModal(SpaceJoin)
+  const startJoin = () => pushModal(SpaceInviteAccept)
 </script>
 
 <div class="column gap-4">

src/app/components/SpaceInviteAccept.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import CardButton from "@lib/components/CardButton.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import {pushToast} from "@app/toast"
+  import {splitGroupId, loadRelay, loadGroup} from "@app/state"
+  import {addGroupMemberships} from "@app/commands"
+
+  const back = () => history.back()
+
+  const browse = () => goto("/discover")
+
+  const joinQualifiedGroup = async (id: string) => {
+    const [url, nom] = splitGroupId(id)
+    const relay = await loadRelay(url)
+
+    if (!relay) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, we weren't able to find that relay.",
+      })
+    }
+
+    if (!relay.supported_nips?.includes(29)) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like that relay doesn't support nostr spaces.",
+      })
+    }
+
+    const group = await loadGroup(nom, [url])
+
+    if (!group) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, we weren't able to find that space.",
+      })
+    }
+
+    await addGroupMemberships([["group", nom, url]])
+
+    goto(`/spaces/${nom}`)
+    pushToast({
+      message: "Welcome to the space!",
+    })
+  }
+
+  const join = async () => {
+    loading = true
+
+    try {
+      await joinQualifiedGroup(id)
+    } finally {
+      loading = false
+    }
+  }
+
+  let id = ""
+  let loading = false
+
+  $: linkIsValid = Boolean(id.match(/.+\..+'.+/))
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={join}>
+  <div class="py-2">
+    <h1 class="heading">Join a Space</h1>
+    <p class="text-center">Enter an invite link below to join an existing space.</p>
+  </div>
+  <Field>
+    <p slot="label">Invite Link*</p>
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+      <Icon icon="link-round" />
+      <input bind:value={id} class="grow" type="text" />
+    </label>
+  </Field>
+  <CardButton icon="compass" title="Don't have an invite?" on:click={browse}>
+    Browse other spaces on the discover page.
+  </CardButton>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={!linkIsValid || loading}>
+      <Spinner {loading}>Join Space</Spinner>
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </div>
+</form>

src/app/components/SpaceJoin.svelte

@@ -1,90 +1,70 @@
 <script lang="ts">
+  import {append, remove} from '@welshman/lib'
+  import {displayRelayUrl} from '@welshman/util'
   import {goto} from "$app/navigation"
   import CardButton from "@lib/components/CardButton.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import InfoNip29 from '@app/components/InfoNip29.svelte'
   import {pushToast} from "@app/toast"
-  import {splitGroupId, loadRelay, loadGroup} from "@app/state"
+  import {pushModal} from "@app/modal"
+  import {deriveGroup, displayGroup, relayUrlsByNom} from "@app/state"
   import {addGroupMemberships} from "@app/commands"
 
+  export let nom
+
+  const group = deriveGroup(nom)
+
   const back = () => history.back()
 
-  const browse = () => goto("/discover")
-
-  const joinQualifiedGroup = async (id: string) => {
-    const [url, nom] = splitGroupId(id)
-    const relay = await loadRelay(url)
-
-    if (!relay) {
-      return pushToast({
-        theme: "error",
-        message: "Sorry, we weren't able to find that relay.",
-      })
-    }
-
-    if (!relay.supported_nips?.includes(29)) {
-      return pushToast({
-        theme: "error",
-        message: "Sorry, it looks like that relay doesn't support nostr spaces.",
-      })
-    }
-
-    const group = await loadGroup(nom, [url])
-
-    if (!group) {
-      return pushToast({
-        theme: "error",
-        message: "Sorry, we weren't able to find that space.",
-      })
-    }
-
-    await addGroupMemberships([["group", nom, url]])
-
-    goto(`/spaces/${nom}`)
-    pushToast({
-      message: "Welcome to the space!",
-    })
+  const onUrlChange = (e: any) => {
+    urls = urls.includes(e.target.value) ? remove(e.target.value, urls) : append(e.target.value, urls)
   }
 
   const join = async () => {
     loading = true
 
     try {
-      await joinQualifiedGroup(id)
+      await addGroupMemberships(urls.map(url => ["group", nom, url]))
     } finally {
       loading = false
     }
+
+    goto(`/spaces/${nom}`)
   }
 
-  let id = ""
+  let urls: string[] = $relayUrlsByNom.get(nom) || []
   let loading = false
 
-  $: linkIsValid = Boolean(id.match(/.+\..+'.+/))
+  $: hasUrls = urls.length > 0
+  $: urlOptions = $relayUrlsByNom.get(nom)?.toSorted() || []
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={join}>
-  <div class="py-2">
-    <h1 class="heading">Join a Space</h1>
-    <p class="text-center">Enter an invite link below to join an existing space.</p>
-  </div>
-  <Field>
-    <p slot="label">Invite Link*</p>
-    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
-      <Icon icon="link-round" />
-      <input bind:value={id} class="grow" type="text" />
-    </label>
-  </Field>
-  <CardButton icon="compass" title="Don't have an invite?" on:click={browse}>
-    Browse other spaces on the discover page.
-  </CardButton>
+  <h1 class="heading">
+    Joining <span class="text-primary">{displayGroup($group)}</span>
+  </h1>
+  <p class="text-center">
+    Please select which relays you'd like to use for this group.
+    <Button class="link" on:click={() => pushModal(InfoNip29)}>More information</Button>
+  </p>
+  {#each urlOptions as url}
+    <div class="alert !flex justify-between items-center">
+      <div class="flex gap-2 items-center">
+        <Icon icon="remote-controller-minimalistic" />
+        {displayRelayUrl(url)}
+      </div>
+      <input type="checkbox" value={url} class="toggle toggle-primary" checked={urls.includes(url)} on:change={onUrlChange} />
+    </div>
+  {/each}
   <div class="flex flex-row items-center justify-between gap-4">
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={!linkIsValid || loading}>
+    <Button type="submit" class="btn btn-primary" disabled={!hasUrls || loading}>
       <Spinner {loading}>Join Space</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>

src/app/state.ts

@@ -377,6 +377,8 @@ export const getGroupName = (e?: CustomEvent) => e?.tags.find(nthEq(0, "name"))?
 
 export const getGroupPicture = (e?: CustomEvent) => e?.tags.find(nthEq(0, "picture"))?.[1]
 
+export const displayGroup = (group?: Group) => group?.name || "[no name]"
+
 export type Group = {
   nom: string
   name?: string