Add ability to join a space

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}