Add hover remove control to message tags

eml-client/src/App.svelte

@@ -184,6 +184,10 @@
           hideTags={new Set([
             (tagQueries.find((t) => t.query == querySelected) ?? {}).name,
           ])}
+          on:tagsUpdated={() => {
+            refreshTagList()
+            refreshQuery()
+          }}
         />
       </Row>
     </Col>

eml-client/src/components/Eml.svelte

@@ -101,7 +101,14 @@
         .format(new Date(emlMeta.timestamp * 1000))}
     </span>
 
-    <TagBadges tags={emlMeta.tags} />
+    <TagBadges
+      tags={emlMeta.tags}
+      query={`id:${emlMeta.id}`}
+      on:tagsUpdated={(event) => {
+        emlMeta.tags = emlMeta.tags.filter((tag) => tag != event.detail.tag)
+        dispatch("tagsUpdated", event.detail)
+      }}
+    />
   </Row>
 
   <Row class="border-bottom p-1">

eml-client/src/components/EmlList.svelte

@@ -1,4 +1,7 @@
 <script>
+  import {
+    createEventDispatcher,
+  } from "svelte"
   import {
     ListGroup,
     ListGroupItem,
@@ -23,6 +26,8 @@
     //
   } = $props()
 
+  const dispatch = createEventDispatcher()
+
   let emls = $state(null)
   $effect(() => {
     api.listEml(query)
@@ -48,7 +53,11 @@
             : ""}
       >
         {#if emlMeta.Ok}
-          <EmlListItem emlMeta={emlMeta.Ok} {hideTags} />
+          <EmlListItem
+            emlMeta={emlMeta.Ok}
+            {hideTags}
+            on:tagsUpdated={(event) => dispatch("tagsUpdated", event.detail)}
+          />
         {:else}
           <div>
             {#if emlMeta.Err.id}

eml-client/src/components/EmlListItem.svelte

@@ -1,4 +1,7 @@
 <script>
+  import {
+    createEventDispatcher,
+  } from "svelte"
   import {
     Col,
     Row,
@@ -13,6 +16,8 @@
     //
   } = $props()
 
+  const dispatch = createEventDispatcher()
+
   $effect(() => {
     hideTags.add("unread")
   })
@@ -31,7 +36,14 @@
     </Col>
 
     <Col xs="3">
-      <TagBadges tags={emlMeta.tags.filter((t) => !hideTags.has(t))} />
+      <TagBadges
+        tags={emlMeta.tags.filter((t) => !hideTags.has(t))}
+        query={`id:${emlMeta.id}`}
+        on:tagsUpdated={(event) => {
+          emlMeta.tags = emlMeta.tags.filter((tag) => tag != event.detail.tag)
+          dispatch("tagsUpdated", event.detail)
+        }}
+      />
     </Col>
   </Row>
 

eml-client/src/components/TagBadges.svelte

@@ -1,24 +1,53 @@
 <script>
+  import {
+    createEventDispatcher,
+  } from "svelte"
   import {
     Badge,
   } from "@sveltestrap/sveltestrap"
 
+  import * as api from "../api.js"
+
   let {
     tags,
+    query = null,
   } = $props()
 
+  const dispatch = createEventDispatcher()
+
   const rgbForTag = (tag) => {
     const n = tag.split("")
       .reduce((acc, c) => acc + c.charCodeAt(0), 0) % 256
     return `rgb(${n}, ${n}, ${n})`
   }
+
+  const removeTag = (tag) => api.rmTag(query, tag)
+    .then(() => dispatch("tagsUpdated", {
+      tag,
+    }))
 </script>
 
 <h3 class="tags">
   {#each tags as tag}
     <span class="tag">
-      <Badge pill color="" style={`background-color: ${rgbForTag(tag)};`}>
+      <Badge
+        pill
+        color=""
+        class={query != null ? "tag-badge-removable" : ""}
+        style={`background-color: ${rgbForTag(tag)};`}
+      >
         {tag}
+        {#if query != null}
+          <button
+            type="button"
+            class="tag-remove"
+            aria-label={`Remove tag ${tag}`}
+            title={`Remove tag ${tag}`}
+            on:click|stopPropagation|preventDefault={() => removeTag(tag)}
+          >
+            ×
+          </button>
+        {/if}
       </Badge>
     </span>
   {/each}
@@ -29,4 +58,41 @@
     overflow: hidden;
     white-space: nowrap;
   }
+
+  .tag {
+    display: inline-block;
+    margin-right: 0.25rem;
+  }
+
+  :global(.tag-badge-removable) {
+    padding-right: 1.4rem;
+    position: relative;
+  }
+
+  .tag-remove {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.9);
+    border: 0;
+    border-radius: 999px;
+    color: #000;
+    display: inline-flex;
+    font-size: 0.75rem;
+    height: 1rem;
+    justify-content: center;
+    line-height: 1;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    right: -0.2rem;
+    top: -0.2rem;
+    transition: opacity 0.15s ease-in-out;
+    width: 1rem;
+  }
+
+  .tag:hover .tag-remove,
+  .tag .tag-remove:focus {
+    opacity: 1;
+    pointer-events: auto;
+  }
 </style>