[ui] add group remove feature

webui/src/components/Inspect.svelte

@@ -12,6 +12,7 @@
   import type { AttributeChange } from "../types/base";
   import Selector from "./utils/Selector.svelte";
   import type { IValue } from "upend/types";
+  import IconButton from "./utils/IconButton.svelte";
 
   export let address: string;
   export let index: number | undefined;
@@ -101,7 +102,7 @@
 
   $: groups = ($entity?.backlinks || [])
     .filter((e) => e.attribute === "HAS")
-    .map((e) => e.entity)
+    .map((e) => [e.address, e.entity])
     .sort(); // TODO
 
   async function onChange(ev: CustomEvent<AttributeChange>) {
@@ -161,6 +162,11 @@
     revalidate();
     groupToAdd = undefined;
   }
+
+  async function removeGroup(address: string) {
+    await fetch(`/api/obj/${address}`, { method: "DELETE" });
+    revalidate();
+  }
 </script>
 
 <div class="inspect">
@@ -175,8 +181,16 @@
     <section class="groups labelborder">
       <header><h3>Groups</h3></header>
       <div class="content">
-        {#each groups as address}
-          <UpObject {address} link />
+        {#each groups as [entryAddress, address]}
+          <div class="group">
+            <UpObject {address} link />
+            {#if editable}
+              <IconButton
+                name="x-circle"
+                on:click={() => removeGroup(entryAddress)}
+              />
+            {/if}
+          </div>
         {/each}
         {#if editable}
           <div class="selector">
@@ -255,6 +269,12 @@
       gap: 0.5rem 0.5rem;
       align-items: center;
     }
+
+    .group {
+      display: inline-flex;
+      align-items: center;
+    }
+
     .selector {
       width: 100%;
     }