From d7783d881e2b9621bb760347480987fe94d5778a Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Tue, 10 Feb 2026 14:03:40 +0100
Subject: [PATCH] feat(settings): animate buttons

---
 .../BottomScreen/Menus/Clock/Achievements.vue |  2 +-
 .../BottomScreen/Menus/Clock/Date.vue         |  2 +-
 .../BottomScreen/Menus/Clock/Time.vue         |  2 +-
 .../Settings/BottomScreen/Menus/Menus.vue     |  2 +-
 .../BottomScreen/Menus/Options/2048.vue       |  3 +-
 .../BottomScreen/Menus/Options/Language.vue   |  3 +-
 .../Menus/Options/RenderingMode.vue           |  3 +-
 .../BottomScreen/Menus/TouchScreen/TapTap.vue |  4 +-
 .../BottomScreen/Menus/User/Birthday.vue      |  3 +-
 .../BottomScreen/Menus/User/Color.vue         |  3 +-
 .../BottomScreen/Menus/User/Snake.vue         |  3 +-
 .../BottomScreen/Menus/User/UserName.vue      |  2 +-
 app/stores/confirmationModal.ts               | 34 +++++++++++----
 app/stores/settings.ts                        | 42 +++++++++++++++++--
 14 files changed, 85 insertions(+), 23 deletions(-)

diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
index 7ab17cb..504beca 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
@@ -192,7 +192,7 @@ onRender((ctx) => {
   />
 
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.reset')"
     @activate-b="handleCancel()"
diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue b/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
index 1557cea..c1d83fb 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
@@ -79,7 +79,7 @@ defineOptions({ render: () => null });
   />
 
   <CommonButtons
-    :y-offset="0"
+    :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"
diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Time.vue b/app/components/Settings/BottomScreen/Menus/Clock/Time.vue
index dd66764..8d2f537 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Time.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Time.vue
@@ -97,7 +97,7 @@ defineOptions({ render: () => null });
   />
 
   <CommonButtons
-    :y-offset="0"
+    :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index c84adf0..38d9499 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -331,7 +331,7 @@ const handleActivateB = () => {
     />
 
     <CommonButtons
-      :y-offset="settingsStore.barOffsetY"
+      :y-offset="settingsStore.barOffsetY + settingsStore.submenuButtonsOffsetY"
       :b-label="isSubmenuSelected ? $t('common.goBack') : $t('common.quit')"
       :a-label="$t('common.select')"
       @activate-b="handleActivateB()"
diff --git a/app/components/Settings/BottomScreen/Menus/Options/2048.vue b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
index c42e6e9..61133cc 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
@@ -19,6 +19,7 @@ const handleActivateB = () => {
         store.closeSubMenu();
       }
     },
+    keepButtonsDown: (choice) => choice === "confirm",
   });
 };
 
@@ -565,7 +566,7 @@ useKeyDown((key) => {
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.quit')"
     :a-label="$t('common.restart')"
     @activate-b="handleActivateB()"
diff --git a/app/components/Settings/BottomScreen/Menus/Options/Language.vue b/app/components/Settings/BottomScreen/Menus/Options/Language.vue
index b238b3d..5d150e7 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/Language.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/Language.vue
@@ -164,6 +164,7 @@ const handleConfirm = () => {
       await animateOutro();
       store.closeSubMenu();
     },
+    keepButtonsDown: true,
     timeout: 2000,
   });
 };
@@ -202,7 +203,7 @@ defineOptions({
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"
diff --git a/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue b/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
index 7f8a03b..fa6a4cf 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
@@ -110,6 +110,7 @@ const handleConfirm = () => {
         await animateOutro();
         store.closeSubMenu();
       },
+      keepButtonsDown: true,
       timeout: 2000,
     });
   };
@@ -179,7 +180,7 @@ onRender((ctx) => {
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
index 40d6da4..d1c5828 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
@@ -138,6 +138,7 @@ const handleActivateB = () => {
           state.value = "playing";
         }
       },
+      keepButtonsDown: (choice) => choice === "confirm",
     });
   } else {
     animateOutro().then(() => store.closeSubMenu());
@@ -238,6 +239,7 @@ const showDeathScreen = () => {
         store.closeSubMenu();
       }
     },
+    keepButtonsDown: (choice) => choice === "cancel",
   });
 };
 
@@ -412,7 +414,7 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.quit')"
     :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
     @activate-b="handleActivateB"
diff --git a/app/components/Settings/BottomScreen/Menus/User/Birthday.vue b/app/components/Settings/BottomScreen/Menus/User/Birthday.vue
index 1863bda..41f51b8 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Birthday.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Birthday.vue
@@ -78,6 +78,7 @@ const handleActivateA = () => {
       await animateOutro();
       store.closeSubMenu();
     },
+    keepButtonsDown: true,
     timeout: 2000,
   });
 };
@@ -111,7 +112,7 @@ defineOptions({ render: () => null });
   />
 
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleActivateB"
diff --git a/app/components/Settings/BottomScreen/Menus/User/Color.vue b/app/components/Settings/BottomScreen/Menus/User/Color.vue
index 7e0c711..70153c7 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Color.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Color.vue
@@ -278,6 +278,7 @@ const handleActivateA = () => {
       await animateOutro();
       store.closeSubMenu();
     },
+    keepButtonsDown: true,
     timeout: 2000,
   });
 };
@@ -285,7 +286,7 @@ const handleActivateA = () => {
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleActivateB"
diff --git a/app/components/Settings/BottomScreen/Menus/User/Snake.vue b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
index 26faa4f..2184550 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Snake.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
@@ -101,6 +101,7 @@ const handleCancel = async () => {
         onCancel: () => {
           state.value = "alive";
         },
+        keepButtonsDown: (choice) => choice === "confirm",
       });
       break;
     }
@@ -327,7 +328,7 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.quit')"
     :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
     @activate-b="handleCancel"
diff --git a/app/components/Settings/BottomScreen/Menus/User/UserName.vue b/app/components/Settings/BottomScreen/Menus/User/UserName.vue
index 0317d44..1ec056c 100644
--- a/app/components/Settings/BottomScreen/Menus/User/UserName.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/UserName.vue
@@ -127,7 +127,7 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
-    :y-offset="0"
+    :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"
diff --git a/app/stores/confirmationModal.ts b/app/stores/confirmationModal.ts
index 2a7f92b..0341bc4 100644
--- a/app/stores/confirmationModal.ts
+++ b/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);
+      });
     },
   },
 });
diff --git a/app/stores/settings.ts b/app/stores/settings.ts
index f1ec168..bd4dd24 100644
--- a/app/stores/settings.ts
+++ b/app/stores/settings.ts
@@ -49,6 +49,8 @@ export const useSettingsStore = defineStore("settings", {
       opacity: 0,
     },
 
+    submenuButtonsOffsetY: 0,
+
     animatingNotification: false,
 
     isIntro: true,
@@ -77,10 +79,25 @@ export const useSettingsStore = defineStore("settings", {
           { offsetY: 16, opacity: 0 },
           { offsetY: 0, opacity: 1, duration: 0.25, ease: "none" },
           "+=0.05",
+        )
+        .to(this, {
+          submenuButtonsOffsetY: 24,
+          duration: 0.167,
+          ease: "none",
+        })
+        .call(() => {
+          this.currentSubMenu = submenu;
+        })
+        .to(
+          this,
+          {
+            submenuButtonsOffsetY: 0,
+            duration: 0.167,
+            ease: "none",
+          },
+          "+=0.05",
         );
 
-      this.currentSubMenu = submenu;
-
       const achievements = useAchievementsStore();
       if (!achievements.advancement.visitedSettings.includes(submenu)) {
         achievements.advancement.visitedSettings.push(submenu);
@@ -94,14 +111,33 @@ export const useSettingsStore = defineStore("settings", {
     },
 
     async closeSubMenu() {
-      this.currentSubMenu = null;
+      const confirmationModal = useConfirmationModal();
+      confirmationModal.buttonsYOffset = 0;
 
       await gsap
         .timeline()
+        .to(this, {
+          submenuButtonsOffsetY: 24,
+          duration: 0.167,
+          ease: "none",
+        })
+        .call(() => {
+          this.currentSubMenu = null;
+        })
         .fromTo(
           this.submenuBackground,
           { offsetY: 0, opacity: 1 },
           { offsetY: 16, opacity: 0, duration: 0.25, ease: "none" },
+          0.167,
+        )
+        .to(
+          this,
+          {
+            submenuButtonsOffsetY: 0,
+            duration: 0.167,
+            ease: "none",
+          },
+          0.217,
         )
         .fromTo(
           this.submenuTransition,