From e7f5d927b1e7254ab31cfc7c2be3d9dd97eb1106 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 1 Jun 2023 16:35:24 +0200
Subject: [PATCH] Open right mode when editing favorite color (#16719)

* Open right mode when editing favorite color

* Add missing type
---
 .../components/lights/dialog-light-color-favorite.ts   |  1 +
 .../lights/ha-more-info-light-favorite-colors.ts       |  7 +++++++
 .../more-info/components/lights/light-color-picker.ts  | 10 +++++-----
 .../lights/show-dialog-light-color-favorite.ts         |  2 ++
 .../components/lights/show-view-light-color-picker.ts  |  3 ++-
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
index a5ab759e58..3c72999412 100644
--- a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
+++ b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
@@ -79,6 +79,7 @@ class DialogLightColorFavorite extends LitElement {
         <light-color-picker
           .hass=${this.hass}
           entityId=${this._entry.entity_id}
+          .defaultMode=${this._dialogParams?.defaultMode}
           @color-changed=${this._colorChanged}
         >
         </light-color-picker>
diff --git a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
index 8a89f626c3..c8c3c8cc1b 100644
--- a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
@@ -31,6 +31,7 @@ import {
 import { HomeAssistant } from "../../../../types";
 import { showConfirmationDialog } from "../../../generic/show-dialog-box";
 import "./ha-favorite-color-button";
+import type { LightPickerMode } from "./light-color-picker";
 import { showLightColorFavoriteDialog } from "./show-dialog-light-color-favorite";
 
 @customElement("ha-more-info-light-favorite-colors")
@@ -147,8 +148,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
   private _edit = async (index) => {
     // Make sure the current favorite color is set
     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,
       title: this.hass.localize(
         "ui.dialogs.more_info_control.light.favorite_color.edit_title"
       ),
diff --git a/src/dialogs/more-info/components/lights/light-color-picker.ts b/src/dialogs/more-info/components/lights/light-color-picker.ts
index 61a9714a3b..4093ef9bd4 100644
--- a/src/dialogs/more-info/components/lights/light-color-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-picker.ts
@@ -28,7 +28,7 @@ import {
 } from "../../../../data/light";
 import { HomeAssistant } from "../../../../types";
 
-type Mode = "color_temp" | "color";
+export type LightPickerMode = "color_temp" | "color";
 
 declare global {
   interface HASSDomEvents {
@@ -42,7 +42,7 @@ class LightColorPicker extends LitElement {
 
   @property() public entityId!: string;
 
-  @property() public defaultMode!: Mode;
+  @property() public defaultMode?: LightPickerMode;
 
   @state() private _cwSliderValue?: number;
 
@@ -58,9 +58,9 @@ class LightColorPicker extends LitElement {
 
   @state() private _ctPickerValue?: number;
 
-  @state() private _mode?: Mode;
+  @state() private _mode?: LightPickerMode;
 
-  @state() private _modes: Mode[] = [];
+  @state() private _modes: LightPickerMode[] = [];
 
   get stateObj() {
     return this.hass.states[this.entityId] as LightEntity | undefined;
@@ -267,7 +267,7 @@ class LightColorPicker extends LitElement {
 
       const supportsColor = lightSupportsColor(this.stateObj!);
 
-      const modes: Mode[] = [];
+      const modes: LightPickerMode[] = [];
       if (supportsColor) {
         modes.push("color");
       }
diff --git a/src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts b/src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts
index 9af56e6080..28f0af8622 100644
--- a/src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts
+++ b/src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts
@@ -1,10 +1,12 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ExtEntityRegistryEntry } from "../../../../data/entity_registry";
 import { LightColor } from "../../../../data/light";
+import type { LightPickerMode } from "./light-color-picker";
 
 export interface LightColorFavoriteDialogParams {
   entry: ExtEntityRegistryEntry;
   title: string;
+  defaultMode?: LightPickerMode;
   submit?: (color?: LightColor) => void;
   cancel?: () => void;
 }
diff --git a/src/dialogs/more-info/components/lights/show-view-light-color-picker.ts b/src/dialogs/more-info/components/lights/show-view-light-color-picker.ts
index 5f1d6b4e5b..5a2bd40fa1 100644
--- a/src/dialogs/more-info/components/lights/show-view-light-color-picker.ts
+++ b/src/dialogs/more-info/components/lights/show-view-light-color-picker.ts
@@ -1,8 +1,9 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LightPickerMode } from "./light-color-picker";
 
 export interface LightColorPickerViewParams {
   entityId: string;
-  defaultMode: "color" | "color_temp";
+  defaultMode: LightPickerMode;
 }
 
 export const loadLightColorPickerView = () =>