Allow saving the light current color as a favorite (#17992)

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -53,7 +53,8 @@ class DialogLightColorFavorite extends LitElement {
   ): Promise<void> {
     this._entry = dialogParams.entry;
     this._dialogParams = dialogParams;
-    this._updateModes(dialogParams.defaultMode);
+    this._updateModes();
+    this._loadCurrentColorAndMode(dialogParams.add, dialogParams.defaultMode);
     await this.updateComplete;
   }
 
@@ -64,7 +65,7 @@ class DialogLightColorFavorite extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  private _updateModes(defaultMode?: LightPickerMode) {
+  private _updateModes() {
     const supportsTemp = lightSupportsColorMode(
       this.stateObj!,
       LightColorMode.COLOR_TEMP
@@ -81,13 +82,44 @@ class DialogLightColorFavorite extends LitElement {
     }
 
     this._modes = modes;
-    this._mode =
-      defaultMode ??
-      (this.stateObj!.attributes.color_mode
-        ? this.stateObj!.attributes.color_mode === LightColorMode.COLOR_TEMP
-          ? LightColorMode.COLOR_TEMP
-          : "color"
-        : this._modes[0]);
+  }
+
+  private _loadCurrentColorAndMode(
+    add?: boolean,
+    defaultMode?: LightPickerMode
+  ) {
+    const attributes = this.stateObj!.attributes;
+    const color_mode = attributes.color_mode;
+
+    let currentColor: LightColor | undefined;
+    let currentMode: LightPickerMode | undefined;
+    if (color_mode === LightColorMode.XY) {
+      currentMode = "color";
+      // XY color not supported for favorites. Try to grab the hs or rgb instead.
+      if (attributes.hs_color) {
+        currentColor = { hs_color: attributes.hs_color };
+      } else if (attributes.rgb_color) {
+        currentColor = { rgb_color: attributes.rgb_color };
+      }
+    } else if (
+      color_mode === LightColorMode.COLOR_TEMP &&
+      attributes.color_temp_kelvin
+    ) {
+      currentMode = LightColorMode.COLOR_TEMP;
+      currentColor = {
+        color_temp_kelvin: attributes.color_temp_kelvin,
+      };
+    } else if (attributes[color_mode + "_color"]) {
+      currentMode = "color";
+      currentColor = {
+        [color_mode + "_color"]: attributes[color_mode + "_color"],
+      } as LightColor;
+    }
+
+    if (add) {
+      this._color = currentColor;
+    }
+    this._mode = defaultMode ?? currentMode ?? this._modes[0];
   }
 
   private _colorChanged(ev: CustomEvent) {

src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts

@@ -141,6 +141,7 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
   private _add = async () => {
     const color = await showLightColorFavoriteDialog(this, {
       entry: this.entry!,
+      add: true,
       title: this.hass.localize(
         "ui.dialogs.more_info_control.light.favorite_color.add_title"
       ),

src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts

@@ -7,6 +7,7 @@ export interface LightColorFavoriteDialogParams {
   entry: ExtEntityRegistryEntry;
   title: string;
   defaultMode?: LightPickerMode;
+  add?: boolean;
   submit?: (color?: LightColor) => void;
   cancel?: () => void;
 }