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

src/lib/components/SecondaryNavItem.svelte

@@ -26,7 +26,7 @@
 
   export let href: string = ""
 
-  $: active = $page.route.id?.startsWith(href)
+  $: active = $page.url.pathname === href
 </script>
 
 {#if href}

src/routes/+layout.svelte

@@ -9,9 +9,10 @@
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
   import {theme} from "@app/theme"
-  import {session, repository} from "@app/base"
+  import {pk, session, repository} from "@app/base"
   import {relays, handles} from "@app/state"
   import {initStorage} from "@app/storage"
+  import {loadUserData} from "@app/commands"
 
   let ready: Promise<void>
   let dialog: HTMLDialogElement
@@ -34,6 +35,10 @@
   }
 
   onMount(() => {
+    if ($pk) {
+      loadUserData($pk)
+    }
+
     ready = initStorage({
       events: {
         keyPath: "id",

src/routes/discover/+layout.svelte

@@ -10,12 +10,12 @@
 <SecondaryNav>
   <SecondaryNavSection>
     <div in:fly>
-      <SecondaryNavItem href="/spaces">
+      <SecondaryNavItem href="/discover">
         <Icon icon="widget" /> Spaces
       </SecondaryNavItem>
     </div>
     <div in:fly={{delay: 50}}>
-      <SecondaryNavItem href="/themes">
+      <SecondaryNavItem href="/discover/themes">
         <Icon icon="pallete-2" /> Themes
       </SecondaryNavItem>
     </div>

src/routes/discover/+page.svelte

@@ -4,7 +4,7 @@
   import {GROUP_META, displayRelayUrl} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import {makeSpacePath} from "@app/routes"
-  import {load, relays, searchGroups, relayUrlsByNom, userMembership} from "@app/state"
+  import {load, displayGroup, relays, searchGroups, relayUrlsByNom, userMembership} from "@app/state"
 
   const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
 
@@ -39,7 +39,7 @@
       <div class="center avatar mt-8">
         <div
           class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
-          {#if group?.picture}
+          {#if group.picture}
             <img alt="" src={group.picture} />
           {:else}
             <Icon icon="ghost" size={7} />
@@ -56,7 +56,7 @@
         </div>
       {/if}
       <div class="card-body">
-        <h2 class="card-title justify-center">{group.name}</h2>
+        <h2 class="card-title justify-center">{displayGroup(group)}</h2>
         <div class="text-center text-sm">
           {#each getRelayUrls(group.nom) as url}
             <div class="badge badge-neutral">{displayRelayUrl(url)}</div>

src/routes/spaces/+layout.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-  import {fly} from "@lib/transition"
-  import Icon from "@lib/components/Icon.svelte"
-  import Page from "@lib/components/Page.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Popover from "@lib/components/Popover.svelte"
-  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
-  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
-  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
-  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
-  import SpaceExit from "@app/components/SpaceExit.svelte"
-  import {deriveGroup} from "@app/state"
-  import {pushModal} from "@app/modal"
-
-  export let nom
-
-  const group = deriveGroup(nom)
-
-  const openMenu = () => {
-    showMenu = true
-  }
-
-  const toggleMenu = () => {
-    showMenu = !showMenu
-  }
-
-  const leaveSpace = () => pushModal(SpaceExit, {nom})
-
-  let showMenu = false
-</script>
-
-<SecondaryNav>
-  <SecondaryNavSection>
-    <div>
-      <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
-        <strong>{$group?.name || "[no name]"}</strong>
-        <Icon icon="alt-arrow-down" />
-      </SecondaryNavItem>
-      {#if showMenu}
-        <Popover onClose={toggleMenu}>
-          <ul
-            transition:fly|local
-            class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-            <li class="text-error">
-              <Button on:click={leaveSpace}>
-                <Icon icon="exit" />
-                Leave Space
-              </Button>
-            </li>
-          </ul>
-        </Popover>
-      {/if}
-    </div>
-    <div class="h-2" />
-    <SecondaryNavHeader>
-      Rooms
-      <div class="cursor-pointer">
-        <Icon icon="add-circle" />
-      </div>
-    </SecondaryNavHeader>
-    <div in:fly|local>
-      <SecondaryNavItem href="/invalid">
-        <Icon icon="hashtag" /> Spaces
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 50}}>
-      <SecondaryNavItem href="/invalid">
-        <Icon icon="hashtag" /> Themes
-      </SecondaryNavItem>
-    </div>
-  </SecondaryNavSection>
-</SecondaryNav>
-
-<Page>
-  <slot />
-</Page>

src/routes/spaces/[nom]/+layout.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import {page} from '$app/stores'
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import SpaceExit from "@app/components/SpaceExit.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import {deriveGroup, userMembership, displayGroup} from "@app/state"
+  import {pushModal} from "@app/modal"
+
+  const openMenu = () => {
+    showMenu = true
+  }
+
+  const toggleMenu = () => {
+    showMenu = !showMenu
+  }
+
+  const leaveSpace = () => pushModal(SpaceExit, {nom})
+
+  const joinSpace = () => pushModal(SpaceJoin, {nom})
+
+  let showMenu = false
+
+  $: nom = $page.params.nom
+  $: group = deriveGroup(nom)
+</script>
+
+{#key nom}
+  <SecondaryNav>
+    <SecondaryNavSection>
+      <div>
+        <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
+          <strong>{displayGroup($group)}</strong>
+          <Icon icon="alt-arrow-down" />
+        </SecondaryNavItem>
+        {#if showMenu}
+          <Popover hideOnClick onClose={toggleMenu}>
+            <ul
+              transition:fly|local
+              class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+              {#if $userMembership?.noms.has(nom)}
+                <li class="text-error">
+                  <Button on:click={leaveSpace}>
+                    <Icon icon="exit" />
+                    Leave Space
+                  </Button>
+                </li>
+              {:else}
+                <li>
+                  <Button on:click={joinSpace}>
+                    <Icon icon="login-2" />
+                    Join Space
+                  </Button>
+                </li>
+              {/if}
+            </ul>
+          </Popover>
+        {/if}
+      </div>
+      <div class="h-2" />
+      <SecondaryNavHeader>
+        Rooms
+        <div class="cursor-pointer">
+          <Icon icon="add-circle" />
+        </div>
+      </SecondaryNavHeader>
+      <div in:fly|local>
+        <SecondaryNavItem href="/invalid">
+          <Icon icon="hashtag" /> Spaces
+        </SecondaryNavItem>
+      </div>
+      <div in:fly|local={{delay: 50}}>
+        <SecondaryNavItem href="/invalid">
+          <Icon icon="hashtag" /> Themes
+        </SecondaryNavItem>
+      </div>
+    </SecondaryNavSection>
+  </SecondaryNav>
+
+  <Page>
+    <slot />
+  </Page>
+{/key}