Refactor settings components for better reusability

admin/css/wp-allstars-admin.css

@@ -83,7 +83,7 @@
     font-weight: 600;
 }
 
-/* Toggle Switches */
+/* Base Toggle Switch Component */
 .wp-toggle-switch {
     position: relative;
     display: inline-block;
@@ -135,25 +135,48 @@ input:checked + .wp-toggle-slider:before {
     transform: translateX(16px);
 }
 
-/* Settings Container */
+/* Simple Setting Row (No Panel) */
-.wpa-settings-container {
+.wp-setting-row {
-    padding: 0;
+    display: flex;
-    max-width: none;
+    align-items: center;
+    padding: 15px;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    margin-bottom: 15px;
+}
+
+.wp-setting-row:hover {
+    border-color: #2271b1;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+
+.wp-setting-content {
+    flex-grow: 1;
+    margin-left: 10px;
+}
+
+.wp-setting-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1d2327;
     margin: 0;
+    line-height: 1.4;
 }
 
-.wpa-settings-content {
+.wp-setting-description {
-    margin-top: 25px;
+    margin: 4px 0 0;
-    padding: 0 20px;
+    color: #50575e;
+    font-size: 13px;
+    line-height: 1.5;
 }
 
-/* Toggle Sections */
+/* Expandable Panel Component */
 .wp-allstars-toggle {
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 8px;
     margin-bottom: 15px;
-    position: relative;
 }
 
 .wp-allstars-toggle:hover {

admin/js/wp-allstars-admin.js

@@ -16,13 +16,17 @@ jQuery(document).ready(function($) {
         }, 2000);
     }
 
-    // Handle all settings changes
+    // Handle option updates
     function updateOption(option, value) {
-        return $.post(wpAllstars.ajaxurl, {
+        return $.ajax({
+            url: ajaxurl,
+            type: 'POST',
+            data: {
                 action: 'wp_allstars_update_option',
                 option: option,
                 value: value,
-            nonce: wpAllstars.nonce
+                _wpnonce: wpAllstars.nonce
+            }
         }).then(function(response) {
             if (!response.success) {
                 throw new Error(response.data || 'Error saving setting');
@@ -31,12 +35,13 @@ jQuery(document).ready(function($) {
         });
     }
 
+    // Initialize all toggle switches
+    function initToggleSwitches() {
         // Handle toggle switch clicks
         $('.wp-toggle-switch').on('click', function(e) {
             e.stopPropagation();
             var $checkbox = $(this).find('input[type="checkbox"]');
             var isChecked = $checkbox.is(':checked');
-        
             $checkbox.prop('checked', !isChecked).trigger('change');
         });
 
@@ -47,28 +52,18 @@ jQuery(document).ready(function($) {
             var option = $input.attr('name');
             var value = $input.is(':checked') ? 1 : 0;
             
-        $.ajax({
+            updateOption(option, value)
-            url: ajaxurl,
+                .then(function() {
-            type: 'POST',
-            data: {
-                action: 'wp_allstars_update_option',
-                option: option,
-                value: value,
-                _wpnonce: wpAllstars.nonce
-            },
-            success: function(response) {
-                if (response.success) {
                     showNotification('Saved');
-                } else {
+                })
+                .catch(function() {
                     showNotification('Error saving settings', true);
-                }
-            },
-            error: function() {
-                showNotification('Error saving settings', true);
-            }
                 });
         });
+    }
 
+    // Initialize expandable panels
+    function initExpandablePanels() {
         // Handle panel toggle
         $('.wp-allstars-toggle-header').on('click', function(e) {
             if (!$(e.target).closest('.wp-toggle-switch').length) {
@@ -80,7 +75,7 @@ jQuery(document).ready(function($) {
             }
         });
 
-    // Set initial state
+        // Set initial panel states
         $('.wp-allstars-toggle-header').each(function() {
             var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
             var isExpanded = $(this).attr('aria-expanded') === 'true';
@@ -89,8 +84,10 @@ jQuery(document).ready(function($) {
                 $settings.hide();
             }
         });
+    }
 
-    // Handle text, number, and textarea inputs
+    // Initialize text inputs
+    function initTextInputs() {
         $('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() {
             var $input = $(this);
             var option = $input.attr('name');
@@ -105,6 +102,12 @@ jQuery(document).ready(function($) {
                     showNotification('Error saving setting', true);
                 });
         });
+    }
+
+    // Initialize all components
+    initToggleSwitches();
+    initExpandablePanels();
+    initTextInputs();
 
     // Handle form submission
     $('form').on('submit', function() {

admin/settings.php

@@ -957,13 +957,54 @@ function wp_allstars_settings_page() {
                 <?php elseif ($active_tab == 'general'): ?>
                     <div class="wp-allstars-settings-section">
                         <div class="wp-allstars-settings-grid">
-                            <!-- Lazy load toggle removed -->
+                            <!-- Example of a simple toggle setting (no panel) -->
+                            <div class="wp-setting-row">
+                                <div class="wp-toggle-switch">
+                                    <input type="checkbox" 
+                                           id="wp_allstars_simple_setting"
+                                           name="wp_allstars_simple_setting" 
+                                           value="1"
+                                           <?php checked(get_option('wp_allstars_simple_setting', false)); ?> 
+                                    />
+                                    <span class="wp-toggle-slider"></span>
+                                </div>
+                                <div class="wp-setting-content">
+                                    <h4 class="wp-setting-title"><?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?></h4>
+                                    <p class="wp-setting-description"><?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?></p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 <?php elseif ($active_tab == 'advanced'): ?>
                     <div class="wp-allstars-settings-section">
                         <div class="wp-allstars-settings-grid">
-                            <!-- Minification toggles removed -->
+                            <!-- Example of an expandable panel setting -->
+                            <div class="wp-allstars-toggle">
+                                <div class="wp-allstars-toggle-header" aria-expanded="false">
+                                    <div class="wp-allstars-toggle-main">
+                                        <div class="wp-allstars-toggle-left">
+                                            <div class="wp-toggle-switch">
+                                                <input type="checkbox" 
+                                                       id="wp_allstars_auto_upload_images"
+                                                       name="wp_allstars_auto_upload_images" 
+                                                       value="1"
+                                                       <?php checked(get_option('wp_allstars_auto_upload_images', false)); ?> 
+                                                />
+                                                <span class="wp-toggle-slider"></span>
+                                            </div>
+                                            <label for="wp_allstars_auto_upload_images">
+                                                <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <p class="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'); ?>
+                                    </p>
+                                </div>
+                                <div class="wp-allstars-toggle-settings">
+                                    <!-- Additional settings content here -->
+                                </div>
+                            </div>
                         </div>
                     </div>
                 <?php endif; ?>