Better handling of No-name and Unnamed entities

src/components/GiftedDialog.vue

@@ -66,7 +66,7 @@
                   class="text-blue-500 text-5xl mb-1"
                 />
                 <h3
-                  class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-slate-400 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
                 >
                   Show All
                 </h3>
@@ -118,9 +118,9 @@
                 class="text-slate-400 text-5xl mb-1"
               />
               <h3
-                class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                class="text-xs text-slate-400 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </li>
             <li
@@ -159,11 +159,12 @@
               </div>
               <h3
                 :class="{
-                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden': !wouldCreateConflict(contact.did),
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden': !wouldCreateConflict(contact.did) && contact.name,
-                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400': wouldCreateConflict(contact.did)
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400 italic': !contact.name,
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400': wouldCreateConflict(contact.did) && contact.name
                 }"
               >
-                {{ contact.name || contact.did }}
+                {{ contact.name || "(No name)" }}
               </h3>
             </li>
             <li v-if="allContacts.length > 0" class="cursor-pointer">
@@ -201,7 +202,7 @@
                   class="text-blue-500 text-5xl mb-1"
                 />
                 <h3
-                  class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-slate-400 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
                 >
                   Show All
                 </h3>
@@ -263,16 +264,22 @@
                 }}
               </p>
               <h3 
-                v-if="giver?.name" 
+                v-if="giver?.name && giver.name !== giver.did" 
                 class="font-semibold truncate"
               >
                 {{ giver.name }}
               </h3>
               <h3 
-                v-else 
+                v-if="giver?.name && giver.name === giver.did" 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                (No name)
+              </h3>
+              <h3 
+                v-else-if="!giver?.name" 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>
 
@@ -317,16 +324,22 @@
                 }}
               </p>
               <h3 
-                v-if="giver?.name" 
+                v-if="giver?.name && giver.name !== giver.did" 
                 class="font-semibold truncate"
               >
                 {{ giver.name }}
               </h3>
               <h3 
-                v-else 
+                v-if="giver?.name && giver.name === giver.did" 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                (No name)
+              </h3>
+              <h3 
+                v-else-if="!giver?.name" 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>
 
@@ -359,16 +372,22 @@
                 Given to:
               </p>
               <h3 
-                v-if="receiver?.name" 
+                v-if="receiver?.name && receiver.name !== receiver.did" 
                 class="font-semibold truncate"
               >
                 {{ receiver.name }}
               </h3>
               <h3 
-                v-else 
+                v-if="receiver?.name && receiver.name === receiver.did" 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                (No name)
+              </h3>
+              <h3 
+                v-else-if="!receiver?.name" 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>
 
@@ -404,7 +423,7 @@
                 v-else 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>