Tweak some layout stuff

src/routes/settings/+layout.svelte

@@ -15,15 +15,20 @@
   <SecondaryNavSection>
     <div in:fly|local>
       <SecondaryNavItem href="/settings">
-        <Icon icon="settings" /> Settings
+        <Icon icon="user-circle" /> Profile
       </SecondaryNavItem>
     </div>
-    <div in:fly|local>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem href="/settings/relays">
+        <Icon icon="remote-controller-minimalistic" /> Relays
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 100}}>
       <SecondaryNavItem href="/settings/about">
         <Icon icon="info-square" /> About
       </SecondaryNavItem>
     </div>
-    <div in:fly|local={{delay: 50}}>
+    <div in:fly|local={{delay: 150}}>
       <SecondaryNavItem class="text-error hover:text-error" on:click={logout}>
         <Icon icon="exit" /> Log Out
       </SecondaryNavItem>

src/routes/settings/about/+page.svelte

@@ -12,18 +12,18 @@
 <div class="hero min-h-screen bg-base-200">
   <div class="hero-content">
     <div class="column content gap-6">
-      <p class="text-center text-3xl">Thanks for using</p>
+      <p class="text-center text-2xl">Thanks for using</p>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
       <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
         <div class="card2 shadow-2xl flex flex-col gap-2 text-center">
-          <h3 class="text-xl sm:h-12">Support development</h3>
+          <h3 class="text-2xl sm:h-12">Support development</h3>
           <p class="sm:h-16">Funds will be used to support development.</p>
           <Button class="btn btn-primary">
             Zap the Developer
           </Button>
         </div>
         <div class="card2 shadow-2xl flex flex-col gap-2 text-center">
-          <h3 class="text-xl sm:h-12">Get in touch</h3>
+          <h3 class="text-2xl sm:h-12">Get in touch</h3>
           <p class="sm:h-16">Having problems? Let us know by filing an issue.</p>
           <Link
             external

src/routes/settings/relays/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {readable} from 'svelte/store'
+  import {displayRelayUrl, isShareableRelayUrl} from '@welshman/util'
+  import type {SignedEvent} from '@welshman/util'
+  import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import {clip} from "@app/toast"
+  import {DEFAULT_RELAYS, INDEXER_RELAYS} from "@app/base"
+  import {searchRelays, subscribe, loadRelay} from "@app/state"
+
+  const relays = readable(DEFAULT_RELAYS)
+
+  const removeRelay = (url: string) => null
+
+  const addRelay = (url: string) => null
+
+  let term = ""
+
+  onMount(() => {
+    const sub = subscribe({
+      filters: [{kinds: [30166], '#N': ['29']}],
+      relays: [...INDEXER_RELAYS, ...DEFAULT_RELAYS],
+    })
+
+    sub.emitter.on('event', (url: string, event: SignedEvent) => {
+      const d = event.tags.find(t => t[0] === 'd')?.[1] || ""
+
+      if (isShareableRelayUrl(d)) {
+        loadRelay(d)
+      }
+    })
+
+    return () => sub.close()
+  })
+</script>
+
+<div class="content column gap-4">
+  <h1 class="superheading mt-20">Relays</h1>
+  <p class="text-center">Get connected with the nostr network</p>
+  {#each $relays as url}
+    <div class="card2 card2-sm flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Icon icon="remote-controller-minimalistic" />
+        {displayRelayUrl(url)}
+      </div>
+      <Button class="flex items-center" on:click={() => removeRelay(url)}>
+        <Icon icon="close-circle" />
+      </Button>
+    </div>
+  {/each}
+  <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 $searchRelays.searchValues(term).filter(url => !$relays.includes(url)) as url (url)}
+    <div class="card2 card2-sm flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Icon icon="remote-controller-minimalistic" />
+        {displayRelayUrl(url)}
+      </div>
+      <Button class="flex items-center" on:click={() => addRelay(url)}>
+        <Icon icon="add-circle" />
+      </Button>
+    </div>
+  {/each}
+</div>