Improve profile search

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) => {