From e0eb37cd04702f102aab8f484816b0053658b8b8 Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Wed, 11 Sep 2024 12:19:45 -0700 Subject: [PATCH] Improve room join/leave --- src/app/components/ChatMessage.svelte | 1 - src/app/routes.ts | 2 +- src/app/state.ts | 18 +++- src/assets/icons/Arrows ALogout 2.svg | 4 + src/lib/components/Icon.svelte | 2 + src/lib/tiptap/LinkExtension.ts | 1 - src/lib/transition.ts | 2 +- src/routes/+layout.svelte | 3 +- src/routes/spaces/[nrelay]/+layout.svelte | 82 +++++++++++++++---- .../spaces/[nrelay]/[[topic]]/+page.svelte | 34 +++++--- 10 files changed, 108 insertions(+), 41 deletions(-) create mode 100644 src/assets/icons/Arrows ALogout 2.svg diff --git a/src/app/components/ChatMessage.svelte b/src/app/components/ChatMessage.svelte index 1a9638d8..beed9543 100644 --- a/src/app/components/ChatMessage.svelte +++ b/src/app/components/ChatMessage.svelte @@ -81,7 +81,6 @@ onMount(() => { editor = createEditor(getChatViewOptions(event.content)) - console.log($editor) }) diff --git a/src/app/routes.ts b/src/app/routes.ts index bc956329..f1480d3e 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -6,7 +6,7 @@ export const makeSpacePath = (url: string, extra = "") => { let path = `/spaces/${nip19.nrelayEncode(url)}` if (extra) { - path += "/" + extra + path += "/" + encodeURIComponent(extra) } return path diff --git a/src/app/state.ts b/src/app/state.ts index e5470bec..f0d2e469 100644 --- a/src/app/state.ts +++ b/src/app/state.ts @@ -69,10 +69,6 @@ export const deriveEvent = (idOrAddress: string, hints: string[] = []) => { ) } -// Topics - -export const topicsByUrl = withGetter(writable(new Map())) - // Membership export type Membership = { @@ -185,6 +181,20 @@ export const { }, }) +// Topics + +export const topicsByUrl = derived(chats, $chats => { + const $topicsByUrl = new Map() + + for (const chat of $chats) { + if (chat.topic) { + pushToMapKey($topicsByUrl, chat.url, chat.topic) + } + } + + return $topicsByUrl +}) + // User stuff export const userProfile = derived([pubkey, profilesByPubkey], ([$pubkey, $profilesByPubkey]) => { diff --git a/src/assets/icons/Arrows ALogout 2.svg b/src/assets/icons/Arrows ALogout 2.svg new file mode 100644 index 00000000..2f5bce71 --- /dev/null +++ b/src/assets/icons/Arrows ALogout 2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index eddecadd..f1b5b902 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -9,6 +9,7 @@ import cx from "classnames" import {switcher} from "@welshman/lib" import AddSquare from "@assets/icons/Add Square.svg?dataurl" + import ArrowsALogout2 from "@assets/icons/Arrows ALogout 2.svg?dataurl" import Code2 from "@assets/icons/Code 2.svg?dataurl" import Earth from "@assets/icons/Earth.svg?dataurl" import Pen from "@assets/icons/Pen.svg?dataurl" @@ -68,6 +69,7 @@ const data = switcher(icon, { "add-square": AddSquare, + "arrows-a-logout-2": ArrowsALogout2, "code-2": Code2, earth: Earth, pen: Pen, diff --git a/src/lib/tiptap/LinkExtension.ts b/src/lib/tiptap/LinkExtension.ts index 81453037..e27badbf 100644 --- a/src/lib/tiptap/LinkExtension.ts +++ b/src/lib/tiptap/LinkExtension.ts @@ -74,7 +74,6 @@ export const LinkExtension = Node.create({ const matches = [] for (const match of text.matchAll(LINK_REGEX)) { - console.log(text, match) try { matches.push(createPasteRuleMatch(match, {url: match[0]})) } catch (e) { diff --git a/src/lib/transition.ts b/src/lib/transition.ts index cae75168..aa5600cc 100644 --- a/src/lib/transition.ts +++ b/src/lib/transition.ts @@ -1,7 +1,7 @@ import type {FlyParams} from "svelte/transition" import {fly as baseFly} from "svelte/transition" -export {fade} from "svelte/transition" +export {fade, slide} from "svelte/transition" export const fly = (node: Element, params?: FlyParams | undefined) => baseFly(node, {y: 20, ...params}) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 5e361c6d..63947aa6 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -28,7 +28,7 @@ import PrimaryNav from "@app/components/PrimaryNav.svelte" import {modals, clearModal} from "@app/modal" import {theme} from "@app/theme" - import {INDEXER_RELAYS, topicsByUrl} from "@app/state" + import {INDEXER_RELAYS} from "@app/state" import {loadUserData} from "@app/commands" import * as state from "@app/state" @@ -76,7 +76,6 @@ keyPath: "nip05", store: handles, }, - topicsByUrl: storageAdapters.fromMapStore(topicsByUrl), publishStatus: storageAdapters.fromObjectStore(publishStatusData), freshness: storageAdapters.fromObjectStore(freshness), plaintext: storageAdapters.fromObjectStore(plaintext), diff --git a/src/routes/spaces/[nrelay]/+layout.svelte b/src/routes/spaces/[nrelay]/+layout.svelte index 741ed8cf..8bdb99c3 100644 --- a/src/routes/spaces/[nrelay]/+layout.svelte +++ b/src/routes/spaces/[nrelay]/+layout.svelte @@ -1,8 +1,10 @@ {#key url} @@ -76,41 +97,66 @@ Chat -
+
Threads
-
+
Calendar
-
+
Market
-
-
- - Rooms - - -
+ {#if rooms.length > 0} +
+
+ Your Rooms +
+ {/if} {#each rooms as topic, i (topic)} -
+
{topic}
{/each} + {#if otherRooms.length > 0} +
+
+ + {#if rooms.length > 0} + Other Rooms + {:else} + Rooms + {/if} + +
+ {/if} + {#each otherRooms as topic, i (topic)} +
+ + + {topic} + +
+ {/each} +
+ + + Create room + +
- + {#key $page.params.topic} + + {/key} {/key} diff --git a/src/routes/spaces/[nrelay]/[[topic]]/+page.svelte b/src/routes/spaces/[nrelay]/[[topic]]/+page.svelte index 667c4d16..e1ab9cb9 100644 --- a/src/routes/spaces/[nrelay]/[[topic]]/+page.svelte +++ b/src/routes/spaces/[nrelay]/[[topic]]/+page.svelte @@ -12,12 +12,14 @@ import {page} from "$app/stores" import {sortBy, now} from "@welshman/lib" import type {TrustedEvent, Filter} from "@welshman/util" - import {subscribe, formatTimestampAsDate} from "@welshman/app" + import {formatTimestampAsDate} from "@welshman/app" import Icon from "@lib/components/Icon.svelte" + import Button from "@lib/components/Button.svelte" import Spinner from "@lib/components/Spinner.svelte" import ChatMessage from "@app/components/ChatMessage.svelte" import ChatCompose from "@app/components/ChatCompose.svelte" - import {decodeNRelay, makeChatId, deriveChat, MESSAGE, REPLY} from "@app/state" + import {userMembership, decodeNRelay, makeChatId, deriveChat, MESSAGE, REPLY} from "@app/state" + import {addRoomMembership, removeRoomMembership} from "@app/commands" const {nrelay, topic = ""} = $page.params const url = decodeNRelay(nrelay) @@ -28,6 +30,8 @@ let loading = true let elements: Element[] = [] + $: membership = $userMembership?.topicsByUrl.get(url) || [] + $: { elements = [] @@ -59,24 +63,28 @@ setTimeout(() => { loading = false }, 3000) - - onMount(() => { - const since = now() - 30 - const kinds = [MESSAGE, REPLY] - const filter = topic ? {kinds, since, "#t": [topic]} : ({kinds, since} as Filter) - const sub = subscribe({filters: [filter], relays: [url]}) - - return () => sub.close() - })
-
+
- General + {topic || 'General'}
+ {#if topic} + {#if membership.includes(topic)} + + {:else} + + {/if} + {/if}