Add ability to join a space

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>