add possibility to add attributes to an object

ui/src/views/Inspect.vue

@@ -14,7 +14,7 @@
           </tr>
           <tr v-for="[id, entry] in attributes">
             <td>
-              <sl-icon-button name="x-circle" @click="removeAttribute(id)"/>
+              <sl-icon-button name="x-circle" @click="removeEntry(id)"/>
             </td>
             <td>{{ entry.key }}</td>
             <td>
@@ -24,6 +24,17 @@
               </template>
             </td>
           </tr>
+          <tr>
+            <td>
+              <sl-icon-button name="plus-circle" @click="addEntry()"/>
+            </td>
+            <td>
+              <sl-input v-sl-model:newEntryKey/>
+            </td>
+            <td>
+              <sl-input v-sl-model:newEntryValue/>
+            </td>
+          </tr>
         </table>
       </template>
       <template v-if="backlinks.length">
@@ -63,7 +74,16 @@ export default defineComponent({
     Address,
   },
   props: {
-    "address": String
+    "address": {
+      type: String,
+      required: true
+    }
+  },
+  data: () => {
+    return {
+      newEntryKey: "",
+      newEntryValue: ""
+    };
   },
   computed: {
     objectEntries(): [string, IEntry][] {
@@ -85,11 +105,30 @@ export default defineComponent({
     }
   },
   methods: {
-    async removeAttribute(id: string) {
+    async removeEntry(id: string) {
       if (confirm("Are you sure you want to remove the attribute?")) {
         await fetch(`/api/obj/${id}`, {method: "DELETE"});
         await this.mutate();
       }
+    },
+    async addEntry() {
+      await fetch(`/api/obj`, {
+        method: "PUT",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({
+          target: this.address,
+          key: this.newEntryKey,
+          value: {
+            t: "Value",
+            c: this.newEntryValue
+          }
+        })
+      });
+
+      await this.mutate();
+
+      this.newEntryKey = "";
+      this.newEntryValue = "";
     }
   },
   setup(props) {