Fix panel border radius, chevron size, and plugins/theme loading

admin/css/wp-allstars-admin.css

@@ -192,6 +192,8 @@ input:checked + .wp-toggle-slider:before {
     padding: 24px;
     background: #f9f9f9;
     display: none;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
 }
 
 .wp-allstars-toggle .description {
@@ -241,10 +243,11 @@ input:checked + .wp-toggle-slider:before {
 .wp-allstars-toggle-header::after {
     content: "";
     display: block;
-    width: 16px;
+    width: 20px;
-    height: 16px;
+    height: 20px;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" fill="%232271b1"/></svg>') no-repeat center;
     transition: transform 0.2s ease;
+    background-size: 20px;
 }
 
 .wp-allstars-toggle-header[aria-expanded="true"]::after {

admin/js/wp-allstars-admin.js

@@ -49,7 +49,7 @@ jQuery(document).ready(function($) {
                 action: 'wp_allstars_update_option',
                 option: option,
                 value: value,
-                nonce: wpAllstarsData.nonce
+                nonce: wpAllstars.nonce
             },
             success: function(response) {
                 if (response.success) {
@@ -148,7 +148,7 @@ jQuery(document).ready(function($) {
             data: {
                 action: 'wp_allstars_get_plugins',
                 category: category || 'minimal',
-                _ajax_nonce: wpAllstarsData.nonce
+                _ajax_nonce: wpAllstars.nonce
             },
             success: function(response) {
                 if (response.success) {
@@ -166,4 +166,109 @@ jQuery(document).ready(function($) {
             }
         });
     }
+
+    // Load theme on page load
+    if ($('#wpa-theme-list').length) {
+        loadTheme();
+    }
+
+    // Function to load theme
+    function loadTheme() {
+        // Show loading overlay
+        $('.wpa-loading-overlay').fadeIn();
+        
+        $.ajax({
+            url: ajaxurl,
+            data: {
+                action: 'wp_allstars_get_theme',
+                _ajax_nonce: wpAllstars.nonce
+            },
+            success: function(response) {
+                if (response.success) {
+                    $('#wpa-theme-list').html(response.data);
+                    initThemeHandlers();
+                } else {
+                    console.error('Server returned error:', response);
+                    $('#wpa-theme-list').html('<div class="notice notice-error"><p>Failed to load theme: ' + (response.data || 'Unknown error') + '</p></div>');
+                }
+                $('.wpa-loading-overlay').fadeOut();
+            },
+            error: function(xhr, status, error) {
+                console.error('Failed to load theme:', {xhr: xhr, status: status, error: error});
+                $('#wpa-theme-list').html('<div class="notice notice-error"><p>Failed to load theme. Please try again. Error: ' + error + '</p></div>');
+                $('.wpa-loading-overlay').fadeOut();
+            }
+        });
+    }
+
+    // Initialize theme handlers
+    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: wpAllstars.nonce
+                },
+                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);
+                }
+            });
+        });
+    }
 });