[Minor] Add search syntax hint to history table filter input

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: moisseev <2275981+moisseev@users.noreply.github.com>

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 54310049b0f661870ef7b1f1cebc66f881a00a6e..592905012fbd662bed9d8f5f580fd87ea75d05a2 100644 (file)
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -420,6 +420,19 @@ table#symbolsTable input[type="number"] {
     display: none;
 }
 
+.search-syntax-icon {
+    position: absolute;
+    top: 50%;
+    transform: translate(-150%, -50%);
+    z-index: 3;
+    opacity: 0.3;
+    cursor: help;
+    transition: opacity 0.2s ease-in-out;
+}
+.search-syntax-icon:hover {
+    opacity: 0.6;
+}
+
 #history-from,
 #history-count,
 #history_page_size {

diff --git a/interface/js/app/libft.js b/interface/js/app/libft.js
index 29d2dcc41d8666ac6ee8aed20c201d601588c547..bf4286c0ad898c8a4e4c33a3c3413eff4cf5a14f 100644 (file)
--- a/interface/js/app/libft.js
+++ b/interface/js/app/libft.js
@@ -261,6 +261,21 @@ define(["jquery", "app/common", "footable"],
                 $create: function () {
                     this._super();
                     const self = this;
+
+                    if (self.$input && self.$input.length && !self.$input.parent().find(".search-syntax-icon").length) {
+                        self.$input.parent().css("position", "relative");
+                        const $icon = $("<i/>", {
+                            class: "fas fa-circle-question search-syntax-icon text-muted",
+                            title: "Search syntax: match all rows containing\n\n" +
+                                   "\"exact phrase\" — exact string (including spaces)\n" +
+                                   "term1 OR term2 — either term\n" +
+                                   "term1 AND term2 — both terms\n" +
+                                   "term1 term2 — both terms (same as AND)\n" +
+                                   "term1 -term2 — term1 but exclude rows with term2"
+                        });
+                        $icon.insertAfter(self.$input);
+                    }
+
                     const $form_grp = $("<div/>", {
                         class: "form-group d-inline-flex align-items-center"
                     }).append($("<label/>", {