Work on add space modal

src/app/commands.ts

@@ -1,6 +1,7 @@
 import {batch, postJson} from "@welshman/lib"
 import {normalizeRelayUrl} from "@welshman/util"
-import {relayInfo} from "app/state"
+import {DUFFLEPUD_URL} from "@app/base"
+import {relayInfo} from "@app/state"
 
 export const loadRelay = batch(1000, async (urls: string[]) => {
   const data = await postJson(`${DUFFLEPUD_URL}/relay/info`, {urls})

src/app/components/PrimaryNav.svelte

@@ -8,8 +8,12 @@
 <script lang="ts">
   import Icon from "@lib/components/Icon.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
+  import SpaceAdd from '@app/components/SpaceAdd.svelte'
   import {getGroupName, getGroupPicture, makeGroupId} from "@app/domain"
   import {userGroupRelaysByNom, groupsById} from "@app/state"
+  import {pushModal} from "@app/modal"
+
+  export const addSpace = () => pushModal(SpaceAdd)
 </script>
 
 <div class="relative w-14 bg-base-100">
@@ -32,7 +36,7 @@
           </div>
         </PrimaryNavItem>
       {/each}
-      <PrimaryNavItem title="Add Space">
+      <PrimaryNavItem title="Add Space" on:click={addSpace}>
         <div class="!flex w-10 items-center justify-center">
           <Icon size={7} icon="add-circle" />
         </div>

src/app/components/SpaceAdd.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import CardButton from '@lib/components/CardButton.svelte'
+  import SpaceCreate from '@app/components/SpaceCreate.svelte'
+  import {pushModal} from '@app/modal'
+
+  const startCreate = () => pushModal(SpaceCreate)
+</script>
+
+<div class="column gap-4">
+  <h1 class="heading">Add a Space</h1>
+  <p class="text-center">Spaces are places where communities come together to work, play, and hang out.</p>
+  <CardButton icon="add-circle" title="Get started" on:click={startCreate}>
+    Just a few questions and you'll be on your way.
+  </CardButton>
+  <div class="card column gap-4">
+    <h2 class="subheading">Have an invite?</h2>
+    <button class="btn btn-primary">
+      Join a Space
+    </button>
+  </div>
+</div>

src/app/components/SpaceCreate.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Field from '@lib/components/Field.svelte'
+  import Icon from '@lib/components/Icon.svelte'
+
+  const back = () => history.back()
+</script>
+
+<div class="column gap-4">
+  <h1 class="heading">Customize your Space</h1>
+  <p class="text-center">
+    Give people a few details to go. You can always change this later.
+  </p>
+  <Field>
+    <p slot="label">Give your space a name:</p>
+    <input slot="input" type="text" class="input input-bordered w-full max-w-xs" />
+  </Field>
+  <div class="flex flex-row justify-between items-center gap-4">
+    <button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </button>
+    <button class="btn btn-primary" on:click={back}>
+      Next
+      <Icon icon="alt-arrow-right" class="!bg-base-300" />
+    </button>
+  </div>
+</div>

src/app/modal.ts

@@ -4,7 +4,7 @@ import {pushState} from "$app/navigation"
 
 export const modals = new Map()
 
-export const pushModal = (component: ComponentType, props: Record<string, any>) => {
+export const pushModal = (component: ComponentType, props: Record<string, any> = {}) => {
   const id = randomId()
 
   // TODO: fix memory leak here by listening to history somehow