Add translations

src/common/translations/localize.ts

@@ -31,7 +31,8 @@ export type LocalizeKeys =
   | `ui.panel.lovelace.card.${string}`
   | `ui.panel.lovelace.editor.${string}`
   | `ui.panel.page-authorize.form.${string}`
-  | `component.${string}`;
+  | `component.${string}`
+  | `ui.entity.${string}`;
 
 export type LandingPageKeys = FlattenObjectKeys<
   TranslationDict["landing-page"]

src/dialogs/more-info/components/voice/ha-more-info-view-toggle-group.ts

@@ -1,4 +1,3 @@
-import { mdiLightbulb, mdiLightbulbOff } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -70,23 +69,26 @@ class HaMoreInfoViewToggleGroup extends LitElement {
 
     const deviceClass = mainStateObj.attributes.device_class;
 
-    const isGroup = this.params.entityIds.length > 1;
-
     const availableEntities = entities.filter(
       (entity) => entity.state !== UNAVAILABLE
     );
 
+    const ON_STATE = domain === "cover" ? "open" : ON;
+    const OFF_STATE = domain === "cover" ? "closed" : OFF;
+
     const isAllOn = availableEntities.every((entity) =>
       computeDomain(entity.entity_id) === "cover"
         ? isFullyOpen(entity)
-        : entity.state === ON
+        : entity.state === ON_STATE
     );
     const isAllOff = availableEntities.every((entity) =>
       computeDomain(entity.entity_id) === "cover"
         ? isFullyClosed(entity)
-        : entity.state === OFF
+        : entity.state === OFF_STATE
     );
 
+    const isMultiple = this.params.entityIds.length > 1;
+
     return html`
       <div class="content">
         <ha-more-info-state-header
@@ -100,22 +102,20 @@ class HaMoreInfoViewToggleGroup extends LitElement {
             @click=${this._turnAllOn}
             .disabled=${isAllOn}
           >
-            ${domain !== "light"
+            <ha-domain-icon
-              ? html`<ha-domain-icon
+              .hass=${this.hass}
-                  .hass=${this.hass}
+              .domain=${domain}
-                  .domain=${domain}
+              .state=${ON_STATE}
-                  .state=${domain === "cover" ? "open" : "on"}
+              .deviceClass=${deviceClass}
-                  .deviceClass=${deviceClass}
+            ></ha-domain-icon>
-                ></ha-domain-icon>`
-              : html` <ha-svg-icon .path=${mdiLightbulb}></ha-svg-icon> `}
             <p>
               ${domain === "cover"
-                ? isGroup
+                ? isMultiple
-                  ? "Open all"
+                  ? this.hass.localize("ui.card.cover.open_all")
-                  : "Open"
+                  : this.hass.localize("ui.card.cover.open")
-                : isGroup
+                : isMultiple
-                  ? "Turn all on"
+                  ? this.hass.localize("ui.card.common.turn_on_all")
-                  : "Turn on"}
+                  : this.hass.localize("ui.card.common.turn_on")}
             </p>
           </ha-control-button>
           <ha-control-button
@@ -123,24 +123,21 @@ class HaMoreInfoViewToggleGroup extends LitElement {
             @click=${this._turnAllOff}
             .disabled=${isAllOff}
           >
-            ${domain !== "light"
+            <ha-domain-icon
-              ? html`
+              .hass=${this.hass}
-                  <ha-domain-icon
+              .domain=${domain}
-                    .hass=${this.hass}
+              .state=${OFF_STATE}
-                    .domain=${domain}
+              .icon=${domain === "light" ? "mdi:lightbulb-off" : undefined}
-                    .state=${domain === "cover" ? "closed" : "off"}
+            ></ha-domain-icon>
-                    .deviceClass=${deviceClass}
+
-                  ></ha-domain-icon>
-                `
-              : html` <ha-svg-icon .path=${mdiLightbulbOff}></ha-svg-icon>`}
             <p>
               ${domain === "cover"
-                ? isGroup
+                ? isMultiple
-                  ? "Close all"
+                  ? this.hass.localize("ui.card.cover.close_all")
-                  : "Close"
+                  : this.hass.localize("ui.card.cover.close")
-                : isGroup
+                : isMultiple
-                  ? "Turn all off"
+                  ? this.hass.localize("ui.card.common.turn_off_all")
-                  : "Turn off"}
+                  : this.hass.localize("ui.card.common.turn_off")}
             </p>
           </ha-control-button>
         </ha-control-button-group>

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

@@ -31,39 +31,24 @@ import type {
 import { AREA_CONTROLS } from "./types";
 
 interface AreaControlsButton {
-  offIcon?: string;
+  domain: string;
-  onIcon?: string;
+  device_class?: string;
-  filter: {
-    domain: string;
-    device_class?: string;
-  };
 }
 
 const coverButton = (deviceClass: string) => ({
-  filter: {
+  domain: "cover",
-    domain: "cover",
+  device_class: deviceClass,
-    device_class: deviceClass,
-  },
 });
 
 export const AREA_CONTROLS_BUTTONS: Record<AreaControl, AreaControlsButton> = {
   light: {
-    // Overrides the icons for lights
+    domain: "light",
-    offIcon: "mdi:lightbulb-off",
-    onIcon: "mdi:lightbulb",
-    filter: {
-      domain: "light",
-    },
   },
   fan: {
-    filter: {
+    domain: "fan",
-      domain: "fan",
-    },
   },
   switch: {
-    filter: {
+    domain: "switch",
-      domain: "switch",
-    },
   },
   "cover-blind": coverButton("blind"),
   "cover-curtain": coverButton("curtain"),
@@ -97,7 +82,8 @@ export const getAreaControlEntities = (
       const filter = generateEntityFilter(hass, {
         area: areaId,
         entity_category: "none",
-        ...controlButton.filter,
+        domain: controlButton.domain,
+        device_class: controlButton.device_class,
       });
 
       acc[control] = Object.keys(hass.entities).filter(
@@ -175,13 +161,17 @@ class HuiAreaControlsCardFeature
     );
     const entitiesIds = controlEntities[control];
 
-    const domain = AREA_CONTROLS_BUTTONS[control].filter.domain;
+    const { domain, device_class: dc } = AREA_CONTROLS_BUTTONS[control];
+
+    const domainName = this.hass.localize(
+      `component.${domain}.entity_component.${dc ?? "_"}.name`
+    );
 
     showMoreInfoDialog(this, {
       entityId: null,
       parentView: {
         title: computeAreaName(this._area!) || "",
-        subtitle: domain,
+        subtitle: domainName,
         tag: "ha-more-info-view-toggle-group",
         import: () =>
           import(
@@ -262,15 +252,22 @@ class HuiAreaControlsCardFeature
             ? stateActive(entities[0], groupState)
             : false;
 
-          const label = this.hass!.localize(
+          const domain = button.domain;
-            `ui.card_features.area_controls.${control}.${active ? "off" : "on"}`
+          const dc = button.device_class;
+
+          const domainName = this.hass!.localize(
+            `component.${domain}.entity_component.${dc ?? "_"}.name`
           );
 
-          const icon = active ? button.onIcon : button.offIcon;
+          const label = `${domainName}: ${this.hass!.localize(
+            `ui.card_features.area_controls.open_more_info`
+          )}`;
 
-          const domain = button.filter.domain;
+          const icon =
-          const deviceClass = button.filter.device_class
+            domain === "light" && !active ? "mdi:lightbulb-off" : undefined;
-            ? ensureArray(button.filter.device_class)[0]
+
+          const deviceClass = button.device_class
+            ? ensureArray(button.device_class)[0]
             : undefined;
 
           const activeColor = computeCssVariable(

src/translations/en.json

@@ -79,6 +79,8 @@
       "common": {
         "turn_on": "Turn on",
         "turn_off": "Turn off",
+        "turn_on_all": "Turn on all",
+        "turn_off_all": "Turn off all",
         "toggle": "Toggle",
         "entity_not_found": "Entity not found"
       },
@@ -145,7 +147,11 @@
         "close_cover": "Close cover",
         "open_tilt_cover": "Open cover tilt",
         "close_tilt_cover": "Close cover tilt",
-        "stop_cover": "Stop cover"
+        "stop_cover": "Stop cover",
+        "open": "Open",
+        "open_all": "Open all",
+        "close": "Close",
+        "close_all": "Close all"
       },
       "fan": {
         "preset_mode": "Preset mode",
@@ -327,58 +333,7 @@
     },
     "card_features": {
       "area_controls": {
-        "light": {
+        "open_more_info": "Open more info"
-          "on": "Turn on area lights",
-          "off": "Turn off area lights"
-        },
-        "fan": {
-          "on": "Turn on area fans",
-          "off": "Turn off area fans"
-        },
-        "switch": {
-          "on": "Turn on area switches",
-          "off": "Turn off area switches"
-        },
-        "cover-awning": {
-          "on": "Open area awnings",
-          "off": "Close area awnings"
-        },
-        "cover-blind": {
-          "on": "Open area blinds",
-          "off": "Close area blinds"
-        },
-        "cover-curtain": {
-          "on": "Open area curtains",
-          "off": "Close area curtains"
-        },
-        "cover-damper": {
-          "on": "Open area dampers",
-          "off": "Close area dampers"
-        },
-        "cover-door": {
-          "on": "Open area doors",
-          "off": "Close area doors"
-        },
-        "cover-garage": {
-          "on": "Open garage door",
-          "off": "Close garage door"
-        },
-        "cover-gate": {
-          "on": "Open area gates",
-          "off": "Close area gates"
-        },
-        "cover-shade": {
-          "on": "Open area shades",
-          "off": "Close area shades"
-        },
-        "cover-shutter": {
-          "on": "Open area shutters",
-          "off": "Close area shutters"
-        },
-        "cover-window": {
-          "on": "Open area windows",
-          "off": "Close area windows"
-        }
       }
     },
     "common": {