feat(common): improve confirmation modal api

app/components/Common/ConfirmationModal.vue

@@ -18,12 +18,12 @@ const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT;
 
 const handleActivateA = () => {
   confirmationModal.onConfirm?.();
-  confirmationModal.close();
+  confirmationModal.close("confirm");
 };
 
 const handleActivateB = () => {
   confirmationModal.onCancel?.();
-  confirmationModal.close();
+  confirmationModal.close("cancel");
 };
 
 onRender((ctx) => {
@@ -45,7 +45,7 @@ onRender((ctx) => {
 }, 100);
 
 onUnmounted(() => {
-  confirmationModal.close();
+  confirmationModal.close("cancel");
 });
 </script>
 

app/components/Settings/BottomScreen/Menus/Options/2048.vue

@@ -14,17 +14,13 @@ const handleActivateB = () => {
 const handleActivateA = () => {
   if (isDead()) {
     resetBoard();
-    confirmationModal.close();
     return;
   }
-  let confirmed = false;
   confirmationModal.open({
     text: $t("settings.options.2048.restartConfirmation"),
-    onConfirm: () => {
-      confirmed = true;
-    },
-    onClosed: () => {
-      if (confirmed) {
+    onConfirm: () => {},
+    onClosed: (choice) => {
+      if (choice === "confirm") {
         resetBoard();
       }
     },
@@ -93,14 +89,11 @@ let tiles: VisualTile[] = [];
 let animating = false;
 
 const showRestartModal = () => {
-  let confirmed = false;
   confirmationModal.open({
     text: $t("settings.options.2048.gameOver"),
-    onConfirm: () => {
-      confirmed = true;
-    },
-    onClosed: () => {
-      if (confirmed) {
+    onConfirm: () => {},
+    onClosed: (choice) => {
+      if (choice === "confirm") {
         resetBoard();
       }
     },

app/components/Settings/BottomScreen/Menus/Options/Language.vue

@@ -93,9 +93,8 @@ const handleConfirm = () => {
       { locale: selectedLocale.code },
     ),
     onClosed: () => store.closeSubMenu(),
+    timeout: 2000,
   });
-  // TODO: add "timeout" to confirmationModal.open
-  setTimeout(() => confirmationModal.close(), 2000);
 };
 
 onRender((ctx) => {

app/components/Settings/BottomScreen/Menus/Options/StartUp.vue

@@ -42,8 +42,8 @@ const handleConfirm = () => {
       onClosed: () => {
         store.closeSubMenu();
       },
+      timeout: 2000,
     });
-    setTimeout(() => confirmationModal.close(), 2000);
   };
 
   until(() => app.ready)

app/components/Settings/BottomScreen/Menus/User/Birthday.vue

@@ -43,10 +43,8 @@ const handleActivateA = () => {
   confirmationModal.open({
     text,
     onClosed: () => store.closeSubMenu(),
+    timeout: 2000,
   });
-  setTimeout(() => {
-    confirmationModal.close();
-  }, 2000);
 };
 
 defineOptions({ render: () => null });

app/components/Settings/BottomScreen/Menus/User/Color.vue

@@ -125,10 +125,8 @@ const handleConfirm = () => {
   confirmationModal.open({
     text: $t("settings.user.color.confirmation"),
     onClosed: () => store.closeSubMenu(),
+    timeout: 2000,
   });
-  setTimeout(() => {
-    confirmationModal.close();
-  }, 2000);
 };
 </script>