From fd6ab36ab7bcf0919ef7ef5dac7bcb6ab045f4eb Mon Sep 17 00:00:00 2001
From: Bala Sivagnanam <bala@mindlens.com.sg>
Date: Sat, 25 Jul 2026 11:07:11 +0800
Subject: [PATCH] fix(ui): move Save to the first tab stop in the comment
 popover footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reorders the comment popover footer so Save is the first focusable
control after the textarea, ahead of Ask AI and the image-upload
button. Tab order previously matched DOM order left-to-right (image
icon, Ask AI, Save), so fast keyboard-driven flows (select text →
comment → Tab, Tab, Enter) could land on the image-upload button
instead of Save. Pure reorder, no behavior change.

Fixes #1121

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 packages/ui/components/CommentPopover.tsx | 68 +++++++++++------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/ui/components/CommentPopover.tsx b/packages/ui/components/CommentPopover.tsx
index 08072799a..6aa154140 100644
--- a/packages/ui/components/CommentPopover.tsx
+++ b/packages/ui/components/CommentPopover.tsx
@@ -322,17 +322,14 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
 
           {/* Footer */}
           <div className="flex items-center justify-between px-4 py-3 border-t border-border/50">
-            <div className="flex items-center gap-2">
-              {allowImages && (
-                <AttachmentsButton
-                  images={images}
-                  onAdd={(img) => setImages((prev) => [...prev, img])}
-                  onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
-                  variant="inline"
-                />
-              )}
-            </div>
             <div className="flex items-center gap-3">
+              <button
+                onClick={handleSubmit}
+                disabled={!canSubmit}
+                className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+              >
+                {isGlobal ? 'Add' : 'Save'}
+              </button>
               {onAskAI && (
                 <button
                   onClick={handleAskAI}
@@ -345,13 +342,16 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
                 </button>
               )}
               <span className="text-[10px] text-muted-foreground">{submitHint}</span>
-              <button
-                onClick={handleSubmit}
-                disabled={!canSubmit}
-                className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
-              >
-                {isGlobal ? 'Add' : 'Save'}
-              </button>
+            </div>
+            <div className="flex items-center gap-2">
+              {allowImages && (
+                <AttachmentsButton
+                  images={images}
+                  onAdd={(img) => setImages((prev) => [...prev, img])}
+                  onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
+                  variant="inline"
+                />
+              )}
             </div>
           </div>
         </div>
@@ -444,17 +444,14 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
 
       {/* Footer */}
       <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
-        <div className="flex items-center gap-2">
-          {allowImages && (
-            <AttachmentsButton
-              images={images}
-              onAdd={(img) => setImages((prev) => [...prev, img])}
-              onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
-              variant="inline"
-            />
-          )}
-        </div>
         <div className="flex items-center gap-3">
+          <button
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+            className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+          >
+            {isGlobal ? 'Add' : 'Save'}
+          </button>
           {onAskAI && (
             <button
               onClick={handleAskAI}
@@ -467,13 +464,16 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
             </button>
           )}
           <span className="text-[10px] text-muted-foreground">{submitHint}</span>
-          <button
-            onClick={handleSubmit}
-            disabled={!canSubmit}
-            className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
-          >
-            {isGlobal ? 'Add' : 'Save'}
-          </button>
+        </div>
+        <div className="flex items-center gap-2">
+          {allowImages && (
+            <AttachmentsButton
+              images={images}
+              onAdd={(img) => setImages((prev) => [...prev, img])}
+              onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
+              variant="inline"
+            />
+          )}
         </div>
       </div>
       </div>