From 6fe2e79bff74c280192d1665f36de23ea59d1f06 Mon Sep 17 00:00:00 2001
From: muehe <muehe@muehe.org>
Date: Fri, 1 May 2026 14:28:15 +0200
Subject: [PATCH] settings: unify W axis save into master Save button

- Drop the in-form 'Save W Axis Settings' button. The Svelte
  WAxisSettings component now listens for a global onefin:save-all
  event and PUTs aux/config/save when fired.
- Vue root's save() dispatches that event after saving config.json,
  so a single click of the master Save button persists both the
  controller config and aux.json atomically.
- Editing any W axis field triggers onefin:dirty, which the Vue
  root catches to set modified=true so the master Save lights up
  with the unsaved-changes indicator.
---
 src/js/app.js                                 | 16 +++++-
 .../src/components/WAxisSettings.svelte       | 54 ++++++++++---------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/src/js/app.js b/src/js/app.js
index 9f8aca3..31463cc 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -369,6 +369,13 @@ module.exports = new Vue({
     ready: function() {
         window.onhashchange = () => this.parse_hash();
 
+        // Embedded Svelte subviews (W axis settings, etc.) signal
+        // unsaved changes via this event. The master Save button
+        // highlights when modified is true.
+        window.addEventListener("onefin:dirty", () => {
+            this.modified = true;
+        });
+
 
 
         // Resolve the initial route before the websocket connects so
@@ -673,9 +680,16 @@ module.exports = new Vue({
 
             this.config["selected-tool-settings"][selected_tool] = settings;
             this.display_units = this.config.settings["units"];
-            
+
             try {
                 await api.put("config/save", this.config);
+                // Notify any embedded Svelte subviews that own their
+                // own persistence (W axis -> aux.json, etc.) that
+                // the user just hit the master Save button. They
+                // listen for `onefin:save-all` and PUT their state.
+                try {
+                    window.dispatchEvent(new CustomEvent("onefin:save-all"));
+                } catch (_e) {}
                 this.modified = false;
             } catch (error) {
                 console.error("Save failed:", error);
diff --git a/src/svelte-components/src/components/WAxisSettings.svelte b/src/svelte-components/src/components/WAxisSettings.svelte
index e5c4959..b8daf5c 100644
--- a/src/svelte-components/src/components/WAxisSettings.svelte
+++ b/src/svelte-components/src/components/WAxisSettings.svelte
@@ -31,10 +31,19 @@
     let cfg: AuxConfig | null = null;
     let status: { enabled: boolean; present: boolean; homed: boolean; pos_mm: number } | null = null;
     let busy = false;
-    let saveMessage = "";
+
+    // Listen for the global "save-all" event the Vue root dispatches
+    // when the user clicks the master Save button. We persist our
+    // current cfg the same way the in-form button used to. This way
+    // the user only ever needs one Save button.
+    function onGlobalSave() {
+        save().catch(e => console.error("aux save failed:", e));
+    }
 
     onMount(async () => {
         await refresh();
+        window.addEventListener("onefin:save-all", onGlobalSave);
+        return () => window.removeEventListener("onefin:save-all", onGlobalSave);
     });
 
     async function refresh() {
@@ -49,19 +58,28 @@
     async function save() {
         if (!cfg) return;
         busy = true;
-        saveMessage = "";
         try {
             await api.PUT("aux/config/save", cfg);
-            saveMessage = "Saved.";
             await refresh();
-            setTimeout(() => (saveMessage = ""), 3000);
         } catch (e) {
             console.error("Failed to save aux config:", e);
-            saveMessage = "Save failed - see console.";
+            throw e;
         } finally {
             busy = false;
         }
     }
+
+    // Mark the root config as modified whenever a W axis field is
+    // edited, so the master Save button highlights and the user knows
+    // there are unsaved changes.
+    function markDirty() {
+        try {
+            const root = (window as any).$root || (window as any).Vue?.root;
+            if (root && "modified" in root) root.modified = true;
+        } catch (_e) {}
+        // Also dispatch a generic event the Vue root listens for.
+        window.dispatchEvent(new CustomEvent("onefin:dirty"));
+    }
 </script>
 
 <div class="w-axis-settings">
@@ -85,7 +103,7 @@
             {/if}
         </div>
 
-        <div class="pure-form pure-form-aligned">
+        <div class="pure-form pure-form-aligned" on:input={markDirty} on:change={markDirty}>
             <fieldset>
                 <div class="pure-control-group" title="Enable the auxcnc W axis. Edit aux.json to toggle.">
                     <label for="enabled">enabled</label>
@@ -206,25 +224,13 @@
                 </div>
             </fieldset>
 
-            <div class="actions">
-                <Button
-                    touch
-                    variant="raised"
-                    on:click={save}
-                    disabled={busy}
-                >
-                    <Label>Save W Axis Settings</Label>
-                </Button>
-                {#if saveMessage}
-                    <span class="save-msg">{saveMessage}</span>
-                {/if}
-            </div>
-
             <div class="tip">
-                Changes are written to aux.json. Homing rates and the
-                limit polarity are pushed to the ESP immediately; any
-                running motion is unaffected. Re-home the W axis after
-                changing direction, sign, or step settings.
+                Changes are written to aux.json when you click the
+                master <strong>Save</strong> button at the bottom of the
+                settings rail. Homing rates and the limit polarity are
+                pushed to the ESP immediately; any running motion is
+                unaffected. Re-home the W axis after changing direction,
+                sign, or step settings.
             </div>
         </div>
     {/if}