feat(settings): block interactions while animating

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

@@ -147,7 +147,13 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     }
     return true;
   },
-  disabled: computed(() => settingsStore.currentSubMenu !== null),
+  disabled: computed(
+    () =>
+      settingsStore.currentSubMenu !== null ||
+      settingsStore.isIntro ||
+      settingsStore.isOutro ||
+      settingsStore.animatingNotification,
+  ),
   selectorAnimation: {
     duration: 0.11,
     ease: "none",
@@ -224,6 +230,16 @@ const selectorXOffset = computed(() => {
       return 0;
   }
 });
+
+const handleActivateB = () => {
+  if (settingsStore.isIntro || settingsStore.isOutro) return;
+  settingsStore.animateOutro();
+};
+
+const handleActivateA = () => {
+  if (settingsStore.isIntro || settingsStore.isOutro) return;
+  select(getParentMenu(selected.value));
+};
 </script>
 
 <template>
@@ -263,14 +279,14 @@ const selectorXOffset = computed(() => {
       :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.goBack')"
       :a-label="$t('common.select')"
-      @activate-b="select(getParentMenu(selected))"
+      @activate-b="handleActivateA()"
     />
     <CommonButtons
       v-else
       :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.quit')"
       :a-label="$t('common.select')"
-      @activate-b="settingsStore.animateOutro()"
+      @activate-b="handleActivateB()"
     />
   </template>
   <component :is="viewComponents[settingsStore.currentSubMenu]" v-else />

app/components/Settings/TopScreen/Notifications.vue

@@ -104,6 +104,7 @@ const animateNotification = (
   if (prev !== null && curr === null) {
     // slide down
     visibleRef.value = prev;
+    store.animatingNotification = true;
     gsap.fromTo(
       offsetRef,
       { value: 0 },
@@ -113,16 +114,29 @@ const animateNotification = (
         ease: "none",
         onComplete: () => {
           visibleRef.value = null;
+          setTimeout(() => {
+            store.animatingNotification = false;
+          }, 50);
         },
       },
     );
   } else if (prev === null && curr !== null) {
     // slide up
+    store.animatingNotification = true;
     visibleRef.value = curr;
     gsap.fromTo(
       offsetRef,
       { value: 48 },
-      { value: 0, duration: 0.2, ease: "none" },
+      {
+        value: 0,
+        duration: 0.2,
+        ease: "none",
+        onComplete: () => {
+          setTimeout(() => {
+            store.animatingNotification = false;
+          }, 50);
+        },
+      },
     );
   }
 };

app/stores/settings.ts

@@ -38,6 +38,8 @@ export const useSettingsStore = defineStore("settings", {
     menuOffsets: [0, -48, -48, -48] as [number, number, number, number],
     menuYOffset: 72,
 
+    animatingNotification: false,
+
     isIntro: true,
     isOutro: false,
   }),