refactor(ContactQRScanShowView): simplify QR scanning and contact processing

- Remove complex camera lifecycle management code
- Streamline QR code processing and contact handling
- Simplify clipboard operations using native API
- Remove redundant error handling and notification methods
- Consolidate contact processing logic into focused methods

src/components/QRScannerDialog.vue

@@ -0,0 +1,317 @@
+<template>
+  <div v-if="visible" class="dialog-overlay z-[60]">
+    <div class="dialog relative">
+      <div class="text-lg text-center font-light relative z-50">
+        <div
+          id="ViewHeading"
+          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-0.5 bg-black/50 text-white leading-none"
+        >
+          <span v-if="state.isProcessing">{{ state.processingStatus }}</span>
+          <span v-else>Scan QR Code</span>
+        </div>
+
+        <div
+          class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white cursor-pointer"
+          @click="close()"
+        >
+          <font-awesome icon="xmark" class="w-[1em]" />
+        </div>
+      </div>
+
+      <div class="mt-8">
+        <!-- Web QR Code Scanner -->
+        <qrcode-stream
+          v-if="useQRReader"
+          class="w-full max-w-lg mx-auto"
+          @detect="onScanDetect"
+          @error="onScanError"
+        />
+
+        <!-- Mobile Camera Button -->
+        <div v-else class="text-center mt-4">
+          <button
+            v-if="!state.isProcessing"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+            @click="openMobileCamera"
+          >
+            Open Camera
+          </button>
+          <div v-else class="text-center">
+            <font-awesome icon="spinner" class="fa-spin fa-3x" />
+            <p class="mt-2">{{ state.processingDetails }}</p>
+          </div>
+        </div>
+
+        <p v-if="state.error" class="mt-4 text-red-500 text-center">
+          {{ state.error }}
+        </p>
+
+        <p class="mt-4 text-sm text-gray-600 text-center">
+          Position the QR code within the camera view to scan
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { QrcodeStream } from "vue-qrcode-reader";
+import { reactive } from "vue";
+import {
+  BarcodeScanner,
+  type ScanResult,
+} from "@capacitor-mlkit/barcode-scanning";
+import type { PluginListenerHandle } from "@capacitor/core";
+import { logger } from "../utils/logger";
+import { NotificationIface } from "../constants/app";
+
+// Declare global constants
+declare const __USE_QR_READER__: boolean;
+declare const __IS_MOBILE__: boolean;
+
+interface AppState {
+  isProcessing: boolean;
+  processingStatus: string;
+  processingDetails: string;
+  error: string;
+}
+
+@Component({
+  components: {
+    QrcodeStream,
+  },
+})
+export default class QRScannerDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  visible = false;
+  private scanListener: PluginListenerHandle | null = null;
+  private onScanCallback: ((result: string) => void) | null = null;
+
+  state = reactive<AppState>({
+    isProcessing: false,
+    processingStatus: "",
+    processingDetails: "",
+    error: "",
+  });
+
+  async open(onScan: (result: string) => void) {
+    this.onScanCallback = onScan;
+    this.visible = true;
+    this.state.error = "";
+
+    if (!this.useQRReader) {
+      // Check if barcode scanning is supported on mobile
+      try {
+        const { supported } = await BarcodeScanner.isSupported();
+        if (!supported) {
+          this.showError("Barcode scanning is not supported on this device");
+          return;
+        }
+      } catch (error) {
+        this.showError("Failed to check barcode scanner support");
+        return;
+      }
+    }
+  }
+
+  close() {
+    this.visible = false;
+    this.stopScanning().catch((error) => {
+      logger.error("Error stopping scanner during close:", error);
+    });
+    this.onScanCallback = null;
+  }
+
+  async openMobileCamera() {
+    try {
+      this.state.isProcessing = true;
+      this.state.processingStatus = "Starting camera...";
+      logger.log("Opening mobile camera - starting initialization");
+
+      // Check current permission status
+      const status = await BarcodeScanner.checkPermissions();
+      logger.log("Camera permission status:", JSON.stringify(status, null, 2));
+
+      if (status.camera !== "granted") {
+        // Request permission if not granted
+        logger.log("Requesting camera permissions...");
+        const permissionStatus = await BarcodeScanner.requestPermissions();
+        if (permissionStatus.camera !== "granted") {
+          throw new Error("Camera permission not granted");
+        }
+        logger.log(
+          "Camera permission granted:",
+          JSON.stringify(permissionStatus, null, 2),
+        );
+      }
+
+      // Remove any existing listener first
+      await this.cleanupScanListener();
+
+      // Set up the listener before starting the scan
+      logger.log("Setting up new barcode listener");
+      this.scanListener = await BarcodeScanner.addListener(
+        "barcodesScanned",
+        async (result: ScanResult) => {
+          logger.log(
+            "Barcode scan result received:",
+            JSON.stringify(result, null, 2),
+          );
+          if (result.barcodes && result.barcodes.length > 0) {
+            this.state.processingDetails = `Processing QR code: ${result.barcodes[0].rawValue}`;
+            await this.handleScanResult(result.barcodes[0].rawValue);
+          }
+        },
+      );
+      logger.log("Barcode listener setup complete");
+
+      // Start the scanner
+      logger.log("Starting barcode scanner");
+      await BarcodeScanner.startScan();
+      logger.log("Barcode scanner started successfully");
+
+      this.state.isProcessing = false;
+      this.state.processingStatus = "";
+    } catch (error) {
+      logger.error("Failed to open camera:", error);
+      this.state.isProcessing = false;
+      this.state.processingStatus = "";
+      this.showError(
+        error instanceof Error ? error.message : "Failed to open camera",
+      );
+
+      // Cleanup on error
+      await this.cleanupScanListener();
+    }
+  }
+
+  private async handleScanResult(rawValue: string) {
+    try {
+      this.state.isProcessing = true;
+      this.state.processingStatus = "Processing QR code...";
+      this.state.processingDetails = `Scanned value: ${rawValue}`;
+
+      // Stop scanning before processing
+      await this.stopScanning();
+
+      if (this.onScanCallback) {
+        await this.onScanCallback(rawValue);
+        // Only close after the callback is complete
+        this.close();
+      }
+    } catch (error) {
+      logger.error("Error handling scan result:", error);
+      this.showError("Failed to process scan result");
+    } finally {
+      this.state.isProcessing = false;
+      this.state.processingStatus = "";
+      this.state.processingDetails = "";
+    }
+  }
+
+  private async cleanupScanListener() {
+    try {
+      if (this.scanListener) {
+        await this.scanListener.remove();
+        this.scanListener = null;
+      }
+    } catch (error) {
+      logger.error("Error removing scan listener:", error);
+    }
+  }
+
+  async stopScanning() {
+    try {
+      await this.cleanupScanListener();
+
+      if (!this.useQRReader) {
+        // Stop the native scanner
+        await BarcodeScanner.stopScan();
+      }
+    } catch (error) {
+      logger.error("Error stopping scanner:", error);
+      throw error;
+    }
+  }
+
+  // Web QR reader handlers
+  async onScanDetect(result: { rawValue: string }) {
+    await this.handleScanResult(result.rawValue);
+  }
+
+  onScanError(error: Error) {
+    logger.error("Scan error:", error);
+    this.showError("Failed to scan QR code");
+  }
+
+  private showError(message: string) {
+    this.state.error = message;
+    this.$notify(
+      {
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text: message,
+      },
+      5000,
+    );
+  }
+
+  get useQRReader(): boolean {
+    return __USE_QR_READER__;
+  }
+
+  get isMobile(): boolean {
+    return __IS_MOBILE__;
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  z-index: 60;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 700px;
+  position: relative;
+  z-index: 61;
+}
+
+/* Add styles for the camera preview */
+.qrcode-stream {
+  position: relative;
+  z-index: 62;
+}
+
+.qrcode-stream video {
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+  object-fit: contain;
+}
+
+/* Ensure mobile camera elements are also properly layered */
+.barcode-scanner-container {
+  position: relative;
+  z-index: 62;
+  width: 100%;
+  height: 100%;
+}
+</style>