Re-work relays page

src/app/components/ContentQuote.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
   import {getAddress, Address} from "@welshman/util"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
@@ -13,25 +12,18 @@
   const event = deriveEvent(idOrAddress, relays)
 
   let element: Element
-  let bgClass = "bg-base-300"
 
   $: address = $event ? getAddress($event) : ""
   $: isGroup = address.match(/^(34550|35834):/)
-
-  onMount(() => {
-    if (element.closest('.bg-base-300')) {
-      bgClass = 'bg-base-100'
-    }
-  })
 </script>
 
 <button class="block text-left my-2 max-w-full" bind:this={element} on:click|stopPropagation>
   {#if $event}
-    <NoteCard event={$event} class="p-4 rounded-box {bgClass}">
+    <NoteCard event={$event} class="p-4 rounded-box bg-alt">
       <slot name="note-content" event={$event} {depth} />
     </NoteCard>
   {:else}
-    <div class="p-4 rounded-box {bgClass}">
+    <div class="p-4 rounded-box">
       <Spinner loading>Loading event...</Spinner>
     </div>
   {/if}

src/app/components/RelayAdd.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import type {Readable} from 'svelte/store'
+  import {relaySearch} from "@welshman/app"
+  import {createScroller} from "@lib/html"
+  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 mode: string
+  export let relays: Readable<string[]>
+
+  const addRelay = (url: string) => null
+
+  let term = ""
+  let limit = 20
+  let element: Element
+
+  onMount(() => {
+    const sub = discoverRelays()
+    const scroller = createScroller({
+      delay: 300,
+      element: element.closest('.modal-box')!,
+      onScroll: () => {
+        limit += 20
+      },
+    })
+
+    return () => {
+      sub.close()
+      scroller.stop()
+    }
+  })
+</script>
+
+<div class="column gap-2" bind:this={element}>
+  <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>
+  {#each $relaySearch.searchValues(term).filter(url => !$relays.includes(url)).slice(0, limit) as url (url)}
+    <RelayItem {url}>
+      <Button class="btn btn-outline btn-sm flex items-center" on:click={() => addRelay(url)}>
+        <Icon icon="add-circle" />
+        Add Relay
+      </Button>
+    </RelayItem>
+  {/each}
+</div>

src/app/components/RelayItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import {displayUrl} from '@welshman/lib'
+  import {displayRelayUrl} from '@welshman/util'
+  import {deriveRelay} from '@welshman/app'
+
+  export let url
+
+  const relay = deriveRelay(url)
+
+  $: connections = $relay?.stats?.connect_count || 0
+</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">
+      <Icon icon="remote-controller-minimalistic" />
+      {displayRelayUrl(url)}
+    </div>
+    <slot />
+  </div>
+  {#if $relay?.profile?.description}
+    <p>{$relay?.profile.description}</p>
+  {/if}
+  <span class="flex items-center gap-1 text-sm">
+    {#if $relay?.profile?.contact}
+      <Link external class="underline" href={$relay.profile.contact}
+        >{displayUrl($relay.profile.contact)}</Link>
+      &bull;
+    {/if}
+    {#if $relay?.profile?.supported_nips}
+      <span class="cursor-pointer underline tooltip" data-tip="NIPs supported: {$relay.profile.supported_nips.join(", ")}">
+        {$relay.profile.supported_nips.length} NIPs
+      </span>
+      &bull;
+    {/if}
+    Connected {connections} {connections === 1 ? 'time' : 'times'}
+  </span>
+</div>