diff --git a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
index 10975e4d35..e4989a431d 100644
--- a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
+++ b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
@@ -16,6 +16,12 @@ import {
} from "../helpers/areas-strategy-helper";
import type { LovelaceStrategyEditor } from "../../types";
import type { AreasDashboardStrategyConfig } from "../areas-dashboard-strategy";
+import { showAreaRegistryDetailDialog } from "../../../../config/areas/show-dialog-area-registry-detail";
+import {
+ updateAreaRegistryEntry,
+ type AreaRegistryEntry,
+} from "../../../../../data/area_registry";
+import { buttonLinkStyle } from "../../../../../resources/styles";
@customElement("hui-areas-dashboard-strategy-editor")
export class HuiAreasDashboardStrategyEditor
@@ -49,6 +55,28 @@ export class HuiAreasDashboardStrategyEditor
${area.name}
+
+
+ ${this.hass!.localize(
+ `ui.panel.lovelace.strategy.areas.header_description`,
+ {
+ edit_the_area: html`
+
+ `,
+ }
+ )}
+
+
${AREA_STRATEGY_GROUPS.map((group) => {
const entities = groups[group] || [];
const value =
@@ -56,7 +84,7 @@ export class HuiAreasDashboardStrategyEditor
return html`
+ updateAreaRegistryEntry(this.hass!, area.area_id, values),
+ });
+ }
+
private _handleAreaNavigate(ev: CustomEvent): void {
this._area = ev.detail.value;
}
@@ -155,13 +193,32 @@ export class HuiAreasDashboardStrategyEditor
static get styles() {
return [
+ buttonLinkStyle,
css`
.toolbar {
display: flex;
align-items: center;
+ margin: 0 -20px 8px -20px;
+ --mdc-icon-button-size: 36px;
+ padding: 0 16px;
+ }
+ .toolbar p {
+ margin: 0;
+ font-size: 18px;
+ line-height: 24px;
+ font-weight: 400;
+ padding: 6px 4px;
}
ha-expansion-panel {
margin-bottom: 8px;
+ max-width: 600px;
+ }
+ ha-expansion-panel p {
+ margin: 8px 2px;
+ }
+ button.link {
+ color: var(--primary-color);
+ text-decoration: none;
}
`,
];
diff --git a/src/translations/en.json b/src/translations/en.json
index f450a14c84..8d88c80001 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -6460,6 +6460,9 @@
},
"areas": {
"no_entities": "No entities in this area.",
+ "header": "Area badges",
+ "header_description": "To display temperature and humidity sensors in the overview and in the area view, add a sensor to that area and {edit_the_area} to configure related sensors.",
+ "edit_the_area": "edit the area",
"groups": {
"lights": "Lights",
"covers": "Covers",