Add discover page

src/routes/+layout.svelte

@@ -65,7 +65,7 @@
     <div class="flex h-screen">
       <PrimaryNav />
       <SecondaryNav />
-      <div class="flex-grow bg-base-200">
+      <div class="flex-grow bg-base-200 max-h-screen overflow-auto">
         <slot />
       </div>
     </div>

src/routes/home/+page.svelte

@@ -8,7 +8,7 @@
 
 <div class="hero min-h-screen bg-base-200">
   <div class="hero-content">
-    <div class="flex max-w-2xl flex-col gap-4">
+    <div class="column content gap-4">
       <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">

src/routes/spaces/+page.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import Masonry from 'svelte-bricks'
+  import {GROUP_META} from '@welshman/util'
+  import Icon from '@lib/components/Icon.svelte'
+  import {load, relays, searchGroups} from '@app/state'
+
+  let term = ""
+
+  onMount(() => {
+    load({
+      relays: $relays.map(r => r.url),
+      filters: [{kinds: [GROUP_META]}],
+    })
+  })
+</script>
+
+<div class="content column gap-8">
+  <div class="column gap-4 pt-20 pb-12">
+    <h1 class="superheading">Discover Spaces</h1>
+    <p class="text-center">Find communities all across the nostr network</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 spaces..." />
+    </label>
+  </div>
+  <Masonry items={$searchGroups.searchOptions(term)} minColWidth={200} maxColWidth={400} gap={16} idKey="nom" let:item>
+    <div class="card bg-base-100 shadow-xl">
+      <div class="avatar center mt-4">
+        <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} />
+          {: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>
+        <div class="card-actions">
+          <button class="btn btn-primary w-full">Join Space</button>
+        </div>
+      </div>
+    </div>
+  </Masonry>
+</div>