Use state for DeleteButton confirming flag

Replace mutable ref with React state so disabled and aria-busy update
correctly during async confirmation. Prevents stale UI and improves
accessibility while keeping existing behavior intact.

Author: PeterDaveHello

src/components/DeleteButton/index.jsx

@@ -13,7 +13,7 @@ function DeleteButton({ onConfirm, size, text }) {
   const { t } = useTranslation()
   const [waitConfirm, setWaitConfirm] = useState(false)
   const confirmRef = useRef(null)
-  const confirmingRef = useRef(false)
+  const [confirming, setConfirming] = useState(false)
 
   useEffect(() => {
     if (waitConfirm) confirmRef.current.focus()
@@ -29,20 +29,20 @@ function DeleteButton({ onConfirm, size, text }) {
           fontSize: '10px',
           ...(waitConfirm ? {} : { display: 'none' }),
         }}
-        disabled={confirmingRef.current}
-        aria-busy={confirmingRef.current ? 'true' : 'false'}
+        disabled={confirming}
+        aria-busy={confirming ? 'true' : 'false'}
         onMouseDown={(e) => {
           e.preventDefault()
           e.stopPropagation()
         }}
         onBlur={() => {
-          if (!confirmingRef.current) setWaitConfirm(false)
+          if (!confirming) setWaitConfirm(false)
         }}
         onClick={async (e) => {
-          if (confirmingRef.current) return
+          if (confirming) return
           e.preventDefault()
           e.stopPropagation()
-          confirmingRef.current = true
+          setConfirming(true)
           try {
             await onConfirm()
             setWaitConfirm(false)
@@ -51,7 +51,7 @@ function DeleteButton({ onConfirm, size, text }) {
             // eslint-disable-next-line no-console
             console.error(err)
           } finally {
-            confirmingRef.current = false
+            setConfirming(false)
           }
         }}
       >