hide indicators panel when clicking on chart

index.html

@@ -324,8 +324,8 @@
             </section>
 
             <!-- Draggable Divider -->
-            <div id="mainChartResizer" class="h-1.5 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative">
-                <div class="w-10 h-0.5 bg-gray-500 rounded opacity-0 group-hover:opacity-100 transition-opacity"></div>
+            <div id="mainChartResizer" class="h-4 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative">
+                <div class="w-10 h-0.5 bg-gray-500 rounded opacity-50 transition-all"></div>
             </div>
 
             <!-- Technical Analysis Section -->
@@ -428,7 +428,7 @@
             <span class="material-symbols-outlined text-sm">menu</span>
         </button>
 
-        <div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421]">
+        <div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421] no-scrollbar">
              <div class="sidebar-tab-panel active h-full" id="tab-indicators">
                  <div id="indicatorPanel" class="p-2">
                      <!-- Indicators content injected here -->
@@ -503,6 +503,20 @@
             }
         };
 
+        window.hideSidebar = function() {
+            const sidebar = document.getElementById('rightSidebar');
+            if (sidebar && !sidebar.classList.contains('collapsed')) {
+                sidebar.classList.add('collapsed');
+            }
+        };
+
+        window.hideSidebarAndClearDrawings = function() {
+            window.hideSidebar();
+            if (window.dashboard?.drawingManager) {
+                window.dashboard.drawingManager.clearAll();
+            }
+        };
+
         // Chart Resizer Logic
         document.addEventListener('DOMContentLoaded', () => {
             const resizer = document.getElementById('mainChartResizer');
@@ -510,29 +524,33 @@
             
             let isResizing = false;
             let lastDownY = 0;
+            let savedHeight = localStorage.getItem('chart_height');
 
             if (resizer && chartWrapper) {
-                resizer.addEventListener('mousedown', (e) => {
-                    isResizing = true;
-                    lastDownY = e.clientY;
-                    document.body.style.cursor = 'row-resize';
-                    chartWrapper.style.pointerEvents = 'none'; // Prevent iframe/canvas capturing mouse
-                });
+                if (savedHeight) {
+                    chartWrapper.style.flex = 'none';
+                    chartWrapper.style.height = savedHeight + 'px';
+                }
 
-                document.addEventListener('mousemove', (e) => {
+                const startResize = (y) => {
+                    isResizing = true;
+                    lastDownY = y;
+                    document.body.style.cursor = 'row-resize';
+                    chartWrapper.style.pointerEvents = 'none';
+                };
+
+                const doResize = (y) => {
                     if (!isResizing) return;
                     
-                    const deltaY = e.clientY - lastDownY;
-                    lastDownY = e.clientY;
+                    const deltaY = y - lastDownY;
+                    lastDownY = y;
                     
                     const newHeight = chartWrapper.offsetHeight + deltaY;
                     
-                    // Min 200px, Max windowHeight - 150px
                     if (newHeight > 200 && newHeight < window.innerHeight - 150) {
                         chartWrapper.style.flex = 'none';
                         chartWrapper.style.height = newHeight + 'px';
                         
-                        // Force chart layout recalculation if applicable
                         if (window.dashboard && window.dashboard.chart) {
                             const container = document.getElementById('chart');
                             window.dashboard.chart.applyOptions({
@@ -541,17 +559,47 @@
                             });
                         }
                     }
-                });
+                };
 
-                document.addEventListener('mouseup', () => {
+                const endResize = () => {
                     if (isResizing) {
                         isResizing = false;
                         document.body.style.cursor = '';
                         chartWrapper.style.pointerEvents = 'auto';
+                        const currentHeight = chartWrapper.style.height;
+                        localStorage.setItem('chart_height', currentHeight ? parseFloat(currentHeight) : 75);
                     }
-                });
+                };
+
+                resizer.addEventListener('mousedown', (e) => startResize(e.clientY));
+                resizer.addEventListener('touchstart', (e) => startResize(e.touches[0].clientY), {passive: false});
+
+                document.addEventListener('mousemove', (e) => doResize(e.clientY));
+                document.addEventListener('touchmove', (e) => doResize(e.touches[0].clientY), {passive: false});
+
+      document.addEventListener('mouseup', endResize);
+        document.addEventListener('touchend', endResize);
+        document.addEventListener('touchcancel', endResize);
             }
         });
+
+        // Hide sidebar when clicking on chart container (but not on drawing toolbar or sidebar itself)
+        const chartWrapper = document.getElementById('chartWrapper');
+        if (chartWrapper) {
+            chartWrapper.addEventListener('click', function(e) {
+                const sidebar = document.getElementById('rightSidebar');
+                const drawingToolbar = document.getElementById('drawingToolbar');
+                
+                if (!sidebar || sidebar.classList.contains('collapsed')) return;
+                
+                const isDrawingToolbar = e.target.closest('#drawingToolbar');
+                const isSidebar = e.target.closest('#rightSidebar');
+                
+                if (!isDrawingToolbar && !isSidebar) {
+                    hideSidebar();
+                }
+            });
+        }
     </script>
 
     <script src="./config.js"></script>

js/ui/chart.js

@@ -352,11 +352,14 @@ export class TradingDashboard {
                 vertTouchDrag: true, // Enabled to allow chart-internal vertical scrolling
             },
            handleScale: {
-                axisPressedMouseMove: true,
-                mouseWheel: true,
-                pinch: true, // This enables pinch-to-zoom on touch devices
+                 axisPressedMouseMove: true,
+                 mouseWheel: true,
+                 pinch: true, // This enables pinch-to-zoom on touch devices
+             },
+            crosshair: {
+                mode: LightweightCharts.CrosshairMode.Normal,
             },
-           });         
+            });
          // Setup price format selector change handler
          const priceInput = document.getElementById("priceFormatInput");
          
@@ -488,6 +491,11 @@ export class TradingDashboard {
                 this.renderTA();
             }
         });
+        
+        // Hide indicators panel when clicking on chart
+        this.chart.subscribeClick(param => {
+            window.hideAllPanels?.();
+        });
 
         window.addEventListener('resize', () => {
             this.chart.applyOptions({