From a6b63c2d2b6af9faeeacce7dead366a1a61900ad Mon Sep 17 00:00:00 2001
From: Djeex <djeex@djeex.fr>
Date: Fri, 22 Aug 2025 11:54:29 +0200
Subject: [PATCH] Added  tag validate button

---
 src/webui/gallery-editor/index.html         |  5 +---
 src/webui/js/{main.js => gallery-editor.js} | 31 +++++++++++++++++++--
 src/webui/style/style.css                   | 17 ++++++++++-
 3 files changed, 46 insertions(+), 7 deletions(-)
 rename src/webui/js/{main.js => gallery-editor.js} (92%)

diff --git a/src/webui/gallery-editor/index.html b/src/webui/gallery-editor/index.html
index 5234afb..55146c3 100644
--- a/src/webui/gallery-editor/index.html
+++ b/src/webui/gallery-editor/index.html
@@ -49,9 +49,6 @@
       </ul>
     </div>
   </div>
-  <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
-  <script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
-  <script src="{{ url_for('static', filename='js/build.js') }}" defer></script>
   <!-- Delete confirmation modal -->
   <div id="delete-modal" class="modal" style="display:none;">
     <div class="modal-content">
@@ -68,6 +65,6 @@
 {% endblock %}
 
 {% block scripts %}
-  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/gallery-editor.js') }}"></script>
   <script src="{{ url_for('static', filename='js/upload.js') }}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/src/webui/js/main.js b/src/webui/js/gallery-editor.js
similarity index 92%
rename from src/webui/js/main.js
rename to src/webui/js/gallery-editor.js
index 005aaf2..640e567 100644
--- a/src/webui/js/main.js
+++ b/src/webui/js/gallery-editor.js
@@ -92,6 +92,14 @@ function renderTags(imgIndex, tags) {
   input.placeholder = 'Add tag...';
   inputContainer.appendChild(input);
 
+  // --- Validate button ---
+  const validateBtn = document.createElement('button');
+  validateBtn.textContent = '✔️';
+  validateBtn.className = 'validate-tag-btn';
+  validateBtn.style.display = 'none'; // hidden by default
+  validateBtn.style.marginLeft = '4px';
+  inputContainer.appendChild(validateBtn);
+
   const suggestionBox = document.createElement('ul');
   suggestionBox.className = 'suggestions';
   inputContainer.appendChild(suggestionBox);
@@ -148,8 +156,14 @@ function renderTags(imgIndex, tags) {
     }
   };
 
-  input.addEventListener('input', updateSuggestions);
-  input.addEventListener('focus', updateSuggestions);
+  input.addEventListener('input', () => {
+    updateSuggestions();
+    validateBtn.style.display = input.value.trim() ? 'inline-block' : 'none';
+  });
+  input.addEventListener('focus', () => {
+    updateSuggestions();
+    validateBtn.style.display = input.value.trim() ? 'inline-block' : 'none';
+  });
 
   input.addEventListener('keydown', (e) => {
     const items = suggestionBox.querySelectorAll('li');
@@ -172,11 +186,13 @@ function renderTags(imgIndex, tags) {
       }
       input.value = '';
       updateSuggestions();
+      validateBtn.style.display = 'none';
     } else if ([' ', ','].includes(e.key)) {
       e.preventDefault();
       addTag(input.value);
       input.value = '';
       updateSuggestions();
+      validateBtn.style.display = 'none';
     }
   });
 
@@ -184,9 +200,20 @@ function renderTags(imgIndex, tags) {
     setTimeout(() => {
       suggestionBox.style.display = 'none';
       input.value = '';
+      validateBtn.style.display = 'none';
     }, 150);
   });
 
+  // --- Validate button action ---
+  validateBtn.onclick = () => {
+    if (input.value.trim()) {
+      addTag(input.value.trim());
+      input.value = '';
+      updateSuggestions();
+      validateBtn.style.display = 'none';
+    }
+  };
+
   input.focus();
   updateSuggestions();
 }
diff --git a/src/webui/style/style.css b/src/webui/style/style.css
index 4f2f146..f15b1c4 100644
--- a/src/webui/style/style.css
+++ b/src/webui/style/style.css
@@ -165,7 +165,6 @@ h2 {
 /* --- Tags --- */
 .tag-input {
   display: flex;
-  flex-wrap: wrap-reverse;
   align-content: flex-start;
   gap: 4px;
   padding: 4px;
@@ -889,3 +888,19 @@ justify-content: center;
     display: flex;
 }
 
+.photo button.validate-tag-btn {
+    border-radius: 30px;
+    border: none;
+    background: #049b3d;
+    color: #fff;
+    font-size: 10px;
+    cursor: pointer;
+    margin-left: 4px;
+    transition: all ease 0.2s;
+    width: 35px;
+    border: 1px solid #585858;
+}
+
+.photo button.validate-tag-btn:hover {
+  background: #02cb4e;
+} 
\ No newline at end of file