feat(react/dialogs): port the rest of confirm

apps/client/src/widgets/dialogs/confirm.tsx

@@ -4,27 +4,30 @@ import Button from "../react/Button";
 import { closeActiveDialog, openDialog } from "../../services/dialog";
 import { t } from "../../services/i18n";
 import { useState } from "react";
+import FormCheckbox from "../react/FormCheckbox";
 
 interface ConfirmDialogProps {
-    message?: string | HTMLElement;   
+    title?: string;
+    message?: string | HTMLElement;
     callback?: ConfirmDialogCallback;
     lastElementToFocus?: HTMLElement | null;
+    isConfirmDeleteNoteBox?: boolean;   
 }
 
-function ConfirmDialogComponent({ message, callback, lastElementToFocus }: ConfirmDialogProps) {
-
+function ConfirmDialogComponent({ title, message, callback, lastElementToFocus, isConfirmDeleteNoteBox }: ConfirmDialogProps) {
     const [ confirmed, setConfirmed ] = useState<boolean>(false);
+    const [ isDeleteNoteChecked, setIsDeleteNoteChecked ] = useState<boolean>(false);
 
-    return (message && 
+    return ( 
         <Modal
-            title={t("confirm.confirmation")}
+            title={title ?? t("confirm.confirmation")}
             size="md"
             zIndex={2000}
             scrollable={true}
             onHidden={() => {
                 callback?.({
                     confirmed,
-                    isDeleteNoteChecked: false // This can be extended to include more options if needed
+                    isDeleteNoteChecked
                 });
                 lastElementToFocus?.focus();
             }}
@@ -36,9 +39,17 @@ function ConfirmDialogComponent({ message, callback, lastElementToFocus }: Confi
                 }} />
             </>}
         >
-            {typeof message === "string"
-                ? <div>{message ?? ""}</div>
+            {!message || typeof message === "string"
+                ? <div>{(message as string) ?? ""}</div>
                 : <div dangerouslySetInnerHTML={{ __html: message.outerHTML ?? "" }} />}
+
+            {isConfirmDeleteNoteBox && (
+                <FormCheckbox
+                    name="confirm-dialog-delete-note"
+                    label={t("confirm.also_delete_note")}
+                    hint={t("confirm.if_you_dont_check")}
+                    currentValue={isDeleteNoteChecked} onChange={setIsDeleteNoteChecked} />
+            )}
         </Modal>
     );
 }
@@ -57,6 +68,12 @@ export interface ConfirmWithMessageOptions {
     callback: ConfirmDialogCallback;
 }
 
+// For "showConfirmDialog"
+export interface ConfirmWithTitleOptions {
+    title: string;
+    callback: ConfirmDialogCallback;
+}
+
 export default class ConfirmDialog extends ReactBasicWidget {
 
     private props: ConfirmDialogProps = {};
@@ -66,10 +83,21 @@ export default class ConfirmDialog extends ReactBasicWidget {
     }
 
     showConfirmDialogEvent({ message, callback }: ConfirmWithMessageOptions) {
+        this.showDialog(null, message, callback, false);        
+    }
+
+    showConfirmDeleteNoteBoxWithNoteDialogEvent({ title, callback }: ConfirmWithTitleOptions) {
+        const message = t("confirm.are_you_sure_remove_note", { title: title });
+        this.showDialog(title, message, callback, true);
+    }
+
+    private showDialog(title: string | null, message: MessageType, callback: ConfirmDialogCallback, isConfirmDeleteNoteBox: boolean) {
         this.props = {
+            title: title,
             message: (typeof message === "object" && "length" in message ? message[0] : message),
             lastElementToFocus: (document.activeElement as HTMLElement),
-            callback
+            callback,
+            isConfirmDeleteNoteBox
         };
         this.doRender();
         openDialog(this.$widget);

apps/client/src/widgets/react/FormCheckbox.tsx

@@ -1,14 +1,20 @@
 interface FormCheckboxProps {
     name: string;
     label: string;
-    currentValue?: boolean;
+    /**
+     * If set, the checkbox label will be underlined and dotted, indicating a hint. When hovered, it will show the hint text.
+     */
+    hint?: string;
+    currentValue: boolean;
     onChange(newValue: boolean): void;
 }
 
-export default function FormCheckbox({ name, label, currentValue, onChange }: FormCheckboxProps) {
+export default function FormCheckbox({ name, label, currentValue, onChange, hint }: FormCheckboxProps) {
     return (
         <div className="form-check">
-            <label className="form-check-label tn-checkbox">
+            <label
+                className="form-check-label tn-checkbox"
+                style={hint && { textDecoration: "underline dotted var(--main-text-color)" }} title={hint}>
                 <input
                     className="form-check-input"
                     type="checkbox"