From 7da77e6a489424d88f6c8e6e0a14986a4eb971f9 Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Tue, 15 Apr 2025 23:56:00 +0200
Subject: [PATCH] Refactor custom prompts layout for improved readability and
 maintainability. see #347

---
 _locales/en/messages.json                    |  4 ++++
 pages/customprompts/mzta-custom-prompts.css  |  4 ----
 pages/customprompts/mzta-custom-prompts.html |  2 +-
 pages/customprompts/mzta-custom-prompts.js   | 10 ++++++----
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 6a445b69..95c3d121 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -135,6 +135,10 @@
     "message": "Enable the diff viewer",
     "description": ""
   },
+  "customPrompts_form_label_use_diff_viewer_title": {
+    "message": "The diff viewer can be selected when the action is set to \"Substitute text\".",
+    "description": ""
+  },
   "customPrompts_form_required_fields": {
     "message": "Required fields",
     "description": ""
diff --git a/pages/customprompts/mzta-custom-prompts.css b/pages/customprompts/mzta-custom-prompts.css
index 80a25eac..d96b29ca 100644
--- a/pages/customprompts/mzta-custom-prompts.css
+++ b/pages/customprompts/mzta-custom-prompts.css
@@ -39,10 +39,6 @@ thead {
     float: right;
 }
 
-#checkboxUseDiffViewerNew_span{
-    display: none;
-}
-
 #btnSaveAll{
     float: left;
 }
diff --git a/pages/customprompts/mzta-custom-prompts.html b/pages/customprompts/mzta-custom-prompts.html
index 402e7a3c..d83bc66f 100644
--- a/pages/customprompts/mzta-custom-prompts.html
+++ b/pages/customprompts/mzta-custom-prompts.html
@@ -58,7 +58,7 @@
                 <br>
                 <input type="checkbox" id="checkboxDefineResponseLangNew" name="define_response_lang" value="1" tabindex="8"> <label for="checkboxDefineResponseLangNew">__MSG_customPrompts_form_label_define_response_lang__</label>
                 <br>
-                <span id="checkboxUseDiffViewerNew_span"><input type="checkbox" id="checkboxUseDiffViewerNew" name="use_diff_viewer" value="1" tabindex="9"> <label for="checkboxUseDiffViewerNew">__MSG_customPrompts_form_label_use_diff_viewer__</label></span>
+                <input type="checkbox" id="checkboxUseDiffViewerNew" name="use_diff_viewer" value="1" tabindex="9" title="__MSG_customPrompts_form_label_use_diff_viewer_title__"> <label for="checkboxUseDiffViewerNew" title="__MSG_customPrompts_form_label_use_diff_viewer_title__">__MSG_customPrompts_form_label_use_diff_viewer__</label>
             </td>
         </tr>
         <tr>
diff --git a/pages/customprompts/mzta-custom-prompts.js b/pages/customprompts/mzta-custom-prompts.js
index d3ee1a5a..7908bde4 100644
--- a/pages/customprompts/mzta-custom-prompts.js
+++ b/pages/customprompts/mzta-custom-prompts.js
@@ -62,6 +62,9 @@ document.addEventListener('DOMContentLoaded', async () => {
         e.preventDefault();
         e.target.disabled = true;
         document.getElementById('formNew').style.display = 'block';
+        let _checkboxUseDiffViewerNew = document.getElementById('checkboxUseDiffViewerNew');
+        _checkboxUseDiffViewerNew.checked = false;
+        _checkboxUseDiffViewerNew.disabled = true;
         window.scrollTo({
             top: 0,
             behavior: 'smooth'
@@ -122,14 +125,13 @@ document.addEventListener('DOMContentLoaded', async () => {
     var checkboxNeedCustomTextNew = document.getElementById('checkboxNeedCustomTextNew');
     var checkboxDefineResponseLangNew = document.getElementById('checkboxDefineResponseLangNew');
     var checkboxUseDiffViewerNew = document.getElementById('checkboxUseDiffViewerNew');
-    var checkboxUseDiffViewerNew_span = document.getElementById('checkboxUseDiffViewerNew_span');
 
     selectActionNew.addEventListener('change', (e) => {
         if (e.target.value === "2") {
-            checkboxUseDiffViewerNew_span.style.display = 'inline';
+            checkboxUseDiffViewerNew.disabled = false;
         } else {
             checkboxUseDiffViewerNew.checked = false;
-            checkboxUseDiffViewerNew_span.style.display = 'none';
+            checkboxUseDiffViewerNew.disabled = true;
         }
     });
 
@@ -474,7 +476,7 @@ function loadPromptsList(values){
                     <br>
                     <input type="checkbox" class="define_response_lang" disabled> __MSG_customPrompts_form_label_define_response_lang__
                     <br>
-                    <input type="checkbox" class="use_diff_viewer" disabled> __MSG_customPrompts_form_label_use_diff_viewer__
+                    <label title="__MSG_customPrompts_form_label_use_diff_viewer_title__"><input type="checkbox" class="use_diff_viewer" disabled> __MSG_customPrompts_form_label_use_diff_viewer__</label>
                     <br>
                     <input type="checkbox" class="enabled input_mod"> __MSG_customPrompts_form_label_enabled__
                     <span class="is_default hiddendata"></span>