@ -1,5 +1,9 @@
< script lang = "ts" > < script lang = "ts" >
import { getNdkContext , activeInboxRelays , activeOutboxRelays } from "$lib/ndk"; import {
getNdkContext,
activeInboxRelays,
activeOutboxRelays,
} from "$lib/ndk";
import { pubkeyToHue } from "$lib/utils/nostrUtils"; import { pubkeyToHue } from "$lib/utils/nostrUtils";
import type { NDKEvent } from "@nostr-dev-kit/ndk"; import type { NDKEvent } from "@nostr-dev-kit/ndk";
import { NDKEvent as NDKEventClass } from "@nostr-dev-kit/ndk"; import { NDKEvent as NDKEventClass } from "@nostr-dev-kit/ndk";
@ -12,11 +16,14 @@
encodeHighlightNaddr, encodeHighlightNaddr,
getRelaysFromHighlight, getRelaysFromHighlight,
getAuthorDisplayName, getAuthorDisplayName,
sortHighlightsByTime sortHighlightsByTime,
} from "$lib/utils/highlightUtils"; } from "$lib/utils/highlightUtils";
import { unifiedProfileCache } from "$lib/utils/npubCache"; import { unifiedProfileCache } from "$lib/utils/npubCache";
import { nip19 } from "nostr-tools"; import { nip19 } from "nostr-tools";
import { highlightByOffset , getPlainText } from "$lib/utils/highlightPositioning"; import {
highlightByOffset,
getPlainText,
} from "$lib/utils/highlightPositioning";
let { let {
eventId, eventId,
@ -47,7 +54,7 @@
// Derived state for color mapping // Derived state for color mapping
let colorMap = $derived.by(() => { let colorMap = $derived.by(() => {
const map = new Map< string , string > (); const map = new Map< string , string > ();
highlights.forEach(highlight => { highlights.forEach(( highlight) => {
if (!map.has(highlight.pubkey)) { if (!map.has(highlight.pubkey)) {
const hue = pubkeyToHue(highlight.pubkey); const hue = pubkeyToHue(highlight.pubkey);
map.set(highlight.pubkey, `hsla(${ hue } , 70%, 60%, 0.3)`); map.set(highlight.pubkey, `hsla(${ hue } , 70%, 60%, 0.3)`);
@ -73,8 +80,13 @@
} }
// Collect all event IDs and addresses // Collect all event IDs and addresses
const allEventIds = [...(eventId ? [eventId] : []), ...eventIds].filter(Boolean); const allEventIds = [...(eventId ? [eventId] : []), ...eventIds].filter(
const allAddresses = [...(eventAddress ? [eventAddress] : []), ...eventAddresses].filter(Boolean); Boolean,
);
const allAddresses = [
...(eventAddress ? [eventAddress] : []),
...eventAddresses,
].filter(Boolean);
if (allEventIds.length === 0 && allAddresses.length === 0) { if (allEventIds.length === 0 && allAddresses.length === 0) {
console.warn("[HighlightLayer] No event IDs or addresses provided"); console.warn("[HighlightLayer] No event IDs or addresses provided");
@ -87,20 +99,29 @@
// AI-NOTE: Mock mode allows testing highlight UI without publishing to relays // AI-NOTE: Mock mode allows testing highlight UI without publishing to relays
// This is useful for development and demonstrating the highlight system // This is useful for development and demonstrating the highlight system
if (useMockHighlights) { if (useMockHighlights) {
console.log(`[HighlightLayer] MOCK MODE - Generating mock highlights for ${ allAddresses . length } sections`); console.log(
`[HighlightLayer] MOCK MODE - Generating mock highlights for ${ allAddresses . length } sections`,
);
try { try {
// Generate mock highlight data // Generate mock highlight data
const mockHighlights = generateMockHighlightsForSections(allAddresses); const mockHighlights = generateMockHighlightsForSections(allAddresses);
// Convert to NDKEvent instances (same as real events) // Convert to NDKEvent instances (same as real events)
highlights = mockHighlights.map(rawEvent => new NDKEventClass(ndk, rawEvent)); highlights = mockHighlights.map(
(rawEvent) => new NDKEventClass(ndk, rawEvent),
);
console.log(`[HighlightLayer] Generated ${ highlights . length } mock highlights`); console.log(
`[HighlightLayer] Generated ${ highlights . length } mock highlights`,
);
loading = false; loading = false;
return; return;
} catch (err) { } catch (err) {
console.error(`[HighlightLayer] Error generating mock highlights:`, err); console.error(
`[HighlightLayer] Error generating mock highlights:`,
err,
);
loading = false; loading = false;
return; return;
} }
@ -108,7 +129,7 @@
console.log(`[HighlightLayer] Fetching highlights for:`, { console.log(`[HighlightLayer] Fetching highlights for:`, {
eventIds: allEventIds, eventIds: allEventIds,
addresses: allAddresses addresses: allAddresses,
}); });
try { try {
@ -128,7 +149,10 @@
filter["#e"] = allEventIds; filter["#e"] = allEventIds;
} }
console.log(`[HighlightLayer] Fetching with filter:`, JSON.stringify(filter, null, 2)); console.log(
`[HighlightLayer] Fetching with filter:`,
JSON.stringify(filter, null, 2),
);
// Build explicit relay set (same pattern as HighlightSelectionHandler and CommentButton) // Build explicit relay set (same pattern as HighlightSelectionHandler and CommentButton)
const relays = [ const relays = [
@ -137,7 +161,10 @@
...$activeInboxRelays, ...$activeInboxRelays,
]; ];
const uniqueRelays = Array.from(new Set(relays)); const uniqueRelays = Array.from(new Set(relays));
console.log(`[HighlightLayer] Fetching from ${ uniqueRelays . length } relays:`, uniqueRelays); console.log(
`[HighlightLayer] Fetching from ${ uniqueRelays . length } relays:`,
uniqueRelays,
);
/** /**
* Use WebSocketPool with nostr-tools protocol instead of NDK * Use WebSocketPool with nostr-tools protocol instead of NDK
@ -168,8 +195,11 @@
const message = JSON.parse(event.data); const message = JSON.parse(event.data);
// Log ALL messages from relay.nostr.band for debugging // Log ALL messages from relay.nostr.band for debugging
if (relayUrl.includes('relay.nostr.band')) { if (relayUrl.includes("relay.nostr.band")) {
console.log(`[HighlightLayer] RAW message from ${ relayUrl } :`, message); console.log(
`[HighlightLayer] RAW message from ${ relayUrl } :`,
message,
);
} }
if (message[0] === "EVENT" && message[1] === subscriptionId) { if (message[0] === "EVENT" && message[1] === subscriptionId) {
@ -178,7 +208,7 @@
id: rawEvent.id, id: rawEvent.id,
kind: rawEvent.kind, kind: rawEvent.kind,
content: rawEvent.content.substring(0, 50), content: rawEvent.content.substring(0, 50),
tags: rawEvent.tags tags: rawEvent.tags,
}); });
// Avoid duplicates // Avoid duplicates
@ -188,11 +218,18 @@
// Convert to NDKEvent // Convert to NDKEvent
const ndkEvent = new NDKEventClass(ndk, rawEvent); const ndkEvent = new NDKEventClass(ndk, rawEvent);
highlights = [...highlights, ndkEvent]; highlights = [...highlights, ndkEvent];
console.log(`[HighlightLayer] Added highlight, total now: ${ highlights . length } `); console.log(
`[HighlightLayer] Added highlight, total now: ${ highlights . length } `,
);
} }
} else if (message[0] === "EOSE" && message[1] === subscriptionId) { } else if (
message[0] === "EOSE" & &
message[1] === subscriptionId
) {
eoseCount++; eoseCount++;
console.log(`[HighlightLayer] EOSE from ${ relayUrl } (${ eoseCount } /${ uniqueRelays . length } )`); console.log(
`[HighlightLayer] EOSE from ${ relayUrl } (${ eoseCount } /${ uniqueRelays . length } )`,
);
// Close subscription // Close subscription
ws.send(JSON.stringify(["CLOSE", subscriptionId])); ws.send(JSON.stringify(["CLOSE", subscriptionId]));
@ -200,10 +237,16 @@
WebSocketPool.instance.release(ws); WebSocketPool.instance.release(ws);
resolve(); resolve();
} else if (message[0] === "NOTICE") { } else if (message[0] === "NOTICE") {
console.warn(`[HighlightLayer] NOTICE from ${ relayUrl } :`, message[1]); console.warn(
`[HighlightLayer] NOTICE from ${ relayUrl } :`,
message[1],
);
} }
} catch (err) { } catch (err) {
console.error(`[HighlightLayer] Error processing message from ${ relayUrl } :`, err); console.error(
`[HighlightLayer] Error processing message from ${ relayUrl } :`,
err,
);
} }
}; };
@ -211,8 +254,11 @@
// Send REQ // Send REQ
const req = ["REQ", subscriptionId, filter]; const req = ["REQ", subscriptionId, filter];
if (relayUrl.includes('relay.nostr.band')) { if (relayUrl.includes("relay.nostr.band")) {
console.log(`[HighlightLayer] Sending REQ to ${ relayUrl } :`, JSON.stringify(req)); console.log(
`[HighlightLayer] Sending REQ to ${ relayUrl } :`,
JSON.stringify(req),
);
} else { } else {
console.log(`[HighlightLayer] Sending REQ to ${ relayUrl } `); console.log(`[HighlightLayer] Sending REQ to ${ relayUrl } `);
} }
@ -229,7 +275,10 @@
}, 5000); }, 5000);
}); });
} catch (err) { } catch (err) {
console.error(`[HighlightLayer] Error connecting to ${ relayUrl } :`, err); console.error(
`[HighlightLayer] Error connecting to ${ relayUrl } :`,
err,
);
} }
}); });
@ -239,17 +288,19 @@
console.log(`[HighlightLayer] Fetched ${ highlights . length } highlights`); console.log(`[HighlightLayer] Fetched ${ highlights . length } highlights`);
if (highlights.length > 0) { if (highlights.length > 0) {
console.log(`[HighlightLayer] Highlights summary:`, highlights.map(h => ({ console.log(
content: h.content.substring(0, 30) + "...", `[HighlightLayer] Highlights summary:`,
address: h.tags.find(t => t[0] === "a")?.[1], highlights.map((h) => ({
author: h.pubkey.substring(0, 8) content: h.content.substring(0, 30) + "...",
}))); address: h.tags.find((t) => t[0] === "a")?.[1],
author: h.pubkey.substring(0, 8),
})),
);
} }
loading = false; loading = false;
// Rendering is handled by the visibility/highlights effect // Rendering is handled by the visibility/highlights effect
} catch (err) { } catch (err) {
console.error(`[HighlightLayer] Error fetching highlights:`, err); console.error(`[HighlightLayer] Error fetching highlights:`, err);
loading = false; loading = false;
@ -267,10 +318,12 @@
offsetStart: number, offsetStart: number,
offsetEnd: number, offsetEnd: number,
color: string, color: string,
targetAddress?: string targetAddress?: string,
): boolean { ): boolean {
if (!containerRef) { if (!containerRef) {
console.log(`[HighlightLayer] Cannot highlight by position - no containerRef`); console.log(
`[HighlightLayer] Cannot highlight by position - no containerRef`,
);
return false; return false;
} }
@ -280,17 +333,25 @@
const sectionElement = document.getElementById(targetAddress); const sectionElement = document.getElementById(targetAddress);
if (sectionElement) { if (sectionElement) {
searchRoot = sectionElement; searchRoot = sectionElement;
console.log(`[HighlightLayer] Highlighting in specific section: ${ targetAddress } `); console.log(
`[HighlightLayer] Highlighting in specific section: ${ targetAddress } `,
);
} else { } else {
console.log(`[HighlightLayer] Section ${ targetAddress } not found in DOM, searching globally`); console.log(
`[HighlightLayer] Section ${ targetAddress } not found in DOM, searching globally`,
);
} }
} }
console.log(`[HighlightLayer] Applying position-based highlight ${ offsetStart } -${ offsetEnd } `); console.log(
`[HighlightLayer] Applying position-based highlight ${ offsetStart } -${ offsetEnd } `,
);
const result = highlightByOffset(searchRoot, offsetStart, offsetEnd, color); const result = highlightByOffset(searchRoot, offsetStart, offsetEnd, color);
if (result) { if (result) {
console.log(`[HighlightLayer] Successfully applied position-based highlight`); console.log(
`[HighlightLayer] Successfully applied position-based highlight`,
);
} else { } else {
console.log(`[HighlightLayer] Failed to apply position-based highlight`); console.log(`[HighlightLayer] Failed to apply position-based highlight`);
} }
@ -304,9 +365,15 @@
* @param color - The color to use for highlighting * @param color - The color to use for highlighting
* @param targetAddress - Optional address to limit search to specific section * @param targetAddress - Optional address to limit search to specific section
*/ */
function findAndHighlightText(text: string, color: string, targetAddress?: string): void { function findAndHighlightText(
text: string,
color: string,
targetAddress?: string,
): void {
if (!containerRef || !text || text.trim().length === 0) { if (!containerRef || !text || text.trim().length === 0) {
console.log(`[HighlightLayer] Cannot highlight - containerRef: ${ !! containerRef } , text: "${ text } "`); console.log(
`[HighlightLayer] Cannot highlight - containerRef: ${ !! containerRef } , text: "${ text } "`,
);
return; return;
} }
@ -316,19 +383,26 @@
const sectionElement = document.getElementById(targetAddress); const sectionElement = document.getElementById(targetAddress);
if (sectionElement) { if (sectionElement) {
searchRoot = sectionElement; searchRoot = sectionElement;
console.log(`[HighlightLayer] Searching in specific section: ${ targetAddress } `); console.log(
`[HighlightLayer] Searching in specific section: ${ targetAddress } `,
);
} else { } else {
console.log(`[HighlightLayer] Section ${ targetAddress } not found in DOM, searching globally`); console.log(
`[HighlightLayer] Section ${ targetAddress } not found in DOM, searching globally`,
);
} }
} }
console.log(`[HighlightLayer] Searching for text: "${ text } " in`, searchRoot); console.log(
`[HighlightLayer] Searching for text: "${ text } " in`,
searchRoot,
);
// Use TreeWalker to find all text nodes // Use TreeWalker to find all text nodes
const walker = document.createTreeWalker( const walker = document.createTreeWalker(
searchRoot, searchRoot,
NodeFilter.SHOW_TEXT, NodeFilter.SHOW_TEXT,
null null,
); );
const textNodes: Node[] = []; const textNodes: Node[] = [];
@ -338,19 +412,30 @@
} }
// Search for the highlight text in text nodes // Search for the highlight text in text nodes
console.log(`[HighlightLayer] Searching through ${ textNodes . length } text nodes`); console.log(
`[HighlightLayer] Searching through ${ textNodes . length } text nodes`,
);
for (const textNode of textNodes) { for (const textNode of textNodes) {
const nodeText = textNode.textContent || ""; const nodeText = textNode.textContent || "";
const index = nodeText.toLowerCase().indexOf(text.toLowerCase()); const index = nodeText.toLowerCase().indexOf(text.toLowerCase());
if (index !== -1) { if (index !== -1) {
console.log(`[HighlightLayer] Found match in text node:`, nodeText.substring(Math.max(0, index - 20), Math.min(nodeText.length, index + text.length + 20))); console.log(
`[HighlightLayer] Found match in text node:`,
nodeText.substring(
Math.max(0, index - 20),
Math.min(nodeText.length, index + text.length + 20),
),
);
const parent = textNode.parentNode; const parent = textNode.parentNode;
if (!parent) continue; if (!parent) continue;
// Skip if already highlighted // Skip if already highlighted
if (parent.nodeName === "MARK" || (parent instanceof Element && parent.classList?.contains("highlight"))) { if (
parent.nodeName === "MARK" ||
(parent instanceof Element & & parent.classList?.contains("highlight"))
) {
continue; continue;
} }
@ -386,10 +471,14 @@
* Render all highlights on the page * Render all highlights on the page
*/ */
function renderHighlights() { function renderHighlights() {
console.log(`[HighlightLayer] renderHighlights called - visible: ${ visible } , containerRef: ${ !! containerRef } , highlights: ${ highlights . length } `); console.log(
`[HighlightLayer] renderHighlights called - visible: ${ visible } , containerRef: ${ !! containerRef } , highlights: ${ highlights . length } `,
);
if (!visible || !containerRef) { if (!visible || !containerRef) {
console.log(`[HighlightLayer] Skipping render - visible: ${ visible } , containerRef: ${ !! containerRef } `); console.log(
`[HighlightLayer] Skipping render - visible: ${ visible } , containerRef: ${ !! containerRef } `,
);
return; return;
} }
@ -403,7 +492,10 @@
console.log(`[HighlightLayer] Rendering ${ highlights . length } highlights`); console.log(`[HighlightLayer] Rendering ${ highlights . length } highlights`);
console.log(`[HighlightLayer] Container element:`, containerRef); console.log(`[HighlightLayer] Container element:`, containerRef);
console.log(`[HighlightLayer] Container has children:`, containerRef.children.length); console.log(
`[HighlightLayer] Container has children:`,
containerRef.children.length,
);
// Apply each highlight // Apply each highlight
for (const highlight of highlights) { for (const highlight of highlights) {
@ -411,12 +503,13 @@
const color = colorMap.get(highlight.pubkey) || "hsla(60, 70%, 60%, 0.3)"; const color = colorMap.get(highlight.pubkey) || "hsla(60, 70%, 60%, 0.3)";
// Extract the target address from the highlight's "a" tag // Extract the target address from the highlight's "a" tag
const aTag = highlight.tags.find(tag => tag[0] === "a"); const aTag = highlight.tags.find(( tag) => tag[0] === "a");
const targetAddress = aTag ? aTag[1] : undefined; const targetAddress = aTag ? aTag[1] : undefined;
// Check for offset tags (position-based highlighting) // Check for offset tags (position-based highlighting)
const offsetTag = highlight.tags.find(tag => tag[0] === "offset"); const offsetTag = highlight.tags.find((tag) => tag[0] === "offset");
const hasOffset = offsetTag & & offsetTag[1] !== undefined & & offsetTag[2] !== undefined; const hasOffset =
offsetTag & & offsetTag[1] !== undefined & & offsetTag[2] !== undefined;
console.log(`[HighlightLayer] Rendering highlight:`, { console.log(`[HighlightLayer] Rendering highlight:`, {
hasOffset, hasOffset,
@ -425,7 +518,7 @@
contentLength: content.length, contentLength: content.length,
targetAddress, targetAddress,
color, color,
allTags: highlight.tags allTags: highlight.tags,
}); });
if (hasOffset) { if (hasOffset) {
@ -434,10 +527,14 @@
const offsetEnd = parseInt(offsetTag[2], 10); const offsetEnd = parseInt(offsetTag[2], 10);
if (!isNaN(offsetStart) && !isNaN(offsetEnd)) { if (!isNaN(offsetStart) && !isNaN(offsetEnd)) {
console.log(`[HighlightLayer] Using position-based highlighting: ${ offsetStart } -${ offsetEnd } `); console.log(
`[HighlightLayer] Using position-based highlighting: ${ offsetStart } -${ offsetEnd } `,
);
highlightByPosition(offsetStart, offsetEnd, color, targetAddress); highlightByPosition(offsetStart, offsetEnd, color, targetAddress);
} else { } else {
console.log(`[HighlightLayer] Invalid offset values, falling back to text search`); console.log(
`[HighlightLayer] Invalid offset values, falling back to text search`,
);
if (content && content.trim().length > 0) { if (content && content.trim().length > 0) {
findAndHighlightText(content, color, targetAddress); findAndHighlightText(content, color, targetAddress);
} }
@ -455,7 +552,9 @@
// Check if any highlights were actually rendered // Check if any highlights were actually rendered
const renderedHighlights = containerRef.querySelectorAll("mark.highlight"); const renderedHighlights = containerRef.querySelectorAll("mark.highlight");
console.log(`[HighlightLayer] Rendered ${ renderedHighlights . length } highlight marks in DOM`); console.log(
`[HighlightLayer] Rendered ${ renderedHighlights . length } highlight marks in DOM`,
);
} }
/** /**
@ -465,7 +564,7 @@
if (!containerRef) return; if (!containerRef) return;
const highlightElements = containerRef.querySelectorAll("mark.highlight"); const highlightElements = containerRef.querySelectorAll("mark.highlight");
highlightElements.forEach(el => { highlightElements.forEach(( el) => {
const parent = el.parentNode; const parent = el.parentNode;
if (parent) { if (parent) {
// Replace highlight with plain text // Replace highlight with plain text
@ -477,7 +576,9 @@
} }
}); });
console.log(`[HighlightLayer] Cleared ${ highlightElements . length } highlights`); console.log(
`[HighlightLayer] Cleared ${ highlightElements . length } highlights`,
);
} }
// Track the last fetched event count to know when to refetch // Track the last fetched event count to know when to refetch
@ -489,7 +590,9 @@
const currentCount = eventIds.length + eventAddresses.length; const currentCount = eventIds.length + eventAddresses.length;
const hasEventData = currentCount > 0; const hasEventData = currentCount > 0;
console.log(`[HighlightLayer] Event data effect - count: ${ currentCount } , lastFetched: ${ lastFetchedCount } , loading: ${ loading } `); console.log(
`[HighlightLayer] Event data effect - count: ${ currentCount } , lastFetched: ${ lastFetchedCount } , loading: ${ loading } `,
);
// Only fetch if: // Only fetch if:
// 1. We have event data // 1. We have event data
@ -503,7 +606,9 @@
// Debounce: wait 500ms for more events to arrive before fetching // Debounce: wait 500ms for more events to arrive before fetching
fetchTimeout = setTimeout(() => { fetchTimeout = setTimeout(() => {
console.log(`[HighlightLayer] Event data stabilized at ${ currentCount } events, fetching highlights...`); console.log(
`[HighlightLayer] Event data stabilized at ${ currentCount } events, fetching highlights...`,
);
lastFetchedCount = currentCount; lastFetchedCount = currentCount;
fetchHighlights(); fetchHighlights();
}, 500); }, 500);
@ -521,10 +626,14 @@
$effect(() => { $effect(() => {
// This effect runs when either visible or highlights.length changes // This effect runs when either visible or highlights.length changes
const highlightCount = highlights.length; const highlightCount = highlights.length;
console.log(`[HighlightLayer] Visibility/highlights effect - visible: ${ visible } , highlights: ${ highlightCount } `); console.log(
`[HighlightLayer] Visibility/highlights effect - visible: ${ visible } , highlights: ${ highlightCount } `,
);
if (visible && highlightCount > 0) { if (visible && highlightCount > 0) {
console.log(`[HighlightLayer] Both visible and highlights ready, rendering...`); console.log(
`[HighlightLayer] Both visible and highlights ready, rendering...`,
);
renderHighlights(); renderHighlights();
} else if (!visible) { } else if (!visible) {
clearHighlights(); clearHighlights();
@ -544,7 +653,9 @@
*/ */
async function fetchAuthorProfiles() { async function fetchAuthorProfiles() {
const uniquePubkeys = Array.from(groupedHighlights.keys()); const uniquePubkeys = Array.from(groupedHighlights.keys());
console.log(`[HighlightLayer] Fetching profiles for ${ uniquePubkeys . length } authors`); console.log(
`[HighlightLayer] Fetching profiles for ${ uniquePubkeys . length } authors`,
);
for (const pubkey of uniquePubkeys) { for (const pubkey of uniquePubkeys) {
try { try {
@ -557,7 +668,10 @@
authorProfiles = new Map(authorProfiles); authorProfiles = new Map(authorProfiles);
} }
} catch (err) { } catch (err) {
console.error(`[HighlightLayer] Error fetching profile for ${ pubkey } :`, err); console.error(
`[HighlightLayer] Error fetching profile for ${ pubkey } :`,
err,
);
} }
} }
} }
@ -579,7 +693,10 @@
* Scroll to a specific highlight in the document * Scroll to a specific highlight in the document
*/ */
function scrollToHighlight(highlight: NDKEvent) { function scrollToHighlight(highlight: NDKEvent) {
console.log(`[HighlightLayer] scrollToHighlight called for:`, highlight.content.substring(0, 50)); console.log(
`[HighlightLayer] scrollToHighlight called for:`,
highlight.content.substring(0, 50),
);
if (!containerRef) { if (!containerRef) {
console.warn(`[HighlightLayer] No containerRef available`); console.warn(`[HighlightLayer] No containerRef available`);
@ -594,7 +711,9 @@
// Find the highlight mark element // Find the highlight mark element
const highlightMarks = containerRef.querySelectorAll("mark.highlight"); const highlightMarks = containerRef.querySelectorAll("mark.highlight");
console.log(`[HighlightLayer] Found ${ highlightMarks . length } highlight marks in DOM`); console.log(
`[HighlightLayer] Found ${ highlightMarks . length } highlight marks in DOM`,
);
// Try exact match first // Try exact match first
for (const mark of highlightMarks) { for (const mark of highlightMarks) {
@ -602,7 +721,9 @@
const searchText = content.toLowerCase(); const searchText = content.toLowerCase();
if (markText === searchText) { if (markText === searchText) {
console.log(`[HighlightLayer] Found exact match, scrolling and flashing`); console.log(
`[HighlightLayer] Found exact match, scrolling and flashing`,
);
// Scroll to this element // Scroll to this element
mark.scrollIntoView({ behavior : "smooth" , block : "center" } ); mark.scrollIntoView({ behavior : "smooth" , block : "center" } );
@ -621,7 +742,9 @@
const searchText = content.toLowerCase(); const searchText = content.toLowerCase();
if (markText.includes(searchText) || searchText.includes(markText)) { if (markText.includes(searchText) || searchText.includes(markText)) {
console.log(`[HighlightLayer] Found partial match, scrolling and flashing`); console.log(
`[HighlightLayer] Found partial match, scrolling and flashing`,
);
mark.scrollIntoView({ behavior : "smooth" , block : "center" } ); mark.scrollIntoView({ behavior : "smooth" , block : "center" } );
mark.classList.add("highlight-flash"); mark.classList.add("highlight-flash");
setTimeout(() => { setTimeout(() => {
@ -631,7 +754,10 @@
} }
} }
console.warn(`[HighlightLayer] Could not find highlight mark for:`, content.substring(0, 50)); console.warn(
`[HighlightLayer] Could not find highlight mark for:`,
content.substring(0, 50),
);
} }
/** /**
@ -679,13 +805,19 @@
< / script > < / script >
{ #if loading && visible } { #if loading && visible }
< div class = "fixed top-40 right-4 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-3" > < div
< p class = "text-sm text-gray-600 dark:text-gray-300" > Loading highlights...< / p > 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 highlights...
< / p >
< / div > < / div >
{ /if } { /if }
{ #if visible && highlights . length > 0 } { #if visible && highlights . length > 0 }
< div class = "fixed bottom-4 right-4 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-sm w-80" > < div
class="fixed bottom-4 right-4 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-sm w-80"
>
< h4 class = "text-sm font-semibold mb-3 text-gray-900 dark:text-gray-100" > < h4 class = "text-sm font-semibold mb-3 text-gray-900 dark:text-gray-100" >
Highlights Highlights
< / h4 > < / h4 >
@ -707,19 +839,28 @@
class="w-3 h-3 rounded flex-shrink-0" class="w-3 h-3 rounded flex-shrink-0"
style="background-color: { color } ;" style="background-color: { color } ;"
>< / div > >< / div >
< span class = "font-medium text-gray-900 dark:text-gray-100 flex-1 text-left truncate" > < span
class="font-medium text-gray-900 dark:text-gray-100 flex-1 text-left truncate"
>
{ displayName } { displayName }
< / span > < / span >
< span class = "text-xs text-gray-500 dark:text-gray-400" > < span class = "text-xs text-gray-500 dark:text-gray-400" >
({ authorHighlights . length } ) ({ authorHighlights . length } )
< / span > < / span >
< svg < svg
class="w-4 h-4 text-gray-500 transition-transform { isExpanded ? 'rotate-90' : '' } " class="w-4 h-4 text-gray-500 transition-transform { isExpanded
? 'rotate-90'
: ''}"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M9 5l7 7-7 7" / > < path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
< / svg > < / svg >
< / button > < / button >
@ -727,14 +868,18 @@
{ #if isExpanded } { #if isExpanded }
< div class = "mt-2 ml-5 space-y-2" > < div class = "mt-2 ml-5 space-y-2" >
{ #each sortedHighlights as highlight } { #each sortedHighlights as highlight }
{ @const truncated = useMockHighlights ? "test data" : truncateHighlight ( highlight . content )} { @const truncated = useMockHighlights
? "test data"
: truncateHighlight(highlight.content)}
{ @const showCopied = copyFeedback === highlight . id } { @const showCopied = copyFeedback === highlight . id }
< div class = "flex items-start gap-2 group" > < div class = "flex items-start gap-2 group" >
< button < button
class="flex-1 text-left text-xs text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors" class="flex-1 text-left text-xs text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
onclick={() => scrollToHighlight ( highlight )} onclick={() => scrollToHighlight ( highlight )}
title={ useMockHighlights ? "Mock highlight" : highlight . content } title={ useMockHighlights
? "Mock highlight"
: highlight.content}
> >
{ truncated } { truncated }
< / button > < / button >
@ -744,12 +889,30 @@
title="Copy naddr" title="Copy naddr"
> >
{ #if showCopied } { #if showCopied }
< svg class = "w-3 h-3 text-green-500" fill = "currentColor" viewBox = "0 0 20 20" > < svg
< path fill-rule = "evenodd" d = "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule = "evenodd" / > class="w-3 h-3 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
>
< path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
< / svg > < / svg >
{ : else } { : else }
< svg class = "w-3 h-3 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" > < svg
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" / > class="w-3 h-3 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
< path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
< / svg > < / svg >
{ /if } { /if }
< / button > < / button >
@ -776,8 +939,9 @@
animation: flash 1.5s ease-in-out; animation: flash 1.5s ease-in-out;
} }
@keyframes :global(flash) { @keyframes -global-flash {
0%, 100% { 0%,
100% {
filter: brightness(1); filter: brightness(1);
} }
50% { 50% {
buttercat1791
3 months ago