show full contact details, plus other tweaks

src/views/DIDView.vue

@@ -27,9 +27,17 @@
               .displayName
           }}
         </h2>
-        <span class="mt-2 text-xl font-semibold break-words">
-          {{ viewingDid }}
-        </span>
+        <button @click="showDidDetails = !showDidDetails" class="ml-2 mr-2">
+          Details
+          <fa v-if="showDidDetails" icon="chevron-up" class="text-blue-400" />
+          <fa v-else icon="chevron-down" class="text-blue-400" />
+        </button>
+        <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
+        <pre
+          v-if="showDidDetails"
+          class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
+          >{{ contactYaml }}</pre
+        >
       </div>
       <div class="flex justify-center mt-4">
         <span v-if="contact?.profileImageUrl" class="flex justify-between">
@@ -126,6 +134,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
+import * as yaml from "js-yaml";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
@@ -144,6 +153,7 @@ import {
   GiveVerifiableCredential,
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
 import EntityIcon from "@/components/EntityIcon.vue";
 
 @Component({
@@ -157,14 +167,19 @@ import EntityIcon from "@/components/EntityIcon.vue";
 export default class DIDView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
+  libsUtil = libsUtil;
+  yaml = yaml;
+
   activeDid = "";
   allMyDids: Array<string> = [];
   apiServer = "";
   claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
   contact?: Contact;
+  contactYaml = "";
   hitEnd = false;
   isLoading = false;
   searchBox: { name: string; bbox: BoundingBox } | null = null;
+  showDidDetails = false;
   showLargeIdenticonId?: string;
   showLargeIdenticonUrl?: string;
   viewingDid?: string;
@@ -183,6 +198,7 @@ export default class DIDView extends Vue {
     if (pathParam) {
       this.viewingDid = decodeURIComponent(pathParam);
       this.contact = await db.contacts.get(this.viewingDid);
+      this.contactYaml = yaml.dump(this.contact)
       await this.loadClaimsAbout();
     } else {
       this.$notify(