Use initial color param for favorite color dialog (#18039)

* Use initial color param for favorite color dialog

* Select right mode if light is off

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

@@ -53,9 +53,8 @@ class DialogLightColorFavorite extends LitElement {
   ): Promise<void> {
     this._entry = dialogParams.entry;
     this._dialogParams = dialogParams;
+    this._color = dialogParams.initialColor ?? this._computeCurrentColor();
     this._updateModes();
-    this._loadCurrentColorAndMode(dialogParams.add, dialogParams.defaultMode);
-    await this.updateComplete;
   }
 
   public closeDialog(): void {
@@ -82,19 +81,20 @@ class DialogLightColorFavorite extends LitElement {
     }
 
     this._modes = modes;
+
+    if (this._color) {
+      this._mode = "color_temp_kelvin" in this._color ? "color_temp" : "color";
+    } else {
+      this._mode = this._modes[0];
+    }
   }
 
-  private _loadCurrentColorAndMode(
+  private _computeCurrentColor() {
-    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 };
@@ -105,21 +105,16 @@ class DialogLightColorFavorite extends LitElement {
       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) {
+    return currentColor;
-      this._color = currentColor;
-    }
-    this._mode = defaultMode ?? currentMode ?? this._modes[0];
   }
 
   private _colorChanged(ev: CustomEvent) {
@@ -230,7 +225,10 @@ class DialogLightColorFavorite extends LitElement {
         <ha-button slot="secondaryAction" dialogAction="cancel">
           ${this.hass.localize("ui.common.cancel")}
         </ha-button>
-        <ha-button slot="primaryAction" @click=${this._save}
+        <ha-button
+          slot="primaryAction"
+          @click=${this._save}
+          .disabled=${!this._color}
           >${this.hass.localize("ui.common.save")}</ha-button
         >
       </ha-dialog>

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

@@ -1,12 +1,12 @@
 import { mdiCheck, mdiMinus, mdiPlus } from "@mdi/js";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -19,18 +19,17 @@ import {
   updateEntityRegistryEntry,
 } from "../../../../data/entity_registry";
 import {
-  computeDefaultFavoriteColors,
   LightColor,
   LightEntity,
+  computeDefaultFavoriteColors,
 } from "../../../../data/light";
 import { actionHandler } from "../../../../panels/lovelace/common/directives/action-handler-directive";
 import {
-  loadSortable,
   SortableInstance,
+  loadSortable,
 } from "../../../../resources/sortable.ondemand";
 import { HomeAssistant } from "../../../../types";
 import { showConfirmationDialog } from "../../../generic/show-dialog-box";
-import type { LightPickerMode } from "./dialog-light-color-favorite";
 import "./ha-favorite-color-button";
 import { showLightColorFavoriteDialog } from "./show-dialog-light-color-favorite";
 
@@ -141,7 +140,6 @@ 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"
       ),
@@ -156,13 +154,9 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
     // Make sure the current favorite color is set
     fireEvent(this, "favorite-color-edit-started");
     await this._apply(index);
-    const defaultMode: LightPickerMode =
-      "color_temp_kelvin" in this._favoriteColors[index]
-        ? "color_temp"
-        : "color";
     const color = await showLightColorFavoriteDialog(this, {
       entry: this.entry!,
-      defaultMode,
+      initialColor: this._favoriteColors[index],
       title: this.hass.localize(
         "ui.dialogs.more_info_control.light.favorite_color.edit_title"
       ),

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

@@ -1,13 +1,11 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ExtEntityRegistryEntry } from "../../../../data/entity_registry";
 import { LightColor } from "../../../../data/light";
-import type { LightPickerMode } from "./dialog-light-color-favorite";
 
 export interface LightColorFavoriteDialogParams {
   entry: ExtEntityRegistryEntry;
   title: string;
-  defaultMode?: LightPickerMode;
+  initialColor?: LightColor;
-  add?: boolean;
   submit?: (color?: LightColor) => void;
   cancel?: () => void;
 }