From 7f5a64dceb6ccf5e5c8f42a66332202ea1500f18 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 21 Aug 2025 17:22:33 +0800
Subject: [PATCH 1/4] UI: update HomeView onboard alert style

- Style-wise, make it consistent with similar alerts
- Introduce visual hierarchy to buttons
- Responsive button layout
---
 src/views/HomeView.vue | 43 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4aa3523d..935a47ff 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -86,30 +86,29 @@ Raymer * @version 1.0.0 */
       Identity creation is now handled by router navigation guard.
       -->
       <div class="mb-4">
-        <div
-          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 v-if="!isUserRegistered" class="my-4">
+          <div
+            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"
+          >
+            <p class="mb-4">To share, someone must register you.</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 {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
+                info
+              </button>
+              <router-link
+                :to="{ name: 'start' }"
+                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"
+              >
+                See advanced options
+              </router-link>
+            </div>
           </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>
 
         <div v-else id="sectionRecordSomethingGiven">
-- 
2.30.2


From 47a7b03ccad9c55842c48e15061f93c11fe48e0d Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 21 Aug 2025 19:06:55 +0800
Subject: [PATCH 2/4] Refactor: simplify RegistrationNotice component interface

- Centralize all registration notice logic within upgraded RegistrationNotice component
- Clean up unused methods and imports in HomeView and AccountViewView
- Customizable message to maintain original contextual wordings unique to each view

Component is now more focused and follows Vue.js best practices
for conditional rendering.
---
 src/components/RegistrationNotice.vue | 167 ++++++++++++++++++++++----
 src/views/AccountViewView.vue         |  23 +---
 src/views/HomeView.vue                | 112 ++---------------
 3 files changed, 161 insertions(+), 141 deletions(-)

diff --git a/src/components/RegistrationNotice.vue b/src/components/RegistrationNotice.vue
index c9faffea..f7b32d65 100644
--- a/src/components/RegistrationNotice.vue
+++ b/src/components/RegistrationNotice.vue
@@ -1,33 +1,156 @@
+/** * @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 Matthew Raymer * @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"
-  >
-    <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"
+  <div class="my-4">
+    <div
+      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"
     >
-      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" />
   </div>
 </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;
+
+  /**
+   * 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 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" });
+      },
+    });
+  }
+
+  /**
+   * 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" });
+    }
+  }
 
-  @Emit("share-info")
-  shareInfo() {}
+  /**
+   * 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>
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index eb99665c..aca100ff 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -55,9 +55,10 @@
 
     <!-- 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 -->
@@ -781,6 +782,7 @@ import {
   DEFAULT_PUSH_SERVER,
   IMAGE_TYPE_PROFILE,
   NotificationIface,
+  PASSKEYS_ENABLED,
 } from "../constants/app";
 import { Contact } from "../db/tables/contacts";
 import {
@@ -851,6 +853,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 = "";
@@ -1789,20 +1792,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();
   }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 935a47ff..fe6fbc28 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -86,32 +86,14 @@ Raymer * @version 1.0.0 */
       Identity creation is now handled by router navigation guard.
       -->
       <div class="mb-4">
-        <div v-if="!isUserRegistered" class="my-4">
-          <div
-            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"
-          >
-            <p class="mb-4">To share, someone must register you.</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 {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
-                info
-              </button>
-              <router-link
-                :to="{ name: 'start' }"
-                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"
-              >
-                See advanced options
-              </router-link>
-            </div>
-          </div>
-          <UserNameDialog ref="userNameDialog" />
-        </div>
-
-        <div v-else id="sectionRecordSomethingGiven">
+        <RegistrationNotice
+          v-if="!isUserRegistered"
+          :passkeys-enabled="PASSKEYS_ENABLED"
+          :given-name="givenName"
+          message="To share, someone must register you."
+        />
+
+        <div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
           <!-- Record Quick-Action -->
           <div class="mb-6">
             <div class="flex gap-2 items-center mb-2">
@@ -251,8 +233,6 @@ Raymer * @version 1.0.0 */
     </div>
   </section>
 
-  <ChoiceButtonDialog ref="choiceButtonDialog" />
-
   <ImageViewer v-model:is-open="isImageViewerOpen" :image-url="selectedImage" />
 </template>
 
@@ -260,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";
@@ -271,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,
@@ -382,12 +360,11 @@ interface FeedError {
     GiftedPrompts,
     InfiniteScroll,
     OnboardingDialog,
-    ChoiceButtonDialog,
     QuickNav,
     TopMessage,
-    UserNameDialog,
     ImageViewer,
     ActivityListItem,
+    RegistrationNotice,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -1643,67 +1620,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
    *
@@ -1716,14 +1632,6 @@ export default class HomeView extends Vue {
     this.isImageViewerOpen = true;
   }
 
-  private handleQRCodeClick() {
-    if (Capacitor.isNativePlatform()) {
-      this.$router.push({ name: "contact-qr-scan-full" });
-    } else {
-      this.$router.push({ name: "contact-qr" });
-    }
-  }
-
   openPersonDialog(
     giver?: GiverReceiverInputInfo | "Unnamed",
     prompt?: string,
-- 
2.30.2


From 2cb2f3ef3a56977405d1b48fa2722dd3fe81a49c Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 21 Aug 2025 19:07:15 +0800
Subject: [PATCH 3/4] Fix: update notice locator

---
 test-playwright/00-noid-tests.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test-playwright/00-noid-tests.spec.ts b/test-playwright/00-noid-tests.spec.ts
index 5218c330..e4b874af 100644
--- a/test-playwright/00-noid-tests.spec.ts
+++ b/test-playwright/00-noid-tests.spec.ts
@@ -37,7 +37,7 @@
  * Key Selectors:
  * - Activity list: 'ul#listLatestActivity li'
  * - Discover list: 'ul#listDiscoverResults li'
- * - Account notices: '#noticeBeforeShare', '#noticeBeforeAnnounce'
+ * - Account notices: '#noticeBeforeShare', '#noticeSomeoneMustRegisterYou'
  * - Identity details: '#sectionIdentityDetails code.truncate'
  * 
  * State Verification:
@@ -99,7 +99,7 @@ test('Check no-ID messaging in account', async ({ page }) => {
   await page.goto('./account');
 
   // Check 'a friend needs to register you' notice
-  await expect(page.locator('#noticeBeforeAnnounce')).toBeVisible();
+  await expect(page.locator('#noticeSomeoneMustRegisterYou')).toBeVisible();
 });
 
 test('Check ability to share contact', async ({ page }) => {
-- 
2.30.2


From 25e79249dd4794296c550fb43b4b8fef34862531 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 21 Aug 2025 19:29:31 +0800
Subject: [PATCH 4/4] Feat: integrate RegistrationNotice component into
 ProjectsView

- Replace custom onboarding button with RegistrationNotice component
- Maintain v-else conditional rendering for unregistered users
- Remove unused methods and imports related to custom registration flow
- Use contextual message "To announce a project, get someone to onboard you."
- Remove unnecessary wrapping div in RegistrationNotice

Completes registration UI standardization across all main views.
---
 src/components/RegistrationNotice.vue | 42 +++++++-------
 src/views/ProjectsView.vue            | 80 ++++-----------------------
 2 files changed, 31 insertions(+), 91 deletions(-)

diff --git a/src/components/RegistrationNotice.vue b/src/components/RegistrationNotice.vue
index f7b32d65..19a8aa5d 100644
--- a/src/components/RegistrationNotice.vue
+++ b/src/components/RegistrationNotice.vue
@@ -5,30 +5,28 @@ access advanced options. * * @author Matthew Raymer * @version 1.0.0 * @created
 2025-08-21T17:25:28-08:00 */
 
 <template>
-  <div class="my-4">
-    <div
-      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"
-    >
-      <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
+    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">{{ 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>
-    <UserNameDialog ref="userNameDialog" />
-    <ChoiceButtonDialog ref="choiceButtonDialog" />
   </div>
+  <UserNameDialog ref="userNameDialog" />
+  <ChoiceButtonDialog ref="choiceButtonDialog" />
 </template>
 
 <script lang="ts">
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index acc6e467..e8709210 100644
--- 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
@@ -266,14 +263,14 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 // 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,14 +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 { QRNavigationService } from "@/services/QRNavigationService";
+
 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";
 
 /**
@@ -318,7 +314,7 @@ import {
     OnboardingDialog,
     ProjectIcon,
     TopMessage,
-    UserNameDialog,
+    RegistrationNotice,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -336,6 +332,7 @@ export default class ProjectsView extends Vue {
   givenName = "";
   isLoading = false;
   isRegistered = false;
+  readonly PASSKEYS_ENABLED: boolean = PASSKEYS_ENABLED;
 
   // Data collections
   offers: OfferSummaryRecord[] = [];
@@ -624,39 +621,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
@@ -722,14 +686,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
@@ -754,20 +710,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() {
-    const qrNavigationService = QRNavigationService.getInstance();
-    const route = qrNavigationService.getQRScannerRoute();
-
-    this.$router.push(route);
-  }
-
   /**
    * Legacy method compatibility
    * @deprecated Use computedOfferTabClassNames for backward compatibility
-- 
2.30.2