coracle/flotilla
1
6
Fork 24
Code Issues 34 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

Re-work thread sorting and loading, fix some display bugs with reaction tooltips, fix thunk status loading indicator

Browse Source
This commit is contained in:
Jon Staab
2024-11-21 11:01:34 -08:00
parent 659403c308
commit 86d082b1ab
9 changed files with 74 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/ChannelMessage.svelte
+1 -1
View File
@@ -109,7 +109,7 @@
{#if !isHead}
<ReplySummary relays={[url]} {event} on:click={onClick} />
{/if}
<ReactionSummary relays={[url]} {event} {onReactionClick} />
<ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-right" />
</div>
<button
class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
src/app/components/ChatMessage.svelte
+24 -21
View File
@@ -31,6 +31,7 @@
export let showPubkey = false
const thunk = $thunks[event.id]
const isOwn = event.pubkey === $pubkey
const profile = deriveProfile(event.pubkey)
const profileDisplay = deriveProfileDisplay(event.pubkey)
const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
@@ -62,9 +63,9 @@
<div
data-event={event.id}
class="group chat flex items-center justify-end gap-1 px-2"
class:chat-start={event.pubkey !== $pubkey}
class:flex-row-reverse={event.pubkey !== $pubkey}
class:chat-end={event.pubkey === $pubkey}>
class:chat-start={!isOwn}
class:flex-row-reverse={!isOwn}
class:chat-end={isOwn}>
<Tippy
bind:popover
component={ChatMessageMenu}
@@ -87,27 +88,29 @@
<Icon icon="menu-dots" size={4} />
</button>
</Tippy>
<div class="flex min-w-0 flex-col" class:items-end={event.pubkey === $pubkey}>
<div class="flex min-w-0 flex-col" class:items-end={isOwn}>
<LongPress
class="bg-alt chat-bubble mx-1 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
onLongPress={showMobileMenu}>
{#if showPubkey && event.pubkey !== $pubkey}
{#if showPubkey}
<div class="flex items-center gap-2">
<Link external href={pubkeyLink(event.pubkey)} class="flex items-center gap-1">
<Avatar
src={$profile?.picture}
class="border border-solid border-base-content"
size={4} />
<div class="flex items-center gap-2">
<Link
external
href={pubkeyLink(event.pubkey)}
class="text-sm font-bold"
style="color: {colorValue}">
{$profileDisplay}
</Link>
</div>
</Link>
{#if !isOwn}
<Link external href={pubkeyLink(event.pubkey)} class="flex items-center gap-1">
<Avatar
src={$profile?.picture}
class="border border-solid border-base-content"
size={4} />
<div class="flex items-center gap-2">
<Link
external
href={pubkeyLink(event.pubkey)}
class="text-sm font-bold"
style="color: {colorValue}">
{$profileDisplay}
</Link>
</div>
</Link>
{/if}
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
</div>
{/if}
@@ -117,7 +120,7 @@
</LongPress>
<div class="row-2 z-feature -mt-1 ml-4">
<ReplySummary {event} />
<ReactionSummary {event} {onReactionClick} />
<ReactionSummary {event} {onReactionClick} noTooltip />
</div>
</div>
</div>
src/app/components/ReactionSummary.svelte
+5 -1
View File
@@ -5,11 +5,14 @@
import {deriveEvents} from "@welshman/store"
import {pubkey, repository, load, displayProfileByPubkey} from "@welshman/app"
import {displayList} from "@lib/util"
import {isMobile} from "@lib/html"
import {displayReaction} from "@app/state"
export let event
export let onReactionClick
export let relays: string[] = []
export let reactionClass = ""
export let noTooltip = false
const filters = [{kinds: [REACTION], "#e": [event.id]}]
const reactions = deriveEvents(repository, {filters})
@@ -35,7 +38,8 @@
<button
type="button"
data-tip={tooltip}
class="flex-inline btn btn-neutral btn-xs tooltip tooltip-right gap-1 rounded-full"
class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full {reactionClass}"
class:tooltip={!noTooltip && !isMobile}
class:border={isOwn}
class:border-solid={isOwn}
class:border-primary={isOwn}
src/app/components/ThreadActions.svelte
+1 -1
View File
@@ -57,7 +57,7 @@
<div class="flex flex-wrap items-center justify-between gap-2">
<div class="flex flex-grow flex-wrap justify-end gap-2">
<ReactionSummary relays={[url]} {event} {onReactionClick} />
<ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-left" />
{#if $deleted}
<div class="btn btn-error btn-xs rounded-full">Deleted</div>
{:else if thunk}
src/app/components/ThreadReply.svelte
+1 -1
View File
@@ -47,7 +47,7 @@
in:fly
out:slideAndFade
on:submit|preventDefault={submit}
class="card2 sticky bottom-2 z-feature mx-2 mt-2 bg-neutral">
class="card2 sticky bottom-2 z-feature mx-2 mt-4 bg-neutral">
<div class="relative">
<div class="note-editor flex-grow overflow-hidden">
<EditorContent editor={$editor} />
src/app/components/ThunkStatus.svelte
+5 -3
View File
@@ -30,8 +30,10 @@
$: isFailure = !canCancel && ps.every(s => [Failure, Timeout].includes(s.status))
$: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
// Delay updating isPending so users can see that the message is sent
$: {
// Delay updating isPending so users can see that the message is sent
isPending = isPending || ps.some(s => s.status == Pending)
if (!ps.some(s => s.status == Pending)) {
setTimeout(() => {
isPending = false
@@ -44,11 +46,11 @@
{#if isFailure && failure}
{@const [url, {message, status}] = failure}
<Tippy
class={$$props.class}
class="flex items-center {$$props.class}"
component={ThunkStatusDetail}
props={{url, message, status, retry}}
params={{interactive: true}}>
<span class="tooltip flex cursor-pointer items-center gap-1">
<span class="flex cursor-pointer items-center gap-1">
<Icon icon="danger" size={3} />
<span class="opacity-50">Failed to send!</span>
</span>
src/app/components/ThunkStatusDetail.svelte
+1 -1
View File
@@ -19,7 +19,7 @@
}
</script>
<div class="card2 bg-alt col-2">
<div class="card2 bg-alt col-2 shadow-2xl">
<p>
Failed to publish to {displayRelayUrl(url)}: {message}.
</p>
src/routes/+layout.svelte
+3 -3
View File
@@ -193,10 +193,10 @@
}
// Listen for space data, populate space-based notifications
let unsubRooms: any
let unsubSpaces: any
userMembership.subscribe($membership => {
unsubRooms?.()
unsubSpaces?.()
const since = ago(30)
const rooms = uniq(getMembershipRooms($membership).map(m => m.room)).concat(GENERAL)
@@ -213,7 +213,7 @@
})
// Listen for new notifications/memberships
unsubRooms = subscribePersistent({
unsubSpaces = subscribePersistent({
relays,
filters: [
{kinds: [THREAD], since},
src/routes/spaces/[relay]/threads/+page.svelte
+33 -43
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import {onMount} from "svelte"
import {derived} from "svelte/store"
import {page} from "$app/stores"
import {sortBy, sleep, uniqBy, now} from "@welshman/lib"
import {getListTags, getPubkeyTagValues, LOCAL_RELAY_URL} from "@welshman/util"
import type {TrustedEvent} from "@welshman/util"
import {sortBy, min, nthEq, sleep} from "@welshman/lib"
import {getListTags, getPubkeyTagValues} from "@welshman/util"
import {throttled} from "@welshman/store"
import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
import {nthEq} from "@welshman/lib"
import {createFeedController, userMutes} from "@welshman/app"
import {createScroller, type Scroller} from "@lib/html"
import {fly} from "@lib/transition"
@@ -16,40 +16,50 @@
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
import ThreadItem from "@app/components/ThreadItem.svelte"
import ThreadCreate from "@app/components/ThreadCreate.svelte"
import {THREAD, COMMENT, decodeRelay, getEventsForUrl} from "@app/state"
import {subscribePersistent} from "@app/commands"
import {THREAD, COMMENT, decodeRelay, deriveEventsForUrl} from "@app/state"
import {THREAD_FILTERS, setChecked} from "@app/notifications"
import {pushModal} from "@app/modal"
const url = decodeRelay($page.params.relay)
const threads = deriveEventsForUrl(url, [{kinds: [THREAD]}])
const comments = deriveEventsForUrl(url, [{kinds: [COMMENT], "#K": [String(THREAD)]}])
const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
const events = throttled(
800,
derived([threads, comments], ([$threads, $comments]) => {
const scores = new Map<string, number>()
for (const comment of $comments) {
const id = comment.tags.find(nthEq(0, "E"))?.[1]
if (id) {
scores.set(id, min([scores.get(id), -comment.created_at]))
}
}
return sortBy(
e => min([scores.get(e.id), -e.created_at]),
$threads.filter(e => !mutedPubkeys.includes(e.pubkey)),
)
}),
)
const createThread = () => pushModal(ThreadCreate, {url})
const ctrl = createFeedController({
useWindowing: true,
feed: makeIntersectionFeed(makeRelayFeed(url), feedsFromFilters(THREAD_FILTERS)),
onEvent: (event: TrustedEvent) => {
if (
event.kind === THREAD &&
!event.tags.some(nthEq(0, "e")) &&
!mutedPubkeys.includes(event.pubkey)
) {
buffer.push(event)
}
},
onExhausted: () => {
loading = false
},
})
let limit = 10
let loading = true
let unmounted = false
let element: Element
let scroller: Scroller
let buffer: TrustedEvent[] = []
let events: TrustedEvent[] = sortBy(e => -e.created_at, getEventsForUrl(url, [{kinds: [THREAD]}]))
onMount(() => {
// Element is frequently not defined. I don't know why
@@ -60,10 +70,9 @@
delay: 300,
threshold: 3000,
onScroll: () => {
buffer = sortBy(e => -e.created_at, buffer)
events = uniqBy(e => e.id, [...events, ...buffer.splice(0, 5)])
limit += 10
if (buffer.length < 50) {
if ($events.length - limit < 10) {
ctrl.load(50)
}
},
@@ -71,26 +80,7 @@
}
})
const unsub = subscribePersistent({
relays: [url, LOCAL_RELAY_URL],
filters: [
{kinds: [THREAD], since: now()},
{kinds: [COMMENT], "#K": [String(THREAD)], since: now()},
],
onEvent: (event: TrustedEvent) => {
if (event.kind === THREAD) {
const index = Math.max(
0,
events.findIndex(e => e.created_at < event.created_at),
)
events = [...events.slice(0, index), event, ...events.slice(index)]
}
},
})
return () => {
unsub()
unmounted = true
scroller?.stop()
setChecked($page.url.pathname)
@@ -113,17 +103,17 @@
</div>
</PageBar>
<div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
{#each events as event (event.id)}
{#each $events as event (event.id)}
<div in:fly>
<ThreadItem {url} {event} />
</div>
{/each}
{#if loading || events.length === 0}
{#if loading || $events.length === 0}
<p class="flex h-10 items-center justify-center py-20" out:fly>
<Spinner {loading}>
{#if loading}
Looking for threads...
{:else if events.length === 0}
{:else if $events.length === 0}
No threads found.
{/if}
</Spinner>