Add translation key for area controls

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -24,7 +24,6 @@ import type {
 import { AREA_CONTROLS } from "./types";
 
 interface AreaControlsButton {
-  translationKey: string;
   iconPath: string;
   onService: string;
   offService: string;
@@ -34,7 +33,6 @@ interface AreaControlsButton {
 
 export const AREA_CONTROLS_BUTTONS: Record<AreaControl, AreaControlsButton> = {
   light: {
-    translationKey: "light",
     iconPath: mdiLightbulb,
     filter: {
       domain: "light",
@@ -44,7 +42,6 @@ export const AREA_CONTROLS_BUTTONS: Record<AreaControl, AreaControlsButton> = {
     offService: "light.turn_off",
   },
   fan: {
-    translationKey: "fan",
     iconPath: mdiFan,
     filter: {
       domain: "fan",
@@ -54,7 +51,6 @@ export const AREA_CONTROLS_BUTTONS: Record<AreaControl, AreaControlsButton> = {
     offService: "fan.turn_off",
   },
   cover: {
-    translationKey: "cover",
     iconPath: mdiBlindsHorizontal,
     filter: {
       domain: "cover",
@@ -210,10 +206,6 @@ class HuiAreaControlsCardFeature
               class=${active ? "active" : ""}
               style=${styleMap({ "--active-color": color })}
               .control=${control}
-              .label=${this.hass!.localize(
-                // @ts-ignore
-                `ui.dialogs.more_info_control.lawn_mower.${button.translationKey}`
-              )}
               @click=${this._handleButtonTap}
             >
               <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>

src/panels/lovelace/editor/config-elements/hui-area-controls-card-feature-editor.ts

@@ -2,6 +2,7 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
@@ -35,7 +36,7 @@ export class HuiAreaControlsCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (customizeControls: boolean) =>
+    (localize: LocalizeFunc, customizeControls: boolean) =>
       [
         {
           name: "customize_controls",
@@ -53,7 +54,9 @@ export class HuiAreaControlsCardFeatureEditor
                     multiple: true,
                     options: AREA_CONTROLS.concat().map((control) => ({
                       value: control,
-                      label: control,
+                      label: localize(
+                        `ui.panel.lovelace.editor.features.types.area-controls.controls_options.${control}`
+                      ),
                     })),
                   },
                 },
@@ -73,7 +76,7 @@ export class HuiAreaControlsCardFeatureEditor
       customize_controls: this._config.controls !== undefined,
     };
 
-    const schema = this._schema(data.customize_controls);
+    const schema = this._schema(this.hass.localize, data.customize_controls);
 
     return html`
       <ha-form

src/translations/en.json

@@ -7842,8 +7842,13 @@
               },
               "area-controls": {
                 "label": "Area controls",
+                "customize_controls": "Customize controls",
                 "controls": "Controls",
-                "customize_controls": "Customize controls"
+                "controls_options": {
+                  "light": "Light",
+                  "fan": "Fan",
+                  "cover": "Cover"
+                }
               }
             }
           },