From 26fd7d35d2e2b086627641a232234a86b7340fe7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Jul 2026 15:50:42 +0000
Subject: [PATCH 1/2] Add Done button and input-accepted indicator to JSON
 drawer

- Adds a "Done" button at the bottom of the JSON panel to close it
- Flashes a checkmark indicator whenever a typed edit is successfully
  parsed and applied to the draft
- Empty blocks now render a blank textarea instead of "[]", and a
  blank/whitespace-only textarea is treated as an empty block list
  rather than a parse error
---
 src/components/json-drawer.tsx | 49 ++++++++++++++++++++++++++++++++--
 test/json-drawer.test.tsx      | 35 ++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 test/json-drawer.test.tsx

diff --git a/src/components/json-drawer.tsx b/src/components/json-drawer.tsx
index 7ea94de..c742b3e 100644
--- a/src/components/json-drawer.tsx
+++ b/src/components/json-drawer.tsx
@@ -49,10 +49,12 @@ export function JsonDrawer({
   const [parseError, setParseError] = useState<string | null>(null);
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
   const [copied, setCopied] = useState(false);
+  const [accepted, setAccepted] = useState(false);
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const gutterRef = useRef<HTMLDivElement | null>(null);
   const copyResetRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const acceptResetRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Hold the latest blocks in a ref so the open-seed effect can read them
   // without listing them as a dependency. While the drawer is open the
@@ -64,19 +66,24 @@ export function JsonDrawer({
 
   useEffect(() => {
     if (open) {
-      setValue(JSON.stringify(blocksRef.current, null, 2));
+      const current = blocksRef.current;
+      setValue(current.length === 0 ? '' : JSON.stringify(current, null, 2));
       setParseError(null);
       setValidationErrors([]);
       setCopied(false);
+      setAccepted(false);
     }
   }, [open]);
 
-  // Clear the "copied" reset timer on unmount.
+  // Clear the "copied" and "accepted" reset timers on unmount.
   useEffect(
     () => () => {
       if (copyResetRef.current) {
         clearTimeout(copyResetRef.current);
       }
+      if (acceptResetRef.current) {
+        clearTimeout(acceptResetRef.current);
+      }
     },
     []
   );
@@ -103,6 +110,20 @@ export function JsonDrawer({
       setValidationErrors([]);
       return;
     }
+    // A blank textarea (or one the user cleared entirely) is treated as an
+    // empty block list rather than a parse error, so clearing the box to
+    // paste something new doesn't flash red first.
+    if (next.trim() === '') {
+      setParseError(null);
+      setValidationErrors([]);
+      onApply([]);
+      setAccepted(true);
+      if (acceptResetRef.current) {
+        clearTimeout(acceptResetRef.current);
+      }
+      acceptResetRef.current = setTimeout(() => setAccepted(false), 900);
+      return;
+    }
     let parsed: unknown;
     try {
       parsed = JSON.parse(next);
@@ -123,6 +144,11 @@ export function JsonDrawer({
     }
     setParseError(null);
     onApply(blocks);
+    setAccepted(true);
+    if (acceptResetRef.current) {
+      clearTimeout(acceptResetRef.current);
+    }
+    acceptResetRef.current = setTimeout(() => setAccepted(false), 900);
     const result = validateBlockKit(blocks, {
       target: 'blocks',
       surface: 'message'
@@ -159,6 +185,16 @@ export function JsonDrawer({
           >
             {copied ? <Check className="h-3.5 w-3.5 text-emerald-600" /> : <Copy className="h-3.5 w-3.5" />}
           </button>
+          <div
+            role="status"
+            aria-hidden={!accepted}
+            className={`pointer-events-none absolute bottom-2 right-2 z-10 flex items-center justify-center rounded-md bg-background/80 p-1.5 shadow-sm backdrop-blur transition-opacity duration-300 ${
+              accepted ? 'opacity-100' : 'opacity-0'
+            }`}
+          >
+            <Check className="h-3.5 w-3.5 text-emerald-600" />
+            <span className="sr-only">Input accepted</span>
+          </div>
           <div
             ref={gutterRef}
             aria-hidden="true"
@@ -195,6 +231,15 @@ export function JsonDrawer({
             )}
           </div>
         )}
+        <div className="flex shrink-0 justify-end">
+          <button
+            type="button"
+            onClick={() => onOpenChange(false)}
+            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            Done
+          </button>
+        </div>
       </SheetContent>
     </Sheet>
   );
diff --git a/test/json-drawer.test.tsx b/test/json-drawer.test.tsx
new file mode 100644
index 0000000..eb001dd
--- /dev/null
+++ b/test/json-drawer.test.tsx
@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { JsonDrawer } from '../src/components/json-drawer';
+import type { SupportedBlock } from '../src/types';
+
+const BLOCKS: SupportedBlock[] = [{ type: 'divider' }];
+
+describe('JsonDrawer', () => {
+  it('renders a blank textarea when there are no blocks', () => {
+    render(<JsonDrawer open onOpenChange={() => {}} blocks={[]} onApply={() => {}} />);
+
+    expect((screen.getByRole('textbox', { name: 'Block Kit JSON' }) as HTMLTextAreaElement).value).toBe('');
+  });
+
+  it('clicking Done closes the panel', () => {
+    const onOpenChange = vi.fn();
+    render(<JsonDrawer open onOpenChange={onOpenChange} blocks={BLOCKS} onApply={() => {}} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Done' }));
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('shows an accepted indicator after a valid edit is applied', async () => {
+    const onApply = vi.fn();
+    render(<JsonDrawer open onOpenChange={() => {}} blocks={BLOCKS} onApply={onApply} />);
+
+    fireEvent.change(screen.getByRole('textbox', { name: 'Block Kit JSON' }), {
+      target: { value: JSON.stringify([{ type: 'divider' }]) }
+    });
+
+    expect(onApply).toHaveBeenCalledWith([{ type: 'divider' }]);
+    await screen.findByText('Input accepted');
+  });
+});

From 48d839ad523d84c980aa223f05d66755d716b9a7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Jul 2026 18:31:47 +0000
Subject: [PATCH 2/2] Make Done button primary and refine accepted indicator

- Done button now uses the shared primary Button component
- The accepted checkmark now sits to the left of the copy button
  (top-right of the panel) and stays visible longer (1.8s)
---
 src/components/json-drawer.tsx | 49 +++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/components/json-drawer.tsx b/src/components/json-drawer.tsx
index c742b3e..8ae66fc 100644
--- a/src/components/json-drawer.tsx
+++ b/src/components/json-drawer.tsx
@@ -2,6 +2,7 @@ import { validateBlockKit } from '@tightknitai/slack-block-kit-validator';
 import { Check, Copy } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { BLOCKS_INPUT_SHAPE_ERROR, unwrapBlocksInput } from '../lib/parse-blocks-input';
+import { Button } from '../lib/ui/button';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from '../lib/ui/sheet';
 import type { SupportedBlock } from '../types';
 
@@ -121,7 +122,7 @@ export function JsonDrawer({
       if (acceptResetRef.current) {
         clearTimeout(acceptResetRef.current);
       }
-      acceptResetRef.current = setTimeout(() => setAccepted(false), 900);
+      acceptResetRef.current = setTimeout(() => setAccepted(false), 1800);
       return;
     }
     let parsed: unknown;
@@ -148,7 +149,7 @@ export function JsonDrawer({
     if (acceptResetRef.current) {
       clearTimeout(acceptResetRef.current);
     }
-    acceptResetRef.current = setTimeout(() => setAccepted(false), 900);
+    acceptResetRef.current = setTimeout(() => setAccepted(false), 1800);
     const result = validateBlockKit(blocks, {
       target: 'blocks',
       surface: 'message'
@@ -177,23 +178,25 @@ export function JsonDrawer({
           <SheetDescription>Edits update the preview as you type. Parse errors show below.</SheetDescription>
         </div>
         <div className="relative flex flex-1 overflow-hidden rounded-md border border-input bg-muted/30 shadow-sm focus-within:ring-1 focus-within:ring-ring">
-          <button
-            type="button"
-            onClick={handleCopy}
-            aria-label={copied ? 'Copied to clipboard' : 'Copy JSON'}
-            className="absolute right-2 top-2 z-10 inline-flex items-center justify-center rounded-md border border-input bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
-            {copied ? <Check className="h-3.5 w-3.5 text-emerald-600" /> : <Copy className="h-3.5 w-3.5" />}
-          </button>
-          <div
-            role="status"
-            aria-hidden={!accepted}
-            className={`pointer-events-none absolute bottom-2 right-2 z-10 flex items-center justify-center rounded-md bg-background/80 p-1.5 shadow-sm backdrop-blur transition-opacity duration-300 ${
-              accepted ? 'opacity-100' : 'opacity-0'
-            }`}
-          >
-            <Check className="h-3.5 w-3.5 text-emerald-600" />
-            <span className="sr-only">Input accepted</span>
+          <div className="absolute right-2 top-2 z-10 flex items-center gap-1.5">
+            <div
+              role="status"
+              aria-hidden={!accepted}
+              className={`pointer-events-none flex items-center justify-center rounded-md bg-background/80 p-1.5 shadow-sm backdrop-blur transition-opacity duration-300 ${
+                accepted ? 'opacity-100' : 'opacity-0'
+              }`}
+            >
+              <Check className="h-3.5 w-3.5 text-emerald-600" />
+              <span className="sr-only">Input accepted</span>
+            </div>
+            <button
+              type="button"
+              onClick={handleCopy}
+              aria-label={copied ? 'Copied to clipboard' : 'Copy JSON'}
+              className="inline-flex items-center justify-center rounded-md border border-input bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              {copied ? <Check className="h-3.5 w-3.5 text-emerald-600" /> : <Copy className="h-3.5 w-3.5" />}
+            </button>
           </div>
           <div
             ref={gutterRef}
@@ -232,13 +235,9 @@ export function JsonDrawer({
           </div>
         )}
         <div className="flex shrink-0 justify-end">
-          <button
-            type="button"
-            onClick={() => onOpenChange(false)}
-            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
+          <Button type="button" onClick={() => onOpenChange(false)}>
             Done
-          </button>
+          </Button>
         </div>
       </SheetContent>
     </Sheet>