Fix tagging, relay search

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;
 }

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

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}

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>

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}`,