fix event result display

src/lib/components/CommentViewer.svelte

@@ -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 @@
     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 @@
           </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 || ""}

src/lib/components/EventDetails.svelte

@@ -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,11 +307,19 @@
 
   $effect(() => {
     if (event && event.kind !== 0 && event.content) {
+      // 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);
         });
       }
+    }
   });
 
   $effect(() => {
@@ -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,15 +474,45 @@
     <ProfileHeader
       {event}
       {profile}
-      identifiers={getIdentifiers(event, profile)}
     />
   {/if}
 
-  <!-- Tags Array -->
+  <!-- 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 overflow-hidden"
+  >
+    <summary
+      class="cursor-pointer font-semibold text-primary-700 dark:text-primary-300 mb-2"
+    >
+      Show details
+    </summary>
+    
+    <!-- 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>
+
+    <!-- Event Tags Section -->
     {#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">
+      <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}
@@ -520,7 +547,7 @@
                     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"
+                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>
@@ -530,25 +557,22 @@
       </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"
-  >
-    <summary
-      class="cursor-pointer font-semibold text-primary-700 dark:text-primary-300 mb-2"
-    >
-      Show Raw Event JSON
-    </summary>
-    <div class="absolute top-4 right-4">
+    <!-- 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"
+          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>
+      </div>
+    </div>
   </details>
 </div>

src/lib/components/RelayActions.svelte

@@ -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">

src/routes/events/+page.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";
   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";
     secondOrderSearchMessage = null;
   }
 
+  function toggleSearchResults() {
+    searchResultsCollapsed = !searchResultsCollapsed;
+  }
+
   function navigateToPublication(dTag: string) {
     goto(`/publications?d=${encodeURIComponent(dTag.toLowerCase())}`);
   }
@@ -419,6 +426,15 @@ 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>
+          <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"
@@ -428,6 +444,7 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
               </button>
             {/if}
           </div>
+        </div>
 
         <P class="mb-3">
           Use this page to view any event (npub, nprofile, nevent, naddr, note,
@@ -457,6 +474,7 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
 
         {#if searchResults.length > 0}
           <div class="mt-8">
+            <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)
@@ -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}
@@ -611,10 +630,12 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
               {/each}
             </div>
             </div>
+          </div>
         {/if}
 
         {#if secondOrderResults.length > 0}
           <div class="mt-8">
+            <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)
@@ -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}
@@ -775,10 +797,12 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
               {/each}
             </div>
             </div>
+          </div>
         {/if}
 
         {#if tTagResults.length > 0}
           <div class="mt-8">
+            <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)
@@ -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}
@@ -926,6 +951,7 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
               {/each}
             </div>
             </div>
+          </div>
         {/if}
 
         {#if !event && searchResults.length === 0 && secondOrderResults.length === 0 && tTagResults.length === 0 && !searchValue && !dTagValue && !searchInProgress}