Varun/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Re-work loading/syncing

Browse Source
This commit is contained in:
Jon Staab
2024-11-15 14:03:54 -08:00
parent 141e2bf835
commit 0deddc8a4c
24 changed files with 287 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/commands.ts
+30 -12
View File
@@ -22,7 +22,7 @@ import {
} from "@welshman/util"
import type {TrustedEvent, EventTemplate, List} from "@welshman/util"
import type {SubscribeRequestWithHandlers, Subscription} from "@welshman/net"
import {PublishStatus, AuthStatus, SocketStatus} from "@welshman/net"
import {PublishStatus, AuthStatus, SocketStatus, SubscriptionEvent} from "@welshman/net"
import {Nip59, makeSecret, stamp, Nip46Broker} from "@welshman/signer"
import type {Nip46Handler} from "@welshman/signer"
import {
@@ -58,6 +58,7 @@ import {
loadMembership,
loadSettings,
getDefaultPubkeys,
getMembershipUrls,
} from "@app/state"
// Utils
@@ -100,7 +101,7 @@ export const subscribePersistent = (request: SubscribeRequestWithHandlers) => {
sleep(30_000),
new Promise(resolve => {
sub = subscribe(request)
sub.emitter.on("close", resolve)
sub.emitter.on(SubscriptionEvent.Complete, resolve)
}),
])
@@ -191,16 +192,20 @@ export const addSpaceMembership = async (url: string) => {
const event = await addToListPublicly(list, ["r", url]).reconcile(nip44EncryptToSelf)
const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
return publishThunk({event, relays}).result
return publishThunk({event, relays})
}
export const removeSpaceMembership = async (url: string) => {
const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
const pred = (t: string[]) => t[t[0] === "r" ? 1 : 2] === url
const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
const relays = uniq([
url,
...ctx.app.router.FromUser().getUrls(),
...getRelayTagValues(event.tags),
])
return publishThunk({event, relays}).result
return publishThunk({event, relays})
}
export const addRoomMembership = async (url: string, room: string) => {
@@ -208,16 +213,20 @@ export const addRoomMembership = async (url: string, room: string) => {
const event = await addToListPublicly(list, tagRoom(room, url)).reconcile(nip44EncryptToSelf)
const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
return publishThunk({event, relays}).result
return publishThunk({event, relays})
}
export const removeRoomMembership = async (url: string, room: string) => {
const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
const pred = (t: string[]) => equals(tagRoom(room, url), t)
const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
const relays = uniq([
url,
...ctx.app.router.FromUser().getUrls(),
...getRelayTagValues(event.tags),
])
return publishThunk({event, relays}).result
return publishThunk({event, relays})
}
export const setRelayPolicy = (url: string, read: boolean, write: boolean) => {
@@ -234,8 +243,13 @@ export const setRelayPolicy = (url: string, read: boolean, write: boolean) => {
return publishThunk({
event: createEvent(list.kind, {tags}),
relays: [...INDEXER_RELAYS, ...ctx.app.router.FromUser().getUrls()],
}).result
relays: [
url,
...INDEXER_RELAYS,
...ctx.app.router.FromUser().getUrls(),
...getMembershipUrls(userMembership.get()),
],
})
}
export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
@@ -251,8 +265,12 @@ export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
return publishThunk({
event: createEvent(list.kind, {tags}),
relays: [...INDEXER_RELAYS, ...ctx.app.router.FromUser().getUrls()],
}).result
relays: [
...INDEXER_RELAYS,
...ctx.app.router.FromUser().getUrls(),
...getMembershipUrls(userMembership.get()),
],
})
}
}
src/app/components/ChannelMessage.svelte
+3 -3
View File
@@ -78,7 +78,7 @@
{:else}
<div class="w-10 min-w-10 max-w-10" />
{/if}
<div class="-mt-1 flex-grow pr-1">
<div class="-mt-1 min-w-0 flex-grow pr-1">
{#if showPubkey}
<div class="flex items-center gap-2">
<Link
@@ -101,9 +101,9 @@
</div>
<div class="row-2 ml-12">
{#if !isHead}
<ReplySummary {event} on:click={onClick} />
<ReplySummary relays={[url]} {event} on:click={onClick} />
{/if}
<ReactionSummary {event} {onReactionClick} />
<ReactionSummary relays={[url]} {event} {onReactionClick} />
</div>
<button
class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
src/app/components/Chat.svelte
+17 -9
View File
@@ -96,7 +96,7 @@
}
onMount(() => {
// Don't use loadInboxRelaySelections because we want to force reload
// Don't use loadInboxRelaySelection because we want to force reload
load({filters: [{kinds: [INBOX_RELAYS], authors: others}]})
})
@@ -108,7 +108,7 @@
<div class="relative flex h-full w-full flex-col">
{#if others.length > 0}
<PageBar>
<div slot="title" class="row-2">
<div slot="title" class="flex flex-col gap-1 sm:flex-row sm:gap-2">
{#if others.length === 1}
{@const pubkey = others[0]}
<Link external href={pubkeyLink(pubkey)} class="row-2">
@@ -116,13 +116,21 @@
<ProfileName {pubkey} />
</Link>
{:else}
<ProfileCircles pubkeys={others} size={5} />
<p class="overflow-hidden text-ellipsis whitespace-nowrap">
<ProfileName pubkey={others[0]} />
and {others.length - 1}
{others.length > 2 ? "others" : "other"}
<Button on:click={showMembers} class="btn btn-link">Show all members</Button>
</p>
<div class="flex items-center gap-2">
<ProfileCircles pubkeys={others} size={5} />
<p class="overflow-hidden text-ellipsis whitespace-nowrap">
<ProfileName pubkey={others[0]} />
and
{#if others.length === 2}
<ProfileName pubkey={others[1]} />
{:else}
{others.length - 1}
{others.length > 2 ? "others" : "other"}
{/if}
</p>
</div>
<Button on:click={showMembers} class="btn btn-link hidden sm:block"
>Show all members</Button>
{/if}
</div>
<div slot="action">
src/app/components/ChatMessage.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
</script>
{#if thunk}
<ThunkStatus {thunk} />
<ThunkStatus {thunk} class="mt-1" />
{/if}
<div
class="group chat flex items-center justify-end gap-1 px-2"
src/app/components/MenuSpaceButton.svelte
+56
View File
@@ -0,0 +1,56 @@
<script lang="ts">
import {page} from "$app/stores"
import {derived} from "svelte/store"
import {max} from "@welshman/lib"
import {matchFilter} from "@welshman/util"
import {pubkey} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import MenuSpace from "@app/components/MenuSpace.svelte"
import {checked, getNotification, deriveNotification, THREAD_FILTERS} from "@app/notifications"
import {
userMembership,
getMembershipRoomsByUrl,
deriveEventsForUrl,
MESSAGE,
GENERAL,
} from "@app/state"
import {makeRoomPath, makeSpacePath} from "@app/routes"
import {pushDrawer} from "@app/modal"
export let url
const openMenu = () => pushDrawer(MenuSpace, {url})
const events = deriveEventsForUrl(url, [{kinds: [MESSAGE]}])
const threadsPath = makeSpacePath(url, "threads")
const threadsNotification = deriveNotification(threadsPath, THREAD_FILTERS, url)
const notification = derived(
[page, events, checked, userMembership],
([$page, $events, $checked, $userMembership]) => {
console.log(getMembershipRoomsByUrl(url, $userMembership).concat(GENERAL))
return getMembershipRoomsByUrl(url, $userMembership)
.concat(GENERAL)
.some(room => {
const path = makeRoomPath(url, room)
if ($page.url.pathname === path) return false
const lastChecked = max([$checked["*"], $checked[path]])
const roomEvents = $events.filter(e => matchFilter({"#~": [room]}, e))
return getNotification($pubkey, lastChecked, roomEvents)
})
},
)
</script>
<Button on:click={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
<Icon icon="menu-dots" />
{#if $threadsNotification || $notification}
<div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary" />
{/if}
</Button>
src/app/components/MenuSpacesItem.svelte
+2 -3
View File
@@ -5,12 +5,11 @@
import RelayName from "@app/components/RelayName.svelte"
import RelayDescription from "@app/components/RelayDescription.svelte"
import {makeSpacePath} from "@app/routes"
import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
import {spacesNotifications} from "@app/notifications"
export let url
const path = makeSpacePath(url)
const notification = deriveNotification(path, SPACE_FILTERS, url)
</script>
<Link replaceState href={path}>
@@ -18,7 +17,7 @@
<div slot="icon"><SpaceAvatar {url} /></div>
<div slot="title" class="flex gap-1">
<RelayName {url} />
{#if $notification}
{#if $spacesNotifications.includes(url)}
<div class="relative top-1 h-2 w-2 rounded-full bg-primary" />
{/if}
</div>
src/app/components/NoteItem.svelte
+2 -8
View File
@@ -1,9 +1,7 @@
<script lang="ts">
import {onMount} from "svelte"
import type {NativeEmoji} from "emoji-picker-element/shared"
import type {TrustedEvent} from "@welshman/util"
import {REACTION} from "@welshman/util"
import {pubkey, load} from "@welshman/app"
import {pubkey} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import EmojiButton from "@lib/components/EmojiButton.svelte"
import Content from "@app/components/Content.svelte"
@@ -26,16 +24,12 @@
const onEmoji = (emoji: NativeEmoji) =>
publishReaction({event, relays: [url], content: emoji.unicode})
onMount(() => {
load({filters: [{kinds: [REACTION], "#e": [event.id]}]})
})
</script>
<NoteCard {event} class="card2 bg-alt">
<Content {event} expandMode="inline" />
<div class="flex w-full justify-between gap-2">
<ReactionSummary {event} {onReactionClick}>
<ReactionSummary relays={[url]} {event} {onReactionClick}>
<EmojiButton {onEmoji} class="btn btn-neutral btn-xs h-[26px] rounded-box">
<Icon icon="smile-circle" size={4} />
</EmojiButton>
src/app/components/PrimaryNav.svelte
+5 -2
View File
@@ -9,7 +9,7 @@
import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
import {userMembership, getMembershipUrls, PLATFORM_RELAY, PLATFORM_LOGO} from "@app/state"
import {pushModal} from "@app/modal"
import {deriveNotification, spacesNotification, CHAT_FILTERS} from "@app/notifications"
import {deriveNotification, inactiveSpacesNotifications, CHAT_FILTERS} from "@app/notifications"
const chatNotification = deriveNotification("/chat", CHAT_FILTERS)
@@ -79,7 +79,10 @@
<PrimaryNavItem title="Messages" href="/chat" notification={$chatNotification}>
<Avatar icon="letter" class="!h-10 !w-10" />
</PrimaryNavItem>
<PrimaryNavItem title="Spaces" on:click={showSpacesMenu} notification={$spacesNotification}>
<PrimaryNavItem
title="Spaces"
on:click={showSpacesMenu}
notification={$inactiveSpacesNotifications.length > 0}>
<Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
</PrimaryNavItem>
</div>
src/app/components/ProfileCircles.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
<div class="flex pr-3">
{#each pubkeys.slice(0, 15) as pubkey (pubkey)}
<div class="z-feature -mr-3 inline-block">
<ProfileCircle class="h-8 w-8" {pubkey} {...$$props} />
<ProfileCircle class="h-8 w-8 bg-base-300" {pubkey} {...$$props} />
</div>
{/each}
</div>
src/app/components/ReactionSummary.svelte
+10 -3
View File
@@ -1,19 +1,26 @@
<script lang="ts">
import {onMount} from "svelte"
import {groupBy, uniqBy} from "@welshman/lib"
import {REACTION} from "@welshman/util"
import {deriveEvents} from "@welshman/store"
import {pubkey, repository} from "@welshman/app"
import {pubkey, repository, load} from "@welshman/app"
import {displayReaction} from "@app/state"
export let event
export let onReactionClick
export let relays: string[] = []
const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
const filters = [{kinds: [REACTION], "#e": [event.id]}]
const reactions = deriveEvents(repository, {filters})
$: groupedReactions = groupBy(
e => e.content,
uniqBy(e => e.pubkey + e.content, $reactions),
)
onMount(() => {
load({relays, filters})
})
</script>
{#if $reactions.length > 0}
@@ -27,7 +34,7 @@
class:border={isOwn}
class:border-solid={isOwn}
class:border-primary={isOwn}
on:click|stopPropagation={onClick}>
on:click|preventDefault|stopPropagation={onClick}>
<span>{displayReaction(content)}</span>
{#if events.length > 1}
<span>{events.length}</span>
src/app/components/ReplySummary.svelte
+9 -2
View File
@@ -1,12 +1,19 @@
<script lang="ts">
import {onMount} from "svelte"
import {deriveEvents} from "@welshman/store"
import {repository} from "@welshman/app"
import {repository, load} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import {COMMENT} from "@app/state"
export let event
export let relays: string[] = []
const replies = deriveEvents(repository, {filters: [{kinds: [COMMENT], "#E": [event.id]}]})
const filters = [{kinds: [COMMENT], "#E": [event.id]}]
const replies = deriveEvents(repository, {filters})
onMount(() => {
load({relays, filters})
})
</script>
{#if $replies.length > 0}
src/app/components/ThreadActions.svelte
+8 -3
View File
@@ -1,10 +1,11 @@
<script lang="ts">
import {onMount} from "svelte"
import {type Instance} from "tippy.js"
import type {NativeEmoji} from "emoji-picker-element/shared"
import {max} from "@welshman/lib"
import {deriveEvents, deriveIsDeleted} from "@welshman/store"
import type {TrustedEvent} from "@welshman/util"
import {thunks, pubkey, repository, formatTimestampRelative} from "@welshman/app"
import {thunks, load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Tippy from "@lib/components/Tippy.svelte"
import Button from "@lib/components/Button.svelte"
@@ -25,8 +26,8 @@
const deleted = deriveIsDeleted(repository, event)
const path = makeSpacePath(url, "threads", event.id)
const filters = [{kinds: [COMMENT], "#E": [event.id]}]
const notification = deriveNotification(path, filters, url)
const replies = deriveEvents(repository, {filters})
const notification = deriveNotification(path, filters, url)
const showPopover = () => popover.show()
@@ -48,10 +49,14 @@
let popover: Instance
$: lastActive = max([...$replies, event].map(e => e.created_at))
onMount(() => {
load({relays: [url], filters})
})
</script>
<div class="flex flex-wrap items-center justify-between gap-2">
<ReactionSummary {event} {onReactionClick} />
<ReactionSummary relays={[url]} {event} {onReactionClick} />
<div class="flex flex-grow flex-wrap justify-end gap-2">
{#if $deleted}
<div class="btn btn-error btn-xs rounded-full">Deleted</div>
src/app/components/ThreadCreate.svelte
+1 -1
View File
@@ -44,8 +44,8 @@
const tags = [["title", title], tagRoom(GENERAL, url), ...getEditorTags($editor)]
publishThunk({
event: createEvent(THREAD, {content, tags}),
relays: [url],
event: createEvent(THREAD, {content, tags}),
})
history.back()
src/app/components/ThunkStatus.svelte
+2 -1
View File
@@ -44,6 +44,7 @@
{#if isFailure && failure}
{@const [url, {message, status}] = failure}
<Tippy
class={$$props.class}
component={ThunkStatusDetail}
props={{url, message, status, retry}}
params={{interactive: true}}>
@@ -53,7 +54,7 @@
</span>
</Tippy>
{:else if canCancel || isPending}
<span class="flex items-center gap-1">
<span class="flex items-center gap-1 {$$props.class}">
<span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
<span class="opacity-50">Sending...</span>
{#if canCancel}
src/app/notifications.ts
+21 -8
View File
@@ -1,8 +1,9 @@
import {writable, derived} from "svelte/store"
import {page} from "$app/stores"
import {deriveEvents} from "@welshman/store"
import {repository, pubkey} from "@welshman/app"
import {prop, max, sortBy, assoc, lt, now} from "@welshman/lib"
import type {Filter} from "@welshman/util"
import type {Filter, TrustedEvent} from "@welshman/util"
import {DIRECT_MESSAGE} from "@welshman/util"
import {makeSpacePath} from "@app/routes"
import {
@@ -43,25 +44,31 @@ export const getRoomFilters = (room: string): Filter[] => ROOM_FILTERS.map(assoc
// Notification derivation
export const getNotification = (
pubkey: string | null,
lastChecked: number,
events: TrustedEvent[],
) => {
const [latestEvent] = sortBy($e => -$e.created_at, events)
return latestEvent?.pubkey !== pubkey && lt(lastChecked, latestEvent?.created_at)
}
export const deriveNotification = (path: string, filters: Filter[], url?: string) => {
const events = url ? deriveEventsForUrl(url, filters) : deriveEvents(repository, {filters})
return derived(
[pubkey, deriveChecked("*"), deriveChecked(path), events],
([$pubkey, $allChecked, $checked, $events]) => {
const [latestEvent] = sortBy($e => -$e.created_at, $events)
return (
latestEvent?.pubkey !== $pubkey && lt(max([$allChecked, $checked]), latestEvent?.created_at)
)
return getNotification($pubkey, max([$allChecked, $checked]), $events)
},
)
}
export const spacesNotification = derived(
export const spacesNotifications = derived(
[pubkey, checked, userMembership, deriveEvents(repository, {filters: SPACE_FILTERS})],
([$pubkey, $checked, $userMembership, $events]) => {
return getMembershipUrls($userMembership).some(url => {
return getMembershipUrls($userMembership).filter(url => {
const path = makeSpacePath(url)
const lastChecked = max([$checked["*"], $checked[path]])
const [latestEvent] = sortBy($e => -$e.created_at, $events)
@@ -70,3 +77,9 @@ export const spacesNotification = derived(
})
},
)
export const inactiveSpacesNotifications = derived(
[page, spacesNotifications],
([$page, $spacesNotifications]) =>
$spacesNotifications.filter(url => !$page.url.pathname.startsWith(makeSpacePath(url))),
)
src/lib/components/Tippy.svelte
+1 -1
View File
@@ -36,6 +36,6 @@
})
</script>
<div bind:this={element}>
<div bind:this={element} class={$$props.class}>
<slot />
</div>
src/routes/+layout.svelte
+27 -9
View File
@@ -15,7 +15,6 @@
RELAYS,
INBOX_RELAYS,
WRAP,
DELETE,
getPubkeyTagValues,
getListTags,
} from "@welshman/util"
@@ -37,9 +36,11 @@
dropSession,
getRelayUrls,
userInboxRelaySelections,
load,
} from "@welshman/app"
import * as lib from "@welshman/lib"
import * as util from "@welshman/util"
import * as welshmanSigner from "@welshman/signer"
import * as net from "@welshman/net"
import * as app from "@welshman/app"
import AppContainer from "@app/components/AppContainer.svelte"
@@ -53,13 +54,13 @@
getMembershipRooms,
userMembership,
ensureUnwrapped,
MEMBERSHIPS,
MESSAGE,
COMMENT,
THREAD,
GENERAL,
} from "@app/state"
import {loadUserData, subscribePersistent} from "@app/commands"
import * as commands from "@app/commands"
import {checked} from "@app/notifications"
import * as notifications from "@app/notifications"
import * as state from "@app/state"
@@ -72,7 +73,18 @@
let ready: Promise<unknown> = Promise.resolve()
onMount(async () => {
Object.assign(window, {get, nip19, ...lib, ...util, ...net, ...app, ...state, ...notifications})
Object.assign(window, {
get,
nip19,
...lib,
...welshmanSigner,
...util,
...net,
...app,
...state,
...commands,
...notifications,
})
const getScoreEvent = () => {
const ALWAYS_KEEP = Infinity
@@ -183,17 +195,23 @@
const rooms = uniq(getMembershipRooms($membership).map(m => m.room)).concat(GENERAL)
const relays = uniq(getMembershipUrls($membership))
// Get one event for each of our notification categories
load({
relays,
filters: [
{kinds: [THREAD], limit: 1},
{kinds: [COMMENT], "#K": [String(THREAD)], limit: 1},
...rooms.map(room => ({kinds: [MESSAGE], "#~": [room], limit: 1})),
],
})
// Listen for new notifications/memberships
subscribePersistent({
relays,
filters: [
{kinds: [THREAD], since},
{kinds: [THREAD], limit: 1},
{kinds: [COMMENT], "#K": [String(THREAD)], since},
{kinds: [MESSAGE], "#~": rooms, since},
{kinds: [MESSAGE], "#~": rooms, limit: 1},
{kinds: [COMMENT], "#K": [THREAD, MESSAGE].map(String), since},
{kinds: [COMMENT], "#K": [THREAD, MESSAGE].map(String), limit: 1},
{kinds: [DELETE], "#k": [THREAD, COMMENT, MESSAGE].map(String), since},
{kinds: [MEMBERSHIPS], "#r": relays, since: ago(WEEK, 2)},
],
})
})
src/routes/discover/+page.svelte
+5 -6
View File
@@ -3,7 +3,7 @@
import {derived} from "svelte/store"
import {addToMapKey, dec, gt} from "@welshman/lib"
import type {Relay} from "@welshman/app"
import {relays, createSearch, relaySelections} from "@welshman/app"
import {relays, createSearch} from "@welshman/app"
import {createScroller} from "@lib/html"
import Icon from "@lib/components/Icon.svelte"
import Page from "@lib/components/Page.svelte"
@@ -41,7 +41,6 @@
let term = ""
let limit = 20
let element: Element
let promise: Promise<any>
$: relaySearch = createSearch($relays, {
getValue: (relay: Relay) => relay.url,
@@ -59,8 +58,6 @@
})
onMount(() => {
promise = Promise.all([discoverRelays($memberships), discoverRelays($relaySelections)])
const scroller = createScroller({
element,
onScroll: () => {
@@ -126,8 +123,10 @@
{/if}
</Button>
{/each}
{#await promise}
<Spinner loading>Loading more relays...</Spinner>
{#await discoverRelays($memberships)}
<div class="flex justify-center">
<Spinner loading>Loading more relays...</Spinner>
</div>
{/await}
</div>
</Page>
src/routes/spaces/[relay]/+layout.svelte
+13 -2
View File
@@ -1,14 +1,16 @@
<script lang="ts">
import {onMount} from "svelte"
import {page} from "$app/stores"
import {ifLet} from "@welshman/lib"
import {ifLet, now} from "@welshman/lib"
import {subscribe} from "@welshman/app"
import {DELETE, REACTION} from "@welshman/util"
import Page from "@lib/components/Page.svelte"
import SecondaryNav from "@lib/components/SecondaryNav.svelte"
import MenuSpace from "@app/components/MenuSpace.svelte"
import {pushToast} from "@app/toast"
import {setChecked} from "@app/notifications"
import {checkRelayConnection, checkRelayAuth} from "@app/commands"
import {decodeRelay} from "@app/state"
import {decodeRelay, MEMBERSHIPS} from "@app/state"
import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
const url = decodeRelay($page.params.relay)
@@ -34,6 +36,15 @@
onMount(() => {
checkConnection()
const sub = subscribe({
relays: [url],
filters: [{kinds: [MEMBERSHIPS]}, {kinds: [DELETE, REACTION], since: now()}],
})
return () => {
sub.close()
}
})
</script>
src/routes/spaces/[relay]/+page.svelte
+2 -8
View File
@@ -3,22 +3,18 @@
import {deriveRelay} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
import Divider from "@lib/components/Divider.svelte"
import PageBar from "@lib/components/PageBar.svelte"
import MenuSpace from "@app/components/MenuSpace.svelte"
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import ProfileFeed from "@app/components/ProfileFeed.svelte"
import RelayName from "@app/components/RelayName.svelte"
import RelayDescription from "@app/components/RelayDescription.svelte"
import {decodeRelay} from "@app/state"
import {pushDrawer} from "@app/modal"
import {makeChatPath} from "@app/routes"
const url = decodeRelay($page.params.relay)
const relay = deriveRelay(url)
const openMenu = () => pushDrawer(MenuSpace, {url})
$: pubkey = $relay?.profile?.pubkey
</script>
@@ -35,9 +31,7 @@
Contact Owner
</Link>
{/if}
<Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
<Icon icon="menu-dots" />
</Button>
<MenuSpaceButton {url} />
</div>
</PageBar>
<div class="col-2 p-2">
src/routes/spaces/[relay]/[room]/+page.svelte
+23 -11
View File
@@ -8,11 +8,11 @@
</script>
<script lang="ts">
import {onDestroy} from "svelte"
import {onMount, onDestroy} from "svelte"
import {page} from "$app/stores"
import {sortBy, append} from "@welshman/lib"
import {sortBy, append, now} from "@welshman/lib"
import type {TrustedEvent, EventContent} from "@welshman/util"
import {createEvent} from "@welshman/util"
import {createEvent, DELETE} from "@welshman/util"
import {formatTimestampAsDate, publishThunk} from "@welshman/app"
import {slide} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
@@ -20,10 +20,11 @@
import Spinner from "@lib/components/Spinner.svelte"
import PageBar from "@lib/components/PageBar.svelte"
import Divider from "@lib/components/Divider.svelte"
import MenuSpace from "@app/components/MenuSpace.svelte"
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import ChannelMessage from "@app/components/ChannelMessage.svelte"
import ChannelCompose from "@app/components/ChannelCompose.svelte"
import {
pullConservatively,
userSettingValues,
userMembership,
decodeRelay,
@@ -36,8 +37,7 @@
getMembershipRoomsByUrl,
} from "@app/state"
import {setChecked} from "@app/notifications"
import {addRoomMembership, removeRoomMembership} from "@app/commands"
import {pushDrawer} from "@app/modal"
import {addRoomMembership, removeRoomMembership, subscribePersistent} from "@app/commands"
import {popKey} from "@app/implicit"
const {room = GENERAL} = $page.params
@@ -45,8 +45,6 @@
const url = decodeRelay($page.params.relay)
const channel = deriveChannel(makeChannelId(url, room))
const openMenu = () => pushDrawer(MenuSpace, {url})
const assertEvent = (e: any) => e as TrustedEvent
const onSubmit = ({content, tags}: EventContent) =>
@@ -91,6 +89,22 @@
elements.reverse()
}
onMount(() => {
pullConservatively({
relays: [url],
filters: [{kinds: [MESSAGE, DELETE], "#~": [room]}],
})
const unsub = subscribePersistent({
relays: [url],
filters: [{kinds: [MESSAGE, COMMENT], "#~": [room], since: now()}],
})
return () => {
unsub()
}
})
onDestroy(() => {
setChecked($page.url.pathname)
})
@@ -120,9 +134,7 @@
</Button>
{/if}
{/if}
<Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
<Icon icon="menu-dots" />
</Button>
<MenuSpaceButton {url} />
</div>
</PageBar>
<div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
src/routes/spaces/[relay]/calendar/+page.svelte
+3 -7
View File
@@ -10,10 +10,10 @@
import Spinner from "@lib/components/Spinner.svelte"
import PageBar from "@lib/components/PageBar.svelte"
import Divider from "@lib/components/Divider.svelte"
import MenuSpace from "@app/components/MenuSpace.svelte"
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import EventItem from "@app/components/EventItem.svelte"
import EventCreate from "@app/components/EventCreate.svelte"
import {pushModal, pushDrawer} from "@app/modal"
import {pushModal} from "@app/modal"
import {deriveEventsForUrl, pullConservatively, decodeRelay} from "@app/state"
import {setChecked} from "@app/notifications"
@@ -21,8 +21,6 @@
const kinds = [EVENT_DATE, EVENT_TIME]
const events = deriveEventsForUrl(url, [{kinds}])
const openMenu = () => pushDrawer(MenuSpace, {url})
const createEvent = () => pushModal(EventCreate, {url})
const getEnd = (event: TrustedEvent) => parseInt(event.tags.find(t => t[0] === "end")?.[1] || "")
@@ -78,9 +76,7 @@
</div>
<strong slot="title">Calendar</strong>
<div slot="action" class="md:hidden">
<Button on:click={openMenu} class="btn btn-neutral btn-sm">
<Icon icon="menu-dots" />
</Button>
<MenuSpaceButton {url} />
</div>
</PageBar>
<div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
src/routes/spaces/[relay]/threads/+page.svelte
+35 -31
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import {onMount, onDestroy} from "svelte"
import {onMount} from "svelte"
import {page} from "$app/stores"
import {sortBy, sleep, uniqBy} from "@welshman/lib"
import {sortBy, sleep, uniqBy, now} from "@welshman/lib"
import {getListTags, getPubkeyTagValues} from "@welshman/util"
import type {TrustedEvent} from "@welshman/util"
import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
@@ -13,17 +13,17 @@
import Button from "@lib/components/Button.svelte"
import PageBar from "@lib/components/PageBar.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import MenuSpace from "@app/components/MenuSpace.svelte"
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import ThreadItem from "@app/components/ThreadItem.svelte"
import ThreadCreate from "@app/components/ThreadCreate.svelte"
import {THREAD, decodeRelay, getEventsForUrl} from "@app/state"
import {pushModal, pushDrawer} from "@app/modal"
import {THREAD, COMMENT, decodeRelay, getEventsForUrl} from "@app/state"
import {subscribePersistent} from "@app/commands"
import {THREAD_FILTERS, setChecked} from "@app/notifications"
import {pushModal} from "@app/modal"
const url = decodeRelay($page.params.relay)
const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
const openMenu = () => pushDrawer(MenuSpace, {url})
const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
const createThread = () => pushModal(ThreadCreate, {url})
@@ -51,32 +51,38 @@
let buffer: TrustedEvent[] = []
let events: TrustedEvent[] = sortBy(e => -e.created_at, getEventsForUrl(url, [{kinds: [THREAD]}]))
onMount(async () => {
onMount(() => {
// Element is frequently not defined. I don't know why
await sleep(1000)
sleep(1000).then(() => {
if (!unmounted) {
scroller = createScroller({
element,
delay: 300,
threshold: 3000,
onScroll: () => {
buffer = sortBy(e => -e.created_at, buffer)
events = uniqBy(e => e.id, [...events, ...buffer.splice(0, 5)])
if (!unmounted) {
scroller = createScroller({
element,
delay: 300,
threshold: 3000,
onScroll: () => {
buffer = sortBy(e => -e.created_at, buffer)
events = uniqBy(e => e.id, [...events, ...buffer.splice(0, 5)])
if (buffer.length < 50) {
ctrl.load(50)
}
},
})
}
})
if (buffer.length < 50) {
ctrl.load(50)
}
},
})
const unsub = subscribePersistent({
relays: [url],
filters: [{kinds: [COMMENT], "#K": [String(THREAD)], since: now()}],
})
return () => {
unsub()
unmounted = true
scroller?.stop()
setChecked($page.url.pathname)
}
})
onDestroy(() => {
unmounted = true
scroller?.stop()
setChecked($page.url.pathname)
})
</script>
<div class="relative flex h-screen flex-col" bind:this={element}>
@@ -90,9 +96,7 @@
<Icon icon="notes-minimalistic" />
Create a Thread
</Button>
<Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
<Icon icon="menu-dots" />
</Button>
<MenuSpaceButton {url} />
</div>
</PageBar>
<div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
src/routes/spaces/[relay]/threads/[id]/+page.svelte
+10 -15
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import {onMount, onDestroy} from "svelte"
import {onMount} from "svelte"
import {sortBy, nthEq, sleep} from "@welshman/lib"
import {page} from "$app/stores"
import {repository, subscribe} from "@welshman/app"
import {repository} from "@welshman/app"
import {deriveEvents} from "@welshman/store"
import Icon from "@lib/components/Icon.svelte"
import PageBar from "@lib/components/PageBar.svelte"
@@ -10,12 +10,12 @@
import Button from "@lib/components/Button.svelte"
import Content from "@app/components/Content.svelte"
import NoteCard from "@app/components/NoteCard.svelte"
import MenuSpace from "@app/components/MenuSpace.svelte"
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import ThreadActions from "@app/components/ThreadActions.svelte"
import ThreadReply from "@app/components/ThreadReply.svelte"
import {COMMENT, deriveEvent, decodeRelay} from "@app/state"
import {subscribePersistent} from "@app/commands"
import {setChecked} from "@app/notifications"
import {pushDrawer} from "@app/modal"
const {relay, id} = $page.params
const url = decodeRelay(relay)
@@ -25,8 +25,6 @@
const back = () => history.back()
const openMenu = () => pushDrawer(MenuSpace, {url})
const openReply = () => {
showReply = true
}
@@ -40,13 +38,12 @@
$: title = $event?.tags.find(nthEq(0, "title"))?.[1] || ""
onMount(() => {
const sub = subscribe({filters, relays: [url]})
const unsub = subscribePersistent({relays: [url], filters})
return () => sub.close()
})
onDestroy(() => {
setChecked($page.url.pathname)
return () => {
unsub()
setChecked($page.url.pathname)
}
})
</script>
@@ -91,9 +88,7 @@
</div>
<h1 slot="title" class="text-xl">{title}</h1>
<div slot="action">
<Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
<Icon icon="menu-dots" />
</Button>
<MenuSpaceButton {url} />
</div>
</PageBar>
</div>