WebUI: Highlight torrent category in context menu

This PR makes it possible to see common category of selected torrents in context menu. Everything should behave exactly like in GUI.

Closes #12701.
PR #21136.

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

@@ -306,6 +306,15 @@ a.propButton img {
     top: 3px;
 }
 
+#contextCategoryList img {
+    border: 1px solid transparent;
+    padding: 1px;
+}
+
+#contextCategoryList img.highlightedCategoryIcon {
+    background-color: hsl(213deg 94% 86%);
+}
+
 /* Sliders */
 
 .slider {

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

@@ -310,6 +310,7 @@ window.qBittorrent.ContextMenu ??= (() => {
             let all_are_auto_tmm = true;
             let there_are_auto_tmm = false;
             const tagCount = new Map();
+            const categoryCount = new Map();
 
             const selectedRows = torrentsTable.selectedRowsIds();
             selectedRows.forEach((item, index) => {
@@ -350,6 +351,10 @@ window.qBittorrent.ContextMenu ??= (() => {
                     const count = tagCount.get(tag);
                     tagCount.set(tag, ((count !== undefined) ? (count + 1) : 1));
                 }
+
+                const torrentCategory = data["category"];
+                const count = categoryCount.get(torrentCategory);
+                categoryCount.set(torrentCategory, ((count !== undefined) ? (count + 1) : 1));
             });
 
             // hide renameFiles when more than 1 torrent is selected
@@ -428,6 +433,14 @@ window.qBittorrent.ContextMenu ??= (() => {
                 checkbox.indeterminate = (hasCount ? isLesser : false);
                 checkbox.checked = (hasCount ? !isLesser : false);
             });
+
+            const contextCategoryList = document.getElementById("contextCategoryList");
+            category_list.forEach((category, categoryHash) => {
+                const categoryIcon = contextCategoryList.querySelector(`a[href$="(${categoryHash});"] img`);
+                const count = categoryCount.get(category.name);
+                const isEqual = ((count !== undefined) && (count === selectedRows.length));
+                categoryIcon.classList.toggle("highlightedCategoryIcon", isEqual);
+            });
         },
 
         updateCategoriesSubMenu: function(categoryList) {

src/webui/www/private/scripts/mocha-init.js

@@ -565,7 +565,10 @@ const initializeWindows = function() {
                 paddingVertical: 0,
                 paddingHorizontal: 0,
                 width: 400,
-                height: 150
+                height: 150,
+                onCloseComplete: function() {
+                    updateMainData();
+                }
             });
         }
     };
@@ -584,6 +587,9 @@ const initializeWindows = function() {
             data: {
                 hashes: hashes.join("|"),
                 category: categoryName
+            },
+            onSuccess: function() {
+                updateMainData();
             }
         }).send();
     };