better auto focus for delete

electron-ui/src/renderer/components/Trimmer/dialogs/DeleteClipDialog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Dialog,
   DialogTitle,
@@ -15,34 +14,6 @@ export default function DeleteClipDialog({
   onCancel: () => void;
   onDelete: () => void;
 }) {
-  const cancelRef = React.useRef<HTMLButtonElement>(null);
-  const deleteRef = React.useRef<HTMLButtonElement>(null);
-  const [focusedIdx, setFocusedIdx] = React.useState(1); // 0: Cancel, 1: Delete
-
-  // Focus Delete on open
-  React.useEffect(() => {
-    if (open) {
-      setFocusedIdx(1);
-      setTimeout(() => {
-        deleteRef.current?.focus();
-      }, 0);
-    }
-  }, [open]);
-
-  // Keyboard navigation
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Tab') {
-      e.preventDefault();
-      const nextIdx = (focusedIdx + 1) % 2;
-      setFocusedIdx(nextIdx);
-      if (nextIdx === 0) cancelRef.current?.focus();
-      else deleteRef.current?.focus();
-    } else if (e.key === 'Enter') {
-      if (focusedIdx === 0) onCancel();
-      else onDelete();
-    }
-  };
-
   return (
     <Dialog
       open={open}
@@ -50,26 +21,22 @@ export default function DeleteClipDialog({
       slotProps={{
         paper: { sx: { backgroundColor: '#1a1a1a', color: 'white' } },
       }}
-      onKeyDown={handleKeyDown}
     >
       <DialogTitle>Confirm Delete</DialogTitle>
       <DialogContent>Are you sure you want to delete this clip?</DialogContent>
       <DialogActions>
         <button
           type="button"
-          ref={cancelRef}
-          tabIndex={focusedIdx === 0 ? 0 : -1}
           onClick={onCancel}
-          className={`bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md${focusedIdx === 0 ? ' ring-2 ring-plumDark' : ''}`}
+          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
         >
           Cancel
         </button>
         <button
           type="button"
-          ref={deleteRef}
-          tabIndex={focusedIdx === 1 ? 0 : -1}
           onClick={onDelete}
-          className={`bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md${focusedIdx === 1 ? ' ring-2 ring-plumDark' : ''}`}
+          autoFocus
+          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
         >
           Delete
         </button>

electron-ui/src/renderer/components/Trimmer/dialogs/NameEditDialog.tsx

@@ -42,10 +42,8 @@ export default function NameEditDialog({
           onChange={(e) => {
             setInput(e.target.value);
           }}
-          rows={3}
           onFocus={(event) => event.target.select()}
           aria-label="Edit clip name"
-          style={{ minHeight: '3em' }}
         />
       </DialogContent>
       <DialogActions>