Latch a Quest log removal as Remove is activated and keep focus in its confirmation

The pending state reached the confirmation only on a later render, so
Keep it, Escape, the scrim or a second Remove straight after Remove could
still close the confirmation or send a second DELETE. QuestLogSheet now
latches the removal synchronously in a ref, refuses dismissal and a
repeated confirmation while it is set, and renders busy from it until
the removal settles.

A focused button that becomes disabled loses focus to the page, outside
the dialog. Confirm now moves focus to its dialog when the focused
control is disabled by busy or dismissible changing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/settings/LeaveGuard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, type ReactNode } from 'react'
+import { useEffect, useId, useLayoutEffect, useRef, type ReactNode } from 'react'
 import { useBlocker } from 'react-router'
 import { Button } from '../ui/Button.tsx'
 import { Sheet } from '../ui/Sheet.tsx'
@@ -58,12 +58,20 @@ export function Confirm({
   onConfirm,
 }: ConfirmProps) {
   const titleId = useId()
+  const sheetRef = useRef<HTMLDivElement>(null)
+  // A focused button that becomes disabled loses focus to the page, outside
+  // the dialog; the dialog takes it instead.
+  useLayoutEffect(() => {
+    const dialog = sheetRef.current?.closest<HTMLElement>('[role="dialog"]')
+    const active = document.activeElement
+    if (dialog && active instanceof HTMLElement && active.matches(':disabled') && dialog.contains(active)) dialog.focus()
+  }, [busy, dismissible])
   function dismiss() {
     if (dismissible) onCancel()
   }
   return (
     <Sheet open={open} onClose={dismiss} aria-labelledby={titleId}>
-      <div className={styles.sheet}>
+      <div ref={sheetRef} className={styles.sheet}>
         <h2 id={titleId} className={styles.title}>
           {title}
         </h2>