Improve tooltip and scroll indicator management

Adds persistent state for horizontal scroll indicators in PresetManagerDialog to prevent duplicates and ensures proper cleanup. Tooltips are now re-attached after preset changes in PresetAddViewRenderer. TooltipManager now hides tooltips on click events without clearing state, improving tooltip usability.

Author: Azornes

js/utils/PresetManagerDialog.js

@@ -54,6 +54,7 @@ export class PresetManagerDialog {
         this.presetsGrid = null;
         this.presetPreviewContainer = null;
         this.presetPreviewResizeHandler = null;
+        this.horizontalScrollState = { indicator: null }; // Persistent state for horizontal scroll indicator
 
         // SearchableDropdown instance
         this.searchableDropdown = new SearchableDropdown();
@@ -560,12 +561,11 @@ export class PresetManagerDialog {
             // Update column scroll indicators
             AspectRatioUtils.updateColumnScrollIndicators(columns);
 
-            // Add horizontal scroll indicator
-            const horizontalScrollState = { indicator: null };
+            // Add horizontal scroll indicator using persistent state
             const updateHorizontalScrollIndicator = AspectRatioUtils.createHorizontalScrollManager(
                 presetsGrid,
                 this.presetPreviewContainer,
-                horizontalScrollState
+                this.horizontalScrollState  // Use persistent state to avoid duplicates
             );
             updateHorizontalScrollIndicator();
 
@@ -786,6 +786,14 @@ export class PresetManagerDialog {
             this.presetPreviewResizeHandler = null;
         }
 
+        // Clean up horizontal scroll indicator
+        if (this.horizontalScrollState && this.horizontalScrollState.indicator) {
+            if (this.horizontalScrollState.indicator.parentNode) {
+                this.horizontalScrollState.indicator.parentNode.removeChild(this.horizontalScrollState.indicator);
+            }
+            this.horizontalScrollState.indicator = null;
+        }
+
         // Close SearchableDropdown if it's open
         if (this.searchableDropdown) {
             this.searchableDropdown.hide();

js/utils/preset-manager/PresetAddViewRenderer.js

@@ -706,6 +706,7 @@ export class PresetAddViewRenderer {
             if (confirm(`Delete custom preset "${preset.name}"?`)) {
                 this.parentDialog.manager.deletePreset(this.parentDialog.selectedCategory, preset.name);
                 this.parentDialog.updatePresetPreview();
+                this.parentDialog.attachTooltips(); // Re-attach tooltips to new DOM elements
             }
         });
 
@@ -732,6 +733,7 @@ export class PresetAddViewRenderer {
             e.stopPropagation();
             this.parentDialog.manager.toggleBuiltInPresetVisibility(this.parentDialog.selectedCategory, preset.name);
             this.parentDialog.updatePresetPreview();
+            this.parentDialog.attachTooltips(); // Re-attach tooltips to new DOM elements
         });
 
         return toggleBtn;

js/utils/preset-manager/TooltipManager.js

@@ -20,6 +20,7 @@ export class TooltipManager {
         this.handleMouseEnter = this.handleMouseEnter.bind(this);
         this.handleMouseLeave = this.handleMouseLeave.bind(this);
         this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleClick = this.handleClick.bind(this);
     }
 
     /**
@@ -88,6 +89,7 @@ export class TooltipManager {
         element.addEventListener('mouseenter', this.handleMouseEnter);
         element.addEventListener('mouseleave', this.handleMouseLeave);
         element.addEventListener('mousemove', this.handleMouseMove);
+        element.addEventListener('click', this.handleClick); // Hide tooltip on click without clearing state
     }
 
     /**
@@ -100,6 +102,7 @@ export class TooltipManager {
         element.removeEventListener('mouseenter', this.handleMouseEnter);
         element.removeEventListener('mouseleave', this.handleMouseLeave);
         element.removeEventListener('mousemove', this.handleMouseMove);
+        element.removeEventListener('click', this.handleClick);
     }
 
     /**
@@ -152,6 +155,22 @@ export class TooltipManager {
         }
     }
 
+    /**
+     * Handles click event - hides tooltip without clearing currentTarget
+     * @param {MouseEvent} e - Mouse event
+     */
+    handleClick(e) {
+        // Clear timer
+        if (this.tooltipTimer) {
+            clearTimeout(this.tooltipTimer);
+            this.tooltipTimer = null;
+        }
+        
+        // Hide tooltip but don't clear currentTarget
+        // This allows tooltips to work on subsequent elements
+        this.hideTooltip();
+    }
+
     /**
      * Gets tooltip text for an element
      * @param {HTMLElement} element - Element to get tooltip for