|
|
<script lang="ts"> |
|
|
import ProfileBadge from '../../components/layout/ProfileBadge.svelte'; |
|
|
import { nostrClient } from '../../services/nostr/nostr-client.js'; |
|
|
import { relayManager } from '../../services/nostr/relay-manager.js'; |
|
|
import { onMount } from 'svelte'; |
|
|
import type { NostrEvent } from '../../types/nostr.js'; |
|
|
import { getKindInfo } from '../../types/kind-lookup.js'; |
|
|
import { stripMarkdown } from '../../services/text-utils.js'; |
|
|
|
|
|
interface Props { |
|
|
thread: NostrEvent; |
|
|
} |
|
|
|
|
|
let { thread }: Props = $props(); |
|
|
|
|
|
let upvotes = $state(0); |
|
|
let downvotes = $state(0); |
|
|
let commentCount = $state(0); |
|
|
let zapTotal = $state(0); |
|
|
let zapCount = $state(0); |
|
|
let latestResponseTime = $state<number | null>(null); |
|
|
let loadingStats = $state(true); |
|
|
let expanded = $state(false); |
|
|
let contentElement: HTMLElement | null = $state(null); |
|
|
let needsExpansion = $state(false); |
|
|
|
|
|
onMount(async () => { |
|
|
await loadStats(); |
|
|
}); |
|
|
|
|
|
$effect(() => { |
|
|
if (contentElement) { |
|
|
checkContentHeight(); |
|
|
// Use ResizeObserver to detect when content changes (e.g., images loading) |
|
|
const observer = new ResizeObserver(() => { |
|
|
checkContentHeight(); |
|
|
}); |
|
|
observer.observe(contentElement); |
|
|
return () => observer.disconnect(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function checkContentHeight() { |
|
|
if (contentElement) { |
|
|
// Use requestAnimationFrame to ensure DOM is fully updated |
|
|
requestAnimationFrame(() => { |
|
|
if (contentElement) { |
|
|
needsExpansion = contentElement.scrollHeight > 500; |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
function toggleExpanded() { |
|
|
expanded = !expanded; |
|
|
} |
|
|
|
|
|
async function loadStats() { |
|
|
loadingStats = true; |
|
|
const timeout = 30000; // 30 seconds |
|
|
|
|
|
try { |
|
|
const config = nostrClient.getConfig(); |
|
|
|
|
|
// Create a timeout promise |
|
|
const timeoutPromise = new Promise<never>((_, reject) => { |
|
|
setTimeout(() => reject(new Error('Stats loading timeout')), timeout); |
|
|
}); |
|
|
|
|
|
// Race between loading and timeout |
|
|
await Promise.race([ |
|
|
(async () => { |
|
|
// Load reactions (kind 7) |
|
|
const reactionRelays = relayManager.getThreadReadRelays(); |
|
|
const reactionEvents = await nostrClient.fetchEvents( |
|
|
[{ kinds: [7], '#e': [thread.id] }], |
|
|
reactionRelays, |
|
|
{ useCache: true } |
|
|
); |
|
|
|
|
|
// Count upvotes (+) and downvotes (-) |
|
|
for (const reaction of reactionEvents) { |
|
|
const content = reaction.content.trim(); |
|
|
if (content === '+' || content === '⬆️' || content === '↑') { |
|
|
upvotes++; |
|
|
} else if (content === '-' || content === '⬇️' || content === '↓') { |
|
|
downvotes++; |
|
|
} |
|
|
} |
|
|
|
|
|
// Load comments (kind 1111) |
|
|
const commentRelays = relayManager.getCommentReadRelays(); |
|
|
const commentEvents = await nostrClient.fetchEvents( |
|
|
[{ kinds: [1111], '#E': [thread.id], '#K': ['11'] }], |
|
|
commentRelays, |
|
|
{ useCache: true } |
|
|
); |
|
|
commentCount = commentEvents.length; |
|
|
|
|
|
// Load zap receipts (kind 9735) |
|
|
const zapRelays = relayManager.getZapReceiptReadRelays(); |
|
|
const zapReceipts = await nostrClient.fetchEvents( |
|
|
[{ kinds: [9735], '#e': [thread.id] }], |
|
|
zapRelays, |
|
|
{ useCache: true } |
|
|
); |
|
|
|
|
|
// Calculate zap totals |
|
|
const threshold = config.zapThreshold; |
|
|
zapCount = 0; |
|
|
zapTotal = 0; |
|
|
for (const receipt of zapReceipts) { |
|
|
const amountTag = receipt.tags.find((t) => t[0] === 'amount'); |
|
|
if (amountTag && amountTag[1]) { |
|
|
const amount = parseInt(amountTag[1], 10); |
|
|
if (!isNaN(amount) && amount >= threshold) { |
|
|
zapTotal += amount; |
|
|
zapCount++; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// Find latest response time (most recent comment, reaction, or zap) |
|
|
let latestTime = thread.created_at; |
|
|
if (commentEvents.length > 0) { |
|
|
const latestComment = commentEvents.sort((a, b) => b.created_at - a.created_at)[0]; |
|
|
latestTime = Math.max(latestTime, latestComment.created_at); |
|
|
} |
|
|
if (reactionEvents.length > 0) { |
|
|
const latestReaction = reactionEvents.sort((a, b) => b.created_at - a.created_at)[0]; |
|
|
latestTime = Math.max(latestTime, latestReaction.created_at); |
|
|
} |
|
|
if (zapReceipts.length > 0) { |
|
|
const latestZap = zapReceipts.sort((a, b) => b.created_at - a.created_at)[0]; |
|
|
latestTime = Math.max(latestTime, latestZap.created_at); |
|
|
} |
|
|
latestResponseTime = latestTime > thread.created_at ? latestTime : null; |
|
|
})(), |
|
|
timeoutPromise |
|
|
]); |
|
|
} catch (error) { |
|
|
console.error('Error loading thread stats:', error); |
|
|
// On timeout or error, show zero stats instead of loading forever |
|
|
upvotes = 0; |
|
|
downvotes = 0; |
|
|
commentCount = 0; |
|
|
zapTotal = 0; |
|
|
zapCount = 0; |
|
|
latestResponseTime = null; |
|
|
} finally { |
|
|
loadingStats = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function getTitle(): string { |
|
|
const titleTag = thread.tags.find((t) => t[0] === 'title'); |
|
|
return titleTag?.[1] || 'Untitled'; |
|
|
} |
|
|
|
|
|
function getTopics(): string[] { |
|
|
return thread.tags.filter((t) => t[0] === 't').map((t) => t[1]).slice(0, 3); |
|
|
} |
|
|
|
|
|
function getPreview(): string { |
|
|
// First 250 chars, plaintext (no markdown/images) |
|
|
const plaintext = stripMarkdown(thread.content); |
|
|
return plaintext.slice(0, 250) + (plaintext.length > 250 ? '...' : ''); |
|
|
} |
|
|
|
|
|
function getRelativeTime(): string { |
|
|
const now = Math.floor(Date.now() / 1000); |
|
|
const diff = now - thread.created_at; |
|
|
const hours = Math.floor(diff / 3600); |
|
|
const days = Math.floor(diff / 86400); |
|
|
|
|
|
if (days > 0) return `${days}d ago`; |
|
|
if (hours > 0) return `${hours}h ago`; |
|
|
return 'just now'; |
|
|
} |
|
|
|
|
|
function getLatestResponseTime(): string { |
|
|
if (!latestResponseTime) return ''; |
|
|
const now = Math.floor(Date.now() / 1000); |
|
|
const diff = now - latestResponseTime; |
|
|
const hours = Math.floor(diff / 3600); |
|
|
const days = Math.floor(diff / 86400); |
|
|
const minutes = Math.floor(diff / 60); |
|
|
|
|
|
if (days > 0) return `${days}d ago`; |
|
|
if (hours > 0) return `${hours}h ago`; |
|
|
if (minutes > 0) return `${minutes}m ago`; |
|
|
return 'just now'; |
|
|
} |
|
|
|
|
|
function getClientName(): string | null { |
|
|
const clientTag = thread.tags.find((t) => t[0] === 'client'); |
|
|
return clientTag?.[1] || null; |
|
|
} |
|
|
</script> |
|
|
|
|
|
<article class="thread-card bg-fog-post dark:bg-fog-dark-post border border-fog-border dark:border-fog-dark-border p-4 mb-4 shadow-sm dark:shadow-lg"> |
|
|
<div class="card-content" class:expanded bind:this={contentElement}> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold"> |
|
|
<a href="/thread/{thread.id}">{getTitle()}</a> |
|
|
</h3> |
|
|
<span class="text-sm text-fog-text-light dark:text-fog-dark-text-light">{getRelativeTime()}</span> |
|
|
</div> |
|
|
|
|
|
<div class="mb-2 flex items-center gap-2"> |
|
|
<ProfileBadge pubkey={thread.pubkey} /> |
|
|
{#if getClientName()} |
|
|
<span class="text-xs text-fog-text-light dark:text-fog-dark-text-light">via {getClientName()}</span> |
|
|
{/if} |
|
|
</div> |
|
|
|
|
|
<p class="text-sm mb-2">{getPreview()}</p> |
|
|
|
|
|
{#if getTopics().length > 0} |
|
|
<div class="flex gap-2 mb-2"> |
|
|
{#each getTopics() as topic} |
|
|
<span class="text-xs bg-fog-highlight dark:bg-fog-dark-highlight text-fog-text dark:text-fog-dark-text px-2 py-1 rounded">{topic}</span> |
|
|
{/each} |
|
|
</div> |
|
|
{/if} |
|
|
|
|
|
<div class="flex items-center justify-between text-xs text-fog-text dark:text-fog-dark-text thread-stats"> |
|
|
<div class="flex items-center gap-4 flex-wrap"> |
|
|
{#if loadingStats} |
|
|
<span class="text-fog-text-light dark:text-fog-dark-text-light">Loading stats...</span> |
|
|
{:else} |
|
|
<span class="font-medium">↑ {upvotes}</span> |
|
|
<span class="font-medium">↓ {downvotes}</span> |
|
|
<span class="font-medium">{commentCount} {commentCount === 1 ? 'comment' : 'comments'}</span> |
|
|
{#if latestResponseTime} |
|
|
<span class="text-fog-text-light dark:text-fog-dark-text-light">Last: {getLatestResponseTime()}</span> |
|
|
{/if} |
|
|
{#if zapCount > 0} |
|
|
<span class="font-medium">⚡ {zapTotal.toLocaleString()} sats ({zapCount})</span> |
|
|
{/if} |
|
|
{/if} |
|
|
</div> |
|
|
<a href="/thread/{thread.id}" class="ml-2 text-fog-accent dark:text-fog-dark-accent hover:underline">View thread →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{#if needsExpansion} |
|
|
<button |
|
|
onclick={toggleExpanded} |
|
|
class="show-more-button text-sm text-fog-accent dark:text-fog-dark-accent hover:underline mt-2" |
|
|
> |
|
|
{expanded ? 'Show less' : 'Show more'} |
|
|
</button> |
|
|
{/if} |
|
|
|
|
|
<div class="kind-badge"> |
|
|
<span class="kind-number">{getKindInfo(thread.kind).number}</span> |
|
|
<span class="kind-description">{getKindInfo(thread.kind).description}</span> |
|
|
</div> |
|
|
</article> |
|
|
|
|
|
<style> |
|
|
.thread-card { |
|
|
max-width: var(--content-width); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.thread-card a { |
|
|
color: inherit; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.thread-card a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
max-height: 500px; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-content.expanded { |
|
|
max-height: none; |
|
|
} |
|
|
|
|
|
.show-more-button { |
|
|
width: 100%; |
|
|
text-align: center; |
|
|
padding: 0.5rem; |
|
|
background: transparent; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.kind-badge { |
|
|
position: absolute; |
|
|
bottom: 0.5rem; |
|
|
right: 0.5rem; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
gap: 0.25rem; |
|
|
font-size: 0.625rem; |
|
|
line-height: 1; |
|
|
color: var(--fog-text-light, #9ca3af); |
|
|
} |
|
|
|
|
|
:global(.dark) .kind-badge { |
|
|
color: var(--fog-dark-text-light, #6b7280); |
|
|
} |
|
|
|
|
|
.kind-number { |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.kind-description { |
|
|
font-size: 0.625rem; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.thread-stats { |
|
|
padding-right: 6rem; /* Reserve space for kind badge */ |
|
|
} |
|
|
</style>
|
|
|
|
