style: improve code formatting and readability

- Format Vue template attributes and event handlers for better readability
- Reorganize component props and event bindings
- Improve error handling and state management in QR scanner
- Add proper aria labels and accessibility attributes
- Refactor camera state handling in WebInlineQRScanner
- Clean up promise handling in WebPlatformService
- Standardize string quotes to double quotes
- Improve component structure and indentation

No functional changes, purely code style and maintainability improvements.

src/views/ContactQRScanShowView.vue

@@ -28,7 +28,7 @@
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 my-4"
     >
       <p class="mb-2">
-      <b>Note:</b> your identity currently does <b>not</b> include a name.
+        <b>Note:</b> your identity currently does <b>not</b> include a name.
       </p>
       <button
         class="inline-block text-md uppercase 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"
@@ -112,7 +112,7 @@
                 3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
-            <span>{{ cameraStateMessage || 'Initializing camera...' }}</span>
+            <span>{{ cameraStateMessage || "Initializing camera..." }}</span>
           </div>
           <p
             v-else-if="cameraState === 'active'"
@@ -125,14 +125,19 @@
           </p>
           <p v-else-if="error" class="text-red-400">Error: {{ error }}</p>
           <p v-else class="flex items-center justify-center space-x-2">
-            <span :class="{
-              'inline-block w-2 h-2 rounded-full': true,
-              'bg-green-500': cameraState === 'ready',
-              'bg-yellow-500': cameraState === 'in_use',
-              'bg-red-500': cameraState === 'error' || cameraState === 'permission_denied' || cameraState === 'not_found',
-              'bg-blue-500': cameraState === 'off'
-            }"></span>
-            <span>{{ cameraStateMessage || 'Ready to scan' }}</span>
+            <span
+              :class="{
+                'inline-block w-2 h-2 rounded-full': true,
+                'bg-green-500': cameraState === 'ready',
+                'bg-yellow-500': cameraState === 'in_use',
+                'bg-red-500':
+                  cameraState === 'error' ||
+                  cameraState === 'permission_denied' ||
+                  cameraState === 'not_found',
+                'bg-blue-500': cameraState === 'off',
+              }"
+            ></span>
+            <span>{{ cameraStateMessage || "Ready to scan" }}</span>
           </p>
         </div>
 
@@ -246,7 +251,7 @@ export default class ContactQRScanShow extends Vue {
   initializationStatus = "Initializing camera...";
   useQRReader = __USE_QR_READER__;
   preferredCamera: "user" | "environment" = "environment";
-  cameraState: CameraState = 'off';
+  cameraState: CameraState = "off";
   cameraStateMessage?: string;
 
   ETHR_DID_PREFIX = ETHR_DID_PREFIX;
@@ -321,36 +326,36 @@ export default class ContactQRScanShow extends Vue {
         onStateChange: (state, message) => {
           this.cameraState = state;
           this.cameraStateMessage = message;
-          
+
           // Update UI based on camera state
           switch (state) {
-            case 'in_use':
+            case "in_use":
               this.error = "Camera is in use by another application";
-        this.isScanning = false;
-        this.$notify(
-          {
-            group: "alert",
-            type: "warning",
+              this.isScanning = false;
+              this.$notify(
+                {
+                  group: "alert",
+                  type: "warning",
                   title: "Camera in Use",
                   text: "Please close other applications using the camera and try again",
-          },
-          5000,
-        );
+                },
+                5000,
+              );
               break;
-            case 'permission_denied':
-          this.error = "Camera permission denied";
-          this.isScanning = false;
-          this.$notify(
-            {
-              group: "alert",
-              type: "warning",
-              title: "Camera Access Required",
+            case "permission_denied":
+              this.error = "Camera permission denied";
+              this.isScanning = false;
+              this.$notify(
+                {
+                  group: "alert",
+                  type: "warning",
+                  title: "Camera Access Required",
                   text: "Please grant camera permission to scan QR codes",
-            },
-            5000,
-          );
+                },
+                5000,
+              );
               break;
-            case 'not_found':
+            case "not_found":
               this.error = "No camera found";
               this.isScanning = false;
               this.$notify(
@@ -363,7 +368,7 @@ export default class ContactQRScanShow extends Vue {
                 5000,
               );
               break;
-            case 'error':
+            case "error":
               this.error = this.cameraStateMessage || "Camera error";
               this.isScanning = false;
               break;
@@ -373,7 +378,8 @@ export default class ContactQRScanShow extends Vue {
 
       // Check if scanning is supported first
       if (!(await scanner.isSupported())) {
-        this.error = "Camera access requires HTTPS. Please use a secure connection.";
+        this.error =
+          "Camera access requires HTTPS. Please use a secure connection.";
         this.isScanning = false;
         this.$notify(
           {