feat: make the contact methods more presentable, and clarify exact types

src/views/DIDView.vue

@@ -52,14 +52,16 @@
 
         <!-- Contact Methods -->
         <div v-if="contactFromDid.contactMethods?.length" class="mt-3">
-          <div class="flex flex-wrap gap-2">
+          <div class="flex flex-col gap-2">
             <div
               v-for="(method, index) in contactFromDid.contactMethods"
               :key="index"
-              class="inline-flex items-center gap-2 text-sm"
+              class="flex items-center gap-2 text-sm"
             >
               <span class="font-semibold text-slate-600"
-                >{{ getContactMethodLabel(method.type) }}:</span
+                >{{
+                  getContactMethodLabel(method.type) || "(unspecified)"
+                }}:</span
               >
               <span class="text-slate-700">{{ method.label }}</span>
               <span class="text-slate-600">{{ method.value }}</span>
@@ -71,6 +73,23 @@
               >
                 <font-awesome icon="message" class="text-base" />
               </a>
+              <a
+                v-if="method.type === 'EMAIL'"
+                :href="`mailto:${method.value}`"
+                class="ml-2 text-blue-500 hover:text-blue-700"
+                title="Send email"
+              >
+                <font-awesome icon="envelope" class="text-base" />
+              </a>
+              <a
+                v-if="method.type === 'WHATSAPP'"
+                :href="`https://wa.me/${method.value.replace(/\D/g, '')}`"
+                target="_blank"
+                class="ml-2 text-blue-700"
+                title="Send WhatsApp message"
+              >
+                <font-awesome :icon="['fab', 'whatsapp']" class="text-base" />
+              </a>
             </div>
           </div>
         </div>