Tooltips for Add and Done buttons

src/dialogs/more-info/components/covers/ha-more-info-cover-favorite-positions.ts

@@ -19,7 +19,10 @@ import type {
   CoverEntityOptions,
   ExtEntityRegistryEntry,
 } from "../../../../data/entity/entity_registry";
-import { updateEntityRegistryEntry } from "../../../../data/entity/entity_registry";
+import {
+  hasCustomFavoriteOptionValues,
+  updateEntityRegistryEntry,
+} from "../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../types";
 import {
   showConfirmationDialog,
@@ -360,7 +363,9 @@ export class HaMoreInfoCoverFavoritePositions extends LitElement {
     label: string,
     favorites: number[],
     showDone: boolean,
-    showLabel: boolean
+    showLabel: boolean,
+    showResetCopy: boolean,
+    resetDisabled: boolean
   ): TemplateResult | typeof nothing {
     if (!this.editMode && favorites.length === 0) {
       return nothing;
@@ -378,10 +383,19 @@ export class HaMoreInfoCoverFavoritePositions extends LitElement {
           .disabled=${this.stateObj.state === UNAVAILABLE}
           .isAdmin=${Boolean(this.hass.user?.is_admin)}
           .showDone=${showDone}
+          .showReset=${showResetCopy}
+          .showCopy=${showResetCopy}
           .addLabel=${this._localizeFavorite(kind, "add")}
           .doneLabel=${this.hass.localize(
             "ui.dialogs.more_info_control.exit_edit_mode"
           )}
+          .resetLabel=${this.hass.localize(
+            "ui.dialogs.more_info_control.cover.reset_favorites"
+          )}
+          .copyLabel=${this.hass.localize(
+            "ui.dialogs.more_info_control.cover.copy_favorites"
+          )}
+          .resetDisabled=${resetDisabled}
           @favorite-item-action=${this._handleFavoriteAction}
           @favorite-item-moved=${this._handleFavoriteMoved}
           @favorite-item-delete=${this._handleFavoriteDelete}
@@ -410,6 +424,14 @@ export class HaMoreInfoCoverFavoritePositions extends LitElement {
 
     const showDoneOnPosition = supportsPosition && !supportsTiltPosition;
 
+    const resetDisabled =
+      !hasCustomFavoriteOptionValues(
+        this.entry?.options?.cover?.favorite_positions
+      ) &&
+      !hasCustomFavoriteOptionValues(
+        this.entry?.options?.cover?.favorite_tilt_positions
+      );
+
     return html`
       <div class="groups">
         ${supportsPosition
@@ -418,7 +440,9 @@ export class HaMoreInfoCoverFavoritePositions extends LitElement {
               this.hass.localize("ui.card.cover.position"),
               this._favoritePositions,
               showDoneOnPosition,
-              showLabels
+              showLabels,
+              showDoneOnPosition,
+              resetDisabled
             )
           : nothing}
         ${supportsTiltPosition
@@ -427,7 +451,9 @@ export class HaMoreInfoCoverFavoritePositions extends LitElement {
               this.hass.localize("ui.card.cover.tilt_position"),
               this._favoriteTiltPositions,
               true,
-              showLabels
+              showLabels,
+              true,
+              resetDisabled
             )
           : nothing}
       </div>

src/dialogs/more-info/components/ha-more-info-favorites.ts

@@ -1,4 +1,10 @@
-import { mdiCheck, mdiMinus, mdiPlus } from "@mdi/js";
+import {
+  mdiBackupRestore,
+  mdiCheck,
+  mdiContentDuplicate,
+  mdiMinus,
+  mdiPlus,
+} from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -6,9 +12,11 @@ import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-button";
 import "../../../components/ha-outlined-icon-button";
 import "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-tooltip";
 import { actionHandler } from "../../../panels/lovelace/common/directives/action-handler-directive";
 
 const SORTABLE_OPTIONS = {
@@ -40,10 +48,20 @@ export class HaMoreInfoFavorites extends LitElement {
 
   @property({ type: Boolean, attribute: false }) public showDone = true;
 
+  @property({ type: Boolean, attribute: false }) public showReset = false;
+
+  @property({ type: Boolean, attribute: false }) public showCopy = false;
+
   @property({ attribute: false }) public addLabel = "";
 
   @property({ attribute: false }) public doneLabel = "";
 
+  @property({ attribute: false }) public resetLabel = "";
+
+  @property({ attribute: false }) public copyLabel = "";
+
+  @property({ type: Boolean, attribute: false }) public resetDisabled = false;
+
   private _itemMoved(ev: HASSDomEvent<HASSDomEvents["item-moved"]>): void {
     ev.stopPropagation();
     fireEvent(this, "favorite-item-moved", ev.detail);
@@ -78,6 +96,16 @@ export class HaMoreInfoFavorites extends LitElement {
     fireEvent(this, "favorite-item-done");
   };
 
+  private _handleReset = (ev: MouseEvent): void => {
+    ev.stopPropagation();
+    fireEvent(this, "favorite-reset");
+  };
+
+  private _handleCopy = (ev: MouseEvent): void => {
+    ev.stopPropagation();
+    fireEvent(this, "favorite-copy");
+  };
+
   protected render(): TemplateResult {
     return html`
       <ha-sortable
@@ -129,27 +157,68 @@ export class HaMoreInfoFavorites extends LitElement {
           ${this.editMode && this.showAdd
             ? html`
                 <ha-outlined-icon-button
+                  id="add-btn"
                   class="button"
                   @click=${this._handleAdd}
                   .label=${this.addLabel}
                 >
                   <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
                 </ha-outlined-icon-button>
+                <ha-tooltip for="add-btn">${this.addLabel}</ha-tooltip>
               `
             : nothing}
           ${this.editMode && this.showDone
             ? html`
                 <ha-outlined-icon-button
+                  id="done-btn"
                   @click=${this._handleDone}
                   class="button"
                   .label=${this.doneLabel}
                 >
                   <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
                 </ha-outlined-icon-button>
+                <ha-tooltip for="done-btn">${this.doneLabel}</ha-tooltip>
               `
             : nothing}
         </div>
       </ha-sortable>
+      ${this.editMode && (this.showReset || this.showCopy)
+        ? html`
+            <div class="actions">
+              ${this.showReset
+                ? html`
+                    <ha-button
+                      appearance="outlined"
+                      variant="neutral"
+                      @click=${this._handleReset}
+                      .disabled=${this.resetDisabled}
+                    >
+                      <ha-svg-icon
+                        slot="start"
+                        .path=${mdiBackupRestore}
+                      ></ha-svg-icon>
+                      ${this.resetLabel}
+                    </ha-button>
+                  `
+                : nothing}
+              ${this.showCopy
+                ? html`
+                    <ha-button
+                      appearance="outlined"
+                      variant="neutral"
+                      @click=${this._handleCopy}
+                    >
+                      <ha-svg-icon
+                        slot="start"
+                        .path=${mdiContentDuplicate}
+                      ></ha-svg-icon>
+                      ${this.copyLabel}
+                    </ha-button>
+                  `
+                : nothing}
+            </div>
+          `
+        : nothing}
     `;
   }
 
@@ -241,6 +310,15 @@ export class HaMoreInfoFavorites extends LitElement {
         --favorite-item-active-background-color
       );
     }
+
+    .actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: var(--ha-space-2);
+      margin-top: var(--ha-space-2);
+      flex-wrap: wrap;
+    }
   `;
 }
 
@@ -255,6 +333,8 @@ declare global {
     };
     "favorite-item-add";
     "favorite-item-done";
+    "favorite-reset";
+    "favorite-copy";
     "favorite-item-moved": {
       oldIndex: number;
       newIndex: number;

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

@@ -5,7 +5,10 @@ import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { UNAVAILABLE } from "../../../../data/entity/entity";
 import type { ExtEntityRegistryEntry } from "../../../../data/entity/entity_registry";
-import { updateEntityRegistryEntry } from "../../../../data/entity/entity_registry";
+import {
+  hasCustomFavoriteOptionValues,
+  updateEntityRegistryEntry,
+} from "../../../../data/entity/entity_registry";
 import type { LightColor, LightEntity } from "../../../../data/light";
 import { computeDefaultFavoriteColors } from "../../../../data/light";
 import type { HomeAssistant } from "../../../../types";
@@ -211,12 +214,23 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
         .editMode=${this.editMode}
         .disabled=${this.stateObj.state === UNAVAILABLE}
         .isAdmin=${Boolean(this.hass.user?.is_admin)}
+        .showReset=${true}
+        .showCopy=${true}
         .addLabel=${this.hass.localize(
           "ui.dialogs.more_info_control.light.favorite_color.add"
         )}
         .doneLabel=${this.hass.localize(
           "ui.dialogs.more_info_control.exit_edit_mode"
         )}
+        .resetLabel=${this.hass.localize(
+          "ui.dialogs.more_info_control.light.reset_favorites"
+        )}
+        .copyLabel=${this.hass.localize(
+          "ui.dialogs.more_info_control.light.copy_favorites"
+        )}
+        .resetDisabled=${!hasCustomFavoriteOptionValues(
+          this.entry?.options?.light?.favorite_colors
+        )}
         @favorite-item-action=${this._handleFavoriteAction}
         @favorite-item-moved=${this._handleFavoriteMoved}
         @favorite-item-delete=${this._handleFavoriteDelete}

src/dialogs/more-info/components/valves/ha-more-info-valve-favorite-positions.ts

@@ -12,7 +12,10 @@ import type {
   ExtEntityRegistryEntry,
   ValveEntityOptions,
 } from "../../../../data/entity/entity_registry";
-import { updateEntityRegistryEntry } from "../../../../data/entity/entity_registry";
+import {
+  hasCustomFavoriteOptionValues,
+  updateEntityRegistryEntry,
+} from "../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../types";
 import type { ValveEntity } from "../../../../data/valve";
 import {
@@ -290,6 +293,10 @@ export class HaMoreInfoValveFavoritePositions extends LitElement {
       return nothing;
     }
 
+    const resetDisabled = !hasCustomFavoriteOptionValues(
+      this.entry?.options?.valve?.favorite_positions
+    );
+
     return html`
       <section class="group">
         <ha-more-info-favorites
@@ -300,10 +307,19 @@ export class HaMoreInfoValveFavoritePositions extends LitElement {
           .disabled=${this.stateObj.state === UNAVAILABLE}
           .isAdmin=${Boolean(this.hass.user?.is_admin)}
           .showDone=${true}
+          .showReset=${true}
+          .showCopy=${true}
           .addLabel=${this._localizeFavorite("add")}
           .doneLabel=${this.hass.localize(
             "ui.dialogs.more_info_control.exit_edit_mode"
           )}
+          .resetLabel=${this.hass.localize(
+            "ui.dialogs.more_info_control.valve.reset_favorites"
+          )}
+          .copyLabel=${this.hass.localize(
+            "ui.dialogs.more_info_control.valve.copy_favorites"
+          )}
+          .resetDisabled=${resetDisabled}
           @favorite-item-action=${this._handleFavoriteAction}
           @favorite-item-moved=${this._handleFavoriteMoved}
           @favorite-item-delete=${this._handleFavoriteDelete}

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -1,10 +1,8 @@
 import {
-  mdiBackupRestore,
   mdiChartBoxOutline,
   mdiClose,
   mdiCodeBraces,
   mdiCogOutline,
-  mdiContentDuplicate,
   mdiDevices,
   mdiDotsVertical,
   mdiFormatListBulletedSquare,
@@ -388,12 +386,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
       case "toggle_edit":
         this._toggleInfoEditMode();
         break;
-      case "reset_favorites":
-        this._resetFavorites();
-        break;
-      case "copy_favorites":
-        this._copyFavorites();
-        break;
       case "related":
         this._goToRelated();
         break;
@@ -569,11 +561,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
 
     const supportsFavorites = Boolean(favoritesHandler && favoritesContext);
 
-    const resetFavoritesDisabled =
-      favoritesContext && favoritesHandler
-        ? !favoritesHandler.hasCustomFavorites(favoritesContext.entry)
-        : false;
-
     const isRTL = computeRTL(this.hass);
 
     return html`
@@ -672,23 +659,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                                   )
                                 : favoritesLabels?.editMode}
                             </ha-dropdown-item>
-                            <ha-dropdown-item
-                              value="reset_favorites"
-                              .disabled=${resetFavoritesDisabled}
-                            >
-                              <ha-svg-icon
-                                slot="icon"
-                                .path=${mdiBackupRestore}
-                              ></ha-svg-icon>
-                              ${favoritesLabels?.reset}
-                            </ha-dropdown-item>
-                            <ha-dropdown-item value="copy_favorites">
-                              <ha-svg-icon
-                                slot="icon"
-                                .path=${mdiContentDuplicate}
-                              ></ha-svg-icon>
-                              ${favoritesLabels?.copy}
-                            </ha-dropdown-item>
                             <wa-divider></wa-divider>
                           `
                         : nothing}
@@ -823,6 +793,8 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                 @entity-entry-updated=${this._entryUpdated}
                 @toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
                 @hass-more-info=${this._handleMoreInfoEvent}
+                @favorite-reset=${this._resetFavorites}
+                @favorite-copy=${this._copyFavorites}
               >
                 ${cache(
                   this._childView