From 333404420cc1c9aabdd637b7db5f0e66e2e3b744 Mon Sep 17 00:00:00 2001
From: styppo <mail@styp-rekowsky.de>
Date: Fri, 13 Jan 2023 17:31:12 +0000
Subject: [PATCH] NIP05 badge styling

---
 src/components/Bech32Label.vue           |  2 +-
 src/components/MainMenu/ProfilePopup.vue |  2 +-
 src/components/Post/HeroPost.vue         |  2 +-
 src/components/Post/ListPost.vue         |  2 +-
 src/components/User/Nip05Badge.vue       |  4 +-
 src/components/User/UserCard.vue         |  2 +-
 src/components/User/UserName.vue         | 63 +++++++++---------------
 src/pages/profile/Profile.vue            |  4 +-
 8 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/src/components/Bech32Label.vue b/src/components/Bech32Label.vue
index 8aa57cd..1d871cc 100644
--- a/src/components/Bech32Label.vue
+++ b/src/components/Bech32Label.vue
@@ -47,7 +47,7 @@ export default {
     opacity: .9;
   }
   &-value {
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 </style>
diff --git a/src/components/MainMenu/ProfilePopup.vue b/src/components/MainMenu/ProfilePopup.vue
index 60ee674..e7f6ba8 100644
--- a/src/components/MainMenu/ProfilePopup.vue
+++ b/src/components/MainMenu/ProfilePopup.vue
@@ -7,7 +7,7 @@
       <div class="menu-profile-items">
         <div class="profile-info">
           <p>
-            <UserName :pubkey="pubkey" two-line />
+            <UserName :pubkey="pubkey" two-line show-verified />
           </p>
         </div>
         <div class="more">
diff --git a/src/components/Post/HeroPost.vue b/src/components/Post/HeroPost.vue
index b5624ff..56d83dc 100644
--- a/src/components/Post/HeroPost.vue
+++ b/src/components/Post/HeroPost.vue
@@ -8,7 +8,7 @@
         <UserAvatar :pubkey="note.author" clickable />
       </div>
       <div class="post-author-name">
-        <UserName :pubkey="note.author" clickable two-line />
+        <UserName :pubkey="note.author" clickable two-line show-verified />
       </div>
     </div>
     <div class="post-content">
diff --git a/src/components/Post/ListPost.vue b/src/components/Post/ListPost.vue
index 290e886..289c5b7 100644
--- a/src/components/Post/ListPost.vue
+++ b/src/components/Post/ListPost.vue
@@ -16,7 +16,7 @@
     <div class="post-content">
       <div class="post-content-header">
         <p>
-          <UserName :pubkey="note.author" clickable @click.stop />
+          <UserName :pubkey="note.author" clickable show-verified @click.stop />
           <span>&#183;</span>
           <span class="created-at">{{ formatPostDate(note.createdAt) }}</span>
         </p>
diff --git a/src/components/User/Nip05Badge.vue b/src/components/User/Nip05Badge.vue
index 5e78bcc..f8db022 100644
--- a/src/components/User/Nip05Badge.vue
+++ b/src/components/User/Nip05Badge.vue
@@ -40,7 +40,7 @@ export default {
       if (!this.profile?.nip05.url) return
       return this.profile.nip05.url
         .split('@')
-        .filter(part => part !== '_' && part !== this.profile.name)
+        .filter(part => part !== '_' && part?.toLowerCase() !== this.profile.name?.toLowerCase())
         .join('@')
     }
   },
@@ -58,6 +58,8 @@ export default {
 <style lang="scss" scoped>
 .nip05-badge {
   font-size: 12px;
+  display: inline-flex;
+  align-items: center;
   &-text {
     margin-left: 2px;
   }
diff --git a/src/components/User/UserCard.vue b/src/components/User/UserCard.vue
index 1559f1f..0d59b07 100644
--- a/src/components/User/UserCard.vue
+++ b/src/components/User/UserCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-card">
     <UserAvatar :pubkey="pubkey" :clickable="clickable" />
-    <UserName :pubkey="pubkey" :clickable="clickable" class="username" two-line />
+    <UserName :pubkey="pubkey" :clickable="clickable" class="username" two-line show-verified />
     <FollowButton v-if="followButton" :pubkey="pubkey" />
   </div>
 </template>
diff --git a/src/components/User/UserName.vue b/src/components/User/UserName.vue
index 12c9b87..0a005bb 100644
--- a/src/components/User/UserName.vue
+++ b/src/components/User/UserName.vue
@@ -3,19 +3,17 @@
     class="username"
     :class="{'two-line': twoLine, clickable, header}"
   >
-    <a @click="clickable && goToProfile(pubkey)">
-      <span v-if="profile?.name" class="name">
-        {{ profile.name }}
-      </span>
-<!--      <q-icon v-if="showFollowing && isFollow" name="visibility" color="secondary">-->
-<!--        <q-tooltip>-->
-<!--          following-->
-<!--        </q-tooltip>-->
-<!--      </q-icon>-->
-      <Bech32Label v-if="twoLine || !profile?.name" prefix="npub" :hex="pubkey" class="pubkey" />
-    </a>
+    <span class="name">
+      <a @click="clickable && goToProfile(pubkey)">
+        <span v-if="profile?.name">
+          {{ profile.name }}
+        </span>
+        <Bech32Label v-else prefix="npub" :hex="pubkey" />
+      </a>
+      <Nip05Badge v-if="showVerified" :pubkey="pubkey" :size="header ? '18px' : '14px'" class="verified-badge" />
+    </span>
 
-    <Nip05Badge :pubkey="pubkey" />
+    <Bech32Label v-if="twoLine && profile?.name" prefix="npub" :hex="pubkey" class="pubkey" />
   </span>
 </template>
 
@@ -48,13 +46,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    showFollowing: {
-      type: Boolean,
-      default: false
-    },
     showVerified: {
       type: Boolean,
-      default: true
+      default: false
     },
   },
   setup() {
@@ -66,10 +60,6 @@ export default {
     profile() {
       return this.nostr.getProfile(this.pubkey)
     },
-    isFollow() {
-      // FIXME
-      return false
-    },
   },
 }
 </script>
@@ -79,35 +69,30 @@ export default {
 
 .username {
   .name {
-    font-weight: bold;
+    display: inline-flex;
+    align-items: center;
+    a {
+      font-weight: 600;
+    }
+    .verified-badge {
+      margin-left: 4px;
+    }
   }
-  > span + span {
-    margin-left: 8px;
+  .pubkey {
+    color: $color-dark-gray;
+    display: block;
   }
   &.two-line {
     display: block;
-    > a > span {
-      display: block;
-      margin-left: 0;
-    }
-    .pubkey:not(:first-child) {
-      color: $color-dark-gray;
-      .pubkey-value {
-        font-weight: normal;
-      }
-    }
   }
   &.clickable {
     cursor: pointer;
-    .name:hover {
-      text-decoration: underline;
-    }
-    .pubkey:first-child:hover {
+    .name a:hover {
       text-decoration: underline;
     }
   }
   &.header {
-    .name, .pubkey:first-child {
+    .name {
       font-size: 1.5rem;
     }
   }
diff --git a/src/pages/profile/Profile.vue b/src/pages/profile/Profile.vue
index 5eda8fb..c4fa510 100644
--- a/src/pages/profile/Profile.vue
+++ b/src/pages/profile/Profile.vue
@@ -15,7 +15,7 @@
             <strong>{{ contacts?.length || 0 }}</strong> Following
           </a>
           <a @click="goToFollowers('followers')">
-            <strong>{{ `${followers?.length}+` || 0 }}</strong> Followers
+            <strong>{{ followers?.length ? `${followers?.length}+` : 0 }}</strong> Followers
           </a>
         </p>
       </div>
@@ -176,7 +176,7 @@ export default defineComponent({
     }
     &-content {
       flex-grow: 1;
-      .username {
+      > p.username {
         display: flex;
         > span:first-child {
           flex-grow: 1;