Fix dashboard loading and maximize chart area

- Fixed TA panel loading state - now waits for initial data before loading technical analysis
- Changed initial loading message from 'Loading technical analysis...' to 'Waiting for candle data...'
- Made strategy simulation sidebar collapsed by default to maximize chart area
- Added refresh timestamp to TA panel when manually refreshed
- Improved error messages for when data isn't available in database

src/api/dashboard/static/index.html

@@ -1343,14 +1343,14 @@
                         </button>
                     </div>
                 </div>
-                <div class="ta-content" id="taContent">
+<div class="ta-content" id="taContent">
-                    <div class="ta-loading">Loading technical analysis...</div>
+                    <div class="ta-loading">Waiting for candle data...</div>
                 </div>
             </div>
         </div>
         
         <!-- Right Sidebar - Strategy Simulation -->
-        <div class="right-sidebar" id="rightSidebar">
+        <div class="right-sidebar collapsed" id="rightSidebar">
             <div class="sidebar-header">
                 <div class="sidebar-title">
                     <span>🎯</span>

src/api/dashboard/static/js/ui/chart.js

@@ -284,12 +284,13 @@ export class TradingDashboard {
         });
     }
     
-    async loadInitialData() {
+async loadInitialData() {
         await Promise.all([
             this.loadData(1000, true),
             this.loadStats()
         ]);
         this.hasInitialLoad = true;
+        this.loadTA();
     }
     
     async loadData(limit = 1000, fitToContent = false) {
@@ -464,14 +465,27 @@ export class TradingDashboard {
         }
     }
     
-    async loadTA() {
+async loadTA() {
+        if (!this.hasInitialLoad) {
+            const time = new Date().toLocaleTimeString();
+            document.getElementById('taContent').innerHTML = `<div class="ta-loading">Loading technical analysis... ${time}</div>`;
+            return;
+        }
+        
         try {
             const response = await fetch(`/api/v1/ta?symbol=BTC&interval=${this.currentInterval}`);
-            this.taData = await response.json();
+            const data = await response.json();
+            
+            if (data.error) {
+                document.getElementById('taContent').innerHTML = `<div class="ta-error">${data.error}</div>`;
+                return;
+            }
+            
+            this.taData = data;
             this.renderTA();
         } catch (error) {
             console.error('Error loading TA:', error);
-            document.getElementById('taContent').innerHTML = '<div class="ta-error">Failed to load technical analysis</div>';
+            document.getElementById('taContent').innerHTML = '<div class="ta-error">Failed to load technical analysis. Please check if the database has candle data.</div>';
         }
     }
     
@@ -590,6 +604,8 @@ export class TradingDashboard {
 
 export function refreshTA() {
     if (window.dashboard) {
+        const time = new Date().toLocaleTimeString();
+        document.getElementById('taContent').innerHTML = `<div class="ta-loading">Refreshing... ${time}</div>`;
         window.dashboard.loadTA();
     }
 }

src/api/dashboard/static/js/ui/sidebar.js

@@ -16,8 +16,9 @@ export function toggleSidebar() {
 }
 
 export function restoreSidebarState() {
-    const collapsed = localStorage.getItem('sidebar_collapsed') === 'true';
+    const collapsed = localStorage.getItem('sidebar_collapsed') !== 'false'; // Default to collapsed
-    if (collapsed) {
+    const sidebar = document.getElementById('rightSidebar');
-        document.getElementById('rightSidebar').classList.add('collapsed');
+    if (collapsed && sidebar) {
+        sidebar.classList.add('collapsed');
     }
 }