fix: block interactions when animation is happening

app/composables/useButtonNavigation.ts

@@ -5,6 +5,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   initialButton,
   onButtonClick,
   navigation,
+  disabled,
 }: {
   buttons: T;
   initialButton: keyof T;
@@ -19,6 +20,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
       horizontalMode?: "navigate" | "preview";
     }
   >;
+  disabled?: Ref<boolean>;
 }) => {
   const { state: modalState } = useConfirmationModal();
 
@@ -28,7 +30,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   const nextButton = ref<keyof T | undefined>();
 
   useScreenClick((x: number, y: number) => {
-    if (modalState.value.isOpen) return;
+    if (modalState.value.isOpen || disabled?.value) return;
 
     for (const [buttonName, config] of Object.entries(buttons) as [
       keyof T,
@@ -56,7 +58,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   });
 
   useKeyDown((key) => {
-    if (modalState.value.isOpen) return;
+    if (modalState.value.isOpen || disabled?.value) return;
 
     const currentButton = selectedButton.value as keyof T;
     const currentNav = navigation[currentButton];