feat: revamped search bar for web client (#6948)

web/assets/css/transmission-app.scss

@@ -379,7 +379,24 @@ a {
 
   #torrent-search {
     width: 100%;
-    max-width: 160px;
+    min-width: 140px;
+    max-width: 226px;
+    padding-right: 24px; /* accommodate reset button */
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+
+  #reset {
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    right: 2px;
+    border: 0;
+    height: 20px;
+    width: 20px;
+    background: none;
   }
 
   select {

web/public_html/index.html

@@ -87,7 +87,10 @@
         <span>Show</span>
         <select id="filter-mode"></select>
         <select id="filter-tracker"></select>
+        <div style="display: flex; position: relative">
           <input type="search" id="torrent-search" placeholder="Filter" />
+          <input type="reset" id="reset" value="&times;" />
+        </div>
         <span id="filter-count">&nbsp;</span>
         <span class="flexible-space"></span>
         <div class="speed-container">

web/src/transmission.js

@@ -89,6 +89,8 @@ export class Transmission extends EventTarget {
     });
     this.popup = Array.from({ length: Transmission.max_popups }).fill(null);
 
+    this.busytyping = false;
+
     // listen to actions
     // TODO: consider adding a mutator listener here to see dynamic additions
     for (const element of document.querySelectorAll(`button[data-action]`)) {
@@ -244,6 +246,20 @@ export class Transmission extends EventTarget {
     e = document.querySelector('#filter-tracker');
     newOpts(e, null, [['All', Prefs.FilterAll]]);
 
+    const s = document.querySelector('#torrent-search');
+    e = document.querySelector('#reset');
+    e.addEventListener('click', () => {
+      s.value = '';
+      this._setFilterText(s.value);
+      this.refilterAllSoon();
+    });
+
+    if (s.value.trim()) {
+      this.filterText = s.value;
+      e.style.display = 'block';
+      this.refilterAllSoon();
+    }
+
     document.addEventListener('keydown', this._keyDown.bind(this));
     document.addEventListener('keyup', this._keyUp.bind(this));
     e = document.querySelector('#torrent-container');
@@ -418,7 +434,11 @@ export class Transmission extends EventTarget {
     e.classList.add(blur_token);
     e.addEventListener('blur', () => e.classList.add(blur_token));
     e.addEventListener('focus', () => e.classList.remove(blur_token));
-    e.addEventListener('keyup', () => this._setFilterText(e.value));
+    e.addEventListener('input', () => {
+      if (e.value.trim() !== this.filterText) {
+        this._setFilterText(e.value);
+      }
+    });
   }
 
   _onPrefChanged(key, value) {
@@ -760,8 +780,15 @@ export class Transmission extends EventTarget {
   }
 
   _setFilterText(search) {
-    this.filterText = search ? search.trim() : null;
+    clearTimeout(this.busytyping);
+    this.busytyping = setTimeout(
+      () => {
+        this.busytyping = false;
+        this.filterText = search.trim();
         this.refilterAllSoon();
+      },
+      search ? 250 : 0,
+    );
   }
 
   _onTorrentChanged(event_) {
@@ -1108,6 +1135,9 @@ TODO: fix this when notifications get fixed
       }
       this._rows = [];
       this.dirtyTorrents = new Set(Object.keys(this._torrents));
+
+      document.querySelector('#reset').style.display =
+        this.filterText.length > 0 ? 'block' : 'none';
     }
 
     // rows that overlap with dirtyTorrents need to be refiltered.