fix: restore settings gear icon, implement full scale/mode controls, and enable mobile pinch zoom

js/ui/chart.js

@@ -321,6 +321,12 @@ constructor() {
             rightPriceScale: {
                 borderColor: COLORS.tvBorder,
                 autoScale: true,
+                mode: 0,
+                // Explicitly enable pinch/scale behavior on the price scale
+                scaleMargins: {
+                    top: 0.1,
+                    bottom: 0.1,
+                },
             },
             timeScale: {
                 borderColor: COLORS.tvBorder,
@@ -338,7 +344,15 @@ constructor() {
                },
            },
            handleScroll: {
-                vertTouchDrag: false,
+                mouseWheel: true,
+                pressedMouseMove: true,
+                horzTouchDrag: true,
+                vertTouchDrag: true, // Enabled to allow chart-internal vertical scrolling
+            },
+           handleScale: {
+                axisPressedMouseMove: true,
+                mouseWheel: true,
+                pinch: true, // This enables pinch-to-zoom on touch devices
             },
            });         
          // Setup price format selector change handler
@@ -485,10 +499,10 @@ constructor() {
     }
     
     initPriceScaleControls() {
-        // Gear Button Toggle
         const btnSettings = document.getElementById('btnSettings');
         const settingsPopup = document.getElementById('settingsPopup');
         
+        // Settings Popup Toggle and Outside Click
         if (btnSettings && settingsPopup) {
             btnSettings.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -522,35 +536,41 @@ constructor() {
             updateCheckmark('modeLogCheck', this.scaleState.scaleMode === 1);
             updateCheckmark('modePercentCheck', this.scaleState.scaleMode === 2);
             updateCheckmark('modeIndexedCheck', this.scaleState.scaleMode === 3);
-        };
             
-        // Apply initial state
+            // Apply state to chart
             this.candleSeries.priceScale().applyOptions({
                 autoScale: this.scaleState.autoScale,
                 invertScale: this.scaleState.invertScale,
                 mode: this.scaleState.scaleMode
             });
+        };
+
         updateUI();
 
         window.toggleScaleOption = (option) => {
             this.scaleState[option] = !this.scaleState[option];
             localStorage.setItem(`winterfail_scale_${option}`, this.scaleState[option]);
-            
-            this.candleSeries.priceScale().applyOptions({
-                [option]: this.scaleState[option]
-            });
             updateUI();
         };
 
         window.setScaleMode = (mode) => {
             this.scaleState.scaleMode = mode;
             localStorage.setItem('winterfail_scale_mode', mode);
-            
-            this.candleSeries.priceScale().applyOptions({
-                mode: mode
-            });
             updateUI();
         };
+
+        // Add keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+            
+            if (e.key.toLowerCase() === 'a') {
+                window.toggleScaleOption('autoScale');
+            } else if (e.key.toLowerCase() === 'l') {
+                // Toggle between Normal (0) and Log (1)
+                const newMode = this.scaleState.scaleMode === 1 ? 0 : 1;
+                window.setScaleMode(newMode);
+            }
+        });
     }
     
     initNavigationControls() {