feat: handle hardware back button

Author: martinkaintas

src/popup/components/Header.vue

@@ -67,7 +67,12 @@
 </template>
 
 <script lang="ts">
-import { IonHeader, IonToolbar, useIonRouter } from '@ionic/vue';
+import {
+  IonHeader,
+  IonToolbar,
+  useBackButton,
+  useIonRouter,
+} from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
@@ -189,6 +194,8 @@ export default defineComponent({
       ionRouter.navigate({ name: currentHomeRouteName.value }, 'back', 'push');
     }
 
+    useBackButton(1, back);
+
     return {
       UNFINISHED_FEATURES,
       homeRouteName,

src/popup/components/Modal.vue

@@ -82,6 +82,7 @@ import {
   onBeforeUnmount,
   onMounted,
 } from 'vue';
+import { BackButtonEvent } from '@ionic/vue';
 import { IS_FIREFOX, IS_EXTENSION } from '@/constants';
 import BtnClose from './buttons/BtnClose.vue';
 import FixedScreenFooter from './FixedScreenFooter.vue';
@@ -108,17 +109,23 @@ export default defineComponent({
   setup(props, { slots, emit }) {
     const showHeader = computed(() => props.hasCloseButton || props.header || slots.header);
 
+    function handleClose() {
+      emit('close');
+    }
+
+    function onBackButtonHandler(event: BackButtonEvent) {
+      event.detail.register(100, handleClose);
+    }
+
     onMounted(() => {
+      document.addEventListener('ionBackButton', onBackButtonHandler);
       if (!document.body.style.overflow) {
         document.body.style.overflow = 'hidden';
       }
     });
 
-    function handleClose() {
-      emit('close');
-    }
-
     onBeforeUnmount(() => {
+      document.removeEventListener('ionBackButton', onBackButtonHandler);
       document.body.style.overflow = '';
     });