Update settings UI: reorder tabs, clarify examples, and improve notifications

admin/css/wp-allstars-admin.css

@@ -609,27 +609,28 @@ input:checked + .wp-toggle-slider:before {
 }
 
 /* Settings Notification */
-.wp-status {
+.wp-setting-notification {
-    position: relative !important;
     display: inline-flex;
     align-items: center;
-    margin-left: 15px;
+    margin-left: 10px;
-    transform: none;
-    top: auto;
-    right: auto;
     background: #00a32a;
     color: white;
-    padding: 4px 12px;
+    padding: 3px 10px;
     border-radius: 12px;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 500;
-    z-index: 100;
+    animation: fadeIn 0.3s ease-in-out;
 }
 
-.wp-status.error {
+.wp-setting-notification.error {
     background: #d63638;
 }
 
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
 .wpa-loading-overlay {
     position: absolute;
     top: 0;

admin/js/wp-allstars-admin.js

@@ -1,14 +1,21 @@
 jQuery(document).ready(function($) {
     // Function to show notification
-    function showNotification(message, isError = false) {
+    function showNotification(message, element, isError = false) {
-        // Remove any existing notification
+        // Remove any existing notifications
-        $('.wp-status').remove();
+        $('.wp-setting-notification').remove();
         
-        // Create and append the new notification
+        // Create notification element
-        var $notification = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>');
+        var $notification = $('<span class="wp-setting-notification' + (isError ? ' error' : '') + '">' + message + '</span>');
+        
+        // If element is provided, show notification next to it
+        if (element) {
+            $(element).after($notification);
+        } else {
+            // Fallback to header if no element provided
             $('.wp-allstars-header h1').after($notification);
+        }
         
-        // Remove the notification after 2 seconds
+        // Fade out after delay
         setTimeout(function() {
             $notification.fadeOut(300, function() {
                 $(this).remove();
@@ -17,7 +24,7 @@ jQuery(document).ready(function($) {
     }
 
     // Handle option updates
-    function updateOption(option, value) {
+    function updateOption(option, value, element) {
         return $.ajax({
             url: ajaxurl,
             type: 'POST',
@@ -51,13 +58,14 @@ jQuery(document).ready(function($) {
             var $input = $(this);
             var option = $input.attr('name');
             var value = $input.is(':checked') ? 1 : 0;
+            var $label = $input.closest('.wp-setting-left').find('label');
             
             updateOption(option, value)
                 .then(function() {
-                    showNotification('Saved');
+                    showNotification('Saved', $label);
                 })
                 .catch(function() {
-                    showNotification('Error saving settings', true);
+                    showNotification('Error saving settings', $label, true);
                 });
         });
     }
@@ -92,14 +100,15 @@ jQuery(document).ready(function($) {
             var $input = $(this);
             var option = $input.attr('name');
             var value = $input.val();
+            var $label = $input.prev('label');
             
             updateOption(option, value)
                 .then(function() {
-                    showNotification('Setting saved');
+                    showNotification('Saved', $label);
                 })
                 .catch(function(error) {
                     console.error('Error:', error);
-                    showNotification('Error saving setting', true);
+                    showNotification('Error saving setting', $label, true);
                 });
         });
     }

admin/settings.php

@@ -636,12 +636,12 @@ function wp_allstars_settings_page() {
                     <a href="?page=wp-allstars&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
                         <?php esc_html_e('General', 'wp-allstars'); ?>
                     </a>
-                    <a href="?page=wp-allstars&tab=workflow" class="nav-tab <?php echo $active_tab == 'workflow' ? 'nav-tab-active' : ''; ?>">
-                        <?php esc_html_e('Workflow', 'wp-allstars'); ?>
-                    </a>
                     <a href="?page=wp-allstars&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">
                         <?php esc_html_e('Advanced', 'wp-allstars'); ?>
                     </a>
+                    <a href="?page=wp-allstars&tab=workflow" class="nav-tab <?php echo $active_tab == 'workflow' ? 'nav-tab-active' : ''; ?>">
+                        <?php esc_html_e('Workflow', 'wp-allstars'); ?>
+                    </a>
                     <a href="?page=wp-allstars&tab=recommended" class="nav-tab <?php echo $active_tab == 'recommended' ? 'nav-tab-active' : ''; ?>">
                         <?php esc_html_e('Free Plugins', 'wp-allstars'); ?>
                     </a>
@@ -972,12 +972,12 @@ function wp_allstars_settings_page() {
                                                 <span class="wp-toggle-slider"></span>
                                             </div>
                                             <label for="wp_allstars_simple_setting" class="wp-setting-label">
-                                                <?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?>
+                                                <?php esc_html_e('Example: Simple Toggle', 'wp-allstars'); ?>
                                             </label>
                                         </div>
                                     </div>
                                     <p class="wp-setting-description">
-                                        <?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?>
+                                        <?php esc_html_e('This is an example of a simple toggle setting without an expandable panel. Currently for demonstration purposes only.', 'wp-allstars'); ?>
                                     </p>
                                 </div>
                             </div>
@@ -1001,16 +1001,24 @@ function wp_allstars_settings_page() {
                                                 <span class="wp-toggle-slider"></span>
                                             </div>
                                             <label for="wp_allstars_auto_upload_images">
-                                                <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
+                                                <?php esc_html_e('Example: Expandable Panel', 'wp-allstars'); ?>
                                             </label>
                                         </div>
                                     </div>
                                     <p class="wp-setting-description">
-                                        <?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
+                                        <?php esc_html_e('This is an example of an expandable panel setting. Currently for demonstration purposes only - no actual functionality.', 'wp-allstars'); ?>
                                     </p>
                                 </div>
                                 <div class="wp-allstars-toggle-settings">
-                                    <!-- Additional settings content here -->
+                                    <div class="wp-allstars-setting-row">
+                                        <label for="example_text"><?php esc_html_e('Example Text Field', 'wp-allstars'); ?></label>
+                                        <input type="text" 
+                                               id="example_text"
+                                               name="example_text"
+                                               value="Example value"
+                                        />
+                                        <p class="description"><?php esc_html_e('This is an example text field for demonstration purposes.', 'wp-allstars'); ?></p>
+                                    </div>
                                 </div>
                             </div>
                         </div>