De-coupled web and mobile QR scanner views

- Separate scanner views for web and mobile platforms: different libraries, similar layouts
- Mobile: QR code overlaid on top of full-screen camera view
- Mobile: added framing box + instruction text
- Mobile: increased debounce time to compensate for behavior of MLkit scanner
- Web: removed Capacitor-related code and platform-specific conditions
- Web: adjusted max-size of QR code and camera view to better fit newer iOS device screens
- Web + mobile: camera view remains active when a QR scan is triggered

src/views/ContactsView.vue

@@ -69,12 +69,12 @@
         </span>
       </span>
 
-      <router-link
-        :to="{ name: 'contact-qr' }"
+      <button
         class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+        @click="handleQRCodeClick"
       >
         <font-awesome icon="qrcode" class="fa-fw text-2xl" />
-      </router-link>
+      </button>
 
       <textarea
         v-model="contactInput"
@@ -353,6 +353,7 @@ import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+import { Capacitor } from "@capacitor/core";
 
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
@@ -1438,5 +1439,13 @@ export default class ContactsView extends Vue {
       );
     }
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>