Implements contact deletion functionality

ui/src/lib/ButtonDelete.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import SvgIcon from "./SvgIcon.svelte";
+  export let moreClasses: string;
+</script>
+
+<button
+  type="button"
+  on:click|stopPropagation
+  class="inline-flex h-8 w-8 items-center justify-center rounded-full transition-opacity hover:opacity-75 focus:outline-none"
+  aria-label="Delete"
+>
+  <SvgIcon icon="delete" {moreClasses} />
+</button>

ui/src/lib/ContactListItem.svelte

@@ -6,6 +6,8 @@
   import type { AgentPubKeyB64 } from "@holochain/client";
   import Avatar from "$lib/Avatar.svelte";
   import { getContext, onMount } from "svelte";
+  import ButtonDelete from "$lib/ButtonDelete.svelte";
+  import toast from "svelte-french-toast";
 
   const contactStore = getContext<{ getStore: () => ContactStore }>("contactStore").getStore();
 
@@ -18,32 +20,46 @@
   onMount(async () => {
     hasAgentJoinedDht = await contactStore.getHasAgentJoinedDht(agentPubKeyB64);
   });
+
+  async function handleDelete(event: MouseEvent) {
+    try {
+      await contact.delete();
+    } catch (err) {
+      console.error(err);
+      toast.error($t("common.delete_contact_error"));
+    }
+  }
 </script>
 
 <button
   class="-ml-1 mb-2 flex w-full items-center justify-between rounded-3xl py-1 pl-1 pr-2 {selected &&
     'bg-tertiary-500 dark:bg-secondary-500'}"
   on:click
 >
-  <Avatar size={38} agentPubKeyB64={$contact.publicKeyB64} moreClasses="mr-3" />
-  <p
-    class="dark:text-tertiary-100 flex-1 text-start font-bold {hasAgentJoinedDht
-      ? 'text-secondary-400 dark:!text-secondary-300'
-      : ''}"
-  >
-    {$contact.fullName}
-    {#if hasAgentJoinedDht}
-      <span class="text-secondary-400 ml-1 text-xs">{$t("common.unconfirmed")}</span>
-    {/if}
-  </p>
-  {#if selected}
-    <ButtonInline
-      on:click={() => goto("/contacts/" + $contact.publicKeyB64)}
-      moreClasses="dark:bg-secondary-700 "
+  <div class="flex flex-1 items-center">
+    <Avatar size={38} agentPubKeyB64={$contact.publicKeyB64} moreClasses="mr-3" />
+    <p
+      class="dark:text-tertiary-100 flex-1 text-start font-bold {hasAgentJoinedDht
+        ? 'text-secondary-400 dark:!text-secondary-300'
+        : ''}"
     >
-      {$t("common.view")}
-    </ButtonInline>
-  {:else}
-    <span class="text-primary-500 text-lg font-extrabold">+</span>
-  {/if}
+      {$contact.fullName}
+      {#if hasAgentJoinedDht}
+        <span class="text-secondary-400 ml-1 text-xs">{$t("create.unconfirmed")}</span>
+      {/if}
+    </p>
+  </div>
+  <div class="flex items-center space-x-2">
+    {#if selected}
+      <ButtonInline
+        on:click={() => goto("/contacts/" + $contact.publicKeyB64)}
+        moreClasses="dark:bg-secondary-700 "
+      >
+        {$t("create.view")}
+      </ButtonInline>
+    {:else}
+      <span class="text-primary-500 text-lg font-extrabold">+</span>
+      <ButtonDelete moreClasses="h-5 w-5" on:click={handleDelete} />
+    {/if}
+  </div>
 </button>

ui/src/lib/svgIcons.ts

@@ -90,4 +90,5 @@ export const svgIcons: { [key: string]: string } = {
   pdf: '<svg width="100%" height="100%" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path d="M3.9985 2C3.44749 2 3 2.44405 3 2.9918V21.0082C3 21.5447 3.44476 22 3.9934 22H20.0066C20.5551 22 21 21.5489 21 20.9925L20.9997 7L16 2H3.9985ZM10.5 7.5H12.5C12.5 9.98994 14.6436 12.6604 17.3162 13.5513L16.8586 15.49C13.7234 15.0421 10.4821 16.3804 7.5547 18.3321L6.3753 16.7191C7.46149 15.8502 8.50293 14.3757 9.27499 12.6534C10.0443 10.9373 10.5 9.07749 10.5 7.5ZM11.1 13.4716C11.3673 12.8752 11.6043 12.2563 11.8037 11.6285C12.2754 12.3531 12.8553 13.0182 13.5102 13.5953C12.5284 13.7711 11.5666 14.0596 10.6353 14.4276C10.8 14.1143 10.9551 13.7948 11.1 13.4716Z"></path></svg>',
   fileClip:
     '<svg width="100%" height="100%" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.308 492.308" xml:space="preserve"><path d="M398.918 91.764v228.087c0 84.236-68.529 152.764-152.764 152.764S93.389 404.087 93.389 319.851V114.495c0-52.274 42.529-94.803 94.808-94.803 52.274 0 94.798 42.529 94.798 94.803l-.019 192.803c0 20.995-17.077 38.072-38.067 38.072-20.995 0-38.072-17.077-38.072-38.072V133.135h-19.692v174.163c0 31.851 25.913 57.764 57.764 57.764s57.76-25.914 57.76-57.764l.019-192.803C302.688 51.361 251.327 0 188.197 0c-63.135 0-114.5 51.361-114.5 114.495v205.356c0 95.091 77.365 172.457 172.457 172.457s172.457-77.365 172.457-172.457V91.764z"/></svg>',
+  delete: '<svg width="100%" height="100%" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 6.66671H20.8333M19.1667 7.50004V19.1667C19.1667 19.8297 18.9033 20.4656 18.4344 20.9345C17.9656 21.4033 17.3297 21.6667 16.6667 21.6667H9.16667C8.50363 21.6667 7.86774 21.4033 7.3989 20.9345C6.93006 20.4656 6.66667 19.8297 6.66667 19.1667V7.50004M10.8333 6.66671V4.16671C10.8333 3.94569 10.9211 3.73373 11.0774 3.57745C11.2337 3.42117 11.4457 3.33337 11.6667 3.33337H14.1667C14.3877 3.33337 14.5996 3.42117 14.7559 3.57745C14.9122 3.73373 15 3.94569 15 4.16671V6.66671M10.8333 10.8334V16.6667M15 10.8334V16.6667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', 
 };

ui/src/store/ContactStore.ts

@@ -22,6 +22,7 @@ export interface ContactStore {
   initialize: () => Promise<void>;
   create: (val: Contact, cellIdB64: CellIdB64) => Promise<void>;
   update: (val: Contact) => Promise<void>;
+  delete: (agentPubKeyB64: AgentPubKeyB64) => Promise<void>;
   getHasAgentJoinedDht: (agentPubKeyB64: AgentPubKeyB64) => Promise<boolean>;
   getAsProfileExtended: (agentPubKeyB64: AgentPubKeyB64) => ProfileExtended;
   subscribe: (
@@ -80,6 +81,21 @@ export function createContactStore(client: RelayClient): ContactStore {
     );
   }
 
+  /**
+   * Delete a contact
+   */
+  async function deleteContact(agentPubKeyB64: AgentPubKeyB64) {
+    const contact = contacts.getKeyValue(agentPubKeyB64);
+    await client.deleteContact(contact.originalActionHash);
+    // Updates the local stores
+    contacts.removeKeyValue(agentPubKeyB64);
+    cellIds.update((d) => {
+      const updated = { ...d };
+      delete updated[agentPubKeyB64];
+      return updated;
+    });
+  }
+
   /**
    * Fetch contacts data and load into writable
    */
@@ -195,6 +211,7 @@ export function createContactStore(client: RelayClient): ContactStore {
 
     create,
     update,
+    delete: deleteContact,
 
     getHasAgentJoinedDht,
     getAsProfileExtended,
@@ -218,6 +235,7 @@ export function deriveOneContactStore(contactStore: ContactStore, agentPubKeyB64
 
   return {
     update: contactStore.update,
+    delete: () => contactStore.delete(agentPubKeyB64),
     getHasAgentJoinedDht,
     getAsProfileExtended,
     subscribe,

ui/src/store/RelayClient.ts

@@ -320,7 +320,7 @@ export class RelayClient {
       cell_id: this.provisionedRelayCellId,
       zome_name: ZOME_NAME,
       fn_name: "create_contact",
-      payload,
+      payload, 
     });
   }
 
@@ -332,4 +332,13 @@ export class RelayClient {
       payload,
     });
   }
+
+  public async deleteContact(originalContactHash: ActionHash): Promise<ActionHash> {
+    return this.client.callZome({
+      cell_id: this.provisionedRelayCellId,
+      zome_name: ZOME_NAME,
+      fn_name: "delete_contact",
+      payload: originalContactHash,
+    });
+  }
 }

ui/src/translations/locales/en.json

@@ -26,6 +26,7 @@
   "create_group": "Create group",
   "create_new_contact": "Create New Contact",
   "created": "Created: {{date:date;}}",
+  "delete_contact_error": "Error deleting contact",
   "download": "Download",
   "download_file_error": "Failed to download file",
   "download_file_success": "File downloaded successfully",
@@ -90,4 +91,4 @@
   "welcome_text_2": "Private, encrypted and secured by keys only you control.",
   "what_is_your_name": "What is your name?",
   "you": "You"
-}
+}