refactor: add ignoreWhenModalOpen parameter to useKeyDown

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

@@ -151,12 +151,15 @@ onClick((x, y) => {
   }
 });
 
-useKeyDown(({ key }) => {
+useKeyDown(
+  ({ key }) => {
     if (isAnimating.value) return;
     if (key === "NDS_X") {
       handleVisitAll();
     }
-});
+  },
+  { ignoreWhenModalOpen: true },
+);
 
 onRender((ctx) => {
   // slash divider

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

@@ -600,8 +600,9 @@ const slide = (rowDir: number, colDir: number) => {
   }
 };
 
-useKeyDown(({ key }) => {
+useKeyDown(
-  if (isAnimating.value || confirmationModal.isOpen) return;
+  ({ key }) => {
+    if (isAnimating.value) return;
     switch (key) {
       case "NDS_UP":
       case "NDS_SWIPE_UP":
@@ -620,7 +621,9 @@ useKeyDown(({ key }) => {
         slide(0, 1);
         break;
     }
-});
+  },
+  { ignoreWhenModalOpen: true },
+);
 </script>
 
 <template>

app/composables/useKeyDown.ts

@@ -6,11 +6,17 @@ export type KeyDownCallback = (params: {
   repeated: boolean;
 }) => void;
 
-export const useKeyDown = (callback: KeyDownCallback) => {
+export const useKeyDown = (
+  callback: KeyDownCallback,
+  // the confirmation modal's own buttons rely on useKeyDown, so this is opt-in
+  options: { ignoreWhenModalOpen?: boolean } = {},
+) => {
   const app = useAppStore();
+  const confirmationModal = useConfirmationModal();
 
   const handleKeyDown = (event: KeyboardEvent) => {
     if (app.lagModalOpen) return;
+    if (options.ignoreWhenModalOpen && confirmationModal.isOpen) return;
 
     const ndsButton = mapCodeToNDS(event.code);
     if (