Tweak some layout stuff

2024-08-23 16:54:05 -07:00
parent 8dac345fc4
commit 51b0c69513
12 changed files with 108 additions and 11 deletions
@@ -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>