Refactor synchronization logic

This commit is contained in:
Jon Staab
2025-10-06 11:23:19 -07:00
committed by hodlbod
parent d0491ed202
commit e0099141aa
17 changed files with 357 additions and 375 deletions
+3 -9
View File
@@ -1,9 +1,7 @@
<script lang="ts">
import type {Snippet} from "svelte"
import {page} from "$app/stores"
import {WRAP} from "@welshman/util"
import {Router} from "@welshman/router"
import {pubkey} from "@welshman/app"
import {sleep} from "@welshman/lib"
import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
@@ -16,7 +14,6 @@
import ChatMenu from "@app/components/ChatMenu.svelte"
import ChatItem from "@app/components/ChatItem.svelte"
import {chatSearch} from "@app/core/state"
import {pullConservatively} from "@app/core/requests"
import {pushModal} from "@app/util/modal"
type Props = {
@@ -27,14 +24,11 @@
const openMenu = () => pushModal(ChatMenu)
const promise = pullConservatively({
filters: [{kinds: [WRAP], "#p": [$pubkey!]}],
relays: Router.get().UserInbox().getUrls(),
})
let term = $state("")
const chats = $derived($chatSearch.searchOptions(term))
const promise = sleep(10000)
</script>
<SecondaryNav>
+2 -24
View File
@@ -2,8 +2,8 @@
import type {Snippet} from "svelte"
import {onMount} from "svelte"
import {page} from "$app/stores"
import {ago, sleep, once, MONTH} from "@welshman/lib"
import {ROOM_META, EVENT_TIME, THREAD, COMMENT, MESSAGE, displayRelayUrl} from "@welshman/util"
import {sleep, once} from "@welshman/lib"
import {displayRelayUrl} from "@welshman/util"
import {SocketStatus} from "@welshman/net"
import Page from "@lib/components/Page.svelte"
import Dialog from "@lib/components/Dialog.svelte"
@@ -19,10 +19,7 @@
deriveRelayAuthError,
relaysPendingTrust,
deriveSocket,
userRoomsByUrl,
} from "@app/core/state"
import {pullConservatively} from "@app/core/requests"
import {hasBlossomSupport} from "@app/core/commands"
import {notifications} from "@app/util/notifications"
type Props = {
@@ -33,8 +30,6 @@
const url = decodeRelay($page.params.relay!)
const rooms = Array.from($userRoomsByUrl.get(url) || [])
const socket = deriveSocket(url)
const authError = deriveRelayAuthError(url)
@@ -56,8 +51,6 @@
})
onMount(() => {
const since = ago(MONTH)
sleep(2000).then(() => {
if ($socket.status !== SocketStatus.Open) {
pushToast({
@@ -66,21 +59,6 @@
})
}
})
// Prime our cache so we can upload images quicker
hasBlossomSupport(url)
// Load group meta, threads, calendar events, comments, and recent messages
// for user rooms to help with a quick page transition
pullConservatively({
relays: [url],
filters: [
{kinds: [ROOM_META]},
{kinds: [THREAD, EVENT_TIME, MESSAGE], since},
{kinds: [COMMENT], "#K": [String(THREAD), String(EVENT_TIME)], since},
...rooms.map(room => ({kinds: [MESSAGE], "#h": [room], since})),
],
})
})
</script>
+5 -38
View File
@@ -6,19 +6,8 @@
import type {Readable} from "svelte/store"
import type {MakeNonOptional} from "@welshman/lib"
import {now, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
import {request} from "@welshman/net"
import type {TrustedEvent, EventContent} from "@welshman/util"
import {
makeEvent,
makeRoomMeta,
MESSAGE,
DELETE,
THREAD,
EVENT_TIME,
ZAP_GOAL,
ROOM_ADD_USER,
ROOM_REMOVE_USER,
} from "@welshman/util"
import {makeEvent, makeRoomMeta, MESSAGE} from "@welshman/util"
import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app"
import {slide, fade, fly} from "@lib/transition"
import Hashtag from "@assets/icons/hashtag.svg?dataurl"
@@ -43,11 +32,11 @@
userRoomsByUrl,
userSettingsValues,
decodeRelay,
getEventsForUrl,
deriveUserMembershipStatus,
deriveChannel,
MembershipStatus,
REACTION_KINDS,
PROTECTED,
MESSAGE_KINDS,
} from "@app/core/state"
import {setChecked, checked} from "@app/util/notifications"
import {
@@ -57,7 +46,6 @@
prependParent,
publishDelete,
} from "@app/core/commands"
import {PROTECTED} from "@app/core/state"
import {makeFeed} from "@app/core/requests"
import {popKey} from "@lib/implicit"
import {pushToast} from "@app/util/toast"
@@ -68,7 +56,6 @@
const lastChecked = $checked[$page.url.pathname]
const url = decodeRelay(relay)
const channel = deriveChannel(url, room)
const filter = {kinds: [MESSAGE, THREAD, EVENT_TIME, ZAP_GOAL], "#h": [room]}
const isFavorite = $derived($userRoomsByUrl.get(url)?.has(room))
const shouldProtect = canEnforceNip70(url)
const membershipStatus = deriveUserMembershipStatus(url, room)
@@ -267,13 +254,9 @@
cleanup?.()
const feed = makeFeed({
url,
element: element!,
relays: [url],
feedFilters: [filter],
subscriptionFilters: [
{kinds: [DELETE, MESSAGE, ...REACTION_KINDS], "#h": [room], since: now()},
],
initialEvents: getEventsForUrl(url, [{...filter, limit: 20}]),
filters: [{kinds: MESSAGE_KINDS, "#h": [room]}],
onExhausted: () => {
loadingEvents = false
},
@@ -301,21 +284,6 @@
}
onMount(() => {
const controller = new AbortController()
request({
signal: controller.signal,
relays: [url],
filters: [
{
kinds: [ROOM_ADD_USER, ROOM_REMOVE_USER],
"#p": [$pubkey!],
"#h": [room],
limit: 10,
},
],
})
const observer = new ResizeObserver(() => {
if (dynamicPadding && chatCompose) {
dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
@@ -327,7 +295,6 @@
start()
return () => {
controller.abort()
observer.unobserve(chatCompose!)
observer.unobserve(dynamicPadding!)
}
@@ -5,7 +5,7 @@
import {page} from "$app/stores"
import {now, last, formatTimestampAsDate} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {DELETE, EVENT_TIME, getTagValue} from "@welshman/util"
import {EVENT_TIME, getTagValue} from "@welshman/util"
import {fly} from "@lib/transition"
import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
import CalendarAdd from "@assets/icons/calendar-add.svg?dataurl"
@@ -19,7 +19,7 @@
import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
import CalendarEventCreate from "@app/components/CalendarEventCreate.svelte"
import {pushModal} from "@app/util/modal"
import {getEventsForUrl, decodeRelay, REACTION_KINDS} from "@app/core/state"
import {decodeRelay, makeCommentFilter} from "@app/core/state"
import {makeCalendarFeed} from "@app/core/requests"
import {setChecked} from "@app/util/notifications"
@@ -31,7 +31,6 @@
let element: HTMLElement | undefined = $state()
let loading = $state(true)
let cleanup: () => void
let events: Readable<TrustedEvent[]> = $state(readable([]))
type Item = {
@@ -96,23 +95,20 @@
})
onMount(() => {
const feedFilters = [{kinds: [EVENT_TIME]}]
const subscriptionFilters = [{kinds: [DELETE, EVENT_TIME, ...REACTION_KINDS], since: now()}]
;({events, cleanup} = makeCalendarFeed({
const feed = makeCalendarFeed({
url,
element: element!,
relays: [url],
feedFilters,
subscriptionFilters,
initialEvents: getEventsForUrl(url, feedFilters),
filters: [{kinds: [EVENT_TIME]}, makeCommentFilter([EVENT_TIME])],
onExhausted: () => {
loading = false
},
}))
})
events = feed.events
return () => {
feed.cleanup()
setChecked($page.url.pathname)
cleanup?.()
}
})
</script>
+11 -23
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import {onMount, onDestroy} from "svelte"
import {onMount} from "svelte"
import {page} from "$app/stores"
import type {Readable} from "svelte/store"
import {readable} from "svelte/store"
import {now, formatTimestampAsDate, MINUTE, ago} from "@welshman/lib"
import type {TrustedEvent, EventContent} from "@welshman/util"
import {makeEvent, MESSAGE, DELETE, THREAD, EVENT_TIME, ZAP_GOAL} from "@welshman/util"
import {makeEvent, MESSAGE} from "@welshman/util"
import {pubkey, publishThunk} from "@welshman/app"
import {slide, fade, fly} from "@lib/transition"
import ChatRound from "@assets/icons/chat-round.svg?dataurl"
@@ -21,13 +21,7 @@
import ChannelItem from "@app/components/ChannelItem.svelte"
import ChannelCompose from "@app/components/ChannelCompose.svelte"
import ChannelComposeParent from "@app/components/ChannelComposeParent.svelte"
import {
userSettingsValues,
decodeRelay,
getEventsForUrl,
PROTECTED,
REACTION_KINDS,
} from "@app/core/state"
import {userSettingsValues, decodeRelay, MESSAGE_FILTER, PROTECTED} from "@app/core/state"
import {prependParent, canEnforceNip70, publishDelete} from "@app/core/commands"
import {setChecked, checked} from "@app/util/notifications"
import {pushToast} from "@app/util/toast"
@@ -38,7 +32,6 @@
const mounted = now()
const lastChecked = $checked[$page.url.pathname]
const url = decodeRelay($page.params.relay!)
const filter = {kinds: [MESSAGE, THREAD, EVENT_TIME, ZAP_GOAL]}
const shouldProtect = canEnforceNip70(url)
const replyTo = (event: TrustedEvent) => {
@@ -223,11 +216,9 @@
observer.observe(dynamicPadding!)
const feed = makeFeed({
url,
element: element!,
relays: [url],
feedFilters: [filter],
subscriptionFilters: [{kinds: [DELETE, MESSAGE, ...REACTION_KINDS], since: now()}],
initialEvents: getEventsForUrl(url, [{...filter, limit: 20}]),
filters: [MESSAGE_FILTER],
onExhausted: () => {
loadingEvents = false
},
@@ -237,20 +228,17 @@
cleanup = feed.cleanup
return () => {
cleanup()
controller.abort()
observer.unobserve(chatCompose!)
observer.unobserve(dynamicPadding!)
// Sveltekit calls onDestroy at the beginning of the page load for some reason
setTimeout(() => {
setChecked($page.url.pathname)
}, 800)
}
})
onDestroy(() => {
cleanup?.()
// Sveltekit calls onDestroy at the beginning of the page load for some reason
setTimeout(() => {
setChecked($page.url.pathname)
}, 800)
})
</script>
<PageBar>
+20 -32
View File
@@ -1,10 +1,11 @@
<script lang="ts">
import {onMount} from "svelte"
import {readable} from "svelte/store"
import type {Readable} from "svelte/store"
import {page} from "$app/stores"
import {sortBy, max, nthEq} from "@welshman/lib"
import {sortBy, partition, spec, pushToMapKey, max} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {ZAP_GOAL, DELETE, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
import {userMutes} from "@welshman/app"
import {ZAP_GOAL, getTagValue} from "@welshman/util"
import {fly} from "@lib/transition"
import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
@@ -15,61 +16,48 @@
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import GoalItem from "@app/components/GoalItem.svelte"
import GoalCreate from "@app/components/GoalCreate.svelte"
import {decodeRelay, getEventsForUrl, REACTION_KINDS} from "@app/core/state"
import {decodeRelay, makeCommentFilter} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
import {makeFeed} from "@app/core/requests"
import {pushModal} from "@app/util/modal"
const url = decodeRelay($page.params.relay!)
const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
const goals: TrustedEvent[] = $state([])
const comments: TrustedEvent[] = $state([])
let loading = $state(true)
let element: HTMLElement | undefined = $state()
let events: Readable<TrustedEvent[]> = $state(readable([]))
const createGoal = () => pushModal(GoalCreate, {url})
const events = $derived.by(() => {
const scores = new Map<string, number>()
const items = $derived.by(() => {
const scores = new Map<string, number[]>()
const [goals, comments] = partition(spec({kind: ZAP_GOAL}), $events)
for (const comment of comments) {
const id = comment.tags.find(nthEq(0, "E"))?.[1]
const id = getTagValue("E", comment.tags)
if (id) {
scores.set(id, max([scores.get(id), comment.created_at]))
pushToMapKey(scores, id, comment.created_at)
}
}
return sortBy(e => -max([scores.get(e.id), e.created_at]), goals)
return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), goals)
})
onMount(() => {
const {cleanup} = makeFeed({
const feed = makeFeed({
url,
element: element!,
relays: [url],
feedFilters: [{kinds: [ZAP_GOAL, COMMENT]}],
subscriptionFilters: [
{kinds: [ZAP_GOAL, DELETE, ...REACTION_KINDS]},
{kinds: [COMMENT], "#K": [String(ZAP_GOAL)]},
],
initialEvents: getEventsForUrl(url, [{kinds: [ZAP_GOAL, COMMENT], limit: 10}]),
onEvent: event => {
if (event.kind === ZAP_GOAL && !mutedPubkeys.includes(event.pubkey)) {
goals.push(event)
}
if (event.kind === COMMENT) {
comments.push(event)
}
},
filters: [{kinds: [ZAP_GOAL]}, makeCommentFilter([ZAP_GOAL])],
onExhausted: () => {
loading = false
},
})
events = feed.events
return () => {
cleanup?.()
feed.cleanup()
setChecked($page.url.pathname)
}
})
@@ -96,7 +84,7 @@
</PageBar>
<PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
{#each events as event (event.id)}
{#each items as event (event.id)}
<div in:fly>
<GoalItem {url} event={$state.snapshot(event)} />
</div>
@@ -105,7 +93,7 @@
<Spinner {loading}>
{#if loading}
Looking for goals...
{:else if events.length === 0}
{:else if items.length === 0}
No goals found.
{:else}
That's all!
+21 -33
View File
@@ -1,10 +1,11 @@
<script lang="ts">
import {onMount} from "svelte"
import {readable} from "svelte/store"
import type {Readable} from "svelte/store"
import {page} from "$app/stores"
import {sortBy, max, nthEq} from "@welshman/lib"
import {sortBy, partition, spec, max, pushToMapKey} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {THREAD, DELETE, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
import {userMutes} from "@welshman/app"
import {THREAD, getTagValue} from "@welshman/util"
import {fly} from "@lib/transition"
import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
@@ -15,62 +16,49 @@
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import ThreadItem from "@app/components/ThreadItem.svelte"
import ThreadCreate from "@app/components/ThreadCreate.svelte"
import {decodeRelay, getEventsForUrl} from "@app/core/state"
import {decodeRelay} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
import {REACTION_KINDS} from "@app/core/state"
import {makeCommentFilter} from "@app/core/state"
import {makeFeed} from "@app/core/requests"
import {pushModal} from "@app/util/modal"
const url = decodeRelay($page.params.relay!)
const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
const threads: TrustedEvent[] = $state([])
const comments: TrustedEvent[] = $state([])
let loading = $state(true)
let element: HTMLElement | undefined = $state()
let events: Readable<TrustedEvent[]> = $state(readable([]))
const createThread = () => pushModal(ThreadCreate, {url})
const events = $derived.by(() => {
const scores = new Map<string, number>()
const items = $derived.by(() => {
const scores = new Map<string, number[]>()
const [goals, comments] = partition(spec({kind: THREAD}), $events)
for (const comment of comments) {
const id = comment.tags.find(nthEq(0, "E"))?.[1]
const id = getTagValue("E", comment.tags)
if (id) {
scores.set(id, max([scores.get(id), comment.created_at]))
pushToMapKey(scores, id, comment.created_at)
}
}
return sortBy(e => -max([scores.get(e.id), e.created_at]), threads)
return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), goals)
})
onMount(() => {
const {cleanup} = makeFeed({
const feed = makeFeed({
url,
element: element!,
relays: [url],
feedFilters: [{kinds: [THREAD, COMMENT]}],
subscriptionFilters: [
{kinds: [THREAD, DELETE, ...REACTION_KINDS]},
{kinds: [COMMENT], "#K": [String(THREAD)]},
],
initialEvents: getEventsForUrl(url, [{kinds: [THREAD, COMMENT], limit: 10}]),
onEvent: event => {
if (event.kind === THREAD && !mutedPubkeys.includes(event.pubkey)) {
threads.push(event)
}
if (event.kind === COMMENT) {
comments.push(event)
}
},
filters: [{kinds: [THREAD]}, makeCommentFilter([THREAD])],
onExhausted: () => {
loading = false
},
})
events = feed.events
return () => {
cleanup?.()
feed.cleanup()
setChecked($page.url.pathname)
}
})
@@ -97,7 +85,7 @@
</PageBar>
<PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
{#each events as event (event.id)}
{#each items as event (event.id)}
<div in:fly>
<ThreadItem {url} event={$state.snapshot(event)} />
</div>
@@ -106,7 +94,7 @@
<Spinner {loading}>
{#if loading}
Looking for threads...
{:else if events.length === 0}
{:else if items.length === 0}
No threads found.
{:else}
That's all!