Add discover page

src/app/components/InfoNip29.svelte

@@ -20,9 +20,9 @@
     If you do decide to join someone else's, make sure to follow their directions for registering
     as a user.
   </p>
-  <div class="card flex-row justify-between">
-    devrelay.highlighter.com
-    <Button on:click={() => clip('devrelay.highlighter.com')}>
+  <div class="card2 flex-row justify-between">
+    groups.fiatjaf.com
+    <Button on:click={() => clip('groups.fiatjaf.com')}>
       <Icon icon="copy" />
     </Button>
   </div>

src/app/components/SpaceAdd.svelte

@@ -18,7 +18,7 @@
   <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">
+  <div class="card2 column gap-4">
     <h2 class="subheading">Have an invite?</h2>
     <Button class="btn btn-primary" on:click={startJoin}>
       Join a Space

src/app/state.ts

@@ -1,4 +1,5 @@
 import type {Readable} from "svelte/store"
+import type {FuseResult} from 'fuse.js'
 import {writable, readable, derived} from "svelte/store"
 import type {Maybe} from "@welshman/lib"
 import {uniq, uniqBy, groupBy, pushToMapKey, nthEq, batcher, postJson, stripProtocol, assoc, indexBy, now} from "@welshman/lib"
@@ -8,7 +9,7 @@ import type {SubscribeRequest} from '@welshman/net'
 import {publish, subscribe} from '@welshman/net'
 import {decrypt} from '@welshman/signer'
 import {deriveEvents, deriveEventsMapped, getter, withGetter} from "@welshman/store"
-import {parseJson} from '@lib/util'
+import {parseJson, createSearch} from '@lib/util'
 import type {Session, Handle, Relay} from '@app/types'
 import {INDEXER_RELAYS, DUFFLEPUD_URL, repository, pk, getSession, getSigner, signer} from "@app/base"
 
@@ -357,6 +358,7 @@ export const getGroupPicture = (e?: CustomEvent) => e?.tags.find(nthEq(0, "pictu
 export type Group = {
   nom: string,
   name?: string,
+  about?: string,
   picture?: string,
   event?: CustomEvent
 }
@@ -367,10 +369,11 @@ export type PublishedGroup = Omit<Group, "event"> & {
 
 export const readGroup = (event: CustomEvent) => {
   const nom = getIdentifier(event)!
-  const name = event?.tags.find(nthEq(0, "name"))?.[1]
+  const name = event?.tags.find(nthEq(0, "name"))?.[1] || "[no name]"
+  const about = event?.tags.find(nthEq(0, "about"))?.[1] || ""
   const picture = event?.tags.find(nthEq(0, "picture"))?.[1]
 
-  return {nom, name, picture, event}
+  return {nom, name, about, picture, event}
 }
 
 export const groups = deriveEventsMapped<PublishedGroup>({
@@ -401,6 +404,22 @@ export const {
     ])
 })
 
+export const searchGroups = derived(
+  groups,
+  $groups =>
+    createSearch($groups, {
+      getValue: (group: PublishedGroup) => group.nom,
+      sortFn: (result: FuseResult<PublishedGroup>) => {
+        const scale = result.item.picture ? 0.5 : 1
+
+        return result.score! * scale
+      },
+      fuseOptions: {
+        keys: ["name", {name: "about", weight: 0.3}],
+      },
+    })
+)
+
 // Qualified groups
 
 export type QualifiedGroup = {