WebUI: Add support for running concurrent searches

This PR adds support for running multiple concurrent searches in the Web UI. This is already supported in the GUI as well as by the Web API. Behavior mimics the GUI as closely as possible.

All filters and sorting are preserved per-tab, allowing you to apply unique filters and sorts to each of your searches. Row selection is also preserved across tab navigation.

Closes qbittorrent#12840.
PR qbittorrent#20593.

.pre-commit-config.yaml

@@ -67,7 +67,7 @@ repos:
     hooks:
     - id: codespell
       name: Check spelling (codespell)
-      args: ["--ignore-words-list", "additionals,curren,fo,ist,ket,superseeding,te,ths"]
+      args: ["--ignore-words-list", "additionals,curren,fo,ist,ket,searchin,superseeding,te,ths"]
       exclude: |
         (?x)^(
           .*\.desktop |

src/webui/www/private/css/style.css

@@ -667,9 +667,9 @@ td.statusBarSeparator {
 }
 
 #searchResultsTableContainer {
-    -moz-height: calc(100% - 140px);
-    -webkit-height: calc(100% - 140px);
-    height: calc(100% - 140px);
+    -moz-height: calc(100% - 177px);
+    -webkit-height: calc(100% - 177px);
+    height: calc(100% - 177px);
     overflow: auto;
 }
 

src/webui/www/private/scripts/dynamicTable.js

@@ -516,16 +516,20 @@ window.qBittorrent.DynamicTable = (function() {
             return LocalPreferences.get('sorted_column_' + this.dynamicTableDivId);
         },
 
-        setSortedColumn: function(column) {
+        /**
+         * @param {string} column name to sort by
+         * @param {string|null} reverse defaults to implementation-specific behavior when not specified. Should only be passed when restoring previous state.
+         */
+        setSortedColumn: function(column, reverse = null) {
             if (column != this.sortedColumn) {
                 const oldColumn = this.sortedColumn;
                 this.sortedColumn = column;
-                this.reverseSort = '0';
+                this.reverseSort = reverse ?? '0';
                 this.setSortedColumnIcon(column, oldColumn, false);
             }
             else {
                 // Toggle sort order
-                this.reverseSort = this.reverseSort === '0' ? '1' : '0';
+                this.reverseSort = reverse ?? (this.reverseSort === '0' ? '1' : '0');
                 this.setSortedColumnIcon(column, null, (this.reverseSort === '1'));
             }
             LocalPreferences.set('sorted_column_' + this.dynamicTableDivId, column);