From 1ca688addabade87a9606a0dc232b76d72291488 Mon Sep 17 00:00:00 2001
From: ssmithx <atobitcoin@proton.me>
Date: Sun, 2 Aug 2026 16:20:23 +0000
Subject: [PATCH] fix(ui): display npub instead of raw hex for the logged-in
 identity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

App.vue fell back to the first 8 hex chars of the pubkey whenever
displayName wasn't set (the common case right after nostr sign-in,
before any kind-0 metadata has been fetched) — indistinguishable
between different identities at a glance, and not a form anyone
recognizes as "their" nostr identity. nostr-tools was already a
frontend dependency; just wasn't used for npub encoding anywhere.

Full hex pubkey is still available via a title tooltip on hover.
---
 frontend/src/App.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f790440..c35a2c4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { nip19 } from 'nostr-tools';
 import { useAuthStore } from './stores/auth';
 import { useRouter } from 'vue-router';
 
 const auth = useAuthStore();
 const router = useRouter();
 
+// Hex pubkeys look identical at a glance across identities — npub is the
+// standard nostr display form and is what users actually recognize.
+const identityLabel = computed(() => {
+  if (auth.displayName) return auth.displayName;
+  if (!auth.pubkey) return '';
+  try {
+    const npub = nip19.npubEncode(auth.pubkey);
+    return npub.slice(0, 12) + '…' + npub.slice(-6);
+  } catch {
+    return auth.pubkey.slice(0, 8) + '…';
+  }
+});
+
 async function logout() {
   await auth.logout();
   router.push('/login');
@@ -23,7 +38,7 @@ async function logout() {
           <RouterLink to="/earnings" class="hover:text-orange-400">Earnings</RouterLink>
           <RouterLink to="/settings" class="hover:text-orange-400">Settings</RouterLink>
           <button class="btn-secondary !px-3 !py-1" @click="logout">
-            <span class="max-w-[8rem] truncate font-mono text-xs">{{ auth.displayName || auth.pubkey.slice(0, 8) + '…' }}</span>
+            <span class="max-w-[8rem] truncate font-mono text-xs" :title="auth.pubkey ?? undefined">{{ identityLabel }}</span>
             Logout
           </button>
         </nav>