Add ability to join a space

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}