feat(settings): animate buttons

app/stores/confirmationModal.ts

@@ -14,6 +14,10 @@ export const useConfirmationModal = defineStore("confirmationModal", {
     onConfirm: null as (() => void) | null,
     onCancel: null as (() => void) | null,
     onClosed: null as ((choice: "confirm" | "cancel") => void) | null,
+    keepButtonsDown: null as
+      | boolean
+      | ((choice: "confirm" | "cancel") => boolean)
+      | null,
     offsetY: MODAL_MAX_Y_OFFSET,
     buttonsYOffset: 0,
     modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
@@ -29,6 +33,7 @@ export const useConfirmationModal = defineStore("confirmationModal", {
       onCancel?: () => void;
       onConfirm?: () => void;
       onClosed?: (choice: "confirm" | "cancel") => void;
+      keepButtonsDown?: boolean | ((choice: "confirm" | "cancel") => boolean);
       timeout?: number;
     }) {
       gsap.killTweensOf(this);
@@ -38,6 +43,7 @@ export const useConfirmationModal = defineStore("confirmationModal", {
       this.onConfirm = options.onConfirm ?? null;
       this.onCancel = options.onCancel ?? null;
       this.onClosed = options.onClosed ?? null;
+      this.keepButtonsDown = options.keepButtonsDown ?? null;
       this.isVisible = true;
       this.isClosing = false;
       this.isOpen = true;
@@ -80,7 +86,12 @@ export const useConfirmationModal = defineStore("confirmationModal", {
 
       this.isClosing = true;
 
-      gsap
+      const keepButtonsDown =
+        typeof this.keepButtonsDown === "function"
+          ? this.keepButtonsDown(choice)
+          : !!this.keepButtonsDown;
+
+      const tl = gsap
         .timeline()
         // modal buttons down
         .to(this, {
@@ -93,18 +104,25 @@ export const useConfirmationModal = defineStore("confirmationModal", {
           offsetY: MODAL_MAX_Y_OFFSET,
           duration: MODAL_TIME,
           ease: "none",
-        })
+        });
+
+      if (!keepButtonsDown) {
         // standard buttons up
-        .to(this, {
+        tl.to(this, {
           buttonsYOffset: 0,
           duration: BUTTONS_TIME,
           ease: "none",
-        })
-        .call(() => {
-          const closedCallback = this.onClosed;
-          this.$reset();
-          closedCallback?.(choice);
         });
+      }
+
+      tl.call(() => {
+        const closedCallback = this.onClosed;
+        this.$reset();
+        if (keepButtonsDown) {
+          this.buttonsYOffset = BUTTONS_MAX_Y_OFFSET;
+        }
+        closedCallback?.(choice);
+      });
     },
   },
 });