add pills

main.js

@@ -96,16 +96,30 @@ class OrgTodoListView extends ItemView {
 
         root.createEl("h4", { text: "TODO list" });
 
-        const input = root.createEl("input", {
+        const filterWrap = root.createDiv({ cls: "org-todo-filterwrap" });
+        this.pillsEl = filterWrap.createDiv({ cls: "org-todo-pills" });
+
+        const input = filterWrap.createEl("input", {
             type: "text",
             placeholder: "Filter… (text or #tag)",
         });
         input.addClass("org-todo-filter");
+        this.inputEl = input;
         input.addEventListener("input", () => {
             this.filterText = input.value.toLowerCase();
             this.renderList();
             this.renderTagBar();
         });
+        // Backspace on an empty box removes the last pill — standard token-input feel.
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Backspace" && input.value === "" && this.activeTags.size > 0) {
+                const last = [...this.activeTags].pop();
+                this.activeTags.delete(last);
+                this.renderPills();
+                this.renderList();
+                this.renderTagBar();
+            }
+        });
 
         const toggleWrap = root.createDiv({ cls: "org-todo-toggle" });
         const cb = toggleWrap.createEl("input", { type: "checkbox" });
@@ -123,6 +137,7 @@ class OrgTodoListView extends ItemView {
         this.tasks = await this.scanVault();
         this.renderList();
         this.renderTagBar();
+        this.renderPills();
     }
 
     async scanFile(file) {
@@ -177,6 +192,7 @@ class OrgTodoListView extends ItemView {
         this.tasks = this.tasks.filter((t) => t.file.path !== path);
         this.renderList();
         this.renderTagBar();
+        this.renderPills();
     }
 
     // Rescan one file and splice its tasks in, replacing its previous entries.
@@ -187,8 +203,22 @@ class OrgTodoListView extends ItemView {
         for (const t of fresh) this.tasks.push(t);
         this.renderList();
         this.renderTagBar();
+        this.renderPills();
+    }
+    renderPills() {
+        this.pillsEl.empty();
+        for (const tag of [...this.activeTags].sort()) {
+            const pill = this.pillsEl.createSpan({ cls: "org-todo-pill" });
+            pill.createSpan({ text: "#" + tag });
+            const x = pill.createSpan({ text: "×", cls: "org-todo-pill-x" });
+            x.addEventListener("click", () => {
+                this.activeTags.delete(tag);
+                this.renderPills();
+                this.renderList();
+                this.renderTagBar();
+            });
+        }
     }
-
     renderTagBar() {
         this.tagBarEl.empty();
 
@@ -215,6 +245,7 @@ class OrgTodoListView extends ItemView {
             chip.addEventListener("click", () => {
                 if (this.activeTags.has(tag)) this.activeTags.delete(tag);
                 else this.activeTags.add(tag);
+                this.renderPills();
                 this.renderList();
                 this.renderTagBar();
             });