From 39df199c7f1faa8126da6098e6cd0f8878fb7c94 Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Sat, 21 Mar 2026 09:46:32 +0100
Subject: [PATCH] refactor: Move drawing tools to TradingView-style left
 toolbar

- Move drawing tools from right-side popup to left sidebar
- Add toggle button for desktop (right sidebar) and mobile (bottom nav)
- Implement collapsible toolbar with 6 drawing tools
- Add visual hover effects matching TradingView style
---
 index.html     | 145 +++++++++++++++++++++++++++++--------------------
 js/ui/chart.js |   9 +++
 2 files changed, 95 insertions(+), 59 deletions(-)

diff --git a/index.html b/index.html
index 24f7815..d0b23ab 100644
--- a/index.html
+++ b/index.html
@@ -101,52 +101,71 @@
                 </div>
             </section>
 
-            <!-- Chart Container -->
+           <!-- Chart Container -->
             <section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper">
                  <div id="chart" class="w-full h-full"></div>
                  
-                  <!-- Overlay Controls -->
-                    <div class="absolute bottom-4 right-4 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="priceScaleControls">
-                        <!-- Drawing Tools Button -->
-                        <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnDrawingTools" title="Drawing Tools">
-                           <span class="material-symbols-outlined text-sm">draw</span>
-                        </button>
-                        
-                        <!-- Drawing Tools Popup -->
-                        <div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="drawingToolsPopup">
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('trend_line')">
-                                <span class="material-symbols-outlined text-sm">call_split</span> Trend Line
-                            </div>
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('horizontal_line')">
-                                <span class="material-symbols-outlined text-sm">swap_horizontal_circle</span> Horizontal Line
-                            </div>
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('vertical_line')">
-                                <span class="material-symbols-outlined text-sm">swap_vert</span> Vertical Line
-                            </div>
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('text')">
-                                <span class="material-symbols-outlined text-sm">text_fields</span> Text Label
-                            </div>
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('arrow_up')">
-                                <span class="material-symbols-outlined text-sm">arrow_upward</span> Arrow Up
-                            </div>
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('arrow_down')">
-                                <span class="material-symbols-outlined text-sm">arrow_downward</span> Arrow Down
-                            </div>
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('clear')">
-                                <span class="material-symbols-outlined text-sm">clear_all</span> Clear All
-                            </div>
-                        </div>
-                        
-                        <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnSettings" title="Settings">
-                           <span class="material-symbols-outlined text-sm">settings</span>
-                        </button>
-                        
-                        <!-- Settings Popup -->
-                      <div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="settingsPopup">
-                            <!-- Reset Scale -->
-                            <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.dashboard.chart.timeScale().fitContent()">
-                                <span class="material-symbols-outlined text-sm">refresh</span> Reset price scale
-                            </div>
+                 <!-- TradingView-style Left Toolbar -->
+                 <div class="absolute left-0 top-0 bottom-0 flex flex-col justify-center bg-[#0d1421]/90 border-r border-[#1b1f2b] backdrop-blur-sm z-20 px-2 py-4 gap-3" style="display: none;" id="chartToolbar">
+                     <!-- Trend Line Tool -->
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('trend_line')" title="Trend Line">
+                         <span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">call_split</span>
+                     </button>
+                     
+                     <!-- Horizontal Line Tool -->
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('horizontal_line')" title="Horizontal Line">
+                         <span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">swap_horizontal_circle</span>
+                     </button>
+                     
+                     <!-- Vertical Line Tool -->
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('vertical_line')" title="Vertical Line">
+                         <span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">swap_vert</span>
+                     </button>
+                     
+                     <!-- Text Label Tool -->
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('text')" title="Text Label">
+                         <span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">text_fields</span>
+                     </button>
+                     
+                     <!-- Arrow Up Tool -->
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('arrow_up')" title="Arrow Up">
+                         <span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">arrow_upward</span>
+                     </button>
+                     
+                     <!-- Arrow Down Tool -->
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('arrow_down')" title="Arrow Down">
+                         <span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">arrow_downward</span>
+                     </button>
+                     
+                     <!-- Divider -->
+                     <div class="w-8 h-px bg-[#2d3a4f] my-1"></div>
+                     
+                     <!-- Clear All -->
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-[#ef5350] transition-colors shadow-lg" onclick="window.activateDrawingTool('clear')" title="Clear All">
+                         <span class="material-symbols-outlined text-sm">clear_all</span>
+                     </button>
+                     
+                     <!-- Divider -->
+                     <div class="w-8 h-px bg-[#2d3a4f] my-1"></div>
+                     
+                     <!-- Toggle Toolbar -->
+                     <button class="w-8 h-8 bg-[#2d3a4f] border border-[#2d3a4f] text-[#2962ff] flex items-center justify-center rounded hover:bg-[#2962ff]/20 transition-colors shadow-lg" id="toggleChartToolbar" title="Toggle Toolbar">
+                         <span class="material-symbols-outlined text-sm">more_vert</span>
+                     </button>
+                 </div>
+                 
+                 <!-- Settings & Price Scale Controls - Bottom Right -->
+                 <div class="absolute bottom-4 right-4 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="priceScaleControls">
+                     <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnSettings" title="Settings">
+                        <span class="material-symbols-outlined text-sm">settings</span>
+                     </button>
+                     
+                     <!-- Settings Popup -->
+                   <div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="settingsPopup">
+                         <!-- Reset Scale -->
+                         <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.dashboard.chart.timeScale().fitContent()">
+                             <span class="material-symbols-outlined text-sm">refresh</span> Reset price scale
+                         </div>
 
                             <hr class="border-[#2d3a4f] my-1">
 
@@ -251,14 +270,18 @@
                 <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Strategy</span>
             </div>
             <div class="flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group" onclick="window.toggleFullscreen()">
-                <span class="material-symbols-outlined group-hover:text-blue-400">fullscreen</span>
-                <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Full</span>
-            </div>
-            <div class="mt-auto flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group">
-                <span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
-                <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">More</span>
-            </div>
-        </nav>
+                 <span class="material-symbols-outlined group-hover:text-blue-400">fullscreen</span>
+                 <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Full</span>
+             </div>
+             <div class="flex flex-col items-center justify-center w-full py-4 text-[#2962ff] bg-[#2962ff]/10 border-r-2 border-[#2962ff] cursor-pointer" onclick="document.getElementById('chartToolbar').style.display === 'none' || !document.getElementById('chartToolbar') ? document.getElementById('chartToolbar').style.display = 'flex' : document.getElementById('chartToolbar').style.display = 'none'">
+                 <span class="material-symbols-outlined">draw</span>
+                 <span class="text-[10px] font-medium mt-1">Draw</span>
+             </div>
+             <div class="mt-auto flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group">
+                 <span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
+                 <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">More</span>
+             </div>
+         </nav>
     </div>
 
     <!-- Bottom Navigation (Mobile Vertical) -->
@@ -280,14 +303,18 @@
             <span class="text-[10px] font-medium mt-1">Strategy</span>
         </div>
         <div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group" onclick="window.toggleFullscreen()">
-            <span class="material-symbols-outlined group-hover:text-blue-400">fullscreen</span>
-            <span class="text-[10px] font-medium mt-1">Full</span>
-        </div>
-        <div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group">
-            <span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
-            <span class="text-[10px] font-medium mt-1">More</span>
-        </div>
-    </nav>
+             <span class="material-symbols-outlined group-hover:text-blue-400">fullscreen</span>
+             <span class="text-[10px] font-medium mt-1">Full</span>
+         </div>
+         <div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#2962ff] bg-[#2962ff]/10 rounded-xl px-4 py-1.5 transition-transform duration-200 cursor-pointer border border-[#2962ff]/20" onclick="document.getElementById('chartToolbar').style.display === 'none' || !document.getElementById('chartToolbar') ? document.getElementById('chartToolbar').style.display = 'flex' : document.getElementById('chartToolbar').style.display = 'none'">
+             <span class="material-symbols-outlined">draw</span>
+             <span class="text-[10px] font-bold mt-1">Draw</span>
+         </div>
+         <div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group">
+             <span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
+             <span class="text-[10px] font-medium mt-1">More</span>
+         </div>
+     </nav>
 
     <!-- Sidebar Overlay (Acts as Modal) -->
     <div id="rightSidebar" class="collapsed fixed top-[64px] right-0 md:right-[72px] bottom-[64px] md:bottom-0 w-full max-w-[370px] bg-[#1a2333] border-l border-[#2d3a4f] shadow-2xl z-40 flex flex-col">
diff --git a/js/ui/chart.js b/js/ui/chart.js
index 5dc4df5..6a61c3a 100644
--- a/js/ui/chart.js
+++ b/js/ui/chart.js
@@ -502,6 +502,8 @@ constructor() {
     initPriceScaleControls() {
         const btnSettings = document.getElementById('btnSettings');
         const settingsPopup = document.getElementById('settingsPopup');
+        const toggleToolbarBtn = document.getElementById('toggleChartToolbar');
+        const chartToolbar = document.getElementById('chartToolbar');
         
         // Settings Popup Toggle and Outside Click
         if (btnSettings && settingsPopup) {
@@ -523,6 +525,13 @@ constructor() {
             }
         }
         
+        // Toggle Chart Toolbar
+        if (toggleToolbarBtn && chartToolbar) {
+            toggleToolbarBtn.addEventListener('click', () => {
+                chartToolbar.style.display = chartToolbar.style.display === 'flex' ? 'none' : 'flex';
+            });
+        }
+        
         // Drawing Tools
         this.initDrawingTools();