🛠️ [fix] Enhances UI and fixes map issues

This commit improves the user interface and fixes several map-related issues.

- 🛠️ [fix] Corrects elapsed time display in tooltips.
  - Changes "Ride Time" to "Elapsed Time" for clarity.
- 🛠️ [fix] Fixes file name sanitization for GPX exports.
  - Uses `replaceAll` instead of `replace` to remove all invalid characters from track names, ensuring valid file names for GPX exports. ⚙️
- 🛠️ [fix] Preserves active tab during file loading.
  - Saves and restores the current tab when loading overlay files to prevent unexpected tab switches. 🔄
- 🗺️ [feat] Improves map tab activation and centering.
  - Ensures the map tab is always activated and the map is centered on the main file when the active file name is clicked. 🖱️
  - Centers the map after a delay to ensure the tab switch completes.
- 🗺️ [feat] Enhances mini-map functionality.
  - Adds configuration options for better control like `zoomLevelOffset`, `aimingRectOptions`, `shadowRectOptions`, etc.
  - Forces mini-map to update after a short delay to ensure proper rendering. ⏱️
  - Keeps mini-map in sync with the main map by invalidating its size on main map move or zoom events, preventing grey tiles. 🗺️
- 🗺️ [feat] Fixes grey tiles issue on map tab switch.
  - Invalidates the map size when switching to the map tab to prevent grey tiles from appearing. ⬜
- 🧹 [chore] Reorders imports in `renderer.js` for better organization. 🗂️
  - Moves `setupCreditsMarquee` import to improve code readability.

Signed-off-by: Nick2bad4u <[email protected]>

Author: Nick2bad4u

electron-app/renderer.js

@@ -80,10 +80,10 @@
 import { setLoading } from "./utils/app/initialization/rendererUtils.js";
 // Avoid static imports for modules that tests mock; resolve dynamically via ensureCoreModules()
 import { createExportGPXButton } from "./utils/files/export/createExportGPXButton.js";
-import { setupCreditsMarquee } from "./utils/ui/layout/enhanceCreditsSection.js";
 // Avoid static import of AppActions because tests sometimes mock the module
 // Without exporting the named symbol. Always resolve via ensureCoreModules().
 import { getState, subscribe } from "./utils/state/core/stateManager.js";
+import { setupCreditsMarquee } from "./utils/ui/layout/enhanceCreditsSection.js";
 // Import domain-level appState for tests that mock this path explicitly
 // Note: app domain state functions are dynamically imported via ensureCoreModules()
 // Avoid static import of uiStateManager for the same reason as AppActions in tests

electron-app/style.css

@@ -1324,23 +1324,16 @@ body.theme-light .tab-button.active::after {
 
 .app-pill > * {
     position: relative;
-    z-index: 1;
+    z-index: 9999;
 }
 
 .pill-accent {
     color: rgb(var(--color-accent-rgb));
     letter-spacing: 0.18em;
     font-weight: 700;
+    overflow: overlay !important;
 }
 
-.app-pill:nth-child(2n) {
-    animation: pill-breathe 6s ease-in-out infinite;
-}
-
-.app-pill:nth-child(2n + 1) {
-    animation: pill-breathe 6s ease-in-out infinite;
-    animation-delay: 1.5s;
-}
 
 body.app-has-file .app-header,
 body[data-has-fit-file="true"] .app-header {
@@ -1428,6 +1421,9 @@ body[data-has-fit-file="true"] .header-bar::after {
     animation-duration: 18s;
 }
 
+.leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle, .leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle:hover {
+    display: none
+}
 body.app-has-file .header-bar #activeFileNameContainer,
 body[data-has-fit-file="true"] .header-bar #activeFileNameContainer {
     flex: 1 1 auto;
@@ -2050,7 +2046,7 @@ body.app-has-file .tab-bar,
 body[data-has-fit-file="true"] .tab-bar {
     margin-top: 0;
     padding-top: 5px;
-    margin-bottom: 24px;
+    margin-bottom: 0;
 }
 
 .tab-bar::after {

electron-app/utils/app/events.js

@@ -324,7 +324,7 @@ export function setupListeners({
                     return;
                 }
 
-                const sanitizedBaseName = trackName.replace(/[\s\u0000-\u001f<>:"/\\|?*]+/gu, "_") || "export";
+                const sanitizedBaseName = trackName.replaceAll(/[\s\u0000-\u001F<>:"/\\|?*]+/gu, "_") || "export";
                 const downloadName = filePath.split(/[/\\]/).pop() || `${sanitizedBaseName}.gpx`;
                 const blob = new Blob([gpx], { type: "application/gpx+xml;charset=utf-8" });
                 const a = document.createElement("a");

electron-app/utils/app/lifecycle/listeners.js

@@ -526,7 +526,7 @@ export function setupListeners({
                         return;
                     }
 
-                    const sanitizedBaseName = trackName.replace(/[\s\u0000-\u001f<>:"/\\|?*]+/gu, "_") || "export";
+                    const sanitizedBaseName = trackName.replaceAll(/[\s\u0000-\u001F<>:"/\\|?*]+/gu, "_") || "export";
                     const a = document.createElement("a"),
                         blob = new Blob([gpx], { type: "application/gpx+xml;charset=utf-8" }),
                         downloadName = safePath.split(/[/\\]/).pop() || `${sanitizedBaseName}.gpx`;

electron-app/utils/files/export/createExportGPXButton.js

@@ -1,6 +1,6 @@
 import { getThemeColors } from "../../charts/theming/getThemeColors.js";
-import { buildGpxFromRecords, resolveTrackNameFromLoadedFiles } from "./gpxExport.js";
 import { showNotification } from "../../ui/notifications/showNotification.js";
+import { buildGpxFromRecords, resolveTrackNameFromLoadedFiles } from "./gpxExport.js";
 
 /**
  * Creates an Export GPX button for exporting the current track as a GPX file.
@@ -31,7 +31,7 @@ export function createExportGPXButton() {
             return;
         }
 
-        const downloadNameBase = trackName.replace(/[\s\u0000-\u001f<>:"/\\|?*]+/gu, "_") || "track";
+        const downloadNameBase = trackName.replaceAll(/[\s\u0000-\u001F<>:"/\\|?*]+/gu, "_") || "track";
         const a = document.createElement("a"),
             blob = new Blob([gpx], { type: "application/gpx+xml;charset=utf-8" }),
             url = URL.createObjectURL(blob);

electron-app/utils/files/import/loadOverlayFiles.js

@@ -66,13 +66,26 @@ export async function loadOverlayFiles(files) {
     }
 
     if (stateDirty) {
+        // Save current tab before syncing state (which might trigger tab switches)
+        const currentTabButton = document.querySelector('.tab-button.active');
+        const currentTabId = currentTabButton?.id;
+
         syncLoadedFitFilesState();
         if (globalThis.renderMap) {
             globalThis.renderMap();
         }
         if (/** @type {any} */ (globalThis).updateShownFilesList) {
             /** @type {any} */ globalThis.updateShownFilesList();
         }
+
+        // Restore the original tab if it was changed
+        if (currentTabId && currentTabButton instanceof HTMLElement) {
+            const newActiveTab = document.querySelector('.tab-button.active');
+            if (newActiveTab?.id !== currentTabId) {
+                console.log('[loadOverlayFiles] Restoring tab to:', currentTabId);
+                currentTabButton.click();
+            }
+        }
     }
 
     const finalCount = Array.isArray(globalThis.loadedFitFiles) ? globalThis.loadedFitFiles.length : 0;

electron-app/utils/formatting/display/formatTooltipData.js

@@ -93,7 +93,7 @@ export function formatTooltipData(idx, row, lapNum, recordMesgsOverride) {
             tooltipParts.push(`<b>Time:</b> ${dateStr}`);
         }
         if (rideTime) {
-            tooltipParts.push(`<b>Ride Time:</b> ${rideTime}`);
+            tooltipParts.push(`<b>Elapsed Time:</b> ${rideTime}`);
         }
         if (distance) {
             tooltipParts.push(`<b>Distance:</b> ${distance.replace("<br>", "")}`);

electron-app/utils/maps/controls/mapActionButtons.js

@@ -234,17 +234,21 @@ function setupActiveFileNameMapActions() {
             try {
                 console.log("[mapActionButtons] Active file name clicked");
 
-                // Switch to map tab if not active
-                const mapTabBtn = document.querySelector('[data-tab="map"]');
-                if (mapTabBtn instanceof HTMLElement && !mapTabBtn.classList.contains("active")) {
+                // Always switch to map tab (even if already active, to ensure map is visible)
+                const mapTabBtn = document.querySelector('#tab-map');
+                if (mapTabBtn instanceof HTMLElement) {
                     console.log("[mapActionButtons] Switching to map tab");
                     mapTabBtn.click();
-                }
 
-                // Center on main file with a slight delay to ensure tab switch completes
-                setTimeout(() => {
+                    // Center on main file with a slight delay to ensure tab switch completes
+                    setTimeout(() => {
+                        _centerMapOnMainFile();
+                    }, 100);
+                } else {
+                    // If map tab button not found, still try to center
+                    console.warn("[mapActionButtons] Map tab button not found, attempting to center anyway");
                     _centerMapOnMainFile();
-                }, 100);
+                }
             } catch (error) {
                 console.error("[mapActionButtons] Error in active filename click:", error);
                 // Correct argument order: (message, type)

electron-app/utils/maps/core/renderMap.js

@@ -85,6 +85,25 @@ export function renderMap() {
         return;
     }
 
+    // Save drawn items before destroying map
+    let savedDrawnLayers = [];
+    if (windowExt._drawnItems && windowExt._drawnItems.getLayers) {
+        try {
+            savedDrawnLayers = windowExt._drawnItems.getLayers().map((/** @type {any} */ layer) => ({
+                geoJSON: layer.toGeoJSON ? layer.toGeoJSON() : null,
+                options: layer.options,
+                type: layer instanceof L.Circle ? "circle" :
+                    layer instanceof L.Marker ? "marker" :
+                        layer instanceof L.Polygon ? "polygon" :
+                            layer instanceof L.Polyline ? "polyline" :
+                                layer instanceof L.Rectangle ? "rectangle" : "unknown",
+            })).filter((item) => item.geoJSON !== null);
+            console.log("[renderMap] Saved", savedDrawnLayers.length, "drawn items");
+        } catch (error) {
+            console.warn("[renderMap] Failed to save drawn items:", error);
+        }
+    }
+
     // Fix: Remove any previous Leaflet map instance to avoid grey background bug
     if (windowExt._leafletMapInstance && windowExt._leafletMapInstance.remove) {
         windowExt._leafletMapInstance.remove();
@@ -367,15 +386,93 @@ export function renderMap() {
         // Always use a standard tile layer for the minimap
         const miniMapLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
             attribution: "",
+            maxZoom: 18,
+            minZoom: 0,
         });
-        new L.Control.MiniMap(miniMapLayer, {
+        const miniMap = new L.Control.MiniMap(miniMapLayer, {
+            aimingRectOptions: {
+                clickable: false,
+                color: "#ff7800",
+                fillColor: "#ff7800",
+                fillOpacity: 0.1,
+                opacity: 1,
+                weight: 2,
+            },
+            autoToggleDisplay: false,
+            centerFixed: false,
+            height: 150,
+            mapOptions: {
+                attributionControl: false,
+                zoomControl: false,
+            },
+            minimized: false,
+            position: "bottomright",
+            shadowRectOptions: {
+                clickable: true,
+                color: "#000000",
+                fillColor: "#000000",
+                fillOpacity: 0.2,
+                opacity: 0.4,
+                weight: 1,
+            },
             toggleDisplay: true,
-        }).addTo(map);
+            width: 150,
+            zoomAnimation: false,
+            zoomLevelFixed: false,
+            zoomLevelOffset: -5,
+        });
+        miniMap.addTo(map);
+
+        // Force minimap to update after a short delay to ensure proper rendering
+        setTimeout(() => {
+            if (miniMap._miniMap) {
+                miniMap._miniMap.invalidateSize();
+            }
+        }, 100);
+
+        // Keep minimap in sync when main map moves or zooms to prevent grey tiles
+        map.on("moveend", () => {
+            if (miniMap._miniMap) {
+                miniMap._miniMap.invalidateSize();
+            }
+        });
+
+        map.on("zoomend", () => {
+            if (miniMap._miniMap) {
+                miniMap._miniMap.invalidateSize();
+            }
+        });
     }
 
     // --- Measurement tool (if plugin available) ---
     if (windowExt.L && L.control && L.control.measure) {
-        L.control.measure({ position: "topleft" }).addTo(map);
+        const measureControl = L.control.measure({
+            activeColor: "#ff7800",
+            captureZIndex: 10_000,
+            clearMeasurementsOnStop: false,
+            completedColor: "#1976d2",
+            decPoint: ".",
+            popupOptions: {
+                autoPanPadding: [10, 10],
+                className: "leaflet-measure-resultpopup",
+            },
+            position: "topleft",
+            primaryAreaUnit: "sqmeters",
+            primaryLengthUnit: "meters",
+            secondaryAreaUnit: "acres",
+            secondaryLengthUnit: "miles",
+            thousandsSep: ",",
+        });
+        measureControl.addTo(map);
+        windowExt._measureControl = measureControl;
+
+        // Clear measurements when starting a new measurement
+        map.on("measurestart", () => {
+            // Clear previous completed measurements when starting new one
+            if (measureControl._measurementRunningTotal) {
+                measureControl._measurementRunningTotal = 0;
+            }
+        });
     }
 
     // --- Drawing/editing tool (if plugin available) ---
@@ -384,18 +481,70 @@ export function renderMap() {
         map.addLayer(drawnItems);
         const drawControl = new L.Control.Draw({
             draw: {
-                circle: true,
+                circle: {
+                    shapeOptions: {
+                        clickable: true,
+                        color: "#1976d2",
+                    },
+                },
                 marker: true,
-                polygon: true,
-                polyline: true,
-                rectangle: true,
+                polygon: {
+                    allowIntersection: false,
+                    shapeOptions: {
+                        clickable: true,
+                        color: "#1976d2",
+                    },
+                },
+                polyline: {
+                    shapeOptions: {
+                        clickable: true,
+                        color: "#1976d2",
+                    },
+                },
+                rectangle: {
+                    shapeOptions: {
+                        clickable: true,
+                        color: "#1976d2",
+                    },
+                },
+            },
+            edit: {
+                edit: true,
+                featureGroup: drawnItems,
+                remove: true,
             },
-            edt: false,
         });
         map.addControl(drawControl);
+
+        // Add drawn shapes to the layer so they persist
         map.on(L.Draw.Event.CREATED, (/** @type {any} */ e) => {
-            drawnItems.addLayer(e.layer);
+            const { layer } = e;
+            drawnItems.addLayer(layer);
         });
+
+        // Store reference to drawn items for persistence
+        windowExt._drawnItems = drawnItems;
+
+        // Restore previously drawn items
+        if (savedDrawnLayers && savedDrawnLayers.length > 0) {
+            console.log("[renderMap] Restoring", savedDrawnLayers.length, "drawn items");
+            for (const item of savedDrawnLayers) {
+                try {
+                    let layer;
+                    if (item.geoJSON) {
+                        layer = L.geoJSON(item.geoJSON, {
+                            onEachFeature: (/** @type {any} */ _feature, /** @type {any} */ createdLayer) => {
+                                drawnItems.addLayer(createdLayer);
+                            },
+                            pointToLayer: (/** @type {any} */ _feature, /** @type {any} */ latlng) => L.marker(latlng),
+                            style: item.options,
+                        });
+                    }
+                } catch (error) {
+                    console.warn("[renderMap] Failed to restore drawn item:", error);
+                }
+            }
+        }
     }
 
     // --- Overlay logic ---

electron-app/utils/ui/tabs/tabStateManager.js

@@ -407,6 +407,16 @@ class TabStateManager {
             console.log("[TabStateManager] Rendering map for first time");
             /** @type {any} */ (globalThis).renderMap();
             getStateMgr().setState("map.isRendered", true, { source: "TabStateManager.handleMapTab" });
+        } else {
+            // Map already rendered, just invalidate size to fix grey tiles after tab switch
+            const mapInstance = /** @type {any} */ (globalThis)._leafletMapInstance;
+            if (mapInstance && typeof mapInstance.invalidateSize === "function") {
+                // Small delay to ensure DOM has updated
+                setTimeout(() => {
+                    mapInstance.invalidateSize();
+                    console.log("[TabStateManager] Map size invalidated to fix grey tiles");
+                }, 50);
+            }
         }
     }