Merge branch 'master' into nearby-filter

2025-08-18 07:52:54 -04:00
parent 68c0459533 f85c190557
commit cf44ec1a1d
73 changed files with 3367 additions and 1049 deletions
--- a/src/assets/icons.json
+++ b/src/assets/icons.json
@@ -1,75 +0,0 @@
-{
-  "warning": {
-    "fillRule": "evenodd",
-    "d": "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-    "clipRule": "evenodd"
-  },
-  "spinner": {
-    "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"
-  },
-  "chart": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-  },
-  "plus": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 4v16m8-8H4"
-  },
-  "settings": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-  },
-  "settingsDot": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-  },
-  "lock": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-  },
-  "download": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-  },
-  "check": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-  },
-  "edit": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-  },
-  "trash": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-  },
-  "plusCircle": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 6v6m0 0v6m0-6h6m-6 0H6"
-  },
-  "info": {
-    "fillRule": "evenodd",
-    "d": "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
-    "clipRule": "evenodd"
-  }
-} 
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -288,8 +288,7 @@ export default class ActivityListItem extends Vue {
  }

  get fetchAmount(): string {
-    const claim =
-      (this.record.fullClaim as any)?.claim || this.record.fullClaim;
+    const claim = this.record.fullClaim;

    const amount = claim.object?.amountOfThisGood
      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
@@ -299,8 +298,7 @@ export default class ActivityListItem extends Vue {
  }

  get description(): string {
-    const claim =
-      (this.record.fullClaim as any)?.claim || this.record.fullClaim;
+    const claim = this.record.fullClaim;

    return `${claim?.description || ""}`;
  }
--- a/src/components/DataExportSection.vue
+++ b/src/components/DataExportSection.vue
@@ -171,6 +171,8 @@ export default class DataExportSection extends Vue {
   * @throws {Error} If export fails
   */
  public async exportDatabase(): Promise<void> {
+    // Note that similar code is in ContactsView.vue exportContactData()
+
    if (this.isExporting) {
      return; // Prevent multiple simultaneous exports
    }
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -622,7 +622,10 @@ export default class GiftedDialog extends Vue {
   * Handle edit entity request from GiftDetailsStep
   * @param data - Object containing entityType and currentEntity
   */
-  handleEditEntity(data: { entityType: string; currentEntity: any }) {
+  handleEditEntity(data: {
+    entityType: string;
+    currentEntity: { did: string; name: string };
+  }) {
    this.goBackToStep1(data.entityType);
  }

--- a/src/components/IconRenderer.vue
+++ b/src/components/IconRenderer.vue
@@ -1,90 +0,0 @@
-<template>
-  <svg
-    v-if="iconData"
-    :class="svgClass"
-    :fill="fill"
-    :stroke="stroke"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path v-for="(path, index) in iconData.paths" :key="index" v-bind="path" />
-  </svg>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
-import icons from "../assets/icons.json";
-import { logger } from "../utils/logger";
-
-/**
- * Icon path interface
- */
-interface IconPath {
-  d: string;
-  fillRule?: string;
-  clipRule?: string;
-  strokeLinecap?: string;
-  strokeLinejoin?: string;
-  strokeWidth?: string | number;
-  fill?: string;
-  stroke?: string;
-}
-
-/**
- * Icon data interface
- */
-interface IconData {
-  paths: IconPath[];
-}
-
-/**
- * Icons JSON structure
- */
-interface IconsJson {
-  [key: string]: IconPath | IconData;
-}
-
-/**
- * Icon Renderer Component
- *
- * This component loads SVG icon definitions from a JSON file and renders them
- * as SVG elements. It provides a clean way to use icons without cluttering
- * templates with long SVG path definitions.
- *
- * @author Matthew Raymer
- * @version 1.0.0
- * @since 2024
- */
-@Component({
-  name: "IconRenderer",
-})
-export default class IconRenderer extends Vue {
-  @Prop({ required: true }) readonly iconName!: string;
-  @Prop({ default: "h-5 w-5" }) readonly svgClass!: string;
-  @Prop({ default: "none" }) readonly fill!: string;
-  @Prop({ default: "currentColor" }) readonly stroke!: string;
-  @Prop({ default: "0 0 24 24" }) readonly viewBox!: string;
-
-  /**
-   * Get the icon data for the specified icon name
-   *
-   * @returns {IconData | null} The icon data object or null if not found
-   */
-  get iconData(): IconData | null {
-    const icon = (icons as IconsJson)[this.iconName];
-    if (!icon) {
-      logger.warn(`Icon "${this.iconName}" not found in icons.json`);
-      return null;
-    }
-
-    // Convert single path to array format for consistency
-    if ("d" in icon) {
-      return {
-        paths: [icon as IconPath],
-      };
-    }
-
-    return icon as IconData;
-  }
-}
-</script>
--- a/src/components/UsageLimitsSection.vue
+++ b/src/components/UsageLimitsSection.vue
@@ -83,6 +83,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { EndorserRateLimits, ImageRateLimits } from "@/interfaces/limits";

@Component({
  name: "UsageLimitsSection",
@@ -94,8 +95,8 @@ export default class UsageLimitsSection extends Vue {
  @Prop({ required: true }) loadingLimits!: boolean;
  @Prop({ required: true }) limitsMessage!: string;
  @Prop({ required: false }) activeDid?: string;
-  @Prop({ required: false }) endorserLimits?: any;
-  @Prop({ required: false }) imageLimits?: any;
+  @Prop({ required: false }) endorserLimits?: EndorserRateLimits;
+  @Prop({ required: false }) imageLimits?: ImageRateLimits;
  @Prop({ required: true }) onRecheckLimits!: () => void;

  mounted() {
--- a/src/constants/notifications.ts
+++ b/src/constants/notifications.ts
@@ -846,6 +846,12 @@ export const NOTIFY_CONTACTS_ADDED = {
  message: "They were added.",
 };

+// Used in: ContactsView.vue (addContact method - export data prompt after contact addition)
+export const NOTIFY_EXPORT_DATA_PROMPT = {
+  title: "Export Your Data",
+  message: "Would you like to export your contact data as a backup?",
+};
+
 // Used in: ContactsView.vue (showCopySelectionsInfo method - info about copying contacts)
 export const NOTIFY_CONTACT_INFO_COPY = {
  title: "Info",
@@ -1588,7 +1594,7 @@ export function createImageDialogCameraErrorMessage(error: Error): string {

 // Helper function for dynamic upload error messages
 // Used in: ImageMethodDialog.vue (uploadImage method - dynamic upload error message)
-export function createImageDialogUploadErrorMessage(error: any): string {
+export function createImageDialogUploadErrorMessage(error: unknown): string {
  if (axios.isAxiosError(error)) {
    const status = error.response?.status;
    const data = error.response?.data;
--- a/src/interfaces/common.ts
+++ b/src/interfaces/common.ts
@@ -98,3 +98,81 @@ export interface VerifiableCredentialClaim {
  credentialSubject: ClaimObject;
  [key: string]: unknown;
 }
+
+/**
+ * Database constraint error types for consistent error handling
+ */
+export interface DatabaseConstraintError extends Error {
+  name: "ConstraintError";
+  message: string;
+  constraint?: string;
+}
+
+/**
+ * Database storage error types for IndexedDB/SQLite operations
+ */
+export interface DatabaseStorageError extends Error {
+  name: "StorageError";
+  message: string;
+  code?: string;
+  constraint?: string;
+}
+
+/**
+ * Legacy Dexie error types for migration compatibility
+ */
+export interface DexieError extends Error {
+  name: string;
+  message: string;
+  inner?: unknown;
+  stack?: string;
+}
+
+/**
+ * Type guard for database constraint errors
+ */
+export function isDatabaseConstraintError(
+  error: unknown,
+): error is DatabaseConstraintError {
+  return error instanceof Error && error.name === "ConstraintError";
+}
+
+/**
+ * Type guard for database storage errors
+ */
+export function isDatabaseStorageError(
+  error: unknown,
+): error is DatabaseStorageError {
+  return error instanceof Error && error.name === "StorageError";
+}
+
+/**
+ * Type guard for legacy Dexie errors
+ */
+export function isDexieError(error: unknown): error is DexieError {
+  return (
+    error instanceof Error &&
+    (error.name === "DexieError" ||
+      error.message.includes("Key already exists in the object store") ||
+      error.message.includes("ConstraintError"))
+  );
+}
+
+/**
+ * Unified error type for database operations
+ */
+export type DatabaseError =
+  | DatabaseConstraintError
+  | DatabaseStorageError
+  | DexieError;
+
+/**
+ * Type guard for any database error
+ */
+export function isDatabaseError(error: unknown): error is DatabaseError {
+  return (
+    isDatabaseConstraintError(error) ||
+    isDatabaseStorageError(error) ||
+    isDexieError(error)
+  );
+}
--- a/src/libs/fontawesome.ts
+++ b/src/libs/fontawesome.ts
@@ -20,6 +20,7 @@ import {
  faCameraRotate,
  faCaretDown,
  faChair,
+  faChartLine,
  faCheck,
  faChevronDown,
  faChevronLeft,
@@ -28,6 +29,7 @@ import {
  faCircle,
  faCircleCheck,
  faCircleInfo,
+  faCirclePlus,
  faCircleQuestion,
  faCircleRight,
  faCircleUser,
@@ -49,6 +51,7 @@ import {
  faFloppyDisk,
  faFolderOpen,
  faForward,
+  faGear,
  faGift,
  faGlobe,
  faHammer,
@@ -58,6 +61,7 @@ import {
  faHouseChimney,
  faImage,
  faImagePortrait,
+  faInfo,
  faLeftRight,
  faLightbulb,
  faLink,
@@ -72,8 +76,8 @@ import {
  faPersonCircleCheck,
  faPersonCircleQuestion,
  faPlus,
-  faQuestion,
  faQrcode,
+  faQuestion,
  faRightFromBracket,
  faRotate,
  faShareNodes,
@@ -106,6 +110,7 @@ library.add(
  faCameraRotate,
  faCaretDown,
  faChair,
+  faChartLine,
  faCheck,
  faChevronDown,
  faChevronLeft,
@@ -114,6 +119,7 @@ library.add(
  faCircle,
  faCircleCheck,
  faCircleInfo,
+  faCirclePlus,
  faCircleQuestion,
  faCircleRight,
  faCircleUser,
@@ -135,6 +141,7 @@ library.add(
  faFloppyDisk,
  faFolderOpen,
  faForward,
+  faGear,
  faGift,
  faGlobe,
  faHammer,
@@ -144,6 +151,7 @@ library.add(
  faHouseChimney,
  faImage,
  faImagePortrait,
+  faInfo,
  faLeftRight,
  faLightbulb,
  faLink,
--- a/src/services/ProfileService.ts
+++ b/src/services/ProfileService.ts
@@ -124,17 +124,55 @@ export class ProfileService {
  async deleteProfile(activeDid: string): Promise<boolean> {
    try {
      const headers = await getHeaders(activeDid);
-      const response = await this.axios.delete(
-        `${this.partnerApiServer}/api/partner/userProfile`,
-        { headers },
-      );
+      logger.debug("Attempting to delete profile for DID:", activeDid);
+      logger.debug("Using partner API server:", this.partnerApiServer);
+      logger.debug("Request headers:", headers);
+      
+      const url = `${this.partnerApiServer}/api/partner/userProfile`;
+      logger.debug("DELETE request URL:", url);
+      
+      const response = await this.axios.delete(url, { headers });

-      if (response.status === 200) {
+      if (response.status === 200 || response.status === 204) {
+        logger.debug("Profile deleted successfully");
        return true;
      } else {
-        throw new Error(ACCOUNT_VIEW_CONSTANTS.ERRORS.PROFILE_NOT_DELETED);
+        logger.error("Unexpected response status when deleting profile:", {
+          status: response.status,
+          statusText: response.statusText,
+          data: response.data
+        });
+        throw new Error(`Profile not deleted - HTTP ${response.status}: ${response.statusText}`);
      }
    } catch (error) {
+      if (this.isApiError(error) && error.response) {
+        const response = error.response as any; // Type assertion for error response
+        logger.error("API error deleting profile:", {
+          status: response.status,
+          statusText: response.statusText,
+          data: response.data,
+          url: (error as any).config?.url
+        });
+        
+        // Handle specific HTTP status codes
+        if (response.status === 204) {
+          logger.debug("Profile deleted successfully (204 No Content)");
+          return true; // 204 is success for DELETE operations
+        } else if (response.status === 404) {
+          logger.warn("Profile not found - may already be deleted");
+          return true; // Consider this a success if profile doesn't exist
+        } else if (response.status === 400) {
+          logger.error("Bad request when deleting profile:", response.data);
+          throw new Error(`Profile deletion failed: ${response.data?.message || 'Bad request'}`);
+        } else if (response.status === 401) {
+          logger.error("Unauthorized to delete profile");
+          throw new Error("You are not authorized to delete this profile");
+        } else if (response.status === 403) {
+          logger.error("Forbidden to delete profile");
+          throw new Error("You are not allowed to delete this profile");
+        }
+      }
+      
      logger.error("Error deleting profile:", errorStringForLog(error));
      handleApiError(error as AxiosError, "/api/partner/userProfile");
      return false;
--- a/src/services/QRNavigationService.ts
+++ b/src/services/QRNavigationService.ts
@@ -0,0 +1,99 @@
+import { PlatformServiceFactory } from "./PlatformServiceFactory";
+import { PlatformService } from "./PlatformService";
+import { logger } from "@/utils/logger";
+
+/**
+ * QR Navigation Service
+ *
+ * Handles platform-specific routing logic for QR scanning operations.
+ * Removes coupling between views and routing logic by centralizing
+ * navigation decisions based on platform capabilities.
+ *
+ * @author Matthew Raymer
+ */
+export class QRNavigationService {
+  private static instance: QRNavigationService | null = null;
+  private platformService: PlatformService;
+
+  private constructor() {
+    this.platformService = PlatformServiceFactory.getInstance();
+  }
+
+  /**
+   * Get singleton instance of QRNavigationService
+   */
+  public static getInstance(): QRNavigationService {
+    if (!QRNavigationService.instance) {
+      QRNavigationService.instance = new QRNavigationService();
+    }
+    return QRNavigationService.instance;
+  }
+
+  /**
+   * Get the appropriate QR scanner route based on platform
+   *
+   * @returns Object with route name and parameters for QR scanning
+   */
+  public getQRScannerRoute(): {
+    name: string;
+    params?: Record<string, string | number>;
+  } {
+    const isCapacitor = this.platformService.isCapacitor();
+
+    logger.debug("QR Navigation - Platform detection:", {
+      isCapacitor,
+      platform: this.platformService.getCapabilities(),
+    });
+
+    if (isCapacitor) {
+      // Use native scanner on mobile platforms
+      return { name: "contact-qr-scan-full" };
+    } else {
+      // Use web scanner on other platforms
+      return { name: "contact-qr" };
+    }
+  }
+
+  /**
+   * Get the appropriate QR display route based on platform
+   *
+   * @returns Object with route name and parameters for QR display
+   */
+  public getQRDisplayRoute(): {
+    name: string;
+    params?: Record<string, string | number>;
+  } {
+    const isCapacitor = this.platformService.isCapacitor();
+
+    logger.debug("QR Navigation - Display route detection:", {
+      isCapacitor,
+      platform: this.platformService.getCapabilities(),
+    });
+
+    if (isCapacitor) {
+      // Use dedicated display view on mobile
+      return { name: "contact-qr-scan-show" };
+    } else {
+      // Use combined view on web
+      return { name: "contact-qr" };
+    }
+  }
+
+  /**
+   * Check if native QR scanning is available on current platform
+   *
+   * @returns true if native scanning is available, false otherwise
+   */
+  public isNativeScanningAvailable(): boolean {
+    return this.platformService.isCapacitor();
+  }
+
+  /**
+   * Get platform capabilities for QR operations
+   *
+   * @returns Platform capabilities object
+   */
+  public getPlatformCapabilities() {
+    return this.platformService.getCapabilities();
+  }
+}
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -174,14 +174,16 @@
        :aria-busy="loadingProfile || savingProfile"
      ></textarea>

-      <div class="flex items-center mb-4" @click="toggleUserProfileLocation">
-        <input
-          v-model="includeUserProfileLocation"
-          type="checkbox"
-          class="mr-2"
-        />
-        <label for="includeUserProfileLocation">Include Location</label>
-      </div>
+        <div class="flex items-center mb-4">
+          <input
+            v-model="includeUserProfileLocation"
+            type="checkbox"
+            class="mr-2"
+            @change="onLocationCheckboxChange"
+          />
+          <label for="includeUserProfileLocation">Include Location</label>
+          <span class="text-xs text-slate-400 ml-2">(Debug: {{ isMapReady ? 'Map Ready' : 'Map Loading' }})</span>
+        </div>
      <div v-if="includeUserProfileLocation" class="mb-4 aspect-video">
        <p class="text-sm mb-2 text-slate-500">
          The location you choose will be shared with the world until you remove
@@ -194,6 +196,7 @@
          class="!z-40 rounded-md"
          @click="onProfileMapClick"
          @ready="onMapReady"
+          @mounted="onMapMounted"
        >
          <l-tile-layer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -751,6 +754,7 @@ import "dexie-export-import";
 // @ts-expect-error - they aren't exporting it but it's there
 import { ImportProgress } from "dexie-export-import";
 import { LeafletMouseEvent } from "leaflet";
+import * as L from "leaflet";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
 import { ref } from "vue";
@@ -902,6 +906,7 @@ export default class AccountViewView extends Vue {
  warnIfProdServer: boolean = false;
  warnIfTestServer: boolean = false;
  zoom: number = 2;
+  isMapReady: boolean = false;

  // Limits and validation properties
  endorserLimits: EndorserRateLimits | null = null;
@@ -913,6 +918,17 @@ export default class AccountViewView extends Vue {

  created() {
    this.notify = createNotifyHelpers(this.$notify);
+    
+    // Fix Leaflet icon issues in modern bundlers
+    // This prevents the "Cannot read properties of undefined (reading 'Default')" error
+    if (L.Icon.Default) {
+      delete (L.Icon.Default.prototype as any)._getIconUrl;
+      L.Icon.Default.mergeOptions({
+        iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',
+        iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
+        shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
+      });
+    }
  }

  /**
@@ -939,10 +955,16 @@ export default class AccountViewView extends Vue {
            this.userProfileLatitude = profile.latitude;
            this.userProfileLongitude = profile.longitude;
            this.includeUserProfileLocation = profile.includeLocation;
+            
+            // Initialize map ready state if location is included
+            if (profile.includeLocation) {
+              this.isMapReady = false; // Will be set to true when map is ready
+            }
          } else {
            // Profile not created yet; leave defaults
          }
        } catch (error) {
+          logger.error("Error loading profile:", error);
          this.notify.error(
            ACCOUNT_VIEW_CONSTANTS.ERRORS.PROFILE_NOT_AVAILABLE,
          );
@@ -1518,9 +1540,45 @@ export default class AccountViewView extends Vue {
  }

  onMapReady(map: L.Map): void {
-    // doing this here instead of on the l-map element avoids a recentering after a drag then zoom at startup
-    const zoom = this.userProfileLatitude && this.userProfileLongitude ? 12 : 2;
-    map.setView([this.userProfileLatitude, this.userProfileLongitude], zoom);
+    try {
+      logger.debug("Map ready event fired, map object:", map);
+      // doing this here instead of on the l-map element avoids a recentering after a drag then zoom at startup
+      const zoom = this.userProfileLatitude && this.userProfileLongitude ? 12 : 2;
+      const lat = this.userProfileLatitude || 0;
+      const lng = this.userProfileLongitude || 0;
+      map.setView([lat, lng], zoom);
+      this.isMapReady = true;
+      logger.debug("Map ready state set to true, coordinates:", [lat, lng], "zoom:", zoom);
+    } catch (error) {
+      logger.error("Error in onMapReady:", error);
+      this.isMapReady = true; // Set to true even on error to prevent infinite loading
+    }
+  }
+
+  onMapMounted(): void {
+    logger.debug("Map component mounted");
+    // Check if map ref is available
+    const mapRef = this.$refs.profileMap;
+    logger.debug("Map ref:", mapRef);
+    
+    // Try to set map ready after component is mounted
+    setTimeout(() => {
+      this.isMapReady = true;
+      logger.debug("Map ready set to true after mounted");
+    }, 500);
+  }
+
+  // Fallback method to handle map initialization failures
+  private handleMapInitFailure(): void {
+    logger.debug("Starting map initialization timeout (5 seconds)");
+    setTimeout(() => {
+      if (!this.isMapReady) {
+        logger.warn("Map failed to initialize, forcing ready state");
+        this.isMapReady = true;
+      } else {
+        logger.debug("Map initialized successfully, timeout not needed");
+      }
+    }, 5000); // 5 second timeout
  }

  showProfileInfo(): void {
@@ -1532,13 +1590,16 @@ export default class AccountViewView extends Vue {

  async saveProfile(): Promise<void> {
    this.savingProfile = true;
-    const profileData: ProfileData = {
-      description: this.userProfileDesc,
-      latitude: this.userProfileLatitude,
-      longitude: this.userProfileLongitude,
-      includeLocation: this.includeUserProfileLocation,
-    };
    try {
+      const profileData: ProfileData = {
+        description: this.userProfileDesc,
+        latitude: this.userProfileLatitude,
+        longitude: this.userProfileLongitude,
+        includeLocation: this.includeUserProfileLocation,
+      };
+      
+      logger.debug("Saving profile data:", profileData);
+      
      const success = await this.profileService.saveProfile(
        this.activeDid,
        profileData,
@@ -1549,6 +1610,7 @@ export default class AccountViewView extends Vue {
        this.notify.error(ACCOUNT_VIEW_CONSTANTS.ERRORS.PROFILE_SAVE_ERROR);
      }
    } catch (error) {
+      logger.error("Error saving profile:", error);
      this.notify.error(ACCOUNT_VIEW_CONSTANTS.ERRORS.PROFILE_SAVE_ERROR);
    } finally {
      this.savingProfile = false;
@@ -1556,15 +1618,25 @@ export default class AccountViewView extends Vue {
  }

  toggleUserProfileLocation(): void {
-    const updated = this.profileService.toggleProfileLocation({
-      description: this.userProfileDesc,
-      latitude: this.userProfileLatitude,
-      longitude: this.userProfileLongitude,
-      includeLocation: this.includeUserProfileLocation,
-    });
-    this.userProfileLatitude = updated.latitude;
-    this.userProfileLongitude = updated.longitude;
-    this.includeUserProfileLocation = updated.includeLocation;
+    try {
+      const updated = this.profileService.toggleProfileLocation({
+        description: this.userProfileDesc,
+        latitude: this.userProfileLatitude,
+        longitude: this.userProfileLongitude,
+        includeLocation: this.includeUserProfileLocation,
+      });
+      this.userProfileLatitude = updated.latitude;
+      this.userProfileLongitude = updated.longitude;
+      this.includeUserProfileLocation = updated.includeLocation;
+      
+      // Reset map ready state when toggling location
+      if (!updated.includeLocation) {
+        this.isMapReady = false;
+      }
+    } catch (error) {
+      logger.error("Error in toggleUserProfileLocation:", error);
+      this.notify.error("Failed to toggle location setting");
+    }
  }

  confirmEraseLatLong(): void {
@@ -1592,6 +1664,7 @@ export default class AccountViewView extends Vue {

  async deleteProfile(): Promise<void> {
    try {
+      logger.debug("Attempting to delete profile for DID:", this.activeDid);
      const success = await this.profileService.deleteProfile(this.activeDid);
      if (success) {
        this.notify.success(ACCOUNT_VIEW_CONSTANTS.SUCCESS.PROFILE_DELETED);
@@ -1599,11 +1672,20 @@ export default class AccountViewView extends Vue {
        this.userProfileLatitude = 0;
        this.userProfileLongitude = 0;
        this.includeUserProfileLocation = false;
+        this.isMapReady = false; // Reset map state
+        logger.debug("Profile deleted successfully, UI state reset");
      } else {
        this.notify.error(ACCOUNT_VIEW_CONSTANTS.ERRORS.PROFILE_DELETE_ERROR);
      }
    } catch (error) {
-      this.notify.error(ACCOUNT_VIEW_CONSTANTS.ERRORS.PROFILE_DELETE_ERROR);
+      logger.error("Error in deleteProfile component method:", error);
+      
+      // Show more specific error message if available
+      if (error instanceof Error) {
+        this.notify.error(error.message);
+      } else {
+        this.notify.error(ACCOUNT_VIEW_CONSTANTS.ERRORS.PROFILE_DELETE_ERROR);
+      }
    }
  }

@@ -1616,8 +1698,43 @@ export default class AccountViewView extends Vue {
  }

  onProfileMapClick(event: LeafletMouseEvent) {
-    this.userProfileLatitude = event.latlng.lat;
-    this.userProfileLongitude = event.latlng.lng;
+    try {
+      if (event && event.latlng) {
+        this.userProfileLatitude = event.latlng.lat;
+        this.userProfileLongitude = event.latlng.lng;
+      }
+    } catch (error) {
+      logger.error("Error in onProfileMapClick:", error);
+    }
+  }
+
+  onLocationCheckboxChange(): void {
+    try {
+      logger.debug("Location checkbox changed, new value:", this.includeUserProfileLocation);
+      if (!this.includeUserProfileLocation) {
+        // Location checkbox was unchecked, clean up map state
+        this.isMapReady = false;
+        this.userProfileLatitude = 0;
+        this.userProfileLongitude = 0;
+        logger.debug("Location unchecked, map state reset");
+      } else {
+        // Location checkbox was checked, start map initialization timeout
+        this.isMapReady = false;
+        logger.debug("Location checked, starting map initialization timeout");
+        
+        // Try to set map ready after a short delay to allow Vue to render
+        setTimeout(() => {
+          if (!this.isMapReady) {
+            logger.debug("Setting map ready after timeout");
+            this.isMapReady = true;
+          }
+        }, 1000); // 1 second delay
+        
+        this.handleMapInitFailure();
+      }
+    } catch (error) {
+      logger.error("Error in onLocationCheckboxChange:", error);
+    }
  }

  // IdentitySection event handlers
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -714,8 +714,16 @@ export default class ContactQRScanShow extends Vue {

      // Add new contact
      // @ts-expect-error because we're just using the value to store to the DB
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      contact.contactMethods = JSON.stringify(
-        (this as any)._parseJsonField(contact.contactMethods, []),
+        (
+          this as {
+            _parseJsonField: (
+              value: unknown,
+              defaultValue: unknown[],
+            ) => unknown[];
+          }
+        )._parseJsonField(contact.contactMethods, []),
      );
      await this.$insertContact(contact);

--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -131,7 +131,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";
+// Capacitor import removed - using PlatformService instead

 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
@@ -165,13 +165,18 @@ import { GiveSummaryRecord } from "@/interfaces/records";
 import { UserInfo } from "@/interfaces/common";
 import { VerifiableCredential } from "@/interfaces/claims-result";
 import * as libsUtil from "../libs/util";
-import { generateSaveAndActivateIdentity } from "../libs/util";
+import {
+  generateSaveAndActivateIdentity,
+  contactsToExportJson,
+} from "../libs/util";
 import { logger } from "../utils/logger";
 // No longer needed - using PlatformServiceMixin methods
 // import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { isDatabaseError } from "@/interfaces/common";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { APP_SERVER } from "@/constants/app";
+import { QRNavigationService } from "@/services/QRNavigationService";
 import {
  NOTIFY_CONTACT_NO_INFO,
  NOTIFY_CONTACTS_ADD_ERROR,
@@ -197,6 +202,7 @@ import {
  NOTIFY_REGISTRATION_ERROR_FALLBACK,
  NOTIFY_REGISTRATION_ERROR_GENERIC,
  NOTIFY_VISIBILITY_ERROR_FALLBACK,
+  NOTIFY_EXPORT_DATA_PROMPT,
  getRegisterPersonSuccessMessage,
  getVisibilitySuccessMessage,
  getGivesRetrievalErrorMessage,
@@ -376,7 +382,11 @@ export default class ContactsView extends Vue {
          "",
          async (name) => {
            await this.addContact({
-              did: (registration.vc.credentialSubject.agent as any).identifier,
+              did: (
+                registration.vc.credentialSubject.agent as {
+                  identifier: string;
+                }
+              ).identifier,
              name: name,
              registered: true,
            });
@@ -387,7 +397,11 @@ export default class ContactsView extends Vue {
          async () => {
            // on cancel, will still add the contact
            await this.addContact({
-              did: (registration.vc.credentialSubject.agent as any).identifier,
+              did: (
+                registration.vc.credentialSubject.agent as {
+                  identifier: string;
+                }
+              ).identifier,
              name: "(person who invited you)",
              registered: true,
            });
@@ -396,8 +410,7 @@ export default class ContactsView extends Vue {
            this.showOnboardingInfo();
          },
        );
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (error: any) {
+      } catch (error: unknown) {
        const fullError = "Error redeeming invite: " + errorStringForLog(error);
        this.$logAndConsole(fullError, true);
        let message = "Got an error sending the invite.";
@@ -784,6 +797,9 @@ export default class ContactsView extends Vue {

      // Show success notification
      this.notify.success(addedMessage);
+
+      // Show export data prompt after successful contact addition
+      await this.showExportDataPrompt();
    } catch (err) {
      this.handleContactAddError(err);
    }
@@ -881,20 +897,21 @@ export default class ContactsView extends Vue {
  /**
   * Handle errors during contact addition
   */
-  private handleContactAddError(err: any): void {
+  private handleContactAddError(err: unknown): void {
    const fullError =
      "Error when adding contact to storage: " + errorStringForLog(err);
    this.$logAndConsole(fullError, true);

    let message = NOTIFY_CONTACT_IMPORT_ERROR.message;
-    if (
-      (err as any).message?.indexOf("Key already exists in the object store.") >
-      -1
-    ) {
-      message = NOTIFY_CONTACT_IMPORT_CONFLICT.message;
-    }
-    if ((err as any).name === "ConstraintError") {
-      message += " " + NOTIFY_CONTACT_IMPORT_CONSTRAINT.message;
+
+    // Use type-safe error checking with our new type guards
+    if (isDatabaseError(err)) {
+      if (err.message.includes("Key already exists in the object store")) {
+        message = NOTIFY_CONTACT_IMPORT_CONFLICT.message;
+      }
+      if (err.name === "ConstraintError") {
+        message += " " + NOTIFY_CONTACT_IMPORT_CONSTRAINT.message;
+      }
    }

    this.notify.error(message, TIMEOUTS.LONG);
@@ -1246,19 +1263,76 @@ export default class ContactsView extends Vue {

  /**
   * Handle QR code button click - route to appropriate scanner
-   * Uses native scanner on mobile platforms, web scanner otherwise
+   * Uses QRNavigationService to determine scanner type and route
   */
-
  public handleQRCodeClick() {
    this.$logAndConsole(
      "[ContactsView] handleQRCodeClick method called",
      false,
    );

-    if (Capacitor.isNativePlatform()) {
-      this.$router.push({ name: "contact-qr-scan-full" });
-    } else {
-      this.$router.push({ name: "contact-qr" });
+    const qrNavigationService = QRNavigationService.getInstance();
+    const route = qrNavigationService.getQRScannerRoute();
+
+    this.$router.push(route);
+  }
+
+  /**
+   * Show export data prompt after adding a contact
+   * Prompts user to export their contact data as a backup
+   */
+  private async showExportDataPrompt(): Promise<void> {
+    setTimeout(() => {
+      this.$notify(
+        {
+          group: "modal",
+          type: "confirm",
+          title: NOTIFY_EXPORT_DATA_PROMPT.title,
+          text: NOTIFY_EXPORT_DATA_PROMPT.message,
+          onYes: async () => {
+            await this.exportContactData();
+          },
+          yesText: "Export Data",
+          onNo: async () => {
+            // User chose not to export - no action needed
+          },
+          noText: "Not Now",
+        },
+        -1,
+      );
+    }, 1000); // Small delay to ensure success notification is shown first
+  }
+
+  /**
+   * Export contact data to JSON file
+   * Uses platform service to handle platform-specific export logic
+   */
+  private async exportContactData(): Promise<void> {
+    // Note that similar code is in DataExportSection.vue exportDatabase()
+    try {
+      // Fetch all contacts from database
+      const allContacts = await this.$contacts();
+
+      // Convert contacts to export format
+      const exportData = contactsToExportJson(allContacts);
+      const jsonStr = JSON.stringify(exportData, null, 2);
+
+      // Generate filename with current date
+      const today = new Date();
+      const dateString = today.toISOString().split("T")[0]; // YYYY-MM-DD format
+      const fileName = `timesafari-backup-contacts-${dateString}.json`;
+
+      // Use platform service to handle export
+      await this.platformService.writeAndShareFile(fileName, jsonStr);
+
+      this.notify.success(
+        "Contact export completed successfully. Check your downloads or share dialog.",
+      );
+    } catch (error) {
+      logger.error("Export Error:", error);
+      this.notify.error(
+        `There was an error exporting the data: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
    }
  }
 }
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -490,6 +490,8 @@ export default class DIDView extends Vue {
      message +=
        " Note that they can see your activity, so if you want to hide your activity from them then you should do that first.";
    }
+    message +=
+      " Note that this will also remove anyone with the same DID underneath.";
    this.notify.confirm(message, async () => {
      await this.deleteContact(contact);
    });
--- a/src/views/DatabaseMigration.vue
+++ b/src/views/DatabaseMigration.vue
@@ -91,17 +91,12 @@
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="downloadAccount"
        >
-          <IconRenderer
+          <font-awesome
            v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
          />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
          Show Account Seed
        </button>

@@ -110,17 +105,12 @@
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="downloadSettingsContacts"
        >
-          <IconRenderer
+          <font-awesome
            v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
          />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
          Download Settings &amp; Contacts
        </button>

@@ -143,17 +133,12 @@
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="compareDatabases"
        >
-          <IconRenderer
+          <font-awesome
            v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
          />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
          Compare Databases
        </button>

@@ -162,17 +147,12 @@
          class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="migrateAll"
        >
-          <IconRenderer
+          <font-awesome
            v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="check"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
          />
+          <font-awesome v-else icon="check" class="-ml-1 mr-3 h-5 w-5" />
          Migrate All
        </button>

@@ -185,10 +165,9 @@
        >
          <div class="flex">
            <div class="flex-shrink-0">
-              <IconRenderer
-                icon-name="warning"
-                svg-class="h-5 w-5 text-red-400"
-                fill="currentColor"
+              <font-awesome
+                icon="triangle-exclamation"
+                class="h-5 w-5 text-red-400"
              />
            </div>
            <div class="ml-3">
@@ -207,10 +186,9 @@
        >
          <div class="flex">
            <div class="flex-shrink-0">
-              <IconRenderer
-                icon-name="warning"
-                svg-class="h-5 w-5 text-red-400"
-                fill="currentColor"
+              <font-awesome
+                icon="triangle-exclamation"
+                class="h-5 w-5 text-red-400"
              />
            </div>
            <div class="ml-3">
@@ -229,10 +207,7 @@
        >
          <div class="flex">
            <div class="flex-shrink-0">
-              <IconRenderer
-                icon-name="check"
-                svg-class="h-5 w-5 text-green-400"
-              />
+              <font-awesome icon="check" class="h-5 w-5 text-green-400" />
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-green-800">Success</h3>
@@ -249,7 +224,7 @@
          class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="exportComparison"
        >
-          <IconRenderer icon-name="download" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="download" class="-ml-1 mr-3 h-5 w-5" />
          Export Comparison
        </button>

@@ -258,17 +233,12 @@
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="displayDatabases"
        >
-          <IconRenderer
+          <font-awesome
            v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
          />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
          Show Previous Data
        </button>

@@ -277,7 +247,7 @@
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="migrateAccounts"
        >
-          <IconRenderer icon-name="lock" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="lock" class="-ml-1 mr-3 h-5 w-5" />
          Migrate Accounts
        </button>

@@ -286,7 +256,7 @@
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="migrateSettings"
        >
-          <IconRenderer icon-name="settings" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="gear" class="-ml-1 mr-3 h-5 w-5" />
          Migrate Settings
        </button>

@@ -295,7 +265,7 @@
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
          @click="migrateContacts"
        >
-          <IconRenderer icon-name="plus" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="plus" class="-ml-1 mr-3 h-5 w-5" />
          Migrate Contacts
        </button>
      </div>
@@ -316,11 +286,7 @@
      >
        <div class="flex">
          <div class="flex-shrink-0">
-            <IconRenderer
-              icon-name="info"
-              svg-class="h-5 w-5 text-blue-400"
-              fill="currentColor"
-            />
+            <font-awesome icon="info" class="h-5 w-5 text-blue-400" />
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-blue-800">
@@ -357,10 +323,9 @@
        <div
          class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-blue-500 hover:bg-blue-400 transition ease-in-out duration-150 cursor-not-allowed"
        >
-          <IconRenderer
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
+          <font-awesome
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
          />
          {{ loadingMessage }}
        </div>
@@ -375,10 +340,7 @@
            <div class="p-5">
              <div class="flex items-center">
                <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="lock"
-                    svg-class="h-6 w-6 text-orange-600"
-                  />
+                  <font-awesome icon="lock" class="h-6 w-6 text-orange-600" />
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
@@ -398,10 +360,7 @@
            <div class="p-5">
              <div class="flex items-center">
                <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="check"
-                    svg-class="h-6 w-6 text-teal-600"
-                  />
+                  <font-awesome icon="check" class="h-6 w-6 text-teal-600" />
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
@@ -422,10 +381,7 @@
            <div class="p-5">
              <div class="flex items-center">
                <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="settings"
-                    svg-class="h-6 w-6 text-purple-600"
-                  />
+                  <font-awesome icon="gear" class="h-6 w-6 text-purple-600" />
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
@@ -445,10 +401,7 @@
            <div class="p-5">
              <div class="flex items-center">
                <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="check"
-                    svg-class="h-6 w-6 text-indigo-600"
-                  />
+                  <font-awesome icon="check" class="h-6 w-6 text-indigo-600" />
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
@@ -469,9 +422,9 @@
            <div class="p-5">
              <div class="flex items-center">
                <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="chart"
-                    svg-class="h-6 w-6 text-blue-600"
+                  <font-awesome
+                    icon="chart-line"
+                    class="h-6 w-6 text-blue-600"
                  />
                </div>
                <div class="ml-5 w-0 flex-1">
@@ -492,10 +445,7 @@
            <div class="p-5">
              <div class="flex items-center">
                <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="check"
-                    svg-class="h-6 w-6 text-green-600"
-                  />
+                  <font-awesome icon="check" class="h-6 w-6 text-green-600" />
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
@@ -526,9 +476,9 @@
                  class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="plusCircle"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                    <font-awesome
+                      icon="circle-plus"
+                      class="h-5 w-5 text-blue-600 mr-2"
                    />
                    <span class="text-sm font-medium text-blue-900">Add</span>
                  </div>
@@ -541,9 +491,9 @@
                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="check"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                    />
                    <span class="text-sm font-medium text-yellow-900"
                      >Unmodified</span
@@ -558,9 +508,9 @@
                  class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    <font-awesome
+                      icon="trash-can"
+                      class="h-5 w-5 text-red-600 mr-2"
                    />
                    <span class="text-sm font-medium text-red-900">Keep</span>
                  </div>
@@ -677,9 +627,9 @@
                  class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="plusCircle"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                    <font-awesome
+                      icon="circle-plus"
+                      class="h-5 w-5 text-blue-600 mr-2"
                    />
                    <span class="text-sm font-medium text-blue-900">Add</span>
                  </div>
@@ -692,9 +642,9 @@
                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="edit"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="pen"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                    />
                    <span class="text-sm font-medium text-yellow-900"
                      >Modify</span
@@ -709,9 +659,9 @@
                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="check"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                    />
                    <span class="text-sm font-medium text-yellow-900"
                      >Unmodified</span
@@ -726,9 +676,9 @@
                  class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    <font-awesome
+                      icon="trash-can"
+                      class="h-5 w-5 text-red-600 mr-2"
                    />
                    <span class="text-sm font-medium text-red-900">Keep</span>
                  </div>
@@ -868,9 +818,9 @@
                  class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="plusCircle"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                    <font-awesome
+                      icon="circle-plus"
+                      class="h-5 w-5 text-blue-600 mr-2"
                    />
                    <span class="text-sm font-medium text-blue-900">Add</span>
                  </div>
@@ -883,9 +833,9 @@
                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="edit"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="pen"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                    />
                    <span class="text-sm font-medium text-yellow-900"
                      >Modify</span
@@ -900,9 +850,9 @@
                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="check"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                    />
                    <span class="text-sm font-medium text-yellow-900"
                      >Unmodified</span
@@ -917,9 +867,9 @@
                  class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
                >
                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    <font-awesome
+                      icon="trash-can"
+                      class="h-5 w-5 text-red-600 mr-2"
                    />
                    <span class="text-sm font-medium text-red-900">Keep</span>
                  </div>
@@ -1067,7 +1017,6 @@ import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 import { Router } from "vue-router";

-import IconRenderer from "../components/IconRenderer.vue";
 import {
  compareDatabases,
  migrateSettings,
@@ -1104,9 +1053,6 @@ import { logger } from "../utils/logger";
 */
@Component({
  name: "DatabaseMigration",
-  components: {
-    IconRenderer,
-  },
 })
 export default class DatabaseMigration extends Vue {
  $router!: Router;
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -458,7 +458,9 @@ export default class DiscoverView extends Vue {
    if (this.isLocalActive) {
      await this.searchLocal();
    } else if (this.isMappedActive) {
-      const mapRef = this.$refs.projectMap as any;
+      const mapRef = this.$refs.projectMap as {
+        leafletObject: L.Map;
+      };
      this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation
    } else {
      await this.searchAll();
@@ -518,11 +520,11 @@ export default class DiscoverView extends Vue {
          throw JSON.stringify(results);
        }
      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
+    } catch (e: unknown) {
      logger.error("Error with search all: " + errorStringForLog(e));
      this.notify.error(
-        e.userMessage || NOTIFY_DISCOVER_SEARCH_ERROR.message,
+        (e as { userMessage?: string })?.userMessage ||
+          NOTIFY_DISCOVER_SEARCH_ERROR.message,
        TIMEOUTS.LONG,
      );
    } finally {
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -565,22 +565,22 @@
      <h2 class="text-xl font-semibold">What app version is this?</h2>
      <p>{{ package.version }} ({{ commitHash }})</p>

-      <div v-if="Capacitor.isNativePlatform()">
+      <div v-if="isCapacitor">
        <h2 class="text-xl font-semibold">
          Do I have the latest version?
        </h2>
-        <p v-if="Capacitor.getPlatform() === 'ios'">
+        <p v-if="capabilities.isIOS">
          <a href="https://apps.apple.com/us/app/time-safari/id6742664907" target="_blank" class="text-blue-500">
            Check the App Store.
          </a>
        </p>
-        <p v-else-if="Capacitor.getPlatform() === 'android'">
+        <p v-else-if="!capabilities.isIOS && capabilities.isMobile">
          <a href="https://play.google.com/store/apps/details?id=app.timesafari.app" target="_blank" class="text-blue-500">
            Check the Play Store.
          </a>
        </p>
        <p v-else>
-          Sorry, your platform of '{{ Capacitor.getPlatform() }}' is not recognized.
+          Sorry, your platform is not recognized.
        </p>
      </div>
    </div>
@@ -592,12 +592,13 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
-import { Capacitor } from "@capacitor/core";
+// Capacitor import removed - using QRNavigationService instead

 import * as Package from "../../package.json";
 import QuickNav from "../components/QuickNav.vue";
 import { APP_SERVER } from "../constants/app";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { QRNavigationService } from "@/services/QRNavigationService";

 /**
 * HelpView.vue - Comprehensive Help System Component
@@ -643,7 +644,7 @@ export default class HelpView extends Vue {
  showVerifiable = false;

  APP_SERVER = APP_SERVER;
-  Capacitor = Capacitor;
+  // Capacitor reference removed - using QRNavigationService instead

  // Ideally, we put no functionality in here, especially in the setup,
  // because we never want this page to have a chance of throwing an error.
@@ -711,11 +712,10 @@ export default class HelpView extends Vue {
   * @private
   */
  private handleQRCodeClick(): void {
-    if (Capacitor.isNativePlatform()) {
-      this.$router.push({ name: "contact-qr-scan-full" });
-    } else {
-      this.$router.push({ name: "contact-qr" });
-    }
+    const qrNavigationService = QRNavigationService.getInstance();
+    const route = qrNavigationService.getQRScannerRoute();
+
+    this.$router.push(route);
  }

  /**
--- a/src/views/IdentitySwitcherView.vue
+++ b/src/views/IdentitySwitcherView.vue
@@ -234,7 +234,9 @@ export default class IdentitySwitcherView extends Vue {
          {
            did,
            settingsKeys: Object.keys(newSettings).filter(
-              (k) => (newSettings as any)[k] !== undefined,
+              (k) =>
+                k in newSettings &&
+                newSettings[k as keyof typeof newSettings] !== undefined,
            ),
          },
        );
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -221,10 +221,11 @@ export default class ImportAccountView extends Vue {

      this.notify.success("Account imported successfully!", TIMEOUTS.STANDARD);
      this.$router.push({ name: "account" });
-    } catch (error: any) {
+    } catch (error: unknown) {
      this.$logError("Import failed: " + error);
      this.notify.error(
-        error.message || "Failed to import account.",
+        (error instanceof Error ? error.message : String(error)) ||
+          "Failed to import account.",
        TIMEOUTS.LONG,
      );
    }
--- a/src/views/OnboardMeetingListView.vue
+++ b/src/views/OnboardMeetingListView.vue
@@ -251,7 +251,7 @@ export default class OnboardMeetingListView extends Vue {
      if (response2.data?.data) {
        this.meetings = response2.data.data;
      }
-    } catch (error: any) {
+    } catch (error: unknown) {
      this.$logAndConsole(
        "Error fetching meetings: " + errorStringForLog(error),
        true,
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -345,7 +345,9 @@ export default class OnboardMeetingView extends Vue {
  }

  async created() {
-    this.notify = createNotifyHelpers(this.$notify as any);
+    this.notify = createNotifyHelpers(
+      this.$notify as Parameters<typeof createNotifyHelpers>[0],
+    );
    const settings = await this.$accountSettings();
    this.activeDid = settings?.activeDid || "";
    this.apiServer = settings?.apiServer || "";
@@ -419,7 +421,7 @@ export default class OnboardMeetingView extends Vue {
      } else {
        this.newOrUpdatedMeetingInputs = this.blankMeeting();
      }
-    } catch (error: any) {
+    } catch (error: unknown) {
      this.newOrUpdatedMeetingInputs = this.blankMeeting();
    }
  }
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -264,7 +264,7 @@
 import { AxiosRequestConfig } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
-import { Capacitor } from "@capacitor/core";
+// Capacitor import removed - using QRNavigationService instead

 import { NotificationIface } from "../constants/app";
 import EntityIcon from "../components/EntityIcon.vue";
@@ -281,6 +281,7 @@ import { OnboardPage, iconForUnitCode } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import { QRNavigationService } from "@/services/QRNavigationService";
 import {
  NOTIFY_NO_ACCOUNT_ERROR,
  NOTIFY_PROJECT_LOAD_ERROR,
@@ -464,8 +465,10 @@ export default class ProjectsView extends Vue {
        );
        this.notify.error(NOTIFY_PROJECT_LOAD_ERROR.message, TIMEOUTS.LONG);
      }
-    } catch (error: any) {
-      logger.error("Got error loading plans:", error.message || error);
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      logger.error("Got error loading plans:", errorMessage);
      this.notify.error(NOTIFY_PROJECT_LOAD_ERROR.message, TIMEOUTS.LONG);
    } finally {
      this.isLoading = false;
@@ -578,8 +581,10 @@ export default class ProjectsView extends Vue {
        );
        this.notify.error(NOTIFY_OFFERS_LOAD_ERROR.message, TIMEOUTS.LONG);
      }
-    } catch (error: any) {
-      logger.error("Got error loading offers:", error.message || error);
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      logger.error("Got error loading offers:", errorMessage);
      this.notify.error(NOTIFY_OFFERS_FETCH_ERROR.message, TIMEOUTS.LONG);
    } finally {
      this.isLoading = false;
@@ -757,11 +762,10 @@ export default class ProjectsView extends Vue {
   * - Web-based QR interface for browser environments
   */
  private handleQRCodeClick() {
-    if (Capacitor.isNativePlatform()) {
-      this.$router.push({ name: "contact-qr-scan-full" });
-    } else {
-      this.$router.push({ name: "contact-qr" });
-    }
+    const qrNavigationService = QRNavigationService.getInstance();
+    const route = qrNavigationService.getQRScannerRoute();
+
+    this.$router.push(route);
  }

  /**