From bff91bba957a95eeadbf6a583cb96a0b69005d4c Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Fri, 14 Mar 2025 02:39:28 +0000
Subject: [PATCH] Improve settings UI: - Remove Save Changes button for instant
 saves - Move save notification to bottom right - Fix toggle switch
 interference - Improve notification styling and animations

---
 admin/js/wpa-superstar-admin.js | 22 +++++++++++++++++-----
 admin/settings.php              |  6 ++----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/admin/js/wpa-superstar-admin.js b/admin/js/wpa-superstar-admin.js
index 472f321..e7d1b23 100644
--- a/admin/js/wpa-superstar-admin.js
+++ b/admin/js/wpa-superstar-admin.js
@@ -3,19 +3,31 @@ jQuery(document).ready(function($) {
         var $input = $(this);
         var option = $input.attr('name');
         var value = $input.is(':checked') ? 1 : 0;
+        
+        // Remove any existing status messages
+        $('.wpa-status').remove();
+        
+        // Add a small notification that fades out
+        var $notification = $('<span class="wpa-status" style="position: fixed; bottom: 20px; right: 20px; background: #00a32a; color: white; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Setting saved</span>');
+        $('body').append($notification);
+        
         $.post(wpaSuperstar.ajaxurl, {
             action: 'wpa_superstar_update_option',
             option: option,
             value: value,
             nonce: wpaSuperstar.nonce
         }, function(response) {
-            if (response.success) {
-                $input.next('.wpa-status').remove();
-                $input.after('<span class="wpa-status" style="color: green; margin-left: 10px;">Saved</span>');
-                setTimeout(function() { $('.wpa-status').fadeOut(); }, 2000);
-            } else {
+            if (!response.success) {
                 console.error('Error:', response);
+                $notification.css('background', '#d63638').text('Error saving setting');
             }
+            
+            // Fade out and remove the notification after 2 seconds
+            setTimeout(function() {
+                $notification.fadeOut(300, function() {
+                    $(this).remove();
+                });
+            }, 2000);
         });
     });
 });
\ No newline at end of file
diff --git a/admin/settings.php b/admin/settings.php
index 652cb5e..33f98ea 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -49,7 +49,7 @@ function wpa_superstar_settings_page() {
             </a>
         </h2>
 
-        <form method="post" action="options.php">
+        <div class="wpa-settings-content">
             <?php settings_fields( 'wpa-superstar-settings' ); ?>
             <?php do_settings_sections( 'wpa-superstar-settings' ); ?>
 
@@ -108,9 +108,7 @@ function wpa_superstar_settings_page() {
                     </p>
                 </div>
             <?php endif; ?>
-
-            <?php submit_button( __( 'Save Changes', 'wpa-superstar' ) ); ?>
-        </form>
+        </div>
     </div>
     <?php
 }
\ No newline at end of file