feat: add ESC key support to close all modals and fullscreen modes

src/components/InstallPrompt.vue

@@ -51,12 +51,20 @@ const dismissPrompt = () => {
   deferredPrompt = null
 }
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showInstallPrompt.value) {
+    dismissPrompt()
+  }
+}
+
 onMounted(() => {
   window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.addEventListener('keydown', handleKeydown)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.removeEventListener('keydown', handleKeydown)
 })
 </script>
 

src/components/tools/QrScanner.vue

@@ -377,11 +377,18 @@ watch(scannedCodes, (newVal) => {
   localStorage.setItem('qr-history', JSON.stringify(newVal))
 }, { deep: true })
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && isFullscreen.value) {
+    toggleFullscreen()
+  }
+}
+
 onMounted(() => {
   checkCameras()
   loadHistory()
   window.addEventListener('resize', updateVideoAspect)
   window.addEventListener('resize', startBackgroundLoop)
+  window.addEventListener('keydown', handleKeydown)
   watch(isFullscreen, (fs) => {
     if (fs) {
       startBackgroundLoop()
@@ -396,6 +403,7 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', updateVideoAspect)
   window.removeEventListener('resize', startBackgroundLoop)
+  window.removeEventListener('keydown', handleKeydown)
   stopScan()
 })
 

src/components/tools/UrlCleanerExceptionsModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { X, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
 
 const props = defineProps({
@@ -10,6 +10,24 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'update:exceptions'])
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape') {
+    emit('close')
+  }
+}
+
+watch(() => props.isOpen, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
 const newRule = ref({
   domainPattern: '',
   keepParams: '',

src/components/tools/common/ExtensionStatus.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { Plug, Plus, X } from 'lucide-vue-next'
 
 const props = defineProps({
@@ -13,6 +13,24 @@ const props = defineProps({
 })
 
 const showModal = ref(false)
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showModal.value) {
+    showModal.value = false
+  }
+}
+
+watch(showModal, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
 </script>
 
 <template>