[feat] preferences: button to copy input to restore preferences hash

3 files changed, 41 insertions, 16 deletions

diff --git a/searx/static/themes/simple/src/js/main/preferences.js b/searx/static/themes/simple/src/js/main/preferences.js
index 1e3ae5981..e9dc7c85c 100644
--- a/searx/static/themes/simple/src/js/main/preferences.js
+++ b/searx/static/themes/simple/src/js/main/preferences.js
@@ -26,5 +26,12 @@
     for (const el of d.querySelectorAll('[data-engine-name]')) {
       searxng.on(el, 'mouseenter', load_engine_descriptions);
     }
+
+    const copyHashButton = d.querySelector("#copy-hash");
+    searxng.on(copyHashButton, 'click', (e) => {
+      e.preventDefault();
+      navigator.clipboard.writeText(copyHashButton.dataset.hash);
+      copyHashButton.innerText = copyHashButton.dataset.copiedText;
+    });
   });
 })(window, document, window.searxng);
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index c22e4af38..88543e03b 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -33,6 +33,21 @@ table {
     width: 300px;
   }
 
+  input[type="text"] {
+    width: 13.25rem;
+    color: var(--color-toolkit-input-text-font);
+    border: none;
+    background: none repeat scroll 0 0 var(--color-toolkit-select-background);
+    padding: 0.2rem 0.4rem;
+    height: 2rem;
+    .rounded-corners-tiny;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-toolkit-select-background-hover);
+    }
+  }
+
   .value {
     margin: 0;
     padding: 0;
@@ -52,21 +67,6 @@ table {
       width: 14rem;
     }
 
-    input[type="text"] {
-      width: 13.25rem;
-      color: var(--color-toolkit-input-text-font);
-      border: none;
-      background: none repeat scroll 0 0 var(--color-toolkit-select-background);
-      padding: 0.2rem 0.4rem;
-      height: 2rem;
-      .rounded-corners-tiny;
-
-      &:hover,
-      &:focus {
-        background-color: var(--color-toolkit-select-background-hover);
-      }
-    }
-
     select:focus,
     input:focus {
       outline: none;
@@ -190,6 +190,23 @@ table {
       width: 100%;
     }
   }
+
+  #copy-hash-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    div.selectable_url {
+      pre {
+        width: auto;
+        flex-grow: 1;
+      }
+    }
+  }
+
+  #pref-hash-input {
+    width: 100%;
+  }
 }
 
 @media screen and (max-width: @tablet) {
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 29e0d99f9..90d91291b 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -111,7 +111,8 @@ footer {
 }
 
 input[type="submit"],
-#results button[type="submit"] {
+#results button[type="submit"],
+.button {
   padding: 0.7rem;
   display: inline-block;
   background: var(--color-btn-background);