feat(common): move confirmation modal to his own store, and add 'onClosed' event

app/components/Common/ConfirmationModal.vue

@@ -4,7 +4,7 @@ import Buttons from "./Buttons.vue";
 const { onRender } = useScreen();
 
 const { assets } = useAssets();
-const { close, state } = useConfirmationModal();
+const confirmationModal = useConfirmationModal();
 
 const BG_WIDTH = assets.common.confirmationModal.width;
 const BG_HEIGHT = assets.common.confirmationModal.height;
@@ -17,22 +17,22 @@ const BOTTOM_BAR_HEIGHT = 24;
 const CLIP_HEIGHT = SCREEN_HEIGHT - BOTTOM_BAR_HEIGHT;
 
 const handleActivateA = () => {
-  state.value.onConfirm?.();
-  close();
+  confirmationModal.onConfirm?.();
+  confirmationModal.close();
 };
 
 const handleActivateB = () => {
-  close();
+  confirmationModal.close();
 };
 
 onRender((ctx) => {
-  if (!state.value.isVisible) return;
+  if (!confirmationModal.isVisible) return;
 
   ctx.beginPath();
   ctx.rect(0, 0, SCREEN_WIDTH, CLIP_HEIGHT);
   ctx.clip();
 
-  ctx.translate(0, state.value.offsetY);
+  ctx.translate(0, confirmationModal.offsetY);
 
   ctx.drawImage(assets.common.confirmationModal, BG_X, BG_Y);
 
@@ -40,18 +40,18 @@ onRender((ctx) => {
   ctx.textBaseline = "top";
   ctx.fillStyle = "#ffffff";
 
-  fillTextCentered(ctx, state.value.text, BG_X, TEXT_Y, BG_WIDTH);
+  fillTextCentered(ctx, confirmationModal.text, BG_X, TEXT_Y, BG_WIDTH);
 }, 100);
 
 onUnmounted(() => {
-  close();
+  confirmationModal.close();
 });
 </script>
 
 <template>
   <Buttons
-    v-if="state.onConfirm"
-    :y-offset="state.modalButtonsYOffset"
+    v-if="confirmationModal.onConfirm"
+    :y-offset="confirmationModal.modalButtonsYOffset"
     b-label="Cancel"
     a-label="Confirm"
     @activate-a="handleActivateA"

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -6,7 +6,7 @@ import Buttons from "./Buttons.vue";
 import ButtonSelector from "~/components/Common/ButtonSelector.vue";
 
 const store = useContactStore();
-const { open: openModal, state: modalState } = useConfirmationModal();
+const confirmationModal = useConfirmationModal();
 
 const ACTIONS = {
   github: ["Open", "Github profile", "https://github.com/pihkaal"],
@@ -59,7 +59,7 @@ const actionateButton = async (button: (typeof selectedButton)["value"]) => {
     }
   } else {
     const url = content.replace(/^https?:\/\//, "");
-    openModal({
+    confirmationModal.open({
       text: `Open ${url}?`,
       onConfirm: async () => {
         store.pushNotification(`${verb} opened`);
@@ -92,7 +92,7 @@ const actionateButton = async (button: (typeof selectedButton)["value"]) => {
   <CommonConfirmationModal />
   <CommonButtons
     :y-offset="
-      store.isIntro ? store.intro.barOffsetY : modalState.buttonsYOffset
+      store.isIntro ? store.intro.barOffsetY : confirmationModal.buttonsYOffset
     "
     :opacity="
       store.isIntro