Merge branch 'master' into contact-gifting-current-user

2025-08-26 16:51:09 +08:00
parent cc50c38d13 3969167d92
commit ec326495b2
241 changed files with 20051 additions and 3992 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
  <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
  <NotificationGroup group="alert">
    <div
-      class="fixed z-[90] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
+      class="fixed z-[120] top-[max(1rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
    >
      <Notification
        v-slot="{ notifications, close }"
@@ -175,7 +175,9 @@
      "-permission", "-mute", "-off"
  -->
  <NotificationGroup group="modal">
-    <div class="fixed z-[100] top-[env(safe-area-inset-top)] inset-x-0 w-full">
+    <div
+      class="fixed z-[100] top-[max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))] inset-x-0 w-full"
+    >
      <Notification
        v-slot="{ notifications, close }"
        enter="transform ease-out duration-300 transition"
@@ -506,13 +508,32 @@ export default class App extends Vue {

 <style>
 #Content {
-  padding-left: max(1.5rem, env(safe-area-inset-left));
-  padding-right: max(1.5rem, env(safe-area-inset-right));
-  padding-top: max(1.5rem, env(safe-area-inset-top));
-  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
+  padding-left: max(
+    1.5rem,
+    env(safe-area-inset-left),
+    var(--safe-area-inset-left, 0px)
+  );
+  padding-right: max(
+    1.5rem,
+    env(safe-area-inset-right),
+    var(--safe-area-inset-right, 0px)
+  );
+  padding-top: max(
+    1.5rem,
+    env(safe-area-inset-top),
+    var(--safe-area-inset-top, 0px)
+  );
+  padding-bottom: max(
+    1.5rem,
+    env(safe-area-inset-bottom),
+    var(--safe-area-inset-bottom, 0px)
+  );
 }

 #QuickNav ~ #Content {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 6.333rem);
+  padding-bottom: calc(
+    max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px)) +
+      6.333rem
+  );
 }
 </style>
--- 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/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -14,4 +14,12 @@
 		transform: translateX(100%);
 		background-color: #FFF !important;
 	}
+
+	.dialog-overlay {
+		@apply z-[100] fixed inset-0 bg-black/50 flex justify-center items-center p-6;
+	}
+
+	.dialog {
+		@apply bg-white p-4 rounded-lg w-full max-w-lg;
+	}
 }
--- 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/ContactNameDialog.vue
+++ b/src/components/ContactNameDialog.vue
@@ -1,7 +1,7 @@
 <!-- similar to UserNameDialog -->
 <template>
-  <div v-if="visible" :class="overlayClasses">
-    <div :class="dialogClasses">
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
      <h1 :class="titleClasses">{{ title }}</h1>
      {{ message }}
      Note that their name is only stored on this device.
@@ -61,20 +61,6 @@ export default class ContactNameDialog extends Vue {
  title = "Contact Name";
  visible = false;

-  /**
-   * CSS classes for the modal overlay backdrop
-   */
-  get overlayClasses(): string {
-    return "z-index-50 fixed top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center p-6";
-  }
-
-  /**
-   * CSS classes for the modal dialog container
-   */
-  get dialogClasses(): string {
-    return "bg-white p-4 rounded-lg w-full max-w-[500px]";
-  }
-
  /**
   * CSS classes for the dialog title
   */
--- 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/FeedFilters.vue
+++ b/src/components/FeedFilters.vue
@@ -101,6 +101,7 @@ import {
 import { Router } from "vue-router";

 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { logger } from "@/utils/logger";

@Component({
  components: {
@@ -119,11 +120,13 @@ export default class FeedFilters extends Vue {
  isNearby = false;
  settingChanged = false;
  visible = false;
+  activeDid = "";

-  async open(onCloseIfChanged: () => void) {
+  async open(onCloseIfChanged: () => void, activeDid: string) {
    this.onCloseIfChanged = onCloseIfChanged;
+    this.activeDid = activeDid;

-    const settings = await this.$settings();
+    const settings = await this.$accountSettings(activeDid);
    this.hasVisibleDid = !!settings.filterFeedByVisible;
    this.isNearby = !!settings.filterFeedByNearby;
    if (settings.searchBoxes && settings.searchBoxes.length > 0) {
@@ -137,6 +140,7 @@ export default class FeedFilters extends Vue {
  async toggleHasVisibleDid() {
    this.settingChanged = true;
    this.hasVisibleDid = !this.hasVisibleDid;
+
    await this.$updateSettings({
      filterFeedByVisible: this.hasVisibleDid,
    });
@@ -145,9 +149,18 @@ export default class FeedFilters extends Vue {
  async toggleNearby() {
    this.settingChanged = true;
    this.isNearby = !this.isNearby;
+
+    logger.debug("[FeedFilters] 🔄 Toggling nearby filter:", {
+      newValue: this.isNearby,
+      settingChanged: this.settingChanged,
+      activeDid: this.activeDid,
+    });
+
    await this.$updateSettings({
      filterFeedByNearby: this.isNearby,
    });
+
+    logger.debug("[FeedFilters] ✅ Nearby filter updated in settings");
  }

  async clearAll() {
@@ -179,43 +192,27 @@ export default class FeedFilters extends Vue {
  }

  close() {
+    logger.debug("[FeedFilters] 🚪 Closing dialog:", {
+      settingChanged: this.settingChanged,
+      hasCallback: !!this.onCloseIfChanged,
+    });
+
    if (this.settingChanged) {
+      logger.debug("[FeedFilters] 🔄 Settings changed, calling callback");
      this.onCloseIfChanged();
    }
    this.visible = false;
  }

  done() {
+    logger.debug("[FeedFilters] ✅ Done button clicked");
    this.close();
  }
 }
 </script>

 <style>
-.dialog-overlay {
-  z-index: 50;
-  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;
-}
-
 #dialogFeedFilters.dialog-overlay {
-  z-index: 100;
  overflow: scroll;
 }
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
 </style>
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -608,7 +608,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);
  }

@@ -648,27 +651,3 @@ export default class GiftedDialog extends Vue {
  }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  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: 500px;
-}
-</style>
--- a/src/components/GiftedPrompts.vue
+++ b/src/components/GiftedPrompts.vue
@@ -291,27 +291,3 @@ export default class GivenPrompts extends Vue {
  }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  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: 500px;
-}
-</style>
--- a/src/components/HiddenDidDialog.vue
+++ b/src/components/HiddenDidDialog.vue
@@ -1,9 +1,6 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-  >
-    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+  <div v-if="isOpen" class="dialog-overlay">
+    <div class="dialog">
      <!-- Header -->
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
--- 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/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" class="dialog-overlay z-[60]">
+  <div v-if="visible" class="dialog-overlay">
    <div class="dialog relative">
      <div class="text-lg text-center font-bold relative">
        <h1 id="ViewHeading" class="text-center font-bold">
@@ -931,32 +931,6 @@ export default class ImageMethodDialog extends Vue {
 </script>

 <style>
-.dialog-overlay {
-  z-index: 50;
-  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;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 /* Add styles for diagnostic panel */
 .diagnostic-panel {
  font-family: monospace;
--- a/src/components/InviteDialog.vue
+++ b/src/components/InviteDialog.vue
@@ -93,27 +93,3 @@ export default class InviteDialog extends Vue {
  }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  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: 500px;
-}
-</style>
--- a/src/components/OfferDialog.vue
+++ b/src/components/OfferDialog.vue
@@ -312,28 +312,3 @@ export default class OfferDialog extends Vue {
  }
 }
 </script>
-
-<style scoped>
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 50;
-}
-
-.dialog {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-</style>
--- a/src/components/OnboardingDialog.vue
+++ b/src/components/OnboardingDialog.vue
@@ -307,27 +307,3 @@ export default class OnboardingDialog extends Vue {
  }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 40;
-  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: 500px;
-}
-</style>
--- a/src/components/PhotoDialog.vue
+++ b/src/components/PhotoDialog.vue
@@ -10,7 +10,7 @@ Comprehensive error handling * * @author Matthew Raymer * @version 1.0.0 * @file
 PhotoDialog.vue */

 <template>
-  <div v-if="visible" class="dialog-overlay z-[60]">
+  <div v-if="visible" class="dialog-overlay">
    <div class="dialog relative">
      <div class="text-lg text-center font-light relative z-50">
        <div id="ViewHeading" :class="headingClasses">
@@ -628,34 +628,6 @@ export default class PhotoDialog extends Vue {
 </script>

 <style>
-/* Dialog overlay styling */
-.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 container styling */
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 /* Camera preview styling */
 .camera-preview {
  flex: 1;
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -2,7 +2,7 @@
  <!-- QUICK NAV -->
  <nav
    id="QuickNav"
-    class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]"
+    class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px))]"
  >
    <ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
      <!-- Home Feed -->
--- a/src/components/RegistrationNotice.vue
+++ b/src/components/RegistrationNotice.vue
@@ -1,33 +1,154 @@
+/** * @file RegistrationNotice.vue * @description Reusable component for
+displaying user registration status and related actions. * Shows registration
+notice when user is not registered, with options to show identifier info * or
+access advanced options. * * @author Jose Olarte III * @version 1.0.0 * @created
+2025-08-21T17:25:28-08:00 */
+
 <template>
  <div
-    v-if="!isRegistered && show"
-    id="noticeBeforeAnnounce"
-    class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mt-4"
-    role="alert"
-    aria-live="polite"
+    id="noticeSomeoneMustRegisterYou"
+    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-4">
-      Before you can publicly announce a new project or time commitment, a
-      friend needs to register you.
-    </p>
-    <button
-      class="inline-block text-md 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="shareInfo"
-    >
-      Share Your Info
-    </button>
+    <p class="mb-4">{{ message }}</p>
+    <div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center">
+      <button
+        class="inline-block text-md font-bold 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="showNameThenIdDialog"
+      >
+        Show them {{ passkeysEnabled ? "default" : "your" }} identifier info
+      </button>
+      <button
+        class="inline-block text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+        @click="openAdvancedOptions"
+      >
+        See advanced options
+      </button>
+    </div>
  </div>
+  <UserNameDialog ref="userNameDialog" />
+  <ChoiceButtonDialog ref="choiceButtonDialog" />
 </template>

 <script lang="ts">
-import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
+import { Component, Vue, Prop } from "vue-facing-decorator";
+import { Router } from "vue-router";
+import { Capacitor } from "@capacitor/core";
+import UserNameDialog from "./UserNameDialog.vue";
+import ChoiceButtonDialog from "./ChoiceButtonDialog.vue";

-@Component({ name: "RegistrationNotice" })
+/**
+ * RegistrationNotice Component
+ *
+ * Displays registration status notice and provides actions for unregistered users.
+ * Handles all registration-related flows internally without requiring parent component intervention.
+ *
+ * Template Usage:
+ * ```vue
+ * <RegistrationNotice
+ *   v-if="!isUserRegistered"
+ *   :passkeys-enabled="PASSKEYS_ENABLED"
+ *   :given-name="givenName"
+ *   message="Custom registration message here"
+ * />
+ * ```
+ *
+ * Component Dependencies:
+ * - UserNameDialog: Dialog for entering user name
+ * - ChoiceButtonDialog: Dialog for sharing method selection
+ */
+@Component({
+  name: "RegistrationNotice",
+  components: {
+    UserNameDialog,
+    ChoiceButtonDialog,
+  },
+})
 export default class RegistrationNotice extends Vue {
-  @Prop({ required: true }) isRegistered!: boolean;
-  @Prop({ required: true }) show!: boolean;
+  $router!: Router;

-  @Emit("share-info")
-  shareInfo() {}
+  /**
+   * Whether passkeys are enabled in the application
+   */
+  @Prop({ required: true })
+  passkeysEnabled!: boolean;
+
+  /**
+   * User's given name for dialog pre-population
+   */
+  @Prop({ required: true })
+  givenName!: string;
+
+  /**
+   * Custom message to display in the registration notice
+   * Defaults to "To share, someone must register you."
+   */
+  @Prop({ default: "To share, someone must register you." })
+  message!: string;
+
+  /**
+   * Shows name input dialog if needed
+   * Handles the full flow internally without requiring parent component intervention
+   */
+  showNameThenIdDialog() {
+    this.openUserNameDialog(() => {
+      this.promptForShareMethod();
+    });
+  }
+
+  /**
+   * Opens advanced options page
+   * Navigates directly to the start page
+   */
+  openAdvancedOptions() {
+    this.$router.push({ name: "start" });
+  }
+
+  /**
+   * Shows dialog for sharing method selection
+   * Provides options for different sharing scenarios
+   */
+  promptForShareMethod() {
+    (this.$refs.choiceButtonDialog as ChoiceButtonDialog).open({
+      title: "How can you share your info?",
+      text: "",
+      option1Text: "We are nearby with cameras",
+      option2Text: "Someone created a meeting room",
+      option3Text: "We will share some other way",
+      onOption1: () => {
+        this.handleQRCodeClick();
+      },
+      onOption2: () => {
+        this.$router.push({ name: "onboard-meeting-list" });
+      },
+      onOption3: () => {
+        this.$router.push({ name: "share-my-contact-info" });
+      },
+    });
+  }
+
+  /**
+   * Handles QR code sharing based on platform
+   * Navigates to appropriate QR code page
+   */
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
+
+  /**
+   * Opens the user name dialog if needed
+   *
+   * @param callback Function to call after name is entered
+   */
+  openUserNameDialog(callback: () => void) {
+    if (!this.givenName) {
+      (this.$refs.userNameDialog as UserNameDialog).open(callback);
+    } else {
+      callback();
+    }
+  }
 }
 </script>
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top))]">
+  <div
+    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
+  >
    <span class="align-center text-red-500 mr-2">{{ message }}</span>
    <span class="ml-2">
      <router-link
--- 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/components/UserNameDialog.vue
+++ b/src/components/UserNameDialog.vue
@@ -134,27 +134,3 @@ export default class UserNameDialog extends Vue {
  }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  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: 500px;
-}
-</style>
--- a/src/constants/notifications.ts
+++ b/src/constants/notifications.ts
@@ -847,6 +847,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",
@@ -1589,7 +1595,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
@@ -60,9 +60,13 @@ export interface AxiosErrorResponse {
      [key: string]: unknown;
    };
    status?: number;
+    statusText?: string;
    config?: unknown;
  };
-  config?: unknown;
+  config?: {
+    url?: string;
+    [key: string]: unknown;
+  };
  [key: string]: unknown;
 }

@@ -98,3 +102,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/interfaces/deepLinks.ts
+++ b/src/interfaces/deepLinks.ts
@@ -28,7 +28,7 @@
 import { z } from "zod";

 // Parameter validation schemas for each route type
-export const deepLinkSchemas = {
+export const deepLinkPathSchemas = {
  claim: z.object({
    id: z.string(),
  }),
@@ -60,7 +60,7 @@ export const deepLinkSchemas = {
    jwt: z.string().optional(),
  }),
  "onboard-meeting-members": z.object({
-    id: z.string(),
+    groupId: z.string(),
  }),
  project: z.object({
    id: z.string(),
@@ -70,6 +70,17 @@ export const deepLinkSchemas = {
  }),
 };

+export const deepLinkQuerySchemas = {
+  "onboard-meeting-members": z.object({
+    password: z.string(),
+  }),
+};
+
+// Add a union type of all valid route paths
+export const VALID_DEEP_LINK_ROUTES = Object.keys(
+  deepLinkPathSchemas,
+) as readonly (keyof typeof deepLinkPathSchemas)[];
+
 // Create a type from the array
 export type DeepLinkRoute = (typeof VALID_DEEP_LINK_ROUTES)[number];

@@ -80,14 +91,13 @@ export const baseUrlSchema = z.object({
  queryParams: z.record(z.string()).optional(),
 });

-// Add a union type of all valid route paths
-export const VALID_DEEP_LINK_ROUTES = Object.keys(
-  deepLinkSchemas,
-) as readonly (keyof typeof deepLinkSchemas)[];
+// export type DeepLinkPathParams = {
+//   [K in keyof typeof deepLinkPathSchemas]: z.infer<(typeof deepLinkPathSchemas)[K]>;
+// };

-export type DeepLinkParams = {
-  [K in keyof typeof deepLinkSchemas]: z.infer<(typeof deepLinkSchemas)[K]>;
-};
+// export type DeepLinkQueryParams = {
+//   [K in keyof typeof deepLinkQuerySchemas]: z.infer<(typeof deepLinkQuerySchemas)[K]>;
+// };

 export interface DeepLinkError extends Error {
  code: string;
--- 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/libs/util.ts
+++ b/src/libs/util.ts
@@ -658,7 +658,7 @@ export async function saveNewIdentity(

    await platformService.updateDefaultSettings({ activeDid: identity.did });

-    await platformService.insertDidSpecificSettings(identity.did);
+    await platformService.insertNewDidIntoSettings(identity.did);
  } catch (error) {
    logger.error("Failed to update default settings:", error);
    throw new Error(
@@ -955,7 +955,7 @@ export async function importFromMnemonic(

    try {
      // First, ensure the DID-specific settings record exists
-      await platformService.insertDidSpecificSettings(newId.did);
+      await platformService.insertNewDidIntoSettings(newId.did);

      // Then update with Test User #0 specific settings
      await platformService.updateDidSpecificSettings(newId.did, {
--- a/src/main.capacitor.ts
+++ b/src/main.capacitor.ts
@@ -29,14 +29,15 @@
 */

 import { initializeApp } from "./main.common";
-import { App } from "./libs/capacitor/app";
+import { App as CapacitorApp } from "@capacitor/app";
 import router from "./router";
 import { handleApiError } from "./services/api";
 import { AxiosError } from "axios";
 import { DeepLinkHandler } from "./services/deepLinks";
 import { logger, safeStringify } from "./utils/logger";
+import "./utils/safeAreaInset";

-logger.log("[Capacitor] Starting initialization");
+logger.log("[Capacitor] 🚀 Starting initialization");
 logger.log("[Capacitor] Platform:", process.env.VITE_PLATFORM);

 const app = initializeApp();
@@ -67,23 +68,123 @@ const deepLinkHandler = new DeepLinkHandler(router);
 * @throws {Error} If URL format is invalid
 */
 const handleDeepLink = async (data: { url: string }) => {
+  const { url } = data;
+  logger.info(`[Main] 🌐 Deeplink received from Capacitor: ${url}`);
+
  try {
+    // Wait for router to be ready
+    logger.info(`[Main] ⏳ Waiting for router to be ready...`);
    await router.isReady();
-    await deepLinkHandler.handleDeepLink(data.url);
+    logger.info(`[Main] ✅ Router is ready, processing deeplink`);
+
+    // Process the deeplink
+    logger.info(`[Main] 🚀 Starting deeplink processing`);
+    await deepLinkHandler.handleDeepLink(url);
+    logger.info(`[Main] ✅ Deeplink processed successfully`);
  } catch (error) {
-    logger.error("[DeepLink] Error handling deep link: ", error);
+    logger.error(`[Main] ❌ Deeplink processing failed:`, {
+      url,
+      error: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      timestamp: new Date().toISOString(),
+    });
+
+    // Log additional context for debugging
+    logger.error(`[Main] 🔍 Debug context:`, {
+      routerReady: router.isReady(),
+      currentRoute: router.currentRoute.value,
+      appMounted: app._instance?.isMounted,
+      timestamp: new Date().toISOString(),
+    });
+
+    // Fallback to original error handling
    let message: string =
      error instanceof Error ? error.message : safeStringify(error);
-    if (data.url) {
-      message += `\nURL: ${data.url}`;
+    if (url) {
+      message += `\nURL: ${url}`;
    }
    handleApiError({ message } as AxiosError, "deep-link");
  }
 };

-// Register deep link handler with Capacitor
-App.addListener("appUrlOpen", handleDeepLink);
+// Function to register the deeplink listener
+const registerDeepLinkListener = async () => {
+  try {
+    logger.info(
+      `[Main] 🔗 Attempting to register deeplink handler with Capacitor`,
+    );

-logger.log("[Capacitor] Mounting app");
+    // Check if Capacitor App plugin is available
+    logger.info(`[Main] 🔍 Checking Capacitor App plugin availability...`);
+    if (!CapacitorApp) {
+      throw new Error("Capacitor App plugin not available");
+    }
+    logger.info(`[Main] ✅ Capacitor App plugin is available`);
+
+    // Check available methods on CapacitorApp
+    logger.info(
+      `[Main] 🔍 Capacitor App plugin methods:`,
+      Object.getOwnPropertyNames(CapacitorApp),
+    );
+    logger.info(
+      `[Main] 🔍 Capacitor App plugin addListener method:`,
+      typeof CapacitorApp.addListener,
+    );
+
+    // Wait for router to be ready first
+    await router.isReady();
+    logger.info(
+      `[Main] ✅ Router is ready, proceeding with listener registration`,
+    );
+
+    // Try to register the listener
+    logger.info(`[Main] 🧪 Attempting to register appUrlOpen listener...`);
+    const listenerHandle = await CapacitorApp.addListener(
+      "appUrlOpen",
+      handleDeepLink,
+    );
+    logger.info(
+      `[Main] ✅ appUrlOpen listener registered successfully with handle:`,
+      listenerHandle,
+    );
+
+    // Test the listener registration by checking if it's actually registered
+    logger.info(`[Main] 🧪 Verifying listener registration...`);
+
+    return listenerHandle;
+  } catch (error) {
+    logger.error(`[Main] ❌ Failed to register deeplink listener:`, {
+      error: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      timestamp: new Date().toISOString(),
+    });
+    throw error;
+  }
+};
+
+logger.log("[Capacitor] 🚀 Mounting app");
 app.mount("#app");
-logger.log("[Capacitor] App mounted");
+logger.info(`[Main] ✅ App mounted successfully`);
+
+// Register deeplink listener after app is mounted
+setTimeout(async () => {
+  try {
+    logger.info(
+      `[Main] ⏳ Delaying listener registration to ensure Capacitor is ready...`,
+    );
+    await registerDeepLinkListener();
+    logger.info(`[Main] 🎉 Deep link system fully initialized!`);
+  } catch (error) {
+    logger.error(`[Main] ❌ Deep link system initialization failed:`, error);
+  }
+}, 2000); // 2 second delay to ensure Capacitor is fully ready
+
+// Log app initialization status
+setTimeout(() => {
+  logger.info(`[Main] 📊 App initialization status:`, {
+    routerReady: router.isReady(),
+    currentRoute: router.currentRoute.value,
+    appMounted: app._instance?.isMounted,
+    timestamp: new Date().toISOString(),
+  });
+}, 1000);
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,26 @@
+/**
+ * @file Dynamic Main Entry Point
+ * @author Matthew Raymer
+ *
+ * This file dynamically loads the appropriate platform-specific main entry point
+ * based on the current environment and build configuration.
+ */
+
+import { logger } from "./utils/logger";
+
+// Check the platform from environment variables
+const platform = process.env.VITE_PLATFORM || "web";
+
+logger.info(`[Main] 🚀 Loading TimeSafari for platform: ${platform}`);
+
+// Dynamically import the appropriate main entry point
+if (platform === "capacitor") {
+  logger.info(`[Main] 📱 Loading Capacitor-specific entry point`);
+  import("./main.capacitor");
+} else if (platform === "electron") {
+  logger.info(`[Main] 💻 Loading Electron-specific entry point`);
+  import("./main.electron");
+} else {
+  logger.info(`[Main] 🌐 Loading Web-specific entry point`);
+  import("./main.web");
+}
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -321,24 +321,21 @@ const errorHandler = (
 router.onError(errorHandler); // Assign the error handler to the router instance

 /**
- * Global navigation guard to ensure user identity exists
- *
- * This guard checks if the user has any identities before navigating to most routes.
- * If no identity exists, it automatically creates one using the default seed-based method.
- *
- * Routes that are excluded from this check:
- * - /start - Manual identity creation selection
- * - /new-identifier - Manual seed-based creation
- * - /import-account - Manual import flow
- * - /import-derive - Manual derivation flow
- * - /database-migration - Migration utilities
- * - /deep-link-error - Error page
- *
+ * Navigation guard to ensure user has an identity before accessing protected routes
 * @param to - Target route
- * @param from - Source route
+ * @param _from - Source route (unused)
 * @param next - Navigation function
 */
 router.beforeEach(async (to, _from, next) => {
+  logger.info(`[Router] 🧭 Navigation guard triggered:`, {
+    from: _from?.path || "none",
+    to: to.path,
+    name: to.name,
+    params: to.params,
+    query: to.query,
+    timestamp: new Date().toISOString(),
+  });
+
  try {
    // Skip identity check for routes that handle identity creation manually
    const skipIdentityRoutes = [
@@ -351,32 +348,67 @@ router.beforeEach(async (to, _from, next) => {
    ];

    if (skipIdentityRoutes.includes(to.path)) {
+      logger.debug(`[Router] ⏭️ Skipping identity check for route: ${to.path}`);
      return next();
    }

+    logger.info(`[Router] 🔍 Checking user identity for route: ${to.path}`);
+
    // Check if user has any identities
    const allMyDids = await retrieveAccountDids();
+    logger.info(`[Router] 📋 Found ${allMyDids.length} user identities`);

    if (allMyDids.length === 0) {
-      logger.info("[Router] No identities found, creating default identity");
+      logger.info("[Router] ⚠️ No identities found, creating default identity");

      // Create identity automatically using seed-based method
      await generateSaveAndActivateIdentity();

-      logger.info("[Router] Default identity created successfully");
+      logger.info("[Router] ✅ Default identity created successfully");
+    } else {
+      logger.info(
+        `[Router] ✅ User has ${allMyDids.length} identities, proceeding`,
+      );
    }

+    logger.info(`[Router] ✅ Navigation guard passed for: ${to.path}`);
    next();
  } catch (error) {
-    logger.error(
-      "[Router] Identity creation failed in navigation guard:",
-      error,
-    );
+    logger.error("[Router] ❌ Identity creation failed in navigation guard:", {
+      error: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      route: to.path,
+      timestamp: new Date().toISOString(),
+    });

    // Redirect to start page if identity creation fails
    // This allows users to manually create an identity or troubleshoot
+    logger.info(
+      `[Router] 🔄 Redirecting to /start due to identity creation failure`,
+    );
    next("/start");
  }
 });

+// Add navigation success logging
+router.afterEach((to, from) => {
+  logger.info(`[Router] ✅ Navigation completed:`, {
+    from: from?.path || "none",
+    to: to.path,
+    name: to.name,
+    params: to.params,
+    query: to.query,
+    timestamp: new Date().toISOString(),
+  });
+});
+
+// Add error logging
+router.onError((error) => {
+  logger.error(`[Router] ❌ Navigation error:`, {
+    error: error instanceof Error ? error.message : String(error),
+    stack: error instanceof Error ? error.stack : undefined,
+    timestamp: new Date().toISOString(),
+  });
+});
+
 export default router;
--- a/src/services/ClipboardService.ts
+++ b/src/services/ClipboardService.ts
@@ -0,0 +1,185 @@
+import { Capacitor } from "@capacitor/core";
+import { Clipboard } from "@capacitor/clipboard";
+import { useClipboard } from "@vueuse/core";
+import { logger } from "@/utils/logger";
+
+/**
+ * Platform-agnostic clipboard service that handles both web and native platforms
+ * Provides reliable clipboard functionality across all platforms including iOS
+ */
+export class ClipboardService {
+  private static instance: ClipboardService | null = null;
+
+  /**
+   * Get singleton instance of ClipboardService
+   */
+  public static getInstance(): ClipboardService {
+    if (!ClipboardService.instance) {
+      ClipboardService.instance = new ClipboardService();
+    }
+    return ClipboardService.instance;
+  }
+
+  /**
+   * Copy text to clipboard with platform-specific handling
+   *
+   * @param text - The text to copy to clipboard
+   * @returns Promise that resolves when copy is complete
+   * @throws Error if copy operation fails
+   */
+  public async copyToClipboard(text: string): Promise<void> {
+    const platform = Capacitor.getPlatform();
+    const isNative = Capacitor.isNativePlatform();
+
+    logger.debug("[ClipboardService] Copying to clipboard:", {
+      text: text.substring(0, 50) + (text.length > 50 ? "..." : ""),
+      platform,
+      isNative,
+      timestamp: new Date().toISOString(),
+    });
+
+    try {
+      if (isNative && (platform === "ios" || platform === "android")) {
+        // Use native Capacitor clipboard for mobile platforms
+        await this.copyNative(text);
+      } else {
+        // Use web clipboard API for web/desktop platforms
+        await this.copyWeb(text);
+      }
+
+      logger.debug("[ClipboardService] Copy successful", {
+        platform,
+        timestamp: new Date().toISOString(),
+      });
+    } catch (error) {
+      logger.error("[ClipboardService] Copy failed:", {
+        error: error instanceof Error ? error.message : String(error),
+        platform,
+        timestamp: new Date().toISOString(),
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Copy text using native Capacitor clipboard API
+   *
+   * @param text - The text to copy
+   * @returns Promise that resolves when copy is complete
+   */
+  private async copyNative(text: string): Promise<void> {
+    try {
+      await Clipboard.write({
+        string: text,
+      });
+    } catch (error) {
+      logger.error("[ClipboardService] Native copy failed:", {
+        error: error instanceof Error ? error.message : String(error),
+        timestamp: new Date().toISOString(),
+      });
+      throw new Error(
+        `Native clipboard copy failed: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+
+  /**
+   * Copy text using web clipboard API with fallback
+   *
+   * @param text - The text to copy
+   * @returns Promise that resolves when copy is complete
+   */
+  private async copyWeb(text: string): Promise<void> {
+    try {
+      // Try VueUse clipboard first (handles some edge cases)
+      const { copy } = useClipboard();
+      await copy(text);
+    } catch (error) {
+      logger.warn(
+        "[ClipboardService] VueUse clipboard failed, trying native API:",
+        {
+          error: error instanceof Error ? error.message : String(error),
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Fallback to native navigator.clipboard
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        throw new Error("Clipboard API not supported in this browser");
+      }
+    }
+  }
+
+  /**
+   * Read text from clipboard (platform-specific)
+   *
+   * @returns Promise that resolves to the clipboard text
+   * @throws Error if read operation fails
+   */
+  public async readFromClipboard(): Promise<string> {
+    const platform = Capacitor.getPlatform();
+    const isNative = Capacitor.isNativePlatform();
+
+    try {
+      if (isNative && (platform === "ios" || platform === "android")) {
+        // Use native Capacitor clipboard for mobile platforms
+        const result = await Clipboard.read();
+        return result.value || "";
+      } else {
+        // Use web clipboard API for web/desktop platforms
+        if (navigator.clipboard && navigator.clipboard.readText) {
+          return await navigator.clipboard.readText();
+        } else {
+          throw new Error("Clipboard read API not supported in this browser");
+        }
+      }
+    } catch (error) {
+      logger.error("[ClipboardService] Read from clipboard failed:", {
+        error: error instanceof Error ? error.message : String(error),
+        platform,
+        timestamp: new Date().toISOString(),
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Check if clipboard is supported on current platform
+   *
+   * @returns boolean indicating if clipboard is supported
+   */
+  public isSupported(): boolean {
+    const platform = Capacitor.getPlatform();
+    const isNative = Capacitor.isNativePlatform();
+
+    if (isNative && (platform === "ios" || platform === "android")) {
+      return true; // Capacitor clipboard should work on native platforms
+    }
+
+    // Check web clipboard support
+    return !!(navigator.clipboard && navigator.clipboard.writeText);
+  }
+}
+
+/**
+ * Convenience function to copy text to clipboard
+ * Uses the singleton ClipboardService instance
+ *
+ * @param text - The text to copy to clipboard
+ * @returns Promise that resolves when copy is complete
+ */
+export async function copyToClipboard(text: string): Promise<void> {
+  return ClipboardService.getInstance().copyToClipboard(text);
+}
+
+/**
+ * Convenience function to read text from clipboard
+ * Uses the singleton ClipboardService instance
+ *
+ * @returns Promise that resolves to the clipboard text
+ */
+export async function readFromClipboard(): Promise<string> {
+  return ClipboardService.getInstance().readFromClipboard();
+}
--- a/src/services/PlatformService.ts
+++ b/src/services/PlatformService.ts
@@ -175,11 +175,11 @@ export interface PlatformService {
  updateDefaultSettings(settings: Record<string, unknown>): Promise<void>;

  /**
-   * Inserts DID-specific settings into the database.
+   * Inserts a new DID into the settings table.
   * @param did - The DID to associate with the settings
   * @returns Promise that resolves when the insertion is complete
   */
-  insertDidSpecificSettings(did: string): Promise<void>;
+  insertNewDidIntoSettings(did: string): Promise<void>;

  /**
   * Updates DID-specific settings in the database.
--- 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 },
-      );
+      const url = `${this.partnerApiServer}/api/partner/userProfile`;
+      const response = await this.axios.delete(url, { headers });

-      if (response.status === 200) {
+      if (response.status === 204 || response.status === 200) {
+        logger.info("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;
+        logger.error("API error deleting profile:", {
+          status: response.status,
+          statusText: response.statusText,
+          data: response.data,
+          url: this.getErrorUrl(error),
+        });
+
+        // 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);
+          const errorMessage =
+            typeof response.data === "string"
+              ? response.data
+              : response.data?.message || "Bad request";
+          throw new Error(`Profile deletion failed: ${errorMessage}`);
+        } 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;
@@ -204,13 +242,56 @@ export class ProfileService {
  }

  /**
-   * Type guard for API errors
+   * Type guard for API errors with proper typing
   */
-  private isApiError(
-    error: unknown,
-  ): error is { response?: { status?: number } } {
+  private isApiError(error: unknown): error is {
+    response?: {
+      status?: number;
+      statusText?: string;
+      data?: { message?: string } | string;
+    };
+  } {
    return typeof error === "object" && error !== null && "response" in error;
  }
+
+  /**
+   * Extract error URL safely from error object
+   */
+  private getErrorUrl(error: unknown): string | undefined {
+    if (this.isAxiosError(error)) {
+      return error.config?.url;
+    }
+    if (this.isApiError(error) && this.hasConfigProperty(error)) {
+      const config = this.getConfigProperty(error);
+      return config?.url;
+    }
+    return undefined;
+  }
+
+  /**
+   * Type guard to check if error has config property
+   */
+  private hasConfigProperty(
+    error: unknown,
+  ): error is { config?: { url?: string } } {
+    return typeof error === "object" && error !== null && "config" in error;
+  }
+
+  /**
+   * Safely extract config property from error
+   */
+  private getConfigProperty(error: {
+    config?: { url?: string };
+  }): { url?: string } | undefined {
+    return error.config;
+  }
+
+  /**
+   * Type guard for AxiosError
+   */
+  private isAxiosError(error: unknown): error is AxiosError {
+    return error instanceof AxiosError;
+  }
 }

 /**
--- 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/services/deepLinks.ts
+++ b/src/services/deepLinks.ts
@@ -1,56 +1,22 @@
 /**
- * @file Deep Link Handler Service
+ * DeepLinks Service
+ *
+ * Handles deep link processing and routing for the TimeSafari application.
+ * Supports both path parameters and query parameters with comprehensive validation.
+ *
 * @author Matthew Raymer
- *
- * This service handles the processing and routing of deep links in the TimeSafari app.
- * It provides a type-safe interface between the raw deep links and the application router.
- *
- * Architecture:
- * 1. DeepLinkHandler class encapsulates all deep link processing logic
- * 2. Uses Zod schemas from interfaces/deepLinks for parameter validation
- * 3. Provides consistent error handling and logging
- * 4. Maps validated parameters to Vue router calls
- *
- * Error Handling Strategy:
- * - All errors are wrapped in DeepLinkError interface
- * - Errors include error codes for systematic handling
- * - Detailed error information is logged for debugging
- * - Errors are propagated to the global error handler
- *
- * Validation Strategy:
- * - URL structure validation
- * - Route-specific parameter validation using Zod schemas
- * - Query parameter validation and sanitization
- * - Type-safe parameter passing to router
- *
- * Deep Link Format:
- * timesafari://<route>[/<param>][?queryParam1=value1&queryParam2=value2]
- *
- * Supported Routes:
- * - claim: View claim
- * - claim-add-raw: Add raw claim
- * - claim-cert: View claim certificate
- * - confirm-gift
- * - contact-import: Import contacts
- * - did: View DID
- * - invite-one-accept: Accept invitation
- * - onboard-meeting-members
- * - project: View project details
- * - user-profile: View user profile
- *
- * @example
- * const handler = new DeepLinkHandler(router);
- * await handler.handleDeepLink("timesafari://claim/123?view=details");
+ * @version 2.0.0
+ * @since 2025-01-25
 */

 import { Router } from "vue-router";
 import { z } from "zod";

 import {
-  deepLinkSchemas,
-  baseUrlSchema,
+  deepLinkPathSchemas,
  routeSchema,
  DeepLinkRoute,
+  deepLinkQuerySchemas,
 } from "../interfaces/deepLinks";
 import type { DeepLinkError } from "../interfaces/deepLinks";
 import { logger } from "../utils/logger";
@@ -74,7 +40,7 @@ function getFirstKeyFromZodObject(
 * because "router.replace" expects the right parameter name for the route.
 */
 export const ROUTE_MAP: Record<string, { name: string; paramKey?: string }> =
-  Object.entries(deepLinkSchemas).reduce(
+  Object.entries(deepLinkPathSchemas).reduce(
    (acc, [routeName, schema]) => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const paramKey = getFirstKeyFromZodObject(schema as z.ZodObject<any>);
@@ -103,83 +69,152 @@ export class DeepLinkHandler {
  }

  /**
-
-   * Parses deep link URL into path, params and query components.
-   * Validates URL structure using Zod schemas.
-   *
-   * @param url - The deep link URL to parse (format: scheme://path[?query])
-   * @throws {DeepLinkError} If URL format is invalid
-   * @returns Parsed URL components (path: string, params: {KEY: string}, query: {KEY: string})
+   * Main entry point for processing deep links
+   * @param url - The deep link URL to process
+   * @throws {DeepLinkError} If validation fails or route is invalid
   */
-  private parseDeepLink(url: string) {
-    const parts = url.split("://");
-    if (parts.length !== 2) {
-      throw { code: "INVALID_URL", message: "Invalid URL format" };
-    }
+  async handleDeepLink(url: string): Promise<void> {
+    logger.info(`[DeepLink] 🚀 Starting deeplink processing for URL: ${url}`);

-    // Validate base URL structure
-    baseUrlSchema.parse({
-      scheme: parts[0],
-      path: parts[1],
-      queryParams: {}, // Will be populated below
-    });
+    try {
+      logger.info(`[DeepLink] 📍 Parsing URL: ${url}`);
+      const { path, params, query } = this.parseDeepLink(url);

-    const [path, queryString] = parts[1].split("?");
-    const [routePath, ...pathParams] = path.split("/");
-
-    // Validate route exists before proceeding
-    if (!ROUTE_MAP[routePath]) {
-      throw {
-        code: "INVALID_ROUTE",
-        message: `Invalid route path: ${routePath}`,
-        details: { routePath },
-      };
-    }
-
-    const query: Record<string, string> = {};
-    if (queryString) {
-      new URLSearchParams(queryString).forEach((value, key) => {
-        query[key] = value;
+      logger.info(`[DeepLink] ✅ URL parsed successfully:`, {
+        path,
+        params: Object.keys(params),
+        query: Object.keys(query),
+        fullParams: params,
+        fullQuery: query,
      });
-    }

-    const params: Record<string, string> = {};
-    if (pathParams) {
-      // Now we know routePath exists in ROUTE_MAP
-      const routeConfig = ROUTE_MAP[routePath];
-      params[routeConfig.paramKey ?? "id"] = pathParams.join("/");
-    }
+      // Sanitize parameters (remove undefined values)
+      const sanitizedParams = Object.fromEntries(
+        Object.entries(params).map(([key, value]) => [key, value ?? ""]),
+      );

-    // logConsoleAndDb(
-    //   `[DeepLink] Debug: Route Path: ${routePath} Path Params: ${JSON.stringify(params)} Query String: ${JSON.stringify(query)}`,
-    //   false,
-    // );
-    return { path: routePath, params, query };
+      logger.info(`[DeepLink] 🧹 Parameters sanitized:`, sanitizedParams);
+
+      await this.validateAndRoute(path, sanitizedParams, query);
+      logger.info(`[DeepLink] 🎯 Deeplink processing completed successfully`);
+    } catch (error) {
+      logger.error(`[DeepLink] ❌ Deeplink processing failed:`, {
+        url,
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+
+      const deepLinkError = error as DeepLinkError;
+      throw deepLinkError;
+    }
  }

  /**
-   * Routes the deep link to appropriate view with validated parameters.
-   * Validates route and parameters using Zod schemas before routing.
-   *
-   * @param path - The route path from the deep link
-   * @param params - URL parameters
-   * @param query - Query string parameters
-   * @throws {DeepLinkError} If validation fails or route is invalid
+   * Parse a deep link URL into its components
+   * @param url - The deep link URL
+   * @returns Parsed components
+   */
+  private parseDeepLink(url: string): {
+    path: string;
+    params: Record<string, string>;
+    query: Record<string, string>;
+  } {
+    logger.debug(`[DeepLink] 🔍 Parsing deep link: ${url}`);
+
+    try {
+      const parts = url.split("://");
+      if (parts.length !== 2) {
+        throw new Error("Invalid URL format");
+      }
+
+      const [path, queryString] = parts[1].split("?");
+      const [routePath, ...pathParams] = path.split("/");
+
+      // Parse path parameters using route-specific configuration
+      const params: Record<string, string> = {};
+      if (pathParams.length > 0) {
+        // Get the correct parameter key for this route
+        const routeConfig = ROUTE_MAP[routePath];
+        if (routeConfig?.paramKey) {
+          params[routeConfig.paramKey] = pathParams[0];
+          logger.debug(
+            `[DeepLink] 📍 Path parameter extracted: ${routeConfig.paramKey}=${pathParams[0]}`,
+          );
+        } else {
+          // Fallback to 'id' for backward compatibility
+          params.id = pathParams[0];
+          logger.debug(
+            `[DeepLink] 📍 Path parameter extracted: id=${pathParams[0]} (fallback)`,
+          );
+        }
+      }
+
+      // Parse query parameters
+      const query: Record<string, string> = {};
+      if (queryString) {
+        const queryParams = new URLSearchParams(queryString);
+        for (const [key, value] of queryParams.entries()) {
+          query[key] = value;
+        }
+        logger.debug(`[DeepLink] 🔗 Query parameters extracted:`, query);
+      }
+
+      logger.info(`[DeepLink] ✅ Parse completed:`, {
+        routePath,
+        pathParams: pathParams.length,
+        queryParams: Object.keys(query).length,
+      });
+
+      return { path: routePath, params, query };
+    } catch (error) {
+      logger.error(`[DeepLink] ❌ Parse failed:`, {
+        url,
+        error: error instanceof Error ? error.message : String(error),
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Validate and route the deep link
+   * @param path - The route path
+   * @param params - Path parameters
+   * @param query - Query parameters
   */
  private async validateAndRoute(
    path: string,
    params: Record<string, string>,
    query: Record<string, string>,
  ): Promise<void> {
+    logger.info(
+      `[DeepLink] 🎯 Starting validation and routing for path: ${path}`,
+    );
+
    // First try to validate the route path
    let routeName: string;

    try {
+      logger.debug(`[DeepLink] 🔍 Validating route path: ${path}`);
      // Validate route exists
      const validRoute = routeSchema.parse(path) as DeepLinkRoute;
-      routeName = ROUTE_MAP[validRoute].name;
+      logger.info(`[DeepLink] ✅ Route validation passed: ${validRoute}`);
+
+      // Get route configuration
+      const routeConfig = ROUTE_MAP[validRoute];
+      logger.info(`[DeepLink] 📋 Route config retrieved:`, routeConfig);
+
+      if (!routeConfig) {
+        logger.error(`[DeepLink] ❌ No route config found for: ${validRoute}`);
+        throw new Error(`Route configuration missing for: ${validRoute}`);
+      }
+
+      routeName = routeConfig.name;
+      logger.info(`[DeepLink] 🎯 Route name resolved: ${routeName}`);
    } catch (error) {
-      logger.error(`[DeepLink] Invalid route path: ${path}`);
+      logger.error(`[DeepLink] ❌ Route validation failed:`, {
+        path,
+        error: error instanceof Error ? error.message : String(error),
+      });

      // Redirect to error page with information about the invalid link
      await this.router.replace({
@@ -193,21 +228,66 @@ export class DeepLinkHandler {
        },
      });

-      // This previously threw an error but we're redirecting so there's no need.
+      logger.info(
+        `[DeepLink] 🔄 Redirected to error page for invalid route: ${path}`,
+      );
      return;
    }

-    // Continue with parameter validation as before...
-    const schema = deepLinkSchemas[path as keyof typeof deepLinkSchemas];
+    // Continue with parameter validation
+    logger.info(
+      `[DeepLink] 🔍 Starting parameter validation for route: ${routeName}`,
+    );
+
+    const pathSchema =
+      deepLinkPathSchemas[path as keyof typeof deepLinkPathSchemas];
+    const querySchema =
+      deepLinkQuerySchemas[path as keyof typeof deepLinkQuerySchemas];
+
+    logger.debug(`[DeepLink] 📋 Schemas found:`, {
+      hasPathSchema: !!pathSchema,
+      hasQuerySchema: !!querySchema,
+      pathSchemaType: pathSchema ? typeof pathSchema : "none",
+      querySchemaType: querySchema ? typeof querySchema : "none",
+    });
+
+    let validatedPathParams: Record<string, string> = {};
+    let validatedQueryParams: Record<string, string> = {};

-    let validatedParams;
    try {
-      validatedParams = await schema.parseAsync(params);
+      if (pathSchema) {
+        logger.debug(`[DeepLink] 🔍 Validating path parameters:`, params);
+        validatedPathParams = await pathSchema.parseAsync(params);
+        logger.info(
+          `[DeepLink] ✅ Path parameters validated:`,
+          validatedPathParams,
+        );
+      } else {
+        logger.debug(`[DeepLink] ⚠️ No path schema found for: ${path}`);
+        validatedPathParams = params;
+      }
+
+      if (querySchema) {
+        logger.debug(`[DeepLink] 🔍 Validating query parameters:`, query);
+        validatedQueryParams = await querySchema.parseAsync(query);
+        logger.info(
+          `[DeepLink] ✅ Query parameters validated:`,
+          validatedQueryParams,
+        );
+      } else {
+        logger.debug(`[DeepLink] ⚠️ No query schema found for: ${path}`);
+        validatedQueryParams = query;
+      }
    } catch (error) {
-      // For parameter validation errors, provide specific error feedback
-      logger.error(
-        `[DeepLink] Invalid parameters for route name ${routeName} for path: ${path}: ${JSON.stringify(error)} ... with params: ${JSON.stringify(params)} ... and query: ${JSON.stringify(query)}`,
-      );
+      logger.error(`[DeepLink] ❌ Parameter validation failed:`, {
+        routeName,
+        path,
+        params,
+        query,
+        error: error instanceof Error ? error.message : String(error),
+        errorDetails: JSON.stringify(error),
+      });
+
      await this.router.replace({
        name: "deep-link-error",
        params,
@@ -219,58 +299,52 @@ export class DeepLinkHandler {
        },
      });

-      // This previously threw an error but we're redirecting so there's no need.
+      logger.info(
+        `[DeepLink] 🔄 Redirected to error page for invalid parameters`,
+      );
      return;
    }

+    // Attempt navigation
    try {
+      logger.info(`[DeepLink] 🚀 Attempting navigation:`, {
+        routeName,
+        pathParams: validatedPathParams,
+        queryParams: validatedQueryParams,
+      });
+
      await this.router.replace({
        name: routeName,
-        params: validatedParams,
+        params: validatedPathParams,
+        query: validatedQueryParams,
      });
+
+      logger.info(`[DeepLink] ✅ Navigation successful to: ${routeName}`);
    } catch (error) {
-      logger.error(
-        `[DeepLink] Error routing to route name ${routeName} for path: ${path}: ${JSON.stringify(error)} ... with validated params: ${JSON.stringify(validatedParams)}`,
-      );
-      // For parameter validation errors, provide specific error feedback
+      logger.error(`[DeepLink] ❌ Navigation failed:`, {
+        routeName,
+        path,
+        validatedPathParams,
+        validatedQueryParams,
+        error: error instanceof Error ? error.message : String(error),
+        errorDetails: JSON.stringify(error),
+      });
+
+      // Redirect to error page for navigation failures
      await this.router.replace({
        name: "deep-link-error",
-        params: validatedParams,
+        params: validatedPathParams,
        query: {
          originalPath: path,
          errorCode: "ROUTING_ERROR",
-          errorMessage: `Error routing to ${routeName}: ${JSON.stringify(error)}`,
+          errorMessage: `Error routing to ${routeName}: ${(error as Error).message}`,
+          ...validatedQueryParams,
        },
      });
-    }
-  }

-  /**
-   * Processes incoming deep links and routes them appropriately.
-   * Handles validation, error handling, and routing to the correct view.
-   *
-   * @param url - The deep link URL to process
-   * @throws {DeepLinkError} If URL processing fails
-   */
-  async handleDeepLink(url: string): Promise<void> {
-    try {
-      const { path, params, query } = this.parseDeepLink(url);
-      // Ensure params is always a Record<string,string> by converting undefined to empty string
-      const sanitizedParams = Object.fromEntries(
-        Object.entries(params).map(([key, value]) => [key, value ?? ""]),
+      logger.info(
+        `[DeepLink] 🔄 Redirected to error page for navigation failure`,
      );
-      await this.validateAndRoute(path, sanitizedParams, query);
-    } catch (error) {
-      const deepLinkError = error as DeepLinkError;
-      logger.error(
-        `[DeepLink] Error (${deepLinkError.code}): ${deepLinkError.details}`,
-      );
-
-      throw {
-        code: deepLinkError.code || "UNKNOWN_ERROR",
-        message: deepLinkError.message,
-        details: deepLinkError.details,
-      };
    }
  }
 }
--- a/src/services/platforms/CapacitorPlatformService.ts
+++ b/src/services/platforms/CapacitorPlatformService.ts
@@ -1319,7 +1319,7 @@ export class CapacitorPlatformService implements PlatformService {
    await this.dbExec(sql, params);
  }

-  async insertDidSpecificSettings(did: string): Promise<void> {
+  async insertNewDidIntoSettings(did: string): Promise<void> {
    await this.dbExec("INSERT INTO settings (accountDid) VALUES (?)", [did]);
  }

--- a/src/services/platforms/WebPlatformService.ts
+++ b/src/services/platforms/WebPlatformService.ts
@@ -681,7 +681,7 @@ export class WebPlatformService implements PlatformService {
    await this.dbExec(sql, params);
  }

-  async insertDidSpecificSettings(did: string): Promise<void> {
+  async insertNewDidIntoSettings(did: string): Promise<void> {
    await this.dbExec("INSERT INTO settings (accountDid) VALUES (?)", [did]);
  }

--- a/src/test/index.ts
+++ b/src/test/index.ts
@@ -50,6 +50,10 @@ export async function testServerRegisterUser() {
    "@/db/databaseUtil"
  );
  const settings = await retrieveSettingsForActiveAccount();
+  const currentDid = settings?.activeDid;
+  if (!currentDid) {
+    throw new Error("No active DID found");
+  }

  // Make a claim
  const vcClaim = {
@@ -57,7 +61,7 @@ export async function testServerRegisterUser() {
    "@type": "RegisterAction",
    agent: { identifier: identity0.did },
    object: SERVICE_ID,
-    participant: { identifier: settings.activeDid },
+    participant: { identifier: currentDid },
  };

  // Make a payload for the claim
@@ -94,5 +98,12 @@ export async function testServerRegisterUser() {

  const resp = await axios.post(url, payload, { headers });
  logger.log("User registration result:", resp);
+
+  const platformService = await PlatformServiceFactory.getInstance();
+  await platformService.updateDefaultSettings({ activeDid: currentDid });
+  await platformService.updateDidSpecificSettings(currentDid!, {
+    isRegistered: true,
+  });
+
  return resp;
 }
--- a/src/utils/safeAreaInset.js
+++ b/src/utils/safeAreaInset.js
@@ -0,0 +1,226 @@
+/**
+ * Safe Area Inset Injection for Android WebView
+ *
+ * This script injects safe area inset values into CSS environment variables
+ * when running in Android WebView, since Android doesn't natively support
+ * CSS env(safe-area-inset-*) variables like iOS does.
+ */
+
+// Check if we're running in Android WebView with Capacitor
+const isAndroidWebView = () => {
+  // Check if we're on iOS - if so, skip this script entirely
+  const isIOS =
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+
+  if (isIOS) {
+    return false;
+  }
+
+  // Check if we're on Android
+  const isAndroid = /Android/.test(navigator.userAgent);
+
+  // Check if we have Capacitor (required for Android WebView)
+  const hasCapacitor = window.Capacitor !== undefined;
+
+  // Only run on Android with Capacitor
+  return isAndroid && hasCapacitor;
+};
+
+// Wait for Capacitor to be available
+const waitForCapacitor = () => {
+  return new Promise((resolve) => {
+    if (window.Capacitor) {
+      resolve(window.Capacitor);
+      return;
+    }
+
+    // Wait for Capacitor to be available
+    const checkCapacitor = () => {
+      if (window.Capacitor) {
+        resolve(window.Capacitor);
+      } else {
+        setTimeout(checkCapacitor, 100);
+      }
+    };
+
+    checkCapacitor();
+  });
+};
+
+// Inject safe area inset values into CSS custom properties
+const injectSafeAreaInsets = async () => {
+  try {
+    // Wait for Capacitor to be available
+    const Capacitor = await waitForCapacitor();
+
+    // Try to get safe area insets using StatusBar plugin (which is already available)
+
+    let top = 0,
+      bottom = 0,
+      left = 0,
+      right = 0;
+
+    try {
+      // Use StatusBar plugin to get status bar height
+      if (Capacitor.Plugins.StatusBar) {
+        const statusBarInfo = await Capacitor.Plugins.StatusBar.getInfo();
+        // Status bar height is typically the top safe area inset
+        top = statusBarInfo.overlays ? 0 : statusBarInfo.height || 0;
+      }
+    } catch (error) {
+      // Status bar info not available, will use fallback
+    }
+
+    // Detect navigation bar and gesture bar heights
+    const detectNavigationBar = () => {
+      const screenHeight = window.screen.height;
+      const screenWidth = window.screen.width;
+      const windowHeight = window.innerHeight;
+      const devicePixelRatio = window.devicePixelRatio || 1;
+
+      // Calculate navigation bar height
+      let navBarHeight = 0;
+
+      // Method 1: Direct comparison (most reliable)
+      if (windowHeight < screenHeight) {
+        navBarHeight = screenHeight - windowHeight;
+      }
+
+      // Method 2: Check for gesture navigation indicators
+      if (navBarHeight === 0) {
+        // Look for common gesture navigation patterns
+        const isTallDevice = screenHeight > 2000;
+        const isModernDevice = screenHeight > 1800;
+        const hasHighDensity = devicePixelRatio >= 2.5;
+
+        if (isTallDevice && hasHighDensity) {
+          // Modern gesture-based device
+          navBarHeight = 12; // Typical gesture bar height
+        } else if (isModernDevice) {
+          // Modern device with traditional navigation
+          navBarHeight = 48; // Traditional navigation bar height
+        }
+      }
+
+      // Method 3: Check visual viewport (more accurate for WebView)
+      if (navBarHeight === 0) {
+        if (window.visualViewport) {
+          const visualHeight = window.visualViewport.height;
+
+          if (visualHeight < windowHeight) {
+            navBarHeight = windowHeight - visualHeight;
+          }
+        }
+      }
+
+      // Method 4: Device-specific estimation based on screen dimensions
+      if (navBarHeight === 0) {
+        // Common Android navigation bar heights in pixels
+        const commonNavBarHeights = {
+          "1080x2400": 48, // Common 1080p devices
+          "1440x3200": 64, // QHD devices
+          "720x1600": 32, // HD devices
+        };
+
+        const resolution = `${screenWidth}x${screenHeight}`;
+        const estimatedHeight = commonNavBarHeights[resolution];
+
+        if (estimatedHeight) {
+          navBarHeight = estimatedHeight;
+        } else {
+          // Fallback: estimate based on screen height
+          navBarHeight = screenHeight > 2000 ? 48 : 32;
+        }
+      }
+
+      return navBarHeight;
+    };
+
+    // Get navigation bar height
+    bottom = detectNavigationBar();
+
+    // If we still don't have a top value, estimate it
+    if (top === 0) {
+      const screenHeight = window.screen.height;
+      // Common status bar heights: 24dp (48px) for most devices, 32dp (64px) for some
+      top = screenHeight > 1920 ? 64 : 48;
+    }
+
+    // Left/right safe areas are rare on Android
+    left = 0;
+    right = 0;
+
+    // Create CSS custom properties
+    const style = document.createElement("style");
+    style.textContent = `
+      :root {
+        --safe-area-inset-top: ${top}px;
+        --safe-area-inset-bottom: ${bottom}px;
+        --safe-area-inset-left: ${left}px;
+        --safe-area-inset-right: ${right}px;
+      }
+    `;
+
+    // Inject the style into the document head
+    document.head.appendChild(style);
+
+    // Also set CSS environment variables if supported
+    if (CSS.supports("env(safe-area-inset-top)")) {
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-top",
+        `${top}px`,
+      );
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-bottom",
+        `${bottom}px`,
+      );
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-left",
+        `${left}px`,
+      );
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-right",
+        `${right}px`,
+      );
+    }
+  } catch (error) {
+    // Error injecting safe area insets, will use fallback values
+  }
+};
+
+// Initialize when DOM is ready
+const initializeSafeArea = () => {
+  // Check if we should run this script at all
+  if (!isAndroidWebView()) {
+    return;
+  }
+
+  // Add a small delay to ensure WebView is fully initialized
+  setTimeout(() => {
+    injectSafeAreaInsets();
+  }, 100);
+};
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initializeSafeArea);
+} else {
+  initializeSafeArea();
+}
+
+// Re-inject on orientation change (only on Android)
+window.addEventListener("orientationchange", () => {
+  if (isAndroidWebView()) {
+    setTimeout(() => injectSafeAreaInsets(), 100);
+  }
+});
+
+// Re-inject on resize (only on Android)
+window.addEventListener("resize", () => {
+  if (isAndroidWebView()) {
+    setTimeout(() => injectSafeAreaInsets(), 100);
+  }
+});
+
+// Export for use in other modules
+export { injectSafeAreaInsets, isAndroidWebView };
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -55,9 +55,11 @@

    <!-- Registration notice -->
    <RegistrationNotice
-      :is-registered="isRegistered"
-      :show="showRegistrationNotice"
-      @share-info="onShareInfo"
+      v-if="!isRegistered"
+      :passkeys-enabled="PASSKEYS_ENABLED"
+      :given-name="givenName"
+      message="Before you can publicly announce a new project or time commitment,
+        a friend needs to register you."
    />

    <!-- Notifications -->
@@ -174,11 +176,12 @@
        :aria-busy="loadingProfile || savingProfile"
      ></textarea>

-      <div class="flex items-center mb-4" @click="toggleUserProfileLocation">
+      <div class="flex items-center mb-4">
        <input
          v-model="includeUserProfileLocation"
          type="checkbox"
          class="mr-2"
+          @change="onLocationCheckboxChange"
        />
        <label for="includeUserProfileLocation">Include Location</label>
      </div>
@@ -194,6 +197,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 +755,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";
@@ -778,6 +783,7 @@ import {
  DEFAULT_PUSH_SERVER,
  IMAGE_TYPE_PROFILE,
  NotificationIface,
+  PASSKEYS_ENABLED,
 } from "../constants/app";
 import { Contact } from "../db/tables/contacts";
 import {
@@ -848,6 +854,7 @@ export default class AccountViewView extends Vue {
  readonly DEFAULT_PUSH_SERVER: string = DEFAULT_PUSH_SERVER;
  readonly DEFAULT_IMAGE_API_SERVER: string = DEFAULT_IMAGE_API_SERVER;
  readonly DEFAULT_PARTNER_API_SERVER: string = DEFAULT_PARTNER_API_SERVER;
+  readonly PASSKEYS_ENABLED: boolean = PASSKEYS_ENABLED;

  // Identity and settings properties
  activeDid: string = "";
@@ -902,6 +909,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 +921,23 @@ 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) {
+      // Type-safe way to handle Leaflet icon prototype
+      const iconDefault = L.Icon.Default.prototype as Record<string, unknown>;
+      if ("_getIconUrl" in iconDefault) {
+        delete iconDefault._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 +964,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 +1549,51 @@ 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 +1605,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 +1625,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 +1633,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 +1679,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 +1687,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 +1713,46 @@ 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
@@ -1658,20 +1793,6 @@ export default class AccountViewView extends Vue {
    this.doCopyTwoSecRedo(did, () => (this.showDidCopy = !this.showDidCopy));
  }

-  get showRegistrationNotice(): boolean {
-    // Show the notice if not registered and any other conditions you want
-    return !this.isRegistered;
-  }
-
-  onShareInfo() {
-    // Navigate to QR code sharing page - mobile uses full scan, web uses basic
-    if (Capacitor.isNativePlatform()) {
-      this.$router.push({ name: "contact-qr-scan-full" });
-    } else {
-      this.$router.push({ name: "contact-qr" });
-    }
-  }
-
  onRecheckLimits() {
    this.checkLimits();
  }
--- a/src/views/ContactQRScanFullView.vue
+++ b/src/views/ContactQRScanFullView.vue
@@ -220,21 +220,21 @@ export default class ContactQRScanFull extends Vue {
   * Computed property for QR code container CSS classes
   */
  get qrContainerClasses(): string {
-    return "block w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto mt-4";
+    return "block w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto mt-4";
  }

  /**
   * Computed property for camera frame CSS classes
   */
  get cameraFrameClasses(): string {
-    return "relative w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto border border-dashed border-white mt-8 aspect-square";
+    return "relative w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto border border-dashed border-white mt-8 aspect-square";
  }

  /**
   * Computed property for main content container CSS classes
   */
  get mainContentClasses(): string {
-    return "p-6 bg-white w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto";
+    return "p-6 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
  }

  /**
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -140,7 +140,7 @@ import { AxiosError } from "axios";
 import { Buffer } from "buffer/";
 import QRCodeVue3 from "qr-code-generator-vue3";
 import { Component, Vue } from "vue-facing-decorator";
-import { useClipboard } from "@vueuse/core";
+
 import { QrcodeStream } from "vue-qrcode-reader";

 import QuickNav from "../components/QuickNav.vue";
@@ -183,8 +183,6 @@ import {
  NOTIFY_QR_PROCESSING_ERROR,
  createQRContactAddedMessage,
  createQRRegistrationSuccessMessage,
-  QR_TIMEOUT_SHORT,
-  QR_TIMEOUT_MEDIUM,
  QR_TIMEOUT_STANDARD,
  QR_TIMEOUT_LONG,
 } from "@/constants/notifications";
@@ -259,11 +257,11 @@ export default class ContactQRScanShow extends Vue {
  }

  get qrCodeContainerClasses(): string {
-    return "block w-[90vw] max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto my-4";
+    return "block w-[90vw] max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto my-4";
  }

  get scannerContainerClasses(): string {
-    return "relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto";
+    return "relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
  }

  get statusMessageClasses(): string {
@@ -544,11 +542,7 @@ export default class ContactQRScanShow extends Vue {
      did: contact.did,
      name: contact.name,
    });
-    this.notify.toast(
-      "Submitted",
-      NOTIFY_QR_REGISTRATION_SUBMITTED.message,
-      QR_TIMEOUT_SHORT,
-    );
+    this.notify.toast("Submitted", NOTIFY_QR_REGISTRATION_SUBMITTED.message);

    try {
      const regResult = await register(
@@ -624,18 +618,15 @@ export default class ContactQRScanShow extends Vue {
      );

      // Copy the URL to clipboard
-      useClipboard()
-        .copy(jwtUrl)
-        .then(() => {
-          this.notify.toast(
-            "Copied",
-            NOTIFY_QR_URL_COPIED.message,
-            QR_TIMEOUT_MEDIUM,
-          );
-        });
+      const { copyToClipboard } = await import("../services/ClipboardService");
+      await copyToClipboard(jwtUrl);
+      this.notify.toast(
+        NOTIFY_QR_URL_COPIED.title,
+        NOTIFY_QR_URL_COPIED.message,
+      );
    } catch (error) {
-      logger.error("Failed to generate contact URL:", error);
-      this.notify.error("Failed to generate contact URL. Please try again.");
+      this.$logAndConsole(`Error copying URL to clipboard: ${error}`, true);
+      this.notify.error("Failed to copy URL to clipboard.");
    }
  }

@@ -643,13 +634,16 @@ export default class ContactQRScanShow extends Vue {
    this.notify.info(NOTIFY_QR_CODE_HELP.message, QR_TIMEOUT_LONG);
  }

-  onCopyDidToClipboard() {
+  async onCopyDidToClipboard() {
    //this.onScanDetect([{ rawValue: this.qrValue }]); // good for testing
-    useClipboard()
-      .copy(this.activeDid)
-      .then(() => {
-        this.notify.info(NOTIFY_QR_DID_COPIED.message, QR_TIMEOUT_LONG);
-      });
+    try {
+      const { copyToClipboard } = await import("../services/ClipboardService");
+      await copyToClipboard(this.activeDid);
+      this.notify.info(NOTIFY_QR_DID_COPIED.message, QR_TIMEOUT_LONG);
+    } catch (error) {
+      this.$logAndConsole(`Error copying DID to clipboard: ${error}`, true);
+      this.notify.error("Failed to copy DID to clipboard.");
+    }
  }

  openUserNameDialog() {
@@ -714,8 +708,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);

@@ -737,7 +739,6 @@ export default class ContactQRScanShow extends Vue {
      ) {
        setTimeout(() => {
          this.notify.confirm(
-            "Register",
            "Do you want to register them?",
            {
              onCancel: async (stopAsking?: boolean) => {
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -130,10 +130,9 @@ import { JWTPayload } from "did-jwt";
 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";

 import QuickNav from "../components/QuickNav.vue";
+import { copyToClipboard } from "../services/ClipboardService";
 import EntityIcon from "../components/EntityIcon.vue";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
@@ -165,13 +164,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 +201,7 @@ import {
  NOTIFY_REGISTRATION_ERROR_FALLBACK,
  NOTIFY_REGISTRATION_ERROR_GENERIC,
  NOTIFY_VISIBILITY_ERROR_FALLBACK,
+  NOTIFY_EXPORT_DATA_PROMPT,
  getRegisterPersonSuccessMessage,
  getVisibilitySuccessMessage,
  getGivesRetrievalErrorMessage,
@@ -376,7 +381,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 +396,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 +409,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 +796,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 +896,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);
@@ -1175,12 +1191,14 @@ export default class ContactsView extends Vue {
    });
    // Use production URL for sharing to avoid localhost issues in development
    const contactsJwtUrl = `${APP_SERVER}/deep-link/contact-import/${contactsJwt}`;
-    useClipboard()
-      .copy(contactsJwtUrl)
-      .then(() => {
-        // Use notification helper
-        this.notify.copied(NOTIFY_CONTACT_LINK_COPIED.message);
-      });
+    try {
+      await copyToClipboard(contactsJwtUrl);
+      // Use notification helper
+      this.notify.copied(NOTIFY_CONTACT_LINK_COPIED.message);
+    } catch (error) {
+      this.$logAndConsole(`Error copying to clipboard: ${error}`, true);
+      this.notify.error("Failed to copy to clipboard. Please try again.");
+    }
  }

  private showCopySelectionsInfo() {
@@ -1246,19 +1264,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
@@ -491,6 +491,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);
    });
@@ -830,26 +832,3 @@ export default class DIDView extends Vue {
  }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  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: 500px;
-}
-</style>
--- 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/DeepLinkErrorView.vue
+++ b/src/views/DeepLinkErrorView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="deep-link-error">
-    <div class="safe-area-spacer"></div>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <h1>Invalid Deep Link</h1>
    <div class="error-details">
      <div class="error-message">
@@ -39,7 +39,7 @@
        </li>
      </ul>
    </div>
-  </div>
+  </section>
 </template>

 <script setup lang="ts">
@@ -47,7 +47,7 @@ import { computed, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {
  VALID_DEEP_LINK_ROUTES,
-  deepLinkSchemas,
+  deepLinkPathSchemas,
 } from "../interfaces/deepLinks";
 import { logConsoleAndDb } from "../db/databaseUtil";
 import { logger } from "../utils/logger";
@@ -56,7 +56,7 @@ const route = useRoute();
 const router = useRouter();
 // an object with the route as the key and the first param name as the value
 const deepLinkSchemaKeys = Object.fromEntries(
-  Object.entries(deepLinkSchemas).map(([route, schema]) => {
+  Object.entries(deepLinkPathSchemas).map(([route, schema]) => {
    const param = Object.keys(schema.shape)[0];
    return [route, param];
  }),
@@ -114,18 +114,6 @@ onMounted(() => {
 </script>

 <style scoped>
-.deep-link-error {
-  padding-top: 60px;
-  padding-left: 20px;
-  padding-right: 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.safe-area-spacer {
-  height: env(safe-area-inset-top);
-}
-
 h1 {
  color: #ff4444;
  margin-bottom: 24px;
--- a/src/views/DeepLinkRedirectView.vue
+++ b/src/views/DeepLinkRedirectView.vue
@@ -1,95 +1,87 @@
 <template>
  <!-- CONTENT -->
-  <section id="Content" class="relative w-[100vw] h-[100vh]">
-    <div
-      class="p-6 bg-white w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto"
-    >
-      <div class="mb-4">
-        <h1 class="text-xl text-center font-semibold relative mb-4">
-          Redirecting to Time Safari
-        </h1>
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <div class="mb-4">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
+        Redirecting to Time Safari
+      </h1>

-        <div v-if="destinationUrl" class="space-y-4">
-          <!-- Platform-specific messaging -->
-          <div class="text-center text-gray-600 mb-4">
-            <p v-if="isMobile">
-              {{
-                isIOS
-                  ? "Opening Time Safari app on your iPhone..."
-                  : "Opening Time Safari app on your Android device..."
-              }}
-            </p>
-            <p v-else>Opening Time Safari app...</p>
-            <p class="text-sm mt-2">
-              <span v-if="isMobile"
-                >If the app doesn't open automatically, use one of these
-                options:</span
-              >
-              <span v-else>Choose how you'd like to open this link:</span>
-            </p>
-          </div>
-
-          <!-- Deep Link Button -->
-          <div class="text-center">
-            <a
-              :href="deepLinkUrl || '#'"
-              class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
-              @click="handleDeepLinkClick"
+      <div v-if="destinationUrl" class="space-y-4">
+        <!-- Platform-specific messaging -->
+        <div class="text-center text-gray-600 mb-4">
+          <p v-if="isMobile">
+            {{
+              isIOS
+                ? "Opening Time Safari app on your iPhone..."
+                : "Opening Time Safari app on your Android device..."
+            }}
+          </p>
+          <p v-else>Opening Time Safari app...</p>
+          <p class="text-sm mt-2">
+            <span v-if="isMobile"
+              >If the app doesn't open automatically, use one of these
+              options:</span
            >
-              <span v-if="isMobile">Open in Time Safari App</span>
-              <span v-else>Try Opening in Time Safari App</span>
-            </a>
-          </div>
+            <span v-else>Choose how you'd like to open this link:</span>
+          </p>
+        </div>

-          <!-- Web Fallback Link -->
-          <div class="text-center">
-            <a
-              :href="webUrl || '#'"
-              target="_blank"
-              class="inline-block bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors"
-              @click="handleWebFallbackClick"
-            >
-              <span v-if="isMobile">Open in Web Browser Instead</span>
-              <span v-else>Open in Web Browser</span>
-            </a>
-          </div>
-
-          <!-- Manual Instructions -->
-          <div class="text-center text-sm text-gray-500 mt-4">
-            <p v-if="isMobile">
-              Or manually open:
-              <code class="bg-gray-100 px-2 py-1 rounded">{{
-                deepLinkUrl
-              }}</code>
-            </p>
-            <p v-else>
-              If you have the Time Safari app installed, you can also copy this
-              link:
-              <code class="bg-gray-100 px-2 py-1 rounded">{{
-                deepLinkUrl
-              }}</code>
-            </p>
-          </div>
-
-          <!-- Platform info for debugging -->
-          <div
-            v-if="isDevelopment"
-            class="text-center text-xs text-gray-400 mt-4"
+        <!-- Deep Link Button -->
+        <div class="text-center">
+          <a
+            :href="deepLinkUrl || '#'"
+            class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
+            @click="handleDeepLinkClick"
          >
-            <p>
-              Platform: {{ isMobile ? (isIOS ? "iOS" : "Android") : "Desktop" }}
-            </p>
-            <p>User Agent: {{ userAgent.substring(0, 50) }}...</p>
-          </div>
+            <span v-if="isMobile">Open in Time Safari App</span>
+            <span v-else>Try Opening in Time Safari App</span>
+          </a>
        </div>

-        <div v-else-if="pageError" class="text-center text-red-500 mb-4">
-          {{ pageError }}
+        <!-- Web Fallback Link -->
+        <div class="text-center">
+          <a
+            :href="webUrl || '#'"
+            target="_blank"
+            class="inline-block bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors"
+            @click="handleWebFallbackClick"
+          >
+            <span v-if="isMobile">Open in Web Browser Instead</span>
+            <span v-else>Open in Web Browser</span>
+          </a>
        </div>

-        <div v-else class="text-center text-gray-600">
-          <p>Processing redirect...</p>
+        <!-- Manual Instructions -->
+        <div class="text-center text-sm text-gray-500 mt-4">
+          <p v-if="isMobile">
+            Or manually open:
+            <code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
+          </p>
+          <p v-else>
+            If you have the Time Safari app installed, you can also copy this
+            link:
+            <code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
+          </p>
        </div>
+
+        <!-- Platform info for debugging -->
+        <div
+          v-if="isDevelopment"
+          class="text-center text-xs text-gray-400 mt-4"
+        >
+          <p>
+            Platform: {{ isMobile ? (isIOS ? "iOS" : "Android") : "Desktop" }}
+          </p>
+          <p>User Agent: {{ userAgent.substring(0, 50) }}...</p>
+        </div>
+      </div>
+
+      <div v-else-if="pageError" class="text-center text-red-500 mb-4">
+        {{ pageError }}
+      </div>
+
+      <div v-else class="text-center text-gray-600">
+        <p>Processing redirect...</p>
      </div>
    </div>
  </section>
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -466,7 +466,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();
@@ -526,11 +528,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
@@ -18,6 +18,7 @@
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Help
+        <span class="text-xs text-gray-500">{{ package.version }}</span>
      </h1>
    </div>

@@ -565,22 +566,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 +593,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";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";

 /**
@@ -644,7 +646,7 @@ export default class HelpView extends Vue {
  showVerifiable = false;

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

  /**
   * Get the unnamed entity name constant
@@ -719,11 +721,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/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -86,33 +86,14 @@ Raymer * @version 1.0.0 */
      Identity creation is now handled by router navigation guard.
      -->
      <div class="mb-4">
-        <div
+        <RegistrationNotice
          v-if="!isUserRegistered"
-          id="noticeSomeoneMustRegisterYou"
-          class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-        >
-          To share, someone must register you.
-          <div class="block text-center">
-            <button
-              class="text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-              @click="showNameThenIdDialog()"
-            >
-              Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
-              info
-            </button>
-          </div>
-          <UserNameDialog ref="userNameDialog" />
-          <div class="flex justify-end w-full">
-            <router-link
-              :to="{ name: 'start' }"
-              class="block text-right text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-            >
-              See advanced options
-            </router-link>
-          </div>
-        </div>
+          :passkeys-enabled="PASSKEYS_ENABLED"
+          :given-name="givenName"
+          message="To share, someone must register you."
+        />

-        <div v-else id="sectionRecordSomethingGiven">
+        <div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
          <!-- Record Quick-Action -->
          <div class="mb-6">
            <div class="flex gap-2 items-center mb-2">
@@ -252,8 +233,6 @@ Raymer * @version 1.0.0 */
    </div>
  </section>

-  <ChoiceButtonDialog ref="choiceButtonDialog" />
-
  <ImageViewer v-model:is-open="isImageViewerOpen" :image-url="selectedImage" />
 </template>

@@ -261,7 +240,6 @@ Raymer * @version 1.0.0 */
 import { UAParser } from "ua-parser-js";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
-import { Capacitor } from "@capacitor/core";

 //import App from "../App.vue";
 import EntityIcon from "../components/EntityIcon.vue";
@@ -272,10 +250,9 @@ import InfiniteScroll from "../components/InfiniteScroll.vue";
 import OnboardingDialog from "../components/OnboardingDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
-import UserNameDialog from "../components/UserNameDialog.vue";
-import ChoiceButtonDialog from "../components/ChoiceButtonDialog.vue";
 import ImageViewer from "../components/ImageViewer.vue";
 import ActivityListItem from "../components/ActivityListItem.vue";
+import RegistrationNotice from "../components/RegistrationNotice.vue";
 import {
  AppString,
  NotificationIface,
@@ -384,12 +361,11 @@ interface FeedError {
    GiftedPrompts,
    InfiniteScroll,
    OnboardingDialog,
-    ChoiceButtonDialog,
    QuickNav,
    TopMessage,
-    UserNameDialog,
    ImageViewer,
    ActivityListItem,
+    RegistrationNotice,
  },
  mixins: [PlatformServiceMixin],
 })
@@ -477,7 +453,7 @@ export default class HomeView extends Vue {
      // Re-initialize identity with new settings (loads settings internally)
      await this.initializeIdentity();
    } else {
-      logger.info(
+      logger.debug(
        "[HomeView Settings Trace] 📍 DID unchanged, skipping re-initialization",
      );
    }
@@ -757,17 +733,34 @@ export default class HomeView extends Vue {
   * Called by FeedFilters component when filters change
   */
  async reloadFeedOnChange() {
-    const settings = await this.$accountSettings(this.activeDid, {
-      filterFeedByVisible: false,
-      filterFeedByNearby: false,
+    logger.debug("[HomeView] 🔄 reloadFeedOnChange() called - refreshing feed");
+
+    // Get current settings without overriding with defaults
+    const settings = await this.$accountSettings(this.activeDid);
+
+    logger.debug("[HomeView] 📊 Current filter settings:", {
+      filterFeedByVisible: settings.filterFeedByVisible,
+      filterFeedByNearby: settings.filterFeedByNearby,
+      searchBoxes: settings.searchBoxes?.length || 0,
    });
+
    this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
    this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
    this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);

+    logger.debug("[HomeView] 🎯 Updated filter states:", {
+      isFeedFilteredByVisible: this.isFeedFilteredByVisible,
+      isFeedFilteredByNearby: this.isFeedFilteredByNearby,
+      isAnyFeedFilterOn: this.isAnyFeedFilterOn,
+    });
+
    this.feedData = [];
    this.feedPreviousOldestId = undefined;
+
+    logger.debug("[HomeView] 🧹 Cleared feed data, calling updateAllFeed()");
    await this.updateAllFeed();
+
+    logger.debug("[HomeView] ✅ Feed refresh completed");
  }

  /**
@@ -846,6 +839,14 @@ export default class HomeView extends Vue {
   * - this.feedLastViewedClaimId (via updateFeedLastViewedId)
   */
  async updateAllFeed() {
+    logger.debug("[HomeView] 🚀 updateAllFeed() called", {
+      isFeedLoading: this.isFeedLoading,
+      currentFeedDataLength: this.feedData.length,
+      isAnyFeedFilterOn: this.isAnyFeedFilterOn,
+      isFeedFilteredByVisible: this.isFeedFilteredByVisible,
+      isFeedFilteredByNearby: this.isFeedFilteredByNearby,
+    });
+
    this.isFeedLoading = true;
    let endOfResults = true;

@@ -854,21 +855,37 @@ export default class HomeView extends Vue {
        this.apiServer,
        this.feedPreviousOldestId,
      );
+
+      logger.debug("[HomeView] 📡 Retrieved gives from API", {
+        resultsCount: results.data.length,
+        endOfResults,
+      });
+
      if (results.data.length > 0) {
        endOfResults = false;
        // gather any contacts that user has blocked from view
        await this.processFeedResults(results.data);
        await this.updateFeedLastViewedId(results.data);
+
+        logger.debug("[HomeView] 📝 Processed feed results", {
+          processedCount: this.feedData.length,
+        });
      }
    } catch (e) {
+      logger.error("[HomeView] ❌ Error in updateAllFeed:", e);
      this.handleFeedError(e);
    }

    if (this.feedData.length === 0 && !endOfResults) {
+      logger.debug("[HomeView] 🔄 No results after filtering, retrying...");
      await this.updateAllFeed();
    }

    this.isFeedLoading = false;
+    logger.debug("[HomeView] ✅ updateAllFeed() completed", {
+      finalFeedDataLength: this.feedData.length,
+      isFeedLoading: this.isFeedLoading,
+    });
  }

  /**
@@ -893,12 +910,35 @@ export default class HomeView extends Vue {
   * @param records Array of feed records to process
   */
  private async processFeedResults(records: GiveSummaryRecord[]) {
+    logger.debug("[HomeView] 📝 Processing feed results:", {
+      inputRecords: records.length,
+      currentFilters: {
+        isAnyFeedFilterOn: this.isAnyFeedFilterOn,
+        isFeedFilteredByVisible: this.isFeedFilteredByVisible,
+        isFeedFilteredByNearby: this.isFeedFilteredByNearby,
+      },
+    });
+
+    let processedCount = 0;
+    let filteredCount = 0;
+
    for (const record of records) {
      const processedRecord = await this.processRecord(record);
      if (processedRecord) {
        this.feedData.push(processedRecord);
+        processedCount++;
+      } else {
+        filteredCount++;
      }
    }
+
+    logger.debug("[HomeView] 📊 Feed processing results:", {
+      processed: processedCount,
+      filtered: filteredCount,
+      total: records.length,
+      finalFeedLength: this.feedData.length,
+    });
+
    this.feedPreviousOldestId = records[records.length - 1].jwtId;
  }

@@ -932,7 +972,7 @@ export default class HomeView extends Vue {
   * - this.feedData (via createFeedRecord)
   *
   * @param record The record to process
-   * @returns Processed record with contact info if it passes filters, null otherwise
+   * @returns Processed record if it passes filters, null otherwise
   */
  private async processRecord(
    record: GiveSummaryRecord,
@@ -942,13 +982,28 @@ export default class HomeView extends Vue {
    const recipientDid = this.extractRecipientDid(claim);

    const fulfillsPlan = await this.getFulfillsPlan(record);
+
+    // Log record details for debugging
+    logger.debug("[HomeView] 🔍 Processing record:", {
+      recordId: record.jwtId,
+      hasFulfillsPlan: !!fulfillsPlan,
+      fulfillsPlanHandleId: record.fulfillsPlanHandleId,
+      filters: {
+        isAnyFeedFilterOn: this.isAnyFeedFilterOn,
+        isFeedFilteredByVisible: this.isFeedFilteredByNearby,
+        isFeedFilteredByNearby: this.isFeedFilteredByNearby,
+      },
+    });
+
    if (!this.shouldIncludeRecord(record, fulfillsPlan)) {
+      logger.debug("[HomeView] ❌ Record filtered out:", record.jwtId);
      return null;
    }

    const provider = this.extractProvider(claim);
    const providedByPlan = await this.getProvidedByPlan(provider);

+    logger.debug("[HomeView] ✅ Record included:", record.jwtId);
    return this.createFeedRecord(
      record,
      claim,
@@ -1097,6 +1152,22 @@ export default class HomeView extends Vue {
      }
    }

+    // Add debug logging for nearby filter
+    if (this.isFeedFilteredByNearby && record.fulfillsPlanHandleId) {
+      logger.debug("[HomeView] 🔍 Nearby filter check:", {
+        recordId: record.jwtId,
+        hasFulfillsPlan: !!fulfillsPlan,
+        hasLocation: !!(fulfillsPlan?.locLat && fulfillsPlan?.locLon),
+        location: fulfillsPlan
+          ? { lat: fulfillsPlan.locLat, lon: fulfillsPlan.locLon }
+          : null,
+        inSearchBox: fulfillsPlan
+          ? this.latLongInAnySearchBox(fulfillsPlan.locLat, fulfillsPlan.locLon)
+          : null,
+        finalResult: anyMatch,
+      });
+    }
+
    return anyMatch;
  }

@@ -1543,7 +1614,10 @@ export default class HomeView extends Vue {
   * Called by template click handler
   */
  openFeedFilters() {
-    (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
+    (this.$refs.feedFilters as FeedFilters).open(
+      this.reloadFeedOnChange,
+      this.activeDid,
+    );
  }

  /**
@@ -1558,67 +1632,6 @@ export default class HomeView extends Vue {
    return known ? "text-slate-500" : "text-slate-100";
  }

-  /**
-   * Shows name input dialog if needed
-   *
-   * @public
-   * @callGraph
-   * Called by: Template
-   * Calls:
-   * - UserNameDialog.open()
-   * - promptForShareMethod()
-   *
-   * @chain
-   * Template -> showNameThenIdDialog() -> promptForShareMethod()
-   *
-   * @requires
-   * - this.$refs.userNameDialog
-   * - this.givenName
-   */
-  showNameThenIdDialog() {
-    if (!this.givenName) {
-      (this.$refs.userNameDialog as UserNameDialog).open(() => {
-        this.promptForShareMethod();
-      });
-    } else {
-      this.promptForShareMethod();
-    }
-  }
-
-  /**
-   * Shows dialog for sharing method selection
-   *
-   * @internal
-   * @callGraph
-   * Called by: showNameThenIdDialog()
-   * Calls: ChoiceButtonDialog.open()
-   *
-   * @chain
-   * Template -> showNameThenIdDialog() -> promptForShareMethod()
-   *
-   * @requires
-   * - this.$refs.choiceButtonDialog
-   * - this.$router
-   */
-  promptForShareMethod() {
-    (this.$refs.choiceButtonDialog as ChoiceButtonDialog).open({
-      title: "How can you share your info?",
-      text: "",
-      option1Text: "We are in a meeting together",
-      option2Text: "We are nearby with cameras",
-      option3Text: "We will share some other way",
-      onOption1: () => {
-        this.$router.push({ name: "onboard-meeting-list" });
-      },
-      onOption2: () => {
-        this.handleQRCodeClick();
-      },
-      onOption3: () => {
-        this.$router.push({ name: "share-my-contact-info" });
-      },
-    });
-  }
-
  /**
   * Opens image viewer dialog
   *
--- 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/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -113,7 +113,7 @@ export default class OnboardMeetingMembersView extends Vue {
    try {
      // Identity creation should be handled by router guard, but keep as fallback for meeting setup
      if (!this.activeDid) {
-        logger.info(
+        this.$logAndConsole(
          "[OnboardMeetingMembersView] No active DID found, creating identity as fallback for meeting setup",
        );
        this.activeDid = await generateSaveAndActivateIdentity();
--- 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
@@ -216,15 +216,12 @@
          <font-awesome icon="plus" :class="plusIconClasses" />
          button. You'll never know until you try.
        </div>
-        <div v-else>
-          <button
-            :class="onboardingButtonClasses"
-            @click="showNameThenIdDialog()"
-          >
-            Get someone to onboard you.
-          </button>
-          <UserNameDialog ref="userNameDialog" />
-        </div>
+        <RegistrationNotice
+          v-else
+          :passkeys-enabled="PASSKEYS_ENABLED"
+          :given-name="givenName"
+          message="To announce a project, get someone to onboard you."
+        />
      </div>
      <ul id="listProjects" class="border-t border-slate-300">
        <li
@@ -264,16 +261,16 @@
 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 { NotificationIface, PASSKEYS_ENABLED } from "../constants/app";
 import EntityIcon from "../components/EntityIcon.vue";
 import InfiniteScroll from "../components/InfiniteScroll.vue";
 import QuickNav from "../components/QuickNav.vue";
 import OnboardingDialog from "../components/OnboardingDialog.vue";
 import ProjectIcon from "../components/ProjectIcon.vue";
 import TopMessage from "../components/TopMessage.vue";
-import UserNameDialog from "../components/UserNameDialog.vue";
+import RegistrationNotice from "../components/RegistrationNotice.vue";
 import { Contact } from "../db/tables/contacts";
 import { didInfo, getHeaders, getPlanFromCache } from "../libs/endorserServer";
 import { OfferSummaryRecord, PlanData } from "../interfaces/records";
@@ -281,13 +278,13 @@ import { OnboardPage, iconForUnitCode } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+
 import {
  NOTIFY_NO_ACCOUNT_ERROR,
  NOTIFY_PROJECT_LOAD_ERROR,
  NOTIFY_PROJECT_INIT_ERROR,
  NOTIFY_OFFERS_LOAD_ERROR,
  NOTIFY_OFFERS_FETCH_ERROR,
-  NOTIFY_CAMERA_SHARE_METHOD,
 } from "@/constants/notifications";
 import { UNNAMED_PROJECT } from "@/constants/entities";

@@ -318,7 +315,7 @@ import { UNNAMED_PROJECT } from "@/constants/entities";
    OnboardingDialog,
    ProjectIcon,
    TopMessage,
-    UserNameDialog,
+    RegistrationNotice,
  },
  mixins: [PlatformServiceMixin],
 })
@@ -343,6 +340,7 @@ export default class ProjectsView extends Vue {
  givenName = "";
  isLoading = false;
  isRegistered = false;
+  readonly PASSKEYS_ENABLED: boolean = PASSKEYS_ENABLED;

  // Data collections
  offers: OfferSummaryRecord[] = [];
@@ -472,8 +470,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;
@@ -586,8 +586,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;
@@ -627,39 +629,6 @@ export default class ProjectsView extends Vue {
   * Ensures user has provided their name before proceeding with contact sharing.
   * Uses UserNameDialog component if name is not set.
   */
-  showNameThenIdDialog() {
-    if (!this.givenName) {
-      (this.$refs.userNameDialog as UserNameDialog).open(() => {
-        this.promptForShareMethod();
-      });
-    } else {
-      this.promptForShareMethod();
-    }
-  }
-
-  /**
-   * Prompts user to choose contact sharing method
-   *
-   * Presents modal dialog asking if users are nearby with cameras.
-   * Routes to appropriate sharing method based on user's choice:
-   * - QR code sharing for nearby users with cameras
-   * - Alternative sharing methods for remote users
-   */
-  promptForShareMethod() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "confirm",
-        title: NOTIFY_CAMERA_SHARE_METHOD.title,
-        text: NOTIFY_CAMERA_SHARE_METHOD.text,
-        onYes: () => this.handleQRCodeClick(),
-        onNo: () => this.$router.push({ name: "share-my-contact-info" }),
-        yesText: NOTIFY_CAMERA_SHARE_METHOD.yesText,
-        noText: NOTIFY_CAMERA_SHARE_METHOD.noText,
-      },
-      TIMEOUTS.MODAL,
-    );
-  }

  /**
   * Computed properties for template logic streamlining
@@ -725,14 +694,6 @@ export default class ProjectsView extends Vue {
    return "bg-green-600 text-white px-1.5 py-1 rounded-full";
  }

-  /**
-   * CSS class names for onboarding button
-   * @returns String with CSS classes for the onboarding button
-   */
-  get onboardingButtonClasses() {
-    return "text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md";
-  }
-
  /**
   * CSS class names for project tab styling
   * @returns Object with CSS classes based on current tab selection
@@ -757,21 +718,6 @@ export default class ProjectsView extends Vue {
   * Utility methods
   */

-  /**
-   * Handles QR code sharing functionality with platform detection
-   *
-   * Routes to appropriate QR code interface based on current platform:
-   * - Full QR scanner for native mobile platforms
-   * - 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" });
-    }
-  }
-
  /**
   * Legacy method compatibility
   * @deprecated Use computedOfferTabClassNames for backward compatibility
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -144,8 +144,8 @@ export default class ShareMyContactInfoView extends Vue {
   * Copy the contact message to clipboard
   */
  private async copyToClipboard(message: string): Promise<void> {
-    const { useClipboard } = await import("@vueuse/core");
-    await useClipboard().copy(message);
+    const { copyToClipboard } = await import("../services/ClipboardService");
+    await copyToClipboard(message);
  }

  /**