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

Rework recent activity page

Browse Source
This commit is contained in:
Jon Staab
2026-02-03 09:49:44 -08:00
parent 4b8cf53731
commit 1da6833c71
6 changed files with 98 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/NoteCard.svelte
+2 -2
View File
@@ -35,7 +35,7 @@
let muted = $state(getPubkeyTagValues(getListTags($userMuteList)).includes(event.pubkey))
</script>
<div class="flex flex-col gap-2 {restProps.class}">
<div class="flex flex-col gap-2 shadow-md {restProps.class}">
{#if muted}
<div class="flex items-center justify-between">
<div class="row-2 relative">
@@ -45,7 +45,7 @@
<Button class="link ml-8" onclick={ignoreMute}>Show anyway</Button>
</div>
{:else}
<div class="flex justify-between gap-2">
<div class="flex items-start justify-between gap-2">
{#if !hideProfile}
{#if minimal}
@<ProfileName pubkey={event.pubkey} {url} />
src/app/components/NoteContentThread.svelte
+1 -11
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import type {ComponentProps} from "svelte"
import {formatTimestamp} from "@welshman/lib"
import {getTagValue} from "@welshman/util"
import Content from "@app/components/Content.svelte"
@@ -11,16 +10,7 @@
<div class="flex flex-col gap-2">
{#if title}
<div class="flex w-full items-center justify-between gap-2">
<p class="text-xl">{title}</p>
<p class="text-sm opacity-75">
{formatTimestamp(props.event.created_at)}
</p>
</div>
{:else}
<p class="mb-3 h-0 text-xs opacity-75">
{formatTimestamp(props.event.created_at)}
</p>
<p class="text-xl">{title}</p>
{/if}
{#if props.event.content}
<Content {...props} />
src/app/components/NoteItem.svelte
+9 -1
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import type {Snippet} from "svelte"
import type {NativeEmoji} from "emoji-picker-element/shared"
import type {TrustedEvent, EventContent} from "@welshman/util"
import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
@@ -9,7 +10,13 @@
import ReactionSummary from "@app/components/ReactionSummary.svelte"
import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
const {url, event} = $props()
type Props = {
url: string
event: TrustedEvent
children?: Snippet
}
const {url, event, children}: Props = $props()
const shouldProtect = canEnforceNip70(url)
@@ -36,5 +43,6 @@
<Icon icon={SmileCircle} size={4} />
</EmojiButton>
</ReactionSummary>
{@render children?.()}
</div>
</NoteCard>
src/app/components/ReactionSummary.svelte
+1 -1
View File
@@ -116,7 +116,7 @@
})
</script>
{#if $reactions.length > 0 || $zaps.length || $reports.length > 0}
{#if $reactions.length > 0 || $zaps.length || $reports.length > 0 || children}
<div class="flex min-w-0 flex-wrap gap-2">
{#if url && $reports.length > 0}
<button
src/app/components/ConversationCard.svelte → src/app/components/RecentConversation.svelte
+14 -19
View File
@@ -2,8 +2,9 @@
import {goto} from "$app/navigation"
import {formatTimestamp} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {getTagValue} from "@welshman/util"
import ChatRoundDots from "@assets/icons/chat-round-dots.svg?dataurl"
import Reply from "@assets/icons/reply.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
@@ -13,24 +14,18 @@
type Props = {
url: string
h?: string
latest: TrustedEvent
event: TrustedEvent
count: number
}
const {url, h, latest, count}: Props = $props()
const {url, event, count}: Props = $props()
const navigateToRoom = () => {
goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
}
const h = getTagValue("h", event.tags)
const handleReplyClick = (e: Event) => {
e.stopPropagation()
navigateToRoom()
}
const onClick = () => goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
</script>
<Button class="card2 bg-alt shadow-md" onclick={navigateToRoom}>
<Button class="card2 bg-alt shadow-md" onclick={onClick}>
<div class="flex flex-col gap-3">
<div class="flex items-center gap-2 text-sm">
{#if h}
@@ -40,23 +35,23 @@
<span class="truncate font-semibold">Chat</span>
{/if}
<span class="ml-auto text-nowrap opacity-50">
{formatTimestamp(latest.created_at)}
{formatTimestamp(event.created_at)}
</span>
</div>
<div class="flex items-start gap-3">
<ProfileCircle pubkey={latest.pubkey} size={10} />
<ProfileCircle pubkey={event.pubkey} size={10} />
<div class="min-w-0 flex-1">
<NoteContentMinimal event={latest} />
<NoteContentMinimal {event} />
</div>
</div>
<div class="flex items-center justify-between gap-2 text-xs">
<span class="opacity-50">
{count}
{count === 1 ? "message" : "messages"} this week
recent messages{count === 1 ? "" : "s"}
</span>
<Button class="btn btn-sm btn-primary" onclick={handleReplyClick}>
<Icon icon={Reply} />
Reply
<Button class="btn btn-sm btn-primary" onclick={onClick}>
View Conversation
<Icon icon={AltArrowRight} />
</Button>
</div>
</div>
src/routes/spaces/[relay]/recent/+page.svelte
+71 -113
View File
@@ -2,125 +2,88 @@
import {onMount} from "svelte"
import {derived} from "svelte/store"
import {page} from "$app/stores"
import {groupBy, ago, WEEK, first, sortBy, now} from "@welshman/lib"
import {MESSAGE, THREAD, ZAP_GOAL, EVENT_TIME, COMMENT, getTagValue} from "@welshman/util"
import {groupBy, ago, MONTH, first, sortBy, uniqBy} from "@welshman/lib"
import {
MESSAGE,
THREAD,
ZAP_GOAL,
EVENT_TIME,
COMMENT,
getTagValue,
getTagValues,
getIdAndAddress,
} from "@welshman/util"
import type {TrustedEvent} from "@welshman/util"
import {repository} from "@welshman/app"
import History from "@assets/icons/history.svg?dataurl"
import Add from "@assets/icons/add.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
import {createScroller} from "@lib/html"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Link from "@lib/components/Link.svelte"
import PageBar from "@lib/components/PageBar.svelte"
import PageContent from "@lib/components/PageContent.svelte"
import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
import ConversationCard from "@app/components/ConversationCard.svelte"
import ThreadCard from "@app/components/ThreadCard.svelte"
import GoalCard from "@app/components/GoalCard.svelte"
import CalendarEventCard from "@app/components/CalendarEventCard.svelte"
import CommentCard from "@app/components/CommentCard.svelte"
import {decodeRelay, deriveEventsForUrl} from "@app/core/state"
import {goToSpace} from "@app/util/routes"
import NoteItem from "@app/components/NoteItem.svelte"
import RecentConversation from "@app/components/RecentConversation.svelte"
import {decodeRelay, deriveEventsForUrl, CONTENT_KINDS} from "@app/core/state"
import {makeThreadPath, makeCalendarPath, makeGoalPath} from "@app/util/routes"
const url = decodeRelay($page.params.relay!)
const since = ago(WEEK)
const currentTime = now()
const since = ago(MONTH)
const messages = deriveEventsForUrl(url, [{kinds: [MESSAGE], since}])
const threads = deriveEventsForUrl(url, [{kinds: [THREAD], since}])
const goals = deriveEventsForUrl(url, [{kinds: [ZAP_GOAL], since}])
const events = deriveEventsForUrl(url, [{kinds: [EVENT_TIME]}])
const content = deriveEventsForUrl(url, [{kinds: CONTENT_KINDS, since}])
const comments = deriveEventsForUrl(url, [{kinds: [COMMENT], since}])
const recentActivity = derived(
[messages, threads, goals, events, comments],
([$messages, $threads, $goals, $events, $comments]) => {
[messages, content, comments],
([$messages, $content, $comments]) => {
const activity: Array<{
type: "message" | "thread" | "goal" | "event" | "upcoming" | "comment"
event: any
type: "message" | "content"
event: TrustedEvent
count: number
timestamp: number
h?: string
latest?: any
count?: number
replyCount?: number
}> = []
const byRoom = groupBy(e => getTagValue("h", e.tags), $messages)
for (const [h, roomMessages] of byRoom.entries()) {
for (const roomMessages of byRoom.values()) {
const latest = first(roomMessages)
if (latest) {
activity.push({
type: "message",
event: latest,
timestamp: latest.created_at,
h,
latest,
count: roomMessages.length,
timestamp: latest.created_at,
})
}
}
for (const thread of $threads) {
const replies = $comments.filter(c => getTagValue("E", c.tags) === thread.id)
activity.push({
type: "thread",
event: thread,
timestamp: thread.created_at,
h: getTagValue("h", thread.tags),
replyCount: replies.length,
})
const latestActivityByKey = new Map<string, number>()
for (const event of $content) {
for (const k of getIdAndAddress(event)) {
latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
}
}
for (const goal of $goals) {
const replies = $comments.filter(c => getTagValue("E", c.tags) === goal.id)
activity.push({
type: "goal",
event: goal,
timestamp: goal.created_at,
h: getTagValue("h", goal.tags),
replyCount: replies.length,
})
for (const event of $comments) {
for (const k of getTagValues(["E", "A"], event.tags)) {
latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
}
}
const pastEvents = $events.filter(e => {
const start = getTagValue("start", e.tags)
return start && parseInt(start) < currentTime
})
for (const event of pastEvents.slice(0, 5)) {
const replies = $comments.filter(c => getTagValue("E", c.tags) === event.id)
activity.push({
type: "event",
event,
timestamp: event.created_at,
h: getTagValue("h", event.tags),
replyCount: replies.length,
})
for (const [address, timestamp] of latestActivityByKey.entries()) {
const event = repository.getEvent(address)
if (event) {
activity.push({type: "content", event, timestamp, count: 1})
}
}
const upcomingEvents = $events.filter(e => {
const start = getTagValue("start", e.tags)
return start && parseInt(start) >= currentTime
})
for (const event of upcomingEvents.slice(0, 3)) {
const replies = $comments.filter(c => getTagValue("E", c.tags) === event.id)
const start = getTagValue("start", event.tags)
activity.push({
type: "upcoming",
event,
timestamp: start ? parseInt(start) : event.created_at,
h: getTagValue("h", event.tags),
replyCount: replies.length,
})
}
for (const comment of $comments) {
activity.push({
type: "comment",
event: comment,
timestamp: comment.created_at,
h: getTagValue("h", comment.tags),
})
}
return sortBy(a => -a.timestamp, activity)
return sortBy(
a => -a.timestamp,
uniqBy(a => a.event.id, activity),
)
},
)
@@ -158,35 +121,30 @@
<div bind:this={element}>
<PageContent class="flex flex-col gap-2 p-2 pt-4">
{#if $recentActivity.length === 0}
<div class="flex flex-col items-center gap-4 py-12 text-center">
<Icon icon={History} class="h-16 w-16 opacity-30" />
<div class="flex flex-col gap-2">
<h3 class="text-lg font-semibold">No Recent Activity</h3>
<p class="opacity-70">There hasn't been any activity in the last week.</p>
</div>
<div class="flex flex-col gap-2">
<Button class="btn-primary" onclick={() => goToSpace(url)}>
<Icon icon={Add} />
Browse Rooms
</Button>
</div>
</div>
<p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
{:else}
{#each $recentActivity.slice(0, limit) as activity (activity.event.id)}
{#if activity.type === "message"}
<ConversationCard
{url}
h={activity.h}
latest={activity.latest}
count={activity.count || 0} />
{:else if activity.type === "thread"}
<ThreadCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
{:else if activity.type === "goal"}
<GoalCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
{:else if activity.type === "event" || activity.type === "upcoming"}
<CalendarEventCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
{:else if activity.type === "comment"}
<CommentCard {url} event={activity.event} />
{#each $recentActivity.slice(0, limit) as { type, event, count = 0 } (event.id)}
{#if type === "message"}
<RecentConversation {url} {event} {count} />
{:else}
<NoteItem {url} {event}>
{#if event.kind === THREAD}
<Link href={makeThreadPath(url, event.id)} class="btn btn-primary btn-sm">
View Thread
<Icon icon={AltArrowRight} />
</Link>
{:else if event.kind === ZAP_GOAL}
<Link href={makeGoalPath(url, event.id)} class="btn btn-primary btn-sm">
View Goal
<Icon icon={AltArrowRight} />
</Link>
{:else if event.kind === EVENT_TIME}
<Link href={makeCalendarPath(url, event.id)} class="btn btn-primary btn-sm">
View Event
<Icon icon={AltArrowRight} />
</Link>
{/if}
</NoteItem>
{/if}
{/each}
{/if}