add a contact-edit page and allow saving of notes

src/views/ContactsView.vue

@@ -170,27 +170,34 @@
                     )
                   : contactsSelected.push(contact.did)
               "
-              class="ml-2 h-6 w-6"
+              class="ml-2 h-6 w-6 flex-shrink-0"
               data-testId="contactCheckOne"
             />
 
-            <h2 class="text-base font-semibold ml-2">
-              {{ contact.name || AppString.NO_CONTACT_NAME }}
+            <h2 class="text-base font-semibold ml-2 w-1/3 truncate flex-shrink-0">
+              {{ contactNameNonBreakingSpace(contact.name) }}
             </h2>
 
-            <router-link
-              :to="{
-                path: '/did/' + encodeURIComponent(contact.did),
-              }"
-              title="See more about this person"
-            >
-              <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
-            </router-link>
+            <span>
+              <div class="flex items-center">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
+                  <fa icon="circle-info" class="text-xl 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. -->
+                <span class="ml-4 text-sm overflow-hidden">{{
+                  shortDid(contact.did)
+                }}</span
+                >
+              </div>
+              <div class="ml-4 text-sm">
+                {{ contact.notes }}
+              </div>
+            </span>
           </div>
           <div id="ContactActions" class="flex gap-1.5 mt-2">
             <div
@@ -542,6 +549,10 @@ export default class ContactsView extends Vue {
     }
   }
 
+  private contactNameNonBreakingSpace(contactName?: string) {
+    return (contactName || AppString.NO_CONTACT_NAME).replace(/\s/g, "\u00A0");
+  }
+
   private danger(message: string, title: string = "Error", timeout = 5000) {
     this.$notify(
       {