Overhaul relay settings page
This commit is contained in:
Jon Staab
@@ -1,30 +1,70 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {SvelteSet} from "svelte/reactivity"
|
||||
import type {Readable} from "svelte/store"
|
||||
import {tryCatch} from "@welshman/lib"
|
||||
import {isShareableRelayUrl, normalizeRelayUrl} from "@welshman/util"
|
||||
import {relaySearch} from "@welshman/app"
|
||||
import {isShareableRelayUrl, isIPAddress, normalizeRelayUrl} from "@welshman/util"
|
||||
import type {Thunk} from "@welshman/app"
|
||||
import {waitForThunkError, relaySearch} from "@welshman/app"
|
||||
import {createScroller} from "@lib/html"
|
||||
import {errorMessage} from "@lib/util"
|
||||
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
|
||||
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Modal from "@lib/components/Modal.svelte"
|
||||
import ModalBody from "@lib/components/ModalBody.svelte"
|
||||
import ModalFooter from "@lib/components/ModalFooter.svelte"
|
||||
import RelayItem from "@app/components/RelayItem.svelte"
|
||||
import {pushToast} from "@app/util/toast"
|
||||
|
||||
interface Props {
|
||||
relays: Readable<string[]>
|
||||
addRelay: (url: string) => void
|
||||
addRelay: (url: string) => Promise<Thunk>
|
||||
matchRelay?: (url: string) => boolean
|
||||
}
|
||||
|
||||
const {relays, addRelay}: Props = $props()
|
||||
const {relays, addRelay, matchRelay}: Props = $props()
|
||||
|
||||
const back = () => history.back()
|
||||
|
||||
const customUrl = $derived(tryCatch(() => normalizeRelayUrl(term)))
|
||||
|
||||
const add = async (url: string) => {
|
||||
loading.add(url)
|
||||
|
||||
try {
|
||||
const error = await waitForThunkError(await addRelay(url))
|
||||
|
||||
if (error) {
|
||||
pushToast({
|
||||
theme: "error",
|
||||
message: `Failed to add relay: ${errorMessage(error)}`,
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
loading.delete(url)
|
||||
}
|
||||
}
|
||||
|
||||
let term = $state("")
|
||||
let limit = $state(20)
|
||||
let element: Element | undefined = $state()
|
||||
|
||||
const customUrl = $derived(tryCatch(() => normalizeRelayUrl(term)))
|
||||
const loading = $state(new SvelteSet<string>())
|
||||
|
||||
const searchResults = $derived(
|
||||
$relaySearch
|
||||
.searchValues(term)
|
||||
.filter(url => {
|
||||
if (matchRelay?.(url) === false) return false
|
||||
if ($relays.includes(url)) return false
|
||||
if (isIPAddress(url)) return false
|
||||
|
||||
return true
|
||||
})
|
||||
.slice(0, limit),
|
||||
)
|
||||
|
||||
onMount(() => {
|
||||
const scroller = createScroller({
|
||||
@@ -52,23 +92,35 @@
|
||||
<RelayItem url={term}>
|
||||
<Button
|
||||
class="btn btn-outline btn-sm flex items-center"
|
||||
onclick={() => addRelay(customUrl)}>
|
||||
<Icon icon={AddCircle} />
|
||||
disabled={loading.has(customUrl)}
|
||||
onclick={() => add(customUrl)}>
|
||||
{#if loading.has(customUrl)}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{:else}
|
||||
<Icon icon={AddCircle} />
|
||||
{/if}
|
||||
Add Relay
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{/if}
|
||||
{#each $relaySearch
|
||||
.searchValues(term)
|
||||
.filter(url => !$relays.includes(url))
|
||||
.slice(0, limit) as url (url)}
|
||||
{#each searchResults as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(url)}>
|
||||
<Icon icon={AddCircle} />
|
||||
<Button
|
||||
class="btn btn-outline btn-sm flex items-center"
|
||||
disabled={loading.has(url)}
|
||||
onclick={() => add(url)}>
|
||||
{#if loading.has(url)}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{:else}
|
||||
<Icon icon={AddCircle} />
|
||||
{/if}
|
||||
Add Relay
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{/each}
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import type {Readable} from "svelte/store"
|
||||
import {SvelteSet} from "svelte/reactivity"
|
||||
import {waitForThunkError} from "@welshman/app"
|
||||
import type {Thunk} from "@welshman/app"
|
||||
import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
|
||||
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
|
||||
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
|
||||
import {errorMessage} from "@lib/util"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Modal from "@lib/components/Modal.svelte"
|
||||
import ModalBody from "@lib/components/ModalBody.svelte"
|
||||
import ModalFooter from "@lib/components/ModalFooter.svelte"
|
||||
import RelayAdd from "@app/components/RelayAdd.svelte"
|
||||
import RelayItem from "@app/components/RelayItem.svelte"
|
||||
import {pushModal} from "@app/util/modal"
|
||||
import {pushToast} from "@app/util/toast"
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
subtitle: string
|
||||
relays: Readable<string[]>
|
||||
addRelay: (url: string) => Promise<Thunk>
|
||||
removeRelay: (url: string) => Promise<Thunk>
|
||||
matchRelay?: (url: string) => boolean
|
||||
}
|
||||
|
||||
const {title, subtitle, relays, addRelay, removeRelay, matchRelay}: Props = $props()
|
||||
|
||||
const back = () => history.back()
|
||||
|
||||
const add = () => pushModal(RelayAdd, {relays, addRelay, matchRelay})
|
||||
|
||||
const remove = async (url: string) => {
|
||||
loading.add(url)
|
||||
|
||||
try {
|
||||
const error = await waitForThunkError(await removeRelay(url))
|
||||
|
||||
if (error) {
|
||||
pushToast({
|
||||
theme: "error",
|
||||
message: `Failed to remove relay: ${errorMessage(error)}`,
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
loading.delete(url)
|
||||
}
|
||||
}
|
||||
|
||||
const loading = $state(new SvelteSet<string>())
|
||||
</script>
|
||||
|
||||
<Modal>
|
||||
<ModalBody>
|
||||
<h2 class="text-xl">{title}</h2>
|
||||
<p class="text-sm">{subtitle}</p>
|
||||
{#each $relays.toSorted() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="btn btn-sm btn-neutral"
|
||||
disabled={loading.has(url)}
|
||||
onclick={() => remove(url)}>
|
||||
{#if loading.has(url)}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{:else}
|
||||
<Icon icon={CloseCircle} />
|
||||
{/if}
|
||||
Remove
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{/each}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button class="btn btn-link" onclick={back}>
|
||||
<Icon icon={AltArrowLeft} />
|
||||
Go back
|
||||
</Button>
|
||||
<Button class="btn btn-primary" onclick={add}>
|
||||
Add Relays
|
||||
<Icon icon={AltArrowRight} />
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts" module>
|
||||
export type ActionItem = {
|
||||
title: string
|
||||
subtitle: string
|
||||
action: string
|
||||
apply: () => unknown
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import Stars from "@assets/icons/stars.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
|
||||
const {title, action, subtitle, apply}: ActionItem = $props()
|
||||
</script>
|
||||
|
||||
<div class="card2 card2-sm bg-alt flex justify-between">
|
||||
<div class="flex flex-col gap-1">
|
||||
<strong>{title}</strong>
|
||||
<p class="text-sm">{subtitle}</p>
|
||||
</div>
|
||||
<Button class="btn btn-neutral btn-sm" onclick={apply}>
|
||||
<Icon icon={Stars} />
|
||||
{action}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
import type {Readable} from "svelte/store"
|
||||
import Stars from "@assets/icons/stars.svg?dataurl"
|
||||
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
|
||||
import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Modal from "@lib/components/Modal.svelte"
|
||||
import ModalBody from "@lib/components/ModalBody.svelte"
|
||||
import ModalFooter from "@lib/components/ModalFooter.svelte"
|
||||
import type {ActionItem} from "@app/components/RelaySettingsActionItem.svelte"
|
||||
import RelaySettingsActionItem from "@app/components/RelaySettingsActionItem.svelte"
|
||||
|
||||
interface Props {
|
||||
actionItems: Readable<ActionItem[]>
|
||||
}
|
||||
|
||||
const {actionItems}: Props = $props()
|
||||
|
||||
const back = () => history.back()
|
||||
|
||||
const applyAll = () => {
|
||||
for (const actionItem of $actionItems) {
|
||||
actionItem.apply()
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if ($actionItems.length === 0) {
|
||||
back()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<Modal>
|
||||
<ModalBody>
|
||||
<div class="flex gap-2 items-center">
|
||||
<Icon icon={DangerTriangle} />
|
||||
<strong class="text-lg">Action Items</strong>
|
||||
</div>
|
||||
<p class="text-sm">
|
||||
Below are recommendations for adjustments to your relay selections that you might consider.
|
||||
</p>
|
||||
{#each $actionItems as actionItem}
|
||||
<RelaySettingsActionItem {...actionItem} />
|
||||
{/each}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button class="btn btn-link" onclick={back}>
|
||||
<Icon icon={AltArrowLeft} />
|
||||
Go Back
|
||||
</Button>
|
||||
<Button class="btn btn-primary" onclick={applyAll}>
|
||||
<Icon icon={Stars} />
|
||||
Apply All Recommendations
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import type {Readable} from "svelte/store"
|
||||
import Check from "@assets/icons/check.svg?dataurl"
|
||||
import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import RelayList from "@app/components/RelayList.svelte"
|
||||
import {pushModal} from "@app/util/modal"
|
||||
|
||||
interface Props {
|
||||
icon: string
|
||||
title: string
|
||||
subtitle: string
|
||||
relays: Readable<string[]>
|
||||
addRelay: (url: string) => unknown
|
||||
removeRelay: (url: string) => unknown
|
||||
matchRelay?: (url: string) => boolean
|
||||
}
|
||||
|
||||
const {icon, title, relays, subtitle, addRelay, removeRelay, matchRelay}: Props = $props()
|
||||
|
||||
const onclick = () =>
|
||||
pushModal(RelayList, {title, subtitle, relays, addRelay, removeRelay, matchRelay})
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn font-normal flex h-[unset] w-full flex-nowrap py-4 text-left items-start justify-between"
|
||||
{onclick}>
|
||||
<div class="flex flex-grow flex-row items-start gap-4">
|
||||
<div class="flex h-7 w-7 flex-shrink-0 items-center justify-center">
|
||||
<Icon {icon} />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-lg">
|
||||
{title}
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
{#if $relays.length <= 1}
|
||||
<Icon icon={DangerTriangle} />
|
||||
{:else}
|
||||
<Icon icon={Check} />
|
||||
{/if}
|
||||
{$relays.length}
|
||||
</div>
|
||||
</button>
|
||||
@@ -577,7 +577,7 @@ export const makeRoomId = (url: string, h: string) => `${url}'${h}`
|
||||
export const splitRoomId = (id: string) => id.split("'")
|
||||
|
||||
export const hasNip29 = (relay?: RelayProfile) =>
|
||||
relay?.supported_nips?.map?.(String)?.includes?.("29")
|
||||
Boolean(relay?.supported_nips?.map?.(String)?.includes?.("29"))
|
||||
|
||||
export const roomMetaEventsByIdByUrl = deriveEventsByIdByUrl({
|
||||
tracker,
|
||||
@@ -1224,3 +1224,8 @@ export const shouldNotify = (url: string, h?: string) => getShouldNotify(getSett
|
||||
|
||||
export const deriveShouldNotify = (url: string, h?: string) =>
|
||||
derived(userSettingsValues, $settings => getShouldNotify($settings, url, h))
|
||||
|
||||
// Whatever who cares
|
||||
|
||||
export const hasNip50 = (relay?: RelayProfile) =>
|
||||
Boolean(relay?.supported_nips?.map?.(String)?.includes?.("50"))
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {slide} from "@lib/transition"
|
||||
import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
interface Props {
|
||||
title?: import("svelte").Snippet
|
||||
description?: import("svelte").Snippet
|
||||
children?: import("svelte").Snippet
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
const {...props}: Props = $props()
|
||||
|
||||
const toggle = () => {
|
||||
isOpen = !isOpen
|
||||
}
|
||||
|
||||
let isOpen = $state(false)
|
||||
</script>
|
||||
|
||||
<div class="relative flex flex-col gap-4 {props.class}">
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-8 top-8 h-4 w-4 cursor-pointer transition-all"
|
||||
class:rotate-90={!isOpen}
|
||||
onclick={toggle}>
|
||||
<Icon icon={AltArrowDown} />
|
||||
</button>
|
||||
{@render props.title?.()}
|
||||
{@render props.description?.()}
|
||||
{#if isOpen}
|
||||
<div transition:slide>
|
||||
{@render props.children?.()}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -3,8 +3,10 @@
|
||||
import {sleep} from "@welshman/lib"
|
||||
import {Capacitor} from "@capacitor/core"
|
||||
import {Badge} from "@capawesome/capacitor-badge"
|
||||
import Bell from "@assets/icons/bell.svg?dataurl"
|
||||
import {preventDefault} from "@lib/html"
|
||||
import Spinner from "@lib/components/Spinner.svelte"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import {pushToast} from "@app/util/toast"
|
||||
import {Push, clearBadges} from "@app/util/notifications"
|
||||
@@ -51,7 +53,10 @@
|
||||
|
||||
<form class="content column gap-4" {onsubmit}>
|
||||
<div class="card2 bg-alt col-4 shadow-md">
|
||||
<strong class="text-lg">Alert Settings</strong>
|
||||
<strong class="flex items-center gap-3 text-lg">
|
||||
<Icon icon={Bell} />
|
||||
Alert Settings
|
||||
</strong>
|
||||
{#await Badge.isSupported()}
|
||||
<!-- pass -->
|
||||
{:then { isSupported }}
|
||||
|
||||
@@ -10,10 +10,12 @@
|
||||
} from "@welshman/util"
|
||||
import {Router} from "@welshman/router"
|
||||
import {userMuteList, tagPubkey, publishThunk, userBlossomServerList} from "@welshman/app"
|
||||
import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
|
||||
import {preventDefault} from "@lib/html"
|
||||
import Field from "@lib/components/Field.svelte"
|
||||
import FieldInline from "@lib/components/FieldInline.svelte"
|
||||
import InputList from "@lib/components/InputList.svelte"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
|
||||
import {pushToast} from "@app/util/toast"
|
||||
@@ -49,7 +51,10 @@
|
||||
|
||||
<form class="content column gap-4" {onsubmit}>
|
||||
<div class="card2 bg-alt col-4 shadow-md">
|
||||
<strong class="text-lg">Content Settings</strong>
|
||||
<strong class="flex items-center gap-3 text-lg">
|
||||
<Icon icon={NotesMinimalistic} />
|
||||
Content Settings
|
||||
</strong>
|
||||
<FieldInline>
|
||||
{#snippet label()}
|
||||
<p>Hide sensitive content?</p>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script lang="ts">
|
||||
import ShieldMinimalistic from "@assets/icons/shield-minimalistic.svg?dataurl"
|
||||
import {preventDefault} from "@lib/html"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import {pushToast} from "@app/util/toast"
|
||||
import {PLATFORM_NAME, RelayAuthMode, userSettingsValues} from "@app/core/state"
|
||||
@@ -24,7 +26,10 @@
|
||||
|
||||
<form class="content column gap-4" {onsubmit}>
|
||||
<div class="card2 bg-alt flex flex-col gap-4 shadow-md">
|
||||
<strong class="text-lg">Privacy Settings</strong>
|
||||
<strong class="flex items-center gap-3 text-lg">
|
||||
<Icon icon={ShieldMinimalistic} />
|
||||
Privacy Settings
|
||||
</strong>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<p>Authenticate with unknown relays?</p>
|
||||
<input
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {derived} from "svelte/store"
|
||||
import {shuffle, partition, ifLet} from "@welshman/lib"
|
||||
import {
|
||||
pubkey,
|
||||
getRelayLists,
|
||||
@@ -10,182 +12,182 @@
|
||||
removeBlockedRelay,
|
||||
addMessagingRelay,
|
||||
removeMessagingRelay,
|
||||
addSearchRelay,
|
||||
removeSearchRelay,
|
||||
getRelay,
|
||||
setWriteRelays,
|
||||
setReadRelays,
|
||||
setSearchRelays,
|
||||
setMessagingRelays,
|
||||
} from "@welshman/app"
|
||||
import {RelayMode} from "@welshman/util"
|
||||
import Plane from "@assets/icons/plane.svg?dataurl"
|
||||
import Inbox from "@assets/icons/inbox.svg?dataurl"
|
||||
import Server from "@assets/icons/server.svg?dataurl"
|
||||
import Mailbox from "@assets/icons/mailbox.svg?dataurl"
|
||||
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
|
||||
import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
|
||||
import ForbiddenCircle from "@assets/icons/forbidden-circle.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
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 RelaySettingsItem from "@app/components/RelaySettingsItem.svelte"
|
||||
import type {ActionItem} from "@app/components/RelaySettingsActionItem.svelte"
|
||||
import RelaySettingsActionItems from "@app/components/RelaySettingsActionItems.svelte"
|
||||
import {pushModal} from "@app/util/modal"
|
||||
import {hasNip50, DEFAULT_RELAYS, DEFAULT_MESSAGING_RELAYS} from "@app/core/state"
|
||||
import {discoverRelays} from "@app/core/requests"
|
||||
import Globus from "@assets/icons/globus.svg?dataurl"
|
||||
import Inbox from "@assets/icons/inbox.svg?dataurl"
|
||||
import Mailbox from "@assets/icons/mailbox.svg?dataurl"
|
||||
import ForbiddenCircle from "@assets/icons/forbidden-circle.svg?dataurl"
|
||||
import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
|
||||
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
||||
|
||||
const readRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Read)
|
||||
const writeRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Write)
|
||||
const searchRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Search)
|
||||
const blockedRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Blocked)
|
||||
const messagingRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Messaging)
|
||||
|
||||
const addReadRelays = () =>
|
||||
pushModal(RelayAdd, {
|
||||
relays: readRelayUrls,
|
||||
addRelay: (url: string) => addRelay(url, RelayMode.Read),
|
||||
})
|
||||
|
||||
const addWriteRelays = () =>
|
||||
pushModal(RelayAdd, {
|
||||
relays: writeRelayUrls,
|
||||
addRelay: (url: string) => addRelay(url, RelayMode.Write),
|
||||
})
|
||||
|
||||
const addBlockedRelays = () =>
|
||||
pushModal(RelayAdd, {relays: blockedRelayUrls, addRelay: addBlockedRelay})
|
||||
|
||||
const addMessagingRelays = () =>
|
||||
pushModal(RelayAdd, {relays: messagingRelayUrls, addRelay: addMessagingRelay})
|
||||
|
||||
const addReadRelay = (url: string) => addRelay(url, RelayMode.Read)
|
||||
const removeReadRelay = (url: string) => removeRelay(url, RelayMode.Read)
|
||||
|
||||
const addWriteRelay = (url: string) => addRelay(url, RelayMode.Write)
|
||||
const removeWriteRelay = (url: string) => removeRelay(url, RelayMode.Write)
|
||||
const showActionItems = () => pushModal(RelaySettingsActionItems, {actionItems})
|
||||
|
||||
const actionItems = derived(
|
||||
[readRelayUrls, writeRelayUrls, messagingRelayUrls, searchRelayUrls],
|
||||
([$readRelayUrls, $writeRelayUrls, $messagingRelayUrls, $searchRelayUrls]) => {
|
||||
const $actionItems: ActionItem[] = []
|
||||
|
||||
if ($readRelayUrls.length <= 1) {
|
||||
$actionItems.push({
|
||||
title: "Missing Inbox Relays",
|
||||
subtitle: "Other people aren't currently able to reliably tag you in public notes.",
|
||||
action: "Update",
|
||||
apply: () => setReadRelays(DEFAULT_RELAYS),
|
||||
})
|
||||
}
|
||||
|
||||
if ($writeRelayUrls.length <= 1) {
|
||||
$actionItems.push({
|
||||
title: "Missing Outbox Relays",
|
||||
subtitle: "Other people aren't currently able to reliably find your public notes.",
|
||||
action: "Update",
|
||||
apply: () => setWriteRelays(DEFAULT_RELAYS),
|
||||
})
|
||||
}
|
||||
|
||||
if ($messagingRelayUrls.length <= 1) {
|
||||
$actionItems.push({
|
||||
title: "Missing DM Relays",
|
||||
subtitle: "You aren't currently able to reliably send or receive direct messages.",
|
||||
action: "Update",
|
||||
apply: () => setMessagingRelays(DEFAULT_MESSAGING_RELAYS),
|
||||
})
|
||||
}
|
||||
|
||||
if ($readRelayUrls.length > 8) {
|
||||
$actionItems.push({
|
||||
title: "Too Many Inbox Relays",
|
||||
subtitle:
|
||||
"You have more inbox relays than is really necessary, which can affect resource usage.",
|
||||
action: "Prune Selections",
|
||||
apply: () => setReadRelays(shuffle($readRelayUrls).slice(0, 5)),
|
||||
})
|
||||
}
|
||||
|
||||
if ($writeRelayUrls.length > 8) {
|
||||
$actionItems.push({
|
||||
title: "Too Many Outbox Relays",
|
||||
subtitle:
|
||||
"You have more outbox relays than is really necessary, which can affect resource usage.",
|
||||
action: "Prune Selections",
|
||||
apply: () => setWriteRelays(shuffle($writeRelayUrls).slice(0, 5)),
|
||||
})
|
||||
}
|
||||
|
||||
if ($messagingRelayUrls.length > 8) {
|
||||
$actionItems.push({
|
||||
title: "Too Many DM Relays",
|
||||
subtitle:
|
||||
"You have more DM relays than is really necessary, which can affect resource usage.",
|
||||
action: "Prune Selections",
|
||||
apply: () => setMessagingRelays(shuffle($messagingRelayUrls).slice(0, 5)),
|
||||
})
|
||||
}
|
||||
|
||||
const [okSearchRelays, badSearchRelays] = partition(
|
||||
url => Boolean(ifLet(getRelay(url), hasNip50)),
|
||||
$searchRelayUrls,
|
||||
)
|
||||
|
||||
if (badSearchRelays.length > 0) {
|
||||
$actionItems.push({
|
||||
title: "Invalid Search Relays",
|
||||
subtitle: `Some of your search relays don't support search.`,
|
||||
action: "Remove Invalid",
|
||||
apply: () => setSearchRelays(okSearchRelays),
|
||||
})
|
||||
}
|
||||
|
||||
return $actionItems
|
||||
},
|
||||
)
|
||||
|
||||
onMount(() => {
|
||||
discoverRelays(getRelayLists())
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="content column gap-4">
|
||||
<Collapse class="card2 bg-alt column gap-4 shadow-md">
|
||||
{#snippet title()}
|
||||
<h2 class="flex items-center gap-3 text-xl">
|
||||
<Icon icon={Globus} />
|
||||
Outbox Relays
|
||||
</h2>
|
||||
{/snippet}
|
||||
{#snippet description()}
|
||||
<p 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>
|
||||
{/snippet}
|
||||
<div class="column gap-2">
|
||||
{#each $writeRelayUrls.sort() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="tooltip flex items-center"
|
||||
data-tip="Stop using this relay"
|
||||
onclick={() => removeWriteRelay(url)}>
|
||||
<Icon icon={CloseCircle} />
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{:else}
|
||||
<p class="text-center text-sm">No relays found</p>
|
||||
{/each}
|
||||
<Button class="btn btn-primary mt-2" onclick={addWriteRelays}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add Relay
|
||||
</Button>
|
||||
<div class="content">
|
||||
<div class="card2 bg-alt flex flex-col gap-4 shadow-md">
|
||||
<div class="flex justify-between">
|
||||
<strong class="flex items-center gap-3 text-lg">
|
||||
<Icon icon={Server} />
|
||||
Your Relays
|
||||
</strong>
|
||||
{#if $actionItems.length > 0}
|
||||
<Button class="btn btn-neutral btn-sm" onclick={showActionItems}>
|
||||
<Icon icon={DangerTriangle} />
|
||||
{$actionItems.length} Issue{$actionItems.length === 1 ? "" : "s"} Detected
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</Collapse>
|
||||
<Collapse class="card2 bg-alt column gap-4 shadow-md">
|
||||
{#snippet title()}
|
||||
<h2 class="flex items-center gap-3 text-xl">
|
||||
<Icon icon={Inbox} />
|
||||
Inbox Relays
|
||||
</h2>
|
||||
{/snippet}
|
||||
{#snippet description()}
|
||||
<p 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>
|
||||
{/snippet}
|
||||
<div class="column gap-2">
|
||||
{#each $readRelayUrls.sort() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="tooltip flex items-center"
|
||||
data-tip="Stop using this relay"
|
||||
onclick={() => removeReadRelay(url)}>
|
||||
<Icon icon={CloseCircle} />
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{:else}
|
||||
<p class="text-center text-sm">No relays found</p>
|
||||
{/each}
|
||||
<Button class="btn btn-primary mt-2" onclick={addReadRelays}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add Relay
|
||||
</Button>
|
||||
</div>
|
||||
</Collapse>
|
||||
<Collapse class="card2 bg-alt column gap-4 shadow-md">
|
||||
{#snippet title()}
|
||||
<h2 class="flex items-center gap-3 text-xl">
|
||||
<Icon icon={Mailbox} />
|
||||
Messaging Relays
|
||||
</h2>
|
||||
{/snippet}
|
||||
{#snippet description()}
|
||||
<p 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>
|
||||
{/snippet}
|
||||
<div class="column gap-2">
|
||||
{#each $messagingRelayUrls.sort() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="tooltip flex items-center"
|
||||
data-tip="Stop using this relay"
|
||||
onclick={() => removeMessagingRelay(url)}>
|
||||
<Icon icon={CloseCircle} />
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{:else}
|
||||
<p class="text-center text-sm">No relays found</p>
|
||||
{/each}
|
||||
<Button class="btn btn-primary mt-2" onclick={addMessagingRelays}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add Relay
|
||||
</Button>
|
||||
</div>
|
||||
</Collapse>
|
||||
<Collapse class="card2 bg-alt column gap-4 shadow-md">
|
||||
{#snippet title()}
|
||||
<h2 class="flex items-center gap-3 text-xl">
|
||||
<Icon icon={ForbiddenCircle} />
|
||||
Blocked Relays
|
||||
</h2>
|
||||
{/snippet}
|
||||
{#snippet description()}
|
||||
<p class="text-sm">
|
||||
These relays will never be connected to by clients supporting this policy.
|
||||
</p>
|
||||
{/snippet}
|
||||
<div class="column gap-2">
|
||||
{#each $blockedRelayUrls.sort() as url (url)}
|
||||
<RelayItem {url}>
|
||||
<Button
|
||||
class="tooltip flex items-center"
|
||||
data-tip="Stop using this relay"
|
||||
onclick={() => removeBlockedRelay(url)}>
|
||||
<Icon icon={CloseCircle} />
|
||||
</Button>
|
||||
</RelayItem>
|
||||
{:else}
|
||||
<p class="text-center text-sm">No relays found</p>
|
||||
{/each}
|
||||
<Button class="btn btn-primary mt-2" onclick={addBlockedRelays}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add Relay
|
||||
</Button>
|
||||
</div>
|
||||
</Collapse>
|
||||
<p class="text-sm mb-2">
|
||||
Relays are servers which store your data, or allow you to find data from across the Nostr
|
||||
network. We've set you up with some reasonable defaults, but if you're a power user, you can
|
||||
customize your relay selections below.
|
||||
</p>
|
||||
<RelaySettingsItem
|
||||
icon={Inbox}
|
||||
title="Inbox Relays"
|
||||
subtitle="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."
|
||||
relays={readRelayUrls}
|
||||
addRelay={addReadRelay}
|
||||
removeRelay={removeReadRelay} />
|
||||
<RelaySettingsItem
|
||||
icon={Plane}
|
||||
title="Outbox Relays"
|
||||
subtitle="Where other people should send notes intended for you. Be sure to select relays that will accept notes that tag you."
|
||||
relays={writeRelayUrls}
|
||||
addRelay={addWriteRelay}
|
||||
removeRelay={removeWriteRelay} />
|
||||
<RelaySettingsItem
|
||||
icon={Mailbox}
|
||||
title="DM Relays"
|
||||
subtitle="Where you 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."
|
||||
relays={messagingRelayUrls}
|
||||
addRelay={addMessagingRelay}
|
||||
removeRelay={removeMessagingRelay} />
|
||||
<RelaySettingsItem
|
||||
icon={Magnifier}
|
||||
title="Search Relays"
|
||||
subtitle="Relays that support searching for profiles and public notes."
|
||||
relays={searchRelayUrls}
|
||||
addRelay={addSearchRelay}
|
||||
removeRelay={removeSearchRelay}
|
||||
matchRelay={url => hasNip50(getRelay(url))} />
|
||||
<RelaySettingsItem
|
||||
icon={ForbiddenCircle}
|
||||
title="Blocked Relays"
|
||||
subtitle="These relays won't be used unless explicitly requested."
|
||||
relays={blockedRelayUrls}
|
||||
addRelay={addBlockedRelay}
|
||||
removeRelay={removeBlockedRelay} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -83,9 +83,9 @@
|
||||
<div class="content column gap-4">
|
||||
<div class="card2 bg-alt flex flex-col gap-6 shadow-md">
|
||||
<div class="flex items-center justify-between">
|
||||
<strong class="flex items-center gap-3">
|
||||
<strong class="flex items-center gap-3 text-lg">
|
||||
<Icon icon={Wallet2} />
|
||||
Wallet
|
||||
Your Wallet
|
||||
</strong>
|
||||
{#if $session?.wallet}
|
||||
<div class={statusClass}>
|
||||
|
||||
Reference in New Issue
Block a user