Get groups loading on login/page load

src/routes/+layout.svelte

@@ -9,9 +9,11 @@
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
   import SecondaryNav from "@app/components/SecondaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
-  import {session} from "@app/base"
+  import {pk, session} from "@app/base"
+  import {loadUserData} from "@app/state"
 
   let dialog: HTMLDialogElement
+  let prev: any
 
   $: modalId = $page.url.hash.slice(1)
   $: modal = modals.get(modalId)
@@ -23,12 +25,17 @@
 
     if (modal) {
       dialog?.showModal()
+      prev = modal
     } else {
       dialog?.close()
     }
   }
 
   onMount(() => {
+    if ($pk) {
+      loadUserData($pk)
+    }
+
     dialog.addEventListener('close', () => {
       if (modal) {
         clearModal()
@@ -46,9 +53,9 @@
     </div>
   </div>
   <dialog bind:this={dialog} class="modal modal-bottom sm:modal-middle !z-modal">
-    {#if modal}
-      {#key modal}
-        <ModalBox {...modal} />
+    {#if prev}
+      {#key prev}
+        <ModalBox {...prev} />
       {/key}
       <Toast />
     {/if}

src/routes/home/+page.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
   import CardButton from "@lib/components/CardButton.svelte"
+  import SpaceCreate from '@app/components/SpaceCreate.svelte'
+  import {pushModal} from '@app/modal'
+
+  export const createSpace = () => pushModal(SpaceCreate)
 </script>
 
 <div class="hero min-h-screen bg-base-200">
@@ -8,7 +12,7 @@
       <h1 class="text-stark-content text-center text-5xl">Welcome to</h1>
       <h1 class="text-stark-content mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
       <div class="grid lg:grid-cols-2 gap-3">
-        <CardButton icon="add-circle" title="Create a space" class="h-24">
+        <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">

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let nom
+</script>
+
+{nom}