Add keys section, discover more relays, allow custom relays

src/app/components/RelayAdd.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {Readable} from "svelte/store"
+  import {tryCatch} from "@welshman/lib"
+  import {isShareableRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import {relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
@@ -14,6 +16,8 @@
   let limit = 20
   let element: Element
 
+  $: customUrl = tryCatch(() => normalizeRelayUrl(term))
+
   onMount(() => {
     const scroller = createScroller({
       element,
@@ -34,6 +38,14 @@
   <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
 </label>
 <div class="column -m-6 mt-0 h-[50vh] gap-2 overflow-auto p-6 pt-2" bind:this={element}>
+  {#if customUrl && isShareableRelayUrl(customUrl) && !$relays.includes(normalizeRelayUrl(customUrl))}
+    <RelayItem url={term}>
+      <Button class="btn btn-outline btn-sm flex items-center" on:click={() => addRelay(customUrl)}>
+        <Icon icon="add-circle" />
+        Add Relay
+      </Button>
+    </RelayItem>
+  {/if}
   {#each $relaySearch
     .searchValues(term)
     .filter(url => !$relays.includes(url))