From 7993c13cd5db242e47a6e08b627b2cf8394a370a Mon Sep 17 00:00:00 2001
From: Stefanie Jane <stef@hyperbliss.tech>
Date: Tue, 13 Aug 2024 22:52:15 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20effect=20selection=20and?=
 =?UTF-8?q?=20scrolling=20behavior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve effect selection and dropdown behavior:

- Move scrolling and highlighting to requestAnimationFrame
- Implement async effect selection
- Add logging for better debugging
- Remove unused import

This change ensures smoother UI updates and more reliable
effect selection.
---
 src/hyper-light-card.ts | 49 +++++++++++++++++++++++++++++++++--------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/hyper-light-card.ts b/src/hyper-light-card.ts
index cbc315f..7e8d3b2 100644
--- a/src/hyper-light-card.ts
+++ b/src/hyper-light-card.ts
@@ -8,6 +8,7 @@ import {
   formatAttributeValue,
 } from './utils';
 import styles from './hyper-light-card-styles.css';
+import { resolve } from 'path';
 
 interface Hass {
   states: Record<string, HassEntity>;
@@ -90,11 +91,6 @@ class HyperLightCard extends LitElement {
     console.debug('HyperLightCard: firstUpdated called');
     this._setupMutationObserver();
     this._debouncedExtractColors();
-
-    // Scroll to the current effect if the dropdown is already open
-    if (this._isDropdownOpen) {
-      this._scrollToCurrentEffect();
-    }
   }
 
   private _extractColors() {
@@ -199,8 +195,16 @@ class HyperLightCard extends LitElement {
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>) {
-    console.debug('HyperLightCard: updated called', changedProperties);
     super.updated(changedProperties);
+
+    console.debug('HyperLightCard: updated called', changedProperties);
+    console.debug('HyperLightCard: current state:', {
+      isOn: this._isOn,
+      currentEffect: this._currentEffect,
+      brightness: this._brightness,
+      isDropdownOpen: this._isDropdownOpen,
+    });
+
     if (changedProperties.has('hass') || changedProperties.has('config')) {
       this._debouncedUpdate();
     }
@@ -227,7 +231,12 @@ class HyperLightCard extends LitElement {
   }
 
   render() {
-    console.debug('HyperLightCard: render called');
+    console.debug('HyperLightCard: render called with state:', {
+      isOn: this._isOn,
+      currentEffect: this._currentEffect,
+      brightness: this._brightness,
+      isDropdownOpen: this._isDropdownOpen,
+    });
     if (!this.hass || !this.config) {
       console.debug('HyperLightCard: hass or config not available');
       return html``;
@@ -253,6 +262,14 @@ class HyperLightCard extends LitElement {
       '--slider-color': this._accentColor,
     };
 
+    // Scroll and highlight
+    requestAnimationFrame(() => {
+      if (this._isDropdownOpen) {
+        this._scrollToCurrentEffect();
+        this._highlightCurrentEffect();
+      }
+    });
+
     return html`
       <ha-card>
         <div
@@ -559,6 +576,20 @@ class HyperLightCard extends LitElement {
     });
   }
 
+  private _highlightCurrentEffect() {
+    const dropdownContent = this.shadowRoot!.querySelector('.dropdown-content');
+    const items = dropdownContent?.querySelectorAll('.dropdown-item') || [];
+
+    items.forEach(item => {
+      item.classList.remove('selected');
+      if (item.textContent?.trim() === this._currentEffect) {
+        item.classList.add('selected');
+      }
+    });
+
+    console.debug('HyperLightCard: Highlighted current effect');
+  }
+
   private _toggleDropdown(e: Event) {
     console.debug('HyperLightCard: _toggleDropdown called');
     e.stopPropagation();
@@ -575,14 +606,14 @@ class HyperLightCard extends LitElement {
     this.requestUpdate();
   }
 
-  private _selectEffect(effect: string) {
+  private async _selectEffect(effect: string) {
     console.debug('HyperLightCard: _selectEffect called', effect);
     this._currentEffect = effect;
     this._isDropdownOpen = false;
     this.requestUpdate();
 
     if (this._isOn) {
-      this.hass!.callService('light', 'turn_on', {
+      await this.hass!.callService('light', 'turn_on', {
         entity_id: this.config!.entity,
         effect: effect,
       });