Improve join/leave, publish messages

src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import "@src/app.css"
   import {onMount} from "svelte"
+  import {get, derived} from 'svelte/store'
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import {browser} from "$app/environment"
-  import {createEventStore} from "@welshman/store"
+  import {createEventStore, adapter} from "@welshman/store"
   import ModalBox from "@lib/components/ModalBox.svelte"
   import Toast from "@app/components/Toast.svelte"
   import Landing from "@app/components/Landing.svelte"
@@ -12,9 +13,12 @@
   import {modals, clearModal} from "@app/modal"
   import {theme} from "@app/theme"
   import {pk, session, repository, DEFAULT_RELAYS} from "@app/base"
-  import {relays, handles, loadRelay} from "@app/state"
+  import type {PublishStatusData, PublishStatusDataByUrlById} from "@app/state"
+  import {relays, freshness, plaintext, handles, loadRelay, publishStatusData} from "@app/state"
   import {initStorage} from "@app/storage"
   import {loadUserData} from "@app/commands"
+  import * as base from "@app/base"
+  import * as state from "@app/state"
 
   let ready: Promise<void>
   let dialog: HTMLDialogElement
@@ -43,7 +47,9 @@
   }
 
   onMount(() => {
-    ready = initStorage({
+    Object.assign(window, {get, base, state})
+
+    ready = initStorage(3, {
       events: {
         keyPath: "id",
         store: createEventStore(repository),
@@ -56,6 +62,65 @@
         keyPath: "nip05",
         store: handles,
       },
+      publishStatus: {
+        keyPath: "id",
+        store: adapter({
+          store: publishStatusData,
+          forward: ($psd: PublishStatusDataByUrlById) => {
+            const data = []
+
+            for (const [id, itemsByUrl] of Object.entries($psd)) {
+              for (const [url, item] of Object.entries(itemsByUrl)) {
+                data.push(item)
+              }
+            }
+
+            return data
+          },
+          backward: (data: PublishStatusData[]) => {
+            const result: PublishStatusDataByUrlById = {}
+
+            for (const item of data) {
+              result[item.id] = result[item.id] || {}
+              result[item.id][item.url] = item
+            }
+
+            return result
+          },
+        }),
+      },
+      freshness: {
+        keyPath: "key",
+        store: adapter({
+          store: freshness,
+          forward: ($freshness: Record<string, number>) => Object.entries($freshness).map(([key, ts]) => ({key, ts})),
+          backward: (data: any[]) => {
+            const result: Record<string, number> = {}
+
+            for (const {key, ts} of data) {
+              result[key] = ts
+            }
+
+            return result
+          },
+        }),
+      },
+      plaintext: {
+        keyPath: "id",
+        store: adapter({
+          store: plaintext,
+          forward: ($plaintext: Record<string, string>) => Object.entries($plaintext).map(([id, plaintext]) => ({id, plaintext})),
+          backward: (data: any[]) => {
+            const result: Record<string, string> = {}
+
+            for (const {id, plaintext} of data) {
+              result[id] = plaintext
+            }
+
+            return result
+          },
+        }),
+      },
     })
 
     dialog.addEventListener("close", () => {

src/routes/discover/+page.svelte

@@ -14,10 +14,10 @@
     userMembership,
   } from "@app/state"
 
-  const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
-
   let term = ""
 
+  $: groups = $searchGroups.searchOptions(term).filter(g => $relayUrlsByNom.get(g.nom)?.length > 0)
+
   onMount(() => {
     load({
       relays: [...DEFAULT_RELAYS, ...$relays.map(r => r.url)],
@@ -35,7 +35,7 @@
   </label>
   <Masonry
     animate={false}
-    items={$searchGroups.searchOptions(term)}
+    items={groups}
     minColWidth={250}
     maxColWidth={800}
     gap={16}
@@ -57,7 +57,7 @@
       {#if $userMembership?.noms.has(group.nom)}
         <div class="center absolute flex w-full">
           <div
-            class="tooltip relative left-8 top-[38px] rounded-full bg-primary"
+            class="tooltip relative left-8 w-5 h-5 top-[38px] rounded-full bg-primary"
             data-tip="You are already a member of this space.">
             <Icon icon="check-circle" class="scale-110" />
           </div>
@@ -66,7 +66,7 @@
       <div class="card-body">
         <h2 class="card-title justify-center">{displayGroup(group)}</h2>
         <div class="text-center text-sm">
-          {#each getRelayUrls(group.nom) as url}
+          {#each $relayUrlsByNom.get(group.nom) || [] as url}
             <div class="badge badge-neutral">{displayRelayUrl(url)}</div>
           {/each}
         </div>

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

@@ -90,5 +90,5 @@
       </Spinner>
     </p>
   </div>
-  <GroupCompose />
+  <GroupCompose {nom} />
 </div>