From 006e2fc4ddadc62adda1707235f9591509e13e94 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 02:38:49 +0000
Subject: [PATCH] Move JavaScript and CSS to separate files and fix accordion
 functionality

---
 admin/css/wp-allstars-admin.css | 149 ++++------
 admin/js/wp-allstars-admin.js   |  39 ++-
 admin/settings.php              | 485 ++------------------------------
 3 files changed, 111 insertions(+), 562 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index eaafe34..c029e86 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -144,61 +144,83 @@ input:checked + .wp-toggle-slider:before {
 
 /* Toggle Sections */
 .wp-allstars-toggle {
-    margin: 0;
-    padding: 16px 20px;
     background: #fff;
-    border: 1px solid #ddd;
+    border: 1px solid #ccd0d4;
     border-radius: 4px;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.02);
-    transition: all .15s ease-in-out;
+    margin-bottom: 15px;
 }
 
-.wp-allstars-toggle:hover {
-    border-color: #2271b1;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+.wp-allstars-toggle-header {
+    padding: 15px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.wp-allstars-toggle-main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
 }
 
 .wp-allstars-toggle label {
     display: flex;
     align-items: center;
-    font-size: 14px;
-    line-height: 1.4;
-    font-weight: 500;
-    color: #1d2327;
+    gap: 10px;
+    margin: 0;
     cursor: pointer;
+    flex: 1;
+}
+
+.wp-allstars-expand-settings {
+    background: none;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    color: #2271b1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+}
+
+.wp-allstars-expand-settings:hover {
+    background-color: #f0f0f1;
+    color: #135e96;
+}
+
+.wp-allstars-expand-settings:focus {
+    outline: 1px solid #2271b1;
+    box-shadow: none;
+}
+
+.wp-allstars-expand-settings .dashicons {
+    display: block;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    transition: transform 0.2s ease;
+    transform-origin: center;
+}
+
+.wp-allstars-toggle-settings {
+    border-top: 1px solid #ccd0d4;
+    padding: 15px;
+    background: #f9f9f9;
+    display: none;
 }
 
 .wp-allstars-toggle .description {
-    margin: 6px 0 0 52px;
-    color: #666;
-    font-size: 13px;
-    line-height: 1.5;
-}
-
-.wp-allstars-toggle-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-}
-
-/* Settings Dropdown */
-.wp-allstars-toggle-settings {
-    display: none;
-    margin-top: 15px;
-    padding: 15px;
-    background: #f6f7f7;
-    border: 1px solid #c3c4c7;
-    border-radius: 4px;
-}
-
-.wp-allstars-toggle-settings.is-open {
-    display: block;
+    margin: 8px 0 0;
+    color: #646970;
 }
 
 .wp-allstars-setting-row {
     margin-bottom: 15px;
-    padding: 0;
 }
 
 .wp-allstars-setting-row:last-child {
@@ -207,62 +229,15 @@ input:checked + .wp-toggle-slider:before {
 
 .wp-allstars-setting-row label {
     display: block;
-    margin-bottom: 8px;
-    font-weight: 600;
-    color: #1d2327;
+    margin-bottom: 5px;
+    font-weight: 500;
 }
 
 .wp-allstars-setting-row input[type="text"],
 .wp-allstars-setting-row input[type="number"],
-.wp-allstars-setting-row select,
 .wp-allstars-setting-row textarea {
     width: 100%;
     max-width: 400px;
-    padding: 8px;
-    border: 1px solid #8c8f94;
-    border-radius: 4px;
-    box-shadow: 0 0 0 transparent;
-    transition: border-color .15s ease-in-out;
-}
-
-.wp-allstars-setting-row input[type="text"]:focus,
-.wp-allstars-setting-row input[type="number"]:focus,
-.wp-allstars-setting-row select:focus,
-.wp-allstars-setting-row textarea:focus {
-    border-color: #2271b1;
-    box-shadow: 0 0 0 1px #2271b1;
-    outline: 2px solid transparent;
-}
-
-/* Expand/Collapse Button */
-.wp-allstars-expand-settings {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 8px;
-    background: #f0f0f1;
-    border: 1px solid #c3c4c7;
-    border-radius: 3px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    color: #50575e;
-}
-
-.wp-allstars-expand-settings:hover {
-    background: #fff;
-    border-color: #2271b1;
-    color: #2271b1;
-}
-
-.wp-allstars-expand-settings .dashicons {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    transition: transform 0.2s ease;
-}
-
-.wp-allstars-expand-settings[aria-expanded="true"] .dashicons {
-    transform: rotate(180deg);
 }
 
 /* Clear floats after tabs */
diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js
index 7f7a9ba..74ab006 100644
--- a/admin/js/wp-allstars-admin.js
+++ b/admin/js/wp-allstars-admin.js
@@ -75,20 +75,41 @@ jQuery(document).ready(function($) {
             });
     });
 
-    // Expand/collapse settings functionality
-    $('.wp-allstars-expand-settings').on('click', function(e) {
-        e.preventDefault();
+    // Handle accordion functionality
+    $('.wp-allstars-expand-settings').each(function() {
         var $button = $(this);
-        var $settings = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
+        var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
+        var $icon = $button.find('.dashicons');
         var isExpanded = $button.attr('aria-expanded') === 'true';
         
-        $button.attr('aria-expanded', !isExpanded);
-        $button.find('.dashicons').toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2');
-        
+        // Set initial state
         if (isExpanded) {
-            $settings.slideUp(200);
+            $panel.show();
+            $icon.css('transform', 'rotate(180deg)');
         } else {
-            $settings.slideDown(200);
+            $panel.hide();
+        }
+    });
+
+    $('.wp-allstars-expand-settings').on('click', function(e) {
+        e.preventDefault();
+        
+        var $button = $(this);
+        var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
+        var $icon = $button.find('.dashicons');
+        var isExpanded = $button.attr('aria-expanded') === 'true';
+        
+        // Toggle state
+        $button.attr('aria-expanded', !isExpanded);
+        
+        // Rotate icon
+        $icon.css('transform', !isExpanded ? 'rotate(180deg)' : '');
+        
+        // Toggle panel
+        if (!isExpanded) {
+            $panel.slideDown(200);
+        } else {
+            $panel.slideUp(200);
         }
     });
 
diff --git a/admin/settings.php b/admin/settings.php
index 837e27c..c01e275 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -595,7 +595,7 @@ function wp_allstars_activate_theme() {
 }
 add_action('wp_ajax_wp_allstars_activate_theme', 'wp_allstars_activate_theme');
 
-// Settings page HTML
+// Register settings page HTML
 function wp_allstars_settings_page() {
     global $tabs;
     
@@ -671,7 +671,7 @@ function wp_allstars_settings_page() {
                                             <span class="wp-toggle-slider"></span>
                                         </div>
                                         <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
-                    </label>
+                                    </label>
                                     <button type="button" class="wp-allstars-expand-settings" aria-expanded="false">
                                         <span class="dashicons dashicons-arrow-down-alt2"></span>
                                     </button>
@@ -680,7 +680,7 @@ function wp_allstars_settings_page() {
                                     <?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" style="display: none;">
+                            <div class="wp-allstars-toggle-settings">
                                 <div class="wp-allstars-setting-row">
                                     <label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label>
                                     <input type="number" 
@@ -739,140 +739,6 @@ function wp_allstars_settings_page() {
                             </div>
                         </div>
                     </div>
-
-                    <script>
-                    jQuery(document).ready(function($) {
-                        // Set initial state of panels
-                        $('.wp-allstars-toggle-settings').each(function() {
-                            var $panel = $(this);
-                            var $button = $panel.closest('.wp-allstars-toggle').find('.wp-allstars-expand-settings');
-                            var isExpanded = $button.attr('aria-expanded') === 'true';
-                            
-                            // Set initial visibility without animation
-                            $panel.toggle(isExpanded);
-                            if (isExpanded) {
-                                $button.find('.dashicons').css('transform', 'rotate(180deg)');
-                            }
-                        });
-
-                        // Handle click events
-                        $('.wp-allstars-expand-settings').on('click', function() {
-                            var $button = $(this);
-                            var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
-                            var $icon = $button.find('.dashicons');
-                            var isExpanded = $button.attr('aria-expanded') === 'true';
-                            
-                            // Update state
-                            $button.attr('aria-expanded', !isExpanded);
-                            
-                            // Update icon
-                            $icon.css('transform', !isExpanded ? 'rotate(180deg)' : '');
-                            
-                            // Toggle panel
-                            $panel.slideToggle(200);
-                        });
-                    });
-                    </script>
-
-                    <style>
-                    .wp-allstars-toggle {
-                        background: #fff;
-                        border: 1px solid #ccd0d4;
-                        border-radius: 4px;
-                        margin-bottom: 15px;
-                    }
-
-                    .wp-allstars-toggle-header {
-                        padding: 15px;
-                        cursor: pointer;
-                        user-select: none;
-                    }
-
-                    .wp-allstars-toggle-main {
-                        display: flex;
-                        align-items: center;
-                        justify-content: space-between;
-                        gap: 10px;
-                    }
-
-                    .wp-allstars-toggle label {
-                        display: flex;
-                        align-items: center;
-                        gap: 10px;
-                        margin: 0;
-                        cursor: pointer;
-                        flex: 1;
-                    }
-
-                    .wp-allstars-expand-settings {
-                        background: none;
-                        border: none;
-                        padding: 4px;
-                        cursor: pointer;
-                        color: #2271b1;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 24px;
-                        height: 24px;
-                        border-radius: 3px;
-                        transition: background-color 0.2s ease;
-                    }
-
-                    .wp-allstars-expand-settings:hover {
-                        background-color: #f0f0f1;
-                        color: #135e96;
-                    }
-
-                    .wp-allstars-expand-settings:focus {
-                        outline: 1px solid #2271b1;
-                        box-shadow: none;
-                    }
-
-                    .wp-allstars-expand-settings .dashicons {
-                        display: block;
-                        width: 16px;
-                        height: 16px;
-                        font-size: 16px;
-                        line-height: 16px;
-                        transition: transform 0.2s ease;
-                        transform-origin: center;
-                    }
-
-                    .wp-allstars-toggle-settings {
-                        border-top: 1px solid #ccd0d4;
-                        padding: 15px;
-                        background: #f9f9f9;
-                        display: none;
-                    }
-
-                    .wp-allstars-toggle .description {
-                        margin: 8px 0 0;
-                        color: #646970;
-                    }
-
-                    .wp-allstars-setting-row {
-                        margin-bottom: 15px;
-                    }
-
-                    .wp-allstars-setting-row:last-child {
-                        margin-bottom: 0;
-                    }
-
-                    .wp-allstars-setting-row label {
-                        display: block;
-                        margin-bottom: 5px;
-                        font-weight: 500;
-                    }
-
-                    .wp-allstars-setting-row input[type="text"],
-                    .wp-allstars-setting-row input[type="number"],
-                    .wp-allstars-setting-row textarea {
-                        width: 100%;
-                        max-width: 400px;
-                    }
-                    </style>
-
                 <?php elseif ($active_tab == 'theme'): ?>
                     <div class="wp-list-table-container">
                         <div class="wpa-loading-overlay">
@@ -880,145 +746,6 @@ function wp_allstars_settings_page() {
                         </div>
                         <div id="wpa-theme-list"></div>
                     </div>
-
-                    <script>
-                    jQuery(document).ready(function($) {
-                        var loadingStartTime;
-                        var currentRequest = null;
-                        
-                        function loadTheme() {
-                            // Show loading overlay
-                            $('.wpa-loading-overlay').fadeIn();
-                            loadingStartTime = Date.now();
-                            
-                            // Cancel previous request if it exists
-                            if (currentRequest) {
-                                currentRequest.abort();
-                            }
-                            
-                            // Make the AJAX request
-                            currentRequest = $.ajax({
-                                url: ajaxurl,
-                                data: {
-                                    action: 'wp_allstars_get_theme',
-                                    _ajax_nonce: '<?php echo wp_create_nonce("updates"); ?>'
-                                },
-                                beforeSend: function() {
-                                    if (currentRequest) {
-                                        currentRequest.abort();
-                                    }
-                                },
-                                success: function(response) {
-                                    if (response.success) {
-                                        ensureMinLoadingTime(function() {
-                                            $('#wpa-theme-list').html(response.data);
-                                            $('.wpa-loading-overlay').fadeOut();
-                                            
-                                            // Initialize theme installation handlers
-                                            initThemeHandlers();
-                                        });
-                                    } else {
-                                        console.error('Server returned error:', response);
-                                        $('.wpa-loading-overlay').fadeOut();
-                                        $('#wpa-theme-list').html('<div class="notice notice-error"><p>Failed to load theme: ' + (response.data || 'Unknown error') + '</p></div>');
-                                    }
-                                },
-                                error: function(xhr, status, error) {
-                                    console.error('Failed to load theme:', {xhr: xhr, status: status, error: error});
-                                    $('.wpa-loading-overlay').fadeOut();
-                                    $('#wpa-theme-list').html('<div class="notice notice-error"><p>Failed to load theme. Please try again. Error: ' + error + '</p></div>');
-                                }
-                            });
-                        }
-                        
-                        function initThemeHandlers() {
-                            // Handle theme installation
-                            $('.install-theme').on('click', function(e) {
-                                e.preventDefault();
-                                var $button = $(this);
-                                var slug = $button.data('slug');
-                                
-                                $button.addClass('updating-message').text('Installing...');
-                                
-                                wp.updates.installTheme({
-                                    slug: slug,
-                                    success: function(response) {
-                                        $button
-                                            .removeClass('updating-message install-theme')
-                                            .addClass('button-primary activate-theme')
-                                            .text('Activate');
-                                        
-                                        // Refresh the theme display
-                                        loadTheme();
-                                    },
-                                    error: function(error) {
-                                        $button.removeClass('updating-message');
-                                        console.error('Theme installation failed:', error);
-                                        if (error.errorMessage) {
-                                            alert(error.errorMessage);
-                                        }
-                                    }
-                                });
-                            });
-                            
-                            // Handle theme activation
-                            $('.activate-theme').on('click', function(e) {
-                                e.preventDefault();
-                                var $button = $(this);
-                                var slug = $button.data('slug');
-                                
-                                $button.addClass('updating-message').text('Activating...');
-                                
-                                $.ajax({
-                                    url: ajaxurl,
-                                    type: 'POST',
-                                    data: {
-                                        action: 'wp_allstars_activate_theme',
-                                        theme: slug,
-                                        _ajax_nonce: '<?php echo wp_create_nonce("updates"); ?>'
-                                    },
-                                    success: function(response) {
-                                        if (response.success) {
-                                            $button.removeClass('updating-message').text('Activated');
-                                            setTimeout(function() {
-                                                if (response.data && response.data.customize_url) {
-                                                    window.location.href = response.data.customize_url;
-                                                } else {
-                                                    window.location.reload();
-                                                }
-                                            }, 1000);
-                                        } else {
-                                            $button.removeClass('updating-message').text('Activate');
-                                            alert(response.data || 'Theme activation failed. Please try again.');
-                                        }
-                                    },
-                                    error: function(xhr, status, error) {
-                                        $button.removeClass('updating-message').text('Activate');
-                                        console.error('Theme activation failed:', error);
-                                        alert('Theme activation failed: ' + error);
-                                    }
-                                });
-                            });
-                        }
-                        
-                        // Function to ensure minimum loading time
-                        function ensureMinLoadingTime(callback) {
-                            var currentTime = Date.now();
-                            var elapsed = currentTime - loadingStartTime;
-                            var minLoadingTime = 500;
-                            
-                            if (elapsed < minLoadingTime) {
-                                setTimeout(callback, minLoadingTime - elapsed);
-                            } else {
-                                callback();
-                            }
-                        }
-                        
-                        // Load theme on page load
-                        loadTheme();
-                    });
-                    </script>
-
                 <?php elseif ($active_tab == 'recommended'): ?>
                     <div class="wpa-plugin-filters">
                         <a href="?page=wp-allstars&tab=recommended&category=minimal" 
@@ -1093,193 +820,8 @@ function wp_allstars_settings_page() {
                         </div>
                         <div id="wpa-plugin-list"></div>
                     </div>
-
-                    <script>
-                    jQuery(document).ready(function($) {
-                        var loadingStartTime;
-                        var currentRequest = null;
-                        
-                        function loadPlugins(category) {
-                            // Show loading overlay
-                            $('.wpa-loading-overlay').fadeIn();
-                            loadingStartTime = Date.now();
-                            
-                            // Cancel previous request if it exists
-                            if (currentRequest) {
-                                currentRequest.abort();
-                            }
-                            
-                            // Make the AJAX request
-                            currentRequest = $.ajax({
-                                url: ajaxurl,
-                                data: {
-                                    action: 'wp_allstars_get_plugins',
-                                    category: category || 'minimal',
-                                    _ajax_nonce: '<?php echo wp_create_nonce("updates"); ?>'
-                                },
-                                beforeSend: function() {
-                                    if (currentRequest) {
-                                        currentRequest.abort();
-                                    }
-                                },
-                                success: function(response) {
-                                    if (response.success) {
-                                        ensureMinLoadingTime(function() {
-                                            $('#wpa-plugin-list').html(response.data);
-                                            $('.wpa-loading-overlay').fadeOut();
-                                        });
-                                    } else {
-                                        console.error('Server returned error:', response);
-                                        $('.wpa-loading-overlay').fadeOut();
-                                        $('#wpa-plugin-list').html('<div class="notice notice-error"><p>Failed to load plugins: ' + (response.data || 'Unknown error') + '</p></div>');
-                                    }
-                                },
-                                error: function(xhr, status, error) {
-                                    console.error('Failed to load plugins:', {xhr: xhr, status: status, error: error});
-                                    $('.wpa-loading-overlay').fadeOut();
-                                    $('#wpa-plugin-list').html('<div class="notice notice-error"><p>Failed to load plugins. Please try again. Error: ' + error + '</p></div>');
-                                }
-                            });
-                        }
-                        
-                        // Function to ensure minimum loading time
-                        function ensureMinLoadingTime(callback) {
-                            var currentTime = Date.now();
-                            var elapsed = currentTime - loadingStartTime;
-                            var minLoadingTime = 500;
-                            
-                            if (elapsed < minLoadingTime) {
-                                setTimeout(callback, minLoadingTime - elapsed);
-                            } else {
-                                callback();
-                            }
-                        }
-                        
-                        // Load plugins on page load with current category from URL
-                        var urlParams = new URLSearchParams(window.location.search);
-                        var currentCategory = urlParams.get('category') || 'minimal';
-                        loadPlugins(currentCategory);
-                        
-                        // Handle category filter clicks
-                        $('.wpa-plugin-filters a').on('click', function(e) {
-                            e.preventDefault();
-                            var category = new URLSearchParams($(this).attr('href').split('?')[1]).get('category');
-                            loadPlugins(category);
-                            
-                            // Update URL without page reload
-                            var newUrl = $(this).attr('href');
-                            history.pushState({}, '', newUrl);
-                            
-                            // Update active state
-                            $('.wpa-plugin-filters a').removeClass('button-primary');
-                            $(this).addClass('button-primary');
-                        });
-                    });
-                    </script>
-
                 <?php elseif ($active_tab == 'pro'): ?>
                     <div class="wpa-pro-plugins">
-                        <style>
-                            .wpa-pro-plugins {
-                                padding: 20px;
-                                display: grid;
-                                grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-                                gap: 24px;
-                                max-width: 1920px;
-                                margin: 0 auto;
-                            }
-                            .wpa-pro-plugin {
-                                background: #fff;
-                                border: 1px solid #ddd;
-                                padding: 24px;
-                                border-radius: 8px;
-                                display: flex;
-                                flex-direction: column;
-                                transition: all 0.2s ease;
-                                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-                            }
-                            .wpa-pro-plugin:hover {
-                                border-color: #2271b1;
-                                box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-                            }
-                            .wpa-pro-plugin h3 {
-                                margin: 0 0 12px;
-                                font-size: 16px;
-                                font-weight: 600;
-                                color: #1d2327;
-                                line-height: 1.4;
-                            }
-                            .wpa-pro-plugin p {
-                                margin: 0 0 16px;
-                                color: #50575e;
-                                font-size: 14px;
-                                line-height: 1.6;
-                            }
-                            .wpa-pro-plugin .button-group {
-                                display: flex;
-                                flex-wrap: wrap;
-                                gap: 8px;
-                                margin-top: auto;
-                            }
-                            .wpa-pro-plugin .button {
-                                text-decoration: none;
-                                min-width: 120px;
-                                text-align: center;
-                                height: 30px;
-                                line-height: 28px;
-                                padding: 0 12px;
-                                font-size: 13px;
-                                font-weight: normal;
-                                margin: 0;
-                                border: 1px solid #0071a1 !important;
-                                border-radius: 3px !important;
-                                background: #f6f7f7;
-                                color: #0071a1;
-                                display: inline-block;
-                                vertical-align: top;
-                                box-shadow: none;
-                                cursor: pointer;
-                            }
-                            .wpa-pro-plugin .button:hover {
-                                background: #f0f0f1;
-                                border-color: #0071a1;
-                                color: #0071a1;
-                            }
-                            .wpa-pro-plugin .button-primary {
-                                background: #0071a1;
-                                border-color: #0071a1;
-                                color: #fff;
-                            }
-                            .wpa-pro-plugin .button-primary:hover {
-                                background: #005d8c;
-                                border-color: #005d8c;
-                                color: #fff;
-                            }
-                            @media screen and (max-width: 960px) {
-                                .wpa-pro-plugins {
-                                    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-                                    gap: 20px;
-                                    padding: 16px;
-                                }
-                                .wpa-pro-plugin {
-                                    padding: 20px;
-                                }
-                            }
-                            @media screen and (max-width: 782px) {
-                                .wpa-pro-plugins {
-                                    grid-template-columns: 1fr;
-                                    gap: 16px;
-                                    padding: 12px;
-                                }
-                                .wpa-pro-plugin {
-                                    padding: 16px;
-                                }
-                                .wpa-pro-plugin .button {
-                                    width: 100%;
-                                }
-                            }
-                        </style>
-                        
                         <?php
                         $pro_plugins = wp_allstars_get_pro_plugins_config();
                         foreach ($pro_plugins as $key => $plugin) {
@@ -1312,16 +854,27 @@ function wp_allstars_settings_page() {
                         <div class="wp-allstars-settings-grid">
                             <!-- Lazy load toggle removed -->
                         </div>
-                </div>
+                    </div>
                 <?php elseif ($active_tab == 'advanced'): ?>
                     <div class="wp-allstars-settings-section">
                         <div class="wp-allstars-settings-grid">
                             <!-- Minification toggles removed -->
-                </div>
-                </div>
-            <?php endif; ?>
+                        </div>
+                    </div>
+                <?php endif; ?>
             </div>
         </div>
     </div>
     <?php
-}
\ No newline at end of file
+}
+
+// Enqueue admin scripts and styles
+function wp_allstars_admin_enqueue_scripts($hook) {
+    if ('settings_page_wp-allstars' !== $hook) {
+        return;
+    }
+
+    wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
+    wp_enqueue_script('wp-allstars-admin', plugins_url('js/wp-allstars-admin.js', __FILE__), array('jquery'), WP_ALLSTARS_VERSION, true);
+}
+add_action('admin_enqueue_scripts', 'wp_allstars_admin_enqueue_scripts');
\ No newline at end of file