Better handling of No-name and Unnamed entities

src/components/GiftedDialog.vue

@@ -2,7 +2,7 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <!-- Step 1: Giver -->
-      <div v-show="currentStep === 1" id="sectionGiftedGiver">
+      <div v-show="firstStep" id="sectionGiftedGiver">
         <label class="block font-bold mb-4">
           {{
             stepType === "recipient"
@@ -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 text-slate-400': 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 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>
@@ -219,7 +220,7 @@
       </div>
 
       <!-- Step 2: Gift -->
-      <div v-show="currentStep === 2" id="sectionGiftedGift">
+      <div v-show="!firstStep" id="sectionGiftedGift">
         <div class="grid grid-cols-2 gap-2 mb-4">
           <!-- Giver Button -->
           <button
@@ -262,8 +263,23 @@
                     : "Received from:"
                 }}
               </p>
-              <h3 class="font-semibold truncate">
-                {{ giver?.name || "Unnamed" }}
+              <h3 
+                v-if="giver?.name && giver.name !== giver.did" 
+                class="font-semibold truncate"
+              >
+                {{ giver.name }}
+              </h3>
+              <h3 
+                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)
               </h3>
             </div>
 
@@ -307,8 +323,23 @@
                     : "Received from:"
                 }}
               </p>
-              <h3 class="font-semibold truncate">
-                {{ giver?.name || "Unnamed" }}
+              <h3 
+                v-if="giver?.name && giver.name !== giver.did" 
+                class="font-semibold truncate"
+              >
+                {{ giver.name }}
+              </h3>
+              <h3 
+                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)
               </h3>
             </div>
 
@@ -340,8 +371,23 @@
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
                 Given to:
               </p>
-              <h3 class="font-semibold truncate">
-                {{ receiver?.name || "Unnamed" }}
+              <h3 
+                v-if="receiver?.name && receiver.name !== receiver.did" 
+                class="font-semibold truncate"
+              >
+                {{ receiver.name }}
+              </h3>
+              <h3 
+                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)
               </h3>
             </div>
 
@@ -367,8 +413,17 @@
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
                 Given to project:
               </p>
-              <h3 class="font-semibold truncate">
-                {{ receiver?.name || "Unnamed" }}
+              <h3 
+                v-if="receiver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ receiver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                (Unnamed)
               </h3>
             </div>
 
@@ -522,13 +577,13 @@ export default class GiftedDialog extends Vue {
   callbackOnSuccess?: (amount: number) => void = () => {};
   customTitle?: string;
   description = "";
+  firstStep = true;
   giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
   offerId = "";
   prompt = "";
   receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
-  currentStep = 1;
 
   libsUtil = libsUtil;
 
@@ -621,7 +676,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
-    this.currentStep = giver ? 2 : 1;
+    this.firstStep = !giver;
     this.stepType = "giver";
 
     // Update entity types based on current props
@@ -715,7 +770,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.prompt = "";
     this.unitCode = "HUR";
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async confirm() {
@@ -920,15 +975,15 @@ export default class GiftedDialog extends Vue {
     } else {
       this.giver = {
         did: "",
-        name: "Unnamed",
+        name: "",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   goBackToStep1(step: string) {
     this.stepType = step;
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async loadProjects() {
@@ -971,7 +1026,7 @@ export default class GiftedDialog extends Vue {
       did: this.activeDid,
       name: "You",
     };
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipient(contact?: Contact) {
@@ -983,10 +1038,10 @@ export default class GiftedDialog extends Vue {
     } else {
       this.receiver = {
         did: "",
-        name: "Unnamed",
+        name: "",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipientProject(project: PlanData) {
@@ -996,7 +1051,7 @@ export default class GiftedDialog extends Vue {
       image: project.image,
       handleId: project.handleId,
     };
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   // Computed property for the query parameters