|
|
|
@ -1,12 +1,16 @@ |
|
|
|
<script lang="ts"> |
|
|
|
<script lang="ts"> |
|
|
|
import { nostrClient } from '../../services/nostr/nostr-client.js'; |
|
|
|
import { nostrClient } from '../../services/nostr/nostr-client.js'; |
|
|
|
import { relayManager } from '../../services/nostr/relay-manager.js'; |
|
|
|
import { relayManager } from '../../services/nostr/relay-manager.js'; |
|
|
|
import { onMount } from 'svelte'; |
|
|
|
|
|
|
|
import FeedPost from '../feed/FeedPost.svelte'; |
|
|
|
import FeedPost from '../feed/FeedPost.svelte'; |
|
|
|
import ThreadDrawer from '../feed/ThreadDrawer.svelte'; |
|
|
|
import ThreadDrawer from '../feed/ThreadDrawer.svelte'; |
|
|
|
import type { NostrEvent } from '../../types/nostr.js'; |
|
|
|
import type { NostrEvent } from '../../types/nostr.js'; |
|
|
|
|
|
|
|
|
|
|
|
let threads = $state<NostrEvent[]>([]); |
|
|
|
// Data maps - all data loaded upfront |
|
|
|
|
|
|
|
let threadsMap = $state<Map<string, NostrEvent>>(new Map()); // threadId -> thread |
|
|
|
|
|
|
|
let reactionsMap = $state<Map<string, NostrEvent[]>>(new Map()); // threadId -> reactions[] |
|
|
|
|
|
|
|
let zapReceiptsMap = $state<Map<string, NostrEvent[]>>(new Map()); // threadId -> zapReceipts[] |
|
|
|
|
|
|
|
let commentsMap = $state<Map<string, NostrEvent[]>>(new Map()); // threadId -> comments[] |
|
|
|
|
|
|
|
|
|
|
|
let loading = $state(true); |
|
|
|
let loading = $state(true); |
|
|
|
let sortBy = $state<'newest' | 'active' | 'upvoted'>('newest'); |
|
|
|
let sortBy = $state<'newest' | 'active' | 'upvoted'>('newest'); |
|
|
|
let showOlder = $state(false); |
|
|
|
let showOlder = $state(false); |
|
|
|
@ -16,30 +20,18 @@ |
|
|
|
let drawerOpen = $state(false); |
|
|
|
let drawerOpen = $state(false); |
|
|
|
let selectedEvent = $state<NostrEvent | null>(null); |
|
|
|
let selectedEvent = $state<NostrEvent | null>(null); |
|
|
|
|
|
|
|
|
|
|
|
$effect(() => { |
|
|
|
// Computed: get sorted and filtered threads from maps |
|
|
|
loadThreads(); |
|
|
|
let threads = $derived.by(() => { |
|
|
|
|
|
|
|
const allThreads = Array.from(threadsMap.values()); |
|
|
|
|
|
|
|
const sorted = sortThreadsFromMaps(allThreads, sortBy); |
|
|
|
|
|
|
|
return sorted; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// Re-sort threads when sortBy changes (but not when threads changes) |
|
|
|
|
|
|
|
let lastSortBy = $state<'newest' | 'active' | 'upvoted' | null>(null); |
|
|
|
|
|
|
|
$effect(() => { |
|
|
|
$effect(() => { |
|
|
|
// Only re-sort if sortBy actually changed |
|
|
|
loadAllData(); |
|
|
|
if (sortBy !== lastSortBy && threads.length > 0 && !loading) { |
|
|
|
|
|
|
|
lastSortBy = sortBy; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (sortBy === 'newest') { |
|
|
|
|
|
|
|
threads = sortThreadsSync(threads); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// For async sorts, trigger the sort without blocking |
|
|
|
|
|
|
|
// Pass sortBy explicitly to ensure we use the current value |
|
|
|
|
|
|
|
sortThreads(threads, sortBy).then(sorted => { |
|
|
|
|
|
|
|
threads = sorted; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
async function loadThreads() { |
|
|
|
async function loadAllData() { |
|
|
|
loading = true; |
|
|
|
loading = true; |
|
|
|
try { |
|
|
|
try { |
|
|
|
const config = nostrClient.getConfig(); |
|
|
|
const config = nostrClient.getConfig(); |
|
|
|
@ -47,117 +39,282 @@ |
|
|
|
? undefined |
|
|
|
? undefined |
|
|
|
: Math.floor(Date.now() / 1000) - config.threadTimeoutDays * 86400; |
|
|
|
: Math.floor(Date.now() / 1000) - config.threadTimeoutDays * 86400; |
|
|
|
|
|
|
|
|
|
|
|
// Fetch with cache-first, background refresh |
|
|
|
const threadRelays = relayManager.getThreadReadRelays(); |
|
|
|
// onUpdate callback will refresh the UI when new data arrives |
|
|
|
const commentRelays = relayManager.getCommentReadRelays(); |
|
|
|
const relays = relayManager.getThreadReadRelays(); |
|
|
|
// Use getProfileReadRelays() for reactions to include defaultRelays + profileRelays + user inbox + localRelays |
|
|
|
const events = await nostrClient.fetchEvents( |
|
|
|
// This ensures we get all reactions from the complete relay set |
|
|
|
|
|
|
|
const reactionRelays = relayManager.getProfileReadRelays(); |
|
|
|
|
|
|
|
const zapRelays = relayManager.getZapReceiptReadRelays(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch all threads |
|
|
|
|
|
|
|
const threadEvents = await nostrClient.fetchEvents( |
|
|
|
[{ kinds: [11], since, limit: 50 }], |
|
|
|
[{ kinds: [11], since, limit: 50 }], |
|
|
|
relays, |
|
|
|
threadRelays, |
|
|
|
{ |
|
|
|
{ |
|
|
|
useCache: true, |
|
|
|
useCache: true, |
|
|
|
cacheResults: true, |
|
|
|
cacheResults: true, |
|
|
|
onUpdate: async (updatedEvents) => { |
|
|
|
onUpdate: async (updatedEvents) => { |
|
|
|
// Update threads when fresh data arrives from relays |
|
|
|
// Update threads map when fresh data arrives |
|
|
|
// Pass sortBy explicitly to ensure we use the current value |
|
|
|
for (const event of updatedEvents) { |
|
|
|
threads = await sortThreads(updatedEvents, sortBy); |
|
|
|
threadsMap.set(event.id, event); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
// Set initial cached data immediately using current sortBy value |
|
|
|
// Build threads map |
|
|
|
// Capture sortBy at this point to ensure we use the correct value |
|
|
|
const newThreadsMap = new Map<string, NostrEvent>(); |
|
|
|
const currentSort = sortBy; |
|
|
|
for (const event of threadEvents) { |
|
|
|
if (currentSort === 'newest') { |
|
|
|
newThreadsMap.set(event.id, event); |
|
|
|
threads = sortThreadsSync(events); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// Pass sortBy explicitly to ensure we use the current value |
|
|
|
|
|
|
|
threads = await sortThreads(events, currentSort); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// Update lastSortBy to match current sort so effect doesn't re-trigger |
|
|
|
threadsMap = newThreadsMap; |
|
|
|
lastSortBy = currentSort; |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.error('Error loading threads:', error); |
|
|
|
|
|
|
|
threads = []; // Set empty array on error to prevent undefined issues |
|
|
|
|
|
|
|
} finally { |
|
|
|
|
|
|
|
loading = false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function sortThreadsSync(events: NostrEvent[]): NostrEvent[] { |
|
|
|
// Get all thread IDs |
|
|
|
// Synchronous version for 'newest' sorting |
|
|
|
const threadIds = Array.from(newThreadsMap.keys()); |
|
|
|
return [...events].sort((a, b) => b.created_at - a.created_at); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function sortThreads(events: NostrEvent[], sortType: 'newest' | 'active' | 'upvoted' = sortBy): Promise<NostrEvent[]> { |
|
|
|
if (threadIds.length > 0) { |
|
|
|
switch (sortType) { |
|
|
|
// Fetch all comments in parallel |
|
|
|
case 'newest': |
|
|
|
|
|
|
|
return sortThreadsSync(events); |
|
|
|
|
|
|
|
case 'active': |
|
|
|
|
|
|
|
// Sort by most recent activity (comments, reactions, or zaps) |
|
|
|
|
|
|
|
// Thread bumping: active threads rise to top |
|
|
|
|
|
|
|
// Batch fetch all comments and reactions at once to avoid concurrent request issues |
|
|
|
|
|
|
|
const threadIds = events.map(e => e.id); |
|
|
|
|
|
|
|
const commentRelays = relayManager.getCommentReadRelays(); |
|
|
|
|
|
|
|
const reactionRelays = relayManager.getThreadReadRelays(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Batch fetch all comments for all threads |
|
|
|
|
|
|
|
const allComments = await nostrClient.fetchEvents( |
|
|
|
const allComments = await nostrClient.fetchEvents( |
|
|
|
[{ kinds: [1111], '#E': threadIds, '#K': ['11'] }], |
|
|
|
[{ kinds: [1111], '#E': threadIds, '#K': ['11'] }], |
|
|
|
commentRelays, |
|
|
|
commentRelays, |
|
|
|
{ useCache: true } |
|
|
|
{ useCache: true } |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch all reactions in parallel |
|
|
|
|
|
|
|
// Note: Some relays reject '#E' filter, so we only use '#e' and handle both cases in grouping |
|
|
|
|
|
|
|
// Use onUpdate to handle real-time reaction updates |
|
|
|
|
|
|
|
const allReactionsMap = new Map<string, NostrEvent>(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Function to process and group reactions (called initially and on updates) |
|
|
|
|
|
|
|
const processReactionUpdates = async () => { |
|
|
|
|
|
|
|
const allReactions = Array.from(allReactionsMap.values()); |
|
|
|
|
|
|
|
console.log('[ThreadList] Processing reaction updates, total reactions:', allReactions.length); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (allReactions.length === 0) return; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch deletion events for current reactions |
|
|
|
|
|
|
|
const deletionEvents = await nostrClient.fetchEvents( |
|
|
|
|
|
|
|
[{ kinds: [5], authors: Array.from(new Set(allReactions.map(r => r.pubkey))) }], |
|
|
|
|
|
|
|
reactionRelays, |
|
|
|
|
|
|
|
{ useCache: true } |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Build deleted reaction IDs map |
|
|
|
|
|
|
|
const deletedReactionIdsByPubkey = new Map<string, Set<string>>(); |
|
|
|
|
|
|
|
for (const deletionEvent of deletionEvents) { |
|
|
|
|
|
|
|
const pubkey = deletionEvent.pubkey; |
|
|
|
|
|
|
|
if (!deletedReactionIdsByPubkey.has(pubkey)) { |
|
|
|
|
|
|
|
deletedReactionIdsByPubkey.set(pubkey, new Set()); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
for (const tag of deletionEvent.tags) { |
|
|
|
|
|
|
|
if (tag[0] === 'e' && tag[1]) { |
|
|
|
|
|
|
|
deletedReactionIdsByPubkey.get(pubkey)!.add(tag[1]); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Batch fetch all reactions for all threads |
|
|
|
// Rebuild reactions map |
|
|
|
const allReactions = await nostrClient.fetchEvents( |
|
|
|
const updatedReactionsMap = new Map<string, NostrEvent[]>(); |
|
|
|
|
|
|
|
for (const reaction of allReactions) { |
|
|
|
|
|
|
|
const deletedIds = deletedReactionIdsByPubkey.get(reaction.pubkey); |
|
|
|
|
|
|
|
if (deletedIds && deletedIds.has(reaction.id)) { |
|
|
|
|
|
|
|
continue; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const threadId = reaction.tags.find(t => { |
|
|
|
|
|
|
|
const tagName = t[0]; |
|
|
|
|
|
|
|
return (tagName === 'e' || tagName === 'E') && t[1]; |
|
|
|
|
|
|
|
})?.[1]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (threadId && newThreadsMap.has(threadId)) { |
|
|
|
|
|
|
|
if (!updatedReactionsMap.has(threadId)) { |
|
|
|
|
|
|
|
updatedReactionsMap.set(threadId, []); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
updatedReactionsMap.get(threadId)!.push(reaction); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
reactionsMap = updatedReactionsMap; |
|
|
|
|
|
|
|
console.log('[ThreadList] Updated reactions map:', { |
|
|
|
|
|
|
|
threadCounts: Array.from(updatedReactionsMap.entries()).map(([threadId, reactions]) => ({ |
|
|
|
|
|
|
|
threadId: threadId.substring(0, 16) + '...', |
|
|
|
|
|
|
|
count: reactions.length, |
|
|
|
|
|
|
|
upvotes: reactions.filter(r => { |
|
|
|
|
|
|
|
const content = r.content.trim(); |
|
|
|
|
|
|
|
return content === '+' || content === '⬆️' || content === '↑'; |
|
|
|
|
|
|
|
}).length, |
|
|
|
|
|
|
|
reactionEvents: reactions.map(r => ({ |
|
|
|
|
|
|
|
id: r.id.substring(0, 16) + '...', |
|
|
|
|
|
|
|
pubkey: r.pubkey.substring(0, 16) + '...', |
|
|
|
|
|
|
|
content: r.content, |
|
|
|
|
|
|
|
fullEvent: r |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleReactionUpdate = async (updated: NostrEvent[]) => { |
|
|
|
|
|
|
|
console.log('[ThreadList] Received reaction update:', { |
|
|
|
|
|
|
|
count: updated.length, |
|
|
|
|
|
|
|
events: updated.map(r => ({ |
|
|
|
|
|
|
|
id: r.id.substring(0, 16) + '...', |
|
|
|
|
|
|
|
pubkey: r.pubkey.substring(0, 16) + '...', |
|
|
|
|
|
|
|
content: r.content, |
|
|
|
|
|
|
|
tags: r.tags.filter(t => t[0] === 'e' || t[0] === 'E'), |
|
|
|
|
|
|
|
fullEvent: r |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
for (const r of updated) { |
|
|
|
|
|
|
|
allReactionsMap.set(r.id, r); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// Reprocess reactions when updates arrive |
|
|
|
|
|
|
|
await processReactionUpdates(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const reactionsWithLowerE = await nostrClient.fetchEvents( |
|
|
|
[{ kinds: [7], '#e': threadIds }], |
|
|
|
[{ kinds: [7], '#e': threadIds }], |
|
|
|
reactionRelays, |
|
|
|
reactionRelays, |
|
|
|
{ useCache: true } |
|
|
|
{ |
|
|
|
); |
|
|
|
useCache: true, |
|
|
|
|
|
|
|
onUpdate: handleReactionUpdate |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Try uppercase filter, but some relays reject it - that's okay |
|
|
|
|
|
|
|
let reactionsWithUpperE: NostrEvent[] = []; |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
reactionsWithUpperE = await nostrClient.fetchEvents( |
|
|
|
|
|
|
|
[{ kinds: [7], '#E': threadIds }], |
|
|
|
|
|
|
|
reactionRelays, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
useCache: true, |
|
|
|
|
|
|
|
onUpdate: handleReactionUpdate |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.log('[ThreadList] Upper case #E filter rejected by relay (this is normal):', error); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('[ThreadList] Reactions fetched:', { |
|
|
|
|
|
|
|
withLowerE: reactionsWithLowerE.length, |
|
|
|
|
|
|
|
withUpperE: reactionsWithUpperE.length, |
|
|
|
|
|
|
|
lowerE_events: reactionsWithLowerE, |
|
|
|
|
|
|
|
upperE_events: reactionsWithUpperE |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// Group comments and reactions by thread ID |
|
|
|
// Combine and deduplicate by reaction ID |
|
|
|
const commentsByThread = new Map<string, NostrEvent[]>(); |
|
|
|
for (const r of reactionsWithLowerE) { |
|
|
|
const reactionsByThread = new Map<string, NostrEvent[]>(); |
|
|
|
allReactionsMap.set(r.id, r); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
for (const r of reactionsWithUpperE) { |
|
|
|
|
|
|
|
allReactionsMap.set(r.id, r); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const allReactions = Array.from(allReactionsMap.values()); |
|
|
|
|
|
|
|
console.log('[ThreadList] All reactions (deduplicated):', { |
|
|
|
|
|
|
|
total: allReactions.length, |
|
|
|
|
|
|
|
events: allReactions.map(r => ({ |
|
|
|
|
|
|
|
id: r.id.substring(0, 16) + '...', |
|
|
|
|
|
|
|
pubkey: r.pubkey.substring(0, 16) + '...', |
|
|
|
|
|
|
|
content: r.content, |
|
|
|
|
|
|
|
tags: r.tags.filter(t => t[0] === 'e' || t[0] === 'E'), |
|
|
|
|
|
|
|
created_at: new Date(r.created_at * 1000).toISOString() |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch all zap receipts in parallel |
|
|
|
|
|
|
|
const allZapReceipts = await nostrClient.fetchEvents( |
|
|
|
|
|
|
|
[{ kinds: [9735], '#e': threadIds }], |
|
|
|
|
|
|
|
zapRelays, |
|
|
|
|
|
|
|
{ useCache: true } |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Build maps |
|
|
|
|
|
|
|
const newCommentsMap = new Map<string, NostrEvent[]>(); |
|
|
|
|
|
|
|
let newReactionsMap = new Map<string, NostrEvent[]>(); |
|
|
|
|
|
|
|
const newZapReceiptsMap = new Map<string, NostrEvent[]>(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Process initial reactions (this will set newReactionsMap) |
|
|
|
|
|
|
|
await processReactionUpdates(); |
|
|
|
|
|
|
|
newReactionsMap = reactionsMap; // Use the processed reactions map |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Group comments by thread ID |
|
|
|
for (const comment of allComments) { |
|
|
|
for (const comment of allComments) { |
|
|
|
const threadId = comment.tags.find(t => t[0] === 'E' || t[0] === 'e')?.[1]; |
|
|
|
const threadId = comment.tags.find(t => t[0] === 'E' || t[0] === 'e')?.[1]; |
|
|
|
if (threadId) { |
|
|
|
if (threadId && newThreadsMap.has(threadId)) { |
|
|
|
if (!commentsByThread.has(threadId)) { |
|
|
|
if (!newCommentsMap.has(threadId)) { |
|
|
|
commentsByThread.set(threadId, []); |
|
|
|
newCommentsMap.set(threadId, []); |
|
|
|
} |
|
|
|
} |
|
|
|
commentsByThread.get(threadId)!.push(comment); |
|
|
|
newCommentsMap.get(threadId)!.push(comment); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
for (const reaction of allReactions) { |
|
|
|
// Reactions are already processed by processReactionUpdates() above |
|
|
|
const threadId = reaction.tags.find(t => t[0] === 'e')?.[1]; |
|
|
|
// newReactionsMap is now set from reactionsMap |
|
|
|
if (threadId) { |
|
|
|
|
|
|
|
if (!reactionsByThread.has(threadId)) { |
|
|
|
// Group zap receipts by thread ID |
|
|
|
reactionsByThread.set(threadId, []); |
|
|
|
for (const zapReceipt of allZapReceipts) { |
|
|
|
|
|
|
|
const threadId = zapReceipt.tags.find(t => t[0] === 'e')?.[1]; |
|
|
|
|
|
|
|
if (threadId && newThreadsMap.has(threadId)) { |
|
|
|
|
|
|
|
if (!newZapReceiptsMap.has(threadId)) { |
|
|
|
|
|
|
|
newZapReceiptsMap.set(threadId, []); |
|
|
|
} |
|
|
|
} |
|
|
|
reactionsByThread.get(threadId)!.push(reaction); |
|
|
|
newZapReceiptsMap.get(threadId)!.push(zapReceipt); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Calculate last activity for each thread |
|
|
|
commentsMap = newCommentsMap; |
|
|
|
|
|
|
|
reactionsMap = newReactionsMap; |
|
|
|
|
|
|
|
zapReceiptsMap = newZapReceiptsMap; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// Clear maps if no threads |
|
|
|
|
|
|
|
commentsMap = new Map(); |
|
|
|
|
|
|
|
reactionsMap = new Map(); |
|
|
|
|
|
|
|
zapReceiptsMap = new Map(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.error('Error loading thread data:', error); |
|
|
|
|
|
|
|
threadsMap = new Map(); |
|
|
|
|
|
|
|
commentsMap = new Map(); |
|
|
|
|
|
|
|
reactionsMap = new Map(); |
|
|
|
|
|
|
|
zapReceiptsMap = new Map(); |
|
|
|
|
|
|
|
} finally { |
|
|
|
|
|
|
|
loading = false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Sort threads from the maps (synchronous, no fetching) |
|
|
|
|
|
|
|
function sortThreadsFromMaps(events: NostrEvent[], sortType: 'newest' | 'active' | 'upvoted'): NostrEvent[] { |
|
|
|
|
|
|
|
switch (sortType) { |
|
|
|
|
|
|
|
case 'newest': |
|
|
|
|
|
|
|
return [...events].sort((a, b) => b.created_at - a.created_at); |
|
|
|
|
|
|
|
case 'active': |
|
|
|
|
|
|
|
// Sort by most recent activity (comments, reactions, or zaps) |
|
|
|
const activeSorted = events.map((event) => { |
|
|
|
const activeSorted = events.map((event) => { |
|
|
|
const comments = commentsByThread.get(event.id) || []; |
|
|
|
const comments = commentsMap.get(event.id) || []; |
|
|
|
const reactions = reactionsByThread.get(event.id) || []; |
|
|
|
const reactions = reactionsMap.get(event.id) || []; |
|
|
|
|
|
|
|
const zapReceipts = zapReceiptsMap.get(event.id) || []; |
|
|
|
|
|
|
|
|
|
|
|
const lastCommentTime = comments.length > 0 |
|
|
|
const lastCommentTime = comments.length > 0 |
|
|
|
? Math.max(...comments.map(c => c.created_at)) |
|
|
|
? Math.max(...comments.map(c => c.created_at)) |
|
|
|
: 0; |
|
|
|
: 0; |
|
|
|
|
|
|
|
|
|
|
|
const lastReactionTime = reactions.length > 0 |
|
|
|
const lastReactionTime = reactions.length > 0 |
|
|
|
? Math.max(...reactions.map(r => r.created_at)) |
|
|
|
? Math.max(...reactions.map(r => r.created_at)) |
|
|
|
: 0; |
|
|
|
: 0; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const lastZapTime = zapReceipts.length > 0 |
|
|
|
|
|
|
|
? Math.max(...zapReceipts.map(z => z.created_at)) |
|
|
|
|
|
|
|
: 0; |
|
|
|
|
|
|
|
|
|
|
|
const lastActivity = Math.max( |
|
|
|
const lastActivity = Math.max( |
|
|
|
event.created_at, |
|
|
|
event.created_at, |
|
|
|
lastCommentTime, |
|
|
|
lastCommentTime, |
|
|
|
lastReactionTime |
|
|
|
lastReactionTime, |
|
|
|
); |
|
|
|
lastZapTime |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
return { event, lastActivity }; |
|
|
|
return { event, lastActivity }; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return activeSorted |
|
|
|
return activeSorted |
|
|
|
@ -165,35 +322,12 @@ |
|
|
|
.map(({ event }) => event); |
|
|
|
.map(({ event }) => event); |
|
|
|
case 'upvoted': |
|
|
|
case 'upvoted': |
|
|
|
// Sort by upvote count |
|
|
|
// Sort by upvote count |
|
|
|
// Batch fetch all reactions at once to avoid concurrent request issues |
|
|
|
|
|
|
|
const allThreadIds = events.map(e => e.id); |
|
|
|
|
|
|
|
const reactionRelaysForUpvotes = relayManager.getThreadReadRelays(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const allReactionsForUpvotes = await nostrClient.fetchEvents( |
|
|
|
|
|
|
|
[{ kinds: [7], '#e': allThreadIds }], |
|
|
|
|
|
|
|
reactionRelaysForUpvotes, |
|
|
|
|
|
|
|
{ useCache: true } |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Group reactions by thread ID |
|
|
|
|
|
|
|
const reactionsByThreadForUpvotes = new Map<string, NostrEvent[]>(); |
|
|
|
|
|
|
|
for (const reaction of allReactionsForUpvotes) { |
|
|
|
|
|
|
|
const threadId = reaction.tags.find(t => t[0] === 'e')?.[1]; |
|
|
|
|
|
|
|
if (threadId) { |
|
|
|
|
|
|
|
if (!reactionsByThreadForUpvotes.has(threadId)) { |
|
|
|
|
|
|
|
reactionsByThreadForUpvotes.set(threadId, []); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
reactionsByThreadForUpvotes.get(threadId)!.push(reaction); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Calculate upvote count for each thread |
|
|
|
|
|
|
|
const upvotedSorted = events.map((event) => { |
|
|
|
const upvotedSorted = events.map((event) => { |
|
|
|
const reactions = reactionsByThreadForUpvotes.get(event.id) || []; |
|
|
|
const reactions = reactionsMap.get(event.id) || []; |
|
|
|
const upvoteCount = reactions.filter( |
|
|
|
const upvoteCount = reactions.filter( |
|
|
|
(r) => r.content.trim() === '+' || r.content.trim() === '⬆️' || r.content.trim() === '↑' |
|
|
|
(r) => r.content.trim() === '+' || r.content.trim() === '⬆️' || r.content.trim() === '↑' |
|
|
|
).length; |
|
|
|
).length; |
|
|
|
return { event, upvotes: upvoteCount }; |
|
|
|
return { event, upvotes: upvoteCount }; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return upvotedSorted |
|
|
|
return upvotedSorted |
|
|
|
@ -204,6 +338,39 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* Filter threads by age (30 days) |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
function filterByAge(events: NostrEvent[]): NostrEvent[] { |
|
|
|
|
|
|
|
if (showOlder) { |
|
|
|
|
|
|
|
return events; // Show all threads if "show older" is checked |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const config = nostrClient.getConfig(); |
|
|
|
|
|
|
|
const cutoffTime = Math.floor(Date.now() / 1000) - config.threadTimeoutDays * 86400; |
|
|
|
|
|
|
|
return events.filter((t) => t.created_at >= cutoffTime); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Get filtered threads (by age and topic) - reactive derived value |
|
|
|
|
|
|
|
let filteredThreads = $derived.by(() => { |
|
|
|
|
|
|
|
let filtered = threads; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Filter by age first |
|
|
|
|
|
|
|
filtered = filterByAge(filtered); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Then filter by topic |
|
|
|
|
|
|
|
// selectedTopic === null means "All" - show all threads |
|
|
|
|
|
|
|
if (selectedTopic === null) { |
|
|
|
|
|
|
|
return filtered; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// selectedTopic === undefined means "General" - show threads without topics |
|
|
|
|
|
|
|
if (selectedTopic === undefined) { |
|
|
|
|
|
|
|
return filtered.filter((t) => !t.tags.some((tag) => tag[0] === 't')); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// selectedTopic is a string - show threads with that topic |
|
|
|
|
|
|
|
return filtered.filter((t) => t.tags.some((tag) => tag[0] === 't' && tag[1] === selectedTopic)); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
function getTopics(): string[] { |
|
|
|
function getTopics(): string[] { |
|
|
|
const topicSet = new Set<string>(); |
|
|
|
const topicSet = new Set<string>(); |
|
|
|
// Use age-filtered threads for topic extraction |
|
|
|
// Use age-filtered threads for topic extraction |
|
|
|
@ -238,48 +405,6 @@ |
|
|
|
return result; |
|
|
|
return result; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* Filter threads by age (30 days) |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
function filterByAge(events: NostrEvent[]): NostrEvent[] { |
|
|
|
|
|
|
|
if (showOlder) { |
|
|
|
|
|
|
|
return events; // Show all threads if "show older" is checked |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const config = nostrClient.getConfig(); |
|
|
|
|
|
|
|
const cutoffTime = Math.floor(Date.now() / 1000) - config.threadTimeoutDays * 86400; |
|
|
|
|
|
|
|
return events.filter((t) => t.created_at >= cutoffTime); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getFilteredThreads(): NostrEvent[] { |
|
|
|
|
|
|
|
let filtered = threads; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Filter by age first |
|
|
|
|
|
|
|
filtered = filterByAge(filtered); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Then filter by topic |
|
|
|
|
|
|
|
// selectedTopic === null means "All" - show all threads (handled in template) |
|
|
|
|
|
|
|
// selectedTopic === undefined means "General" - show threads without topics |
|
|
|
|
|
|
|
if (selectedTopic === undefined) { |
|
|
|
|
|
|
|
return filtered.filter((t) => !t.tags.some((tag) => tag[0] === 't')); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// selectedTopic is a string - show threads with that topic |
|
|
|
|
|
|
|
return filtered.filter((t) => t.tags.some((tag) => tag[0] === 't' && tag[1] === selectedTopic)); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getThreadsByTopic(topic: string | null): NostrEvent[] { |
|
|
|
|
|
|
|
let filtered = threads; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Filter by age first |
|
|
|
|
|
|
|
filtered = filterByAge(filtered); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Then filter by topic |
|
|
|
|
|
|
|
if (topic === null) { |
|
|
|
|
|
|
|
return filtered.filter((t) => !t.tags.some((tag) => tag[0] === 't')); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return filtered.filter((t) => t.tags.some((tag) => tag[0] === 't' && tag[1] === topic)); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function openThreadDrawer(event: NostrEvent, e?: MouseEvent) { |
|
|
|
function openThreadDrawer(event: NostrEvent, e?: MouseEvent) { |
|
|
|
// Don't open drawer if clicking on interactive elements |
|
|
|
// Don't open drawer if clicking on interactive elements |
|
|
|
if (e) { |
|
|
|
if (e) { |
|
|
|
@ -299,45 +424,45 @@ |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<div class="thread-list"> |
|
|
|
<div class="thread-list"> |
|
|
|
|
|
|
|
<!-- Top row: Sorting and Show Older checkbox --> |
|
|
|
<div class="controls mb-4 flex gap-4 items-center flex-wrap"> |
|
|
|
<div class="controls mb-4 flex gap-4 items-center flex-wrap"> |
|
|
|
<label class="text-fog-text dark:text-fog-dark-text"> |
|
|
|
<select |
|
|
|
|
|
|
|
bind:value={sortBy} |
|
|
|
|
|
|
|
class="border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text px-2 py-1 rounded" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<option value="newest">Newest</option> |
|
|
|
|
|
|
|
<option value="active">Most Active</option> |
|
|
|
|
|
|
|
<option value="upvoted">Most Upvoted</option> |
|
|
|
|
|
|
|
</select> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="text-fog-text dark:text-fog-dark-text flex items-center gap-2"> |
|
|
|
<input |
|
|
|
<input |
|
|
|
type="checkbox" |
|
|
|
type="checkbox" |
|
|
|
bind:checked={showOlder} |
|
|
|
bind:checked={showOlder} |
|
|
|
onchange={() => { |
|
|
|
onchange={() => { |
|
|
|
// If showing older threads, reload to fetch them |
|
|
|
// If showing older threads, reload to fetch them |
|
|
|
// If hiding older threads, just filter client-side (no reload needed) |
|
|
|
|
|
|
|
if (showOlder) { |
|
|
|
if (showOlder) { |
|
|
|
loadThreads(); |
|
|
|
loadAllData(); |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
}} |
|
|
|
class="mr-2" |
|
|
|
|
|
|
|
/> |
|
|
|
/> |
|
|
|
Show older threads |
|
|
|
Show older posts (than 30 days) |
|
|
|
</label> |
|
|
|
</label> |
|
|
|
<select bind:value={sortBy} class="border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text px-2 py-1 rounded"> |
|
|
|
|
|
|
|
<option value="newest">Newest</option> |
|
|
|
|
|
|
|
<option value="active">Most Active</option> |
|
|
|
|
|
|
|
<option value="upvoted">Most Upvoted</option> |
|
|
|
|
|
|
|
</select> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{#if loading} |
|
|
|
<!-- Filter by topic buttons --> |
|
|
|
<p class="text-fog-text dark:text-fog-dark-text">Loading threads...</p> |
|
|
|
<div class="mb-6"> |
|
|
|
{:else} |
|
|
|
<div class="flex flex-wrap gap-2 items-center"> |
|
|
|
<!-- Topic Filter --> |
|
|
|
<span class="text-sm font-semibold text-fog-text dark:text-fog-dark-text mr-2">Filter by topic:</span> |
|
|
|
<div class="mb-6"> |
|
|
|
<button |
|
|
|
<div class="flex flex-wrap gap-2 items-center"> |
|
|
|
onclick={() => (selectedTopic = null)} |
|
|
|
<span class="text-sm font-semibold text-fog-text dark:text-fog-dark-text mr-2">Filter by topic:</span> |
|
|
|
class="px-3 py-1 rounded border transition-colors {selectedTopic === null |
|
|
|
<button |
|
|
|
? 'bg-fog-accent dark:bg-fog-dark-accent text-white border-fog-accent dark:border-fog-dark-accent' |
|
|
|
onclick={() => (selectedTopic = null)} |
|
|
|
: 'bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text border-fog-border dark:border-fog-dark-border hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight'}" |
|
|
|
class="px-3 py-1 rounded border transition-colors {selectedTopic === null |
|
|
|
> |
|
|
|
? 'bg-fog-accent dark:bg-fog-dark-accent text-white border-fog-accent dark:border-fog-dark-accent' |
|
|
|
All ({filterByAge(threads).length}) |
|
|
|
: 'bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text border-fog-border dark:border-fog-dark-border hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight'}" |
|
|
|
</button> |
|
|
|
> |
|
|
|
{#each getTopicsWithCounts() as { topic, count }} |
|
|
|
All ({filterByAge(threads).length}) |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
{#each getTopicsWithCounts() as { topic, count }} |
|
|
|
|
|
|
|
<button |
|
|
|
<button |
|
|
|
onclick={() => (selectedTopic = topic === null ? undefined : topic)} |
|
|
|
onclick={() => (selectedTopic = topic === null ? undefined : topic)} |
|
|
|
class="px-3 py-1 rounded border transition-colors {selectedTopic === (topic === null ? undefined : topic) |
|
|
|
class="px-3 py-1 rounded border transition-colors {selectedTopic === (topic === null ? undefined : topic) |
|
|
|
@ -346,78 +471,38 @@ |
|
|
|
> |
|
|
|
> |
|
|
|
{topic === null ? 'General' : topic} ({count}) |
|
|
|
{topic === null ? 'General' : topic} ({count}) |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
{/each} |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Threads Display --> |
|
|
|
<!-- Thread list --> |
|
|
|
|
|
|
|
{#if loading} |
|
|
|
|
|
|
|
<p class="text-fog-text dark:text-fog-dark-text">Loading threads...</p> |
|
|
|
|
|
|
|
{:else} |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
{#if selectedTopic === null} |
|
|
|
{#each filteredThreads as thread} |
|
|
|
<!-- Show all threads grouped by topic --> |
|
|
|
<div |
|
|
|
<h2 class="text-xl font-bold mb-4 text-fog-text dark:text-fog-dark-text">General</h2> |
|
|
|
data-thread-id={thread.id} |
|
|
|
{#each getThreadsByTopic(null) as thread} |
|
|
|
class="thread-wrapper" |
|
|
|
<div |
|
|
|
onclick={(e) => openThreadDrawer(thread, e)} |
|
|
|
data-thread-id={thread.id} |
|
|
|
role="button" |
|
|
|
class="thread-wrapper" |
|
|
|
tabindex="0" |
|
|
|
onclick={(e) => openThreadDrawer(thread, e)} |
|
|
|
onkeydown={(e) => { |
|
|
|
role="button" |
|
|
|
if (e.key === 'Enter' || e.key === ' ') { |
|
|
|
tabindex="0" |
|
|
|
e.preventDefault(); |
|
|
|
onkeydown={(e) => { |
|
|
|
openThreadDrawer(thread); |
|
|
|
if (e.key === 'Enter' || e.key === ' ') { |
|
|
|
} |
|
|
|
e.preventDefault(); |
|
|
|
}} |
|
|
|
openThreadDrawer(thread); |
|
|
|
> |
|
|
|
} |
|
|
|
<FeedPost |
|
|
|
}} |
|
|
|
post={thread} |
|
|
|
> |
|
|
|
previewMode={true} |
|
|
|
<FeedPost post={thread} previewMode={true} /> |
|
|
|
reactions={reactionsMap.get(thread.id) || []} |
|
|
|
</div> |
|
|
|
/> |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
|
|
|
|
{/each} |
|
|
|
{#each getTopics() as topic} |
|
|
|
{#if filteredThreads.length === 0} |
|
|
|
<h2 class="text-xl font-bold mb-4 mt-8 text-fog-text dark:text-fog-dark-text">{topic}</h2> |
|
|
|
<p class="text-fog-text-light dark:text-fog-dark-text-light">No threads found.</p> |
|
|
|
{#each getThreadsByTopic(topic) as thread} |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
data-thread-id={thread.id} |
|
|
|
|
|
|
|
class="thread-wrapper" |
|
|
|
|
|
|
|
onclick={(e) => openThreadDrawer(thread, e)} |
|
|
|
|
|
|
|
role="button" |
|
|
|
|
|
|
|
tabindex="0" |
|
|
|
|
|
|
|
onkeydown={(e) => { |
|
|
|
|
|
|
|
if (e.key === 'Enter' || e.key === ' ') { |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
openThreadDrawer(thread); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<FeedPost post={thread} previewMode={true} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{/each} |
|
|
|
|
|
|
|
{/each} |
|
|
|
|
|
|
|
{:else} |
|
|
|
|
|
|
|
<!-- Show filtered threads --> |
|
|
|
|
|
|
|
<h2 class="text-xl font-bold mb-4 text-fog-text dark:text-fog-dark-text"> |
|
|
|
|
|
|
|
{selectedTopic === undefined ? 'General' : selectedTopic} |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
{#each getFilteredThreads() as thread} |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
data-thread-id={thread.id} |
|
|
|
|
|
|
|
class="thread-wrapper" |
|
|
|
|
|
|
|
onclick={(e) => openThreadDrawer(thread, e)} |
|
|
|
|
|
|
|
role="button" |
|
|
|
|
|
|
|
tabindex="0" |
|
|
|
|
|
|
|
onkeydown={(e) => { |
|
|
|
|
|
|
|
if (e.key === 'Enter' || e.key === ' ') { |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
openThreadDrawer(thread); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<FeedPost post={thread} previewMode={true} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{/each} |
|
|
|
|
|
|
|
{#if getFilteredThreads().length === 0} |
|
|
|
|
|
|
|
<p class="text-fog-text-light dark:text-fog-dark-text-light">No threads found in this topic.</p> |
|
|
|
|
|
|
|
{/if} |
|
|
|
|
|
|
|
{/if} |
|
|
|
{/if} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/if} |
|
|
|
{/if} |
|
|
|
|
