From 58027e950bd64ca57e7322ce0947bfb8e6c35262 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 21 Jan 2026 10:41:24 +0000
Subject: [PATCH] feat(post): improve JSON preview responsiveness and layout

This commit addresses UX feedback on the JSON preview feature:

- Reduced update interval from 2000ms to 200ms for much more responsive UI
- Moved JSON preview below relay list for better visual flow
- Increased max-height from 256px to 400px for better visibility
- Separated JSON update logic into dedicated effect for cleaner code
- JSON preview now feels instant when typing (10x faster updates)

The JSON preview is now much more pleasant to use and doesn't feel
laggy when editing content.
---
 src/components/PostViewer.tsx | 44 ++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/PostViewer.tsx b/src/components/PostViewer.tsx
index e80e95d..db80e7b 100644
--- a/src/components/PostViewer.tsx
+++ b/src/components/PostViewer.tsx
@@ -308,13 +308,19 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
       if (editorRef.current) {
         setIsEditorEmpty(editorRef.current.isEmpty());
       }
-      // Update draft event JSON preview
-      if (settings.showEventJson) {
-        generateDraftEventJson();
-      }
     }, 2000);
     return () => clearInterval(timer);
-  }, [saveDraft, settings.showEventJson, generateDraftEventJson]);
+  }, [saveDraft]);
+
+  // Update JSON preview more frequently for responsive UI
+  useEffect(() => {
+    if (!settings.showEventJson) return;
+
+    const timer = setInterval(() => {
+      generateDraftEventJson();
+    }, 200);
+    return () => clearInterval(timer);
+  }, [settings.showEventJson, generateDraftEventJson]);
 
   // Blossom upload for attachments
   const { open: openUpload, dialog: uploadDialog } = useBlossomUpload({
@@ -763,20 +769,6 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
                 )}
               </Button>
             </div>
-
-            {/* Event JSON Preview */}
-            {settings.showEventJson && draftEventJson && (
-              <div className="rounded-lg border border-border overflow-hidden">
-                <div className="bg-muted/50 px-3 py-2 text-xs font-medium text-muted-foreground border-b">
-                  Event JSON (Draft - Unsigned)
-                </div>
-                <div className="max-h-64">
-                  <CopyableJsonViewer
-                    json={JSON.stringify(draftEventJson, null, 2)}
-                  />
-                </div>
-              </div>
-            )}
           </>
         ) : (
           <>
@@ -904,6 +896,20 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
           )}
         </div>
 
+        {/* Event JSON Preview */}
+        {!showPublishedPreview && settings.showEventJson && draftEventJson && (
+          <div className="rounded-lg border border-border overflow-hidden">
+            <div className="bg-muted/50 px-3 py-2 text-xs font-medium text-muted-foreground border-b">
+              Event JSON (Draft - Unsigned)
+            </div>
+            <div className="overflow-y-auto" style={{ maxHeight: "400px" }}>
+              <CopyableJsonViewer
+                json={JSON.stringify(draftEventJson, null, 2)}
+              />
+            </div>
+          </div>
+        )}
+
         {/* Upload dialog */}
         {uploadDialog}
       </div>