From a71a6ce03ab907e6ac51bc83e6e6a937c706d1c2 Mon Sep 17 00:00:00 2001
From: DJObleezy <Obleezy@gmail.com>
Date: Wed, 23 Apr 2025 13:55:19 -0700
Subject: [PATCH] Add theme change listener and first startup handling

- Implement `setupThemeChangeListener` in `main.js` to detect theme changes across tabs, save font configurations, and recreate the chart with appropriate styles for mobile and desktop.
- Introduce new functions in `theme.js` to manage theme preferences on first startup, including setting the DeepSea theme as default and checking for previous app launches.
---
 static/js/main.js  | 70 ++++++++++++++++++++++++++++++++++++++++++----
 static/js/theme.js | 33 +++++++++++++++++++++-
 2 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/static/js/main.js b/static/js/main.js
index 55b6036..54eac63 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -2134,21 +2134,81 @@ $(document).ready(function () {
 
     // Add this function to the document ready section
     function setupThemeChangeListener() {
-        // Listen for storage events to detect theme changes from other tabs/windows
         window.addEventListener('storage', function (event) {
             if (event.key === 'useDeepSeaTheme') {
-                // Update chart with new theme colors
                 if (trendChart) {
-                    // Trigger chart update with new colors
+                    // Save all font configurations
+                    const fontConfig = {
+                        xTicks: { ...trendChart.options.scales.x.ticks.font },
+                        yTicks: { ...trendChart.options.scales.y.ticks.font },
+                        yTitle: { ...trendChart.options.scales.y.title.font },
+                        tooltip: {
+                            title: { ...trendChart.options.plugins.tooltip.titleFont },
+                            body: { ...trendChart.options.plugins.tooltip.bodyFont }
+                        }
+                    };
+
+                    // Check if we're on mobile (viewport width < 768px)
+                    const isMobile = window.innerWidth < 768;
+
+                    // Store the original sizes before destroying chart
+                    const xTicksFontSize = fontConfig.xTicks.size || 14;
+                    const yTicksFontSize = fontConfig.yTicks.size || 14;
+                    const yTitleFontSize = fontConfig.yTitle.size || 16;
+
+                    // Recreate the chart with new theme colors
                     trendChart.destroy();
                     trendChart = initializeChart();
+
+                    // Ensure font sizes are explicitly set to original values
+                    // This is especially important for mobile
+                    if (isMobile) {
+                        // On mobile, set explicit font sizes (based on the originals)
+                        trendChart.options.scales.x.ticks.font = {
+                            ...fontConfig.xTicks,
+                            size: xTicksFontSize
+                        };
+
+                        trendChart.options.scales.y.ticks.font = {
+                            ...fontConfig.yTicks,
+                            size: yTicksFontSize
+                        };
+
+                        trendChart.options.scales.y.title.font = {
+                            ...fontConfig.yTitle,
+                            size: yTitleFontSize
+                        };
+
+                        // Also set tooltip font sizes explicitly
+                        trendChart.options.plugins.tooltip.titleFont = {
+                            ...fontConfig.tooltip.title,
+                            size: fontConfig.tooltip.title.size || 16
+                        };
+
+                        trendChart.options.plugins.tooltip.bodyFont = {
+                            ...fontConfig.tooltip.body,
+                            size: fontConfig.tooltip.body.size || 14
+                        };
+
+                        console.log('Mobile device detected: Setting explicit font sizes for chart labels');
+                    } else {
+                        // On desktop, use the full font config objects as before
+                        trendChart.options.scales.x.ticks.font = fontConfig.xTicks;
+                        trendChart.options.scales.y.ticks.font = fontConfig.yTicks;
+                        trendChart.options.scales.y.title.font = fontConfig.yTitle;
+                        trendChart.options.plugins.tooltip.titleFont = fontConfig.tooltip.title;
+                        trendChart.options.plugins.tooltip.bodyFont = fontConfig.tooltip.body;
+                    }
+
+                    // Update with data and force an immediate chart update
                     updateChartWithNormalizedData(trendChart, latestMetrics);
+                    trendChart.update('none');
                 }
 
-                // Update other UI elements that depend on theme colors
+                // Update refresh button color
                 updateRefreshButtonColor();
 
-                // Trigger a custom event that other components can listen to
+                // Trigger custom event
                 $(document).trigger('themeChanged');
             }
         });
diff --git a/static/js/theme.js b/static/js/theme.js
index 86d3ebe..08efe86 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -406,11 +406,42 @@ function saveThemePreference(useDeepSea) {
     }
 }
 
+// Check if this is the first startup by checking for the "firstStartup" flag
+function isFirstStartup() {
+    return localStorage.getItem('hasStartedBefore') !== 'true';
+}
+
+// Mark that the app has started before
+function markAppStarted() {
+    try {
+        localStorage.setItem('hasStartedBefore', 'true');
+    } catch (e) {
+        console.error("Error marking app as started:", e);
+    }
+}
+
+// Initialize DeepSea as default on first startup
+function initializeDefaultTheme() {
+    if (isFirstStartup()) {
+        console.log("First startup detected, setting DeepSea as default theme");
+        saveThemePreference(true); // Set DeepSea theme as default (true)
+        markAppStarted();
+        return true;
+    }
+    return false;
+}
+
 // Check for theme preference in localStorage
 function loadThemePreference() {
     try {
+        // Check if it's first startup - if so, set DeepSea as default
+        const isFirstTime = initializeDefaultTheme();
+
+        // Get theme preference from localStorage
         const themePreference = localStorage.getItem('useDeepSeaTheme');
-        if (themePreference === 'true') {
+
+        // Apply theme based on preference
+        if (themePreference === 'true' || isFirstTime) {
             applyDeepSeaTheme();
         } else {
             // Make sure the toggle button is styled correctly for Bitcoin theme