include some DID info on the contact list page

src/db/tables/README.md

@@ -0,0 +1 @@
+Check the contact & settings export to see whether you want your new table to be included in it.

src/views/ContactsView.vue

@@ -160,6 +160,10 @@
             >
               <fa icon="circle-info" class="text-blue-500 ml-4" />
             </router-link>
+
+            <span class="ml-4 text-sm overflow-hidden"
+              >{{ shortDid(contact.did) }}...</span
+            ><!-- The first 18 characters of did:peer are the same. -->
           </div>
           <div id="ContactActions" class="flex gap-1.5 mt-2">
             <div
@@ -1145,5 +1149,20 @@ export default class ContactsView extends Vue {
         );
       });
   }
+
+  private shortDid(did: string) {
+    if (did.startsWith("did:peer:")) {
+      return (
+        did.substring(0, "did:peer:".length + 2) +
+        "..." +
+        did.substring("did:peer:".length + 18, "did:peer:".length + 25) +
+        "..."
+      );
+    } else if (did.startsWith("did:ethr:")) {
+      return did.substring(0, "did:ethr:".length + 9) + "...";
+    } else {
+      return did.substring(0, did.indexOf(":", 4) + 7) + "...";
+    }
+  }
 }
 </script>