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

Fix View details to open modal with JSON and event page button 

Update comment action menu to match expected behavior:
- "View details" now opens modal showing full event JSON
- Modal includes "View on Event Page" button at top for navigation
- Simplified modal to only show JSON (removed individual field displays)
- Removed separate "View JSON" menu item (consolidated into View details)

Technical changes:
- Consolidated jsonModalOpen and detailsModalOpen into single state
- All action menus (root, replies, nested) now use consistent modal
- Button navigates to /events?id={nevent} for full event view
- Increased JSON preview max-height to 500px for better visibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
master
limina1 4 months ago
parent
0919677f24
commit
76ad9c2a04
1 changed files with 20 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 99
      src/lib/components/publications/SectionComments.svelte

99
src/lib/components/publications/SectionComments.svelte
Unescape View File

@ -25,7 +25,7 @@
// State management // State management
let profiles = $state(new Map<string, any>()); let profiles = $state(new Map<string, any>());
let expandedThreads = $state(new Set<string>()); let expandedThreads = $state(new Set<string>());
let jsonModalOpen = $state<string | null>(null); let detailsModalOpen = $state<string | null>(null);
let deletingComments = $state(new Set<string>()); let deletingComments = $state(new Set<string>());
let replyingTo = $state<string | null>(null); let replyingTo = $state<string | null>(null);
let replyContent = $state(""); let replyContent = $state("");
@ -414,24 +414,13 @@
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => { onclick={() => {
viewEventDetails(rootComment); detailsModalOpen = rootComment.id;
}} }}
> >
<EyeOutline class="w-4 h-4" /> <EyeOutline class="w-4 h-4" />
View details View details
</button> </button>
</li> </li>
<li>
<button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => {
jsonModalOpen = rootComment.id;
}}
>
<ClipboardCleanOutline class="w-4 h-4" />
View JSON
</button>
</li>
<li> <li>
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
@ -511,24 +500,13 @@
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => { onclick={() => {
viewEventDetails(rootComment); detailsModalOpen = rootComment.id;
}} }}
> >
<EyeOutline class="w-4 h-4" /> <EyeOutline class="w-4 h-4" />
View details View details
</button> </button>
</li> </li>
<li>
<button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => {
jsonModalOpen = rootComment.id;
}}
>
<ClipboardCleanOutline class="w-4 h-4" />
View JSON
</button>
</li>
<li> <li>
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
@ -659,24 +637,13 @@
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => { onclick={() => {
viewEventDetails(reply); detailsModalOpen = reply.id;
}} }}
> >
<EyeOutline class="w-4 h-4" /> <EyeOutline class="w-4 h-4" />
View details View details
</button> </button>
</li> </li>
<li>
<button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => {
jsonModalOpen = reply.id;
}}
>
<ClipboardCleanOutline class="w-4 h-4" />
View JSON
</button>
</li>
<li> <li>
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
@ -802,24 +769,13 @@
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => { onclick={() => {
viewEventDetails(nestedReply); detailsModalOpen = nestedReply.id;
}} }}
> >
<EyeOutline class="w-4 h-4" /> <EyeOutline class="w-4 h-4" />
View details View details
</button> </button>
</li> </li>
<li>
<button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
onclick={() => {
jsonModalOpen = nestedReply.id;
}}
>
<ClipboardCleanOutline class="w-4 h-4" />
View JSON
</button>
</li>
<li> <li>
<button <button
class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2" class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
@ -923,47 +879,32 @@
</div> </div>
{/if} {/if}
<!-- JSON Modal --> <!-- Details Modal -->
{#if jsonModalOpen} {#if detailsModalOpen}
{@const comment = comments.find(c => c.id === jsonModalOpen)} {@const comment = comments.find(c => c.id === detailsModalOpen)}
{#if comment} {#if comment}
<Modal <Modal
title="Comment JSON" title="Comment Details"
open={true} open={true}
autoclose autoclose
outsideclose outsideclose
size="lg" size="lg"
class="modal-leather" class="modal-leather"
onclose={() => jsonModalOpen = null} onclose={() => detailsModalOpen = null}
> >
<div class="space-y-4"> <div class="space-y-4">
<div> <div class="flex justify-center pb-2">
<h3 class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2">Author</h3> <Button
<p class="text-sm font-mono break-all">{comment.pubkey}</p> color="primary"
</div> onclick={() => {
<div> viewEventDetails(comment);
<h3 class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2">Event ID</h3> }}
<p class="text-sm font-mono break-all">{comment.id}</p> >
</div> View on Event Page
<div> </Button>
<h3 class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2">Kind</h3>
<p class="text-sm">{comment.kind}</p>
</div>
<div>
<h3 class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2">Created</h3>
<p class="text-sm">{new Date((comment.created_at || 0) * 1000).toLocaleString()}</p>
</div>
<div>
<h3 class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2">Content</h3>
<p class="text-sm whitespace-pre-wrap break-words">{comment.content}</p>
</div>
<div>
<h3 class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2">Tags</h3>
<pre class="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">{JSON.stringify(comment.tags, null, 2)}</pre>
</div> </div>
<div> <div>
<h3 class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2">Raw Event JSON</h3> <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto max-h-[500px] overflow-y-auto">{JSON.stringify({
<pre class="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto max-h-96 overflow-y-auto">{JSON.stringify({
id: comment.id, id: comment.id,
pubkey: comment.pubkey, pubkey: comment.pubkey,
created_at: comment.created_at, created_at: comment.created_at,

Write Preview
Loading…
Cancel
Save