Add wot to discover

src/app/commands.ts

@@ -17,8 +17,9 @@ import {
   removeFromListByPredicate,
   getListTags,
   getRelayTags,
+  isShareableRelayUrl,
 } from "@welshman/util"
-import type {TrustedEvent, EventTemplate} from "@welshman/util"
+import type {TrustedEvent, EventTemplate, List} from "@welshman/util"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
 import {PublishStatus, AuthStatus, ConnectionStatus} from "@welshman/net"
 import {Nip59, stamp} from "@welshman/signer"
@@ -96,6 +97,7 @@ export const loadUserData = (
       await sleep(300)
 
       for (const pubkey of pubkeys) {
+        loadMembership(pubkey),
         loadProfile(pubkey)
         loadFollows(pubkey)
         loadMutes(pubkey)
@@ -106,6 +108,16 @@ export const loadUserData = (
   return promise
 }
 
+export const discoverRelays = (lists: List[]) => {
+  const urls = uniq(lists.flatMap(getRelayUrls))
+
+  for (const url of urls) {
+    if (isShareableRelayUrl(url)) {
+      loadRelay(url)
+    }
+  }
+}
+
 // Synchronization
 
 export const broadcastUserData = async (relays: string[]) => {

src/app/components/RelayAdd.svelte

@@ -6,7 +6,6 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import RelayItem from "@app/components/RelayItem.svelte"
-  import {discoverRelays} from "@app/state"
 
   export let relays: Readable<string[]>
   export let addRelay: (url: string) => void
@@ -16,7 +15,6 @@
   let element: Element
 
   onMount(() => {
-    const sub = discoverRelays()
     const scroller = createScroller({
       delay: 300,
       element: element.closest(".modal-box")!,
@@ -26,7 +24,6 @@
     })
 
     return () => {
-      sub.close()
       scroller.stop()
     }
   })

src/app/state.ts

@@ -14,6 +14,7 @@ import {
   max,
   pushToMapKey,
   nthEq,
+  shuffle,
 } from "@welshman/lib"
 import {
   getIdFilters,
@@ -54,6 +55,7 @@ import {
   hasNegentropy,
   pull,
   createSearch,
+  userFollows,
 } from "@welshman/app"
 import type {AppSyncOpts} from "@welshman/app"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
@@ -123,6 +125,13 @@ export const entityLink = (entity: string) => `https://coracle.social/${entity}`
 
 export const tagRoom = (room: string, url: string) => [ROOM, room, url]
 
+export const getDefaultPubkeys = () => {
+  const appPubkeys = import.meta.env.VITE_DEFAULT_PUBKEYS.split(",")
+  const userPubkeys = shuffle(getPubkeyTagValues(getListTags(get(userFollows))))
+
+  return userPubkeys.length > 5 ? userPubkeys : [...userPubkeys, ...appPubkeys]
+}
+
 export const ensureUnwrapped = async (event: TrustedEvent) => {
   if (event.kind !== WRAP) {
     return event
@@ -428,15 +437,3 @@ export const displayReaction = (content: string) => {
   if (content === "-") return "👎"
   return content
 }
-
-export const discoverRelays = () =>
-  subscribe({
-    filters: [{kinds: [RELAYS]}],
-    onEvent: (event: TrustedEvent) => {
-      for (const url of getRelayTagValues(event.tags)) {
-        if (isShareableRelayUrl(url)) {
-          loadRelay(url)
-        }
-      }
-    },
-  })

src/routes/discover/+page.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import {derived} from 'svelte/store'
   import Masonry from "svelte-bricks"
-  import {relaySearch} from "@welshman/app"
+  import {addToMapKey, dec, gt, inc} from "@welshman/lib"
+  import type {Relay} from "@welshman/app"
+  import {relays, createSearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -9,19 +12,52 @@
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import SpaceCheck from "@app/components/SpaceCheck.svelte"
-  import {userMembership, discoverRelays, getMembershipUrls} from "@app/state"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import {userMembership, memberships, membershipByPubkey, getMembershipUrls, getDefaultPubkeys} from "@app/state"
+  import {discoverRelays} from "@app/commands"
   import {pushModal} from "@app/modal"
 
+  const wotGraph = derived(
+    membershipByPubkey,
+    $m => {
+      const scores = new Map<string, Set<string>>()
+
+      for (const pubkey of getDefaultPubkeys()) {
+        for (const url of getMembershipUrls($m.get(pubkey))) {
+          addToMapKey(scores, url, pubkey)
+        }
+      }
+
+      return scores
+    }
+  )
+
   const openSpace = (url: string) => pushModal(SpaceCheck, {url})
 
   let term = ""
   let limit = 20
   let element: Element
 
-  $: relays = $relaySearch.searchOptions(term).slice(0, limit)
+  $: relaySearch = createSearch($relays, {
+    getValue: (relay: Relay) => relay.url,
+    sortFn: ({score, item}) => {
+      if (score && score > 0.1) return -score!
+
+      const wotScore = $wotGraph.get(item.url)?.size || 0
+
+      return score ? dec(score) * wotScore : -wotScore
+    },
+    fuseOptions: {
+      keys: ["url", "name", {name: "description", weight: 0.3}],
+      shouldSort: false,
+    },
+  })
+
+  $: results = relaySearch.searchOptions(term).slice(0, limit)
 
   onMount(() => {
-    const sub = discoverRelays()
+    discoverRelays($memberships)
+
     const scroller = createScroller({
       element: element.closest(".overflow-auto")!,
       onScroll: () => {
@@ -30,7 +66,6 @@
     })
 
     return () => {
-      sub.close()
       scroller.stop()
     }
   })
@@ -47,8 +82,8 @@
   </label>
   <Masonry
     animate={false}
-    items={relays}
-    minColWidth={250}
+    items={results}
+    minColWidth={300}
     maxColWidth={800}
     gap={16}
     idKey="url"
@@ -56,36 +91,40 @@
     <Button
       class="card2 bg-alt flex flex-col gap-2 text-left shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
       on:click={() => openSpace(relay.url)}>
-      <div class="flex gap-4">
-        <div class="avatar">
-          <div
-            class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
-            {#if relay.profile?.icon}
-              <img alt="" src={relay.profile.icon} />
-            {:else}
-              <Icon icon="ghost" size={5} />
-            {/if}
-          </div>
-        </div>
-        {#if getMembershipUrls($userMembership).includes(relay.url)}
-          <div class="flex justify-center">
-            <div class="relative">
-              <div
-                class="tooltip absolute -top-[88px] left-5 h-5 w-5 rounded-full bg-primary"
-                data-tip="You are already a member of this space.">
-                <Icon icon="check-circle" class="scale-110" />
-              </div>
+      <div class="flex gap-4 relative">
+        <div class="relative">
+          <div class="avatar relative">
+            <div
+              class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+              {#if relay.profile?.icon}
+                <img alt="" src={relay.profile.icon} />
+              {:else}
+                <Icon icon="ghost" size={5} />
+              {/if}
             </div>
           </div>
-        {/if}
+          {#if getMembershipUrls($userMembership).includes(relay.url)}
+            <div
+              class="absolute -right-1 -top-1 tooltip h-5 w-5 rounded-full bg-primary"
+              data-tip="You are already a member of this space.">
+              <Icon icon="check-circle" class="scale-110" />
+            </div>
+          {/if}
+        </div>
         <div>
-          <h2 class="text-xl">
+          <h2 class="text-xl ellipsize whitespace-nowrap">
             <RelayName url={relay.url} />
           </h2>
           <p class="text-sm opacity-75">{relay.url}</p>
         </div>
       </div>
-      <RelayDescription url={relay.url} class="ml-16" />
+      <RelayDescription url={relay.url} />
+      {#if gt($wotGraph.get(relay.url)?.size, 0)}
+        <div class="row-2 card2 card2-sm bg-alt">
+          Members:
+          <ProfileCircles pubkeys={Array.from($wotGraph.get(relay.url) || [])} />
+        </div>
+      {/if}
     </Button>
   </Masonry>
 </div>

src/routes/home/people/+page.svelte

@@ -7,11 +7,9 @@
   import Icon from "@lib/components/Icon.svelte"
   import PageHeader from "@lib/components/PageHeader.svelte"
   import PeopleItem from "@app/components/PeopleItem.svelte"
+  import {getDefaultPubkeys} from '@app/state'
 
-  const defaultPubkeys = uniq([
-    ...shuffle(getPubkeyTagValues(getListTags($userFollows))),
-    ...import.meta.env.VITE_DEFAULT_PUBKEYS.split(","),
-  ])
+  const defaultPubkeys = getDefaultPubkeys()
 
   let term = ""
   let limit = 10

src/routes/settings/profile/+page.svelte

@@ -9,7 +9,7 @@
     createProfile,
     isPublishedProfile,
   } from "@welshman/util"
-  import {pubkey, profilesByPubkey, publishThunk, displayNip05} from "@welshman/app"
+  import {pubkey, profilesByPubkey, publishThunk, displayNip05, deriveProfile} from "@welshman/app"
   import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -21,26 +21,28 @@
   import {pushModal} from "@app/modal"
   import {pushToast} from "@app/toast"
 
+  const profile = deriveProfile($pubkey!)
+
   const pubkeyDisplay = displayPubkey($pubkey!)
 
-  const cloneProfile = () => ({...($profilesByPubkey.get($pubkey!) || makeProfile())})
+  const cloneProfile = () => ({...($profile || makeProfile())})
 
   const toggleEdit = () => {
     editing = !editing
 
     if (!editing) {
-      profile = cloneProfile()
+      values = cloneProfile()
     }
   }
 
   const stopEdit = () => {
     editing = false
-    profile = cloneProfile()
+    values = cloneProfile()
   }
 
   const saveEdit = () => {
     const relays = ctx.app.router.WriteRelays().getUrls()
-    const template = isPublishedProfile(profile) ? editProfile(profile) : createProfile(profile)
+    const template = isPublishedProfile(values) ? editProfile(values) : createProfile(values)
     const event = createEvent(template.kind, template)
 
     publishThunk({event, relays})
@@ -50,7 +52,9 @@
 
   let file: File
   let editing = false
-  let profile = cloneProfile()
+  let values = cloneProfile()
+
+  $: display = editing ? values : $profile
 </script>
 
 <div class="content column gap-4">
@@ -58,16 +62,16 @@
     <div class="flex justify-between gap-2">
       <div class="flex max-w-full gap-3">
         <div class="py-1">
-          <Avatar src={profile?.picture} size={10} />
+          <Avatar src={display?.picture} size={10} />
         </div>
         <div class="flex min-w-0 flex-col">
           <div class="flex items-center gap-2">
             <div class="text-bold overflow-hidden text-ellipsis">
-              {displayProfile(profile, pubkeyDisplay)}
+              {displayProfile(display, pubkeyDisplay)}
             </div>
           </div>
           <div class="overflow-hidden text-ellipsis text-sm opacity-75">
-            {profile?.nip05 ? displayNip05(profile.nip05) : pubkeyDisplay}
+            {display?.nip05 ? displayNip05(display.nip05) : pubkeyDisplay}
           </div>
         </div>
       </div>
@@ -75,20 +79,20 @@
         <Icon icon="pen-new-square" />
       </Button>
     </div>
-    {#key profile.about}
-      <Content event={{content: profile.about, tags: []}} hideMedia />
+    {#key display?.about}
+      <Content event={{content: display?.about || "", tags: []}} hideMedia />
     {/key}
   </div>
   {#if editing}
     <form class="card2 bg-alt shadow-xl" transition:slide on:submit|preventDefault={saveEdit}>
       <div class="flex justify-center py-2">
-        <InputProfilePicture bind:file bind:url={profile.picture} />
+        <InputProfilePicture bind:file bind:url={values.picture} />
       </div>
       <Field>
         <p slot="label">Username</p>
         <label class="input input-bordered flex w-full items-center gap-2" slot="input">
           <Icon icon="user-circle" />
-          <input bind:value={profile.name} class="grow" type="text" />
+          <input bind:value={values.name} class="grow" type="text" />
         </label>
       </Field>
       <Field>
@@ -96,14 +100,14 @@
         <textarea
           class="textarea textarea-bordered leading-4"
           rows="3"
-          bind:value={profile.about}
+          bind:value={values.about}
           slot="input" />
       </Field>
       <Field>
         <p slot="label">Nostr Address</p>
         <label class="input input-bordered flex w-full items-center gap-2" slot="input">
           <Icon icon="remote-controller-minimalistic" />
-          <input bind:value={profile.nip05} class="grow" type="text" />
+          <input bind:value={values.nip05} class="grow" type="text" />
         </label>
         <p slot="info">
           <Button class="link" on:click={() => pushModal(InfoHandle)}

src/routes/settings/relays/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {derived} from "svelte/store"
   import {
     getRelayUrls,
@@ -6,6 +7,8 @@
     userInboxRelaySelections,
     getReadRelayUrls,
     getWriteRelayUrls,
+    relaySelections,
+    inboxRelaySelections,
   } from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -13,7 +16,7 @@
   import RelayItem from "@app/components/RelayItem.svelte"
   import RelayAdd from "@app/components/RelayAdd.svelte"
   import {pushModal} from "@app/modal"
-  import {setRelayPolicy, setInboxRelayPolicy} from "@app/commands"
+  import {setRelayPolicy, discoverRelays, setInboxRelayPolicy} from "@app/commands"
 
   const readRelayUrls = derived(userRelaySelections, getReadRelayUrls)
   const writeRelayUrls = derived(userRelaySelections, getWriteRelayUrls)
@@ -42,6 +45,10 @@
   const removeWriteRelay = (url: string) => setRelayPolicy(url, $readRelayUrls.includes(url), false)
 
   const removeInboxRelay = (url: string) => setInboxRelayPolicy(url, false)
+
+  onMount(() => {
+    discoverRelays([...$relaySelections, ...$inboxRelaySelections])
+  })
 </script>
 
 <div class="content column gap-4">