silberengel
/
gc-alexandria
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix event result display

master
silberengel 7 months ago
parent
53d3c33ee8
commit
0bd5a3f453
4 changed files with 191 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/lib/components/CommentViewer.svelte
  2. 186
      src/lib/components/EventDetails.svelte
  3. 18
      src/lib/components/RelayActions.svelte
  4. 128
      src/routes/events/+page.svelte

14
src/lib/components/CommentViewer.svelte
Unescape View File

@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
import type { NDKEvent } from "@nostr-dev-kit/ndk";
import { userBadge } from "$lib/snippets/UserSnippets.svelte";
import { parseBasicmarkup } from "$lib/utils/markup/basicMarkupParser";
import { parseRepostContent, parseContent as parseNotificationContent } from "$lib/utils/notification_utils";
const { event } = $props<{ event: NDKEvent }>();
@ -653,12 +654,15 @@ @@ -653,12 +654,15 @@
return `${actualLevel * 16}px`;
}
async function parseContent(content: string): Promise<string> {
async function parseContent(content: string, eventKind?: number): Promise<string> {
if (!content) return "";
let parsedContent = await parseBasicmarkup(content);
return parsedContent;
// Use parseRepostContent for kind 6 and 16 events (reposts)
if (eventKind === 6 || eventKind === 16) {
return await parseRepostContent(content);
} else {
return await parseNotificationContent(content);
}
}
@ -825,7 +829,7 @@ @@ -825,7 +829,7 @@
</div>
{:else}
<!-- Regular comment content -->
{#await parseContent(node.event.content || "") then parsedContent}
{#await parseContent(node.event.content || "", node.event.kind) then parsedContent}
{@html parsedContent}
{:catch}
{@html node.event.content || ""}

186
src/lib/components/EventDetails.svelte
Unescape View File

@ -15,6 +15,8 @@ @@ -15,6 +15,8 @@
import { navigateToEvent } from "$lib/utils/nostrEventService";
import ContainingIndexes from "$lib/components/util/ContainingIndexes.svelte";
import Notifications from "$lib/components/Notifications.svelte";
import { parseRepostContent } from "$lib/utils/notification_utils";
import RelayActions from "$lib/components/RelayActions.svelte";
const {
event,
@ -305,10 +307,18 @@ @@ -305,10 +307,18 @@
$effect(() => {
if (event && event.kind !== 0 && event.content) {
parseBasicmarkup(event.content).then((html) => {
parsedContent = html;
contentPreview = html.slice(0, 250);
});
// Use parseRepostContent for kind 6 and 16 events (reposts)
if (event.kind === 6 || event.kind === 16) {
parseRepostContent(event.content).then((html) => {
parsedContent = html;
contentPreview = html.slice(0, 250);
});
} else {
parseBasicmarkup(event.content).then((html) => {
parsedContent = html;
contentPreview = html.slice(0, 250);
});
}
}
});
@ -436,30 +446,17 @@ @@ -436,30 +446,17 @@
</div>
{/if}
{#if getEventHashtags(event).length}
<div class="flex flex-col space-y-1">
<span class="text-gray-700 dark:text-gray-300">Tags:</span>
<div class="flex flex-wrap gap-2">
{#each getEventHashtags(event) as tag}
<button
onclick={() => goto(`/events?t=${encodeURIComponent(tag)}`)}
class="px-2 py-1 rounded bg-primary-100 text-primary-800 text-sm font-medium hover:bg-primary-200 cursor-pointer"
>#{tag}</button
>
{/each}
</div>
</div>
{/if}
<!-- Containing Publications -->
<ContainingIndexes {event} />
<!-- Content -->
{#if event.kind !== 0}
<div class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border">
<div class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border max-w-full overflow-hidden">
<div class="flex flex-col space-y-1">
<span class="text-gray-700 dark:text-gray-300 font-semibold">Content:</span>
<div class="prose dark:prose-invert max-w-none text-gray-900 dark:text-gray-100">
<div class="prose dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 break-words overflow-wrap-anywhere">
{@html showFullContent ? parsedContent : contentPreview}
{#if !showFullContent && parsedContent.length > 250}
<button
@ -477,78 +474,105 @@ @@ -477,78 +474,105 @@
<ProfileHeader
{event}
{profile}
identifiers={getIdentifiers(event, profile)}
/>
{/if}
<!-- Tags Array -->
{#if event.tags && event.tags.length}
<div class="flex flex-col space-y-1">
<span class="text-gray-700 dark:text-gray-300">Event Tags:</span>
<div class="flex flex-wrap gap-2">
{#each event.tags as tag}
{@const tagInfo = getTagButtonInfo(tag)}
{#if tagInfo.text && tagInfo.gotoValue}
<button
onclick={() => {
// Handle different types of gotoValue
if (
tagInfo.gotoValue!.startsWith("naddr") ||
tagInfo.gotoValue!.startsWith("nevent") ||
tagInfo.gotoValue!.startsWith("npub") ||
tagInfo.gotoValue!.startsWith("nprofile") ||
tagInfo.gotoValue!.startsWith("note")
) {
// For naddr, nevent, npub, nprofile, note - navigate directly
goto(`/events?id=${tagInfo.gotoValue!}`);
} else if (tagInfo.gotoValue!.startsWith("/")) {
// For relative URLs - navigate directly
goto(tagInfo.gotoValue!);
} else if (tagInfo.gotoValue!.startsWith("d:")) {
// For d-tag searches - navigate to d-tag search
const dTag = tagInfo.gotoValue!.substring(2);
goto(`/events?d=${encodeURIComponent(dTag)}`);
} else if (tagInfo.gotoValue!.startsWith("t:")) {
// For t-tag searches - navigate to t-tag search
const tTag = tagInfo.gotoValue!.substring(2);
goto(`/events?t=${encodeURIComponent(tTag)}`);
} else if (/^[0-9a-fA-F]{64}$/.test(tagInfo.gotoValue!)) {
// For hex event IDs - use navigateToEvent
navigateToEvent(tagInfo.gotoValue!);
} else {
// For other cases, try direct navigation
goto(`/events?id=${tagInfo.gotoValue!}`);
}
}}
class="text-primary-700 dark:text-primary-300 cursor-pointer bg-transparent border-none p-0 text-left hover:text-primary-900 dark:hover:text-primary-100"
>
{tagInfo.text}
</button>
{/if}
{/each}
</div>
</div>
{/if}
<!-- Raw Event JSON -->
<details
class="relative w-full max-w-2xl md:max-w-full bg-primary-50 dark:bg-primary-900 rounded p-4"
class="relative w-full max-w-2xl md:max-w-full bg-primary-50 dark:bg-primary-900 rounded p-4 overflow-hidden"
>
<summary
class="cursor-pointer font-semibold text-primary-700 dark:text-primary-300 mb-2"
>
Show Raw Event JSON
Show details
</summary>
<div class="absolute top-4 right-4">
<CopyToClipboard
displayText=""
copyText={JSON.stringify(event.rawEvent(), null, 2)}
/>
<!-- Identifiers Section -->
<div class="mb-4 max-w-full overflow-hidden">
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Identifiers:</h4>
<div class="flex flex-col gap-2">
{#each getIdentifiers(event, profile) as identifier}
<div class="flex items-center gap-2 min-w-0">
<span class="text-gray-600 dark:text-gray-400 flex-shrink-0">{identifier.label}:</span>
<div class="flex-1 min-w-0 flex items-center gap-2">
<span class="font-mono text-sm text-gray-900 dark:text-gray-100" title={identifier.value}>
{identifier.value.slice(0, 20)}...{identifier.value.slice(-8)}
</span>
<CopyToClipboard
displayText=""
copyText={identifier.value}
/>
</div>
</div>
{/each}
</div>
</div>
<pre
class="overflow-x-auto text-xs bg-highlight dark:bg-primary-900 rounded p-4 mt-2 font-mono"
style="line-height: 1.7; font-size: 1rem;">
<!-- Event Tags Section -->
{#if event.tags && event.tags.length}
<div class="mb-4 max-w-full overflow-hidden">
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Event Tags:</h4>
<div class="flex flex-wrap gap-2 break-words">
{#each event.tags as tag}
{@const tagInfo = getTagButtonInfo(tag)}
{#if tagInfo.text && tagInfo.gotoValue}
<button
onclick={() => {
// Handle different types of gotoValue
if (
tagInfo.gotoValue!.startsWith("naddr") ||
tagInfo.gotoValue!.startsWith("nevent") ||
tagInfo.gotoValue!.startsWith("npub") ||
tagInfo.gotoValue!.startsWith("nprofile") ||
tagInfo.gotoValue!.startsWith("note")
) {
// For naddr, nevent, npub, nprofile, note - navigate directly
goto(`/events?id=${tagInfo.gotoValue!}`);
} else if (tagInfo.gotoValue!.startsWith("/")) {
// For relative URLs - navigate directly
goto(tagInfo.gotoValue!);
} else if (tagInfo.gotoValue!.startsWith("d:")) {
// For d-tag searches - navigate to d-tag search
const dTag = tagInfo.gotoValue!.substring(2);
goto(`/events?d=${encodeURIComponent(dTag)}`);
} else if (tagInfo.gotoValue!.startsWith("t:")) {
// For t-tag searches - navigate to t-tag search
const tTag = tagInfo.gotoValue!.substring(2);
goto(`/events?t=${encodeURIComponent(tTag)}`);
} else if (/^[0-9a-fA-F]{64}$/.test(tagInfo.gotoValue!)) {
// For hex event IDs - use navigateToEvent
navigateToEvent(tagInfo.gotoValue!);
} else {
// For other cases, try direct navigation
goto(`/events?id=${tagInfo.gotoValue!}`);
}
}}
class="text-primary-700 dark:text-primary-300 cursor-pointer bg-transparent border-none p-0 text-left hover:text-primary-900 dark:hover:text-primary-100 break-all"
>
{tagInfo.text}
</button>
{/if}
{/each}
</div>
</div>
{/if}
<!-- Raw Event JSON Section -->
<div class="mb-4 max-w-full overflow-hidden">
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Raw Event JSON:</h4>
<div class="relative">
<div class="absolute top-0 right-0 z-10">
<CopyToClipboard
displayText=""
copyText={JSON.stringify(event.rawEvent(), null, 2)}
/>
</div>
<pre
class="overflow-x-auto text-xs bg-highlight dark:bg-primary-900 rounded p-4 mt-2 font-mono break-words whitespace-pre-wrap"
style="line-height: 1.7; font-size: 1rem;">
{JSON.stringify(event.rawEvent(), null, 2)}
</pre>
</pre>
</div>
</div>
</details>
</div>

18
src/lib/components/RelayActions.svelte
Unescape View File

@ -72,24 +72,6 @@ @@ -72,24 +72,6 @@
}
</script>
<div class="mt-4 flex flex-wrap gap-2">
<Button onclick={openRelayModal} class="flex items-center">
{@html searchIcon}
Where can I find this event?
</Button>
</div>
{#if foundRelays.length > 0}
<div class="mt-2">
<span class="font-semibold">Found on {foundRelays.length} relay(s):</span>
<div class="flex flex-wrap gap-2 mt-1">
{#each foundRelays as relay}
<RelayDisplay {relay} />
{/each}
</div>
</div>
{/if}
<div class="mt-2">
<span class="font-semibold">Found on:</span>
<div class="flex flex-wrap gap-2 mt-1">

128
src/routes/events/+page.svelte
Unescape View File

@ -20,6 +20,7 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -20,6 +20,7 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
import { getEventType } from "$lib/utils/mime";
import ViewPublicationLink from "$lib/components/util/ViewPublicationLink.svelte";
import { checkCommunity } from "$lib/utils/search_utility";
import { parseRepostContent, parseContent } from "$lib/utils/notification_utils";
let loading = $state(false);
let error = $state<string | null>(null);
@ -49,22 +50,24 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -49,22 +50,24 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
let searchInProgress = $state(false);
let secondOrderSearchMessage = $state<string | null>(null);
let communityStatus = $state<Record<string, boolean>>({});
let searchResultsCollapsed = $state(false);
userStore.subscribe((val) => (user = val));
function handleEventFound(newEvent: NDKEvent) {
event = newEvent;
showSidePanel = true;
// Clear search results when showing a single event
searchResults = [];
secondOrderResults = [];
tTagResults = [];
originalEventIds = new Set();
originalAddresses = new Set();
searchType = null;
searchTerm = null;
searchInProgress = false;
secondOrderSearchMessage = null;
// AI-NOTE: 2025-01-24 - Preserve search results to allow navigation through them
// Don't clear search results when showing a single event - this allows users to browse through results
// searchResults = [];
// secondOrderResults = [];
// tTagResults = [];
// originalEventIds = new Set();
// originalAddresses = new Set();
// searchType = null;
// searchTerm = null;
// searchInProgress = false;
// secondOrderSearchMessage = null;
if (newEvent.kind === 0) {
try {
@ -255,6 +258,10 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -255,6 +258,10 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
secondOrderSearchMessage = null;
}
function toggleSearchResults() {
searchResultsCollapsed = !searchResultsCollapsed;
}
function navigateToPublication(dTag: string) {
goto(`/publications?d=${encodeURIComponent(dTag.toLowerCase())}`);
}
@ -419,14 +426,24 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -419,14 +426,24 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
<div class="main-leather flex flex-col space-y-6">
<div class="flex justify-between items-center">
<Heading tag="h1" class="h-leather mb-2">Events</Heading>
{#if showSidePanel}
<button
class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
onclick={closeSidePanel}
>
Close Details
</button>
{/if}
<div class="flex items-center gap-2">
{#if showSidePanel && (searchResults.length > 0 || secondOrderResults.length > 0 || tTagResults.length > 0)}
<button
class="lg:hidden text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 rounded px-2 py-1"
onclick={toggleSearchResults}
>
{searchResultsCollapsed ? "Show Results" : "Hide Results"}
</button>
{/if}
{#if showSidePanel}
<button
class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
onclick={closeSidePanel}
>
Close Details
</button>
{/if}
</div>
</div>
<P class="mb-3">
@ -457,19 +474,20 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -457,19 +474,20 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
{#if searchResults.length > 0}
<div class="mt-8">
<Heading tag="h2" class="h-leather mb-4 break-words">
{#if searchType === "n"}
Search Results for name: "{searchTerm && searchTerm.length > 50 ? searchTerm.slice(0, 50) + '...' : searchTerm || ''}" ({searchResults.length} profiles)
{:else if searchType === "t"}
Search Results for t-tag: "{searchTerm && searchTerm.length > 50 ? searchTerm.slice(0, 50) + '...' : searchTerm || ''}" ({searchResults.length}
events)
{:else}
Search Results for d-tag: "{(() => {
const term = searchTerm || dTagValue?.toLowerCase() || '';
return term.length > 50 ? term.slice(0, 50) + '...' : term;
})()}" ({searchResults.length} events)
{/if}
</Heading>
<div class={showSidePanel && searchResultsCollapsed ? "lg:block hidden" : "block"}>
<Heading tag="h2" class="h-leather mb-4 break-words">
{#if searchType === "n"}
Search Results for name: "{searchTerm && searchTerm.length > 50 ? searchTerm.slice(0, 50) + '...' : searchTerm || ''}" ({searchResults.length} profiles)
{:else if searchType === "t"}
Search Results for t-tag: "{searchTerm && searchTerm.length > 50 ? searchTerm.slice(0, 50) + '...' : searchTerm || ''}" ({searchResults.length}
events)
{:else}
Search Results for d-tag: "{(() => {
const term = searchTerm || dTagValue?.toLowerCase() || '';
return term.length > 50 ? term.slice(0, 50) + '...' : term;
})()}" ({searchResults.length} events)
{/if}
</Heading>
<div class="space-y-4">
{#each searchResults as result, index}
{@const profileData = parseProfileContent(result)}
@ -599,10 +617,11 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -599,10 +617,11 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
<div
class="text-sm text-gray-800 dark:text-gray-200 mt-1 line-clamp-2 break-words"
>
{result.content.slice(0, 200)}{result.content.length >
200
? "..."
: ""}
{#await ((result.kind === 6 || result.kind === 16) ? parseRepostContent(result.content) : parseContent(result.content)) then parsedContent}
{@html parsedContent.slice(0, 200)}{parsedContent.length > 200 ? "..." : ""}
{:catch}
{result.content.slice(0, 200)}{result.content.length > 200 ? "..." : ""}
{/await}
</div>
{/if}
{/if}
@ -610,15 +629,17 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -610,15 +629,17 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
</button>
{/each}
</div>
</div>
</div>
{/if}
{#if secondOrderResults.length > 0}
<div class="mt-8">
<Heading tag="h2" class="h-leather mb-4">
Second-Order Events (References, Replies, Quotes) ({secondOrderResults.length}
events)
</Heading>
<div class={showSidePanel && searchResultsCollapsed ? "lg:block hidden" : "block"}>
<Heading tag="h2" class="h-leather mb-4">
Second-Order Events (References, Replies, Quotes) ({secondOrderResults.length}
events)
</Heading>
{#if (searchType === "n" || searchType === "d") && secondOrderResults.length === 100}
<P class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Showing the 100 newest events. More results may be available.
@ -763,10 +784,11 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -763,10 +784,11 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
<div
class="text-sm text-gray-800 dark:text-gray-200 mt-1 line-clamp-2 break-words"
>
{result.content.slice(0, 200)}{result.content.length >
200
? "..."
: ""}
{#await ((result.kind === 6 || result.kind === 16) ? parseRepostContent(result.content) : parseContent(result.content)) then parsedContent}
{@html parsedContent.slice(0, 200)}{parsedContent.length > 200 ? "..." : ""}
{:catch}
{result.content.slice(0, 200)}{result.content.length > 200 ? "..." : ""}
{/await}
</div>
{/if}
{/if}
@ -774,15 +796,17 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -774,15 +796,17 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
</button>
{/each}
</div>
</div>
</div>
{/if}
{#if tTagResults.length > 0}
<div class="mt-8">
<Heading tag="h2" class="h-leather mb-4">
Search Results for t-tag: "{searchTerm ||
dTagValue?.toLowerCase()}" ({tTagResults.length} events)
</Heading>
<div class={showSidePanel && searchResultsCollapsed ? "lg:block hidden" : "block"}>
<Heading tag="h2" class="h-leather mb-4">
Search Results for t-tag: "{searchTerm ||
dTagValue?.toLowerCase()}" ({tTagResults.length} events)
</Heading>
<P class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Events that are tagged with the t-tag.
</P>
@ -914,10 +938,11 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -914,10 +938,11 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
<div
class="text-sm text-gray-800 dark:text-gray-200 mt-1 line-clamp-2 break-words"
>
{result.content.slice(0, 200)}{result.content.length >
200
? "..."
: ""}
{#await ((result.kind === 6 || result.kind === 16) ? parseRepostContent(result.content) : parseContent(result.content)) then parsedContent}
{@html parsedContent.slice(0, 200)}{parsedContent.length > 200 ? "..." : ""}
{:catch}
{result.content.slice(0, 200)}{result.content.length > 200 ? "..." : ""}
{/await}
</div>
{/if}
{/if}
@ -925,6 +950,7 @@ import CommentViewer from "$lib/components/CommentViewer.svelte"; @@ -925,6 +950,7 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
</button>
{/each}
</div>
</div>
</div>
{/if}

Write Preview
Loading…
Cancel
Save