feat(ui): add hotkey (H) for hover highlight toggle and clear states on disable

- Register 'h' hotkey in registerHotkeyEvents to toggle hover effect
- Clear lingering highlight/dim states when disabling hover effect
- Add (H) hint to button tooltips
- Update tour: mention ✨ button in Workspaces step and H in shortcuts

Author: Mnikley

src/graph/core.js

@@ -1157,6 +1157,9 @@ class GraphCoreManager {
         case "l":
           await this.cache.ui.toggleLassoSelection();
           break;
+        case "h":
+          await this.cache.ui.toggleHoverEffect(document.getElementById("hoverToggleBtn"));
+          break;
         default:
           break;
       }

src/graph_lens_lite.html

@@ -113,7 +113,7 @@ <h3 id="appHeader" class="disabled-header" onclick="cache.ui.reloadApp()">
           <div class="button-separator"></div>
           <button class="small-btn" title="Fit graph to screen (F)" onclick="cache.gcm.fitViewToVisibleNodes()">⛶</button>
           <button id="hideDisconnectedBtn" class="small-btn red" title="Hide all nodes and edges that are not connected to any other node or edge" onclick="cache.gcm.toggleCleanUpDanglingElements(this)">🚫</button>
-          <button id="hoverToggleBtn" class="small-btn green highlight" title="Disable hover highlight effect" onclick="cache.ui.toggleHoverEffect(this)">✨</button>
+          <button id="hoverToggleBtn" class="small-btn green highlight" title="Disable hover highlight effect (H)" onclick="cache.ui.toggleHoverEffect(this)">✨</button>
           <div id="debugDiv" class="inline"></div>
           <br>
           <h5 class="purple">Shown:

src/managers/ui.js

@@ -479,16 +479,33 @@ class UIManager {
       this.cache.CFG.DISABLE_HOVER_EFFECT = true;
       btn.classList.remove("green", "highlight");
       btn.classList.add("red");
-      btn.title = "Enable hover highlight effect";
+      btn.title = "Enable hover highlight effect (H)";
       const behaviors = await this.cache.graph.getBehaviors();
       const filtered = behaviors.filter(b => b.type !== this.cache.gcm.BEHAVIOURS.HOVER_ACTIVATE.type);
       await this.cache.graph.setBehaviors(filtered);
+
+      // Clear any lingering highlight/dim states from the hover behavior
+      const stateMap = {};
+      for (const node of this.cache.graph.getNodeData()) {
+        const states = await this.cache.graph.getElementState(node.id);
+        const cleaned = states.filter(s => s !== "highlight" && s !== "dim");
+        if (cleaned.length !== states.length) stateMap[node.id] = cleaned;
+      }
+      for (const edge of this.cache.graph.getEdgeData()) {
+        const states = await this.cache.graph.getElementState(edge.id);
+        const cleaned = states.filter(s => s !== "highlight" && s !== "dim");
+        if (cleaned.length !== states.length) stateMap[edge.id] = cleaned;
+      }
+      if (Object.keys(stateMap).length > 0) {
+        await this.cache.graph.setElementState(stateMap);
+      }
+
       this.info("Hover highlight effect disabled");
     } else {
       this.cache.CFG.DISABLE_HOVER_EFFECT = false;
       btn.classList.remove("red");
       btn.classList.add("green", "highlight");
-      btn.title = "Disable hover highlight effect";
+      btn.title = "Disable hover highlight effect (H)";
       const behaviors = await this.cache.graph.getBehaviors();
       behaviors.push(this.cache.gcm.BEHAVIOURS.HOVER_ACTIVATE);
       await this.cache.graph.setBehaviors(behaviors);
@@ -502,11 +519,11 @@ class UIManager {
     if (this.cache.CFG.DISABLE_HOVER_EFFECT) {
       btn.classList.remove("green", "highlight");
       btn.classList.add("red");
-      btn.title = "Enable hover highlight effect";
+      btn.title = "Enable hover highlight effect (H)";
     } else {
       btn.classList.remove("red");
       btn.classList.add("green", "highlight");
-      btn.title = "Disable hover highlight effect";
+      btn.title = "Disable hover highlight effect (H)";
     }
   }
 

src/utilities/tour.js

@@ -138,7 +138,7 @@ const TOUR_STEPS = [
            <br><br>
            Use the <strong class="tour-green">✚</strong> button to create a new workspace (clone or template-based), and the <strong class="tour-red">✗</strong> button to delete the current one.
            <br><br>
-           The <strong>⛶</strong> button fits the graph to the screen, and <strong>🚫</strong> hides disconnected nodes.`,
+           The <strong>⛶</strong> button fits the graph to the screen, <strong>🚫</strong> hides disconnected nodes, and <strong>✨</strong> toggles the hover highlight effect.`,
     target: "#workspaceContainer",
     position: "below",
   },
@@ -374,6 +374,7 @@ const TOUR_STEPS = [
     text: `That covers the main features. Here are some <strong>keyboard shortcuts</strong> to remember:
            <br><br>
            <strong>F</strong> — Fit graph to screen
+           <br><strong>H</strong> — Toggle hover highlight effect
            <br><strong>L</strong> — Toggle lasso selection
            <br><strong>Q</strong> — Toggle query editor
            <br><strong>D</strong> — Toggle data editor