add & update badges for tag input & tag filter with tag counts

Author: emma-sg

frontend/src/components/ui/tag-input.ts

@@ -17,6 +17,7 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import debounce from "lodash/fp/debounce";
 
 import type { UnderlyingFunction } from "@/types/utils";
+import { type WorkflowTags } from "@/types/workflow";
 import { dropdown } from "@/utils/css";
 
 export type Tags = string[];
@@ -116,7 +117,7 @@ export class TagInput extends LitElement {
   initialTags?: Tags;
 
   @property({ type: Array })
-  tagOptions: Tags = [];
+  tagOptions: WorkflowTags = [];
 
   @property({ type: Boolean })
   disabled = false;
@@ -259,10 +260,14 @@ export class TagInput extends LitElement {
               >
                 ${this.tagOptions
                   .slice(0, 3)
+                  .filter(({ tag }) => !this.tags.includes(tag))
                   .map(
-                    (tag) => html`
+                    ({ tag, count }) => html`
                       <sl-menu-item role="option" value=${tag}
-                        >${tag}</sl-menu-item
+                        >${tag}
+                        <btrix-badge pill variant="cyan" slot="suffix"
+                          >${count}</btrix-badge
+                        ></sl-menu-item
                       >
                     `,
                   )}

frontend/src/features/archived-items/file-uploader.ts

@@ -71,7 +71,7 @@ export class FileUploader extends BtrixElement {
   private collectionIds: string[] = [];
 
   @state()
-  private tagOptions: Tags = [];
+  private tagOptions: WorkflowTags = [];
 
   @state()
   private tagsToSave: Tags = [];
@@ -358,7 +358,7 @@ export class FileUploader extends BtrixElement {
   private readonly onTagInput = (e: TagInputEvent) => {
     const { value } = e.detail;
     if (!value) return;
-    this.tagOptions = this.fuse.search(value).map(({ item }) => item.tag);
+    this.tagOptions = this.fuse.search(value).map(({ item }) => item);
   };
 
   private async fetchTags() {

frontend/src/features/archived-items/item-metadata-editor.ts

@@ -47,7 +47,7 @@ export class CrawlMetadataEditor extends LiteElement {
   private includeName = false;
 
   @state()
-  private tagOptions: Tags = [];
+  private tagOptions: WorkflowTags = [];
 
   @state()
   private tagsToSave: Tags = [];
@@ -160,7 +160,7 @@ export class CrawlMetadataEditor extends LiteElement {
   private readonly onTagInput = (e: TagInputEvent) => {
     const { value } = e.detail;
     if (!value) return;
-    this.tagOptions = this.fuse.search(value).map(({ item }) => item.tag);
+    this.tagOptions = this.fuse.search(value).map(({ item }) => item);
   };
 
   private async fetchTags() {

frontend/src/features/crawl-workflows/workflow-editor.ts

@@ -262,7 +262,7 @@ export class WorkflowEditor extends BtrixElement {
   private showCrawlerChannels = false;
 
   @state()
-  private tagOptions: string[] = [];
+  private tagOptions: WorkflowTags = [];
 
   @state()
   private isSubmitting = false;
@@ -2531,7 +2531,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
   private readonly onTagInput = (e: TagInputEvent) => {
     const { value } = e.detail;
     if (!value) return;
-    this.tagOptions = this.fuse.search(value).map(({ item }) => item.tag);
+    this.tagOptions = this.fuse.search(value).map(({ item }) => item);
   };
 
   private async fetchTags() {

frontend/src/features/crawl-workflows/workflow-tag-filter.ts

@@ -249,7 +249,7 @@ export class WorkflowTagFilter extends BtrixElement {
             value=${tag.tag}
             ?checked=${checked}
             >${tag.tag}
-            <btrix-badge variant="high-contrast">${tag.count}</btrix-badge>
+            <btrix-badge pill variant="cyan">${tag.count}</btrix-badge>
           </sl-checkbox>
         </li>
       `;