Re-work relays page
This commit is contained in:
Jon Staab
@@ -1,92 +1,114 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {derived} from "svelte/store"
|
||||
import {uniq} from "@welshman/lib"
|
||||
import {displayRelayUrl} from "@welshman/util"
|
||||
import type {Readable} from 'svelte/store'
|
||||
import {relaySearch, getRelayUrls, userRelaySelections, userInboxRelaySelections, getReadRelayUrls, getWriteRelayUrls} from "@welshman/app"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import {INDEXER_RELAYS, discoverRelays} from "@app/state"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Collapse from "@lib/components/Collapse.svelte"
|
||||
import RelayItem from "@app/components/RelayItem.svelte"
|
||||
import RelayAdd from "@app/components/RelayAdd.svelte"
|
||||
import {pushModal} from '@app/modal'
|
||||
|
||||
const readRelayUrls = derived(userRelaySelections, getReadRelayUrls)
|
||||
const writeRelayUrls = derived(userRelaySelections, getWriteRelayUrls)
|
||||
const inboxRelayUrls = derived(userInboxRelaySelections, getRelayUrls)
|
||||
|
||||
const removeRelay = (url: string) => null
|
||||
const addRelay = (mode: string, relays: Readable<string[]>) =>
|
||||
pushModal(RelayAdd, {mode, relays})
|
||||
|
||||
const addRelay = (url: string) => null
|
||||
const removeReadRelay = (url: string) => null
|
||||
|
||||
let term = ""
|
||||
let currentRelayUrls: string[] = []
|
||||
const removeWriteRelay = (url: string) => null
|
||||
|
||||
$: currentRelayUrls = uniq([
|
||||
...currentRelayUrls,
|
||||
...getRelayUrls($userRelaySelections),
|
||||
...getRelayUrls($userInboxRelaySelections),
|
||||
]).sort()
|
||||
|
||||
onMount(() => {
|
||||
const sub = discoverRelays()
|
||||
|
||||
return () => sub.close()
|
||||
})
|
||||
const removeInboxRelay = (url: string) => null
|
||||
</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 currentRelayUrls as url}
|
||||
{@const read = $readRelayUrls.includes(url)}
|
||||
{@const write = $writeRelayUrls.includes(url)}
|
||||
{@const inbox = $inboxRelayUrls.includes(url)}
|
||||
<div class="card2 card2-sm flex flex-col gap-2 overflow-visible">
|
||||
<div class="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>
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="tooltip tooltip-right"
|
||||
data-tip="Notes for you will {read ? '' : 'not'} be sent here.">
|
||||
<Button class="btn btn-sm btn-{read ? 'primary' : 'neutral'}">
|
||||
Read
|
||||
<Collapse class="card2 bg-alt column gap-4">
|
||||
<h2 slot="title" class="text-xl flex items-center gap-3">
|
||||
<Icon icon="earth" />
|
||||
Broadcast Relays
|
||||
</h2>
|
||||
<p slot="description" class="text-sm">
|
||||
These relays will be advertised on your profile as places where you send your public
|
||||
notes. Be sure to select relays that will accept your notes, and which will let people
|
||||
who follow you read them.
|
||||
</p>
|
||||
<div class="column gap-2">
|
||||
{#each $writeRelayUrls.sort() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="flex items-center tooltip"
|
||||
data-tip="Stop using this relay"
|
||||
on:click={() => removeWriteRelay(url)}>
|
||||
<Icon icon="close-circle" />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="tooltip tooltip-right"
|
||||
data-tip="Notes you publish will {write ? '' : 'not'} be sent here.">
|
||||
<Button class="btn btn-sm btn-{write ? 'primary' : 'neutral'}">
|
||||
Write
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="tooltip tooltip-right"
|
||||
data-tip="Direct messages will {inbox ? '' : 'not'} be sent here.">
|
||||
<Button class="btn btn-sm btn-{inbox ? 'primary' : 'neutral'}">
|
||||
Inbox
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</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 $relaySearch.searchValues(term).filter(url => !currentRelayUrls.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)}>
|
||||
</RelayItem>
|
||||
{:else}
|
||||
<p class="text-center text-sm">No relays found</p>
|
||||
{/each}
|
||||
<Button class="btn btn-primary mt-2" on:click={() => addRelay('write', writeRelayUrls)}>
|
||||
<Icon icon="add-circle" />
|
||||
Add Relay
|
||||
</Button>
|
||||
</div>
|
||||
{/each}
|
||||
</Collapse>
|
||||
<Collapse class="card2 bg-alt column gap-4">
|
||||
<h2 slot="title" class="text-xl flex items-center gap-3">
|
||||
<Icon icon="inbox" />
|
||||
Inbox Relays
|
||||
</h2>
|
||||
<p slot="description" class="text-sm">
|
||||
These relays will be advertised on your profile as places where other people should
|
||||
send notes intended for you. Be sure to select relays that will accept notes that
|
||||
tag you.
|
||||
</p>
|
||||
<div class="column gap-2">
|
||||
{#each $readRelayUrls.sort() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="flex items-center tooltip"
|
||||
data-tip="Stop using this relay"
|
||||
on:click={() => removeReadRelay(url)}>
|
||||
<Icon icon="close-circle" />
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{:else}
|
||||
<p class="text-center text-sm">No relays found</p>
|
||||
{/each}
|
||||
<Button class="btn btn-primary mt-2" on:click={() => addRelay('read', readRelayUrls)}>
|
||||
<Icon icon="add-circle" />
|
||||
Add Relay
|
||||
</Button>
|
||||
</div>
|
||||
</Collapse>
|
||||
<Collapse class="card2 bg-alt column gap-4">
|
||||
<h2 slot="title" class="text-xl flex items-center gap-3">
|
||||
<Icon icon="mailbox" />
|
||||
Messaging Relays
|
||||
</h2>
|
||||
<p slot="description" class="text-sm">
|
||||
These relays will be advertised on your profile as places you use to send and
|
||||
receive direct messages. Be sure to select relays that will accept your messages
|
||||
and messages from people you'd like to be in contact with.
|
||||
</p>
|
||||
<div class="column gap-2">
|
||||
{#each $inboxRelayUrls.sort() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="flex items-center tooltip"
|
||||
data-tip="Stop using this relay"
|
||||
on:click={() => removeInboxRelay(url)}>
|
||||
<Icon icon="close-circle" />
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{:else}
|
||||
<p class="text-center text-sm">No relays found</p>
|
||||
{/each}
|
||||
<Button class="btn btn-primary mt-2" on:click={() => addRelay('inbox', inboxRelayUrls)}>
|
||||
<Icon icon="add-circle" />
|
||||
Add Relay
|
||||
</Button>
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user