Fix AI feature UX issues in chart creation flow

Three UX improvements for better AI feature accessibility:

1. Image Upload Lock Icon - Fixed alignment and popup navigation
   - Repositioned lock overlay to top of container (40px padding)
   - Changed lock icon to display:block for proper centering
   - Added onclick handler to close popup and navigate to AI Settings in parent window

2. AI Chat Sidebar - Improved Settings/Chat section behavior
   - Added Settings section with conditional collapse (collapsed when API key exists)
   - Made Chat section grayed out when no API key configured
   - Fixed incorrect URL (viz-ai-settings → visualizer-ai-settings)
   - Added popup escape to all AI Settings links

3. Chart Creation Modal - Fixed auto-scroll behavior
   - Removed scrollIntoView() that was hiding image upload section
   - Modal now stays scrolled to top, making AI image upload visible by default

Files modified:
- classes/Visualizer/Render/Page/Types.php (lock icon alignment)
- classes/Visualizer/Render/Sidebar.php (Settings/Chat sections)
- js/frame.js (removed auto-scroll)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: vytisbulkevicius

classes/Visualizer/Render/Page/Types.php

@@ -78,12 +78,12 @@ protected function _renderContent() {
 
 		if ( $show_api_lock ) {
 			// Show API key configuration lock (for PRO users without API keys)
-			echo '<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); border-radius: 8px; display: flex; align-items: center; justify-content: center; z-index: 10;">';
+			echo '<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); border-radius: 8px; z-index: 10; padding-top: 40px;">';
 			echo '<div style="text-align: center; padding: 20px;">';
-			echo '<span class="dashicons dashicons-lock" style="font-size: 48px; color: #999; margin-bottom: 10px;"></span>';
+			echo '<span class="dashicons dashicons-lock" style="font-size: 48px; color: #999; margin-bottom: 10px; display: block;"></span>';
 			echo '<h3 style="margin: 10px 0; color: #666;">' . esc_html__( 'AI Features - API Key Required', 'visualizer' ) . '</h3>';
 			echo '<p style="margin: 10px 0; color: #666;">' . esc_html__( 'Configure your AI API key to use AI-powered chart creation from images.', 'visualizer' ) . '</p>';
-			echo '<a href="' . admin_url( 'admin.php?page=visualizer-ai-settings' ) . '" class="button button-primary" style="margin-top: 10px;">';
+			echo '<a href="' . admin_url( 'admin.php?page=visualizer-ai-settings' ) . '" class="button button-primary" style="margin-top: 10px;" onclick="if(window.parent !== window) { window.parent.location.href = this.href; return false; }">';
 			echo esc_html__( 'Configure AI Settings', 'visualizer' );
 			echo '</a>';
 			echo '</div>';

classes/Visualizer/Render/Sidebar.php

@@ -864,18 +864,19 @@ protected function _renderAIConfigurationGroup() {
 			sprintf(
 				// translators: %1$s - HTML link tag, %2$s - HTML closing link tag.
 				esc_html__( 'Chat with AI to customize your chart. Ask questions, get suggestions, or describe what you want. The AI understands your chart type and current configuration. %1$sConfigure API keys%2$s', 'visualizer' ),
-				'<a href="' . admin_url( 'admin.php?page=visualizer-ai-settings' ) . '" target="_blank">',
+				'<a href="' . admin_url( 'admin.php?page=visualizer-ai-settings' ) . '" onclick="if(window.parent !== window) { window.parent.location.href = this.href; return false; }">',
 				'</a>'
 			)
 		);
 		self::_renderSectionEnd();
 
-		self::_renderSectionStart( esc_html__( 'Settings', 'visualizer' ), false );
-
 		// Check if any AI API key is configured
 		$has_openai = ! empty( get_option( 'visualizer_openai_api_key', '' ) );
 		$has_gemini = ! empty( get_option( 'visualizer_gemini_api_key', '' ) );
 		$has_claude = ! empty( get_option( 'visualizer_claude_api_key', '' ) );
+		$has_any_api_key = $has_openai || $has_gemini || $has_claude;
+
+		self::_renderSectionStart( esc_html__( 'Settings', 'visualizer' ), $has_any_api_key );
 
 		$ai_models = array();
 		if ( $has_openai ) {
@@ -904,15 +905,19 @@ protected function _renderAIConfigurationGroup() {
 				'<span style="color: #d63638;">' . sprintf(
 					// translators: %1$s - HTML link tag, %2$s - HTML closing link tag.
 					esc_html__( 'No AI API keys configured. %1$sConfigure your API keys%2$s to use AI features.', 'visualizer' ),
-					'<a href="' . admin_url( 'admin.php?page=viz-ai-settings' ) . '" target="_blank">',
+					'<a href="' . admin_url( 'admin.php?page=visualizer-ai-settings' ) . '" onclick="if(window.parent !== window) { window.parent.location.href = this.href; return false; }">',
 					'</a>'
 				) . '</span>'
 			);
 		}
 
 		self::_renderSectionEnd();
 
-		self::_renderSectionStart( esc_html__( 'AI Chat', 'visualizer' ), true );
+		self::_renderSectionStart( esc_html__( 'AI Chat', 'visualizer' ), $has_any_api_key );
+
+		if ( ! $has_any_api_key ) {
+			echo '<div style="opacity: 0.5; pointer-events: none;">';
+		}
 
 		echo '<div class="viz-section-item">';
 		echo '<div id="visualizer-ai-chat-container" style="background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; padding: 15px; max-height: 400px; overflow-y: auto; margin-bottom: 10px;">';
@@ -943,6 +948,10 @@ protected function _renderAIConfigurationGroup() {
 
 		echo '</div>';
 
+		if ( ! $has_any_api_key ) {
+			echo '</div>';
+		}
+
 		self::_renderSectionEnd();
 
 		// Add upsell overlay if locked (free version)

js/frame.js

@@ -8,11 +8,12 @@
 
 (function ($) {
     $(window).on('load', function(){
-        let chart_select = $('#chart-select');
-        if(chart_select.length > 0){
-            // scroll to the selected chart type.
-            $('#chart-select')[0].scrollIntoView();
-        }
+        // Removed auto-scroll to chart-select to keep the image upload section visible
+        // let chart_select = $('#chart-select');
+        // if(chart_select.length > 0){
+        //     // scroll to the selected chart type.
+        //     $('#chart-select')[0].scrollIntoView();
+        // }
     });
 
     $(document).ready(function () {