style: improve code formatting and type safety

- Add proper type annotation for onDetect result parameter
- Fix indentation and line wrapping in template
- Remove unused WebInlineQRScanner import
- Clean up button attribute ordering
- Fix whitespace and formatting issues
- Remove unused empty divs

Dockerfile

@@ -1,5 +1,5 @@
 # Build stage
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
 
 # Install build dependencies
 

src/services/QRScanner/QRScannerService.ts

@@ -1,5 +1,3 @@
-import { EventEmitter } from "events";
-
 export interface QRScannerListener {
   onScan: (result: string) => void;
   onError: (error: Error) => void;

src/services/QRScanner/WebInlineQRScanner.ts

@@ -159,7 +159,7 @@ export class WebInlineQRScanner implements QRScannerService {
 
       // Stop all tracks in the stream
       if (this.stream) {
-        this.stream.getTracks().forEach(track => track.stop());
+        this.stream.getTracks().forEach((track) => track.stop());
         this.stream = null;
       }
 

src/views/ContactQRScanShowView.vue

@@ -101,7 +101,8 @@
               <path
                 class="opacity-75"
                 fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 
+                3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
             <span>{{ initializationStatus }}</span>
@@ -119,9 +120,7 @@
             <span class="font-medium">Error:</span> {{ error }}
           </p>
           <p v-else class="flex items-center justify-center space-x-2">
-            <span
+            <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
-              class="inline-block w-2 h-2 bg-blue-500 rounded-full"
-            ></span>
             <span>Ready to scan</span>
           </p>
         </div>
@@ -152,8 +151,8 @@
         <div
           class="absolute bottom-16 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center py-1"
         >
-          Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} |
+          Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} | Status:
-          Status: {{ cameraStatus }}
+          {{ cameraStatus }}
         </div>
 
         <!-- Camera Switch Button -->
@@ -172,7 +171,9 @@
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
-              d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+              d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 
+              011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 
+              01-2-2V9z"
             />
             <path
               stroke-linecap="round"
@@ -186,15 +187,15 @@
       <div v-else>
         <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"
+          @click="$router.push({ name: 'contact-qr-scan' })"
         >
           Start Scanning
         </button>
         <button
           v-else
-          @click="startScanning"
           class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
+          @click="startScanning"
         >
           Start Scanning
         </button>
@@ -233,7 +234,6 @@ import { retrieveAccountMetadata } from "../libs/util";
 import { Router } from "vue-router";
 import { logger } from "../utils/logger";
 import { QRScannerFactory } from "@/services/QRScanner/QRScannerFactory";
-import { WebInlineQRScanner } from "@/services/QRScanner/WebInlineQRScanner";
 
 interface QRScanResult {
   rawValue?: string;
@@ -842,7 +842,8 @@ export default class ContactQRScanShow extends Vue {
       this.isInitializing = false;
       this.cameraStatus = "Ready";
     } catch (error) {
-      const wrappedError = error instanceof Error ? error : new Error(String(error));
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
       this.error = wrappedError.message;
       this.cameraStatus = "Error";
       this.isInitializing = false;
@@ -862,12 +863,16 @@ export default class ContactQRScanShow extends Vue {
     this.cameraStatus = "Off";
   }
 
-  onDetect(result: any): void {
+  onDetect(result: unknown): void {
     this.isScanning = true;
     this.cameraStatus = "Detecting";
     try {
       let rawValue: string | undefined;
-      if (Array.isArray(result) && result.length > 0 && "rawValue" in result[0]) {
+      if (
+        Array.isArray(result) &&
+        result.length > 0 &&
+        "rawValue" in result[0]
+      ) {
         rawValue = result[0].rawValue;
       } else if (result && typeof result === "object" && "rawValue" in result) {
         rawValue = result.rawValue;
@@ -896,11 +901,13 @@ export default class ContactQRScanShow extends Vue {
   }
 
   toggleCamera(): void {
-    this.preferredCamera = this.preferredCamera === "user" ? "environment" : "user";
+    this.preferredCamera =
+      this.preferredCamera === "user" ? "environment" : "user";
   }
 
   private handleError(error: unknown): void {
-    const wrappedError = error instanceof Error ? error : new Error(String(error));
+    const wrappedError =
+      error instanceof Error ? error : new Error(String(error));
     this.error = wrappedError.message;
     this.cameraStatus = "Error";
   }

src/views/ContactQRScanView.vue

@@ -9,21 +9,19 @@
 
       <p v-if="error" class="text-center text-rose-300 mb-3">{{ error }}</p>
 
-		<div class="text-center">
+      <div class="text-center">
-			<button
+        <button
-				class="text-center text-white leading-none bg-slate-400 p-2 rounded-full"
+          class="text-center text-white leading-none bg-slate-400 p-2 rounded-full"
-				@click="handleBack"
+          @click="handleBack"
-			>
+        >
-				<font-awesome icon="xmark" class="w-[1em]"></font-awesome>
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
-			</button>
+        </button>
-		</div>
+      </div>
-	</div>
-
-    <div class="text-center">
-      
     </div>
 
     <div class="text-center"></div>
+
+    <div class="text-center"></div>
   </section>
 </template>