[mod] in the preference page, show !bang of subgrouping categories

The names of the subgrouping categories in the preference page are translated,
to use this categories the user needs to know by which !bang the category can be
selected.  Related to "Make 'non tab category' bangs discoverable" in [#690].

Related:

- [#690] https://github.com/searxng/searxng/issues/690
- https://github.com/searxng/searxng/issues/1604
- https://github.com/searxng/searxng/pull/1545

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

6 files changed, 63 insertions, 26 deletions

diff --git a/docs/admin/engines/configured_engines.rst b/docs/admin/engines/configured_engines.rst
index fa1e5a4b0..9507c77df 100644
--- a/docs/admin/engines/configured_engines.rst
+++ b/docs/admin/engines/configured_engines.rst
@@ -6,49 +6,66 @@ Configured Engines
 
 .. sidebar:: Further reading ..
 
+   - :ref:`settings categories_as_tabs`
    - :ref:`engines-dev`
    - :ref:`settings engine`
-
-Explanation of the :ref:`general engine configuration` shown in the table
-:ref:`configured engines`.
+   - :ref:`general engine configuration`
 
 .. jinja:: searx
 
-   SearXNG supports {{engines | length}} search engines (of which {{enabled_engine_count}} are enabled by default).
+   SearXNG supports {{engines | length}} search engines of which
+   {{enabled_engine_count}} are enabled by default.
+
+   Engines can be assigned to multiple :ref:`categories <engine categories>`.
+   The UI displays the tabs that are configured in :ref:`categories_as_tabs
+   <settings categories_as_tabs>`.  In addition to these UI categories (also
+   called *tabs*), engines can be queried by their name or the categories they
+   belong to, by using a :ref:`\!bing syntax <search-syntax>`.
+
+.. contents:: Contents
+   :depth: 2
+   :local:
+   :backlinks: entry
+
+.. jinja:: searx
 
    {% for category, engines in categories_as_tabs.items() %}
 
-   {{category}} search engines
+   tab ``!{{category.replace(' ', '_')}}``
    ---------------------------------------
 
-   {% for group, engines in engines | group_engines_in_tab %}
+   {% for group, group_bang, engines in engines | group_engines_in_tab %}
 
    {% if loop.length > 1 %}
-   {{group}}
+   {% if group_bang %}group ``{{group_bang}}``{% else %}{{group}}{% endif %}
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    {% endif %}
 
    .. flat-table::
       :header-rows: 2
       :stub-columns: 1
+      :widths: 10 1 10 1 1 1 1 1 1 1
 
       * - :cspan:`5` Engines configured by default (in :ref:`settings.yml <engine settings>`)
         - :cspan:`3` :ref:`Supported features <engine file>`
 
       * - Name
-        - Shortcut
+        - !bang
         - Module
         - Disabled
         - Timeout
         - Weight
         - Paging
-        - Language, Region
+        - Locale
         - Safe search
         - Time range
 
       {% for mod in engines %}
 
       * - `{{mod.name}} <{{mod.about and mod.about.website}}>`_
+          {%- if mod.about and  mod.about.language %}
+          ({{mod.about.language | upper}})
+          {%- endif %}
         - ``!{{mod.shortcut}}``
         - {%- if 'searx.engines.' + mod.__name__ in documented_modules %}
           :py:mod:`~searx.engines.{{mod.__name__}}`
@@ -56,9 +73,6 @@ Explanation of the :ref:`general engine configuration` shown in the table
           :origin:`{{mod.__name__}} <searx/engines/{{mod.__name__}}.py>`
           {%- endif %}
         - {{(mod.disabled and "y") or ""}}
-          {%- if mod.about and  mod.about.language %}
-          ({{mod.about.language | upper}})
-          {%- endif %}
         - {{mod.timeout}}
         - {{mod.weight or 1 }}
         {% if mod.engine_type == 'online' %}
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index ef6b02b2c..e5a11ff2b 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -113,8 +113,8 @@
   --color-toolkit-engine-tooltip-background: #fff;
   --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
   --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
-  --color-doc-code: #300;
-  --color-doc-code-background: #fdd;
+  --color-doc-code: #003;
+  --color-doc-code-background: #ddeaff;
 }
 
 .dark-themes() {
@@ -225,8 +225,8 @@
   --color-toolkit-engine-tooltip-background: #222;
   --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
   --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
-  --color-doc-code: #fdd;
-  --color-doc-code-background: #300;
+  --color-doc-code: #ddd;
+  --color-doc-code-background: #4d5a6f;
 }
 
 /// Dark Theme (autoswitch based on device pref)
diff --git a/searx/static/themes/simple/src/less/info.less b/searx/static/themes/simple/src/less/info.less
index 8c83c379d..f354135d2 100644
--- a/searx/static/themes/simple/src/less/info.less
+++ b/searx/static/themes/simple/src/less/info.less
@@ -1,9 +1,10 @@
 .info-page {
   code {
     font-family: monospace;
-    color: var(--color-doc-code);
+    .rounded-corners-tiny;
     background-color: var(--color-doc-code-background);
-    padding: 2px 5px;
-    .rounded-corners(5px);
+    color: var(--color-doc-code);
+    padding: 0.2rem;
+    border: 0 none;
   }
 }
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index 6913bbb90..4f446245a 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -72,6 +72,15 @@
     font-size: 90%;
   }
 
+  .bang {
+    .ltr-text-align-left();
+    .rounded-corners-tiny;
+    background-color: var(--color-doc-code-background);
+    color: var(--color-doc-code);
+    padding: 0.2rem;
+    border: 0 none;
+  }
+
   table {
     border-collapse: collapse;
   }
@@ -114,6 +123,10 @@
         .engine-description {
           margin-top: 0.5rem;
         }
+
+        .bang {
+          margin: 0.3rem;
+        }
       }
     }
 
diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html
index 70c150581..170dffa39 100644
--- a/searx/templates/simple/preferences.html
+++ b/searx/templates/simple/preferences.html
@@ -32,7 +32,8 @@
       {{ _('View error logs and submit a bug report') -}}
     </a>
     {%- endif -%}
-
+    <p><span class="right">{{ _("!bang for this engine") }}</span>{% for bang in [search_engine.name] + [search_engine.shortcut] %}<span class="bang"> {{ '!' + bang.replace(' ', '_') }}</span>{% endfor %}</p>
+    <p><span class="right">{{ _("!bang for its categories") }}</span>{% for bang in search_engine.categories %}<span class="bang"> {{ '!' + bang.replace(' ', '_') }}</span>{% endfor %}</p>
 </div>
 {%- endif -%}
 {%- endmacro %}
@@ -309,7 +310,7 @@
       <tr>{{- "" -}}
         <th class="engine_checkbox">{{ _("Allow") }}</th>{{- "" -}}
         <th class="name">{{ _("Engine name") }}</th>{{- "" -}}
-        <th class="shortcut">{{ _("!bang") }}</th>{{- "" -}}
+        <th class="shortcut">{{ _("Bang") }}</th>{{- "" -}}
         <th>{{ _("Supports selected language") }}</th>{{- "" -}}
         <th>{{ _("SafeSearch") }}</th>{{- "" -}}
         <th>{{ _("Time range") }}</th>{{- "" -}}
@@ -317,9 +318,12 @@
         <th>{{ _("Max time") }}</th>{{- "" -}}
         {%- if enable_metrics %}<th>{{ _("Reliability") }}</th>{% endif -%}
       </tr>
-      {% for group, engines in engines_by_category[categ] | group_engines_in_tab %}
+      {% for group, group_bang, engines in engines_by_category[categ] | group_engines_in_tab %}
       {% if loop.length > 1 %}
-      <tr><th colspan="9" class="engine-group">{{_(group)}}</th></tr>
+      <tr>
+        <th class="engine-group" colspan="2">{{_(group)}}</th>
+        <th class="engine-group" colspan="7">{% if group_bang %}<span class="bang">{{group_bang}}</span>{% endif %}</th>
+      </tr>{{- "" -}}
       {% endif %}
       {% for search_engine in engines %}
       {% if not search_engine.private %}
@@ -329,13 +333,13 @@
         <th class="name" data-engine-name="{{ search_engine.name }}">{% if search_engine.enable_http %}{{ icon_big('warning', 'No HTTPS') }}{% endif -%}
           <label for="{{ engine_id }}">
             {{- search_engine.name -}}
-            {%- if search_engine.about and search_engine.about.language -%}
+            {%- if search_engine.about and search_engine.about.language %}
               ({{search_engine.about.language | upper}})
             {%- endif -%}
           </label>
           {{- engine_about(search_engine) -}}
         </th>{{- "" -}}
-        <td class="shortcut">{{ shortcuts[search_engine.name] }}</td>{{- "" -}}
+        <td class="shortcut"><span class="bang">{{ '!' + shortcuts[search_engine.name] }}</span></td>{{- "" -}}
         <td>{{ checkbox(None, supports[search_engine.name]['supports_selected_language'], true) }}</td>{{- "" -}}
         <td>{{ checkbox(None, supports[search_engine.name]['safesearch'], true) }}</td>{{- "" -}}
         <td>{{ checkbox(None, supports[search_engine.name]['time_range_support'], true) }}</td>{{- "" -}}
diff --git a/searx/webutils.py b/searx/webutils.py
index 4b11a15af..470833291 100644
--- a/searx/webutils.py
+++ b/searx/webutils.py
@@ -242,4 +242,9 @@ def group_engines_in_tab(engines: Iterable[Engine]) -> List[Tuple[str, Iterable[
     subgroups = itertools.groupby(sorted(engines, key=get_subgroup), get_subgroup)
     sorted_groups = sorted(((name, list(engines)) for name, engines in subgroups), key=group_sort_key)
 
-    return [(groupname, sorted(engines, key=engine_sort_key)) for groupname, engines in sorted_groups]
+    ret_val = []
+    for groupname, engines in sorted_groups:
+        group_bang = '!' + groupname.replace(' ', '_') if groupname != NO_SUBGROUPING else ''
+        ret_val.append((groupname, group_bang, sorted(engines, key=engine_sort_key)))
+
+    return ret_val