Add button to clear trackings filter

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "fwdekker/death-notifier",
     "description": "Get notified when a famous person dies.",
-    "version": "0.14.1", "_comment_version": "Also update version in `package.json`!",
+    "version": "0.14.2", "_comment_version": "Also update version in `package.json`!",
     "type": "project",
     "license": "MIT",
     "homepage": "https://git.fwdekker.com/tools/death-notifier",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "death-notifier",
-    "version": "0.14.1", "_comment_version": "Also update version in `composer.json`!",
+    "version": "0.14.2", "_comment_version": "Also update version in `composer.json`!",
     "description": "Get notified when a famous person dies.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",

src/main/index.html

@@ -164,7 +164,10 @@
                     </p>
                     <form id="filterTrackingsForm" novalidate>
                         <label for="filterTrackingsQuery">Filter articles</label>
-                        <input id="filterTrackingsQuery" type="text" name="query" />
+                        <div class="inputWithButton">
+                            <input id="filterTrackingsQuery" type="text" name="query" />
+                            <button id="filterTrackingsClear" type="button">Clear</button>
+                        </div>
                     </form>
                     <div id="trackingsWrapper">
                         <table id="trackings">

src/main/js/Main.ts

@@ -560,8 +560,9 @@ doAfterLoad(() => {
 
 
     // Tracking management
+    const queryInput = $("#filterTrackingsQuery");
     $("#filterTrackingsForm").addEventListener("submit", (event: SubmitEvent) => event.preventDefault());
-    $("#filterTrackingsQuery").addEventListener("input", (event: InputEvent) => {
+    queryInput.addEventListener("input", (event: InputEvent) => {
         event.preventDefault();
 
         $("#trackingsNoMatches")?.remove();
@@ -588,6 +589,10 @@ doAfterLoad(() => {
             $("#trackings tbody").appendChild(row);
         }
     });
+    $("#filterTrackingsClear").addEventListener("click", () => {
+        queryInput.value = "";
+        queryInput.dispatchEvent(new InputEvent("input"));
+    });
 
     const addTrackingForm = $("#addTrackingForm");
     addTrackingForm.addEventListener("submit", (event: SubmitEvent) => {