From 73a9b46f9154b5fb987cf140f3f0cee95f9afc99 Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Thu, 3 Oct 2024 11:49:52 -0700 Subject: [PATCH] Re-work relays page --- src/app.css | 16 ++- src/app/commands.ts | 18 ++- src/app/components/ContentQuote.svelte | 12 +- src/app/components/RelayAdd.svelte | 50 +++++++ src/app/components/RelayItem.svelte | 40 ++++++ src/assets/icons/Alt Arrow Up.svg | 3 + src/assets/icons/Inbox.svg | 4 + src/assets/icons/Mailbox.svg | 6 + src/lib/components/Collapse.svelte | 27 ++++ src/lib/components/Icon.svelte | 6 + src/lib/components/ModalBox.svelte | 2 +- src/routes/settings/relays/+page.svelte | 166 ++++++++++++++---------- 12 files changed, 259 insertions(+), 91 deletions(-) create mode 100644 src/app/components/RelayAdd.svelte create mode 100644 src/app/components/RelayItem.svelte create mode 100644 src/assets/icons/Alt Arrow Up.svg create mode 100644 src/assets/icons/Inbox.svg create mode 100644 src/assets/icons/Mailbox.svg create mode 100644 src/lib/components/Collapse.svelte diff --git a/src/app.css b/src/app.css index 054a8076..3e5e0ea5 100644 --- a/src/app.css +++ b/src/app.css @@ -51,16 +51,20 @@ --secondary: oklch(var(--s)); } +.bg-alt, .bg-alt .bg-alt .bg-alt { + @apply bg-base-100; +} + +.bg-alt .bg-alt, .bg-alt .bg-alt .bg-alt .bg-alt { + @apply bg-base-300; +} + .card2 { - @apply text-ellipsis rounded-box bg-base-100 p-6 text-base-content; + @apply text-ellipsis rounded-box p-6 text-base-content; } .card2.card2-sm { - @apply rounded-box bg-base-100 p-4 text-base-content; -} - -.card2.card2-alt { - @apply bg-base-300; + @apply p-4 text-base-content; } .column { diff --git a/src/app/commands.ts b/src/app/commands.ts index 9b5f3a7b..164ebfdb 100644 --- a/src/app/commands.ts +++ b/src/app/commands.ts @@ -1,5 +1,5 @@ -import {uniqBy, sleep, chunk, equals, choice} from "@welshman/lib" -import {DELETE, REACTION, getPubkeyTagValues, createEvent, displayProfile} from "@welshman/util" +import {uniqBy, sleep, chunk, equals, choice, append} from "@welshman/lib" +import {DELETE, MUTES, FOLLOWS, REACTION, getPubkeyTagValues, createEvent, displayProfile} from "@welshman/util" import type {TrustedEvent} from "@welshman/util" import type {SubscribeRequestWithHandlers} from "@welshman/net" import { @@ -15,6 +15,7 @@ import { loadMutes, getFollows, tagEvent, + tagPubkey, tagReactionTo, } from "@welshman/app" import {tagRoom, MEMBERSHIPS, INDEXER_RELAYS} from "@app/state" @@ -110,6 +111,19 @@ export const removeSpaceMembership = (url: string) => export const removeRoomMembership = (url: string, room: string) => updateList(MEMBERSHIPS, (tags: string[][]) => tags.filter(t => !equals(tagRoom(room, url), t))) + +export const unfollowPerson = (pubkey: string) => + updateList(FOLLOWS, tags => tags.filter(t => t[1] !== pubkey)) + +export const followPerson = (pubkey: string) => + updateList(FOLLOWS, tags => append(tagPubkey(pubkey), tags)) + +export const unmutePerson = (pubkey: string) => + updateList(MUTES, tags => tags.filter(t => t[1] !== pubkey)) + +export const mutePerson = (pubkey: string) => + updateList(MUTES, tags => append(tagPubkey(pubkey), tags)) + // Actions export const publishReaction = ({relays, event, content, tags = []}: { diff --git a/src/app/components/ContentQuote.svelte b/src/app/components/ContentQuote.svelte index e6fb0cca..1478fd69 100644 --- a/src/app/components/ContentQuote.svelte +++ b/src/app/components/ContentQuote.svelte @@ -1,5 +1,4 @@ + + {/each} + diff --git a/src/app/components/RelayItem.svelte b/src/app/components/RelayItem.svelte new file mode 100644 index 00000000..1d6e2480 --- /dev/null +++ b/src/app/components/RelayItem.svelte @@ -0,0 +1,40 @@ + + +
+
+
+ + {displayRelayUrl(url)} +
+ +
+ {#if $relay?.profile?.description} +

{$relay?.profile.description}

+ {/if} + + {#if $relay?.profile?.contact} + {displayUrl($relay.profile.contact)} + • + {/if} + {#if $relay?.profile?.supported_nips} + + {$relay.profile.supported_nips.length} NIPs + + • + {/if} + Connected {connections} {connections === 1 ? 'time' : 'times'} + +
diff --git a/src/assets/icons/Alt Arrow Up.svg b/src/assets/icons/Alt Arrow Up.svg new file mode 100644 index 00000000..f7f105fc --- /dev/null +++ b/src/assets/icons/Alt Arrow Up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/Inbox.svg b/src/assets/icons/Inbox.svg new file mode 100644 index 00000000..cea7e64e --- /dev/null +++ b/src/assets/icons/Inbox.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/Mailbox.svg b/src/assets/icons/Mailbox.svg new file mode 100644 index 00000000..51306a21 --- /dev/null +++ b/src/assets/icons/Mailbox.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/lib/components/Collapse.svelte b/src/lib/components/Collapse.svelte new file mode 100644 index 00000000..bc58ceba --- /dev/null +++ b/src/lib/components/Collapse.svelte @@ -0,0 +1,27 @@ + + +
+ + + + {#if isOpen} +
+ +
+ {/if} +
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index f2ff0474..b22ed3a1 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -19,6 +19,7 @@ import AddCircle from "@assets/icons/Add Circle.svg?dataurl" import AltArrowDown from "@assets/icons/Alt Arrow Down.svg?dataurl" import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl" + import AltArrowUp from "@assets/icons/Alt Arrow Up.svg?dataurl" import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl" import ArrowRight from "@assets/icons/Arrow Right.svg?dataurl" import Bag from "@assets/icons/Bag.svg?dataurl" @@ -41,6 +42,7 @@ import Hashtag from "@assets/icons/Hashtag.svg?dataurl" import HandPills from "@assets/icons/Hand Pills.svg?dataurl" import HomeSmile from "@assets/icons/Home Smile.svg?dataurl" + import Inbox from "@assets/icons/Inbox.svg?dataurl" import InfoCircle from "@assets/icons/Info Circle.svg?dataurl" import InfoSquare from "@assets/icons/Info Square.svg?dataurl" import Key from "@assets/icons/Key.svg?dataurl" @@ -48,6 +50,7 @@ import Login from "@assets/icons/Login.svg?dataurl" import Login2 from "@assets/icons/Login 2.svg?dataurl" import Magnifer from "@assets/icons/Magnifer.svg?dataurl" + import Mailbox from "@assets/icons/Mailbox.svg?dataurl" import MapPoint from "@assets/icons/Map Point.svg?dataurl" import MenuDots from "@assets/icons/Menu Dots.svg?dataurl" import NotesMinimalistic from "@assets/icons/Notes Minimalistic.svg?dataurl" @@ -86,6 +89,7 @@ "add-circle": AddCircle, "alt-arrow-down": AltArrowDown, "alt-arrow-right": AltArrowRight, + "alt-arrow-up": AltArrowUp, "alt-arrow-left": AltArrowLeft, "arrow-right": ArrowRight, bag: Bag, @@ -108,6 +112,7 @@ hashtag: Hashtag, "hand-pills": HandPills, "home-smile": HomeSmile, + "inbox": Inbox, "info-circle": InfoCircle, "info-square": InfoSquare, key: Key, @@ -115,6 +120,7 @@ login: Login, "login-2": Login2, magnifer: Magnifer, + mailbox: Mailbox, "map-point": MapPoint, "menu-dots": MenuDots, "notes-minimalistic": NotesMinimalistic, diff --git a/src/lib/components/ModalBox.svelte b/src/lib/components/ModalBox.svelte index 1befa5cc..f04592a6 100644 --- a/src/lib/components/ModalBox.svelte +++ b/src/lib/components/ModalBox.svelte @@ -5,6 +5,6 @@ export let props = {} -
+
diff --git a/src/routes/settings/relays/+page.svelte b/src/routes/settings/relays/+page.svelte index 82e62854..bc88db5e 100644 --- a/src/routes/settings/relays/+page.svelte +++ b/src/routes/settings/relays/+page.svelte @@ -1,92 +1,114 @@
-

Relays

-

Get connected with the nostr network

- {#each currentRelayUrls as url} - {@const read = $readRelayUrls.includes(url)} - {@const write = $writeRelayUrls.includes(url)} - {@const inbox = $inboxRelayUrls.includes(url)} -
-
-
- - {displayRelayUrl(url)} -
- -
-
-
- -
-
- -
-
- -
-
-
- {/each} - - {#each $relaySearch.searchValues(term).filter(url => !currentRelayUrls.includes(url)) as url (url)} -
-
- - {displayRelayUrl(url)} -
-
- {/each} + + +

+ + Inbox Relays +

+

+ 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. +

+
+ {#each $readRelayUrls.sort() as url (url)} + + + + {:else} +

No relays found

+ {/each} + +
+ + +

+ + Messaging Relays +

+

+ 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. +

+
+ {#each $inboxRelayUrls.sort() as url (url)} + + + + {:else} +

No relays found

+ {/each} + +
+