Refactor code structure for improved readability and maintainability

webapp/src/components/ConfirmDialog.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'preact/hooks';
 import type { ComponentChildren } from 'preact';
 import { t } from '@/lib/i18n';
 
@@ -19,14 +20,32 @@ interface ConfirmDialogProps {
 }
 
 export default function ConfirmDialog(props: ConfirmDialogProps) {
-  if (!props.open) return null;
+  const [present, setPresent] = useState(props.open);
+  const [closing, setClosing] = useState(false);
+
+  useEffect(() => {
+    if (props.open) {
+      setPresent(true);
+      setClosing(false);
+      return;
+    }
+    if (!present) return;
+    setClosing(true);
+    const timer = window.setTimeout(() => {
+      setPresent(false);
+      setClosing(false);
+    }, 240);
+    return () => window.clearTimeout(timer);
+  }, [props.open, present]);
+
+  if (!present) return null;
   return (
-    <div className="dialog-mask">
+    <div className={`dialog-mask ${props.open && !closing ? 'open' : ''} ${closing ? 'closing' : ''}`}>
       <form
-        className="dialog-card"
+        className={`dialog-card ${props.open && !closing ? 'open' : ''} ${closing ? 'closing' : ''}`}
         onSubmit={(e) => {
           e.preventDefault();
-          if (props.confirmDisabled) return;
+          if (props.confirmDisabled || closing) return;
           props.onConfirm();
         }}
       >