From 156a0fa9a87988435d2fe02a695386deaec21066 Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Thu, 16 Apr 2026 21:41:56 +0200
Subject: [PATCH] save button improved. see #680

---
 pages/menu_order/mzta-menu-order.css  | 22 +++++++++++-----------
 pages/menu_order/mzta-menu-order.html |  2 +-
 pages/menu_order/mzta-menu-order.js   | 20 ++++++++++++++------
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/pages/menu_order/mzta-menu-order.css b/pages/menu_order/mzta-menu-order.css
index 1aacf6f4..d09aa5cb 100644
--- a/pages/menu_order/mzta-menu-order.css
+++ b/pages/menu_order/mzta-menu-order.css
@@ -21,20 +21,12 @@ body {
     gap: 12px;
 }
 
-#btnSave {
-    padding: 6px 20px;
-    font-size: 1em;
-    cursor: pointer;
-}
-
-#btnSave:disabled {
-    opacity: 0.5;
-    cursor: default;
+#btnSaveAll {
+    float: left;
 }
 
 #msgDisplay {
-    font-size: 0.9em;
-    color: #2a7e2a;
+    padding-left: 40px;
 }
 
 #lists_container {
@@ -61,6 +53,9 @@ body {
     display: flex;
     gap: 4px;
     margin-bottom: 12px;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 0;
+    padding-left: 12px;
 }
 
 .sub_tab {
@@ -70,6 +65,7 @@ body {
     cursor: pointer;
     border-radius: 4px 4px 0 0;
     font-size: 0.9em;
+    margin-bottom: -1px;
 }
 
 .sub_tab.active {
@@ -218,6 +214,10 @@ body {
         background: #2a2a30;
     }
 
+    .sub_tabs {
+        border-bottom-color: #555;
+    }
+
     .sub_tab {
         border-color: #555;
         background: #333;
diff --git a/pages/menu_order/mzta-menu-order.html b/pages/menu_order/mzta-menu-order.html
index ad5fe728..6635951c 100644
--- a/pages/menu_order/mzta-menu-order.html
+++ b/pages/menu_order/mzta-menu-order.html
@@ -10,7 +10,7 @@
     <h1 class="page_title">__MSG_menu_order_title__</h1>
     <p class="info_text">__MSG_menu_order_info__</p>
     <div id="command_palette">
-      <button id="btnSave" disabled>__MSG_menu_order_save__</button>
+      <button id="btnSaveAll" disabled>__MSG_btnSaveAll_string__</button>
       <span id="msgDisplay"></span>
     </div>
     <div id="lists_container">
diff --git a/pages/menu_order/mzta-menu-order.js b/pages/menu_order/mzta-menu-order.js
index 743d892b..b3d74027 100644
--- a/pages/menu_order/mzta-menu-order.js
+++ b/pages/menu_order/mzta-menu-order.js
@@ -60,7 +60,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     renderContextList();
     initSubTabs();
 
-    document.getElementById('btnSave').addEventListener('click', saveAll);
+    document.getElementById('btnSaveAll').addEventListener('click', saveAll);
 
     i18n.updateDocument();
 });
@@ -301,9 +301,9 @@ function updatePositionsFromDOM(listEl, positionKey) {
 // ==================== Save ====================
 
 async function saveAll() {
-    const btnSave = document.getElementById('btnSave');
+    const btnSaveAll = document.getElementById('btnSaveAll');
     const msgDisplay = document.getElementById('msgDisplay');
-    btnSave.disabled = true;
+    btnSaveAll.disabled = true;
 
     const defaultPromptsToSave = allPrompts.filter(p => String(p.is_default) === '1' && String(p.is_special) !== '1');
     const customPromptsToSave = allPrompts.filter(p => String(p.is_default) === '0' && String(p.is_special) !== '1');
@@ -317,11 +317,19 @@ async function saveAll() {
 
     hasUnsavedChanges = false;
     msgDisplay.textContent = browser.i18n.getMessage('menu_order_saved');
-    setTimeout(() => { msgDisplay.textContent = ''; }, 3000);
+    msgDisplay.style.display = 'inline';
+    msgDisplay.style.color = 'green';
+    setTimeout(() => {
+        msgDisplay.textContent = '';
+        msgDisplay.style.display = 'none';
+    }, 3000);
 }
 
 function markUnsaved() {
     hasUnsavedChanges = true;
-    document.getElementById('btnSave').disabled = false;
-    document.getElementById('msgDisplay').textContent = '';
+    document.getElementById('btnSaveAll').disabled = false;
+    const msgDisplay = document.getElementById('msgDisplay');
+    msgDisplay.textContent = browser.i18n.getMessage('customPrompts_unsaved_changes');
+    msgDisplay.style.display = 'inline';
+    msgDisplay.style.color = 'red';
 }