From 5e221d803ec6e68b468e5dfc04f5b3c8df796420 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 14 Oct 2024 12:55:08 -0700
Subject: [PATCH] Fix tagging, relay search

---
 src/app.css                         |  4 ++++
 src/app/components/RelayAdd.svelte  |  4 +++-
 src/app/components/RelayItem.svelte | 12 ++++++------
 src/lib/components/ModalBox.svelte  |  2 +-
 src/lib/editor/util.ts              |  8 ++++----
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app.css b/src/app.css
index 0f6b1c9e..21780a77 100644
--- a/src/app.css
+++ b/src/app.css
@@ -108,6 +108,10 @@
   @apply flex flex-col gap-4;
 }
 
+.ellipsize {
+  @apply text-ellipsis overflow-hidden;
+}
+
 .content {
   @apply m-auto w-full max-w-3xl p-4 sm:p-8 md:p-12;
 }
diff --git a/src/app/components/RelayAdd.svelte b/src/app/components/RelayAdd.svelte
index 0b50cb0f..aa1924e0 100644
--- a/src/app/components/RelayAdd.svelte
+++ b/src/app/components/RelayAdd.svelte
@@ -32,11 +32,13 @@
   })
 </script>
 
-<div class="column gap-2" bind:this={element}>
+<div class="fixed left-6 right-6 top-6">
   <label class="input input-bordered flex w-full items-center gap-2">
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
   </label>
+</div>
+<div class="overflow-auto column gap-2 h-[50vh] mt-16" bind:this={element}>
   {#each $relaySearch
     .searchValues(term)
     .filter(url => !$relays.includes(url))
diff --git a/src/app/components/RelayItem.svelte b/src/app/components/RelayItem.svelte
index 3992f3ac..275e2692 100644
--- a/src/app/components/RelayItem.svelte
+++ b/src/app/components/RelayItem.svelte
@@ -13,19 +13,19 @@
 </script>
 
 <div class="card2 card2-sm bg-alt column gap-2">
-  <div class="flex items-center justify-between">
-    <div class="flex items-center gap-2">
+  <div class="flex items-center gap-4 justify-between">
+    <div class="flex items-center gap-2 ellipsize">
       <Icon icon="remote-controller-minimalistic" />
-      {displayRelayUrl(url)}
+      <p class="ellipsize">{displayRelayUrl(url)}</p>
     </div>
     <slot />
   </div>
   {#if $relay?.profile?.description}
-    <p>{$relay?.profile.description}</p>
+    <p class="ellipsize">{$relay?.profile.description}</p>
   {/if}
-  <span class="flex items-center gap-1 text-sm">
+  <span class="flex items-center gap-1 text-sm whitespace-nowrap">
     {#if $relay?.profile?.contact}
-      <Link external class="underline" href={$relay.profile.contact}
+      <Link external class="underline ellipsize" href={$relay.profile.contact}
         >{displayUrl($relay.profile.contact)}</Link>
       &bull;
     {/if}
diff --git a/src/lib/components/ModalBox.svelte b/src/lib/components/ModalBox.svelte
index 97ebffb1..a2d80418 100644
--- a/src/lib/components/ModalBox.svelte
+++ b/src/lib/components/ModalBox.svelte
@@ -5,6 +5,6 @@
   export let props = {}
 </script>
 
-<div class="bg-alt modal-box overflow-visible" transition:fly={{duration: 100}}>
+<div class="bg-alt modal-box overflow-y-auto overflow-visible" transition:fly={{duration: 100}}>
   <svelte:component this={component} {...props} />
 </div>
diff --git a/src/lib/editor/util.ts b/src/lib/editor/util.ts
index c5706088..a09b1773 100644
--- a/src/lib/editor/util.ts
+++ b/src/lib/editor/util.ts
@@ -61,27 +61,27 @@ export const getEditorTags = (editor: Editor) => {
     attrs.tag.replace(/^#/, "").toLowerCase(),
   ])
 
-  const naddrTags = findNodes("naddr", json).map(({kind, pubkey, identifier, relays = []}: any) => {
+  const naddrTags = findNodes("naddr", json).map(({attrs: {kind, pubkey, identifier, relays = []}}: any) => {
     const address = new Address(kind, pubkey, identifier).toString()
 
     return ["q", address, ctx.app.router.fromRelays(relays).getUrl(), pubkey]
   })
 
-  const neventTags = findNodes("nevent", json).map(({id, author, relays = []}: any) => [
+  const neventTags = findNodes("nevent", json).map(({attrs: {id, author, relays = []}}: any) => [
     "q",
     id,
     ctx.app.router.fromRelays(relays).getUrl(),
     author || "",
   ])
 
-  const mentionTags = findNodes("nprofile", json).map(({pubkey, relays = []}: any) => [
+  const mentionTags = findNodes("nprofile", json).map(({attrs: {pubkey, relays = []}}: any) => [
     "p",
     pubkey,
     ctx.app.router.fromRelays(relays).getUrl(),
     "",
   ])
 
-  const imetaTags = findNodes("image", json).map(({src, sha256}: any) => [
+  const imetaTags = findNodes("image", json).map(({attrs: {src, sha256}}: any) => [
     "imeta",
     `url ${src}`,
     `x ${sha256}`,