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 @@
-
-
-
@@ -68,6 +65,6 @@
{% endblock %}
{% block scripts %}
-
+
{% 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