add dropdown menu to contact list item

src/components/contacts/ContactDropDownMenu.vue

@@ -0,0 +1,63 @@
+<template>
+    <DropDownMenu>
+        <template v-slot:button>
+            <IconButton v-if="contact" class="bg-transparent text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+                </svg>
+            </IconButton>
+        </template>
+        <template v-slot:items>
+
+            <!-- contact details -->
+            <div class="p-2 border-b">
+                <div class="text-sm text-gray-500 font-semibold">{{ contact.advName }}</div>
+            </div>
+
+            <!-- delete contact button -->
+            <DropDownMenuItem @click="onDeleteContact(contact)">
+                <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+                </svg>
+                <span class="text-red-500">Forget Contact</span>
+            </DropDownMenuItem>
+
+        </template>
+    </DropDownMenu>
+</template>
+
+<script>
+import IconButton from "../IconButton.vue";
+import DropDownMenu from "../DropDownMenu.vue";
+import DropDownMenuItem from "../DropDownMenuItem.vue";
+import Connection from "../../js/Connection.js";
+
+export default {
+    name: 'ContactDropDownMenu',
+    components: {
+        DropDownMenuItem,
+        DropDownMenu,
+        IconButton,
+    },
+    props: {
+        contact: Object,
+    },
+    emits: [
+        "contact-deleted",
+    ],
+    methods: {
+        async onDeleteContact(contact) {
+
+            // confirm user wants to remove this contact
+            if(!confirm("Are you sure you want to forget this contact?")){
+                return;
+            }
+
+            // remove contact
+            await Connection.removeContact(contact.publicKey);
+            await Connection.loadContacts();
+
+        },
+    },
+}
+</script>

src/components/contacts/ContactListItem.vue

@@ -4,6 +4,7 @@
         <!-- name and info -->
         <div class="mr-auto">
             <div>{{ contact.advName }}</div>
+            <div class="text-sm text-gray-500">&lt;{{ formatBytesToHex(contact.publicKey.slice(0, 4)) }}...{{ formatBytesToHex(contact.publicKey.slice(-4)) }}&gt;</div>
             <div class="flex space-x-1 text-sm text-gray-500">
 
                <span class="my-auto">
@@ -30,6 +31,11 @@
             </div>
         </div>
 
+        <!-- node dropdown menu -->
+        <div class="my-auto">
+            <ContactDropDownMenu :contact="contact"/>
+        </div>
+
     </div>
 </template>
 
@@ -37,10 +43,12 @@
 import GlobalState from "../../js/GlobalState.js";
 import IconButton from "../IconButton.vue";
 import TimeUtils from "../../js/TimeUtils.js";
+import ContactDropDownMenu from "./ContactDropDownMenu.vue";
 
 export default {
     name: 'ContactListItem',
     components: {
+        ContactDropDownMenu,
         IconButton,
     },
     props: {
@@ -50,6 +58,9 @@ export default {
         formatUnixSecondsAgo(unixSeconds) {
             return TimeUtils.formatUnixSecondsAgo(unixSeconds);
         },
+        formatBytesToHex(uint8Array) {
+            return Array.from(uint8Array).map(byte => byte.toString(16).padStart(2, '0')).join('');
+        },
     },
     computed: {
         GlobalState() {

src/js/Connection.js

@@ -65,6 +65,10 @@ class Connection {
         await GlobalState.connection.sendCommandSetDeviceTime(timestamp);
     }
 
+    static async removeContact(publicKey) {
+        await GlobalState.connection.sendCommandRemoveContact(publicKey);
+    }
+
 }
 
 export default Connection;