De-coupled web and mobile scanners

src/views/ContactQRScanShowView.vue

@@ -83,12 +83,20 @@
         ></div>
       </div>
       <div v-else>
-        <router-link
-          :to="{ name: 'contact-qr-scan' }"
+        <button
+          v-if="isNativePlatform"
+          @click="$router.push({ name: 'contact-qr-scan' })"
           class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
         >
           Start Scanning
-        </router-link>
+        </button>
+        <button
+          v-else
+          @click="startScanning"
+          class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
+        >
+          Start Scanning
+        </button>
       </div>
       <span v-if="error" class="text-red-500 block mt-2">{{ error }}</span>
       <span v-else class="block mt-2">
@@ -96,6 +104,14 @@
         permissions.
       </span>
     </div>
+
+    <!-- QR Scanner Dialog for Web -->
+    <QRScannerDialog
+      v-if="showScannerDialog"
+      :on-scan="onScanDetect"
+      :on-error="onScanError"
+      :on-close="closeScannerDialog"
+    />
   </section>
 </template>
 
@@ -104,9 +120,11 @@ import { AxiosError } from "axios";
 import QRCodeVue3 from "qr-code-generator-vue3";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
+import { Capacitor } from "@capacitor/core";
 
 import QuickNav from "../components/QuickNav.vue";
 import UserNameDialog from "../components/UserNameDialog.vue";
+import QRScannerDialog from "../components/QRScanner/QRScannerDialog.vue";
 import { NotificationIface } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
@@ -137,6 +155,7 @@ interface IUserNameDialog {
     QRCodeVue3,
     QuickNav,
     UserNameDialog,
+    QRScannerDialog,
   },
 })
 export default class ContactQRScanShow extends Vue {
@@ -151,6 +170,8 @@ export default class ContactQRScanShow extends Vue {
   qrValue = "";
   isScanning = false;
   error: string | null = null;
+  showScannerDialog = false;
+  isNativePlatform = Capacitor.isNativePlatform();
 
   ETHR_DID_PREFIX = ETHR_DID_PREFIX;
 
@@ -251,7 +272,13 @@ export default class ContactQRScanShow extends Vue {
         }
       }
 
-      // Add scan listener
+      // Show the scanner dialog for web
+      if (!this.isNativePlatform) {
+        this.showScannerDialog = true;
+        return;
+      }
+
+      // For native platforms, use the scanner service
       scanner.addListener({
         onScan: this.onScanDetect,
         onError: this.onScanError,
@@ -574,6 +601,11 @@ export default class ContactQRScanShow extends Vue {
     });
   }
 
+  closeScannerDialog() {
+    this.showScannerDialog = false;
+    this.isScanning = false;
+  }
+
   // Lifecycle hooks
   mounted() {
     this.isMounted = true;