From f8bea629f0fc9d6684178256257b615ef7746a7e Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sat, 15 Mar 2025 04:42:16 +0000
Subject: [PATCH] Update layout and notification styles - Move Saved
 notification next to title, use full page width, remove header gap

---
 admin/css/wp-allstars-admin.css | 31 ++++++++++++++-----------
 admin/js/wp-allstars-admin.js   | 41 +++++++++++++++++++++++----------
 2 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index 741af9a..cfeb6b5 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -8,7 +8,7 @@
     background: #fff;
     border-bottom: 1px solid #c3c4c7;
     box-shadow: 0 1px 0 rgba(0,0,0,.04);
-    margin: 0 -20px 20px -20px;
+    margin: 0 -20px 0 -20px;
     padding: 20px;
     display: flex;
     align-items: center;
@@ -133,8 +133,8 @@ input:checked + .wp-toggle-slider:before {
 /* Settings Container */
 .wpa-settings-container {
     padding: 0;
-    max-width: 1100px;
-    margin: 0 auto;
+    max-width: none;
+    margin: 0;
 }
 
 .wpa-settings-content {
@@ -379,8 +379,8 @@ input:checked + .wp-toggle-slider:before {
 
 /* Theme Browser */
 .theme-browser .theme {
-    max-width: 1600px;
-    margin: 0 auto;
+    max-width: none;
+    margin: 0;
 }
 
 /* Responsive Adjustments */
@@ -433,13 +433,16 @@ input:checked + .wp-toggle-slider:before {
 
 /* Settings Notification */
 .wp-status {
-    position: absolute !important;
-    right: 20px;
-    top: 50%;
-    transform: translateY(-50%);
+    position: relative !important;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 15px;
+    transform: none;
+    top: auto;
+    right: auto;
     background: #00a32a;
     color: white;
-    padding: 6px 12px;
+    padding: 4px 12px;
     border-radius: 12px;
     font-size: 13px;
     font-weight: 500;
@@ -453,15 +456,15 @@ input:checked + .wp-toggle-slider:before {
 /* Plugin List Container */
 .wp-list-table-container {
     margin-top: 20px;
-    max-width: 1600px;
-    padding: 0;
+    max-width: none;
+    padding: 0 20px;
 }
 
 /* Theme Container */
 #wpa-theme-list {
     margin-top: 20px;
-    max-width: 1600px;
-    padding: 0;
+    max-width: none;
+    padding: 0 20px;
 }
 
 .wpa-loading-overlay {
diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js
index f540608..7f7a9ba 100644
--- a/admin/js/wp-allstars-admin.js
+++ b/admin/js/wp-allstars-admin.js
@@ -1,14 +1,14 @@
 jQuery(document).ready(function($) {
     // Function to show notification
     function showNotification(message, isError = false) {
-        // Remove any existing notifications
+        // Remove any existing notification
         $('.wp-status').remove();
         
-        // Add notification to header
+        // Create and append the new notification
         var $notification = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>');
-        $('.wp-allstars-header').append($notification);
+        $('.wp-allstars-header h1').after($notification);
         
-        // Fade out and remove after delay
+        // Remove the notification after 2 seconds
         setTimeout(function() {
             $notification.fadeOut(300, function() {
                 $(this).remove();
@@ -37,14 +37,26 @@ jQuery(document).ready(function($) {
         var option = $input.attr('name');
         var value = $input.is(':checked') ? 1 : 0;
         
-        updateOption(option, value)
-            .then(function() {
-                showNotification('Setting saved');
-            })
-            .catch(function(error) {
-                console.error('Error:', error);
-                showNotification('Error saving setting', true);
-            });
+        $.ajax({
+            url: ajaxurl,
+            type: 'POST',
+            data: {
+                action: 'wp_allstars_update_option',
+                option: option,
+                value: value,
+                nonce: wpAllstarsData.nonce
+            },
+            success: function(response) {
+                if (response.success) {
+                    showNotification('Saved');
+                } else {
+                    showNotification('Error saving settings', true);
+                }
+            },
+            error: function() {
+                showNotification('Error saving settings', true);
+            }
+        });
     });
 
     // Handle text, number, and textarea inputs
@@ -79,4 +91,9 @@ jQuery(document).ready(function($) {
             $settings.slideDown(200);
         }
     });
+
+    // Handle form submission
+    $('form').on('submit', function() {
+        showNotification('Saved');
+    });
 });
\ No newline at end of file