Add themes page

src/routes/+layout.svelte

@@ -10,6 +10,7 @@
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
   import SecondaryNav from "@app/components/SecondaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
+  import {theme} from "@app/theme"
   import {session, sessions, pk, repository} from "@app/base"
   import {plaintext, relays, handles} from "@app/state"
   import {initStorage} from "@app/storage"
@@ -59,9 +60,9 @@
 </script>
 
 {#await ready}
-  <div data-theme="dark" />
+  <div data-theme={$theme} />
 {:then}
-  <div data-theme="dark">
+  <div data-theme={$theme}>
     <div class="flex h-screen">
       <PrimaryNav />
       <SecondaryNav />

src/routes/home/+page.svelte

@@ -9,8 +9,8 @@
 <div class="hero min-h-screen bg-base-200">
   <div class="hero-content">
     <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>
+      <h1 class="text-center text-5xl">Welcome to</h1>
+      <h1 class="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" on:click={createSpace}>
             Invite all your friends, do life together.

src/routes/spaces/+page.svelte

@@ -3,7 +3,7 @@
   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'
+  import {load, relays, groups, searchGroups} from '@app/state'
 
   let term = ""
 
@@ -15,18 +15,16 @@
   })
 </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="content column gap-4">
+  <h1 class="superheading mt-20">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>
+  <Masonry animate={false} items={$searchGroups.searchOptions(term)} minColWidth={250} maxColWidth={800} gap={16} idKey="nom" let:item>
     <div class="card bg-base-100 shadow-xl">
-      <div class="avatar center mt-4">
+      <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} />

src/routes/themes/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import themes from "daisyui/src/theming/themes"
+  import {identity} from '@welshman/lib'
+  import {createSearch} from '@lib/util'
+  import Icon from "@lib/components/Icon.svelte"
+  import {theme} from '@app/theme'
+
+  let term = ""
+
+  const searchThemes = createSearch(Object.keys(themes), {getValue: identity})
+</script>
+
+<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>
+  <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..." />
+  </label>
+  <div class="grid grid-cols-2 md:grid-cols-2 gap-4">
+    {#each searchThemes.searchValues(term) as name}
+      <div class="card bg-base-100 shadow-xl" data-theme={name}>
+        <div class="card-body">
+          <h2 class="card-title justify-center capitalize card2">{name}</h2>
+          <div class="card-actions">
+            <button class="btn btn-primary w-full" on:click={() => theme.set(name)}>Use Theme</button>
+          </div>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>