limina1
4 months ago
7 changed files with 2524 additions and 0 deletions
@ -0,0 +1,520 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { Button, Textarea, P } from "flowbite-svelte"; |
||||||
|
import { getContext } from "svelte"; |
||||||
|
import type NDK from "@nostr-dev-kit/ndk"; |
||||||
|
import { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||||
|
import { userStore } from "$lib/stores/userStore"; |
||||||
|
import { activeOutboxRelays, activeInboxRelays } from "$lib/ndk"; |
||||||
|
import { communityRelays } from "$lib/consts"; |
||||||
|
import { WebSocketPool } from "$lib/data_structures/websocket_pool"; |
||||||
|
import { ChevronDownOutline, ChevronUpOutline } from "flowbite-svelte-icons"; |
||||||
|
|
||||||
|
let { |
||||||
|
address, |
||||||
|
onCommentPosted, |
||||||
|
inline = false, |
||||||
|
}: { |
||||||
|
address: string; |
||||||
|
onCommentPosted?: () => void; |
||||||
|
inline?: boolean; |
||||||
|
} = $props(); |
||||||
|
|
||||||
|
const ndk: NDK = getContext("ndk"); |
||||||
|
|
||||||
|
// State management |
||||||
|
let showCommentUI = $state(false); |
||||||
|
let commentContent = $state(""); |
||||||
|
let isSubmitting = $state(false); |
||||||
|
let error = $state<string | null>(null); |
||||||
|
let success = $state(false); |
||||||
|
let showJsonPreview = $state(false); |
||||||
|
|
||||||
|
// Build preview JSON for the comment event |
||||||
|
let previewJson = $derived.by(() => { |
||||||
|
if (!commentContent.trim()) return null; |
||||||
|
|
||||||
|
const eventDetails = parseAddress(address); |
||||||
|
if (!eventDetails) return null; |
||||||
|
|
||||||
|
const { kind, pubkey: authorPubkey, dTag } = eventDetails; |
||||||
|
const relayHint = $activeOutboxRelays[0] || ""; |
||||||
|
|
||||||
|
return { |
||||||
|
kind: 1111, |
||||||
|
pubkey: $userStore.pubkey || "<your-pubkey>", |
||||||
|
created_at: Math.floor(Date.now() / 1000), |
||||||
|
tags: [ |
||||||
|
["A", address, relayHint, authorPubkey], |
||||||
|
["K", kind.toString()], |
||||||
|
["P", authorPubkey, relayHint], |
||||||
|
["a", address, relayHint], |
||||||
|
["k", kind.toString()], |
||||||
|
["p", authorPubkey, relayHint], |
||||||
|
], |
||||||
|
content: commentContent, |
||||||
|
id: "<calculated-on-signing>", |
||||||
|
sig: "<calculated-on-signing>" |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
// Parse address to get event details |
||||||
|
function parseAddress(address: string): { kind: number; pubkey: string; dTag: string } | null { |
||||||
|
const parts = address.split(":"); |
||||||
|
if (parts.length !== 3) { |
||||||
|
console.error("[CommentButton] Invalid address format:", address); |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const [kindStr, pubkey, dTag] = parts; |
||||||
|
const kind = parseInt(kindStr); |
||||||
|
|
||||||
|
if (isNaN(kind)) { |
||||||
|
console.error("[CommentButton] Invalid kind in address:", kindStr); |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return { kind, pubkey, dTag }; |
||||||
|
} |
||||||
|
|
||||||
|
// Create NIP-22 comment event |
||||||
|
async function createCommentEvent(content: string): Promise<NDKEvent | null> { |
||||||
|
const eventDetails = parseAddress(address); |
||||||
|
if (!eventDetails) { |
||||||
|
error = "Invalid event address"; |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const { kind, pubkey: authorPubkey, dTag } = eventDetails; |
||||||
|
|
||||||
|
// Get relay hint (use first available outbox relay) |
||||||
|
const relayHint = $activeOutboxRelays[0] || ""; |
||||||
|
|
||||||
|
// Get the actual event to include its ID in tags |
||||||
|
let eventId = ""; |
||||||
|
try { |
||||||
|
const targetEvent = await ndk.fetchEvent({ |
||||||
|
kinds: [kind], |
||||||
|
authors: [authorPubkey], |
||||||
|
"#d": [dTag], |
||||||
|
}); |
||||||
|
|
||||||
|
if (targetEvent) { |
||||||
|
eventId = targetEvent.id; |
||||||
|
} |
||||||
|
} catch (err) { |
||||||
|
console.warn("[CommentButton] Could not fetch target event ID:", err); |
||||||
|
} |
||||||
|
|
||||||
|
// Create the comment event following NIP-22 structure |
||||||
|
const commentEvent = new NDKEvent(ndk); |
||||||
|
commentEvent.kind = 1111; |
||||||
|
commentEvent.content = content; |
||||||
|
commentEvent.pubkey = $userStore.pubkey || ""; // Set pubkey from user store |
||||||
|
|
||||||
|
// NIP-22 tags structure for top-level comments |
||||||
|
commentEvent.tags = [ |
||||||
|
// Root scope - uppercase tags |
||||||
|
["A", address, relayHint, authorPubkey], |
||||||
|
["K", kind.toString()], |
||||||
|
["P", authorPubkey, relayHint], |
||||||
|
|
||||||
|
// Parent scope (same as root for top-level) - lowercase tags |
||||||
|
["a", address, relayHint], |
||||||
|
["k", kind.toString()], |
||||||
|
["p", authorPubkey, relayHint], |
||||||
|
]; |
||||||
|
|
||||||
|
// Include e tag if we have the event ID |
||||||
|
if (eventId) { |
||||||
|
commentEvent.tags.push(["e", eventId, relayHint]); |
||||||
|
} |
||||||
|
|
||||||
|
console.log("[CommentButton] Created NIP-22 comment event:", { |
||||||
|
kind: commentEvent.kind, |
||||||
|
tags: commentEvent.tags, |
||||||
|
content: commentEvent.content, |
||||||
|
}); |
||||||
|
|
||||||
|
return commentEvent; |
||||||
|
} |
||||||
|
|
||||||
|
// Submit comment |
||||||
|
async function submitComment() { |
||||||
|
if (!commentContent.trim()) { |
||||||
|
error = "Comment cannot be empty"; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (!$userStore.signedIn || !$userStore.signer) { |
||||||
|
error = "You must be signed in to comment"; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
isSubmitting = true; |
||||||
|
error = null; |
||||||
|
success = false; |
||||||
|
|
||||||
|
try { |
||||||
|
const commentEvent = await createCommentEvent(commentContent); |
||||||
|
if (!commentEvent) { |
||||||
|
throw new Error("Failed to create comment event"); |
||||||
|
} |
||||||
|
|
||||||
|
// Sign the event - create plain object to avoid proxy issues |
||||||
|
const plainEvent = { |
||||||
|
kind: Number(commentEvent.kind), |
||||||
|
pubkey: String(commentEvent.pubkey), |
||||||
|
created_at: Number(commentEvent.created_at ?? Math.floor(Date.now() / 1000)), |
||||||
|
tags: commentEvent.tags.map((tag) => tag.map(String)), |
||||||
|
content: String(commentEvent.content), |
||||||
|
}; |
||||||
|
|
||||||
|
if (typeof window !== "undefined" && window.nostr && window.nostr.signEvent) { |
||||||
|
const signed = await window.nostr.signEvent(plainEvent); |
||||||
|
commentEvent.sig = signed.sig; |
||||||
|
if ("id" in signed) { |
||||||
|
commentEvent.id = signed.id as string; |
||||||
|
} |
||||||
|
} else { |
||||||
|
await commentEvent.sign($userStore.signer); |
||||||
|
} |
||||||
|
|
||||||
|
console.log("[CommentButton] Signed comment event:", commentEvent.rawEvent()); |
||||||
|
|
||||||
|
// Build relay list following the same pattern as eventServices |
||||||
|
const relays = [ |
||||||
|
...communityRelays, |
||||||
|
...$activeOutboxRelays, |
||||||
|
...$activeInboxRelays, |
||||||
|
]; |
||||||
|
|
||||||
|
// Remove duplicates |
||||||
|
const uniqueRelays = Array.from(new Set(relays)); |
||||||
|
|
||||||
|
console.log("[CommentButton] Publishing to relays:", uniqueRelays); |
||||||
|
|
||||||
|
const signedEvent = { |
||||||
|
...plainEvent, |
||||||
|
id: commentEvent.id, |
||||||
|
sig: commentEvent.sig, |
||||||
|
}; |
||||||
|
|
||||||
|
// Publish to relays using WebSocketPool |
||||||
|
let publishedCount = 0; |
||||||
|
for (const relayUrl of uniqueRelays) { |
||||||
|
try { |
||||||
|
const ws = await WebSocketPool.instance.acquire(relayUrl); |
||||||
|
|
||||||
|
await new Promise<void>((resolve, reject) => { |
||||||
|
const timeout = setTimeout(() => { |
||||||
|
WebSocketPool.instance.release(ws); |
||||||
|
reject(new Error("Timeout")); |
||||||
|
}, 5000); |
||||||
|
|
||||||
|
ws.onmessage = (e) => { |
||||||
|
const [type, id, ok, message] = JSON.parse(e.data); |
||||||
|
if (type === "OK" && id === signedEvent.id) { |
||||||
|
clearTimeout(timeout); |
||||||
|
if (ok) { |
||||||
|
publishedCount++; |
||||||
|
console.log(`[CommentButton] Published to ${relayUrl}`); |
||||||
|
WebSocketPool.instance.release(ws); |
||||||
|
resolve(); |
||||||
|
} else { |
||||||
|
console.warn(`[CommentButton] ${relayUrl} rejected: ${message}`); |
||||||
|
WebSocketPool.instance.release(ws); |
||||||
|
reject(new Error(message)); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Send the event to the relay |
||||||
|
ws.send(JSON.stringify(["EVENT", signedEvent])); |
||||||
|
}); |
||||||
|
} catch (e) { |
||||||
|
console.error(`[CommentButton] Failed to publish to ${relayUrl}:`, e); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (publishedCount === 0) { |
||||||
|
throw new Error("Failed to publish to any relays"); |
||||||
|
} |
||||||
|
|
||||||
|
console.log(`[CommentButton] Published to ${publishedCount} relay(s)`); |
||||||
|
|
||||||
|
// Success! |
||||||
|
success = true; |
||||||
|
commentContent = ""; |
||||||
|
showJsonPreview = false; |
||||||
|
|
||||||
|
// Close UI after a delay |
||||||
|
setTimeout(() => { |
||||||
|
showCommentUI = false; |
||||||
|
success = false; |
||||||
|
|
||||||
|
// Trigger refresh of CommentViewer if callback provided |
||||||
|
if (onCommentPosted) { |
||||||
|
onCommentPosted(); |
||||||
|
} |
||||||
|
}, 2000); |
||||||
|
|
||||||
|
} catch (err) { |
||||||
|
console.error("[CommentButton] Error submitting comment:", err); |
||||||
|
error = err instanceof Error ? err.message : "Failed to post comment"; |
||||||
|
} finally { |
||||||
|
isSubmitting = false; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Cancel comment |
||||||
|
function cancelComment() { |
||||||
|
showCommentUI = false; |
||||||
|
commentContent = ""; |
||||||
|
error = null; |
||||||
|
success = false; |
||||||
|
showJsonPreview = false; |
||||||
|
} |
||||||
|
|
||||||
|
// Toggle comment UI |
||||||
|
function toggleCommentUI() { |
||||||
|
if (!$userStore.signedIn) { |
||||||
|
error = "You must be signed in to comment"; |
||||||
|
setTimeout(() => { |
||||||
|
error = null; |
||||||
|
}, 3000); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
showCommentUI = !showCommentUI; |
||||||
|
error = null; |
||||||
|
success = false; |
||||||
|
showJsonPreview = false; |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<!-- Hamburger Comment Button --> |
||||||
|
<div class="comment-button-container" class:inline={inline}> |
||||||
|
<button |
||||||
|
class="single-line-button" |
||||||
|
onclick={toggleCommentUI} |
||||||
|
title="Add comment" |
||||||
|
aria-label="Add comment" |
||||||
|
> |
||||||
|
<span class="line"></span> |
||||||
|
<span class="line"></span> |
||||||
|
<span class="line"></span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<!-- Comment Creation UI --> |
||||||
|
{#if showCommentUI} |
||||||
|
<div class="comment-ui"> |
||||||
|
<div class="comment-header"> |
||||||
|
<h4>Add Comment</h4> |
||||||
|
{#if $userStore.profile} |
||||||
|
<div class="user-info"> |
||||||
|
{#if $userStore.profile.picture} |
||||||
|
<img src={$userStore.profile.picture} alt={$userStore.profile.displayName || $userStore.profile.name || "User"} class="user-avatar" /> |
||||||
|
{/if} |
||||||
|
<span class="user-name">{$userStore.profile.displayName || $userStore.profile.name || "Anonymous"}</span> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
|
||||||
|
<Textarea |
||||||
|
bind:value={commentContent} |
||||||
|
placeholder="Write your comment here..." |
||||||
|
rows={4} |
||||||
|
disabled={isSubmitting} |
||||||
|
class="comment-textarea" |
||||||
|
/> |
||||||
|
|
||||||
|
{#if error} |
||||||
|
<P class="error-message text-red-600 dark:text-red-400 text-sm mt-2">{error}</P> |
||||||
|
{/if} |
||||||
|
|
||||||
|
{#if success} |
||||||
|
<P class="success-message text-green-600 dark:text-green-400 text-sm mt-2">Comment posted successfully!</P> |
||||||
|
{/if} |
||||||
|
|
||||||
|
<!-- JSON Preview Section --> |
||||||
|
{#if showJsonPreview && previewJson} |
||||||
|
<div class="border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-gray-50 dark:bg-gray-900 mt-3"> |
||||||
|
<P class="text-sm font-semibold mb-2">Event JSON Preview:</P> |
||||||
|
<pre class="text-xs bg-white dark:bg-gray-800 p-3 rounded overflow-x-auto border border-gray-200 dark:border-gray-700"><code>{JSON.stringify(previewJson, null, 2)}</code></pre> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
|
||||||
|
<div class="comment-actions-wrapper"> |
||||||
|
<Button |
||||||
|
color="light" |
||||||
|
size="sm" |
||||||
|
onclick={() => showJsonPreview = !showJsonPreview} |
||||||
|
class="flex items-center gap-1" |
||||||
|
> |
||||||
|
{#if showJsonPreview} |
||||||
|
<ChevronUpOutline class="w-4 h-4" /> |
||||||
|
{:else} |
||||||
|
<ChevronDownOutline class="w-4 h-4" /> |
||||||
|
{/if} |
||||||
|
{showJsonPreview ? "Hide" : "Show"} JSON |
||||||
|
</Button> |
||||||
|
|
||||||
|
<div class="comment-actions"> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
color="alternative" |
||||||
|
onclick={cancelComment} |
||||||
|
disabled={isSubmitting} |
||||||
|
> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
onclick={submitComment} |
||||||
|
disabled={isSubmitting || !commentContent.trim()} |
||||||
|
> |
||||||
|
{isSubmitting ? "Posting..." : "Post Comment"} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
|
||||||
|
<style> |
||||||
|
.comment-button-container { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
left: 0; |
||||||
|
height: 0; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-button-container.inline { |
||||||
|
position: relative; |
||||||
|
height: auto; |
||||||
|
pointer-events: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.single-line-button { |
||||||
|
position: absolute; |
||||||
|
top: 4px; |
||||||
|
right: 8px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
width: 24px; |
||||||
|
height: 18px; |
||||||
|
padding: 4px; |
||||||
|
background: transparent; |
||||||
|
border: none; |
||||||
|
cursor: pointer; |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.2s ease-in-out; |
||||||
|
z-index: 10; |
||||||
|
pointer-events: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-button-container.inline .single-line-button { |
||||||
|
position: relative; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.single-line-button:hover .line { |
||||||
|
border-width: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.line { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
border: none; |
||||||
|
border-top: 2px dashed #6b7280; |
||||||
|
transition: all 0.2s ease-in-out; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-ui { |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
right: 8px; |
||||||
|
min-width: 400px; |
||||||
|
max-width: 600px; |
||||||
|
background: white; |
||||||
|
border: 1px solid #e5e7eb; |
||||||
|
border-radius: 8px; |
||||||
|
padding: 16px; |
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
||||||
|
z-index: 20; |
||||||
|
pointer-events: auto; |
||||||
|
} |
||||||
|
|
||||||
|
:global(.dark) .comment-ui { |
||||||
|
background: #1f2937; |
||||||
|
border-color: #374151; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-header h4 { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
margin: 0; |
||||||
|
color: #111827; |
||||||
|
} |
||||||
|
|
||||||
|
:global(.dark) .comment-header h4 { |
||||||
|
color: #f9fafb; |
||||||
|
} |
||||||
|
|
||||||
|
.user-info { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.user-avatar { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
border-radius: 50%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.user-name { |
||||||
|
font-size: 14px; |
||||||
|
color: #6b7280; |
||||||
|
} |
||||||
|
|
||||||
|
:global(.dark) .user-name { |
||||||
|
color: #9ca3af; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-actions-wrapper { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-actions { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
gap: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Make the comment UI responsive */ |
||||||
|
@media (max-width: 640px) { |
||||||
|
.comment-ui { |
||||||
|
min-width: 280px; |
||||||
|
max-width: calc(100vw - 32px); |
||||||
|
right: -8px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,282 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { getNdkContext, activeInboxRelays, activeOutboxRelays } from "$lib/ndk"; |
||||||
|
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||||
|
import { NDKEvent as NDKEventClass } from "@nostr-dev-kit/ndk"; |
||||||
|
import { communityRelays } from "$lib/consts"; |
||||||
|
import { WebSocketPool } from "$lib/data_structures/websocket_pool"; |
||||||
|
import { generateMockCommentsForSections } from "$lib/utils/mockCommentData"; |
||||||
|
|
||||||
|
let { |
||||||
|
eventId, |
||||||
|
eventAddress, |
||||||
|
eventIds = [], |
||||||
|
eventAddresses = [], |
||||||
|
comments = $bindable([]), |
||||||
|
useMockComments = false, |
||||||
|
}: { |
||||||
|
eventId?: string; |
||||||
|
eventAddress?: string; |
||||||
|
eventIds?: string[]; |
||||||
|
eventAddresses?: string[]; |
||||||
|
comments?: NDKEvent[]; |
||||||
|
useMockComments?: boolean; |
||||||
|
} = $props(); |
||||||
|
|
||||||
|
const ndk = getNdkContext(); |
||||||
|
|
||||||
|
// State management |
||||||
|
let loading = $state(false); |
||||||
|
|
||||||
|
/** |
||||||
|
* Fetch comment events (kind 1111) for the current publication using WebSocketPool |
||||||
|
* |
||||||
|
* This follows the exact pattern from HighlightLayer.svelte to ensure reliability. |
||||||
|
* Uses WebSocketPool with nostr-tools protocol instead of NDK subscriptions. |
||||||
|
*/ |
||||||
|
async function fetchComments() { |
||||||
|
// Prevent concurrent fetches |
||||||
|
if (loading) { |
||||||
|
console.log("[CommentLayer] Already loading, skipping fetch"); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// Collect all event IDs and addresses |
||||||
|
const allEventIds = [...(eventId ? [eventId] : []), ...eventIds].filter(Boolean); |
||||||
|
const allAddresses = [...(eventAddress ? [eventAddress] : []), ...eventAddresses].filter(Boolean); |
||||||
|
|
||||||
|
if (allEventIds.length === 0 && allAddresses.length === 0) { |
||||||
|
console.warn("[CommentLayer] No event IDs or addresses provided"); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
loading = true; |
||||||
|
comments = []; |
||||||
|
|
||||||
|
// AI-NOTE: Mock mode allows testing comment UI without publishing to relays |
||||||
|
// This is useful for development and demonstrating the comment system |
||||||
|
if (useMockComments) { |
||||||
|
console.log(`[CommentLayer] MOCK MODE - Generating mock comments for ${allAddresses.length} sections`); |
||||||
|
|
||||||
|
try { |
||||||
|
// Generate mock comment data |
||||||
|
const mockComments = generateMockCommentsForSections(allAddresses); |
||||||
|
|
||||||
|
// Convert to NDKEvent instances (same as real events) |
||||||
|
comments = mockComments.map(rawEvent => new NDKEventClass(ndk, rawEvent)); |
||||||
|
|
||||||
|
console.log(`[CommentLayer] Generated ${comments.length} mock comments`); |
||||||
|
loading = false; |
||||||
|
return; |
||||||
|
} catch (err) { |
||||||
|
console.error(`[CommentLayer] Error generating mock comments:`, err); |
||||||
|
loading = false; |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
console.log(`[CommentLayer] Fetching comments for:`, { |
||||||
|
eventIds: allEventIds, |
||||||
|
addresses: allAddresses |
||||||
|
}); |
||||||
|
|
||||||
|
try { |
||||||
|
// Build filter for kind 1111 comment events |
||||||
|
// IMPORTANT: Use only #a tags because filters are AND, not OR |
||||||
|
// If we include both #e and #a, relays will only return comments that have BOTH |
||||||
|
const filter: any = { |
||||||
|
kinds: [1111], |
||||||
|
limit: 500, |
||||||
|
}; |
||||||
|
|
||||||
|
// Prefer #a (addressable events) since they're more specific and persistent |
||||||
|
if (allAddresses.length > 0) { |
||||||
|
filter["#a"] = allAddresses; |
||||||
|
} else if (allEventIds.length > 0) { |
||||||
|
// Fallback to #e if no addresses available |
||||||
|
filter["#e"] = allEventIds; |
||||||
|
} |
||||||
|
|
||||||
|
console.log(`[CommentLayer] Fetching with filter:`, JSON.stringify(filter, null, 2)); |
||||||
|
|
||||||
|
// Build explicit relay set (same pattern as HighlightLayer) |
||||||
|
const relays = [ |
||||||
|
...communityRelays, |
||||||
|
...$activeOutboxRelays, |
||||||
|
...$activeInboxRelays, |
||||||
|
]; |
||||||
|
const uniqueRelays = Array.from(new Set(relays)); |
||||||
|
console.log(`[CommentLayer] Fetching from ${uniqueRelays.length} relays:`, uniqueRelays); |
||||||
|
|
||||||
|
/** |
||||||
|
* Use WebSocketPool with nostr-tools protocol instead of NDK |
||||||
|
* |
||||||
|
* Reasons for not using NDK: |
||||||
|
* 1. NDK subscriptions mysteriously returned 0 events even when websocat confirmed events existed |
||||||
|
* 2. Consistency - HighlightLayer, CommentButton, and HighlightSelectionHandler use WebSocketPool |
||||||
|
* 3. Better debugging - direct access to WebSocket messages for troubleshooting |
||||||
|
* 4. Proven reliability - battle-tested in the codebase for similar use cases |
||||||
|
* 5. Performance control - explicit 5s timeout per relay, tunable as needed |
||||||
|
* |
||||||
|
* This matches the pattern in: |
||||||
|
* - src/lib/components/publications/HighlightLayer.svelte:111-212 |
||||||
|
* - src/lib/components/publications/CommentButton.svelte:156-220 |
||||||
|
* - src/lib/components/publications/HighlightSelectionHandler.svelte:217-280 |
||||||
|
*/ |
||||||
|
const subscriptionId = `comments-${Date.now()}`; |
||||||
|
const receivedEventIds = new Set<string>(); |
||||||
|
let eoseCount = 0; |
||||||
|
|
||||||
|
const fetchPromises = uniqueRelays.map(async (relayUrl) => { |
||||||
|
try { |
||||||
|
console.log(`[CommentLayer] Connecting to ${relayUrl}`); |
||||||
|
const ws = await WebSocketPool.instance.acquire(relayUrl); |
||||||
|
|
||||||
|
return new Promise<void>((resolve) => { |
||||||
|
const messageHandler = (event: MessageEvent) => { |
||||||
|
try { |
||||||
|
const message = JSON.parse(event.data); |
||||||
|
|
||||||
|
// Log ALL messages from relay.nostr.band for debugging |
||||||
|
if (relayUrl.includes('relay.nostr.band')) { |
||||||
|
console.log(`[CommentLayer] RAW message from ${relayUrl}:`, message); |
||||||
|
} |
||||||
|
|
||||||
|
if (message[0] === "EVENT" && message[1] === subscriptionId) { |
||||||
|
const rawEvent = message[2]; |
||||||
|
console.log(`[CommentLayer] EVENT from ${relayUrl}:`, { |
||||||
|
id: rawEvent.id, |
||||||
|
kind: rawEvent.kind, |
||||||
|
content: rawEvent.content.substring(0, 50), |
||||||
|
tags: rawEvent.tags |
||||||
|
}); |
||||||
|
|
||||||
|
// Avoid duplicates |
||||||
|
if (!receivedEventIds.has(rawEvent.id)) { |
||||||
|
receivedEventIds.add(rawEvent.id); |
||||||
|
|
||||||
|
// Convert to NDKEvent |
||||||
|
const ndkEvent = new NDKEventClass(ndk, rawEvent); |
||||||
|
comments = [...comments, ndkEvent]; |
||||||
|
console.log(`[CommentLayer] Added comment, total now: ${comments.length}`); |
||||||
|
} |
||||||
|
} else if (message[0] === "EOSE" && message[1] === subscriptionId) { |
||||||
|
eoseCount++; |
||||||
|
console.log(`[CommentLayer] EOSE from ${relayUrl} (${eoseCount}/${uniqueRelays.length})`); |
||||||
|
|
||||||
|
// Close subscription |
||||||
|
ws.send(JSON.stringify(["CLOSE", subscriptionId])); |
||||||
|
ws.removeEventListener("message", messageHandler); |
||||||
|
WebSocketPool.instance.release(ws); |
||||||
|
resolve(); |
||||||
|
} else if (message[0] === "NOTICE") { |
||||||
|
console.warn(`[CommentLayer] NOTICE from ${relayUrl}:`, message[1]); |
||||||
|
} |
||||||
|
} catch (err) { |
||||||
|
console.error(`[CommentLayer] Error processing message from ${relayUrl}:`, err); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
ws.addEventListener("message", messageHandler); |
||||||
|
|
||||||
|
// Send REQ |
||||||
|
const req = ["REQ", subscriptionId, filter]; |
||||||
|
if (relayUrl.includes('relay.nostr.band')) { |
||||||
|
console.log(`[CommentLayer] Sending REQ to ${relayUrl}:`, JSON.stringify(req)); |
||||||
|
} else { |
||||||
|
console.log(`[CommentLayer] Sending REQ to ${relayUrl}`); |
||||||
|
} |
||||||
|
ws.send(JSON.stringify(req)); |
||||||
|
|
||||||
|
// Timeout per relay (5 seconds) |
||||||
|
setTimeout(() => { |
||||||
|
if (ws.readyState === WebSocket.OPEN) { |
||||||
|
ws.send(JSON.stringify(["CLOSE", subscriptionId])); |
||||||
|
ws.removeEventListener("message", messageHandler); |
||||||
|
WebSocketPool.instance.release(ws); |
||||||
|
} |
||||||
|
resolve(); |
||||||
|
}, 5000); |
||||||
|
}); |
||||||
|
} catch (err) { |
||||||
|
console.error(`[CommentLayer] Error connecting to ${relayUrl}:`, err); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Wait for all relays to respond or timeout |
||||||
|
await Promise.all(fetchPromises); |
||||||
|
|
||||||
|
console.log(`[CommentLayer] Fetched ${comments.length} comments`); |
||||||
|
|
||||||
|
if (comments.length > 0) { |
||||||
|
console.log(`[CommentLayer] Comments summary:`, comments.map(c => ({ |
||||||
|
content: c.content.substring(0, 30) + "...", |
||||||
|
address: c.tags.find(t => t[0] === "a")?.[1], |
||||||
|
author: c.pubkey.substring(0, 8) |
||||||
|
}))); |
||||||
|
} |
||||||
|
|
||||||
|
loading = false; |
||||||
|
|
||||||
|
} catch (err) { |
||||||
|
console.error(`[CommentLayer] Error fetching comments:`, err); |
||||||
|
loading = false; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Track the last fetched event count to know when to refetch |
||||||
|
let lastFetchedCount = $state(0); |
||||||
|
let fetchTimeout: ReturnType<typeof setTimeout> | null = null; |
||||||
|
|
||||||
|
// Watch for changes to event data - debounce and fetch when data stabilizes |
||||||
|
$effect(() => { |
||||||
|
const currentCount = eventIds.length + eventAddresses.length; |
||||||
|
const hasEventData = currentCount > 0; |
||||||
|
|
||||||
|
console.log(`[CommentLayer] Event data effect - count: ${currentCount}, lastFetched: ${lastFetchedCount}, loading: ${loading}`); |
||||||
|
|
||||||
|
// Only fetch if: |
||||||
|
// 1. We have event data |
||||||
|
// 2. The count has changed since last fetch |
||||||
|
// 3. We're not already loading |
||||||
|
if (hasEventData && currentCount !== lastFetchedCount && !loading) { |
||||||
|
// Clear any existing timeout |
||||||
|
if (fetchTimeout) { |
||||||
|
clearTimeout(fetchTimeout); |
||||||
|
} |
||||||
|
|
||||||
|
// Debounce: wait 500ms for more events to arrive before fetching |
||||||
|
fetchTimeout = setTimeout(() => { |
||||||
|
console.log(`[CommentLayer] Event data stabilized at ${currentCount} events, fetching comments...`); |
||||||
|
lastFetchedCount = currentCount; |
||||||
|
fetchComments(); |
||||||
|
}, 500); |
||||||
|
} |
||||||
|
|
||||||
|
// Cleanup timeout on effect cleanup |
||||||
|
return () => { |
||||||
|
if (fetchTimeout) { |
||||||
|
clearTimeout(fetchTimeout); |
||||||
|
} |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* Public method to refresh comments (e.g., after creating a new one) |
||||||
|
*/ |
||||||
|
export function refresh() { |
||||||
|
console.log("[CommentLayer] Manual refresh triggered"); |
||||||
|
|
||||||
|
// Clear existing comments |
||||||
|
comments = []; |
||||||
|
|
||||||
|
// Reset fetch count to force re-fetch |
||||||
|
lastFetchedCount = 0; |
||||||
|
fetchComments(); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if loading} |
||||||
|
<div class="fixed top-40 right-4 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-3"> |
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-300">Loading comments...</p> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
@ -0,0 +1,280 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||||
|
import { getUserMetadata, toNpub } from "$lib/utils/nostrUtils"; |
||||||
|
import { getNdkContext } from "$lib/ndk"; |
||||||
|
import { basicMarkup } from "$lib/snippets/MarkupSnippets.svelte"; |
||||||
|
import { ChevronDownOutline, ChevronRightOutline } from "flowbite-svelte-icons"; |
||||||
|
|
||||||
|
let { |
||||||
|
comments = [], |
||||||
|
sectionTitles = new Map<string, string>(), |
||||||
|
}: { |
||||||
|
comments: NDKEvent[]; |
||||||
|
sectionTitles?: Map<string, string>; |
||||||
|
} = $props(); |
||||||
|
|
||||||
|
const ndk = getNdkContext(); |
||||||
|
|
||||||
|
// State management |
||||||
|
let profiles = $state(new Map<string, any>()); |
||||||
|
let expandedSections = $state(new Set<string>()); |
||||||
|
|
||||||
|
/** |
||||||
|
* Group comments by their target event address |
||||||
|
* Extracts the target from #a or #e tags |
||||||
|
*/ |
||||||
|
let groupedComments = $derived.by(() => { |
||||||
|
const groups = new Map<string, NDKEvent[]>(); |
||||||
|
|
||||||
|
for (const comment of comments) { |
||||||
|
// Look for #a tag first (addressable events - preferred) |
||||||
|
const aTag = comment.tags.find(t => t[0] === "a"); |
||||||
|
if (aTag && aTag[1]) { |
||||||
|
const address = aTag[1]; |
||||||
|
if (!groups.has(address)) { |
||||||
|
groups.set(address, []); |
||||||
|
} |
||||||
|
groups.get(address)!.push(comment); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
// Fallback to #e tag (event ID) |
||||||
|
const eTag = comment.tags.find(t => t[0] === "e"); |
||||||
|
if (eTag && eTag[1]) { |
||||||
|
const eventId = eTag[1]; |
||||||
|
if (!groups.has(eventId)) { |
||||||
|
groups.set(eventId, []); |
||||||
|
} |
||||||
|
groups.get(eventId)!.push(comment); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
console.log(`[CommentPanel] Grouped ${comments.length} comments into ${groups.size} sections`); |
||||||
|
return groups; |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* Get a display label for a target address/id |
||||||
|
* Uses provided section titles, or falls back to address/id |
||||||
|
*/ |
||||||
|
function getTargetLabel(target: string): string { |
||||||
|
// Check if we have a title for this address |
||||||
|
if (sectionTitles.has(target)) { |
||||||
|
return sectionTitles.get(target)!; |
||||||
|
} |
||||||
|
|
||||||
|
// Parse address format: kind:pubkey:d-tag |
||||||
|
const parts = target.split(":"); |
||||||
|
if (parts.length === 3) { |
||||||
|
const [kind, _pubkey, dTag] = parts; |
||||||
|
if (kind === "30040") { |
||||||
|
return "Comments on Collection"; |
||||||
|
} |
||||||
|
if (kind === "30041" && dTag) { |
||||||
|
return `Section: ${dTag}`; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Fallback to truncated address/id |
||||||
|
return target.length > 20 ? `${target.substring(0, 20)}...` : target; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Fetch profile for a pubkey |
||||||
|
*/ |
||||||
|
async function fetchProfile(pubkey: string) { |
||||||
|
if (profiles.has(pubkey)) return; |
||||||
|
|
||||||
|
try { |
||||||
|
const npub = toNpub(pubkey); |
||||||
|
if (!npub) { |
||||||
|
setFallbackProfile(pubkey); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const profile = await getUserMetadata(npub, ndk, true); |
||||||
|
const newProfiles = new Map(profiles); |
||||||
|
newProfiles.set(pubkey, profile); |
||||||
|
profiles = newProfiles; |
||||||
|
|
||||||
|
console.log(`[CommentPanel] Fetched profile for ${pubkey}:`, profile); |
||||||
|
} catch (err) { |
||||||
|
console.warn(`[CommentPanel] Failed to fetch profile for ${pubkey}:`, err); |
||||||
|
setFallbackProfile(pubkey); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Set fallback profile using truncated npub |
||||||
|
*/ |
||||||
|
function setFallbackProfile(pubkey: string) { |
||||||
|
const npub = toNpub(pubkey) || pubkey; |
||||||
|
const truncated = `${npub.slice(0, 12)}...${npub.slice(-4)}`; |
||||||
|
const fallbackProfile = { |
||||||
|
name: truncated, |
||||||
|
displayName: truncated, |
||||||
|
picture: null |
||||||
|
}; |
||||||
|
const newProfiles = new Map(profiles); |
||||||
|
newProfiles.set(pubkey, fallbackProfile); |
||||||
|
profiles = newProfiles; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Get display name for a pubkey |
||||||
|
*/ |
||||||
|
function getDisplayName(pubkey: string): string { |
||||||
|
const profile = profiles.get(pubkey); |
||||||
|
if (profile) { |
||||||
|
return profile.displayName || profile.name || profile.pubkey || pubkey; |
||||||
|
} |
||||||
|
// Return truncated npub while loading |
||||||
|
const npub = toNpub(pubkey) || pubkey; |
||||||
|
return `${npub.slice(0, 12)}...${npub.slice(-4)}`; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Toggle section expansion |
||||||
|
*/ |
||||||
|
function toggleSection(target: string) { |
||||||
|
const newExpanded = new Set(expandedSections); |
||||||
|
if (newExpanded.has(target)) { |
||||||
|
newExpanded.delete(target); |
||||||
|
} else { |
||||||
|
newExpanded.add(target); |
||||||
|
} |
||||||
|
expandedSections = newExpanded; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Format timestamp |
||||||
|
*/ |
||||||
|
function formatTimestamp(timestamp: number): string { |
||||||
|
const date = new Date(timestamp * 1000); |
||||||
|
const now = new Date(); |
||||||
|
const diffMs = now.getTime() - date.getTime(); |
||||||
|
const diffMins = Math.floor(diffMs / 60000); |
||||||
|
const diffHours = Math.floor(diffMs / 3600000); |
||||||
|
const diffDays = Math.floor(diffMs / 86400000); |
||||||
|
|
||||||
|
if (diffMins < 60) { |
||||||
|
return `${diffMins}m ago`; |
||||||
|
} else if (diffHours < 24) { |
||||||
|
return `${diffHours}h ago`; |
||||||
|
} else if (diffDays < 7) { |
||||||
|
return `${diffDays}d ago`; |
||||||
|
} else { |
||||||
|
return date.toLocaleDateString(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Pre-fetch all profiles when comments change |
||||||
|
*/ |
||||||
|
$effect(() => { |
||||||
|
const uniquePubkeys = new Set(comments.map(c => c.pubkey)); |
||||||
|
console.log(`[CommentPanel] Pre-fetching ${uniquePubkeys.size} profiles`); |
||||||
|
for (const pubkey of uniquePubkeys) { |
||||||
|
fetchProfile(pubkey); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if comments.length > 0} |
||||||
|
<div class="fixed right-4 top-20 bottom-4 w-96 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col z-40"> |
||||||
|
<!-- Header --> |
||||||
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
||||||
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100"> |
||||||
|
Comments ({comments.length}) |
||||||
|
</h3> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Comment groups --> |
||||||
|
<div class="flex-1 overflow-y-auto p-4 space-y-4"> |
||||||
|
{#each Array.from(groupedComments.entries()) as [target, targetComments]} |
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> |
||||||
|
<!-- Section header --> |
||||||
|
<button |
||||||
|
class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 dark:bg-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" |
||||||
|
onclick={() => toggleSection(target)} |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2"> |
||||||
|
{#if expandedSections.has(target)} |
||||||
|
<ChevronDownOutline class="w-4 h-4 text-gray-600 dark:text-gray-400" /> |
||||||
|
{:else} |
||||||
|
<ChevronRightOutline class="w-4 h-4 text-gray-600 dark:text-gray-400" /> |
||||||
|
{/if} |
||||||
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-100"> |
||||||
|
{getTargetLabel(target)} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<span class="text-xs text-gray-500 dark:text-gray-400"> |
||||||
|
{targetComments.length} {targetComments.length === 1 ? 'comment' : 'comments'} |
||||||
|
</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<!-- Comment list --> |
||||||
|
{#if expandedSections.has(target)} |
||||||
|
<div class="divide-y divide-gray-200 dark:divide-gray-700"> |
||||||
|
{#each targetComments as comment (comment.id)} |
||||||
|
<div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors"> |
||||||
|
<!-- Comment header --> |
||||||
|
<div class="flex items-start gap-3 mb-2"> |
||||||
|
<div class="flex-1 min-w-0"> |
||||||
|
<div class="flex items-baseline gap-2"> |
||||||
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate"> |
||||||
|
{getDisplayName(comment.pubkey)} |
||||||
|
</span> |
||||||
|
<span class="text-xs text-gray-500 dark:text-gray-400"> |
||||||
|
{formatTimestamp(comment.created_at || 0)} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Comment content --> |
||||||
|
<div class="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none"> |
||||||
|
{@render basicMarkup(comment.content)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
|
||||||
|
{#if groupedComments.size === 0 && comments.length > 0} |
||||||
|
<div class="text-center py-8"> |
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400"> |
||||||
|
Comments loaded but couldn't determine their targets |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
|
||||||
|
<style> |
||||||
|
/* Custom scrollbar for comment panel */ |
||||||
|
.overflow-y-auto { |
||||||
|
scrollbar-width: thin; |
||||||
|
scrollbar-color: rgba(156, 163, 175, 0.5) transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.overflow-y-auto::-webkit-scrollbar { |
||||||
|
width: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.overflow-y-auto::-webkit-scrollbar-track { |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.overflow-y-auto::-webkit-scrollbar-thumb { |
||||||
|
background-color: rgba(156, 163, 175, 0.5); |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.overflow-y-auto::-webkit-scrollbar-thumb:hover { |
||||||
|
background-color: rgba(156, 163, 175, 0.7); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,323 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||||
|
import { getUserMetadata, toNpub } from "$lib/utils/nostrUtils"; |
||||||
|
import { getNdkContext } from "$lib/ndk"; |
||||||
|
import { basicMarkup } from "$lib/snippets/MarkupSnippets.svelte"; |
||||||
|
import { ChevronDownOutline, ChevronRightOutline } from "flowbite-svelte-icons"; |
||||||
|
import { nip19 } from "nostr-tools"; |
||||||
|
|
||||||
|
let { |
||||||
|
sectionAddress, |
||||||
|
comments = [], |
||||||
|
visible = true, |
||||||
|
}: { |
||||||
|
sectionAddress: string; |
||||||
|
comments: NDKEvent[]; |
||||||
|
visible?: boolean; |
||||||
|
} = $props(); |
||||||
|
|
||||||
|
const ndk = getNdkContext(); |
||||||
|
|
||||||
|
// State management |
||||||
|
let profiles = $state(new Map<string, any>()); |
||||||
|
let expandedThreads = $state(new Set<string>()); |
||||||
|
|
||||||
|
/** |
||||||
|
* Parse comment threading structure |
||||||
|
* Root comments have no 'e' tag with 'reply' marker |
||||||
|
*/ |
||||||
|
function buildThreadStructure(allComments: NDKEvent[]) { |
||||||
|
const rootComments: NDKEvent[] = []; |
||||||
|
const repliesByParent = new Map<string, NDKEvent[]>(); |
||||||
|
|
||||||
|
for (const comment of allComments) { |
||||||
|
// Check if this is a reply by looking for 'e' tags with 'reply' marker |
||||||
|
const replyTag = comment.tags.find(t => t[0] === 'e' && t[3] === 'reply'); |
||||||
|
|
||||||
|
if (replyTag) { |
||||||
|
const parentId = replyTag[1]; |
||||||
|
if (!repliesByParent.has(parentId)) { |
||||||
|
repliesByParent.set(parentId, []); |
||||||
|
} |
||||||
|
repliesByParent.get(parentId)!.push(comment); |
||||||
|
} else { |
||||||
|
// This is a root comment (no reply tag) |
||||||
|
rootComments.push(comment); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { rootComments, repliesByParent }; |
||||||
|
} |
||||||
|
|
||||||
|
let threadStructure = $derived(buildThreadStructure(comments)); |
||||||
|
|
||||||
|
/** |
||||||
|
* Count replies for a comment thread |
||||||
|
*/ |
||||||
|
function countReplies(commentId: string, repliesMap: Map<string, NDKEvent[]>): number { |
||||||
|
const directReplies = repliesMap.get(commentId) || []; |
||||||
|
let count = directReplies.length; |
||||||
|
|
||||||
|
// Recursively count nested replies |
||||||
|
for (const reply of directReplies) { |
||||||
|
count += countReplies(reply.id, repliesMap); |
||||||
|
} |
||||||
|
|
||||||
|
return count; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Get display name for a pubkey |
||||||
|
*/ |
||||||
|
function getDisplayName(pubkey: string): string { |
||||||
|
const profile = profiles.get(pubkey); |
||||||
|
if (profile) { |
||||||
|
return profile.displayName || profile.name || profile.pubkey || pubkey; |
||||||
|
} |
||||||
|
const npub = toNpub(pubkey) || pubkey; |
||||||
|
return `${npub.slice(0, 12)}...`; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Format timestamp |
||||||
|
*/ |
||||||
|
function formatTimestamp(timestamp: number): string { |
||||||
|
const date = new Date(timestamp * 1000); |
||||||
|
const now = new Date(); |
||||||
|
const diffMs = now.getTime() - date.getTime(); |
||||||
|
const diffMins = Math.floor(diffMs / 60000); |
||||||
|
const diffHours = Math.floor(diffMs / 3600000); |
||||||
|
const diffDays = Math.floor(diffMs / 86400000); |
||||||
|
|
||||||
|
if (diffMins < 60) { |
||||||
|
return `${diffMins}m ago`; |
||||||
|
} else if (diffHours < 24) { |
||||||
|
return `${diffHours}h ago`; |
||||||
|
} else if (diffDays < 7) { |
||||||
|
return `${diffDays}d ago`; |
||||||
|
} else { |
||||||
|
return date.toLocaleDateString(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Fetch profile for a pubkey |
||||||
|
*/ |
||||||
|
async function fetchProfile(pubkey: string) { |
||||||
|
if (profiles.has(pubkey)) return; |
||||||
|
|
||||||
|
try { |
||||||
|
const npub = toNpub(pubkey); |
||||||
|
if (!npub) { |
||||||
|
setFallbackProfile(pubkey); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const profile = await getUserMetadata(npub, ndk, true); |
||||||
|
const newProfiles = new Map(profiles); |
||||||
|
newProfiles.set(pubkey, profile); |
||||||
|
profiles = newProfiles; |
||||||
|
} catch (err) { |
||||||
|
setFallbackProfile(pubkey); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function setFallbackProfile(pubkey: string) { |
||||||
|
const npub = toNpub(pubkey) || pubkey; |
||||||
|
const truncated = `${npub.slice(0, 12)}...`; |
||||||
|
const fallbackProfile = { |
||||||
|
name: truncated, |
||||||
|
displayName: truncated, |
||||||
|
picture: null |
||||||
|
}; |
||||||
|
const newProfiles = new Map(profiles); |
||||||
|
newProfiles.set(pubkey, fallbackProfile); |
||||||
|
profiles = newProfiles; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Toggle thread expansion |
||||||
|
*/ |
||||||
|
function toggleThread(commentId: string) { |
||||||
|
const newExpanded = new Set(expandedThreads); |
||||||
|
if (newExpanded.has(commentId)) { |
||||||
|
newExpanded.delete(commentId); |
||||||
|
} else { |
||||||
|
newExpanded.add(commentId); |
||||||
|
} |
||||||
|
expandedThreads = newExpanded; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Render nested replies recursively |
||||||
|
*/ |
||||||
|
function renderReplies(parentId: string, repliesMap: Map<string, NDKEvent[]>, level: number = 0) { |
||||||
|
const replies = repliesMap.get(parentId) || []; |
||||||
|
return replies; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Copy nevent to clipboard |
||||||
|
*/ |
||||||
|
async function copyNevent(event: NDKEvent) { |
||||||
|
try { |
||||||
|
const nevent = nip19.neventEncode({ |
||||||
|
id: event.id, |
||||||
|
author: event.pubkey, |
||||||
|
kind: event.kind, |
||||||
|
}); |
||||||
|
await navigator.clipboard.writeText(nevent); |
||||||
|
console.log('Copied nevent to clipboard:', nevent); |
||||||
|
} catch (err) { |
||||||
|
console.error('Failed to copy nevent:', err); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Pre-fetch profiles for all comment authors |
||||||
|
*/ |
||||||
|
$effect(() => { |
||||||
|
const uniquePubkeys = new Set(comments.map(c => c.pubkey)); |
||||||
|
for (const pubkey of uniquePubkeys) { |
||||||
|
fetchProfile(pubkey); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if visible && threadStructure.rootComments.length > 0} |
||||||
|
<div class="space-y-1"> |
||||||
|
{#each threadStructure.rootComments as rootComment (rootComment.id)} |
||||||
|
{@const replyCount = countReplies(rootComment.id, threadStructure.repliesByParent)} |
||||||
|
{@const isExpanded = expandedThreads.has(rootComment.id)} |
||||||
|
|
||||||
|
<div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-800 shadow-sm"> |
||||||
|
<!-- Multi-row collapsed view --> |
||||||
|
{#if !isExpanded} |
||||||
|
<div class="flex gap-2 px-3 py-2 text-sm"> |
||||||
|
<button |
||||||
|
class="flex-shrink-0 mt-1" |
||||||
|
onclick={() => toggleThread(rootComment.id)} |
||||||
|
aria-label="Expand comment" |
||||||
|
> |
||||||
|
<ChevronRightOutline class="w-3 h-3 text-gray-600 dark:text-gray-400" /> |
||||||
|
</button> |
||||||
|
|
||||||
|
<div class="flex-1 min-w-0"> |
||||||
|
<p class="line-clamp-3 text-gray-700 dark:text-gray-300 mb-1"> |
||||||
|
{rootComment.content} |
||||||
|
</p> |
||||||
|
<div class="flex items-center gap-2 text-xs"> |
||||||
|
<button |
||||||
|
class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors" |
||||||
|
onclick={(e) => { e.stopPropagation(); copyNevent(rootComment); }} |
||||||
|
title="Copy nevent to clipboard" |
||||||
|
> |
||||||
|
{getDisplayName(rootComment.pubkey)} |
||||||
|
</button> |
||||||
|
{#if replyCount > 0} |
||||||
|
<span class="text-gray-400 dark:text-gray-500">•</span> |
||||||
|
<span class="text-blue-600 dark:text-blue-400"> |
||||||
|
{replyCount} {replyCount === 1 ? 'reply' : 'replies'} |
||||||
|
</span> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{:else} |
||||||
|
<!-- Expanded view --> |
||||||
|
<div class="flex flex-col"> |
||||||
|
<!-- Expanded header row --> |
||||||
|
<div class="flex items-center gap-2 px-3 py-2 text-sm border-b border-gray-200 dark:border-gray-700"> |
||||||
|
<button |
||||||
|
class="flex-shrink-0" |
||||||
|
onclick={() => toggleThread(rootComment.id)} |
||||||
|
aria-label="Collapse comment" |
||||||
|
> |
||||||
|
<ChevronDownOutline class="w-3 h-3 text-gray-600 dark:text-gray-400" /> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button |
||||||
|
class="flex-shrink-0 font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-400 transition-colors" |
||||||
|
onclick={(e) => { e.stopPropagation(); copyNevent(rootComment); }} |
||||||
|
title="Copy nevent to clipboard" |
||||||
|
> |
||||||
|
{getDisplayName(rootComment.pubkey)} |
||||||
|
</button> |
||||||
|
|
||||||
|
<span class="text-xs text-gray-500 dark:text-gray-400"> |
||||||
|
{formatTimestamp(rootComment.created_at || 0)} |
||||||
|
</span> |
||||||
|
|
||||||
|
{#if replyCount > 0} |
||||||
|
<span class="text-xs text-blue-600 dark:text-blue-400"> |
||||||
|
{replyCount} {replyCount === 1 ? 'reply' : 'replies'} |
||||||
|
</span> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Full content --> |
||||||
|
<div class="px-3 py-3"> |
||||||
|
<div class="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none mb-3"> |
||||||
|
{@render basicMarkup(rootComment.content)} |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Replies --> |
||||||
|
{#if replyCount > 0} |
||||||
|
<div class="pl-4 border-l-2 border-gray-200 dark:border-gray-600 space-y-2"> |
||||||
|
{#each renderReplies(rootComment.id, threadStructure.repliesByParent) as reply (reply.id)} |
||||||
|
<div class="bg-gray-50 dark:bg-gray-700/30 rounded p-3"> |
||||||
|
<div class="flex items-baseline gap-2 mb-2"> |
||||||
|
<button |
||||||
|
class="text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-400 transition-colors" |
||||||
|
onclick={(e) => { e.stopPropagation(); copyNevent(reply); }} |
||||||
|
title="Copy nevent to clipboard" |
||||||
|
> |
||||||
|
{getDisplayName(reply.pubkey)} |
||||||
|
</button> |
||||||
|
<span class="text-xs text-gray-500 dark:text-gray-400"> |
||||||
|
{formatTimestamp(reply.created_at || 0)} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none"> |
||||||
|
{@render basicMarkup(reply.content)} |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Nested replies (one level deep) --> |
||||||
|
{#each renderReplies(reply.id, threadStructure.repliesByParent) as nestedReply (nestedReply.id)} |
||||||
|
<div class="ml-4 mt-2 bg-gray-100 dark:bg-gray-600/30 rounded p-2"> |
||||||
|
<div class="flex items-baseline gap-2 mb-1"> |
||||||
|
<button |
||||||
|
class="text-xs font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-400 transition-colors" |
||||||
|
onclick={(e) => { e.stopPropagation(); copyNevent(nestedReply); }} |
||||||
|
title="Copy nevent to clipboard" |
||||||
|
> |
||||||
|
{getDisplayName(nestedReply.pubkey)} |
||||||
|
</button> |
||||||
|
<span class="text-xs text-gray-500 dark:text-gray-400"> |
||||||
|
{formatTimestamp(nestedReply.created_at || 0)} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="text-xs text-gray-700 dark:text-gray-300"> |
||||||
|
{@render basicMarkup(nestedReply.content)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
|
||||||
|
<style> |
||||||
|
/* Ensure proper text wrapping */ |
||||||
|
.prose { |
||||||
|
word-wrap: break-word; |
||||||
|
overflow-wrap: break-word; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,177 @@ |
|||||||
|
import { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||||
|
import type NDK from "@nostr-dev-kit/ndk"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Generate mock comment data for testing comment UI and threading |
||||||
|
* Creates realistic thread structures with root comments and nested replies |
||||||
|
*/ |
||||||
|
|
||||||
|
const loremIpsumComments = [ |
||||||
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", |
||||||
|
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", |
||||||
|
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", |
||||||
|
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", |
||||||
|
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.", |
||||||
|
"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.", |
||||||
|
"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.", |
||||||
|
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.", |
||||||
|
"Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.", |
||||||
|
"Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.", |
||||||
|
]; |
||||||
|
|
||||||
|
const loremIpsumReplies = [ |
||||||
|
"Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.", |
||||||
|
"Vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.", |
||||||
|
"Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.", |
||||||
|
"Omnis voluptas assumenda est, omnis dolor repellendus.", |
||||||
|
"Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur.", |
||||||
|
"Facere possimus, omnis voluptas assumenda est.", |
||||||
|
"Sed ut perspiciatis unde omnis iste natus error.", |
||||||
|
"Accusantium doloremque laudantium, totam rem aperiam.", |
||||||
|
]; |
||||||
|
|
||||||
|
const mockPubkeys = [ |
||||||
|
"a1b2c3d4e5f6789012345678901234567890123456789012345678901234abcd", |
||||||
|
"b2c3d4e5f6789012345678901234567890123456789012345678901234abcde", |
||||||
|
"c3d4e5f6789012345678901234567890123456789012345678901234abcdef0", |
||||||
|
"d4e5f6789012345678901234567890123456789012345678901234abcdef01", |
||||||
|
]; |
||||||
|
|
||||||
|
/** |
||||||
|
* Create a mock NDKEvent that looks like a real comment |
||||||
|
*/ |
||||||
|
function createMockComment( |
||||||
|
id: string, |
||||||
|
content: string, |
||||||
|
pubkey: string, |
||||||
|
targetAddress: string, |
||||||
|
createdAt: number, |
||||||
|
replyToId?: string, |
||||||
|
replyToAuthor?: string |
||||||
|
): any { |
||||||
|
const tags: string[][] = [ |
||||||
|
["A", targetAddress, "wss://relay.damus.io", pubkey], |
||||||
|
["K", "30041"], |
||||||
|
["P", pubkey, "wss://relay.damus.io"], |
||||||
|
["a", targetAddress, "wss://relay.damus.io"], |
||||||
|
["k", "30041"], |
||||||
|
["p", pubkey, "wss://relay.damus.io"], |
||||||
|
]; |
||||||
|
|
||||||
|
if (replyToId && replyToAuthor) { |
||||||
|
tags.push(["e", replyToId, "wss://relay.damus.io", "reply"]); |
||||||
|
tags.push(["p", replyToAuthor, "wss://relay.damus.io"]); |
||||||
|
} |
||||||
|
|
||||||
|
// Return a plain object that matches NDKEvent structure
|
||||||
|
return { |
||||||
|
id, |
||||||
|
kind: 1111, |
||||||
|
pubkey, |
||||||
|
created_at: createdAt, |
||||||
|
content, |
||||||
|
tags, |
||||||
|
sig: "mock-signature-" + id, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Generate mock comment thread structure |
||||||
|
* @param sectionAddress - The section address to attach comments to |
||||||
|
* @param numRootComments - Number of root comments to generate (default: 3) |
||||||
|
* @param numRepliesPerThread - Number of replies per thread (default: 2) |
||||||
|
* @returns Array of mock comment objects |
||||||
|
*/ |
||||||
|
export function generateMockComments( |
||||||
|
sectionAddress: string, |
||||||
|
numRootComments: number = 3, |
||||||
|
numRepliesPerThread: number = 2 |
||||||
|
): any[] { |
||||||
|
const comments: any[] = []; |
||||||
|
const now = Math.floor(Date.now() / 1000); |
||||||
|
let commentIndex = 0; |
||||||
|
|
||||||
|
// Generate root comments
|
||||||
|
for (let i = 0; i < numRootComments; i++) { |
||||||
|
const rootId = `mock-root-${i}-${Date.now()}`; |
||||||
|
const rootPubkey = mockPubkeys[i % mockPubkeys.length]; |
||||||
|
const rootContent = loremIpsumComments[i % loremIpsumComments.length]; |
||||||
|
const rootCreatedAt = now - (numRootComments - i) * 3600; // Stagger by hours
|
||||||
|
|
||||||
|
const rootComment = createMockComment( |
||||||
|
rootId, |
||||||
|
rootContent, |
||||||
|
rootPubkey, |
||||||
|
sectionAddress, |
||||||
|
rootCreatedAt |
||||||
|
); |
||||||
|
|
||||||
|
comments.push(rootComment); |
||||||
|
|
||||||
|
// Generate replies to this root comment
|
||||||
|
for (let j = 0; j < numRepliesPerThread; j++) { |
||||||
|
const replyId = `mock-reply-${i}-${j}-${Date.now()}`; |
||||||
|
const replyPubkey = mockPubkeys[(i + j + 1) % mockPubkeys.length]; |
||||||
|
const replyContent = loremIpsumReplies[commentIndex % loremIpsumReplies.length]; |
||||||
|
const replyCreatedAt = rootCreatedAt + (j + 1) * 1800; // 30 min after each
|
||||||
|
|
||||||
|
const reply = createMockComment( |
||||||
|
replyId, |
||||||
|
replyContent, |
||||||
|
replyPubkey, |
||||||
|
sectionAddress, |
||||||
|
replyCreatedAt, |
||||||
|
rootId, |
||||||
|
rootPubkey |
||||||
|
); |
||||||
|
|
||||||
|
comments.push(reply); |
||||||
|
|
||||||
|
// Optionally add a nested reply (reply to reply)
|
||||||
|
if (j === 0 && i < 2) { |
||||||
|
const nestedId = `mock-nested-${i}-${j}-${Date.now()}`; |
||||||
|
const nestedPubkey = mockPubkeys[(i + j + 2) % mockPubkeys.length]; |
||||||
|
const nestedContent = loremIpsumReplies[(commentIndex + 1) % loremIpsumReplies.length]; |
||||||
|
const nestedCreatedAt = replyCreatedAt + 900; // 15 min after reply
|
||||||
|
|
||||||
|
const nested = createMockComment( |
||||||
|
nestedId, |
||||||
|
nestedContent, |
||||||
|
nestedPubkey, |
||||||
|
sectionAddress, |
||||||
|
nestedCreatedAt, |
||||||
|
replyId, |
||||||
|
replyPubkey |
||||||
|
); |
||||||
|
|
||||||
|
comments.push(nested); |
||||||
|
} |
||||||
|
|
||||||
|
commentIndex++; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return comments; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Generate mock comments for multiple sections |
||||||
|
* @param sectionAddresses - Array of section addresses |
||||||
|
* @returns Array of all mock comments across all sections |
||||||
|
*/ |
||||||
|
export function generateMockCommentsForSections( |
||||||
|
sectionAddresses: string[] |
||||||
|
): any[] { |
||||||
|
const allComments: any[] = []; |
||||||
|
|
||||||
|
sectionAddresses.forEach((address, index) => { |
||||||
|
// Vary the number of comments per section
|
||||||
|
const numRoot = 2 + (index % 3); // 2-4 root comments
|
||||||
|
const numReplies = 1 + (index % 2); // 1-2 replies per thread
|
||||||
|
|
||||||
|
const sectionComments = generateMockComments(address, numRoot, numReplies); |
||||||
|
allComments.push(...sectionComments); |
||||||
|
}); |
||||||
|
|
||||||
|
return allComments; |
||||||
|
} |
||||||
@ -0,0 +1,911 @@ |
|||||||
|
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; |
||||||
|
import { get, writable } from 'svelte/store'; |
||||||
|
import type { UserState } from '../../src/lib/stores/userStore'; |
||||||
|
import { NDKEvent } from '@nostr-dev-kit/ndk'; |
||||||
|
|
||||||
|
// Mock userStore
|
||||||
|
const createMockUserStore = (signedIn: boolean = false) => { |
||||||
|
const store = writable<UserState>({ |
||||||
|
pubkey: signedIn ? 'a'.repeat(64) : null, |
||||||
|
npub: signedIn ? 'npub1test' : null, |
||||||
|
profile: signedIn ? { |
||||||
|
name: 'Test User', |
||||||
|
displayName: 'Test User', |
||||||
|
picture: 'https://example.com/avatar.jpg', |
||||||
|
} : null, |
||||||
|
relays: { inbox: [], outbox: [] }, |
||||||
|
loginMethod: signedIn ? 'extension' : null, |
||||||
|
ndkUser: null, |
||||||
|
signer: signedIn ? { sign: vi.fn() } as any : null, |
||||||
|
signedIn, |
||||||
|
}); |
||||||
|
return store; |
||||||
|
}; |
||||||
|
|
||||||
|
// Mock activeOutboxRelays
|
||||||
|
const mockActiveOutboxRelays = writable<string[]>(['wss://relay.example.com']); |
||||||
|
|
||||||
|
// Mock NDK
|
||||||
|
const createMockNDK = () => ({ |
||||||
|
fetchEvent: vi.fn(), |
||||||
|
publish: vi.fn(), |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - Address Parsing', () => { |
||||||
|
it('parses valid event address correctly', () => { |
||||||
|
const address = '30041:abc123def456:my-article'; |
||||||
|
const parts = address.split(':'); |
||||||
|
|
||||||
|
expect(parts).toHaveLength(3); |
||||||
|
|
||||||
|
const [kindStr, pubkey, dTag] = parts; |
||||||
|
const kind = parseInt(kindStr); |
||||||
|
|
||||||
|
expect(kind).toBe(30041); |
||||||
|
expect(pubkey).toBe('abc123def456'); |
||||||
|
expect(dTag).toBe('my-article'); |
||||||
|
expect(isNaN(kind)).toBe(false); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles dTag with colons correctly', () => { |
||||||
|
const address = '30041:abc123:article:with:colons'; |
||||||
|
const parts = address.split(':'); |
||||||
|
|
||||||
|
expect(parts.length).toBeGreaterThanOrEqual(3); |
||||||
|
|
||||||
|
const [kindStr, pubkey, ...dTagParts] = parts; |
||||||
|
const dTag = dTagParts.join(':'); |
||||||
|
|
||||||
|
expect(parseInt(kindStr)).toBe(30041); |
||||||
|
expect(pubkey).toBe('abc123'); |
||||||
|
expect(dTag).toBe('article:with:colons'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('returns null for invalid address format (too few parts)', () => { |
||||||
|
const address = '30041:abc123'; |
||||||
|
const parts = address.split(':'); |
||||||
|
|
||||||
|
if (parts.length !== 3) { |
||||||
|
expect(parts.length).toBeLessThan(3); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
it('returns null for invalid address format (invalid kind)', () => { |
||||||
|
const address = 'invalid:abc123:dtag'; |
||||||
|
const parts = address.split(':'); |
||||||
|
const kind = parseInt(parts[0]); |
||||||
|
|
||||||
|
expect(isNaN(kind)).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('parses different publication kinds correctly', () => { |
||||||
|
const addresses = [ |
||||||
|
'30040:pubkey:section-id', // Zettel section
|
||||||
|
'30041:pubkey:article-id', // Long-form article
|
||||||
|
'30818:pubkey:wiki-id', // Wiki article
|
||||||
|
'30023:pubkey:blog-id', // Blog post
|
||||||
|
]; |
||||||
|
|
||||||
|
addresses.forEach(address => { |
||||||
|
const parts = address.split(':'); |
||||||
|
const kind = parseInt(parts[0]); |
||||||
|
|
||||||
|
expect(isNaN(kind)).toBe(false); |
||||||
|
expect(kind).toBeGreaterThan(0); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - NIP-22 Event Creation', () => { |
||||||
|
let mockNDK: any; |
||||||
|
let mockUserStore: any; |
||||||
|
let mockActiveOutboxRelays: any; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
mockNDK = createMockNDK(); |
||||||
|
mockUserStore = createMockUserStore(true); |
||||||
|
mockActiveOutboxRelays = writable(['wss://relay.example.com']); |
||||||
|
}); |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
vi.clearAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('creates kind 1111 comment event', async () => { |
||||||
|
const address = '30041:' + 'a'.repeat(64) + ':my-article'; |
||||||
|
const content = 'This is my comment'; |
||||||
|
|
||||||
|
// Mock event creation
|
||||||
|
const commentEvent = new NDKEvent(mockNDK); |
||||||
|
commentEvent.kind = 1111; |
||||||
|
commentEvent.content = content; |
||||||
|
|
||||||
|
expect(commentEvent.kind).toBe(1111); |
||||||
|
expect(commentEvent.content).toBe(content); |
||||||
|
}); |
||||||
|
|
||||||
|
it('includes correct uppercase tags (A, K, P) for root', () => { |
||||||
|
const address = '30041:' + 'b'.repeat(64) + ':article-id'; |
||||||
|
const authorPubkey = 'b'.repeat(64); |
||||||
|
const kind = 30041; |
||||||
|
const relayHint = 'wss://relay.example.com'; |
||||||
|
|
||||||
|
const tags = [ |
||||||
|
['A', address, relayHint, authorPubkey], |
||||||
|
['K', kind.toString()], |
||||||
|
['P', authorPubkey, relayHint], |
||||||
|
]; |
||||||
|
|
||||||
|
// Verify uppercase root tags
|
||||||
|
expect(tags[0][0]).toBe('A'); |
||||||
|
expect(tags[0][1]).toBe(address); |
||||||
|
expect(tags[0][2]).toBe(relayHint); |
||||||
|
expect(tags[0][3]).toBe(authorPubkey); |
||||||
|
|
||||||
|
expect(tags[1][0]).toBe('K'); |
||||||
|
expect(tags[1][1]).toBe(kind.toString()); |
||||||
|
|
||||||
|
expect(tags[2][0]).toBe('P'); |
||||||
|
expect(tags[2][1]).toBe(authorPubkey); |
||||||
|
expect(tags[2][2]).toBe(relayHint); |
||||||
|
}); |
||||||
|
|
||||||
|
it('includes correct lowercase tags (a, k, p) for parent', () => { |
||||||
|
const address = '30041:' + 'c'.repeat(64) + ':article-id'; |
||||||
|
const authorPubkey = 'c'.repeat(64); |
||||||
|
const kind = 30041; |
||||||
|
const relayHint = 'wss://relay.example.com'; |
||||||
|
|
||||||
|
const tags = [ |
||||||
|
['a', address, relayHint], |
||||||
|
['k', kind.toString()], |
||||||
|
['p', authorPubkey, relayHint], |
||||||
|
]; |
||||||
|
|
||||||
|
// Verify lowercase parent tags
|
||||||
|
expect(tags[0][0]).toBe('a'); |
||||||
|
expect(tags[0][1]).toBe(address); |
||||||
|
expect(tags[0][2]).toBe(relayHint); |
||||||
|
|
||||||
|
expect(tags[1][0]).toBe('k'); |
||||||
|
expect(tags[1][1]).toBe(kind.toString()); |
||||||
|
|
||||||
|
expect(tags[2][0]).toBe('p'); |
||||||
|
expect(tags[2][1]).toBe(authorPubkey); |
||||||
|
expect(tags[2][2]).toBe(relayHint); |
||||||
|
}); |
||||||
|
|
||||||
|
it('includes e tag with event ID when available', () => { |
||||||
|
const eventId = 'd'.repeat(64); |
||||||
|
const relayHint = 'wss://relay.example.com'; |
||||||
|
|
||||||
|
const eTag = ['e', eventId, relayHint]; |
||||||
|
|
||||||
|
expect(eTag[0]).toBe('e'); |
||||||
|
expect(eTag[1]).toBe(eventId); |
||||||
|
expect(eTag[2]).toBe(relayHint); |
||||||
|
expect(eTag[1]).toHaveLength(64); |
||||||
|
}); |
||||||
|
|
||||||
|
it('creates complete NIP-22 tag structure', () => { |
||||||
|
const address = '30041:' + 'e'.repeat(64) + ':test-article'; |
||||||
|
const authorPubkey = 'e'.repeat(64); |
||||||
|
const kind = 30041; |
||||||
|
const eventId = 'f'.repeat(64); |
||||||
|
const relayHint = 'wss://relay.example.com'; |
||||||
|
|
||||||
|
const tags = [ |
||||||
|
// Root scope - uppercase tags
|
||||||
|
['A', address, relayHint, authorPubkey], |
||||||
|
['K', kind.toString()], |
||||||
|
['P', authorPubkey, relayHint], |
||||||
|
|
||||||
|
// Parent scope - lowercase tags
|
||||||
|
['a', address, relayHint], |
||||||
|
['k', kind.toString()], |
||||||
|
['p', authorPubkey, relayHint], |
||||||
|
|
||||||
|
// Event ID
|
||||||
|
['e', eventId, relayHint], |
||||||
|
]; |
||||||
|
|
||||||
|
// Verify all tags are present
|
||||||
|
expect(tags).toHaveLength(7); |
||||||
|
|
||||||
|
// Verify root tags
|
||||||
|
expect(tags.filter(t => t[0] === 'A')).toHaveLength(1); |
||||||
|
expect(tags.filter(t => t[0] === 'K')).toHaveLength(1); |
||||||
|
expect(tags.filter(t => t[0] === 'P')).toHaveLength(1); |
||||||
|
|
||||||
|
// Verify parent tags
|
||||||
|
expect(tags.filter(t => t[0] === 'a')).toHaveLength(1); |
||||||
|
expect(tags.filter(t => t[0] === 'k')).toHaveLength(1); |
||||||
|
expect(tags.filter(t => t[0] === 'p')).toHaveLength(1); |
||||||
|
|
||||||
|
// Verify event tag
|
||||||
|
expect(tags.filter(t => t[0] === 'e')).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('uses correct relay hints from activeOutboxRelays', () => { |
||||||
|
const relays = get(mockActiveOutboxRelays); |
||||||
|
const relayHint = relays[0]; |
||||||
|
|
||||||
|
expect(relayHint).toBe('wss://relay.example.com'); |
||||||
|
expect(relays).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles multiple outbox relays correctly', () => { |
||||||
|
const multipleRelays = writable([ |
||||||
|
'wss://relay1.example.com', |
||||||
|
'wss://relay2.example.com', |
||||||
|
'wss://relay3.example.com', |
||||||
|
]); |
||||||
|
|
||||||
|
const relays = get(multipleRelays); |
||||||
|
const relayHint = relays[0]; |
||||||
|
|
||||||
|
expect(relayHint).toBe('wss://relay1.example.com'); |
||||||
|
expect(relays).toHaveLength(3); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles empty relay list gracefully', () => { |
||||||
|
const emptyRelays = writable<string[]>([]); |
||||||
|
const relays = get(emptyRelays); |
||||||
|
const relayHint = relays[0] || ''; |
||||||
|
|
||||||
|
expect(relayHint).toBe(''); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - Event Signing and Publishing', () => { |
||||||
|
let mockNDK: any; |
||||||
|
let mockSigner: any; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
mockNDK = createMockNDK(); |
||||||
|
mockSigner = { |
||||||
|
sign: vi.fn().mockResolvedValue(undefined), |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
vi.clearAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('signs event with user signer', async () => { |
||||||
|
const commentEvent = new NDKEvent(mockNDK); |
||||||
|
commentEvent.kind = 1111; |
||||||
|
commentEvent.content = 'Test comment'; |
||||||
|
|
||||||
|
await mockSigner.sign(commentEvent); |
||||||
|
|
||||||
|
expect(mockSigner.sign).toHaveBeenCalledWith(commentEvent); |
||||||
|
expect(mockSigner.sign).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('publishes to outbox relays', async () => { |
||||||
|
const publishMock = vi.fn().mockResolvedValue(new Set(['wss://relay.example.com'])); |
||||||
|
|
||||||
|
const commentEvent = new NDKEvent(mockNDK); |
||||||
|
commentEvent.publish = publishMock; |
||||||
|
|
||||||
|
const publishedRelays = await commentEvent.publish(); |
||||||
|
|
||||||
|
expect(publishMock).toHaveBeenCalled(); |
||||||
|
expect(publishedRelays.size).toBeGreaterThan(0); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles publishing errors gracefully', async () => { |
||||||
|
const publishMock = vi.fn().mockResolvedValue(new Set()); |
||||||
|
|
||||||
|
const commentEvent = new NDKEvent(mockNDK); |
||||||
|
commentEvent.publish = publishMock; |
||||||
|
|
||||||
|
const publishedRelays = await commentEvent.publish(); |
||||||
|
|
||||||
|
expect(publishedRelays.size).toBe(0); |
||||||
|
}); |
||||||
|
|
||||||
|
it('throws error when publishing fails', async () => { |
||||||
|
const publishMock = vi.fn().mockRejectedValue(new Error('Network error')); |
||||||
|
|
||||||
|
const commentEvent = new NDKEvent(mockNDK); |
||||||
|
commentEvent.publish = publishMock; |
||||||
|
|
||||||
|
await expect(commentEvent.publish()).rejects.toThrow('Network error'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - User Authentication', () => { |
||||||
|
it('requires user to be signed in', () => { |
||||||
|
const signedOutStore = createMockUserStore(false); |
||||||
|
const user = get(signedOutStore); |
||||||
|
|
||||||
|
expect(user.signedIn).toBe(false); |
||||||
|
expect(user.signer).toBeNull(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('shows error when user is not signed in', () => { |
||||||
|
const signedOutStore = createMockUserStore(false); |
||||||
|
const user = get(signedOutStore); |
||||||
|
|
||||||
|
if (!user.signedIn || !user.signer) { |
||||||
|
const error = 'You must be signed in to comment'; |
||||||
|
expect(error).toBe('You must be signed in to comment'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
it('allows commenting when user is signed in', () => { |
||||||
|
const signedInStore = createMockUserStore(true); |
||||||
|
const user = get(signedInStore); |
||||||
|
|
||||||
|
expect(user.signedIn).toBe(true); |
||||||
|
expect(user.signer).not.toBeNull(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('displays user profile information when signed in', () => { |
||||||
|
const signedInStore = createMockUserStore(true); |
||||||
|
const user = get(signedInStore); |
||||||
|
|
||||||
|
expect(user.profile).not.toBeNull(); |
||||||
|
expect(user.profile?.displayName).toBe('Test User'); |
||||||
|
expect(user.profile?.picture).toBe('https://example.com/avatar.jpg'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles missing user profile gracefully', () => { |
||||||
|
const storeWithoutProfile = writable<UserState>({ |
||||||
|
pubkey: 'a'.repeat(64), |
||||||
|
npub: 'npub1test', |
||||||
|
profile: null, |
||||||
|
relays: { inbox: [], outbox: [] }, |
||||||
|
loginMethod: 'extension', |
||||||
|
ndkUser: null, |
||||||
|
signer: { sign: vi.fn() } as any, |
||||||
|
signedIn: true, |
||||||
|
}); |
||||||
|
|
||||||
|
const user = get(storeWithoutProfile); |
||||||
|
const displayName = user.profile?.displayName || user.profile?.name || 'Anonymous'; |
||||||
|
|
||||||
|
expect(displayName).toBe('Anonymous'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - User Interactions', () => { |
||||||
|
it('prevents submission of empty comment', () => { |
||||||
|
const commentContent = ''; |
||||||
|
const isEmpty = !commentContent.trim(); |
||||||
|
|
||||||
|
expect(isEmpty).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('allows submission of non-empty comment', () => { |
||||||
|
const commentContent = 'This is a valid comment'; |
||||||
|
const isEmpty = !commentContent.trim(); |
||||||
|
|
||||||
|
expect(isEmpty).toBe(false); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles whitespace-only comments as empty', () => { |
||||||
|
const commentContent = ' \n\t '; |
||||||
|
const isEmpty = !commentContent.trim(); |
||||||
|
|
||||||
|
expect(isEmpty).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('clears input after successful comment', () => { |
||||||
|
let commentContent = 'This is my comment'; |
||||||
|
|
||||||
|
// Simulate successful submission
|
||||||
|
commentContent = ''; |
||||||
|
|
||||||
|
expect(commentContent).toBe(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('closes comment UI after successful posting', () => { |
||||||
|
let showCommentUI = true; |
||||||
|
|
||||||
|
// Simulate successful post with delay
|
||||||
|
setTimeout(() => { |
||||||
|
showCommentUI = false; |
||||||
|
}, 0); |
||||||
|
|
||||||
|
// Initially still open
|
||||||
|
expect(showCommentUI).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('calls onCommentPosted callback when provided', () => { |
||||||
|
const onCommentPosted = vi.fn(); |
||||||
|
|
||||||
|
// Simulate successful comment post
|
||||||
|
onCommentPosted(); |
||||||
|
|
||||||
|
expect(onCommentPosted).toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('does not error when onCommentPosted is not provided', () => { |
||||||
|
const onCommentPosted = undefined; |
||||||
|
|
||||||
|
expect(() => { |
||||||
|
if (onCommentPosted) { |
||||||
|
onCommentPosted(); |
||||||
|
} |
||||||
|
}).not.toThrow(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - UI State Management', () => { |
||||||
|
it('button is hidden by default', () => { |
||||||
|
const sectionHovered = false; |
||||||
|
const showCommentUI = false; |
||||||
|
const visible = sectionHovered || showCommentUI; |
||||||
|
|
||||||
|
expect(visible).toBe(false); |
||||||
|
}); |
||||||
|
|
||||||
|
it('button appears on section hover', () => { |
||||||
|
const sectionHovered = true; |
||||||
|
const showCommentUI = false; |
||||||
|
const visible = sectionHovered || showCommentUI; |
||||||
|
|
||||||
|
expect(visible).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('button remains visible when comment UI is shown', () => { |
||||||
|
const sectionHovered = false; |
||||||
|
const showCommentUI = true; |
||||||
|
const visible = sectionHovered || showCommentUI; |
||||||
|
|
||||||
|
expect(visible).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('toggles comment UI when button is clicked', () => { |
||||||
|
let showCommentUI = false; |
||||||
|
|
||||||
|
// Simulate button click
|
||||||
|
showCommentUI = !showCommentUI; |
||||||
|
expect(showCommentUI).toBe(true); |
||||||
|
|
||||||
|
// Click again
|
||||||
|
showCommentUI = !showCommentUI; |
||||||
|
expect(showCommentUI).toBe(false); |
||||||
|
}); |
||||||
|
|
||||||
|
it('resets error state when toggling UI', () => { |
||||||
|
let error: string | null = 'Previous error'; |
||||||
|
let success = true; |
||||||
|
|
||||||
|
// Simulate UI toggle
|
||||||
|
error = null; |
||||||
|
success = false; |
||||||
|
|
||||||
|
expect(error).toBeNull(); |
||||||
|
expect(success).toBe(false); |
||||||
|
}); |
||||||
|
|
||||||
|
it('shows error message when present', () => { |
||||||
|
const error = 'Failed to post comment'; |
||||||
|
|
||||||
|
expect(error).toBeDefined(); |
||||||
|
expect(error.length).toBeGreaterThan(0); |
||||||
|
}); |
||||||
|
|
||||||
|
it('shows success message after posting', () => { |
||||||
|
const success = true; |
||||||
|
const successMessage = 'Comment posted successfully!'; |
||||||
|
|
||||||
|
if (success) { |
||||||
|
expect(successMessage).toBe('Comment posted successfully!'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
it('disables submit button when submitting', () => { |
||||||
|
const isSubmitting = true; |
||||||
|
const disabled = isSubmitting; |
||||||
|
|
||||||
|
expect(disabled).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('disables submit button when comment is empty', () => { |
||||||
|
const commentContent = ''; |
||||||
|
const isSubmitting = false; |
||||||
|
const disabled = isSubmitting || !commentContent.trim(); |
||||||
|
|
||||||
|
expect(disabled).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('enables submit button when comment is valid', () => { |
||||||
|
const commentContent = 'Valid comment'; |
||||||
|
const isSubmitting = false; |
||||||
|
const disabled = isSubmitting || !commentContent.trim(); |
||||||
|
|
||||||
|
expect(disabled).toBe(false); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - Edge Cases', () => { |
||||||
|
it('handles invalid address format gracefully', () => { |
||||||
|
const invalidAddresses = [ |
||||||
|
'', |
||||||
|
'invalid', |
||||||
|
'30041:', |
||||||
|
':pubkey:dtag', |
||||||
|
'30041:pubkey', |
||||||
|
'not-a-number:pubkey:dtag', |
||||||
|
]; |
||||||
|
|
||||||
|
invalidAddresses.forEach(address => { |
||||||
|
const parts = address.split(':'); |
||||||
|
const isValid = parts.length === 3 && !isNaN(parseInt(parts[0])); |
||||||
|
|
||||||
|
expect(isValid).toBe(false); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles network errors during event fetch', async () => { |
||||||
|
const mockNDK = { |
||||||
|
fetchEvent: vi.fn().mockRejectedValue(new Error('Network error')), |
||||||
|
}; |
||||||
|
|
||||||
|
let eventId = ''; |
||||||
|
try { |
||||||
|
await mockNDK.fetchEvent({}); |
||||||
|
} catch (err) { |
||||||
|
// Handle gracefully, continue without event ID
|
||||||
|
eventId = ''; |
||||||
|
} |
||||||
|
|
||||||
|
expect(eventId).toBe(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles missing relay information', () => { |
||||||
|
const emptyRelays: string[] = []; |
||||||
|
const relayHint = emptyRelays[0] || ''; |
||||||
|
|
||||||
|
expect(relayHint).toBe(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles very long comment text without truncation', () => { |
||||||
|
const longComment = 'a'.repeat(10000); |
||||||
|
const content = longComment; |
||||||
|
|
||||||
|
expect(content.length).toBe(10000); |
||||||
|
expect(content).toBe(longComment); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles special characters in comments', () => { |
||||||
|
const specialComments = [ |
||||||
|
'Comment with "quotes"', |
||||||
|
'Comment with emoji 😊', |
||||||
|
'Comment with\nnewlines', |
||||||
|
'Comment with\ttabs', |
||||||
|
'Comment with <html> tags', |
||||||
|
'Comment with & ampersands', |
||||||
|
]; |
||||||
|
|
||||||
|
specialComments.forEach(comment => { |
||||||
|
expect(comment.length).toBeGreaterThan(0); |
||||||
|
expect(typeof comment).toBe('string'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles event creation failure', async () => { |
||||||
|
const address = 'invalid:address'; |
||||||
|
const parts = address.split(':'); |
||||||
|
|
||||||
|
if (parts.length !== 3) { |
||||||
|
const error = 'Invalid event address'; |
||||||
|
expect(error).toBe('Invalid event address'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles signing errors', async () => { |
||||||
|
const mockSigner = { |
||||||
|
sign: vi.fn().mockRejectedValue(new Error('Signing failed')), |
||||||
|
}; |
||||||
|
|
||||||
|
const event = { kind: 1111, content: 'test' }; |
||||||
|
|
||||||
|
await expect(mockSigner.sign(event)).rejects.toThrow('Signing failed'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles publish failure when no relays accept event', async () => { |
||||||
|
const publishMock = vi.fn().mockResolvedValue(new Set()); |
||||||
|
|
||||||
|
const relaySet = await publishMock(); |
||||||
|
|
||||||
|
if (relaySet.size === 0) { |
||||||
|
const error = 'Failed to publish to any relays'; |
||||||
|
expect(error).toBe('Failed to publish to any relays'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - Cancel Functionality', () => { |
||||||
|
it('clears comment content when canceling', () => { |
||||||
|
let commentContent = 'This comment will be canceled'; |
||||||
|
|
||||||
|
// Simulate cancel
|
||||||
|
commentContent = ''; |
||||||
|
|
||||||
|
expect(commentContent).toBe(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('closes comment UI when canceling', () => { |
||||||
|
let showCommentUI = true; |
||||||
|
|
||||||
|
// Simulate cancel
|
||||||
|
showCommentUI = false; |
||||||
|
|
||||||
|
expect(showCommentUI).toBe(false); |
||||||
|
}); |
||||||
|
|
||||||
|
it('clears error state when canceling', () => { |
||||||
|
let error: string | null = 'Some error'; |
||||||
|
|
||||||
|
// Simulate cancel
|
||||||
|
error = null; |
||||||
|
|
||||||
|
expect(error).toBeNull(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('clears success state when canceling', () => { |
||||||
|
let success = true; |
||||||
|
|
||||||
|
// Simulate cancel
|
||||||
|
success = false; |
||||||
|
|
||||||
|
expect(success).toBe(false); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - Event Fetching', () => { |
||||||
|
let mockNDK: any; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
mockNDK = createMockNDK(); |
||||||
|
}); |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
vi.clearAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('fetches target event to get event ID', async () => { |
||||||
|
const address = '30041:' + 'a'.repeat(64) + ':article'; |
||||||
|
const parts = address.split(':'); |
||||||
|
const [kindStr, authorPubkey, dTag] = parts; |
||||||
|
const kind = parseInt(kindStr); |
||||||
|
|
||||||
|
const mockEvent = { |
||||||
|
id: 'b'.repeat(64), |
||||||
|
kind, |
||||||
|
pubkey: authorPubkey, |
||||||
|
tags: [['d', dTag]], |
||||||
|
}; |
||||||
|
|
||||||
|
mockNDK.fetchEvent.mockResolvedValue(mockEvent); |
||||||
|
|
||||||
|
const targetEvent = await mockNDK.fetchEvent({ |
||||||
|
kinds: [kind], |
||||||
|
authors: [authorPubkey], |
||||||
|
'#d': [dTag], |
||||||
|
}); |
||||||
|
|
||||||
|
expect(mockNDK.fetchEvent).toHaveBeenCalled(); |
||||||
|
expect(targetEvent?.id).toBe('b'.repeat(64)); |
||||||
|
}); |
||||||
|
|
||||||
|
it('continues without event ID when fetch fails', async () => { |
||||||
|
mockNDK.fetchEvent.mockRejectedValue(new Error('Fetch failed')); |
||||||
|
|
||||||
|
let eventId = ''; |
||||||
|
try { |
||||||
|
const targetEvent = await mockNDK.fetchEvent({}); |
||||||
|
if (targetEvent) { |
||||||
|
eventId = targetEvent.id; |
||||||
|
} |
||||||
|
} catch (err) { |
||||||
|
// Continue without event ID
|
||||||
|
eventId = ''; |
||||||
|
} |
||||||
|
|
||||||
|
expect(eventId).toBe(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles null event from fetch', async () => { |
||||||
|
mockNDK.fetchEvent.mockResolvedValue(null); |
||||||
|
|
||||||
|
const targetEvent = await mockNDK.fetchEvent({}); |
||||||
|
let eventId = ''; |
||||||
|
|
||||||
|
if (targetEvent) { |
||||||
|
eventId = targetEvent.id; |
||||||
|
} |
||||||
|
|
||||||
|
expect(eventId).toBe(''); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - CSS Classes and Styling', () => { |
||||||
|
it('applies visible class when section is hovered', () => { |
||||||
|
const sectionHovered = true; |
||||||
|
const showCommentUI = false; |
||||||
|
const hasVisibleClass = sectionHovered || showCommentUI; |
||||||
|
|
||||||
|
expect(hasVisibleClass).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('removes visible class when not hovered and UI closed', () => { |
||||||
|
const sectionHovered = false; |
||||||
|
const showCommentUI = false; |
||||||
|
const hasVisibleClass = sectionHovered || showCommentUI; |
||||||
|
|
||||||
|
expect(hasVisibleClass).toBe(false); |
||||||
|
}); |
||||||
|
|
||||||
|
it('button has correct aria-label', () => { |
||||||
|
const ariaLabel = 'Add comment'; |
||||||
|
|
||||||
|
expect(ariaLabel).toBe('Add comment'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('button has correct title attribute', () => { |
||||||
|
const title = 'Add comment'; |
||||||
|
|
||||||
|
expect(title).toBe('Add comment'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('submit button shows loading state when submitting', () => { |
||||||
|
const isSubmitting = true; |
||||||
|
const buttonText = isSubmitting ? 'Posting...' : 'Post Comment'; |
||||||
|
|
||||||
|
expect(buttonText).toBe('Posting...'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('submit button shows normal state when not submitting', () => { |
||||||
|
const isSubmitting = false; |
||||||
|
const buttonText = isSubmitting ? 'Posting...' : 'Post Comment'; |
||||||
|
|
||||||
|
expect(buttonText).toBe('Post Comment'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - NIP-22 Compliance', () => { |
||||||
|
it('uses kind 1111 for comment events', () => { |
||||||
|
const kind = 1111; |
||||||
|
|
||||||
|
expect(kind).toBe(1111); |
||||||
|
}); |
||||||
|
|
||||||
|
it('includes all required NIP-22 tags for addressable events', () => { |
||||||
|
const requiredRootTags = ['A', 'K', 'P']; |
||||||
|
const requiredParentTags = ['a', 'k', 'p']; |
||||||
|
|
||||||
|
const tags = [ |
||||||
|
['A', 'address', 'relay', 'pubkey'], |
||||||
|
['K', 'kind'], |
||||||
|
['P', 'pubkey', 'relay'], |
||||||
|
['a', 'address', 'relay'], |
||||||
|
['k', 'kind'], |
||||||
|
['p', 'pubkey', 'relay'], |
||||||
|
]; |
||||||
|
|
||||||
|
requiredRootTags.forEach(tag => { |
||||||
|
expect(tags.some(t => t[0] === tag)).toBe(true); |
||||||
|
}); |
||||||
|
|
||||||
|
requiredParentTags.forEach(tag => { |
||||||
|
expect(tags.some(t => t[0] === tag)).toBe(true); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('A tag includes relay hint and author pubkey', () => { |
||||||
|
const aTag = ['A', '30041:pubkey:dtag', 'wss://relay.com', 'pubkey']; |
||||||
|
|
||||||
|
expect(aTag).toHaveLength(4); |
||||||
|
expect(aTag[0]).toBe('A'); |
||||||
|
expect(aTag[2]).toMatch(/^wss:\/\//); |
||||||
|
expect(aTag[3]).toBeTruthy(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('P tag includes relay hint', () => { |
||||||
|
const pTag = ['P', 'pubkey', 'wss://relay.com']; |
||||||
|
|
||||||
|
expect(pTag).toHaveLength(3); |
||||||
|
expect(pTag[0]).toBe('P'); |
||||||
|
expect(pTag[2]).toMatch(/^wss:\/\//); |
||||||
|
}); |
||||||
|
|
||||||
|
it('lowercase tags for parent scope match root tags', () => { |
||||||
|
const address = '30041:pubkey:dtag'; |
||||||
|
const kind = '30041'; |
||||||
|
const pubkey = 'pubkey'; |
||||||
|
const relay = 'wss://relay.com'; |
||||||
|
|
||||||
|
const rootTags = [ |
||||||
|
['A', address, relay, pubkey], |
||||||
|
['K', kind], |
||||||
|
['P', pubkey, relay], |
||||||
|
]; |
||||||
|
|
||||||
|
const parentTags = [ |
||||||
|
['a', address, relay], |
||||||
|
['k', kind], |
||||||
|
['p', pubkey, relay], |
||||||
|
]; |
||||||
|
|
||||||
|
// Verify parent tags match root tags (lowercase)
|
||||||
|
expect(parentTags[0][1]).toBe(rootTags[0][1]); // address
|
||||||
|
expect(parentTags[1][1]).toBe(rootTags[1][1]); // kind
|
||||||
|
expect(parentTags[2][1]).toBe(rootTags[2][1]); // pubkey
|
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('CommentButton - Integration Scenarios', () => { |
||||||
|
it('complete comment flow for signed-in user', () => { |
||||||
|
const userStore = createMockUserStore(true); |
||||||
|
const user = get(userStore); |
||||||
|
|
||||||
|
// User is signed in
|
||||||
|
expect(user.signedIn).toBe(true); |
||||||
|
|
||||||
|
// Comment content is valid
|
||||||
|
const content = 'Great article!'; |
||||||
|
expect(content.trim().length).toBeGreaterThan(0); |
||||||
|
|
||||||
|
// Address is valid
|
||||||
|
const address = '30041:' + 'a'.repeat(64) + ':article'; |
||||||
|
const parts = address.split(':'); |
||||||
|
expect(parts.length).toBe(3); |
||||||
|
|
||||||
|
// Event would be created with kind 1111
|
||||||
|
const kind = 1111; |
||||||
|
expect(kind).toBe(1111); |
||||||
|
}); |
||||||
|
|
||||||
|
it('prevents comment flow for signed-out user', () => { |
||||||
|
const userStore = createMockUserStore(false); |
||||||
|
const user = get(userStore); |
||||||
|
|
||||||
|
expect(user.signedIn).toBe(false); |
||||||
|
|
||||||
|
if (!user.signedIn) { |
||||||
|
const error = 'You must be signed in to comment'; |
||||||
|
expect(error).toBeTruthy(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles comment with event ID lookup', async () => { |
||||||
|
const mockNDK = createMockNDK(); |
||||||
|
const eventId = 'c'.repeat(64); |
||||||
|
|
||||||
|
mockNDK.fetchEvent.mockResolvedValue({ id: eventId }); |
||||||
|
|
||||||
|
const targetEvent = await mockNDK.fetchEvent({}); |
||||||
|
|
||||||
|
const tags = [ |
||||||
|
['e', targetEvent.id, 'wss://relay.com'], |
||||||
|
]; |
||||||
|
|
||||||
|
expect(tags[0][1]).toBe(eventId); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles comment without event ID lookup', () => { |
||||||
|
const eventId = ''; |
||||||
|
|
||||||
|
const tags = [ |
||||||
|
['A', 'address', 'relay', 'pubkey'], |
||||||
|
['K', 'kind'], |
||||||
|
['P', 'pubkey', 'relay'], |
||||||
|
['a', 'address', 'relay'], |
||||||
|
['k', 'kind'], |
||||||
|
['p', 'pubkey', 'relay'], |
||||||
|
]; |
||||||
|
|
||||||
|
// No e tag should be included
|
||||||
|
expect(tags.filter(t => t[0] === 'e')).toHaveLength(0); |
||||||
|
|
||||||
|
// But all other required tags should be present
|
||||||
|
expect(tags.length).toBe(6); |
||||||
|
}); |
||||||
|
}); |
||||||
Loading…
Reference in new issue