Improve join/leave, publish messages

src/app/base.ts

@@ -1,6 +1,6 @@
 import {derived} from "svelte/store"
 import {memoize, assoc} from "@welshman/lib"
-import type {TrustedEvent} from "@welshman/util"
+import type {TrustedEvent, HashedEvent} from "@welshman/util"
 import {Repository, createEvent, Relay} from "@welshman/util"
 import {withGetter} from "@welshman/store"
 import {NetworkContext, Tracker} from "@welshman/net"
@@ -8,13 +8,17 @@ import {Nip46Broker, Nip46Signer, Nip07Signer, Nip01Signer} from "@welshman/sign
 import {synced} from "@lib/util"
 import type {Session} from "@app/types"
 
-export const DEFAULT_RELAYS = ["wss://groups.fiatjaf.com/"]
+export const DEFAULT_RELAYS = [
+  "wss://groups.fiatjaf.com/",
+  "wss://relay29.galaxoidlabs.com/",
+  "wss://devrelay.highlighter.com/",
+]
 
 export const INDEXER_RELAYS = ["wss://purplepag.es/", "wss://relay.damus.io/", "wss://nos.lol/"]
 
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"
 
-export const repository = new Repository()
+export const repository = new Repository<HashedEvent>()
 
 export const relay = new Relay(repository)
 

src/app/commands.ts

@@ -1,6 +1,7 @@
-import {uniqBy, uniq, now} from "@welshman/lib"
+import {uniqBy, uniq, now, choice} from "@welshman/lib"
 import {
   GROUPS,
+  GROUP_JOIN,
   asDecryptedEvent,
   getGroupTags,
   getRelayTagValues,
@@ -9,6 +10,7 @@ import {
   makeList,
   createList,
   createEvent,
+  displayProfile,
 } from "@welshman/util"
 import {pk, signer, repository, INDEXER_RELAYS} from "@app/base"
 import {
@@ -23,8 +25,34 @@ import {
   makeThunk,
   publishThunk,
   ensurePlaintext,
+  getProfilesByPubkey,
 } from "@app/state"
 
+// Utils
+
+export const getPubkeyHints = (pubkey: string) => {
+  const selections = getRelaySelectionsByPubkey().get(pubkey)
+  const relays = selections ? getWriteRelayUrls(selections) : []
+  const hints = relays.length ? relays : INDEXER_RELAYS
+
+  return hints
+}
+
+export const getPubkeyPetname = (pubkey: string) => {
+  const profile = getProfilesByPubkey().get(pubkey)
+  const display = displayProfile(profile)
+
+  return display
+}
+
+export const makeMention = (pubkey: string, hints?: string[]) =>
+  ["p", pubkey, choice(hints || getPubkeyHints(pubkey)), getPubkeyPetname(pubkey)]
+
+export const makeIMeta = (url: string, data: Record<string, string>) =>
+  ["imeta", `url ${url}`, ...Object.entries(data).map(([k, v]) => [k, v].join(' '))]
+
+// Loaders
+
 export const loadUserData = async (pubkey: string, hints: string[] = []) => {
   const relaySelections = await loadRelaySelections(pubkey, INDEXER_RELAYS)
   const relays = uniq([
@@ -46,6 +74,8 @@ export const loadUserData = async (pubkey: string, hints: string[] = []) => {
   await Promise.all(promises)
 }
 
+// Updates
+
 export type ModifyTags = (tags: string[][]) => string[][]
 
 export const updateList = async (kind: number, modifyTags: ModifyTags) => {
@@ -67,3 +97,10 @@ export const addGroupMemberships = (newTags: string[][]) =>
 
 export const removeGroupMemberships = (noms: string[]) =>
   updateList(GROUPS, (tags: string[][]) => tags.filter(t => !noms.includes(t[1])))
+
+export const sendJoinRequest = async (nom: string, url: string) => {
+  const event = createEvent(GROUP_JOIN, {tags: [["h", nom]]})
+  const result = await publishThunk(makeThunk({event, relays: [url]}))
+
+  return result[url]
+}

src/app/components/GroupCompose.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
   import {onMount} from 'svelte'
   import type {Readable} from 'svelte/store'
+  import {nprofileEncode} from 'nostr-tools/nip19'
   import {createEditor, type Editor, EditorContent, SvelteNodeViewRenderer} from 'svelte-tiptap'
   import {Extension} from '@tiptap/core'
-  import StarterKit from '@tiptap/starter-kit'
+  import Code from '@tiptap/extension-code'
+  import CodeBlock from '@tiptap/extension-code-block'
+  import Document from '@tiptap/extension-document'
+  import Dropcursor from '@tiptap/extension-dropcursor'
+  import Gapcursor from '@tiptap/extension-gapcursor'
+  import History from '@tiptap/extension-history'
+  import Paragraph from '@tiptap/extension-paragraph'
+  import Text from '@tiptap/extension-text'
   import HardBreakExtension from '@tiptap/extension-hard-break'
   import {Bolt11Extension, NProfileExtension, NEventExtension, NAddrExtension, ImageExtension, VideoExtension, FileUploadExtension} from 'nostr-editor'
   import type {StampedEvent} from '@welshman/util'
@@ -21,8 +29,11 @@
   import GroupComposeSuggestions from '@app/components/GroupComposeSuggestions.svelte'
   import GroupComposeTopicSuggestion from '@app/components/GroupComposeTopicSuggestion.svelte'
   import GroupComposeProfileSuggestion from '@app/components/GroupComposeProfileSuggestion.svelte'
-  import {signer} from '@app/base'
-  import {searchProfiles, searchTopics, displayProfileByPubkey} from '@app/state'
+  import {signer, INDEXER_RELAYS} from '@app/base'
+  import {searchProfiles, publishThunk, makeThunk, searchTopics, userRelayUrlsByNom, getWriteRelayUrls, displayProfileByPubkey, getRelaySelectionsByPubkey} from '@app/state'
+  import {getPubkeyHints, makeMention, makeIMeta} from '@app/commands'
+
+  export let nom
 
   let editor: Readable<Editor>
   let uploading = false
@@ -34,31 +45,36 @@
 
   const uploadFiles = () => $editor.chain().uploadFiles().run()
 
-  const sendMessage = () => {
-    console.log($editor.getJSON())
-    $editor.chain().clearContent().run()
-    createEvent(CHAT_MESSAGE, {
-      content: '',
-      tags: [],
+  const sendMessage = async () => {
+    const json = $editor.getJSON()
+    const relays = $userRelayUrlsByNom.get(nom)
+    const event = createEvent(CHAT_MESSAGE, {
+      content: $editor.getText(),
+      tags: [
+        ["h", nom],
+        ...findNodes(TopicExtension.name, json).map(t => ["t", t.attrs!.name.toLowerCase()]),
+        ...findNodes(NProfileExtension.name, json).map(m => makeMention(m.attrs!.pubkey, m.attrs!.relays)),
+        ...findNodes(ImageExtension.name, json).map(({attrs: {src, sha256: x}}: any) => makeIMeta(src, {x, ox: x})),
+      ],
     })
+
+    publishThunk(makeThunk({event, relays}))
+
+    $editor.chain().clearContent().run()
   }
 
   onMount(() => {
     editor = createEditor({
       autofocus: true,
       extensions: [
-        StarterKit.configure({
-          blockquote: false,
-          bold: false,
-          bulletList: false,
-          heading: false,
-          horizontalRule: false,
-          italic: false,
-          listItem: false,
-          orderedList: false,
-          strike: false,
-          hardBreak: false,
-        }),
+        Code,
+        CodeBlock,
+        Document,
+        Dropcursor,
+        Gapcursor,
+        History,
+        Paragraph,
+        Text,
         HardBreakExtension.extend({
           addKeyboardShortcuts() {
             return {
@@ -79,7 +95,7 @@
         LinkExtension.extend({
           addNodeView: () => SvelteNodeViewRenderer(GroupComposeLink),
         }),
-        Bolt11Extension.extend({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)}),
+        Bolt11Extension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)})),
         NProfileExtension.extend({
           addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
           addProseMirrorPlugins() {
@@ -89,7 +105,12 @@
                 name: 'nprofile',
                 editor: this.editor,
                 search: searchProfiles,
-                select: (pubkey: string, props: any) => props.command({pubkey}),
+                select: (pubkey: string, props: any) => {
+                  const relays = getPubkeyHints(pubkey)
+                  const nprofile = nprofileEncode({pubkey, relays})
+
+                  return props.command({pubkey, nprofile, relays})
+                },
                 suggestionComponent: GroupComposeProfileSuggestion,
                 suggestionsComponent: GroupComposeSuggestions,
               }),
@@ -135,11 +156,7 @@
         }),
       ],
       content: '',
-      onUpdate: () => {
-        //  console.log('update', $editor.getJSON(), $editor.getText())
-      },
     })
-    console.log($editor)
   })
 </script>
 

src/app/components/GroupComposeBolt11.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
+  import cx from 'classnames'
   import type {NodeViewProps} from '@tiptap/core'
   import {NodeViewWrapper} from 'svelte-tiptap'
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
+  import {clip} from '@app/toast'
 
   export let node: NodeViewProps['node']
+  export let selected: NodeViewProps['selected']
+
+  const copy = () => clip(node.attrs.lnbc)
 </script>
 
-<NodeViewWrapper class="inline link-content">
-  {node.attrs.lnbc.slice(0, 16)}...
+<NodeViewWrapper class="inline">
+  <Button on:click={copy} class={cx("link-content", {'link-content-selected': selected})}>
+    <Icon icon="bolt" size={3} class="inline-block translate-y-px" />
+    {node.attrs.lnbc.slice(0, 16)}...
+  </Button>
 </NodeViewWrapper>

src/app/components/GroupComposeMention.svelte

@@ -7,10 +7,13 @@
   import {deriveProfile} from '@app/state'
 
   export let node: NodeViewProps['node']
+  export let selected: NodeViewProps['selected']
 
   $: profile = deriveProfile(node.attrs.pubkey, node.attrs.relays)
 </script>
 
 <NodeViewWrapper class="inline">
-  <span class="text-primary">@</span><Link external href="https://njump.me/{node.attrs.nprofile}">{displayProfile($profile)}</Link>
+  <Link external href="https://njump.me/{node.attrs.nprofile}" class={cx("link-content", {'link-content-selected': selected})}>
+    @{displayProfile($profile)}
+  </Link>
 </NodeViewWrapper>

src/app/components/GroupComposeTopic.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
+  import cx from 'classnames'
   import type {NodeViewProps} from '@tiptap/core'
   import {NodeViewWrapper} from 'svelte-tiptap'
+  import Link from '@lib/components/Link.svelte'
 
   export let node: NodeViewProps['node']
+  export let selected: NodeViewProps['selected']
 </script>
 
-<NodeViewWrapper class="inline text-primary">
-  #<span class="underline">{node.attrs.name}</span>
+<NodeViewWrapper class="inline">
+  <Link external href="https://coracle.social/topics/{node.attrs.name.toLowerCase()}" class={cx("link-content", {'link-content-selected': selected})}>
+    #{node.attrs.name}
+  </Link>
 </NodeViewWrapper>

src/app/components/GroupNote.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import twColors from "tailwindcss/colors"
-  import {readable} from "svelte/store"
+  import {readable, derived} from "svelte/store"
   import {hash} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {GROUP_REPLY, getAncestorTags, displayPubkey} from "@welshman/util"
-  import {fly} from "@lib/transition"
+  import {PublishStatus} from "@welshman/net"
+  import {GROUP_REPLY, displayRelayUrl, getAncestorTags, displayPubkey} from "@welshman/util"
+  import {fly, fade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
-  import {deriveProfile, deriveProfileDisplay, deriveEvent} from "@app/state"
+  import type {PublishStatusData} from "@app/state"
+  import {deriveProfile, deriveProfileDisplay, deriveEvent, publishStatusData} from "@app/state"
 
   export let event: TrustedEvent
   export let showPubkey: boolean
@@ -41,10 +43,17 @@
   const parentHints = [replies[0]?.[2]].filter(Boolean)
   const parentEvent = parentId ? deriveEvent(parentId, parentHints) : readable(null)
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
+  const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))
+
+  const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
+    $ps.find(({status}) => statuses.includes(status))
 
   $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
   $: parentProfile = deriveProfile(parentPubkey)
   $: parentProfileDisplay = deriveProfileDisplay(parentPubkey)
+  $: isPublished = findStatus($ps, [PublishStatus.Success])
+  $: isPending = findStatus($ps, [PublishStatus.Pending])
+  $: failure = !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
 </script>
 
 <div in:fly class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300">
@@ -65,13 +74,28 @@
     {#if showPubkey}
       <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
     {:else}
-      <div class="w-10" />
+      <div class="min-w-10 max-w-10 w-10" />
     {/if}
     <div class="-mt-1">
       {#if showPubkey}
         <strong class="text-sm" style="color: {colorValue}" data-color={colorName}>{$profileDisplay}</strong>
       {/if}
-      <p class="text-sm">{event.content}</p>
+      <p class="text-sm">
+        {event.content}
+        {#if isPending}
+          <span class="ml-1 flex-inline gap-1">
+            <span class="loading loading-spinner h-3 w-3 mx-1 translate-y-px" />
+            <span class="opacity-50">Sending...</span>
+          </span>
+        {:else if failure}
+          <span
+            class="ml-1 flex-inline gap-1 tooltip cursor-pointer"
+            data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
+            <Icon icon="danger" class="translate-y-px" size={3} />
+            <span class="opacity-50">Failed to send!</span>
+          </span>
+        {/if}
+      </p>
     </div>
   </div>
   <div

src/app/components/InfoNip29.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import {displayRelayUrl} from '@welshman/util'
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import {DEFAULT_RELAYS} from "@app/base"
   import {clip} from "@app/toast"
 </script>
 
@@ -21,14 +23,16 @@
     >. If you do decide to join someone else's, make sure to follow their directions for registering
     as a user.
   </p>
-  <div class="alert !flex items-center justify-between">
-    <div class="flex items-center gap-2">
-      <Icon icon="remote-controller-minimalistic" />
-      groups.fiatjaf.com
+  {#each DEFAULT_RELAYS as url}
+    <div class="alert !flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Icon icon="remote-controller-minimalistic" />
+        {displayRelayUrl(url)}
+      </div>
+      <Button on:click={() => clip(url)}>
+        <Icon icon="copy" />
+      </Button>
     </div>
-    <Button on:click={() => clip("groups.fiatjaf.com")}>
-      <Icon icon="copy" />
-    </Button>
-  </div>
+  {/each}
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/PrimaryNav.svelte

@@ -52,9 +52,12 @@
       {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
         {@const qualifiedGroup = qualifiedGroups[0]}
         <PrimaryNavItem title={displayGroup(qualifiedGroup?.group)} href="/spaces/{nom}">
-          <div class="w-10 rounded-full border border-solid border-base-300">
-            <img alt={displayGroup(qualifiedGroup?.group)} src={qualifiedGroup?.group.picture} />
-          </div>
+          <Avatar
+            icon="ghost"
+            class="!h-10 !w-10 border border-solid border-base-300"
+            alt={displayGroup(qualifiedGroup?.group)}
+            src={qualifiedGroup?.group.picture}
+            size={7} />
         </PrimaryNavItem>
       {/each}
       <PrimaryNavItem title="Add Space" on:click={addSpace}>

src/app/components/SpaceJoin.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import {append, remove} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
+  import {PublishStatus} from "@welshman/net"
   import {goto} from "$app/navigation"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import InfoNip29 from "@app/components/InfoNip29.svelte"
-  import {pushModal} from "@app/modal"
+  import {pushModal, clearModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+  import type {PublishStatusData} from "@app/state"
   import {deriveGroup, displayGroup, relayUrlsByNom} from "@app/state"
-  import {addGroupMemberships} from "@app/commands"
+  import {sendJoinRequest, addGroupMemberships} from "@app/commands"
 
   export let nom
 
@@ -22,20 +25,35 @@
       : append(e.target.value, urls)
   }
 
+  const tryJoin = async () => {
+    for (const url of urls) {
+      const {status, message} = await sendJoinRequest(nom, url)
+
+      if (status !== PublishStatus.Success) {
+        return pushToast({
+          theme: 'error',
+          message: `Failed to join relay: ${message || status}`,
+        })
+      }
+    }
+
+    await addGroupMemberships(urls.map(url => ["group", nom, url]))
+
+    clearModal()
+  }
+
   const join = async () => {
     loading = true
 
     try {
-      await addGroupMemberships(urls.map(url => ["group", nom, url]))
+      await tryJoin()
     } finally {
       loading = false
     }
-
-    goto(`/spaces/${nom}`)
   }
 
-  let urls: string[] = $relayUrlsByNom.get(nom) || []
   let loading = false
+  let urls: string[] = $relayUrlsByNom.get(nom) || []
 
   $: hasUrls = urls.length > 0
   $: urlOptions = $relayUrlsByNom.get(nom)?.toSorted() || []

src/app/components/Toast.svelte

@@ -4,12 +4,14 @@
 </script>
 
 {#if $toast}
+  {@const theme = $toast.theme || "info"}
   {#key $toast.id}
     <div transition:fly class="toast z-toast">
       <div
         role="alert"
         class="alert flex justify-center"
-        class:alert-error={$toast.theme === "error"}>
+        class:alert-info={theme === "info"}
+        class:alert-error={theme === "error"}>
         {$toast.message}
       </div>
     </div>

src/app/state.ts

@@ -5,6 +5,7 @@ import {get, writable, readable, derived} from "svelte/store"
 import type {Maybe} from "@welshman/lib"
 import {
   max,
+  append,
   between,
   uniqBy,
   groupBy,
@@ -38,6 +39,8 @@ import {
   displayPubkey,
   GROUP_JOIN,
   GROUP_ADD_USER,
+  isStampedEvent,
+  isEventTemplate,
 } from "@welshman/util"
 import type {SignedEvent, HashedEvent, EventTemplate, TrustedEvent, PublishedProfile, PublishedList} from "@welshman/util"
 import type {SubscribeRequest, PublishRequest} from "@welshman/net"
@@ -129,9 +132,13 @@ export type Thunk = {
   relays: string[]
 }
 
-export const thunkWorker = new Worker<Thunk>()
+export type ThunkWithResolve = Thunk & {
+  resolve: (data: PublishStatusDataByUrl) => void
+}
 
-thunkWorker.addGlobalHandler(async ({event, relays}: Thunk) => {
+export const thunkWorker = new Worker<ThunkWithResolve>()
+
+thunkWorker.addGlobalHandler(async ({event, relays, resolve}: ThunkWithResolve) => {
   const session = getSession(event.pubkey)
 
   if (!session) {
@@ -139,26 +146,20 @@ thunkWorker.addGlobalHandler(async ({event, relays}: Thunk) => {
   }
 
   const signedEvent = await getSigner(session)!.sign(event)
-  const savedEvent = repository.getEvent(signedEvent.id)
   const pub = basePublish({event: signedEvent, relays})
 
   // Copy the signature over since we had deferred it
-  if (savedEvent) {
-    savedEvent.sig = signedEvent.sig
-  }
+  ;(repository.getEvent(signedEvent.id) as SignedEvent).sig = signedEvent.sig
 
-  const failures = new Set<string>()
+  // Track publish success
+  const {id} = event
+  const statusByUrl: PublishStatusDataByUrl = {}
 
-  // Watch for failures
-  pub.emitter.on('*', (status: PublishStatus, url: string) => {
-    console.log('pub status', status, url)
+  pub.emitter.on('*', (status: PublishStatus, url: string, message: string) => {
+    publishStatusData.update(assoc(id, Object.assign(statusByUrl, {[url]: {id, url, status, message}})))
 
-    if ([PublishStatus.Failure, PublishStatus.Timeout].includes(status)) {
-      failures.add(url)
-    }
-
-    if (failures.size === relays.length) {
-      console.warn("Failed to publish", pub)
+    if (Object.values(statusByUrl).filter(s => s.status !== PublishStatus.Pending).length === relays.length) {
+      resolve(statusByUrl)
     }
   })
 })
@@ -178,17 +179,20 @@ export const makeThunk = ({event, relays}: ThunkParams) => {
   return {event: hash(own(stamp(event), $pk)), relays}
 }
 
-export const publishThunk = (thunk: Thunk) => {
-  thunkWorker.push(thunk)
-  repository.publish(thunk.event)
-}
+export const publishThunk = (thunk: Thunk) =>
+  new Promise<PublishStatusDataByUrl>(resolve => {
+    thunkWorker.push({...thunk, resolve})
+    repository.publish(thunk.event)
+  })
 
 // Subscribe
 
 export const subscribe = (request: SubscribeRequest) => {
   const sub = baseSubscribe({delay: 50, authTimeout: 3000, ...request})
 
-  sub.emitter.on("event", (url: string, e: SignedEvent) => repository.publish(e))
+  sub.emitter.on("event", (url: string, e: SignedEvent) => {
+    repository.publish(e)
+  })
 
   return sub
 }
@@ -198,14 +202,27 @@ export const load = (request: SubscribeRequest) =>
     const sub = subscribe({closeOnEose: true, timeout: 3000, ...request})
     const events: TrustedEvent[] = []
 
-    sub.emitter.on("event", (url: string, e: SignedEvent) => {
-      repository.publish(e)
-      events.push(e)
-    })
+    sub.emitter.on("event", (url: string, e: SignedEvent) => events.push(e))
 
     sub.emitter.on("complete", () => resolve(events))
   })
 
+// Publish status
+
+export type PublishStatusData = {
+  id: string
+  url: string
+  message: string
+  status: PublishStatus
+}
+
+
+export type PublishStatusDataByUrl = Record<string, PublishStatusData>
+
+export type PublishStatusDataByUrlById = Record<string, PublishStatusDataByUrl>
+
+export const publishStatusData = writable<PublishStatusDataByUrlById>({})
+
 // Freshness
 
 export const freshness = withGetter(writable<Record<string, number>>({}))
@@ -255,7 +272,7 @@ export type Topic = {
   count: number
 }
 
-export const topics =  custom<Topic[]>(setter => {
+export const topics = custom<Topic[]>(setter => {
   const getTopics = () => {
     const topics = new Map<string, number>()
     for (const tagString of repository.eventsByTag.keys()) {
@@ -290,7 +307,7 @@ export const searchTopics = derived(topics, $topics =>
 export const relays = writable<Relay[]>([])
 
 export const relaysByPubkey = derived(relays, $relays =>
-  groupBy(($relay: Relay) => $relay.pubkey, $relays),
+  groupBy(($relay: Relay) => $relay.pubkey, $relays.filter(r => r.pubkey)),
 )
 
 export const {
@@ -508,7 +525,7 @@ export const getGroupName = (e?: TrustedEvent) => e?.tags.find(nthEq(0, "name"))
 
 export const getGroupPicture = (e?: TrustedEvent) => e?.tags.find(nthEq(0, "picture"))?.[1]
 
-export const displayGroup = (group?: Group) => group?.name || "[no name]"
+export const displayGroup = (group?: Group) => group?.name || group?.nom || "[no name]"
 
 export type Group = {
   nom: string
@@ -524,8 +541,8 @@ export type PublishedGroup = Omit<Group, "event"> & {
 
 export const readGroup = (event: TrustedEvent) => {
   const nom = getIdentifier(event)!
-  const name = event?.tags.find(nthEq(0, "name"))?.[1] || "[no name]"
-  const about = event?.tags.find(nthEq(0, "about"))?.[1] || ""
+  const name = event?.tags.find(nthEq(0, "name"))?.[1]
+  const about = event?.tags.find(nthEq(0, "about"))?.[1]
   const picture = event?.tags.find(nthEq(0, "picture"))?.[1]
 
   return {nom, name, about, picture, event}
@@ -759,3 +776,18 @@ export const userGroupsByNom = withGetter(
     return $userGroupsByNom
   }),
 )
+
+export const userRelayUrlsByNom = derived(
+  userGroupsByNom,
+  $userGroupsByNom => {
+    const $userRelayUrlsByNom = new Map()
+
+    for (const [nom, groups] of $userGroupsByNom.entries()) {
+      for (const group of groups) {
+        pushToMapKey($userRelayUrlsByNom, nom, group.relay.url)
+      }
+    }
+
+    return $userRelayUrlsByNom
+  }
+)

src/app/storage.ts

@@ -21,8 +21,6 @@ export const subs: Unsubscriber[] = []
 
 export const DB_NAME = "flotilla"
 
-export const DB_VERSION = 1
-
 export const getAll = async (name: string) => {
   const tx = db.transaction(name, "readwrite")
   const store = tx.objectStore(name)
@@ -81,12 +79,12 @@ export const initIndexedDbAdapter = async (name: string, adapter: IndexedDbAdapt
   )
 }
 
-export const initStorage = async (adapters: Record<string, IndexedDbAdapter>) => {
+export const initStorage = async (version: number, adapters: Record<string, IndexedDbAdapter>) => {
   if (!window.indexedDB) return
 
   window.addEventListener("beforeunload", () => closeStorage())
 
-  db = await openDB(DB_NAME, DB_VERSION, {
+  db = await openDB(DB_NAME, version, {
     upgrade(db: IDBPDatabase) {
       const names = Object.keys(adapters)