Improve profile search

src/app/commands.ts

@@ -12,7 +12,7 @@ import {
   getWriteRelayUrls,
   loadFollows,
   loadMutes,
-  followsByPubkey,
+  getFollows,
 } from "@welshman/app"
 import {ROOM, MEMBERSHIPS, INDEXER_RELAYS} from "@app/state"
 
@@ -60,14 +60,13 @@ export const loadUserData = (
 
   // Load followed profiles slowly in the background without clogging other stuff up
   promise.then(async () => {
-    const followsList = followsByPubkey.get().get(pubkey)
-    const follows = getPubkeyTagValues(followsList?.event.tags || [])
-
-    for (const pubkeys of chunk(50, follows)) {
+    for (const pubkeys of chunk(50, getFollows(pubkey))) {
       await sleep(300)
 
       for (const pubkey of pubkeys) {
         loadProfile(pubkey)
+        loadFollows(pubkey)
+        loadMutes(pubkey)
       }
     }
   })

src/app/components/ChatMessage.svelte

@@ -20,6 +20,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
+  import Content from "@app/components/Content.svelte"
   import {REPLY, deriveEvent, displayReaction} from "@app/state"
 
   export let event: TrustedEvent
@@ -90,7 +91,7 @@
     {:else}
       <div class="w-10 min-w-10 max-w-10" />
     {/if}
-    <div class="-mt-1">
+    <div class="-mt-1 flex-grow pr-1">
       {#if showPubkey}
         <div class="flex items-center gap-2">
           <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
@@ -98,8 +99,8 @@
           <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
         </div>
       {/if}
-      <p class="text-sm">
-        {event.content}
+      <div class="text-sm">
+        <Content {event} />
         {#if isPending}
           <span class="flex-inline ml-1 gap-1">
             <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
@@ -113,7 +114,7 @@
             <span class="opacity-50">Failed to send!</span>
           </span>
         {/if}
-      </p>
+      </div>
     </div>
   </div>
   {#if $reactions.length > 0 || $zaps.length > 0}

src/app/components/Content.svelte

@@ -26,7 +26,7 @@
   import ContentQuote from '@app/components/ContentQuote.svelte'
   import ContentTopic from '@app/components/ContentTopic.svelte'
   import ContentMention from '@app/components/ContentMention.svelte'
-  import {nostr} from '@app/state'
+  import {entityLink} from '@app/state'
 
   export let event
   export let minLength = 500
@@ -108,7 +108,7 @@
         <Link
           external
           class="overflow-hidden text-ellipsis whitespace-nowrap underline"
-          href={nostr(parsed.raw)}>
+          href={entityLink(parsed.raw)}>
           {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
         </Link>
       {/if}

src/app/components/ContentLinkBlock.svelte

@@ -34,7 +34,9 @@
       class="object-cover object-center max-h-96" />
   {:else}
     {#await loadPreview()}
-      <span class="loading loading-spinner" />
+      <div class="center my-12 w-full">
+        <span class="loading loading-spinner" />
+      </div>
     {:then preview}
       {#if preview.image}
         <img
@@ -42,13 +44,17 @@
           src={imgproxy(preview.image)}
           class="max-h-96 object-contain object-center" />
       {/if}
-      <div class="h-px bg-neutral-600" />
+      <div class="h-px" />
       {#if preview.title}
-        <div class="flex flex-col bg-white px-4 py-2 text-black">
+        <div class="flex flex-col px-4 py-2">
           <strong class="overflow-hidden text-ellipsis whitespace-nowrap">{preview.title}</strong>
           <small>{ellipsize(preview.description, 140)}</small>
         </div>
       {/if}
+    {:catch}
+      <p class="mb-1 p-12 text-center">
+        Unable to load a preview for {url}
+      </p>
     {/await}
   {/if}
 </Link>

src/app/components/ContentMention.svelte

@@ -3,7 +3,7 @@
   import {displayProfile} from "@welshman/util"
   import {deriveProfile} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
-  import {nostr} from '@app/state'
+  import {entityLink} from '@app/state'
 
   export let value
 
@@ -11,6 +11,6 @@
   const nprofile = nip19.nprofileEncode(value)
 </script>
 
-<Link external href={nostr(nprofile)} class="link-content">
+<Link external href={entityLink(nprofile)} class="link-content">
   @{displayProfile($profile)}
 </Link>

src/app/components/Profile.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
   import {displayPubkey} from "@welshman/util"
-  import {deriveProfile, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
+  import {deriveProfile, deriveHandleForPubkey, displayHandle, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
 
   export let pubkey
 
   const profile = deriveProfile(pubkey)
   const profileDisplay = deriveProfileDisplay(pubkey)
+  const handle = deriveHandleForPubkey(pubkey)
 </script>
 
-<div class="flex gap-2">
+<div class="flex gap-2 max-w-full">
   <div class="py-1">
     <Avatar src={$profile?.picture} size={10} />
   </div>
-  <div class="flex flex-col">
-    <div class="text-bold">{$profileDisplay}</div>
-    <div class="text-sm opacity-75">{displayPubkey(pubkey)}</div>
+  <div class="flex flex-col min-w-0">
+    <div class="text-bold text-ellipsis overflow-hidden">
+      {$profileDisplay}
+    </div>
+    <div class="text-sm opacity-75 text-ellipsis overflow-hidden">
+      {$handle ? displayHandle($handle) : displayPubkey(pubkey)}
+    </div>
   </div>
 </div>

src/app/state.ts

@@ -43,7 +43,11 @@ export const REPLY = 1111
 
 export const MEMBERSHIPS = 10209
 
-export const INDEXER_RELAYS = ["wss://purplepag.es/", "wss://relay.damus.io/", "wss://nos.lol/"]
+export const INDEXER_RELAYS = [
+  "wss://purplepag.es/",
+  "wss://relay.damus.io/",
+  "wss://relay.nostr.band/",
+]
 
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"
 
@@ -67,7 +71,7 @@ export const imgproxy = (url: string, {w = 640, h = 1024} = {}) => {
   }
 }
 
-export const nostr = (entity: string) => `https://coracle.social/${entity}`
+export const entityLink = (entity: string) => `https://coracle.social/${entity}`
 
 setContext({
   net: getDefaultNetContext(),

src/lib/components/Avatar.svelte

@@ -9,8 +9,9 @@
 </script>
 
 <div
-  class={cx($$props.class, "!flex items-center justify-center overflow-hidden rounded-full")}
-  style={`width: ${size * 4}px; height: ${size * 4}px;`}>
+  class={cx($$props.class, "!flex overflow-hidden rounded-full")}
+  class:center={!src}
+  style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px;`}>
   {#if src}
     <img {alt} {src} />
   {:else}

src/lib/editor/EditEvent.svelte

@@ -4,7 +4,7 @@
   import {ellipsize} from "@welshman/lib"
   import {type TrustedEvent, fromNostrURI, Address} from "@welshman/util"
   import Link from "@lib/components/Link.svelte"
-  import {deriveEvent, nostr} from "@app/state"
+  import {deriveEvent, entityLink} from "@app/state"
 
   export let node: NodeViewProps["node"]
 
@@ -18,7 +18,7 @@
 </script>
 
 <NodeViewWrapper class="inline">
-  <Link external href={nostr(node.attrs.nevent)} class="link-content">
+  <Link external href={entityLink(node.attrs.nevent)} class="link-content">
     {displayEvent($event)}
   </Link>
 </NodeViewWrapper>

src/lib/editor/EditMention.svelte

@@ -5,7 +5,7 @@
   import {displayProfile} from "@welshman/util"
   import {deriveProfile} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
-  import {nostr} from '@app/state'
+  import {entityLink} from '@app/state'
 
   export let node: NodeViewProps["node"]
   export let selected: NodeViewProps["selected"]
@@ -16,7 +16,7 @@
 <NodeViewWrapper class="inline">
   <Link
     external
-    href={nostr(node.attrs.nprofile)}
+    href={entityLink(node.attrs.nprofile)}
     class={cx("link-content", {"link-content-selected": selected})}>
     @{displayProfile($profile)}
   </Link>

src/lib/editor/SuggestionProfile.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import {deriveProfileDisplay} from "@welshman/app"
+  import Profile from '@app/components/Profile.svelte'
 
   export let value
-
-  const display = deriveProfileDisplay(value)
 </script>
 
-@{$display}
+<Profile pubkey={value} />

src/lib/editor/Suggestions.svelte

@@ -20,7 +20,7 @@
   $: populateItems(term)
 
   const populateItems = throttle(300, term => {
-    items = $search.searchValues(term).slice(0, 30)
+    items = $search.searchValues(term).slice(0, 5)
   })
 
   const setIndex = (newIndex: number, block: any) => {

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

@@ -2,7 +2,7 @@
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {nostr} from '@app/state'
+  import {entityLink} from '@app/state'
 
   const nprofile =
     "nprofile1qqsf03c2gsmx5ef4c9zmxvlew04gdh7u94afnknp33qvv3c94kvwxgspz4mhxue69uhhyetvv9ujuerpd46hxtnfduhsz9rhwden5te0wfjkcctev93xcefwdaexwtcpzdmhxue69uhhqatjwpkx2urpvuhx2ue0vamm57"
@@ -34,7 +34,7 @@
         <p class="text-center">
           Built with 💜 by
           <span class="text-primary">
-            @<Link external href={nostr(nprofile)} class="link">hodlbod</Link>
+            @<Link external href={entityLink(nprofile)} class="link">hodlbod</Link>
           </span>
         </p>
         <div class="flex justify-center gap-4">