[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>

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)

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;
   }
 }

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;
+        }
       }
     }
 

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>{{- "" -}}

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