Refactor sidebar settings templates and add info icons & tooltip

- Move sidebar settings templates from 'settings' to 'sidebar' directory
- Add new 'info' SVG icon for tooltips
- Update CSS styles for sidebar settings layout
- Improve tooltip positioning and styling
- Add info icons to each sidebar setting with descriptive tooltips

searx/static/themes/smart/css/ltr-style.css

@@ -362,7 +362,7 @@ img, video {
   position: absolute;
   bottom: 100%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -20%);
 }
 
 [tooltip]:before {
@@ -377,7 +377,7 @@ img, video {
   position: absolute;
   bottom: 100%;
   left: 50%;
-  transform: translate(calc(-50% - 1rem), 100%);
+  transform: translate(calc(-50% - 1rem), 40%);
 }
 
 [tooltip]:hover:after, [tooltip]:hover:before {
@@ -1035,7 +1035,7 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   padding: 1rem;
   transition: margin-left 50ms ease-in-out;
   position: absolute;
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 
 #sidebar > .container :is(button, .btn) {
@@ -1051,6 +1051,7 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 }
 
 #sidebar > .container fieldset {
+  margin-bottom: .5rem;
   padding: .5rem 0;
 }
 
@@ -1063,6 +1064,21 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   display: flex;
 }
 
+#sidebar > .container fieldset .container .name {
+  align-items: center;
+  gap: .5rem;
+  display: flex;
+}
+
+#sidebar > .container fieldset .container .name:not(#pref_safesearch)[tooltip]:after {
+  left: 100%;
+}
+
+#sidebar > .container fieldset .container .name svg {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
 #sidebar > .container fieldset .container select {
   background-color: var(--background-color);
   color: var(--text-color);
@@ -1074,7 +1090,7 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 #sidebar > .container fieldset .description {
   text-align: justify;
   color: var(--text-color);
-  margin: .5rem;
+  margin: 1rem 1rem 0;
   font-size: .8rem;
 }
 

searx/static/themes/smart/css/rtl-style.css

@@ -308,7 +308,7 @@ img, video {
   position: absolute;
   bottom: 100%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -20%);
 }
 
 [tooltip]:before {
@@ -323,7 +323,7 @@ img, video {
   position: absolute;
   bottom: 100%;
   left: 50%;
-  transform: translate(calc(-50% - 1rem), 100%);
+  transform: translate(calc(-50% - 1rem), 40%);
 }
 
 [tooltip]:hover:after, [tooltip]:hover:before {
@@ -981,7 +981,7 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   padding: 1rem;
   transition: margin-left 50ms ease-in-out;
   position: absolute;
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 
 #sidebar > .container :is(button, .btn) {
@@ -997,6 +997,7 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 }
 
 #sidebar > .container fieldset {
+  margin-bottom: .5rem;
   padding: .5rem 0;
 }
 
@@ -1009,6 +1010,21 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   display: flex;
 }
 
+#sidebar > .container fieldset .container .name {
+  align-items: center;
+  gap: .5rem;
+  display: flex;
+}
+
+#sidebar > .container fieldset .container .name:not(#pref_safesearch)[tooltip]:after {
+  left: 100%;
+}
+
+#sidebar > .container fieldset .container .name svg {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
 #sidebar > .container fieldset .container select {
   background-color: var(--background-color);
   color: var(--text-color);
@@ -1020,7 +1036,7 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 #sidebar > .container fieldset .description {
   text-align: justify;
   color: var(--text-color);
-  margin: .5rem;
+  margin: 1rem 1rem 0;
   font-size: .8rem;
 }
 

searx/static/themes/smart/scripts/svg2jinja.js

@@ -9,6 +9,7 @@ const svgList = {
   search: "node_modules/remixicon/icons/System/search-line.svg",
   close: "node_modules/remixicon/icons/System/close-line.svg",
   plugin: "node_modules/remixicon/icons/Development/puzzle-2-fill.svg",
+  info: "node_modules/remixicon/icons/System/information-2-fill.svg",
 };
 
 const ejs = require("ejs"),

searx/static/themes/smart/src/scss/_tooltip.scss

@@ -9,7 +9,7 @@
     position: absolute;
     bottom: 100%;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, -20%);
     background: var(--tooltip-background-color);
     color: var(--filled-text-color);
     padding: .25rem 1rem;
@@ -25,7 +25,7 @@
     position: absolute;
     bottom: 100%;
     left: 50%;
-    transform: translate(calc(-50% - 1rem), 100%);
+    transform: translate(calc(-50% - 1rem), 40%);
     white-space: nowrap;
     z-index: 1;
     opacity: 0;

searx/static/themes/smart/src/scss/style.scss

@@ -343,6 +343,7 @@ body:has(.sidebar_btn[open]) {
         width: 100%;
         height: 100%;
         overflow-y: auto;
+        overflow-x: hidden;
         position: absolute;
         min-width: $screen-xs - 2rem;
         padding: 1rem;
@@ -362,6 +363,7 @@ body:has(.sidebar_btn[open]) {
         }
 
         fieldset {
+            margin-bottom: .5rem;
             padding: .5rem 0;
 
             .container {
@@ -372,6 +374,22 @@ body:has(.sidebar_btn[open]) {
                 flex-wrap: wrap;
                 gap: .5rem;
 
+
+                .name {
+                    display: flex;
+                    gap: .5rem;
+                    align-items: center;
+
+                    &:not(#pref_safesearch)[tooltip]::after {
+                        left: 100%;
+                    }
+
+                    svg {
+                        height: 1.2rem;
+                        width: 1.2rem;
+                    }
+                }
+
                 select {
                     padding: .5rem 1rem;
                     background-color: var(--background-color);
@@ -382,7 +400,7 @@ body:has(.sidebar_btn[open]) {
             }
 
             .description {
-                margin: .5rem;
+                margin: 1rem 1rem 0;
                 text-align: justify;
                 color: var(--text-color);
                 font-size: .8rem;

searx/templates/smart/icons.html

@@ -10,6 +10,7 @@
   'search':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/></svg>',
   'close':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"/></svg>',
   'plugin':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4C14 4.35064 13.9398 4.68722 13.8293 5H20C20.5523 5 21 5.44772 21 6V9.12602C21 9.43517 20.857 9.72694 20.6127 9.91635C20.3683 10.1058 20.0501 10.1715 19.7507 10.0945C19.5119 10.033 19.2605 10 19 10C17.3431 10 16 11.3431 16 13C16 14.6569 17.3431 16 19 16C19.2605 16 19.5119 15.967 19.7507 15.9055C20.0501 15.8285 20.3683 15.8942 20.6127 16.0836C20.857 16.2731 21 16.5648 21 16.874V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H8.17071C8.06015 4.68722 8 4.35064 8 4Z"/></svg>',
+  'info':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 9.5C12.8284 9.5 13.5 8.82843 13.5 8C13.5 7.17157 12.8284 6.5 12 6.5C11.1716 6.5 10.5 7.17157 10.5 8C10.5 8.82843 11.1716 9.5 12 9.5ZM14 15H13V10.5H10V12.5H11V15H10V17H14V15Z"/></svg>',
 
 }
 -%}

searx/templates/smart/madules/sidebar.html

@@ -8,21 +8,21 @@
             autocomplete="off"
         >
             {%- if 'language' not in locked_preferences -%} {%- include
-            'smart/madules/settings/language.html' -%} {% endif %} {%- if
+            'smart/madules/sidebar/language.html' -%} {% endif %} {%- if
             'autocomplete' not in locked_preferences -%} {%- include
-            'smart/madules/settings/autocomplete.html' -%} {%- endif -%} {%- if
+            'smart/madules/sidebar/autocomplete.html' -%} {%- endif -%} {%- if
             'safesearch' not in locked_preferences -%} {%- include
-            'smart/madules/settings/safe_search.html' -%} {%- endif -%} {%- if
+            'smart/madules/sidebar/safe_search.html' -%} {%- endif -%} {%- if
             'ui_locale' not in locked_preferences -%} {%- include
-            'smart/madules/settings/interface_lang.html' -%} {%- endif -%} {%-
-            if 'results_on_new_tab' not in locked_preferences -%} {%- include
-            'smart/madules/settings/results_on_new_tab.html' -%} {%- endif -%}
+            'smart/madules/sidebar/interface_lang.html' -%} {%- endif -%} {%- if
+            'results_on_new_tab' not in locked_preferences -%} {%- include
+            'smart/madules/sidebar/results_on_new_tab.html' -%} {%- endif -%}
             {%- if 'infinite_scroll' not in locked_preferences -%} {%- include
-            'smart/madules/settings/infinite_scroll.html' -%} {%- endif -%} {%-
+            'smart/madules/sidebar/infinite_scroll.html' -%} {%- endif -%} {%-
             if 'method' not in locked_preferences -%} {%- include
-            'smart/madules/settings/http_method.html' -%} {%- endif -%} {%- if
+            'smart/madules/sidebar/http_method.html' -%} {%- endif -%} {%- if
             'image_proxy' not in locked_preferences -%} {%- include
-            'smart/madules/settings/image_proxy.html' -%} {%- endif -%}
+            'smart/madules/sidebar/image_proxy.html' -%} {%- endif -%}
 
             <button type="submit" class="primary full-width">
                 {{- _('Save') -}}

searx/templates/smart/madules/sidebar/autocomplete.html

@@ -0,0 +1,16 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+    <div class="container">
+        <legend id="pref_autocomplete" tooltip="{{- _('Find stuff as you type') }}" class="name"><span>{{- _('Autocomplete') -}}</span> {{- icon_small('info') -}}</legend>
+        <select name="autocomplete" aria-labelledby="pref_autocomplete">
+        <option value=""> - </option>
+        {%- for backend in autocomplete_backends -%}
+            <option value="{{ backend }}"
+            {%- if backend == autocomplete %} selected="selected" {%- endif -%}>
+            {{- backend -}}
+            </option>
+        {%- endfor -%}
+        </select>
+    </div>
+</fieldset>  

searx/templates/smart/madules/sidebar/http_method.html

@@ -0,0 +1,15 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+  <div class="container">
+    <legend id="pref_http_method" class="name" tooltip="{{- _('Change how forms are submitted') }}"><span>{{- _('HTTP method') -}}</span>  <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods" rel="external">{{ icon_small('info') }}</a></legend>
+    <select name='method' aria-labelledby="pref_http_method">
+      <option value="POST"
+              {%- if method == 'POST' %} selected="selected"{%- endif -%}>POST
+      </option>
+      <option value="GET"
+              {%- if method == 'GET' %} selected="selected"{%- endif -%}>GET
+      </option>
+    </select>
+  </div>
+</fieldset>

searx/templates/smart/madules/sidebar/image_proxy.html

@@ -0,0 +1,16 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+    <div class="container">
+        <legend
+            id="pref_image_proxy"
+            class="name"
+            tooltip="{{- _('Proxy image results through SearXNG') }}"
+        >
+            <span>{{- _('Image proxy') -}}</span> {{- icon_small('info') -}}
+        </legend>
+        <input type="checkbox" name="image_proxy"
+        aria-labelledby="pref_image_proxy" class="switch" {%- if
+        preferences.get_value('image_proxy') -%} checked {%- endif -%} >
+    </div>
+</fieldset>

searx/templates/smart/madules/sidebar/infinite_scroll.html

@@ -0,0 +1,16 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+    <div class="container">
+        <legend
+            id="pref_infinite_scroll"
+            class="name"
+            tooltip="{{ _('Automatically load next page when scrolling to bottom of current page') }}"
+        >
+            <span>{{- _('Infinite scroll') -}}</span> {{- icon_small('info') -}}
+        </legend>
+        <input type="checkbox" name="infinite_scroll" class="switch"
+        aria-labelledby="pref_infinite_scroll" {%- if
+        preferences.get_value('infinite_scroll') -%} checked {%- endif -%} >
+    </div>
+</fieldset>

searx/templates/smart/madules/sidebar/interface_lang.html

@@ -0,0 +1,16 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+    <div class="container">
+        <legend id="pref_ui_locale" class="name" tooltip="{{- _('Change the language of the layout') -}}"><span>{{- _('Interface language') -}}</span> {{- icon_small('info') -}}</legend>
+        <select name='locale' aria-labelledby="pref_ui_locale" 
+        {%- for locale_id,locale_name in locales.items() | sort -%}
+            <option value="{{ locale_id }}"
+                    {%- if locale_id == current_locale %} selected="selected" {%- endif %}>
+                    {{- locale_name -}}
+            </option>
+        {%- endfor -%}
+        </select>
+    </div>
+</fieldset>
+  

searx/templates/smart/madules/sidebar/language.html

@@ -0,0 +1,28 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+    <div class="container">
+        <legend id="pref_language" class="name" tooltip="{{- _('What language do you prefer for search?') }}"><span>{{- _('Search language') -}}</span>{{ icon_small("info") }}</legend>
+        <select name="language" aria-labelledby="pref_language" aria-describedby="desc_language">
+            <option value="all"
+                    {%- if current_language == 'all' %} selected="selected" {%- endif -%}>
+                    {{- _('Default language') }} [all]
+            </option>
+            <option value="auto"
+                    {%- if current_language == 'auto' %} selected="selected" {%- endif -%}>
+                    {{- _('Auto-detect') }} [auto]
+            </option>
+            {% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
+              <option value="{{ sxng_tag }}"
+                      {%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
+                      {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
+                     [{{sxng_tag}}]
+                      {%- if flag -%}{{ flag }}{%- endif -%}
+              </option>
+            {%- endfor -%}
+        </select>
+    </div>
+    <div class="description" id="desc_language">
+        {{- _('Choose Auto-detect to let SearXNG detect the language of your query.') -}}
+    </div>
+</fieldset>

searx/templates/smart/madules/sidebar/results_on_new_tab.html

@@ -0,0 +1,16 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+    <div class="container">
+        <legend
+            id="pref_results_on_new_tab"
+            class="name"
+            tooltip="{{- _('Open result links on new browser tabs') -}}"
+        >
+            <span>{{ _('Results on new tabs') }}</span>{{icon_small("info")}}
+        </legend>
+        <input type="checkbox" name="results_on_new_tab" class="switch"
+        aria-labelledby="pref_results_on_new_tab" {%- if
+        preferences.get_value('results_on_new_tab') -%} checked {%- endif -%} >
+    </div>
+</fieldset>

searx/templates/smart/madules/sidebar/safe_search.html

@@ -0,0 +1,22 @@
+{% from 'smart/icons.html' import icon_small %}
+
+<fieldset>
+    <div class="container">
+        <legend id="pref_safesearch" class="name" tooltip="{{- _('Filter content') -}}"><span>{{- _('SafeSearch') -}}</span> {{icon_small('info')}}</legend>
+          <select name='safesearch' aria-labelledby="pref_safesearch" >
+            <option value="2"
+                    {%- if safesearch == '2' %} selected="selected" {%- endif -%}>
+                    {{- _('Strict') -}}
+            </option>
+            <option value="1"
+                    {%- if safesearch == '1' %} selected="selected" {%- endif -%}>
+                    {{- _('Moderate') -}}
+            </option>
+            <option value="0"
+                    {%- if safesearch == '0' %} selected="selected" {%- endif -%}>
+                    {{- _('None') -}}
+            </option>
+        </select>
+    </div>
+</fieldset>
+