Spruce up join button on spaces page

src/routes/home/+page.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+  import {goto} from '$app/navigation'
   import CardButton from "@lib/components/CardButton.svelte"
   import SpaceCreate from '@app/components/SpaceCreate.svelte'
   import {pushModal} from '@app/modal'
 
-  export const createSpace = () => pushModal(SpaceCreate)
+  const createSpace = () => pushModal(SpaceCreate)
+
+  const browseSpaces = () => goto("/spaces")
 </script>
 
 <div class="hero min-h-screen bg-base-200">
@@ -15,7 +18,7 @@
         <CardButton icon="add-circle" title="Create a space" class="h-24" on:click={createSpace}>
             Invite all your friends, do life together.
         </CardButton>
-        <CardButton icon="compass" title="Discover spaces" class="h-24">
+        <CardButton icon="compass" title="Discover spaces" class="h-24" on:click={browseSpaces}>
             Find a community based on your hobbies or interests.
         </CardButton>
         <CardButton icon="plain" title="Leave feedback" class="h-24">

src/routes/spaces/+page.svelte

@@ -1,11 +1,29 @@
 <script lang="ts">
   import {onMount} from 'svelte'
   import Masonry from 'svelte-bricks'
-  import {GROUP_META} from '@welshman/util'
+  import {append, remove} from '@welshman/lib'
+  import {GROUP_META, displayRelayUrl} from '@welshman/util'
   import Icon from '@lib/components/Icon.svelte'
-  import {load, relays, groups, searchGroups} from '@app/state'
+  import Button from '@lib/components/Button.svelte'
+  import Spinner from '@lib/components/Spinner.svelte'
+  import {makeSpacePath} from '@app/routes'
+  import {load, relays, groups, searchGroups, relayUrlsByNom, userMembership} from '@app/state'
+  import {updateGroupMemberships} from '@app/commands'
+
+  const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
+
+  const join = async (nom: string) => {
+    loading = append(nom, loading)
+
+    try {
+      await updateGroupMemberships(getRelayUrls(nom).map(url => ["group", nom, url]))
+    } finally {
+      loading = remove(nom, loading)
+    }
+  }
 
   let term = ""
+  let loading: string[] = []
 
   onMount(() => {
     load({
@@ -22,22 +40,40 @@
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
   </label>
-  <Masonry animate={false} items={$searchGroups.searchOptions(term)} minColWidth={250} maxColWidth={800} gap={16} idKey="nom" let:item>
+  <Masonry animate={false} items={$searchGroups.searchOptions(term)} minColWidth={250} maxColWidth={800} gap={16} idKey="nom" let:item={group}>
     <div class="card bg-base-100 shadow-xl">
       <div class="avatar center mt-8">
         <div class="w-20 rounded-full bg-base-300 border-2 border-solid border-base-300 !flex center">
-          {#if item?.picture}
-            <img alt="" src={item.picture} />
+          {#if group?.picture}
+            <img alt="" src={group.picture} />
           {:else}
             <Icon icon="ghost" size={7} />
           {/if}
         </div>
       </div>
       <div class="card-body">
-        <h2 class="card-title justify-center">{item.name}</h2>
-        <p class="text-sm py-4">{item.about}</p>
+        <a href={makeSpacePath(group.nom)}>
+          <h2 class="card-title justify-center">{group.name}</h2>
+        </a>
+        <div class="text-sm text-center">
+          {#each getRelayUrls(group.nom) as url}
+            <div class="badge badge-neutral">{displayRelayUrl(url)}</div>
+          {/each}
+        </div>
+        <p class="text-sm py-4">{group.about}</p>
         <div class="card-actions">
-          <button class="btn btn-primary w-full">Join Space</button>
+          <Button
+            class="btn btn-primary w-full"
+            disabled={loading.includes(group.nom) || $userMembership?.noms.has(group.nom)}
+            on:click={() => join(group.nom)}>
+            {#if $userMembership?.noms.has(group.nom)}
+              <Icon icon="check-circle" />
+              Joined
+            {:else}
+              <Spinner loading={loading.includes(group.nom)} />
+              Join Space
+            {/if}
+          </Button>
         </div>
       </div>
     </div>

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

@@ -1,5 +1,16 @@
 <script lang="ts">
-  export let nom
+  import {page} from '$app/stores'
+  import {deriveGroup, deriveGroupConversation} from '@app/state'
+
+  const group = deriveGroup($page.params.nom)
+  const conversation = deriveGroupConversation($page.params.nom)
 </script>
 
-{nom}
+<div class="h-screen flex flex-col">
+  <div class="min-h-32 bg-base-100">
+  </div>
+  <div class="flex-grow overflow-auto">
+  </div>
+  <div class="min-h-32 bg-base-100">
+  </div>
+</div>

src/routes/themes/+page.svelte

@@ -12,7 +12,7 @@
 
 <div class="content column gap-4">
   <h1 class="superheading mt-20">Discover Themes</h1>
-  <p class="text-center">Make Flotilla look just how you like it</p>
+  <p class="text-center">Make your community feel like home</p>
   <label class="input input-bordered w-full flex items-center gap-2">
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" placeholder="Search for themes..." />