add a contact-edit page and allow saving of notes

src/views/DIDView.vue

@@ -26,15 +26,11 @@
       <div>
         <h2 class="text-xl font-semibold">
           {{ contactFromDid?.name || "(no name)" }}
-          <button
-            @click="
-              contactEdit = true;
-              contactNewName = (contactFromDid?.name as string) || '';
-            "
-            title="Edit"
+          <router-link
+            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
           >
             <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-          </button>
+          </router-link>
         </h2>
         <button
           @click="showDidDetails = !showDidDetails"
@@ -163,34 +159,6 @@
       </div>
     </div>
 
-    <!-- Edit Name Dialog, maybe should be replaced by ContactNameDialog -->
-    <div v-if="contactEdit" class="dialog-overlay">
-      <div class="dialog">
-        <h1 class="text-xl font-bold text-center mb-4">Edit Name</h1>
-        <input
-          type="text"
-          class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-          placeholder="Name"
-          v-model="contactNewName"
-        />
-        <div class="flex justify-between">
-          <button
-            class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
-            @click="onClickSaveName(contactNewName)"
-          >
-            <fa icon="save" />
-          </button>
-          <span class="inline-block w-2" />
-          <button
-            class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
-            @click="onClickCancelName()"
-          >
-            <fa icon="ban" />
-          </button>
-        </div>
-      </div>
-    </div>
-
     <!-- Loading Animation -->
     <div
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
@@ -290,8 +258,6 @@ export default class DIDView extends Vue {
   apiServer = "";
   claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
   contactFromDid?: Contact;
-  contactEdit = false;
-  contactNewName: string = "";
   contactYaml = "";
   hitEnd = false;
   isLoading = false;
@@ -559,29 +525,6 @@ export default class DIDView extends Vue {
     return claim.claim.name || claim.claim.description || "";
   }
 
-  private async onClickCancelName() {
-    this.contactEdit = false;
-  }
-
-  private async onClickSaveName(newName: string) {
-    if (!this.contactFromDid) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not A Contact",
-          text: "First add this on the contact page, then you can edit here.",
-        },
-        5000,
-      );
-      return;
-    }
-    this.contactFromDid.name = newName;
-    return db.contacts
-      .update(this.contactFromDid.did, { name: newName })
-      .then(() => (this.contactEdit = false));
-  }
-
   // note that this is also in ContactView.vue
   async confirmSetVisibility(contact: Contact, visibility: boolean) {
     const visibilityPrompt = visibility