From a8836404d4093ea364180304f5124a4cafc364a7 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 27 Aug 2025 16:33:48 +0200 Subject: [PATCH 01/84] Use entity picture for home favorite and update home dashboard icon (#26732) * Add strategy icon * Use entity picture for favorite --- .../dark/icon-dashboard-home.svg | 76 +++++++++++++++++++ .../light/icon-dashboard-home.svg | 76 +++++++++++++++++++ .../config/dashboard/dialog-new-dashboard.ts | 4 +- .../home/home-main-view-strategy.ts | 1 + 4 files changed, 155 insertions(+), 2 deletions(-) create mode 100644 public/static/images/dashboard-options/dark/icon-dashboard-home.svg create mode 100644 public/static/images/dashboard-options/light/icon-dashboard-home.svg diff --git a/public/static/images/dashboard-options/dark/icon-dashboard-home.svg b/public/static/images/dashboard-options/dark/icon-dashboard-home.svg new file mode 100644 index 0000000000..f1056e3d28 --- /dev/null +++ b/public/static/images/dashboard-options/dark/icon-dashboard-home.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/dashboard-options/light/icon-dashboard-home.svg b/public/static/images/dashboard-options/light/icon-dashboard-home.svg new file mode 100644 index 0000000000..1ee9ea7018 --- /dev/null +++ b/public/static/images/dashboard-options/light/icon-dashboard-home.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/panels/config/dashboard/dialog-new-dashboard.ts b/src/panels/config/dashboard/dialog-new-dashboard.ts index bdd2e067a1..3a28c9b27b 100644 --- a/src/panels/config/dashboard/dialog-new-dashboard.ts +++ b/src/panels/config/dashboard/dialog-new-dashboard.ts @@ -49,8 +49,8 @@ const STRATEGIES = [ { type: "home", images: { - light: "/static/images/dashboard-options/light/icon-dashboard-areas.svg", - dark: "/static/images/dashboard-options/dark/icon-dashboard-areas.svg", + light: "/static/images/dashboard-options/light/icon-dashboard-home.svg", + dark: "/static/images/dashboard-options/dark/icon-dashboard-home.svg", }, name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.home.title", description: diff --git a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts index 93a4520703..43be46e482 100644 --- a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts @@ -96,6 +96,7 @@ export class HomeMainViewStrategy extends ReactiveElement { ({ type: "tile", entity: entityId, + show_entity_picture: true, }) as TileCardConfig ) ); From a9f2254bbc4a0823b7271aad99ec9722f01ab837 Mon Sep 17 00:00:00 2001 From: "J. Nick Koston" Date: Wed, 27 Aug 2025 16:59:23 +0200 Subject: [PATCH 02/84] Improve network adapter configuration discoverability (#26734) --- src/components/ha-network.ts | 28 ++++++++++++++++++- .../config/network/ha-config-network.ts | 5 +--- src/translations/en.json | 1 + 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts index 5ad2a025f8..e5866acc04 100644 --- a/src/components/ha-network.ts +++ b/src/components/ha-network.ts @@ -1,4 +1,4 @@ -import { mdiStar } from "@mdi/js"; +import { mdiInformationOutline, mdiStar } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -71,6 +71,17 @@ export class HaNetwork extends LitElement { ${this.hass.localize("ui.panel.config.network.adapter.detected")}: ${format_auto_detected_interfaces(this.networkConfig.adapters)} + ${!configured_adapters.length + ? html`
+ + ${this.hass.localize( + "ui.panel.config.network.adapter.auto_configure_manual_hint" + )} +
` + : nothing} ${configured_adapters.length || this._expanded @@ -171,6 +182,21 @@ export class HaNetwork extends LitElement { span[slot="description"] { cursor: pointer; } + + .info-text { + display: flex; + align-items: center; + margin-top: 8px; + color: var(--secondary-text-color); + } + + .info-icon { + width: 18px; + height: 18px; + color: var(--info-color, var(--primary-color)); + margin-right: 8px; + flex-shrink: 0; + } `, ]; } diff --git a/src/panels/config/network/ha-config-network.ts b/src/panels/config/network/ha-config-network.ts index a7599c40d7..aba8c71ab9 100644 --- a/src/panels/config/network/ha-config-network.ts +++ b/src/panels/config/network/ha-config-network.ts @@ -23,10 +23,7 @@ class ConfigNetwork extends LitElement { @state() private _error?: { code: string; message: string }; protected render() { - if ( - !this.hass.userData?.showAdvanced || - !isComponentLoaded(this.hass, "network") - ) { + if (!isComponentLoaded(this.hass, "network")) { return nothing; } diff --git a/src/translations/en.json b/src/translations/en.json index 5bb9e29f0a..f18091d5d3 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -6664,6 +6664,7 @@ "ip_information": "IP information", "adapter": { "auto_configure": "Autoconfigure", + "auto_configure_manual_hint": "Uncheck to manually select network adapters", "detected": "Detected", "adapter": "Adapter" } From 50ad5e376f15d5f6a644adbe57b58169c41235ec Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 28 Aug 2025 12:53:15 +0100 Subject: [PATCH 03/84] Move automation and script `ha-alert`s to main flow (#26735) Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- src/components/ha-alert.ts | 3 +- .../config/automation/ha-automation-editor.ts | 158 +++++++++++------- .../automation/manual-automation-editor.ts | 33 +--- src/panels/config/script/ha-script-editor.ts | 137 +++++++++------ .../config/script/manual-script-editor.ts | 9 +- 5 files changed, 191 insertions(+), 149 deletions(-) diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts index 8661364e3a..6db2544eb9 100644 --- a/src/components/ha-alert.ts +++ b/src/components/ha-alert.ts @@ -119,10 +119,11 @@ class HaAlert extends LitElement { .main-content { overflow-wrap: anywhere; word-break: break-word; + line-height: normal; margin-left: 8px; margin-right: 0; margin-inline-start: 8px; - margin-inline-end: 0; + margin-inline-end: 8px; } .title { margin-top: 2px; diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 3f27a0bac8..8093caa9e9 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -432,62 +432,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin( class=${this._mode === "yaml" ? "yaml-mode" : ""} @subscribe-automation-config=${this._subscribeAutomationConfig} > -
- ${this._errors || stateObj?.state === UNAVAILABLE - ? html` - ${this._errors || this._validationErrors} - ${stateObj?.state === UNAVAILABLE - ? html`` - : nothing} - ` - : ""} - ${this._blueprintConfig - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.confirm_take_control" - )} -
- ${this.hass.localize("ui.common.yes")} - ${this.hass.localize("ui.common.no")} -
- ` - : this._readOnly - ? html`${this.hass.localize( - "ui.panel.config.automation.editor.read_only" - )} - - ${this.hass.localize( - "ui.panel.config.automation.editor.migrate" - )} - - ` - : nothing} -
${this._mode === "gui" ? html`
@@ -499,7 +443,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( .isWide=${this.isWide} .stateObj=${stateObj} .config=${this._config} - .disabled=${Boolean(this._readOnly)} + .disabled=${this._readOnly} .saving=${this._saving} .dirty=${this._dirty} @value-changed=${this._valueChanged} @@ -513,13 +457,94 @@ export class HaAutomationEditor extends PreventUnsavedMixin( .isWide=${this.isWide} .stateObj=${stateObj} .config=${this._config} - .disabled=${Boolean(this._readOnly)} + .disabled=${this._readOnly} .dirty=${this._dirty} .saving=${this._saving} @value-changed=${this._valueChanged} @save-automation=${this._handleSaveAutomation} @editor-save=${this._handleSaveAutomation} - > + > +
+ ${this._errors || stateObj?.state === UNAVAILABLE + ? html` + ${this._errors || this._validationErrors} + ${stateObj?.state === UNAVAILABLE + ? html`` + : nothing} + ` + : nothing} + ${this._blueprintConfig + ? html` + ${this.hass.localize( + "ui.panel.config.automation.editor.confirm_take_control" + )} +
+ ${this.hass.localize( + "ui.common.yes" + )} + ${this.hass.localize( + "ui.common.no" + )} +
+ ` + : this._readOnly + ? html`${this.hass.localize( + "ui.panel.config.automation.editor.read_only" + )} + + ${this.hass.localize( + "ui.panel.config.automation.editor.migrate" + )} + + ` + : nothing} + ${stateObj?.state === "off" + ? html` + + ${this.hass.localize( + "ui.panel.config.automation.editor.disabled" + )} + + ${this.hass.localize( + "ui.panel.config.automation.editor.enable" + )} + + + ` + : nothing} +
+ `}
` @@ -542,7 +567,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( ` - : ""} + : nothing} .error-wrapper { - position: absolute; - top: 4px; - z-index: 3; + :not(.yaml-mode) > .alert-wrapper { + position: sticky; + top: -24px; + margin-top: -24px; + z-index: 100; width: 100%; display: flex; flex-direction: column; align-items: center; + gap: 8px; } - :not(.yaml-mode) > .error-wrapper ha-alert { + :not(.yaml-mode) > .alert-wrapper ha-alert { background-color: var(--card-background-color); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border-radius: var(--ha-border-radius-sm); + margin-bottom: 0; } manual-automation-editor { diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 37c4a11e00..b22ba74c58 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -112,20 +112,6 @@ export class HaManualAutomationEditor extends LitElement { private _renderContent() { return html` - ${this.stateObj?.state === "off" - ? html` - - ${this.hass.localize( - "ui.panel.config.automation.editor.disabled" - )} - - ${this.hass.localize( - "ui.panel.config.automation.editor.enable" - )} - - - ` - : nothing} ${this.config.description ? html`
-
${this._renderContent()}
+
+ + ${this._renderContent()} +
{ - if (!this.hass || !this.stateObj) { - return; - } - await this.hass.callService("automation", "turn_on", { - entity_id: this.stateObj.entity_id, - }); - } - private _saveAutomation() { this._closeSidebar(); fireEvent(this, "save-automation"); @@ -656,9 +636,8 @@ export class HaManualAutomationEditor extends LitElement { line-height: 0; } - ha-alert { - display: block; - margin-bottom: 16px; + .description { + margin-top: 16px; } `, ]; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 584a999fd8..27199efb9a 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -384,60 +384,6 @@ export class HaScriptEditor extends SubscribeMixin(
-
- ${this._errors || stateObj?.state === UNAVAILABLE - ? html` - ${this._errors || this._validationErrors} - ${stateObj?.state === UNAVAILABLE - ? html`` - : nothing} - ` - : nothing} - ${this._blueprintConfig - ? html` - ${this.hass.localize( - "ui.panel.config.script.editor.confirm_take_control" - )} -
- ${this.hass.localize("ui.common.yes")} - ${this.hass.localize("ui.common.no")} -
- ` - : this._readOnly - ? html`${this.hass.localize( - "ui.panel.config.script.editor.read_only" - )} - - ${this.hass.localize( - "ui.panel.config.script.editor.migrate" - )} - - ` - : nothing} -
${this._mode === "gui" ? html`
@@ -467,7 +413,68 @@ export class HaScriptEditor extends SubscribeMixin( @value-changed=${this._valueChanged} @editor-save=${this._handleSaveScript} @save-script=${this._handleSaveScript} - > + > +
+ ${this._errors || stateObj?.state === UNAVAILABLE + ? html` + ${this._errors || this._validationErrors} + ${stateObj?.state === UNAVAILABLE + ? html`` + : nothing} + ` + : nothing} + ${this._blueprintConfig + ? html` + ${this.hass.localize( + "ui.panel.config.script.editor.confirm_take_control" + )} +
+ ${this.hass.localize( + "ui.common.yes" + )} + ${this.hass.localize( + "ui.common.no" + )} +
+ ` + : this._readOnly + ? html`${this.hass.localize( + "ui.panel.config.script.editor.read_only" + )} + + ${this.hass.localize( + "ui.panel.config.script.editor.migrate" + )} + + ` + : nothing} +
+ `}
` @@ -1092,6 +1099,26 @@ export class HaScriptEditor extends SubscribeMixin( border-radius: var(--ha-border-radius-sm); } + .alert-wrapper { + position: sticky; + top: -24px; + margin-top: -24px; + margin-bottom: 8px; + z-index: 100; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + } + + .alert-wrapper ha-alert { + background-color: var(--card-background-color); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + border-radius: var(--ha-border-radius-sm); + margin-bottom: 0; + } + manual-script-editor { max-width: 1540px; padding: 0 12px; diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index c699b8f11a..439bd6aad3 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -201,7 +201,10 @@ export class HaManualScriptEditor extends LitElement { })} >
-
${this._renderContent()}
+
+ + ${this._renderContent()} +
Date: Thu, 28 Aug 2025 09:08:33 -0700 Subject: [PATCH 04/84] Hide 'options' from enum more info (#26736) * Hide 'options' from enum more info * restrict to specific domain and class --- src/components/ha-attributes.ts | 13 +++++++++++-- src/data/entity_attributes.ts | 9 +++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts index 9a9b467b58..7dc3116bd7 100644 --- a/src/components/ha-attributes.ts +++ b/src/components/ha-attributes.ts @@ -3,11 +3,15 @@ import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display"; -import { STATE_ATTRIBUTES } from "../data/entity_attributes"; +import { + STATE_ATTRIBUTES, + STATE_ATTRIBUTES_DOMAIN_CLASS, +} from "../data/entity_attributes"; import { haStyle } from "../resources/styles"; import type { HomeAssistant } from "../types"; import "./ha-attribute-value"; import "./ha-expansion-panel"; +import { computeStateDomain } from "../common/entity/compute_state_domain"; @customElement("ha-attributes") class HaAttributes extends LitElement { @@ -22,7 +26,12 @@ class HaAttributes extends LitElement { private get _filteredAttributes() { return this._computeDisplayAttributes( STATE_ATTRIBUTES.concat( - this.extraFilters ? this.extraFilters.split(",") : [] + this.extraFilters ? this.extraFilters.split(",") : [], + (this.stateObj && + STATE_ATTRIBUTES_DOMAIN_CLASS[computeStateDomain(this.stateObj)]?.[ + this.stateObj.attributes?.device_class + ]) || + [] ) ); } diff --git a/src/data/entity_attributes.ts b/src/data/entity_attributes.ts index a694d1f12f..5a9bede73d 100644 --- a/src/data/entity_attributes.ts +++ b/src/data/entity_attributes.ts @@ -1,6 +1,7 @@ import { formatDurationDigital } from "../common/datetime/format_duration"; import type { FrontendLocaleData } from "./translation"; +// These attributes are hidden from the more-info window for all entities. export const STATE_ATTRIBUTES = [ "entity_id", "assumed_state", @@ -26,6 +27,14 @@ export const STATE_ATTRIBUTES = [ "available_tones", ]; +// These attributes are hidden from the more-info window for entities of the +// matching domain and device_class. +export const STATE_ATTRIBUTES_DOMAIN_CLASS = { + sensor: { + enum: ["options"], + }, +}; + export const TEMPERATURE_ATTRIBUTES = new Set([ "temperature", "current_temperature", From 0dfc10af5f269eaa1563071b421122836fed5654 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 28 Aug 2025 01:34:45 -0400 Subject: [PATCH 05/84] Show configured area sensors on climate domain dashboard (#26737) --- src/panels/lovelace/card-features/types.ts | 1 + .../strategies/areas/helpers/areas-strategy-helper.ts | 8 +++++++- .../strategies/home/home-climate-view-strategy.ts | 10 ++++++++-- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/panels/lovelace/card-features/types.ts b/src/panels/lovelace/card-features/types.ts index 27b2969703..7dcf1fb225 100644 --- a/src/panels/lovelace/card-features/types.ts +++ b/src/panels/lovelace/card-features/types.ts @@ -239,6 +239,7 @@ export type LovelaceCardFeatureConfig = | FanOscillateCardFeatureConfig | FanPresetModesCardFeatureConfig | FanSpeedCardFeatureConfig + | HistoryChartCardFeatureConfig | HumidifierToggleCardFeatureConfig | HumidifierModesCardFeatureConfig | LawnMowerCommandsCardFeatureConfig diff --git a/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts b/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts index 0dfb37103e..a3684103ea 100644 --- a/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts +++ b/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts @@ -15,6 +15,7 @@ import type { HomeAssistant } from "../../../../../types"; import { supportsAlarmModesCardFeature } from "../../../card-features/hui-alarm-modes-card-feature"; import { supportsCoverOpenCloseCardFeature } from "../../../card-features/hui-cover-open-close-card-feature"; import { supportsFanSpeedCardFeature } from "../../../card-features/hui-fan-speed-card-feature"; +import { supportsHistoryChartCardFeature } from "../../../card-features/hui-history-chart-card-feature"; import { supportsLightBrightnessCardFeature } from "../../../card-features/hui-light-brightness-card-feature"; import { supportsLockCommandsCardFeature } from "../../../card-features/hui-lock-commands-card-feature"; import { supportsTargetTemperatureCardFeature } from "../../../card-features/hui-target-temperature-card-feature"; @@ -237,7 +238,12 @@ export const computeAreaTileCardConfig = let feature: LovelaceCardFeatureConfig | undefined; if (includeFeature) { - if (supportsLightBrightnessCardFeature(hass, context)) { + if (supportsHistoryChartCardFeature(hass, context)) { + feature = { + type: "history-chart", + hours_to_show: 24, + }; + } else if (supportsLightBrightnessCardFeature(hass, context)) { feature = { type: "light-brightness", }; diff --git a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts index 7cf5b90d6e..9d677dd391 100644 --- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts @@ -23,6 +23,7 @@ const processAreasForClimate = ( entities: string[] ): LovelaceCardConfig[] => { const cards: LovelaceCardConfig[] = []; + const computeTileCard = computeAreaTileCardConfig(hass, "", true); for (const areaId of areaIds) { const area = hass.areas[areaId]; @@ -33,8 +34,6 @@ const processAreasForClimate = ( }); const areaEntities = entities.filter(areaFilter); - const computeTileCard = computeAreaTileCardConfig(hass, "", true); - if (areaEntities.length > 0) { cards.push({ heading_style: "subtitle", @@ -46,6 +45,13 @@ const processAreasForClimate = ( }, }); + if (hass.areas[areaId].temperature_entity_id) { + cards.push(computeTileCard(hass.areas[areaId].temperature_entity_id)); + } + if (hass.areas[areaId].humidity_entity_id) { + cards.push(computeTileCard(hass.areas[areaId].humidity_entity_id)); + } + for (const entityId of areaEntities) { cards.push(computeTileCard(entityId)); } From e19413b6ca0cbe513bd479a38ef8f85d809a4705 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 28 Aug 2025 01:26:44 -0400 Subject: [PATCH 06/84] Show binary sensors with graphs on the security dashboard (#26738) --- .../strategies/home/helpers/home-summaries.ts | 2 +- .../strategies/home/home-security-view-strategy.ts | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/panels/lovelace/strategies/home/helpers/home-summaries.ts b/src/panels/lovelace/strategies/home/helpers/home-summaries.ts index a9dbd1f7ee..974560762e 100644 --- a/src/panels/lovelace/strategies/home/helpers/home-summaries.ts +++ b/src/panels/lovelace/strategies/home/helpers/home-summaries.ts @@ -65,7 +65,7 @@ export const HOME_SUMMARIES_FILTERS: Record = { }, { domain: "binary_sensor", - device_class: ["door", "garage_door"], + device_class: ["door", "garage_door", "motion"], entity_category: "none", }, ], diff --git a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts index b80fd9f5ad..759df98206 100644 --- a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts @@ -12,6 +12,7 @@ import { } from "../areas/helpers/areas-strategy-helper"; import { getHomeStructure } from "./helpers/home-structure"; import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries"; +import { computeDomain } from "../../../../common/entity/compute_domain"; export interface HomeSecurityViewStrategyConfig { type: "home-security"; @@ -23,6 +24,8 @@ const processAreasForSecurity = ( entities: string[] ): LovelaceCardConfig[] => { const cards: LovelaceCardConfig[] = []; + const computeTileCard = computeAreaTileCardConfig(hass, "", false); + const computeTileCardWithFeature = computeAreaTileCardConfig(hass, "", true); for (const areaId of areaIds) { const area = hass.areas[areaId]; @@ -33,8 +36,6 @@ const processAreasForSecurity = ( }); const areaEntities = entities.filter(areaFilter); - const computeTileCard = computeAreaTileCardConfig(hass, "", false); - if (areaEntities.length > 0) { cards.push({ heading_style: "subtitle", @@ -47,7 +48,12 @@ const processAreasForSecurity = ( }); for (const entityId of areaEntities) { - cards.push(computeTileCard(entityId)); + cards.push( + computeDomain(entityId) === "binary_sensor" && + hass.states[entityId]?.attributes.device_class === "motion" + ? computeTileCardWithFeature(entityId) + : computeTileCard(entityId) + ); } } } From 90a1b135e1e9735fef1f58ca0b75f154e1deb43e Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Thu, 28 Aug 2025 13:30:14 +0200 Subject: [PATCH 07/84] Fix automation editor drag selected row in/out nested (#26740) Fix nested sort --- src/components/ha-sortable.ts | 11 +++++ .../action/ha-automation-action-row.ts | 4 ++ .../automation/action/ha-automation-action.ts | 48 ++++++++++++++++--- .../condition/ha-automation-condition-row.ts | 4 ++ .../condition/ha-automation-condition.ts | 48 ++++++++++++++++--- .../option/ha-automation-option-row.ts | 4 ++ .../automation/option/ha-automation-option.ts | 45 +++++++++++++++-- .../trigger/ha-automation-trigger-row.ts | 4 ++ .../trigger/ha-automation-trigger.ts | 38 +++++++++++++-- 9 files changed, 184 insertions(+), 22 deletions(-) diff --git a/src/components/ha-sortable.ts b/src/components/ha-sortable.ts index d5bf21638d..64fd388724 100644 --- a/src/components/ha-sortable.ts +++ b/src/components/ha-sortable.ts @@ -21,9 +21,15 @@ declare global { }; "drag-start": undefined; "drag-end": undefined; + "item-cloned": HaSortableClonedEventData; } } +export interface HaSortableClonedEventData { + item: any; + clone: any; +} + export type HaSortableOptions = Omit< SortableInstance.SortableOptions, "onStart" | "onChoose" | "onEnd" | "onUpdate" | "onAdd" | "onRemove" @@ -148,6 +154,7 @@ export class HaSortable extends LitElement { onUpdate: this._handleUpdate, onAdd: this._handleAdd, onRemove: this._handleRemove, + onClone: this._handleClone, }; if (this.draggableSelector) { @@ -187,6 +194,10 @@ export class HaSortable extends LitElement { fireEvent(this, "item-removed", { index: evt.oldIndex }); }; + private _handleClone = (evt) => { + fireEvent(this, "item-cloned", evt); + }; + private _handleEnd = async (evt) => { fireEvent(this, "drag-end"); // put back in original location diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 4e82501a89..da0ff1ad91 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -747,6 +747,10 @@ export default class HaAutomationActionRow extends LitElement { this._collapsed = !this._collapsed; } + public isSelected() { + return this._selected; + } + static styles = rowStyles; } diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index b8467f894b..f9d93844e5 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -10,6 +10,7 @@ import { listenMediaQuery } from "../../../../common/dom/media_query"; import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-sortable"; +import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import { ACTION_BUILDING_BLOCKS, @@ -61,6 +62,8 @@ export default class HaAutomationAction extends LitElement { private _focusLastActionOnChange = false; + private _focusActionIndexOnChange?: number; + private _actionKeys = new WeakMap(); private _unsubMql?: () => void; @@ -89,6 +92,7 @@ export default class HaAutomationAction extends LitElement { @item-moved=${this._actionMoved} @item-added=${this._actionAdded} @item-removed=${this._actionRemoved} + @item-cloned=${this._actionCloned} >
${repeat( @@ -154,19 +158,27 @@ export default class HaAutomationAction extends LitElement { protected updated(changedProps: PropertyValues) { super.updated(changedProps); - if (changedProps.has("actions") && this._focusLastActionOnChange) { - this._focusLastActionOnChange = false; + if ( + changedProps.has("actions") && + (this._focusLastActionOnChange || + this._focusActionIndexOnChange !== undefined) + ) { + const mode = this._focusLastActionOnChange ? "new" : "moved"; const row = this.shadowRoot!.querySelector( - "ha-automation-action-row:last-of-type" + `ha-automation-action-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusActionIndexOnChange! + 1})`}` )!; + + this._focusLastActionOnChange = false; + this._focusActionIndexOnChange = undefined; + row.updateComplete.then(() => { // on new condition open the settings in the sidebar, except for building blocks const type = getAutomationActionType(row.action); if ( type && this.optionsInSidebar && - !ACTION_BUILDING_BLOCKS.includes(type) + (!ACTION_BUILDING_BLOCKS.includes(type) || mode === "moved") ) { row.openSidebar(); if (this.narrow) { @@ -176,8 +188,14 @@ export default class HaAutomationAction extends LitElement { }); } } - row.expand(); - row.focus(); + + if (mode === "new") { + row.expand(); + } + + if (!this.optionsInSidebar) { + row.focus(); + } }); } } @@ -277,6 +295,12 @@ export default class HaAutomationAction extends LitElement { private async _actionAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; + let selected = false; + if (data?.["ha-automation-row-selected"]) { + selected = true; + delete data["ha-automation-row-selected"]; + } + let actions = [ ...this.actions.slice(0, index), data, @@ -284,6 +308,9 @@ export default class HaAutomationAction extends LitElement { ]; // Add action locally to avoid UI jump this.actions = actions; + if (selected) { + this._focusActionIndexOnChange = actions.length === 1 ? 0 : index; + } await nextRender(); if (this.actions !== actions) { // Ensure action is added even after update @@ -292,6 +319,9 @@ export default class HaAutomationAction extends LitElement { data, ...this.actions.slice(index), ]; + if (selected) { + this._focusActionIndexOnChange = actions.length === 1 ? 0 : index; + } } fireEvent(this, "value-changed", { value: actions }); } @@ -327,6 +357,12 @@ export default class HaAutomationAction extends LitElement { fireEvent(this, "value-changed", { value: actions }); } + private _actionCloned(ev: CustomEvent) { + if (ev.detail.item.action && ev.detail.item.isSelected()) { + ev.detail.item.action["ha-automation-row-selected"] = true; + } + } + private _duplicateAction(ev: CustomEvent) { ev.stopPropagation(); const index = (ev.target as any).index; diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 7dfb69f090..6809388b4d 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -684,6 +684,10 @@ export default class HaAutomationConditionRow extends LitElement { this._collapsed = !this._collapsed; } + public isSelected() { + return this._selected; + } + static get styles(): CSSResultGroup { return [ rowStyles, diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 5723013eec..f88c4612b0 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -11,6 +11,7 @@ import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-sortable"; +import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import type { AutomationClipboard, @@ -59,6 +60,8 @@ export default class HaAutomationCondition extends LitElement { private _focusLastConditionOnChange = false; + private _focusConditionIndexOnChange?: number; + private _conditionKeys = new WeakMap(); private _unsubMql?: () => void; @@ -100,16 +103,25 @@ export default class HaAutomationCondition extends LitElement { fireEvent(this, "value-changed", { value: updatedConditions, }); - } else if (this._focusLastConditionOnChange) { - this._focusLastConditionOnChange = false; + } else if ( + this._focusLastConditionOnChange || + this._focusConditionIndexOnChange !== undefined + ) { + const mode = this._focusLastConditionOnChange ? "new" : "moved"; + const row = this.shadowRoot!.querySelector( - "ha-automation-condition-row:last-of-type" + `ha-automation-condition-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusConditionIndexOnChange! + 1})`}` )!; + + this._focusLastConditionOnChange = false; + this._focusConditionIndexOnChange = undefined; + row.updateComplete.then(() => { // on new condition open the settings in the sidebar, except for building blocks if ( this.optionsInSidebar && - !CONDITION_BUILDING_BLOCKS.includes(row.condition.condition) + (!CONDITION_BUILDING_BLOCKS.includes(row.condition.condition) || + mode === "moved") ) { row.openSidebar(); if (this.narrow) { @@ -119,8 +131,14 @@ export default class HaAutomationCondition extends LitElement { }); } } - row.expand(); - row.focus(); + + if (mode === "new") { + row.expand(); + } + + if (!this.optionsInSidebar) { + row.focus(); + } }); } } @@ -151,6 +169,7 @@ export default class HaAutomationCondition extends LitElement { @item-moved=${this._conditionMoved} @item-added=${this._conditionAdded} @item-removed=${this._conditionRemoved} + @item-cloned=${this._conditionCloned} >
${repeat( @@ -294,6 +313,11 @@ export default class HaAutomationCondition extends LitElement { private async _conditionAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; + let selected = false; + if (data?.["ha-automation-row-selected"]) { + selected = true; + delete data["ha-automation-row-selected"]; + } let conditions = [ ...this.conditions.slice(0, index), data, @@ -301,6 +325,9 @@ export default class HaAutomationCondition extends LitElement { ]; // Add condition locally to avoid UI jump this.conditions = conditions; + if (selected) { + this._focusConditionIndexOnChange = conditions.length === 1 ? 0 : index; + } await nextRender(); if (this.conditions !== conditions) { // Ensure condition is added even after update @@ -309,6 +336,9 @@ export default class HaAutomationCondition extends LitElement { data, ...this.conditions.slice(index), ]; + if (selected) { + this._focusConditionIndexOnChange = conditions.length === 1 ? 0 : index; + } } fireEvent(this, "value-changed", { value: conditions }); } @@ -325,6 +355,12 @@ export default class HaAutomationCondition extends LitElement { fireEvent(this, "value-changed", { value: conditions }); } + private _conditionCloned(ev: CustomEvent) { + if (ev.detail.item.isSelected()) { + ev.detail.item.condition["ha-automation-row-selected"] = true; + } + } + private _conditionChanged(ev: CustomEvent) { ev.stopPropagation(); const conditions = [...this.conditions]; diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index bf9d25d1aa..ed9c72c32a 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -438,6 +438,10 @@ export default class HaAutomationOptionRow extends LitElement { this._collapsed = !this._collapsed; } + public isSelected() { + return this._selected; + } + static get styles(): CSSResultGroup { return [ rowStyles, diff --git a/src/panels/config/automation/option/ha-automation-option.ts b/src/panels/config/automation/option/ha-automation-option.ts index 48bc6f0743..d6c50da7cd 100644 --- a/src/panels/config/automation/option/ha-automation-option.ts +++ b/src/panels/config/automation/option/ha-automation-option.ts @@ -10,6 +10,7 @@ import { listenMediaQuery } from "../../../../common/dom/media_query"; import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-sortable"; +import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import type { AutomationClipboard } from "../../../../data/automation"; import type { Option } from "../../../../data/script"; @@ -50,6 +51,8 @@ export default class HaAutomationOption extends LitElement { private _focusLastOptionOnChange = false; + private _focusOptionIndexOnChange?: number; + private _optionsKeys = new WeakMap(); private _unsubMql?: () => void; @@ -78,6 +81,7 @@ export default class HaAutomationOption extends LitElement { @item-moved=${this._optionMoved} @item-added=${this._optionAdded} @item-removed=${this._optionRemoved} + @item-cloned=${this._optionCloned} >
${repeat( @@ -143,12 +147,20 @@ export default class HaAutomationOption extends LitElement { protected updated(changedProps: PropertyValues) { super.updated(changedProps); - if (changedProps.has("options") && this._focusLastOptionOnChange) { - this._focusLastOptionOnChange = false; + if ( + changedProps.has("options") && + (this._focusLastOptionOnChange || + this._focusOptionIndexOnChange !== undefined) + ) { + const mode = this._focusLastOptionOnChange ? "new" : "moved"; const row = this.shadowRoot!.querySelector( - "ha-automation-option-row:last-of-type" + `ha-automation-option-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusOptionIndexOnChange! + 1})`}` )!; + + this._focusLastOptionOnChange = false; + this._focusOptionIndexOnChange = undefined; + row.updateComplete.then(() => { if (this.narrow) { row.scrollIntoView({ @@ -156,8 +168,16 @@ export default class HaAutomationOption extends LitElement { behavior: "smooth", }); } - row.expand(); - row.focus(); + + if (mode === "new") { + row.expand(); + } + + if (this.optionsInSidebar) { + row.openSidebar(); + } else { + row.focus(); + } }); } } @@ -215,6 +235,12 @@ export default class HaAutomationOption extends LitElement { private async _optionAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; + let selected = false; + if (data?.["ha-automation-row-selected"]) { + selected = true; + delete data["ha-automation-row-selected"]; + } + const options = [ ...this.options.slice(0, index), data, @@ -222,6 +248,9 @@ export default class HaAutomationOption extends LitElement { ]; // Add option locally to avoid UI jump this.options = options; + if (selected) { + this._focusOptionIndexOnChange = options.length === 1 ? 0 : index; + } await nextRender(); fireEvent(this, "value-changed", { value: this.options }); } @@ -238,6 +267,12 @@ export default class HaAutomationOption extends LitElement { fireEvent(this, "value-changed", { value: options }); } + private _optionCloned(ev: CustomEvent) { + if (ev.detail.item.isSelected()) { + ev.detail.item.option["ha-automation-row-selected"] = true; + } + } + private _optionChanged(ev: CustomEvent) { ev.stopPropagation(); const options = [...this.options]; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index bcf4797e4b..c982f01ece 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -666,6 +666,10 @@ export default class HaAutomationTriggerRow extends LitElement { customElements.get(`ha-automation-trigger-${type}`) !== undefined ); + public isSelected() { + return this._selected; + } + static get styles(): CSSResultGroup { return [ rowStyles, diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index f4630e6356..68d8988e73 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -11,6 +11,7 @@ import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-sortable"; +import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import type { AutomationClipboard, @@ -57,6 +58,8 @@ export default class HaAutomationTrigger extends LitElement { private _focusLastTriggerOnChange = false; + private _focusTriggerIndexOnChange?: number; + private _triggerKeys = new WeakMap(); private _unsubMql?: () => void; @@ -85,6 +88,7 @@ export default class HaAutomationTrigger extends LitElement { @item-moved=${this._triggerMoved} @item-added=${this._triggerAdded} @item-removed=${this._triggerRemoved} + @item-cloned=${this._triggerCloned} >
${repeat( @@ -172,12 +176,18 @@ export default class HaAutomationTrigger extends LitElement { protected updated(changedProps: PropertyValues) { super.updated(changedProps); - if (changedProps.has("triggers") && this._focusLastTriggerOnChange) { - this._focusLastTriggerOnChange = false; - + if ( + changedProps.has("triggers") && + (this._focusLastTriggerOnChange || + this._focusTriggerIndexOnChange !== undefined) + ) { const row = this.shadowRoot!.querySelector( - "ha-automation-trigger-row:last-of-type" + `ha-automation-trigger-row:${this._focusLastTriggerOnChange ? "last-of-type" : `nth-of-type(${this._focusTriggerIndexOnChange! + 1})`}` )!; + + this._focusLastTriggerOnChange = false; + this._focusTriggerIndexOnChange = undefined; + row.updateComplete.then(() => { if (this.optionsInSidebar) { row.openSidebar(); @@ -189,8 +199,8 @@ export default class HaAutomationTrigger extends LitElement { } } else { row.expand(); + row.focus(); } - row.focus(); }); } } @@ -244,6 +254,12 @@ export default class HaAutomationTrigger extends LitElement { private async _triggerAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; + let selected = false; + if (data?.["ha-automation-row-selected"]) { + selected = true; + delete data["ha-automation-row-selected"]; + } + let triggers = [ ...this.triggers.slice(0, index), data, @@ -251,6 +267,9 @@ export default class HaAutomationTrigger extends LitElement { ]; // Add trigger locally to avoid UI jump this.triggers = triggers; + if (selected) { + this._focusTriggerIndexOnChange = triggers.length === 1 ? 0 : index; + } await nextRender(); if (this.triggers !== triggers) { // Ensure trigger is added even after update @@ -259,6 +278,9 @@ export default class HaAutomationTrigger extends LitElement { data, ...this.triggers.slice(index), ]; + if (selected) { + this._focusTriggerIndexOnChange = triggers.length === 1 ? 0 : index; + } } fireEvent(this, "value-changed", { value: triggers }); } @@ -275,6 +297,12 @@ export default class HaAutomationTrigger extends LitElement { fireEvent(this, "value-changed", { value: triggers }); } + private _triggerCloned(ev: CustomEvent) { + if (ev.detail.item.isSelected()) { + ev.detail.item.trigger["ha-automation-row-selected"] = true; + } + } + private _triggerChanged(ev: CustomEvent) { ev.stopPropagation(); const triggers = [...this.triggers]; From fc71fd6bc34647abb79540ebbc0610d4c2cfc327 Mon Sep 17 00:00:00 2001 From: Norbert Rittel Date: Thu, 28 Aug 2025 11:05:31 +0200 Subject: [PATCH 08/84] Improve section descriptions in Automation editor (#26741) Replace "listed here" or "list of" with "added here" --- src/translations/en.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/translations/en.json b/src/translations/en.json index f18091d5d3..c8b1fd7ff5 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -3850,7 +3850,7 @@ "triggers": { "name": "Triggers", "header": "When", - "description": "A trigger is a specific event happening in or around your home, for example: ''When the sun sets''. Any trigger listed here will start your automation.", + "description": "A trigger is a specific event happening in or around your home, for example: ''When the sun sets''. Any trigger added here will start your automation.", "learn_more": "Learn more about triggers", "triggered": "Triggered", "add": "Add trigger", @@ -4110,7 +4110,7 @@ "conditions": { "name": "Conditions", "header": "And if", - "description": "This list of conditions needs to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.", + "description": "All conditions added here need to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.", "learn_more": "Learn more about conditions", "add": "Add condition", "search": "Search condition", @@ -4277,7 +4277,7 @@ "actions": { "name": "Actions", "header": "Then do", - "description": "This list of actions will be performed in sequence when the automation runs. An action usually controls one of your areas, devices, or entities, for example: 'Turn on the lights'. You can use building blocks to create more complex sequences of actions.", + "description": "All actions added here will be performed in sequence when the automation runs. An action usually controls one of your areas, devices, or entities, for example: 'Turn on the lights'. You can use building blocks to create more complex sequences of actions.", "learn_more": "Learn more about actions", "add": "Add action", "search": "Search action", From 60472276480fe09bd829c504d3f479b02d1b42ad Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Thu, 28 Aug 2025 18:42:45 +0200 Subject: [PATCH 09/84] Automation editor: overflow changes and style fixes (#26744) * Fix for width also for blueprint editor * Fix overflow menus * Fix option icons * Fix iOS bottom sheet flickering and drag handle * Fix mobile padding * Fix padding in sidebar * Fix overflow placement * Add new a11y sort * Remove overflow in rows * Fix a11y select row * Revert "Fix a11y select row" This reverts commit 54260c4a374513075f890b82ad663cbc05df9556. * Fix option padding on blueprint --------- Co-authored-by: Paul Bottein --- src/components/ha-automation-row.ts | 41 ++- src/components/ha-bottom-sheet.ts | 1 + src/components/ha-md-button-menu.ts | 17 ++ .../action/ha-automation-action-editor.ts | 1 + .../action/ha-automation-action-row.ts | 264 +++++++++-------- .../automation/action/ha-automation-action.ts | 54 +++- .../ha-automation-condition-editor.ts | 3 + .../condition/ha-automation-condition-row.ts | 269 ++++++++--------- .../condition/ha-automation-condition.ts | 50 +++- .../option/ha-automation-option-row.ts | 109 +++---- .../automation/option/ha-automation-option.ts | 61 +++- .../sidebar/ha-automation-sidebar-card.ts | 3 + .../ha-automation-sidebar-condition.ts | 1 + .../sidebar/ha-automation-sidebar-option.ts | 2 +- .../sidebar/ha-automation-sidebar-trigger.ts | 1 + src/panels/config/automation/styles.ts | 20 +- .../trigger/ha-automation-trigger-editor.ts | 3 + .../trigger/ha-automation-trigger-row.ts | 273 +++++++++--------- .../trigger/ha-automation-trigger.ts | 50 +++- .../config/script/ha-script-field-row.ts | 34 ++- 20 files changed, 783 insertions(+), 474 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index 29834058da..e15a65bd50 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -1,7 +1,7 @@ import { mdiChevronUp } from "@mdi/js"; import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import "./ha-icon-button"; @@ -16,12 +16,18 @@ export class HaAutomationRow extends LitElement { @property({ type: Boolean, reflect: true }) public selected = false; + @property({ type: Boolean, reflect: true, attribute: "sort-selected" }) + public sortSelected = false; + @property({ type: Boolean, reflect: true }) public disabled = false; @property({ type: Boolean, reflect: true, attribute: "building-block" }) public buildingBlock = false; + @query(".row") + private _rowElement?: HTMLDivElement; + protected render(): TemplateResult { return html`
this._rowElement?.focus()); + } + static styles = css` :host { display: block; @@ -134,6 +165,11 @@ export class HaAutomationRow extends LitElement { overflow-wrap: anywhere; margin: 0 12px; } + :host([sort-selected]) .row { + box-shadow: + 0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8), + inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4); + } `; } @@ -144,5 +180,6 @@ declare global { interface HASSDomEvents { "toggle-collapsed": undefined; + "stop-sort-selection": undefined; } } diff --git a/src/components/ha-bottom-sheet.ts b/src/components/ha-bottom-sheet.ts index 2c4223e220..5737fe9750 100644 --- a/src/components/ha-bottom-sheet.ts +++ b/src/components/ha-bottom-sheet.ts @@ -197,6 +197,7 @@ export class HaBottomSheet extends LitElement { justify-content: center; align-items: center; z-index: 7; + padding-bottom: 76px; } .handle-wrapper .handle::after { content: ""; diff --git a/src/components/ha-md-button-menu.ts b/src/components/ha-md-button-menu.ts index 637e773f71..4e07f40bee 100644 --- a/src/components/ha-md-button-menu.ts +++ b/src/components/ha-md-button-menu.ts @@ -16,9 +16,23 @@ export class HaMdButtonMenu extends LitElement { @property() public positioning?: "fixed" | "absolute" | "popover"; + @property({ attribute: "anchor-corner" }) public anchorCorner: + | "start-start" + | "start-end" + | "end-start" + | "end-end" = "end-start"; + + @property({ attribute: "menu-corner" }) public menuCorner: + | "start-start" + | "start-end" + | "end-start" + | "end-end" = "start-start"; + @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow = false; + @property({ type: Boolean }) public quick = false; + @query("ha-md-menu", true) private _menu!: HaMdMenu; public get items() { @@ -39,8 +53,11 @@ export class HaMdButtonMenu extends LitElement {
diff --git a/src/panels/config/automation/action/ha-automation-action-editor.ts b/src/panels/config/automation/action/ha-automation-action-editor.ts index 926733e5de..d2756e8a1a 100644 --- a/src/panels/config/automation/action/ha-automation-action-editor.ts +++ b/src/panels/config/automation/action/ha-automation-action-editor.ts @@ -53,6 +53,7 @@ export default class HaAutomationActionEditor extends LitElement { this.disabled || (this.action.enabled === false && !this.yamlMode), yaml: yamlMode, indent: this.indent, + card: !this.inSidebar, })} > ${yamlMode diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index da0ff1ad91..034b55073a 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -26,6 +26,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { handleStructError } from "../../../../common/structs/handle-errors"; import "../../../../components/ha-automation-row"; +import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import "../../../../components/ha-card"; import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-icon-button"; @@ -153,6 +154,9 @@ export default class HaAutomationActionRow extends LitElement { @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar = false; + @property({ type: Boolean, attribute: "sort-selected" }) + public sortSelected = false; + @storage({ key: "automationClipboard", state: false, @@ -186,6 +190,9 @@ export default class HaAutomationActionRow extends LitElement { @query("ha-automation-action-editor") private _actionEditor?: HaAutomationActionEditor; + @query("ha-automation-row") + private _automationRowElement?: HaAutomationRow; + protected firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); @@ -254,138 +261,136 @@ export default class HaAutomationActionRow extends LitElement { ` : nothing} + ${!this.optionsInSidebar + ? html` + - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.run" + )} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.rename" + )} + + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + - ${!this.optionsInSidebar - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.run" - )} - - - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.rename" - )} - - - - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.copy" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.copy" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.cut" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.cut" - )} - - ` - : nothing} + + ${this.hass.localize("ui.panel.config.automation.editor.move_up")} + - - ${this.hass.localize("ui.panel.config.automation.editor.move_up")} - + + ${this.hass.localize( + "ui.panel.config.automation.editor.move_down" + )} + - - ${this.hass.localize("ui.panel.config.automation.editor.move_down")} - + + ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` + )} + + - ${!this.optionsInSidebar - ? html` - ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` - )} - - + - - - - ${this.action.enabled === false - ? this.hass.localize( - "ui.panel.config.automation.editor.actions.enable" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.actions.disable" - )} - - - + ${this.action.enabled === false + ? this.hass.localize( + "ui.panel.config.automation.editor.actions.enable" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.actions.disable" + )} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} - - ` - : nothing} - - + slot="start" + .path=${mdiDelete} + > + + ` + : nothing} ${!this.optionsInSidebar ? html`${this._warnings ? html`${this._renderRow()}` : html` @@ -697,9 +703,11 @@ export default class HaAutomationActionRow extends LitElement { this._collapsed = false; if (this.narrow) { - this.scrollIntoView({ - block: "start", - behavior: "smooth", + requestAnimationFrame(() => { + this.scrollIntoView({ + block: "start", + behavior: "smooth", + }); }); } } @@ -751,6 +759,10 @@ export default class HaAutomationActionRow extends LitElement { return this._selected; } + public focus() { + this._automationRowElement?.focus(); + } + static styles = rowStyles; } diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index f9d93844e5..e78f874ec7 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -48,6 +48,8 @@ export default class HaAutomationAction extends LitElement { @state() private _showReorder = false; + @state() private _rowSortSelected?: number; + @state() @storage({ key: "automationClipboard", @@ -94,7 +96,7 @@ export default class HaAutomationAction extends LitElement { @item-removed=${this._actionRemoved} @item-cloned=${this._actionCloned} > -
+
${repeat( this.actions, (action) => this._getKey(action), @@ -115,10 +117,20 @@ export default class HaAutomationAction extends LitElement { .hass=${this.hass} ?highlight=${this.highlightedActions?.includes(action)} .optionsInSidebar=${this.optionsInSidebar} + .sortSelected=${this._rowSortSelected === idx} + @stop-sort-selection=${this._stopSortSelection} > ${this._showReorder && !this.disabled ? html` -
+
` @@ -264,18 +276,30 @@ export default class HaAutomationAction extends LitElement { return this._actionKeys.get(action)!; } - private _moveUp(ev) { + private async _moveUp(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index - 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationActionRow).first) { + const newIndex = index - 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } - private _moveDown(ev) { + private async _moveDown(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index + 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationActionRow).last) { + const newIndex = index + 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } private _move(oldIndex: number, newIndex: number) { @@ -371,6 +395,20 @@ export default class HaAutomationAction extends LitElement { }); } + private _handleDragKeydown(ev: KeyboardEvent) { + if (ev.key === "Enter" || ev.key === " ") { + ev.stopPropagation(); + this._rowSortSelected = + this._rowSortSelected === undefined + ? (ev.target as any).index + : undefined; + } + } + + private _stopSortSelection() { + this._rowSortSelected = undefined; + } + static styles = [ automationRowsStyles, css` diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index 5fbeb8ac5b..92b4927e1d 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -28,6 +28,8 @@ export default class HaAutomationConditionEditor extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false; + @property({ type: Boolean, reflect: true }) public selected = false; @property({ type: Boolean, attribute: "supported" }) public uiSupported = @@ -55,6 +57,7 @@ export default class HaAutomationConditionEditor extends LitElement { (this.condition.enabled === false && !this.yamlMode), yaml: yamlMode, indent: this.indent, + card: !this.inSidebar, })} > ${yamlMode diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 6809388b4d..8b14e08f0a 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -26,6 +26,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { handleStructError } from "../../../../common/structs/handle-errors"; import "../../../../components/ha-automation-row"; +import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import "../../../../components/ha-card"; import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-icon-button"; @@ -115,6 +116,9 @@ export default class HaAutomationConditionRow extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ type: Boolean, attribute: "sort-selected" }) + public sortSelected = false; + @state() private _collapsed = true; @state() private _warnings?: string[]; @@ -145,6 +149,9 @@ export default class HaAutomationConditionRow extends LitElement { @query("ha-automation-condition-editor") public conditionEditor?: HaAutomationConditionEditor; + @query("ha-automation-row") + private _automationRowElement?: HaAutomationRow; + private _renderRow() { return html` - - - + ${!this.optionsInSidebar + ? html` + + - ${!this.optionsInSidebar - ? html` - - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.test" - )} - - - - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.rename" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.test" + )} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.rename" + )} + + - + - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.copy" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.copy" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.cut" - )} - - - ` - : nothing} + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.cut" + )} + + - - ${this.hass.localize("ui.panel.config.automation.editor.move_up")} - + + ${this.hass.localize("ui.panel.config.automation.editor.move_up")} + - - ${this.hass.localize("ui.panel.config.automation.editor.move_down")} - + + ${this.hass.localize( + "ui.panel.config.automation.editor.move_down" + )} + - ${!this.optionsInSidebar - ? html` - ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` - )} - - + + ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` + )} + + - + - - ${this.condition.enabled === false - ? this.hass.localize( - "ui.panel.config.automation.editor.actions.enable" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.actions.disable" - )} - - - + ${this.condition.enabled === false + ? this.hass.localize( + "ui.panel.config.automation.editor.actions.enable" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.actions.disable" + )} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} - - ` - : nothing} - - + slot="start" + .path=${mdiDelete} + > + + ` + : nothing} ${!this.optionsInSidebar ? html`${this._warnings ? html`${this._renderRow()}` : html` @@ -668,9 +673,11 @@ export default class HaAutomationConditionRow extends LitElement { this._collapsed = false; if (this.narrow) { - this.scrollIntoView({ - block: "start", - behavior: "smooth", + requestAnimationFrame(() => { + this.scrollIntoView({ + block: "start", + behavior: "smooth", + }); }); } } @@ -688,6 +695,10 @@ export default class HaAutomationConditionRow extends LitElement { return this._selected; } + public focus() { + this._automationRowElement?.focus(); + } + static get styles(): CSSResultGroup { return [ rowStyles, diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index f88c4612b0..a521c4d2b4 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -46,6 +46,8 @@ export default class HaAutomationCondition extends LitElement { @state() private _showReorder = false; + @state() private _rowSortSelected?: number; + @state() @storage({ key: "automationClipboard", @@ -171,7 +173,7 @@ export default class HaAutomationCondition extends LitElement { @item-removed=${this._conditionRemoved} @item-cloned=${this._conditionCloned} > -
+
${repeat( this.conditions.filter((c) => typeof c === "object"), (condition) => this._getKey(condition), @@ -193,10 +195,20 @@ export default class HaAutomationCondition extends LitElement { .hass=${this.hass} ?highlight=${this.highlightedConditions?.includes(cond)} .optionsInSidebar=${this.optionsInSidebar} + .sortSelected=${this._rowSortSelected === idx} + @stop-sort-selection=${this._stopSortSelection} > ${this._showReorder && !this.disabled ? html` -
+
` @@ -285,15 +297,27 @@ export default class HaAutomationCondition extends LitElement { private _moveUp(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index - 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationConditionRow).first) { + const newIndex = index - 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } private _moveDown(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index + 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationConditionRow).last) { + const newIndex = index + 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } private _move(oldIndex: number, newIndex: number) { @@ -390,6 +414,20 @@ export default class HaAutomationCondition extends LitElement { }); } + private _handleDragKeydown(ev: KeyboardEvent) { + if (ev.key === "Enter" || ev.key === " ") { + ev.stopPropagation(); + this._rowSortSelected = + this._rowSortSelected === undefined + ? (ev.target as any).index + : undefined; + } + } + + private _stopSortSelection() { + this._rowSortSelected = undefined; + } + static styles = [ automationRowsStyles, css` diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index ed9c72c32a..a03cce79f9 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -17,6 +17,7 @@ import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_de import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import "../../../../components/ha-automation-row"; +import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import "../../../../components/ha-card"; import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-icon-button"; @@ -63,6 +64,9 @@ export default class HaAutomationOptionRow extends LitElement { @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar = false; + @property({ type: Boolean, attribute: "sort-selected" }) + public sortSelected = false; + @state() private _expanded = false; @state() private _selected = false; @@ -79,6 +83,9 @@ export default class HaAutomationOptionRow extends LitElement { @query("ha-automation-action") private _actionElement?: HaAutomationAction; + @query("ha-automation-row") + private _automationRowElement?: HaAutomationRow; + private _expandedChanged(ev) { if (ev.currentTarget.id !== "option") { return; @@ -123,14 +130,17 @@ export default class HaAutomationOptionRow extends LitElement { - ${this.option + ${this.option && !this.optionsInSidebar ? html` - ${!this.optionsInSidebar - ? html` - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.rename" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.rename" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - - - ` - : nothing} + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + + + - ${!this.optionsInSidebar - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.remove_option" - )} - - ` - : nothing} + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.remove_option" + )} + + ` : nothing} @@ -215,6 +216,7 @@ export default class HaAutomationOptionRow extends LitElement { return html`
${this._renderRow()}` : html` @@ -398,9 +401,11 @@ export default class HaAutomationOptionRow extends LitElement { this._collapsed = false; if (this.narrow) { - this.scrollIntoView({ - block: "start", - behavior: "smooth", + requestAnimationFrame(() => { + this.scrollIntoView({ + block: "start", + behavior: "smooth", + }); }); } } @@ -442,6 +447,10 @@ export default class HaAutomationOptionRow extends LitElement { return this._selected; } + public focus() { + this._automationRowElement?.focus(); + } + static get styles(): CSSResultGroup { return [ rowStyles, diff --git a/src/panels/config/automation/option/ha-automation-option.ts b/src/panels/config/automation/option/ha-automation-option.ts index d6c50da7cd..b07f2dbd00 100644 --- a/src/panels/config/automation/option/ha-automation-option.ts +++ b/src/panels/config/automation/option/ha-automation-option.ts @@ -1,7 +1,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; import type { PropertyValues } from "lit"; -import { LitElement, html, nothing } from "lit"; +import { LitElement, css, html, nothing } from "lit"; import { customElement, property, queryAll, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; @@ -37,6 +37,8 @@ export default class HaAutomationOption extends LitElement { @state() private _showReorder = false; + @state() private _rowSortSelected?: number; + @state() @storage({ key: "automationClipboard", @@ -83,7 +85,7 @@ export default class HaAutomationOption extends LitElement { @item-removed=${this._optionRemoved} @item-cloned=${this._optionCloned} > -
+
${repeat( this.options, (option) => this._getKey(option), @@ -102,10 +104,20 @@ export default class HaAutomationOption extends LitElement { @value-changed=${this._optionChanged} .hass=${this.hass} .optionsInSidebar=${this.optionsInSidebar} + .sortSelected=${this._rowSortSelected === idx} + @stop-sort-selection=${this._stopSortSelection} > ${this._showReorder && !this.disabled ? html` -
+
` @@ -207,15 +219,27 @@ export default class HaAutomationOption extends LitElement { private _moveUp(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index - 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationOptionRow).first) { + const newIndex = index - 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } private _moveDown(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index + 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationOptionRow).last) { + const newIndex = index + 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } private _move(oldIndex: number, newIndex: number) { @@ -304,7 +328,28 @@ export default class HaAutomationOption extends LitElement { fireEvent(this, "show-default-actions"); }; - static styles = automationRowsStyles; + private _handleDragKeydown(ev: KeyboardEvent) { + if (ev.key === "Enter" || ev.key === " ") { + ev.stopPropagation(); + this._rowSortSelected = + this._rowSortSelected === undefined + ? (ev.target as any).index + : undefined; + } + } + + private _stopSortSelection() { + this._rowSortSelected = undefined; + } + + static styles = [ + automationRowsStyles, + css` + :host([root]) .rows { + padding-right: 8px; + } + `, + ]; } declare global { diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts index 8bcf1c0beb..f449e121eb 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts @@ -67,10 +67,13 @@ export default class HaAutomationSidebarCard extends LitElement { `} `; } diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts index b4e7320d04..4e2e68857e 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts @@ -67,7 +67,7 @@ export default class HaAutomationSidebarOption extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" )} diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts index 3cf6c617fa..a1f31d7e3d 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts @@ -193,6 +193,7 @@ export default class HaAutomationSidebarTrigger extends LitElement { .yamlMode=${this.yamlMode} .disabled=${this.disabled} @ui-mode-not-available=${this._handleUiModeNotAvailable} + sidebar > `; diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 667572edf0..8b820526c3 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -54,7 +54,7 @@ export const editorStyles = css` pointer-events: none; } - .card-content { + .card-content.card { padding: 16px; } .card-content.yaml { @@ -69,7 +69,7 @@ export const indentStyle = css` .selector-row, :host([indent]) ha-form { margin-left: 12px; - padding: 12px 24px 16px 16px; + padding: 12px 20px 16px 16px; border-left: 2px solid var(--ha-color-border-neutral-quiet); border-bottom: 2px solid var(--ha-color-border-neutral-quiet); border-radius: 0; @@ -168,7 +168,6 @@ export const manualEditorStyles = css` @media all and (max-width: 870px) { .split-view { gap: 0; - margin-right: -8px; } .sidebar { height: 0; @@ -197,6 +196,9 @@ export const automationRowsStyles = css` flex-direction: column; gap: 16px; } + .rows.no-sidebar { + margin-right: 0; + } .sortable-ghost { background: none; border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); @@ -209,9 +211,19 @@ export const automationRowsStyles = css` scroll-margin-top: 48px; } .handle { - padding: 12px; + margin: 4px; + padding: 8px; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; + border-radius: var(--ha-border-radius-pill); + } + .handle:focus { + outline: var(--wa-focus-ring); + background: var(--ha-color-fill-neutral-quiet-resting); + } + .handle.active { + outline: var(--wa-focus-ring); + background: var(--ha-color-fill-neutral-normal-active); } .handle ha-svg-icon { pointer-events: none; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts index 3017b8ead4..2ae092d7ba 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts @@ -29,6 +29,8 @@ export default class HaAutomationTriggerEditor extends LitElement { @property({ type: Boolean, attribute: "show-id" }) public showId = false; + @property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false; + @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor; protected render() { @@ -47,6 +49,7 @@ export default class HaAutomationTriggerEditor extends LitElement { this.trigger.enabled === false && !this.yamlMode), yaml: yamlMode, + card: !this.inSidebar, })} > ${yamlMode diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index c982f01ece..1efd7bad89 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -28,6 +28,7 @@ import { handleStructError } from "../../../../common/structs/handle-errors"; import { debounce } from "../../../../common/util/debounce"; import "../../../../components/ha-alert"; import "../../../../components/ha-automation-row"; +import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import "../../../../components/ha-card"; import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-icon-button"; @@ -115,6 +116,9 @@ export default class HaAutomationTriggerRow extends LitElement { @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar = false; + @property({ type: Boolean, attribute: "sort-selected" }) + public sortSelected = false; + @state() private _yamlMode = false; @state() private _triggered?: Record; @@ -132,6 +136,9 @@ export default class HaAutomationTriggerRow extends LitElement { @query("ha-automation-trigger-editor") public triggerEditor?: HaAutomationTriggerEditor; + @query("ha-automation-row") + private _automationRowElement?: HaAutomationRow; + @storage({ key: "automationClipboard", state: false, @@ -165,145 +172,142 @@ export default class HaAutomationTriggerRow extends LitElement { - - + ${!this.optionsInSidebar + ? html` + + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.rename" + )} + + - ${!this.optionsInSidebar - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.rename" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.edit_id" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.edit_id" - )} - - + - + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.duplicate" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.duplicate" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.copy" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.copy" - )} - - + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.cut" + )} + + - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.cut" - )} - - ` - : nothing} + + ${this.hass.localize("ui.panel.config.automation.editor.move_up")} + - - ${this.hass.localize("ui.panel.config.automation.editor.move_up")} - + + ${this.hass.localize( + "ui.panel.config.automation.editor.move_down" + )} + - - ${this.hass.localize("ui.panel.config.automation.editor.move_down")} - + + ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}` + )} + + - ${!this.optionsInSidebar - ? html` - - ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}` - )} - - + - - - - ${"enabled" in this.trigger && this.trigger.enabled === false - ? this.hass.localize( - "ui.panel.config.automation.editor.actions.enable" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.actions.disable" - )} - - - + ${"enabled" in this.trigger && this.trigger.enabled === false + ? this.hass.localize( + "ui.panel.config.automation.editor.actions.enable" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.actions.disable" + )} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} - - - ` - : nothing} - + slot="start" + .path=${mdiDelete} + > + + ` + : nothing} ${!this.optionsInSidebar ? html`${this._warnings ? html`${this._selected ? "selected" : nothing}${this._renderRow()} { + this.scrollIntoView({ + block: "start", + behavior: "smooth", + }); }); } } @@ -670,6 +677,10 @@ export default class HaAutomationTriggerRow extends LitElement { return this._selected; } + public focus() { + this._automationRowElement?.focus(); + } + static get styles(): CSSResultGroup { return [ rowStyles, diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 68d8988e73..2cc412f377 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -47,6 +47,8 @@ export default class HaAutomationTrigger extends LitElement { @state() private _showReorder = false; + @state() private _rowSortSelected?: number; + @state() @storage({ key: "automationClipboard", @@ -90,7 +92,7 @@ export default class HaAutomationTrigger extends LitElement { @item-removed=${this._triggerRemoved} @item-cloned=${this._triggerCloned} > -
+
${repeat( this.triggers, (trigger) => this._getKey(trigger), @@ -110,10 +112,20 @@ export default class HaAutomationTrigger extends LitElement { .narrow=${this.narrow} ?highlight=${this.highlightedTriggers?.includes(trg)} .optionsInSidebar=${this.optionsInSidebar} + .sortSelected=${this._rowSortSelected === idx} + @stop-sort-selection=${this._stopSortSelection} > ${this._showReorder && !this.disabled ? html` -
+
` @@ -226,15 +238,27 @@ export default class HaAutomationTrigger extends LitElement { private _moveUp(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index - 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationTriggerRow).first) { + const newIndex = index - 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } private _moveDown(ev) { ev.stopPropagation(); const index = (ev.target as any).index; - const newIndex = index + 1; - this._move(index, newIndex); + if (!(ev.target as HaAutomationTriggerRow).last) { + const newIndex = index + 1; + this._move(index, newIndex); + if (this._rowSortSelected === index) { + this._rowSortSelected = newIndex; + } + ev.target.focus(); + } } private _move(oldIndex: number, newIndex: number) { @@ -330,6 +354,20 @@ export default class HaAutomationTrigger extends LitElement { }); } + private _handleDragKeydown(ev: KeyboardEvent) { + if (ev.key === "Enter" || ev.key === " ") { + ev.stopPropagation(); + this._rowSortSelected = + this._rowSortSelected === undefined + ? (ev.target as any).index + : undefined; + } + } + + private _stopSortSelection() { + this._rowSortSelected = undefined; + } + static styles = [ automationRowsStyles, css` diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 4c69022565..c274255b6d 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -1,8 +1,11 @@ +import { mdiDelete } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; +import { preventDefaultStopPropagation } from "../../../common/dom/prevent_default_stop_propagation"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; import type { LocalizeKeys } from "../../../common/translations/localize"; import "../../../components/ha-automation-row"; import "../../../components/ha-card"; @@ -61,6 +64,29 @@ export default class HaScriptFieldRow extends LitElement {

${this.key}

+ + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + + +
{ + this.scrollIntoView({ + block: "start", + behavior: "smooth", + }); }); } } From da08aa7fb074585d36011d3e3c874e89948e168e Mon Sep 17 00:00:00 2001 From: Norbert Rittel Date: Thu, 28 Aug 2025 14:37:06 +0200 Subject: [PATCH 10/84] Different spelling fixes of user-facing strings (#26745) * Different spelling fixes of user-facing strings * Fix menu "Application credentials" menu item name --- src/translations/en.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/translations/en.json b/src/translations/en.json index c8b1fd7ff5..2c9aa4646e 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -453,7 +453,7 @@ "media_content_id": "Media content ID", "media_content_type": "Media content type", "media_content_id_detail": "The ID of the content to play. Platform dependent.", - "media_content_type_detail": "The type of the content to play, such as image, music, tv show, video, episode, channel, or playlist." + "media_content_type_detail": "The type of the content to play, such as image, music, TV show, video, episode, channel, or playlist." }, "file": { "upload_failed": "Upload failed", @@ -5447,8 +5447,8 @@ "config_entry": { "application_credentials": { "delete_title": "Application credentials", - "delete_prompt": "Would you like to also delete Application Credentials for this integration?", - "delete_detail": "If you delete them, you will need to enter credentials when setting up the integration again. If you keep them, they will be used automatically when setting up the integration again or may be accessed from the Application Credentials menu.", + "delete_prompt": "Would you like to also delete application credentials for this integration?", + "delete_detail": "If you delete them, you will need to enter credentials when setting up the integration again. If you keep them, they will be used automatically when setting up the integration again or may be accessed from the Application credentials menu.", "delete_error_title": "Deleting application credentials failed", "dismiss": "Keep", "learn_more": "Learn more about application credentials" @@ -6571,7 +6571,7 @@ "in_progress": "We're communicating with the device. This may take some time.", "failed": "The command failed. Additional information may be available in the logs.", "success": "Your device is ready to be added to another Matter platform.", - "scan_code": "With their app, scan the QR code or enter the sharing code below to finish set up.", + "scan_code": "With their app, scan the QR code or enter the sharing code below to finish setup.", "copy_code": "Copy code" } }, From 176924241c287a247800fff695b81959f0d696db Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Thu, 28 Aug 2025 16:32:52 +0300 Subject: [PATCH 11/84] Increase disk usage request timeout (#26748) --- src/data/hassio/host.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/data/hassio/host.ts b/src/data/hassio/host.ts index 3f927cf787..33e4a2d0a8 100644 --- a/src/data/hassio/host.ts +++ b/src/data/hassio/host.ts @@ -195,6 +195,7 @@ export const fetchHostDisksUsage = async (hass: HomeAssistant) => { type: "supervisor/api", endpoint: "/host/disks/default/usage", method: "get", + timeout: 3600, // seconds. This can take a while }); } From 424d71c55a5b52a7d1a8f7cfefd7242914cdb606 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 28 Aug 2025 17:05:53 +0100 Subject: [PATCH 12/84] Change loading detailed storage to use `ha-alert` with spinner (#26749) * Change spinner overlay to use `ha-alert` with messaging * Use spinner for icon slot --- .../storage/ha-config-section-storage.ts | 27 ++++++++++--------- src/translations/en.json | 1 + 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/panels/config/storage/ha-config-section-storage.ts b/src/panels/config/storage/ha-config-section-storage.ts index 7357ef937b..5a7e094495 100644 --- a/src/panels/config/storage/ha-config-section-storage.ts +++ b/src/panels/config/storage/ha-config-section-storage.ts @@ -327,8 +327,7 @@ class HaConfigSectionStorage extends LitElement { >${roundWithOneDecimal(freeSpaceGB)} GB`, }); - const chart = html` - - `; - return storageInfo || storageInfo === null - ? chart - : html` -
- ${chart} -
- -
-
- `; + + ${!storageInfo || storageInfo === null + ? html` + + ${this.hass.localize( + "ui.panel.config.storage.loading_detailed" + )}` + : nothing}`; } ); @@ -522,6 +519,10 @@ class HaConfigSectionStorage extends LitElement { ha-icon-next { width: 24px; } + + ha-alert ha-spinner { + --ha-spinner-size: 24px; + } `; } diff --git a/src/translations/en.json b/src/translations/en.json index 2c9aa4646e..1b4b0267c6 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -6674,6 +6674,7 @@ "description": "{percent_used} used - {free_space} free", "used_space": "Storage", "detailed_description": "{used} of {total} used", + "loading_detailed": "Loading detailed storage information...", "segments": { "used": "Used space", "free": "Free space", From 810b43760e6e95e15fb637021dcc0b055d5148ac Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 28 Aug 2025 18:51:59 +0200 Subject: [PATCH 13/84] Bumped version to 20250828.0 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 616ed113f1..4faa404075 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250827.0" +version = "20250828.0" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From 8055286a1ff05b139094d52bcadb3a2f534a71d2 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Fri, 29 Aug 2025 14:19:13 +0200 Subject: [PATCH 14/84] Use fixed layout for automation sidebar to have scrollbar on the side (#26751) Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- .../automation/action/ha-automation-action.ts | 11 +-- .../condition/ha-automation-condition.ts | 11 +-- .../config/automation/ha-automation-editor.ts | 19 ---- .../automation/manual-automation-editor.ts | 57 ++++++------ src/panels/config/automation/styles.ts | 89 +++++++------------ .../trigger/ha-automation-trigger.ts | 11 +-- .../config/script/manual-script-editor.ts | 53 +++++------ 7 files changed, 92 insertions(+), 159 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index e78f874ec7..67270fd89a 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -1,7 +1,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; import type { PropertyValues } from "lit"; -import { LitElement, css, html, nothing } from "lit"; +import { LitElement, html, nothing } from "lit"; import { customElement, property, queryAll, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; @@ -409,14 +409,7 @@ export default class HaAutomationAction extends LitElement { this._rowSortSelected = undefined; } - static styles = [ - automationRowsStyles, - css` - :host([root]) .rows { - padding-right: 8px; - } - `, - ]; + static styles = automationRowsStyles; } declare global { diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index a521c4d2b4..3809de574e 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -1,7 +1,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; import type { PropertyValues } from "lit"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, queryAll, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; @@ -428,14 +428,7 @@ export default class HaAutomationCondition extends LitElement { this._rowSortSelected = undefined; } - static styles = [ - automationRowsStyles, - css` - :host([root]) .rows { - padding-right: 8px; - } - `, - ]; + static styles = automationRowsStyles; } declare global { diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 8093caa9e9..e047d874be 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1181,25 +1181,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin( display: block; } - :not(.yaml-mode) > .alert-wrapper { - position: sticky; - top: -24px; - margin-top: -24px; - z-index: 100; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - } - - :not(.yaml-mode) > .alert-wrapper ha-alert { - background-color: var(--card-background-color); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - border-radius: var(--ha-border-radius-sm); - margin-bottom: 0; - } - manual-automation-editor { max-width: 1540px; padding: 0 12px; diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index b22ba74c58..ffea6df3c8 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -23,7 +23,6 @@ import { extractSearchParam, removeSearchParam, } from "../../../common/url/search-params"; -import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-button"; import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; @@ -93,9 +92,6 @@ export class HaManualAutomationEditor extends LitElement { @state() private _sidebarConfig?: SidebarConfig; - @query(".content") - private _contentElement?: HTMLDivElement; - @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar; private _previousConfig?: ManualAutomationConfig; @@ -260,8 +256,7 @@ export class HaManualAutomationEditor extends LitElement { return html`
@@ -269,31 +264,31 @@ export class HaManualAutomationEditor extends LitElement { ${this._renderContent()}
- - - +
+ + + +
+
+
+
-
`; } @@ -344,8 +339,6 @@ export class HaManualAutomationEditor extends LitElement { private _handleCloseSidebar() { this._sidebarConfig = undefined; - // fix content shift when bottom rows are scrolled into view - this._contentElement?.scrollIntoView(); } private _triggerChanged(ev: CustomEvent): void { diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 8b820526c3..6779fc178d 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -69,7 +69,7 @@ export const indentStyle = css` .selector-row, :host([indent]) ha-form { margin-left: 12px; - padding: 12px 20px 16px 16px; + padding: 12px 0 16px 16px; border-left: 2px solid var(--ha-color-border-neutral-quiet); border-bottom: 2px solid var(--ha-color-border-neutral-quiet); border-radius: 0; @@ -108,77 +108,59 @@ export const saveFabStyles = css` export const manualEditorStyles = css` :host { display: block; + --sidebar-width: 0; + --sidebar-gap: 0; } - .split-view { + .has-sidebar { + --sidebar-width: min(35vw, 500px); + --sidebar-gap: 16px; + } + + .fab-positioner { display: flex; - flex-direction: row; - height: 100%; - position: relative; - gap: 16px; + justify-content: flex-end; } - .split-view.sidebar-hidden { - gap: 0; + .fab-positioner ha-fab { + position: fixed; + right: unset; + left: unset; + bottom: calc(-80px - var(--safe-area-inset-bottom)); + transition: bottom 0.3s; + } + .fab-positioner ha-fab.dirty { + bottom: 16px; } .content-wrapper { - position: relative; - flex: 6; + padding-right: calc(var(--sidebar-width) + var(--sidebar-gap)); + padding-inline-end: calc(var(--sidebar-width) + var(--sidebar-gap)); + padding-inline-start: 0; } .content { - padding: 32px 16px 64px 0; - height: calc(100vh - 153px); - height: calc(100dvh - 153px); - overflow-y: auto; - overflow-x: hidden; + padding-top: 24px; + padding-bottom: 72px; } - .sidebar { - padding: 12px 0; - flex: 4; - height: calc(100vh - 81px); - height: calc(100dvh - 81px); - width: 40%; - } - .split-view.sidebar-hidden .sidebar { - border-color: transparent; - border-width: 0; - overflow: hidden; - flex: 0; - visibility: hidden; - } - - .sidebar.overlay { + ha-automation-sidebar { position: fixed; - bottom: 8px; - right: 8px; - height: calc(100% - 70px); - padding: 0; - z-index: 5; - box-shadow: -8px 0 16px rgba(0, 0, 0, 0.2); + top: calc(var(--header-height) + 16px); + height: calc(-81px + 100dvh); + width: var(--sidebar-width); + display: block; } - .sidebar.overlay.rtl { - right: unset; - left: 8px; + ha-automation-sidebar.hidden { + display: none; } - @media all and (max-width: 870px) { - .split-view { - gap: 0; - } - .sidebar { - height: 0; - width: 0; - flex: 0; - } + .sidebar-positioner { + display: flex; + justify-content: flex-end; } - .split-view.sidebar-hidden .sidebar.overlay { - width: 0; - } .description { margin: 0; } @@ -189,9 +171,6 @@ export const manualEditorStyles = css` export const automationRowsStyles = css` .rows { - padding: 16px 0 16px 16px; - margin: -16px; - margin-right: -20px; display: flex; flex-direction: column; gap: 16px; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 2cc412f377..8b5dc00333 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -1,7 +1,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; import type { PropertyValues } from "lit"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; @@ -368,14 +368,7 @@ export default class HaAutomationTrigger extends LitElement { this._rowSortSelected = undefined; } - static styles = [ - automationRowsStyles, - css` - :host([root]) .rows { - padding-right: 8px; - } - `, - ]; + static styles = automationRowsStyles; } declare global { diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 439bd6aad3..c363c4f5af 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -22,7 +22,6 @@ import { extractSearchParam, removeSearchParam, } from "../../../common/url/search-params"; -import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-icon-button"; import "../../../components/ha-markdown"; import type { SidebarConfig } from "../../../data/automation"; @@ -196,8 +195,7 @@ export class HaManualScriptEditor extends LitElement { return html`
@@ -205,30 +203,33 @@ export class HaManualScriptEditor extends LitElement { ${this._renderContent()}
- - - +
+
+ + + +
+
+
+
+
-
`; } From 37f3682ffa26bb467ffa5b2879fe2955a23fc4dd Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Fri, 29 Aug 2025 08:39:06 +0200 Subject: [PATCH 15/84] Automation editor: fix focus handling (#26755) --- src/components/ha-automation-row.ts | 4 +- src/data/automation.ts | 6 +- .../action/ha-automation-action-row.ts | 5 +- .../condition/ha-automation-condition-row.ts | 5 +- .../automation/ha-automation-sidebar.ts | 2 +- .../option/ha-automation-option-row.ts | 5 +- .../trigger/ha-automation-trigger-row.ts | 5 +- .../config/script/ha-script-field-row.ts | 63 ++++++++----------- .../config/script/manual-script-editor.ts | 18 ++++-- 9 files changed, 59 insertions(+), 54 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index e15a65bd50..6a0858682c 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -103,7 +103,9 @@ export class HaAutomationRow extends LitElement { } public focus() { - requestAnimationFrame(() => this._rowElement?.focus()); + requestAnimationFrame(() => { + this._rowElement?.focus(); + }); } static styles = css` diff --git a/src/data/automation.ts b/src/data/automation.ts index 00e69fadff..f629d73a44 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -558,11 +558,11 @@ export interface AutomationClipboard { export interface BaseSidebarConfig { toggleYamlMode: () => boolean; delete: () => void; + close: (focus?: boolean) => void; } export interface TriggerSidebarConfig extends BaseSidebarConfig { save: (value: Trigger) => void; - close: () => void; rename: () => void; disable: () => void; duplicate: () => void; @@ -575,7 +575,6 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig { export interface ConditionSidebarConfig extends BaseSidebarConfig { save: (value: Condition) => void; - close: () => void; rename: () => void; disable: () => void; test: () => void; @@ -589,7 +588,6 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig { export interface ActionSidebarConfig extends BaseSidebarConfig { save: (value: Action) => void; - close: () => void; rename: () => void; disable: () => void; duplicate: () => void; @@ -604,7 +602,6 @@ export interface ActionSidebarConfig extends BaseSidebarConfig { } export interface OptionSidebarConfig extends BaseSidebarConfig { - close: () => void; rename: () => void; duplicate: () => void; defaultOption?: boolean; @@ -612,7 +609,6 @@ export interface OptionSidebarConfig extends BaseSidebarConfig { export interface ScriptFieldSidebarConfig extends BaseSidebarConfig { save: (value: Field) => void; - close: () => void; config: { field: Field; selector: boolean; diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 034b55073a..d34bee9a05 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -676,9 +676,12 @@ export default class HaAutomationActionRow extends LitElement { save: (value) => { fireEvent(this, "value-changed", { value }); }, - close: () => { + close: (focus?: boolean) => { this._selected = false; fireEvent(this, "close-sidebar"); + if (focus) { + this.focus(); + } }, rename: () => { this._renameAction(); diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 8b14e08f0a..bda6801e42 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -648,9 +648,12 @@ export default class HaAutomationConditionRow extends LitElement { save: (value) => { fireEvent(this, "value-changed", { value }); }, - close: () => { + close: (focus?: boolean) => { this._selected = false; fireEvent(this, "close-sidebar"); + if (focus) { + this.focus(); + } }, rename: () => { this._renameCondition(); diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts index 14a60b0319..a62ee4d440 100644 --- a/src/panels/config/automation/ha-automation-sidebar.ts +++ b/src/panels/config/automation/ha-automation-sidebar.ts @@ -193,7 +193,7 @@ export default class HaAutomationSidebar extends LitElement { } private _closeSidebar() { - this.config?.close(); + this.config?.close(true); } private _toggleYamlMode = () => { diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index a03cce79f9..eee47b8cb4 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -385,9 +385,12 @@ export default class HaAutomationOptionRow extends LitElement { public openSidebar(): void { fireEvent(this, "open-sidebar", { - close: () => { + close: (focus?: boolean) => { this._selected = false; fireEvent(this, "close-sidebar"); + if (focus) { + this.focus(); + } }, rename: () => { this._renameOption(); diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 1efd7bad89..926c25bb2f 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -482,9 +482,12 @@ export default class HaAutomationTriggerRow extends LitElement { save: (value) => { fireEvent(this, "value-changed", { value }); }, - close: () => { + close: (focus?: boolean) => { this._selected = false; fireEvent(this, "close-sidebar"); + if (focus) { + this.focus(); + } }, rename: () => { this._renameTrigger(); diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index c274255b6d..867ca2f958 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -1,17 +1,12 @@ -import { mdiDelete } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; -import { preventDefaultStopPropagation } from "../../../common/dom/prevent_default_stop_propagation"; -import { stopPropagation } from "../../../common/dom/stop_propagation"; import type { LocalizeKeys } from "../../../common/translations/localize"; import "../../../components/ha-automation-row"; +import type { HaAutomationRow } from "../../../components/ha-automation-row"; import "../../../components/ha-card"; -import "../../../components/ha-icon-button"; -import "../../../components/ha-md-button-menu"; -import "../../../components/ha-md-menu-item"; import type { ScriptFieldSidebarConfig } from "../../../data/automation"; import type { Field } from "../../../data/script"; import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector"; @@ -50,6 +45,12 @@ export default class HaScriptFieldRow extends LitElement { @query("ha-script-field-selector-editor") private _selectorEditor?: HaScriptFieldSelectorEditor; + @query("ha-automation-row:first-of-type") + private _fieldRowElement?: HaAutomationRow; + + @query(".selector-row ha-automation-row") + private _selectorRowElement?: HaAutomationRow; + protected render() { return html` @@ -64,29 +65,6 @@ export default class HaScriptFieldRow extends LitElement {

${this.key}

- - - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} - - -
{ fireEvent(this, "value-changed", { value }); }, - close: () => { + close: (focus?: boolean) => { if (selectorEditor) { this._selectorRowSelected = false; + if (focus) { + this.focusSelector(); + } } else { this._selected = false; + if (focus) { + this.focus(); + } } fireEvent(this, "close-sidebar"); }, @@ -280,15 +264,19 @@ export default class HaScriptFieldRow extends LitElement { }); }; + public focus() { + this._fieldRowElement?.focus(); + } + + public focusSelector() { + this._selectorRowElement?.focus(); + } + static get styles(): CSSResultGroup { return [ haStyle, indentStyle, css` - ha-button-menu, - ha-icon-button { - --mdc-theme-text-primary-on-background: var(--primary-text-color); - } .disabled { opacity: 0.5; pointer-events: none; @@ -334,9 +322,6 @@ export default class HaScriptFieldRow extends LitElement { ); } - ha-md-menu-item[disabled] { - --mdc-theme-text-primary-on-background: var(--disabled-text-color); - } .warning ul { margin: 4px 0; } @@ -352,6 +337,10 @@ export default class HaScriptFieldRow extends LitElement { border-color: var(--state-inactive-color); box-shadow: var(--shadow-default), var(--shadow-focus); } + + .selector-row { + padding: 12px 0 16px 16px; + } `, ]; } diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index c363c4f5af..b8cc9ca973 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -37,6 +37,7 @@ import { showToast } from "../../../util/toast"; import "../automation/action/ha-automation-action"; import type HaAutomationAction from "../automation/action/ha-automation-action"; import "../automation/ha-automation-sidebar"; +import type HaAutomationSidebar from "../automation/ha-automation-sidebar"; import { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace"; import { manualEditorStyles, saveFabStyles } from "../automation/styles"; import "./ha-script-fields"; @@ -68,17 +69,19 @@ export class HaManualScriptEditor extends LitElement { @property({ attribute: false }) public dirty = false; - @query("ha-script-fields") - private _scriptFields?: HaScriptFields; - - private _openFields = false; - @state() private _pastedConfig?: ScriptConfig; @state() private _sidebarConfig?: SidebarConfig; + @query("ha-script-fields") + private _scriptFields?: HaScriptFields; + + @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar; + private _previousConfig?: ScriptConfig; + private _openFields = false; + public addFields() { this._openFields = true; fireEvent(this, "value-changed", { @@ -456,10 +459,13 @@ export class HaManualScriptEditor extends LitElement { }); } - private _openSidebar(ev: CustomEvent) { + private async _openSidebar(ev: CustomEvent) { // deselect previous selected row this._sidebarConfig?.close?.(); this._sidebarConfig = ev.detail; + + await this._sidebarElement?.updateComplete; + this._sidebarElement?.focus(); } private _sidebarConfigChanged(ev: CustomEvent<{ value: SidebarConfig }>) { From f494a6453a10133f1c051e831ed5f0ad92daebe0 Mon Sep 17 00:00:00 2001 From: Norbert Rittel Date: Fri, 29 Aug 2025 09:59:31 +0200 Subject: [PATCH 16/84] Improve OAuth setup explanation (#26758) * Improve OAuth setup explanation * Add "your" * Include "application" in headline --- src/translations/en.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/translations/en.json b/src/translations/en.json index 1b4b0267c6..96232402aa 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5647,10 +5647,10 @@ }, "application_credentials": { "caption": "Application credentials", - "description": "Manage the OAuth application credentials used by Integrations", + "description": "Manage the OAuth application credentials used by integrations", "editor": { - "caption": "Add credentials", - "description": "OAuth is used to grant Home Assistant access to information on other websites without giving a password. This mechanism is used by companies such as Spotify, Google, Withings, Microsoft, and Twitter.", + "caption": "Add application credentials", + "description": "OAuth is used to grant Home Assistant secure delegated access to information on other websites without revealing your personal credentials.", "missing_credentials": "Setting up {integration} requires configuring application credentials.", "missing_credentials_domain_link": "View {integration} documentation", "view_documentation": "View application credentials documentation", From 7674eee0fbe71d376218894ac2b6d5796acfd07a Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Fri, 29 Aug 2025 10:05:05 +0200 Subject: [PATCH 17/84] Fix alert z-index for automation and script (#26759) --- src/panels/config/script/ha-script-editor.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 27199efb9a..4f419cdf6b 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1104,12 +1104,13 @@ export class HaScriptEditor extends SubscribeMixin( top: -24px; margin-top: -24px; margin-bottom: 8px; - z-index: 100; + z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; + pointer-events: none; } .alert-wrapper ha-alert { @@ -1117,6 +1118,7 @@ export class HaScriptEditor extends SubscribeMixin( box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border-radius: var(--ha-border-radius-sm); margin-bottom: 0; + pointer-events: auto; } manual-script-editor { From f7ec8650ebb8da3b4d6d66e88cb37846755f1d9b Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Fri, 29 Aug 2025 14:17:55 +0200 Subject: [PATCH 18/84] Add translations for home dashboard (#26763) --- .../hui-home-dashboard-strategy-editor.ts | 8 +++++-- .../strategies/home/helpers/home-summaries.ts | 10 +++++--- .../home/home-area-view-strategy.ts | 23 ++++++++++++------- .../home/home-climate-view-strategy.ts | 10 ++++++-- .../home/home-dashboard-strategy.ts | 13 +++++++---- .../home/home-lights-view-strategy.ts | 10 ++++++-- .../home/home-main-view-strategy.ts | 19 ++++++++------- .../home/home-media-players-view-strategy.ts | 10 ++++++-- .../home/home-security-view-strategy.ts | 10 ++++++-- src/translations/en.json | 18 +++++++++++++++ 10 files changed, 97 insertions(+), 34 deletions(-) diff --git a/src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts b/src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts index fd5c1c8f75..9886afdb73 100644 --- a/src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts @@ -29,8 +29,12 @@ export class HuiHomeDashboardStrategyEditor = { +export const HOME_SUMMARIES_ICONS: Record = { lights: "mdi:lamps", climate: "mdi:home-thermometer", security: "mdi:security", media_players: "mdi:multimedia", }; -export const HOME_SUMMARIES_FILTERS: Record = { +export const HOME_SUMMARIES_FILTERS: Record = { lights: [{ domain: "light", entity_category: "none" }], climate: [ { domain: "climate", entity_category: "none" }, @@ -90,3 +91,6 @@ export const findEntities = ( return results; }; + +export const getSummaryLabel = (localize: LocalizeFunc, summary: HomeSummary) => + localize(`ui.panel.lovelace.strategy.home.summary_list.${summary}`); diff --git a/src/panels/lovelace/strategies/home/home-area-view-strategy.ts b/src/panels/lovelace/strategies/home/home-area-view-strategy.ts index 24ca6a4f96..7f091a0f46 100644 --- a/src/panels/lovelace/strategies/home/home-area-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-area-view-strategy.ts @@ -14,10 +14,11 @@ import type { HeadingCardConfig } from "../../cards/types"; import { computeAreaTileCardConfig } from "../areas/helpers/areas-strategy-helper"; import { findEntities, + getSummaryLabel, HOME_SUMMARIES, HOME_SUMMARIES_FILTERS, HOME_SUMMARIES_ICONS, - type HomeSummaries, + type HomeSummary, } from "./helpers/home-summaries"; export interface HomeAreaViewStrategyConfig { @@ -96,7 +97,7 @@ export class HomeAreaViewStrategy extends ReactiveElement { acc[summary] = findEntities(areaEntities, filterFunctions); return acc; }, - {} as Record + {} as Record ); const { @@ -110,7 +111,11 @@ export class HomeAreaViewStrategy extends ReactiveElement { sections.push({ type: "grid", cards: [ - computeHeadingCard("Lights", HOME_SUMMARIES_ICONS.lights, "lights"), + computeHeadingCard( + getSummaryLabel(hass.localize, "lights"), + HOME_SUMMARIES_ICONS.lights, + "lights" + ), ...lights.map(computeTileCard), ], }); @@ -121,7 +126,7 @@ export class HomeAreaViewStrategy extends ReactiveElement { type: "grid", cards: [ computeHeadingCard( - "Climate", + getSummaryLabel(hass.localize, "climate"), HOME_SUMMARIES_ICONS.climate, "climate" ), @@ -135,7 +140,7 @@ export class HomeAreaViewStrategy extends ReactiveElement { type: "grid", cards: [ computeHeadingCard( - "Security", + getSummaryLabel(hass.localize, "security"), HOME_SUMMARIES_ICONS.security, "security" ), @@ -149,7 +154,7 @@ export class HomeAreaViewStrategy extends ReactiveElement { type: "grid", cards: [ computeHeadingCard( - "Media players", + getSummaryLabel(hass.localize, "media_players"), HOME_SUMMARIES_ICONS.media_players, "media-players" ), @@ -229,9 +234,11 @@ export class HomeAreaViewStrategy extends ReactiveElement { const device = hass.devices[deviceId]; let heading = ""; if (device) { - heading = computeDeviceName(device) || "Unnamed device"; + heading = + computeDeviceName(device) || + hass.localize("ui.panel.lovelace.strategy.home.unamed_device"); } else { - heading = "Others"; + heading = hass.localize("ui.panel.lovelace.strategy.home.others"); } deviceSections.push({ diff --git a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts index 9d677dd391..456d67fa9e 100644 --- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts @@ -95,7 +95,10 @@ export class HomeClimateViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? floor.name : "Areas", + heading: + floorCount > 1 + ? floor.name + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; @@ -116,7 +119,10 @@ export class HomeClimateViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? "Other areas" : "Areas", + heading: + floorCount > 1 + ? hass.localize("ui.panel.lovelace.strategy.home.other_areas") + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; diff --git a/src/panels/lovelace/strategies/home/home-dashboard-strategy.ts b/src/panels/lovelace/strategies/home/home-dashboard-strategy.ts index 35e9da886c..10bf4a9d41 100644 --- a/src/panels/lovelace/strategies/home/home-dashboard-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-dashboard-strategy.ts @@ -6,7 +6,10 @@ import type { LovelaceViewRawConfig } from "../../../../data/lovelace/config/vie import type { HomeAssistant } from "../../../../types"; import { getAreas } from "../areas/helpers/areas-strategy-helper"; import type { LovelaceStrategyEditor } from "../types"; -import { HOME_SUMMARIES_ICONS } from "./helpers/home-summaries"; +import { + getSummaryLabel, + HOME_SUMMARIES_ICONS, +} from "./helpers/home-summaries"; import type { HomeAreaViewStrategyConfig } from "./home-area-view-strategy"; import type { HomeMainViewStrategyConfig } from "./home-main-view-strategy"; @@ -60,7 +63,7 @@ export class HomeDashboardStrategy extends ReactiveElement { }); const lightView = { - title: "Lights", + title: getSummaryLabel(hass.localize, "lights"), path: "lights", subview: true, strategy: { @@ -70,7 +73,7 @@ export class HomeDashboardStrategy extends ReactiveElement { } satisfies LovelaceViewRawConfig; const climateView = { - title: "Climate", + title: getSummaryLabel(hass.localize, "climate"), path: "climate", subview: true, strategy: { @@ -80,7 +83,7 @@ export class HomeDashboardStrategy extends ReactiveElement { } satisfies LovelaceViewRawConfig; const securityView = { - title: "Security", + title: getSummaryLabel(hass.localize, "security"), path: "security", subview: true, strategy: { @@ -90,7 +93,7 @@ export class HomeDashboardStrategy extends ReactiveElement { } satisfies LovelaceViewRawConfig; const mediaPlayersView = { - title: "Media players", + title: getSummaryLabel(hass.localize, "media_players"), path: "media-players", subview: true, strategy: { diff --git a/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts b/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts index 41681ba74b..b502779a6a 100644 --- a/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts @@ -89,7 +89,10 @@ export class HomeLightsViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? floor.name : "Areas", + heading: + floorCount > 1 + ? floor.name + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; @@ -110,7 +113,10 @@ export class HomeLightsViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? "Other areas" : "Areas", + heading: + floorCount > 1 + ? hass.localize("ui.panel.lovelace.strategy.home.other_areas") + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; diff --git a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts index 43be46e482..ce2fb6aefe 100644 --- a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts @@ -15,7 +15,10 @@ import type { WeatherForecastCardConfig, } from "../../cards/types"; import { getAreas } from "../areas/helpers/areas-strategy-helper"; -import { HOME_SUMMARIES_ICONS } from "./helpers/home-summaries"; +import { + getSummaryLabel, + HOME_SUMMARIES_ICONS, +} from "./helpers/home-summaries"; export interface HomeMainViewStrategyConfig { type: "home-main"; @@ -63,7 +66,7 @@ export class HomeMainViewStrategy extends ReactiveElement { { type: "heading", heading_style: "title", - heading: "Areas", + heading: hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ...areas.map((area) => computeAreaCard(area.area_id, hass) @@ -108,12 +111,12 @@ export class HomeMainViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: "Summaries", + heading: hass.localize("ui.panel.lovelace.strategy.home.summaries"), }, { type: "button", icon: HOME_SUMMARIES_ICONS.lights, - name: "Lights", + name: getSummaryLabel(hass.localize, "lights"), icon_height: "24px", grid_options: { rows: 2, @@ -127,7 +130,7 @@ export class HomeMainViewStrategy extends ReactiveElement { { type: "button", icon: HOME_SUMMARIES_ICONS.climate, - name: "Climate", + name: getSummaryLabel(hass.localize, "climate"), icon_height: "30px", grid_options: { rows: 2, @@ -141,7 +144,7 @@ export class HomeMainViewStrategy extends ReactiveElement { { type: "button", icon: HOME_SUMMARIES_ICONS.security, - name: "Security", + name: getSummaryLabel(hass.localize, "security"), icon_height: "30px", grid_options: { rows: 2, @@ -155,7 +158,7 @@ export class HomeMainViewStrategy extends ReactiveElement { { type: "button", icon: HOME_SUMMARIES_ICONS.media_players, - name: "Media Players", + name: getSummaryLabel(hass.localize, "media_players"), icon_height: "30px", grid_options: { rows: 2, @@ -232,7 +235,7 @@ export class HomeMainViewStrategy extends ReactiveElement { card: { type: "markdown", text_only: true, - content: "## Welcome {{user}}", + content: `## ${hass.localize("ui.panel.lovelace.strategy.home.welcome_user", { user: "{{ user }}" })}`, } satisfies MarkdownCardConfig, }, }; diff --git a/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts b/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts index 48c7617ecb..7cb6c9ec40 100644 --- a/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts @@ -87,7 +87,10 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? floor.name : "Areas", + heading: + floorCount > 1 + ? floor.name + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; @@ -108,7 +111,10 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? "Other areas" : "Areas", + heading: + floorCount > 1 + ? hass.localize("ui.panel.lovelace.strategy.home.other_areas") + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; diff --git a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts index 759df98206..fd3916542e 100644 --- a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts @@ -95,7 +95,10 @@ export class HomeSecurityViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? floor.name : "Areas", + heading: + floorCount > 1 + ? floor.name + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; @@ -116,7 +119,10 @@ export class HomeSecurityViewStrategy extends ReactiveElement { cards: [ { type: "heading", - heading: floorCount > 1 ? "Other areas" : "Areas", + heading: + floorCount > 1 + ? hass.localize("ui.panel.lovelace.strategy.home.other_areas") + : hass.localize("ui.panel.lovelace.strategy.home.areas"), }, ], }; diff --git a/src/translations/en.json b/src/translations/en.json index 96232402aa..605aa94753 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -6817,6 +6817,20 @@ }, "other_areas": "Other areas", "areas": "Areas" + }, + "home": { + "summary_list": { + "climate": "Climate", + "lights": "Lights", + "security": "Security", + "media_players": "Media players" + }, + "welcome_user": "Welcome {user}", + "summaries": "Summaries", + "areas": "Areas", + "other_areas": "Other areas", + "unamed_device": "Unnamed device", + "others": "Others" } }, "cards": { @@ -8176,6 +8190,10 @@ "no_entities": "No entities in this group, the section will not be displayed", "use_compact_card": "Use compact card", "use_large_card": "Use large card" + }, + "home": { + "favorite_entities": "Favorite entities", + "add_favorite_entity": "Add favorite entity" } }, "view": { From 7c15633f6dca9118a9085cae0d9a6141ca3dd065 Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Fri, 29 Aug 2025 07:08:11 -0700 Subject: [PATCH 19/84] Don't use context for media selector with 'accept' (#26773) --- .../ha-selector/ha-selector-media.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index 43632feb85..fae8d781ac 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/src/components/ha-selector/ha-selector-media.ts @@ -53,9 +53,15 @@ export class HaMediaSelector extends LitElement { private _contextEntities: string[] | undefined; + private get _hasAccept(): boolean { + return !!this.selector?.media?.accept?.length; + } + willUpdate(changedProps: PropertyValues) { if (changedProps.has("context")) { - this._contextEntities = ensureArray(this.context?.filter_entity); + if (!this._hasAccept) { + this._contextEntities = ensureArray(this.context?.filter_entity); + } } if (changedProps.has("value")) { @@ -99,10 +105,8 @@ export class HaMediaSelector extends LitElement { (stateObj && supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA)); - const hasAccept = this.selector?.media?.accept?.length; - return html` - ${hasAccept || + ${this._hasAccept || (this._contextEntities && this._contextEntities.length <= 1) ? nothing : html` @@ -148,7 +152,7 @@ export class HaMediaSelector extends LitElement { : this.value.metadata?.title || this.value.media_content_id} @click=${this._pickMedia} @keydown=${this._handleKeyDown} - class=${this.disabled || (!entityId && !hasAccept) + class=${this.disabled || (!entityId && !this._hasAccept) ? "disabled" : ""} > @@ -215,7 +219,7 @@ export class HaMediaSelector extends LitElement { private _entityChanged(ev: CustomEvent) { ev.stopPropagation(); - if (this.context?.filter_entity) { + if (!this._hasAccept && this.context?.filter_entity) { fireEvent(this, "value-changed", { value: { media_content_id: "", @@ -257,7 +261,7 @@ export class HaMediaSelector extends LitElement { media_content_type: id.media_content_type, media_content_id: id.media_content_id, })), - ...(this.context?.filter_entity + ...(!this._hasAccept && this.context?.filter_entity ? { browse_entity_id: this._getActiveEntityId() } : {}), }, From 3837b3e630d3bc2210cf6250a3a6d027f3831871 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Fri, 29 Aug 2025 17:48:01 +0200 Subject: [PATCH 20/84] Bumped version to 20250829.0 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 4faa404075..c5b7ce6891 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250828.0" +version = "20250829.0" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From cbacde12faad5da1e6f01a6c36f3d69466b6134d Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Mon, 1 Sep 2025 13:26:17 +0200 Subject: [PATCH 21/84] Automation editor: fix yaml editor and editor switch (#26772) --- src/data/automation.ts | 5 ++- .../action/ha-automation-action-editor.ts | 2 +- .../action/ha-automation-action-row.ts | 2 +- .../ha-automation-condition-editor.ts | 3 +- .../condition/ha-automation-condition-row.ts | 2 +- .../automation/ha-automation-sidebar.ts | 19 ++++++---- .../automation/manual-automation-editor.ts | 4 ++ .../option/ha-automation-option-row.ts | 1 - .../sidebar/ha-automation-sidebar-action.ts | 37 +++++++++++++------ .../ha-automation-sidebar-condition.ts | 35 ++++++++++++------ ...utomation-sidebar-script-field-selector.ts | 29 +++++++++++---- .../ha-automation-sidebar-script-field.ts | 33 ++++++++++++----- .../sidebar/ha-automation-sidebar-trigger.ts | 37 +++++++++++++------ .../trigger/ha-automation-trigger-editor.ts | 2 +- .../trigger/ha-automation-trigger-row.ts | 2 +- .../config/script/ha-script-field-editor.ts | 9 ++++- .../config/script/ha-script-field-row.ts | 2 +- .../script/ha-script-field-selector-editor.ts | 2 +- .../config/script/manual-script-editor.ts | 4 ++ 19 files changed, 156 insertions(+), 74 deletions(-) diff --git a/src/data/automation.ts b/src/data/automation.ts index f629d73a44..e79c34b62f 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -556,7 +556,6 @@ export interface AutomationClipboard { } export interface BaseSidebarConfig { - toggleYamlMode: () => boolean; delete: () => void; close: (focus?: boolean) => void; } @@ -568,6 +567,7 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig { duplicate: () => void; cut: () => void; copy: () => void; + toggleYamlMode: () => void; config: Trigger; yamlMode: boolean; uiSupported: boolean; @@ -581,6 +581,7 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig { duplicate: () => void; cut: () => void; copy: () => void; + toggleYamlMode: () => void; config: Condition; yamlMode: boolean; uiSupported: boolean; @@ -594,6 +595,7 @@ export interface ActionSidebarConfig extends BaseSidebarConfig { cut: () => void; copy: () => void; run: () => void; + toggleYamlMode: () => void; config: { action: Action; }; @@ -615,6 +617,7 @@ export interface ScriptFieldSidebarConfig extends BaseSidebarConfig { key: string; excludeKeys: string[]; }; + toggleYamlMode: () => void; yamlMode: boolean; } diff --git a/src/panels/config/automation/action/ha-automation-action-editor.ts b/src/panels/config/automation/action/ha-automation-action-editor.ts index d2756e8a1a..97cea3f6c1 100644 --- a/src/panels/config/automation/action/ha-automation-action-editor.ts +++ b/src/panels/config/automation/action/ha-automation-action-editor.ts @@ -97,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement { if (!ev.detail.isValid) { return; } - fireEvent(this, "value-changed", { + fireEvent(this, "yaml-changed", { value: migrateAutomationAction(ev.detail.value), }); } diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index d34bee9a05..b8cffcc161 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -688,7 +688,7 @@ export default class HaAutomationActionRow extends LitElement { }, toggleYamlMode: () => { this._toggleYamlMode(); - return this._yamlMode; + this.openSidebar(); }, disable: this._onDisable, delete: this._onDelete, diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index 92b4927e1d..614ec520e3 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -103,8 +103,7 @@ export default class HaAutomationConditionEditor extends LitElement { if (!ev.detail.isValid) { return; } - // @ts-ignore - fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true }); + fireEvent(this, "yaml-changed", { value: ev.detail.value }); } private _onUiChanged(ev: CustomEvent) { diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index bda6801e42..d025377af5 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -660,7 +660,7 @@ export default class HaAutomationConditionRow extends LitElement { }, toggleYamlMode: () => { this._toggleYamlMode(); - return this._yamlMode; + this.openSidebar(); }, disable: this._onDisable, delete: this._onDelete, diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts index a62ee4d440..3c184c2372 100644 --- a/src/panels/config/automation/ha-automation-sidebar.ts +++ b/src/panels/config/automation/ha-automation-sidebar.ts @@ -1,6 +1,5 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; -import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-bottom-sheet"; import type { HaBottomSheet } from "../../../components/ha-bottom-sheet"; import { @@ -34,6 +33,8 @@ export default class HaAutomationSidebar extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ attribute: "sidebar-key" }) public sidebarKey?: string; + @state() private _yamlMode = false; @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet; @@ -52,6 +53,7 @@ export default class HaAutomationSidebar extends LitElement { .narrow=${this.narrow} .disabled=${this.disabled} .yamlMode=${this._yamlMode} + .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this._handleCloseSidebar} > @@ -67,6 +69,7 @@ export default class HaAutomationSidebar extends LitElement { .narrow=${this.narrow} .disabled=${this.disabled} .yamlMode=${this._yamlMode} + .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this._handleCloseSidebar} > @@ -82,6 +85,7 @@ export default class HaAutomationSidebar extends LitElement { .narrow=${this.narrow} .disabled=${this.disabled} .yamlMode=${this._yamlMode} + .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this._handleCloseSidebar} > @@ -110,6 +114,7 @@ export default class HaAutomationSidebar extends LitElement { .narrow=${this.narrow} .disabled=${this.disabled} .yamlMode=${this._yamlMode} + .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this._handleCloseSidebar} > @@ -125,6 +130,7 @@ export default class HaAutomationSidebar extends LitElement { .narrow=${this.narrow} .disabled=${this.disabled} .yamlMode=${this._yamlMode} + .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this._handleCloseSidebar} > @@ -197,13 +203,7 @@ export default class HaAutomationSidebar extends LitElement { } private _toggleYamlMode = () => { - this._yamlMode = this.config!.toggleYamlMode(); - fireEvent(this, "value-changed", { - value: { - ...this.config, - yamlMode: this._yamlMode, - }, - }); + (this.config as ActionSidebarConfig)?.toggleYamlMode(); }; static styles = css` @@ -235,5 +235,8 @@ declare global { interface HASSDomEvents { "toggle-yaml-mode": undefined; + "yaml-changed": { + value: unknown; + }; } } diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index ffea6df3c8..3fc30ecba7 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -92,6 +92,8 @@ export class HaManualAutomationEditor extends LitElement { @state() private _sidebarConfig?: SidebarConfig; + @state() private _sidebarKey?: string; + @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar; private _previousConfig?: ManualAutomationConfig; @@ -287,6 +289,7 @@ export class HaManualAutomationEditor extends LitElement { .config=${this._sidebarConfig} @value-changed=${this._sidebarConfigChanged} .disabled=${this.disabled} + .sidebarKey=${this._sidebarKey} >
@@ -314,6 +317,7 @@ export class HaManualAutomationEditor extends LitElement { // deselect previous selected row this._sidebarConfig?.close?.(); this._sidebarConfig = ev.detail; + this._sidebarKey = JSON.stringify(this._sidebarConfig); await this._sidebarElement?.updateComplete; this._sidebarElement?.focus(); diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index eee47b8cb4..cfb8df9aa2 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -395,7 +395,6 @@ export default class HaAutomationOptionRow extends LitElement { rename: () => { this._renameOption(); }, - toggleYamlMode: () => false, // no yaml mode for options delete: this._removeOption, duplicate: this._duplicateOption, defaultOption: !!this.defaultActions, diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts index 25f84f19db..3d9708d571 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts @@ -11,6 +11,7 @@ import { } from "@mdi/js"; import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; import type { LocalizeKeys } from "../../../../common/translations/localize"; @@ -41,6 +42,8 @@ export default class HaAutomationSidebarAction extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ attribute: "sidebar-key" }) public sidebarKey?: string; + @state() private _warnings?: string[]; @query(".sidebar-editor") @@ -181,18 +184,22 @@ export default class HaAutomationSidebarAction extends LitElement { ${description && !this.yamlMode ? html`
${description}
` - : html``} + : keyed( + this.sidebarKey, + html`` + )} `; } @@ -220,6 +227,12 @@ export default class HaAutomationSidebarAction extends LitElement { } } + private _yamlChangedSidebar(ev: CustomEvent) { + ev.stopPropagation(); + + this.config?.save?.(ev.detail.value); + } + private _toggleYamlMode = () => { fireEvent(this, "toggle-yaml-mode"); }; diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts index 4e081cd32a..2e343d0c69 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -11,6 +11,7 @@ import { } from "@mdi/js"; import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; import type { ConditionSidebarConfig } from "../../../../data/automation"; @@ -35,6 +36,8 @@ export default class HaAutomationSidebarCondition extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ attribute: "sidebar-key" }) public sidebarKey?: string; + @state() private _warnings?: string[]; @query(".sidebar-editor") @@ -173,17 +176,21 @@ export default class HaAutomationSidebarCondition extends LitElement { ${description && !this.yamlMode ? html`
${description}
` - : html` `} + : keyed( + this.sidebarKey, + html`` + )} `; } @@ -209,6 +216,12 @@ export default class HaAutomationSidebarCondition extends LitElement { } } + private _yamlChangedSidebar(ev: CustomEvent) { + ev.stopPropagation(); + + this.config?.save?.(ev.detail.value); + } + private _toggleYamlMode = () => { fireEvent(this, "toggle-yaml-mode"); }; diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts index b9bb622d98..dfdab29f12 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts @@ -1,6 +1,7 @@ import { mdiDelete, mdiPlaylistEdit } from "@mdi/js"; import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import type { LocalizeKeys } from "../../../../common/translations/localize"; import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; @@ -24,6 +25,8 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ attribute: "sidebar-key" }) public sidebarKey?: string; + @state() private _warnings?: string[]; @query(".sidebar-editor") @@ -81,14 +84,18 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { )} - + ${keyed( + this.sidebarKey, + html`` + )} `; } @@ -116,6 +123,12 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { } } + private _yamlChangedSidebar(ev: CustomEvent) { + ev.stopPropagation(); + + this.config?.save?.(ev.detail.value); + } + private _toggleYamlMode = () => { fireEvent(this, "toggle-yaml-mode"); }; diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts index d316bbb010..8729ea2d7a 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts @@ -1,6 +1,7 @@ import { mdiDelete, mdiPlaylistEdit } from "@mdi/js"; import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; @@ -23,6 +24,8 @@ export default class HaAutomationSidebarScriptField extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ attribute: "sidebar-key" }) public sidebarKey?: string; + @state() private _warnings?: string[]; @query(".sidebar-editor") @@ -74,16 +77,20 @@ export default class HaAutomationSidebarScriptField extends LitElement { )} - + ${keyed( + this.sidebarKey, + html`` + )} `; } @@ -110,6 +117,12 @@ export default class HaAutomationSidebarScriptField extends LitElement { } } + private _yamlChangedSidebar(ev: CustomEvent) { + ev.stopPropagation(); + + this.config?.save?.(ev.detail.value); + } + private _toggleYamlMode = () => { fireEvent(this, "toggle-yaml-mode"); }; diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts index a1f31d7e3d..a727a22486 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts @@ -11,6 +11,7 @@ import { } from "@mdi/js"; import { html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; import type { TriggerSidebarConfig } from "../../../../data/automation"; @@ -35,6 +36,8 @@ export default class HaAutomationSidebarTrigger extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ attribute: "sidebar-key" }) public sidebarKey?: string; + @state() private _requestShowId = false; @state() private _warnings?: string[]; @@ -183,18 +186,22 @@ export default class HaAutomationSidebarTrigger extends LitElement { )} - + ${keyed( + this.sidebarKey, + html`` + )} `; } @@ -221,6 +228,12 @@ export default class HaAutomationSidebarTrigger extends LitElement { } } + private _yamlChangedSidebar(ev: CustomEvent) { + ev.stopPropagation(); + + this.config?.save?.(ev.detail.value); + } + private _toggleYamlMode = () => { fireEvent(this, "toggle-yaml-mode"); }; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts index 2ae092d7ba..e354a56713 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts @@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement { if (!ev.detail.isValid) { return; } - fireEvent(this, "value-changed", { + fireEvent(this, "yaml-changed", { value: migrateAutomationTrigger(ev.detail.value), }); } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 926c25bb2f..2117e29c09 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -494,7 +494,7 @@ export default class HaAutomationTriggerRow extends LitElement { }, toggleYamlMode: () => { this._toggleYamlMode(); - return this._yamlMode; + this.openSidebar(); }, disable: this._onDisable, delete: this._onDelete, diff --git a/src/panels/config/script/ha-script-field-editor.ts b/src/panels/config/script/ha-script-field-editor.ts index 3d96cca29c..78e0b44022 100644 --- a/src/panels/config/script/ha-script-field-editor.ts +++ b/src/panels/config/script/ha-script-field-editor.ts @@ -152,7 +152,12 @@ export default class HaScriptFieldEditor extends LitElement { ev.stopPropagation(); const value = { ...ev.detail.value }; - if (typeof value !== "object" || Object.keys(value).length !== 1) { + if ( + typeof value !== "object" || + Object.keys(value).length !== 1 || + !value[Object.keys(value)[0]] || + !value[Object.keys(value)[0]].selector + ) { this._yamlError = "yaml_error"; return; } @@ -165,7 +170,7 @@ export default class HaScriptFieldEditor extends LitElement { const newValue = { ...value[key], key }; - fireEvent(this, "value-changed", { value: newValue }); + fireEvent(this, "yaml-changed", { value: newValue }); } private _computeLabelCallback = ( diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 867ca2f958..58eff00d2b 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -218,7 +218,7 @@ export default class HaScriptFieldRow extends LitElement { }, toggleYamlMode: () => { this._toggleYamlMode(); - return this._yamlMode; + this.openSidebar(); }, delete: this._onDelete, config: { diff --git a/src/panels/config/script/ha-script-field-selector-editor.ts b/src/panels/config/script/ha-script-field-selector-editor.ts index e33b64fc09..f7fed6ad7a 100644 --- a/src/panels/config/script/ha-script-field-selector-editor.ts +++ b/src/panels/config/script/ha-script-field-selector-editor.ts @@ -132,7 +132,7 @@ export default class HaScriptFieldSelectorEditor extends LitElement { return; } - fireEvent(this, "value-changed", { value }); + fireEvent(this, "yaml-changed", { value }); } private _computeLabelCallback = ( diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index b8cc9ca973..6a513e2173 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -73,6 +73,8 @@ export class HaManualScriptEditor extends LitElement { @state() private _sidebarConfig?: SidebarConfig; + @state() private _sidebarKey?: string; + @query("ha-script-fields") private _scriptFields?: HaScriptFields; @@ -223,6 +225,7 @@ export class HaManualScriptEditor extends LitElement {
Date: Mon, 1 Sep 2025 15:13:53 +0200 Subject: [PATCH 22/84] Use summary card in home dashboard (#26775) --- .../lovelace/cards/hui-home-summary-card.ts | 372 ++++++++++++++++++ src/panels/lovelace/cards/types.ts | 9 + .../create-element/create-card-element.ts | 1 + .../home/home-main-view-strategy.ts | 56 ++- src/translations/en.json | 9 + 5 files changed, 415 insertions(+), 32 deletions(-) create mode 100644 src/panels/lovelace/cards/hui-home-summary-card.ts diff --git a/src/panels/lovelace/cards/hui-home-summary-card.ts b/src/panels/lovelace/cards/hui-home-summary-card.ts new file mode 100644 index 0000000000..93a1662ea3 --- /dev/null +++ b/src/panels/lovelace/cards/hui-home-summary-card.ts @@ -0,0 +1,372 @@ +import { css, html, LitElement, nothing } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; +import { ifDefined } from "lit/directives/if-defined"; +import { styleMap } from "lit/directives/style-map"; +import { computeCssColor } from "../../../common/color/compute-color"; +import { computeDomain } from "../../../common/entity/compute_domain"; +import { generateEntityFilter } from "../../../common/entity/entity_filter"; +import { formatNumber } from "../../../common/number/format_number"; +import "../../../components/ha-card"; +import "../../../components/ha-icon"; +import "../../../components/ha-ripple"; +import "../../../components/tile/ha-tile-icon"; +import "../../../components/tile/ha-tile-info"; +import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; +import "../../../state-display/state-display"; +import type { HomeAssistant } from "../../../types"; +import { actionHandler } from "../common/directives/action-handler-directive"; +import { handleAction } from "../common/handle-action"; +import { hasAction } from "../common/has-action"; +import { + findEntities, + getSummaryLabel, + HOME_SUMMARIES_FILTERS, + HOME_SUMMARIES_ICONS, + type HomeSummary, +} from "../strategies/home/helpers/home-summaries"; +import type { LovelaceCard, LovelaceGridOptions } from "../types"; +import type { HomeSummaryCard } from "./types"; + +const COLORS: Record = { + lights: "amber", + climate: "deep-orange", + security: "blue", + media_players: "purple", +}; + +@customElement("hui-home-summary-card") +export class HuiHomeSummaryCard extends LitElement implements LovelaceCard { + @property({ attribute: false }) public hass?: HomeAssistant; + + @state() private _config?: HomeSummaryCard; + + public setConfig(config: HomeSummaryCard): void { + this._config = config; + } + + public getCardSize(): number { + return this._config?.vertical ? 2 : 1; + } + + public getGridOptions(): LovelaceGridOptions { + const columns = 6; + let min_columns = 6; + let rows = 1; + + if (this._config?.vertical) { + rows++; + min_columns = 3; + } + return { + columns, + rows, + min_columns, + min_rows: rows, + }; + } + + private _handleAction(ev: ActionHandlerEvent) { + handleAction(this, this.hass!, this._config!, ev.detail.action!); + } + + private get _hasCardAction() { + return ( + hasAction(this._config?.tap_action) || + hasAction(this._config?.hold_action) || + hasAction(this._config?.double_tap_action) + ); + } + + private _computeSummaryState(): string { + if (!this._config || !this.hass) { + return ""; + } + const allEntities = Object.keys(this.hass!.states); + + const areas = Object.values(this.hass.areas); + const areasFilter = generateEntityFilter(this.hass, { + area: areas.map((area) => area.area_id), + }); + + const entitiesInsideArea = allEntities.filter(areasFilter); + + switch (this._config.summary) { + case "lights": { + // Number of lights on + const lightsFilters = HOME_SUMMARIES_FILTERS.lights.map((filter) => + generateEntityFilter(this.hass!, filter) + ); + + const lightEntities = findEntities(entitiesInsideArea, lightsFilters); + + const onLights = lightEntities.filter((entityId) => { + const s = this.hass!.states[entityId]?.state; + return s === "on"; + }); + + return onLights.length + ? this.hass.localize("ui.card.home-summary.count_lights_on", { + count: onLights.length, + }) + : this.hass.localize("ui.card.home-summary.all_lights_off"); + } + case "climate": { + // Min/Max temperature of the areas + const areaSensors = areas + .map((area) => area.temperature_entity_id) + .filter(Boolean); + + const sensorsValues = areaSensors + .map( + (entityId) => parseFloat(this.hass!.states[entityId!].state) || NaN + ) + .filter((value) => !isNaN(value)); + + if (sensorsValues.length === 0) { + return ""; + } + const minTemp = Math.min(...sensorsValues); + const maxTemp = Math.max(...sensorsValues); + + if (isNaN(minTemp) || isNaN(maxTemp)) { + return ""; + } + + const formattedMinTemp = formatNumber(minTemp, this.hass?.locale, { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + }); + const formattedMaxTemp = formatNumber(maxTemp, this.hass?.locale, { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + }); + return formattedMinTemp === formattedMaxTemp + ? `${formattedMinTemp}°` + : `${formattedMinTemp} - ${formattedMaxTemp}°`; + } + case "security": { + // Alarm and lock status + const securityFilters = HOME_SUMMARIES_FILTERS.security.map((filter) => + generateEntityFilter(this.hass!, filter) + ); + + const securityEntities = findEntities( + entitiesInsideArea, + securityFilters + ); + + const locks = securityEntities.filter((entityId) => { + const domain = computeDomain(entityId); + return domain === "lock"; + }); + + const alarms = securityEntities.filter((entityId) => { + const domain = computeDomain(entityId); + return domain === "alarm_control_panel"; + }); + + const disarmedAlarms = alarms.filter((entityId) => { + const s = this.hass!.states[entityId]?.state; + return s === "disarmed"; + }); + + if (!locks.length && !alarms.length) { + return ""; + } + + const unlockedLocks = locks.filter((entityId) => { + const s = this.hass!.states[entityId]?.state; + return s === "unlocked" || s === "jammed" || s === "open"; + }); + + if (unlockedLocks.length) { + return this.hass.localize( + "ui.card.home-summary.count_locks_unlocked", + { + count: unlockedLocks.length, + } + ); + } + if (disarmedAlarms.length) { + return this.hass.localize( + "ui.card.home-summary.count_alarms_disarmed", + { + count: disarmedAlarms.length, + } + ); + } + return this.hass.localize("ui.card.home-summary.all_secure"); + } + case "media_players": { + // Playing media + const mediaPlayerFilters = HOME_SUMMARIES_FILTERS.media_players.map( + (filter) => generateEntityFilter(this.hass!, filter) + ); + + const mediaPlayerEntities = findEntities( + entitiesInsideArea, + mediaPlayerFilters + ); + + const playingMedia = mediaPlayerEntities.filter((entityId) => { + const s = this.hass!.states[entityId]?.state; + return s === "playing"; + }); + + return playingMedia.length + ? this.hass.localize("ui.card.home-summary.count_media_playing", { + count: playingMedia.length, + }) + : this.hass.localize("ui.card.home-summary.no_media_playing"); + } + } + return ""; + } + + protected render() { + if (!this._config || !this.hass) { + return nothing; + } + + const contentClasses = { vertical: Boolean(this._config.vertical) }; + + const color = computeCssColor(COLORS[this._config.summary]); + + const style = { + "--tile-color": color, + }; + + const secondary = this._computeSummaryState(); + + const label = getSummaryLabel(this.hass.localize, this._config.summary); + const icon = HOME_SUMMARIES_ICONS[this._config.summary]; + + return html` + +
+ +
+
+
+ + + + +
+
+ + `; + } + + static styles = css` + :host { + --tile-color: var(--state-inactive-color); + -webkit-tap-highlight-color: transparent; + } + ha-card:has(.background:focus-visible) { + --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); + --shadow-focus: 0 0 0 1px var(--tile-color); + border-color: var(--tile-color); + box-shadow: var(--shadow-default), var(--shadow-focus); + } + ha-card { + --ha-ripple-color: var(--tile-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; + height: 100%; + transition: + box-shadow 180ms ease-in-out, + border-color 180ms ease-in-out; + display: flex; + flex-direction: column; + justify-content: space-between; + } + ha-card.active { + --tile-color: var(--state-icon-color); + } + [role="button"] { + cursor: pointer; + pointer-events: auto; + } + [role="button"]:focus { + outline: none; + } + .background { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--ha-card-border-radius, 12px); + margin: calc(-1 * var(--ha-card-border-width, 1px)); + overflow: hidden; + } + .container { + margin: calc(-1 * var(--ha-card-border-width, 1px)); + display: flex; + flex-direction: column; + flex: 1; + } + .container.horizontal { + flex-direction: row; + } + + .content { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + padding: 10px; + flex: 1; + min-width: 0; + box-sizing: border-box; + pointer-events: none; + gap: 10px; + } + + .vertical { + flex-direction: column; + text-align: center; + justify-content: center; + } + .vertical ha-tile-info { + width: 100%; + flex: none; + } + + ha-tile-icon { + --tile-icon-color: var(--tile-color); + position: relative; + padding: 6px; + margin: -6px; + } + + ha-tile-info { + position: relative; + min-width: 0; + transition: background-color 180ms ease-in-out; + box-sizing: border-box; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "hui-home-summary-card": HuiHomeSummaryCard; + } +} diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 99bb70734e..0d6e66faca 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -26,6 +26,7 @@ import type { import type { LovelaceHeaderFooterConfig } from "../header-footer/types"; import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types"; import type { TimeFormat } from "../../../data/translation"; +import type { HomeSummary } from "../strategies/home/helpers/home-summaries"; export type AlarmPanelCardConfigState = | "arm_away" @@ -588,3 +589,11 @@ export interface HeadingCardConfig extends LovelaceCardConfig { /** @deprecated Use `badges` instead */ entities?: LovelaceHeadingBadgeConfig[]; } + +export interface HomeSummaryCard extends LovelaceCardConfig { + summary: HomeSummary; + vertical?: boolean; + tap_action?: ActionConfig; + hold_action?: ActionConfig; + double_tap_action?: ActionConfig; +} diff --git a/src/panels/lovelace/create-element/create-card-element.ts b/src/panels/lovelace/create-element/create-card-element.ts index 8a4920376f..9978316672 100644 --- a/src/panels/lovelace/create-element/create-card-element.ts +++ b/src/panels/lovelace/create-element/create-card-element.ts @@ -68,6 +68,7 @@ const LAZY_LOAD_TYPES = { "energy-sankey": () => import("../cards/energy/hui-energy-sankey-card"), "entity-filter": () => import("../cards/hui-entity-filter-card"), error: () => import("../cards/hui-error-card"), + "home-summary": () => import("../cards/hui-home-summary-card"), gauge: () => import("../cards/hui-gauge-card"), "history-graph": () => import("../cards/hui-history-graph-card"), "horizontal-stack": () => import("../cards/hui-horizontal-stack-card"), diff --git a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts index ce2fb6aefe..5e53923e66 100644 --- a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts @@ -9,16 +9,12 @@ import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { HomeAssistant } from "../../../../types"; import type { AreaCardConfig, - ButtonCardConfig, + HomeSummaryCard, MarkdownCardConfig, TileCardConfig, WeatherForecastCardConfig, } from "../../cards/types"; import { getAreas } from "../areas/helpers/areas-strategy-helper"; -import { - getSummaryLabel, - HOME_SUMMARIES_ICONS, -} from "./helpers/home-summaries"; export interface HomeMainViewStrategyConfig { type: "home-main"; @@ -114,61 +110,57 @@ export class HomeMainViewStrategy extends ReactiveElement { heading: hass.localize("ui.panel.lovelace.strategy.home.summaries"), }, { - type: "button", - icon: HOME_SUMMARIES_ICONS.lights, - name: getSummaryLabel(hass.localize, "lights"), - icon_height: "24px", - grid_options: { - rows: 2, - columns: 4, - }, + type: "home-summary", + summary: "lights", + vertical: true, tap_action: { action: "navigate", navigation_path: "lights", }, - } satisfies ButtonCardConfig, - { - type: "button", - icon: HOME_SUMMARIES_ICONS.climate, - name: getSummaryLabel(hass.localize, "climate"), - icon_height: "30px", grid_options: { rows: 2, columns: 4, }, + } satisfies HomeSummaryCard, + { + type: "home-summary", + summary: "climate", + vertical: true, tap_action: { action: "navigate", navigation_path: "climate", }, - } satisfies ButtonCardConfig, - { - type: "button", - icon: HOME_SUMMARIES_ICONS.security, - name: getSummaryLabel(hass.localize, "security"), - icon_height: "30px", grid_options: { rows: 2, columns: 4, }, + } satisfies HomeSummaryCard, + { + type: "home-summary", + summary: "security", + vertical: true, tap_action: { action: "navigate", navigation_path: "security", }, - } satisfies ButtonCardConfig, - { - type: "button", - icon: HOME_SUMMARIES_ICONS.media_players, - name: getSummaryLabel(hass.localize, "media_players"), - icon_height: "30px", grid_options: { rows: 2, columns: 4, }, + } satisfies HomeSummaryCard, + { + type: "home-summary", + summary: "media_players", + vertical: true, tap_action: { action: "navigate", navigation_path: "media-players", }, - } satisfies ButtonCardConfig, + grid_options: { + rows: 2, + columns: 4, + }, + } satisfies HomeSummaryCard, ], }; diff --git a/src/translations/en.json b/src/translations/en.json index 605aa94753..6fccd2fc97 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -201,6 +201,15 @@ "open_door_confirm": "Really open?", "open_door_done": "Done" }, + "home-summary": { + "all_lights_off": "All off", + "count_lights_on": "{count} {count, plural,\n one {on}\n other {on}\n}", + "count_locks_unlocked": "{count} {count, plural,\n one {unlocked}\n other {unlocked}\n}", + "count_alarms_disarmed": "{count} {count, plural,\n one {disarmed}\n other {disarmed}\n}", + "all_secure": "All secure", + "no_media_playing": "No media playing", + "count_media_playing": "{count} {count, plural,\n one {playing}\n other {playing}\n}" + }, "media_player": { "source": "Source", "sound_mode": "Sound mode", From 65ab6848ab1b630ed8fe4ebe4040f6d2228750b5 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sun, 31 Aug 2025 12:11:41 -0300 Subject: [PATCH 23/84] Do not add graphs to every sensor tile card (#26793) --- .../areas/helpers/areas-strategy-helper.ts | 8 +----- .../home/home-climate-view-strategy.ts | 27 +++++++++++++++++-- .../home/home-security-view-strategy.ts | 20 +++++++++++--- 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts b/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts index a3684103ea..0dfb37103e 100644 --- a/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts +++ b/src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts @@ -15,7 +15,6 @@ import type { HomeAssistant } from "../../../../../types"; import { supportsAlarmModesCardFeature } from "../../../card-features/hui-alarm-modes-card-feature"; import { supportsCoverOpenCloseCardFeature } from "../../../card-features/hui-cover-open-close-card-feature"; import { supportsFanSpeedCardFeature } from "../../../card-features/hui-fan-speed-card-feature"; -import { supportsHistoryChartCardFeature } from "../../../card-features/hui-history-chart-card-feature"; import { supportsLightBrightnessCardFeature } from "../../../card-features/hui-light-brightness-card-feature"; import { supportsLockCommandsCardFeature } from "../../../card-features/hui-lock-commands-card-feature"; import { supportsTargetTemperatureCardFeature } from "../../../card-features/hui-target-temperature-card-feature"; @@ -238,12 +237,7 @@ export const computeAreaTileCardConfig = let feature: LovelaceCardFeatureConfig | undefined; if (includeFeature) { - if (supportsHistoryChartCardFeature(hass, context)) { - feature = { - type: "history-chart", - hours_to_show: 24, - }; - } else if (supportsLightBrightnessCardFeature(hass, context)) { + if (supportsLightBrightnessCardFeature(hass, context)) { feature = { type: "light-brightness", }; diff --git a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts index 456d67fa9e..041314e615 100644 --- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts @@ -12,11 +12,30 @@ import { } from "../areas/helpers/areas-strategy-helper"; import { getHomeStructure } from "./helpers/home-structure"; import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries"; +import { computeStateName } from "../../../../common/entity/compute_state_name"; +import { computeObjectId } from "../../../../common/entity/compute_object_id"; export interface HomeClimateViewStrategyConfig { type: "home-climate"; } +const createTempHumidBadge = (hass: HomeAssistant, entityId: string) => { + const stateObj = hass.states[entityId]; + return { + type: "tile", + entity: entityId, + name: stateObj + ? computeStateName(stateObj) + : computeObjectId(entityId).replace(/_/g, " "), + features: [ + { + type: "history-chart", + hours_to_show: 3, + }, + ], + }; +}; + const processAreasForClimate = ( areaIds: string[], hass: HomeAssistant, @@ -46,10 +65,14 @@ const processAreasForClimate = ( }); if (hass.areas[areaId].temperature_entity_id) { - cards.push(computeTileCard(hass.areas[areaId].temperature_entity_id)); + cards.push( + createTempHumidBadge(hass, hass.areas[areaId].temperature_entity_id) + ); } if (hass.areas[areaId].humidity_entity_id) { - cards.push(computeTileCard(hass.areas[areaId].humidity_entity_id)); + cards.push( + createTempHumidBadge(hass, hass.areas[areaId].humidity_entity_id) + ); } for (const entityId of areaEntities) { diff --git a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts index fd3916542e..c231ffd336 100644 --- a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts @@ -13,6 +13,8 @@ import { import { getHomeStructure } from "./helpers/home-structure"; import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries"; import { computeDomain } from "../../../../common/entity/compute_domain"; +import { computeStateName } from "../../../../common/entity/compute_state_name"; +import { computeObjectId } from "../../../../common/entity/compute_object_id"; export interface HomeSecurityViewStrategyConfig { type: "home-security"; @@ -25,7 +27,6 @@ const processAreasForSecurity = ( ): LovelaceCardConfig[] => { const cards: LovelaceCardConfig[] = []; const computeTileCard = computeAreaTileCardConfig(hass, "", false); - const computeTileCardWithFeature = computeAreaTileCardConfig(hass, "", true); for (const areaId of areaIds) { const area = hass.areas[areaId]; @@ -48,10 +49,23 @@ const processAreasForSecurity = ( }); for (const entityId of areaEntities) { + const stateObj = hass.states[entityId]; cards.push( computeDomain(entityId) === "binary_sensor" && - hass.states[entityId]?.attributes.device_class === "motion" - ? computeTileCardWithFeature(entityId) + stateObj?.attributes.device_class === "motion" + ? { + type: "tile", + entity: entityId, + name: stateObj + ? computeStateName(stateObj) + : computeObjectId(entityId).replace(/_/g, " "), + features: [ + { + type: "history-chart", + hours_to_show: 6, + }, + ], + } : computeTileCard(entityId) ); } From eb5d1c79c81022e8ac17d470668709ad6283c170 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Mon, 1 Sep 2025 12:34:44 +0300 Subject: [PATCH 24/84] Use feature-color in History chart feature (#26802) --- .../card-features/hui-history-chart-card-feature.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts index 7e42bf3deb..386afdf617 100644 --- a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts @@ -19,7 +19,6 @@ import type { import { getSensorNumericDeviceClasses } from "../../../data/sensor"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; -import { getGraphColorByIndex } from "../../../common/color/colors"; import { computeTimelineColor } from "../../../components/chart/timeline-color"; import { downSampleLineData } from "../../../components/chart/down-sample"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -95,18 +94,17 @@ class HuiHistoryChartCardFeature if (line) { const points = this._generateLinePoints(line); const { paths, filledPaths } = this._getLinePaths(points); - const color = getGraphColorByIndex(0, this.style); return html`
${svg` ${paths.map( (path) => - svg`` + svg`` )} ${filledPaths.map( (path) => - svg`` + svg`` )} `}
From d2cea159af9d7e7e48ea92d2071c6f9689be1635 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 1 Sep 2025 14:09:13 +0200 Subject: [PATCH 25/84] Enable drag and drop on mobile for automations (#26805) --- .../automation/action/ha-automation-action.ts | 22 ++----------------- .../condition/ha-automation-condition.ts | 22 ++----------------- .../automation/option/ha-automation-option.ts | 22 ++----------------- .../dialog-paste-replace.ts | 11 +++++----- .../trigger/ha-automation-trigger.ts | 22 ++----------------- 5 files changed, 14 insertions(+), 85 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 67270fd89a..f23cfaf414 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -6,7 +6,6 @@ import { customElement, property, queryAll, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { listenMediaQuery } from "../../../../common/dom/media_query"; import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-sortable"; @@ -46,8 +45,6 @@ export default class HaAutomationAction extends LitElement { @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar = false; - @state() private _showReorder = false; - @state() private _rowSortSelected?: number; @state() @@ -68,27 +65,12 @@ export default class HaAutomationAction extends LitElement { private _actionKeys = new WeakMap(); - private _unsubMql?: () => void; - - public connectedCallback() { - super.connectedCallback(); - this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => { - this._showReorder = matches; - }); - } - - public disconnectedCallback() { - super.disconnectedCallback(); - this._unsubMql?.(); - this._unsubMql = undefined; - } - protected render() { return html` - ${this._showReorder && !this.disabled + ${!this.disabled ? html`
(); - private _unsubMql?: () => void; - - public connectedCallback() { - super.connectedCallback(); - this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => { - this._showReorder = matches; - }); - } - - public disconnectedCallback() { - super.disconnectedCallback(); - this._unsubMql?.(); - this._unsubMql = undefined; - } - protected updated(changedProperties: PropertyValues) { if (!changedProperties.has("conditions")) { return; @@ -165,7 +147,7 @@ export default class HaAutomationCondition extends LitElement { - ${this._showReorder && !this.disabled + ${!this.disabled ? html`
(); - private _unsubMql?: () => void; - - public connectedCallback() { - super.connectedCallback(); - this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => { - this._showReorder = matches; - }); - } - - public disconnectedCallback() { - super.disconnectedCallback(); - this._unsubMql?.(); - this._unsubMql = undefined; - } - protected render() { return html` - ${this._showReorder && !this.disabled + ${!this.disabled ? html`
(); - private _unsubMql?: () => void; - - public connectedCallback() { - super.connectedCallback(); - this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => { - this._showReorder = matches; - }); - } - - public disconnectedCallback() { - super.disconnectedCallback(); - this._unsubMql?.(); - this._unsubMql = undefined; - } - protected render() { return html` - ${this._showReorder && !this.disabled + ${!this.disabled ? html`
Date: Mon, 1 Sep 2025 14:45:52 +0300 Subject: [PATCH 26/84] Handle negative values in History chart card feature (#26806) --- .../hui-history-chart-card-feature.ts | 40 ++++++++++++++----- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts index 386afdf617..a6dd7546dc 100644 --- a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts @@ -92,8 +92,8 @@ class HuiHistoryChartCardFeature const width = this.clientWidth; const height = this.clientHeight; if (line) { - const points = this._generateLinePoints(line); - const { paths, filledPaths } = this._getLinePaths(points); + const { points, yAxisOrigin } = this._generateLinePoints(line); + const { paths, filledPaths } = this._getLinePaths(points, yAxisOrigin); return html`
@@ -159,9 +159,13 @@ class HuiHistoryChartCardFeature ); } - private _generateLinePoints(line: LineChartUnit): { x: number; y: number }[] { + private _generateLinePoints(line: LineChartUnit): { + points: { x: number; y: number }[]; + yAxisOrigin: number; + } { const width = this.clientWidth; const height = this.clientHeight; + let yAxisOrigin = height; let minY = Number(line.data[0].states[0].state); let maxY = Number(line.data[0].states[0].state); const minX = line.data[0].states[0].last_changed; @@ -170,8 +174,7 @@ class HuiHistoryChartCardFeature const stateValue = Number(stateData.state); if (stateValue < minY) { minY = stateValue; - } - if (stateValue > maxY) { + } else if (stateValue > maxY) { maxY = stateValue; } }); @@ -185,9 +188,21 @@ class HuiHistoryChartCardFeature minX, maxX ); - // add margin to the min and max - minY -= rangeY * 0.1; - maxY += rangeY * 0.1; + if (maxY < 0) { + // all values are negative + // add margin + maxY += rangeY * 0.1; + maxY = Math.min(0, maxY); + yAxisOrigin = 0; + } else if (minY < 0) { + // some values are negative + yAxisOrigin = (maxY / (maxY - minY || 1)) * height; + } else { + // all values are positive + // add margin + minY -= rangeY * 0.1; + minY = Math.max(0, minY); + } const yDenom = maxY - minY || 1; const xDenom = maxX - minX || 1; const points = sampledData!.map((point) => { @@ -196,7 +211,7 @@ class HuiHistoryChartCardFeature return { x, y }; }); points.push({ x: width, y: points[points.length - 1].y }); - return points; + return { points, yAxisOrigin }; } private _generateTimelineRanges(timeline: TimelineEntity) { @@ -232,7 +247,10 @@ class HuiHistoryChartCardFeature return ranges; } - private _getLinePaths(points: { x: number; y: number }[]) { + private _getLinePaths( + points: { x: number; y: number }[], + yAxisOrigin: number + ) { const paths: string[] = []; const filledPaths: string[] = []; if (!points.length) { @@ -267,7 +285,7 @@ class HuiHistoryChartCardFeature paths.push(path); filledPaths.push( path + - ` L ${next!.x},${this.clientHeight} L ${pathPoints[0].x},${this.clientHeight} Z` + ` L ${next!.x},${yAxisOrigin} L ${pathPoints[0].x},${yAxisOrigin} Z` ); }); From b0e95699f704d6df191855b24ca6931f1a31dbdf Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 14:39:52 +0200 Subject: [PATCH 27/84] Fix add dialog on dashboards on mobile (#26807) --- src/panels/lovelace/hui-root.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 1813177fea..6dfe169cd5 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -355,7 +355,10 @@ class HUIRoot extends LitElement { overflowItems.forEach((i) => { const title = [this.hass!.localize(i.key), i.suffix].join(" "); const action = i.subItems - ? () => { + ? (e) => { + if (!shouldHandleRequestSelectedEvent(e)) { + return; + } showListItemsDialog(this, { title: title, items: i.subItems!.map((si) => ({ From 8d6295e8e88c02a2e7a12697700a1294582c1077 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 14:39:03 +0200 Subject: [PATCH 28/84] Update heading subtitle height to better fix grid (#26808) --- src/panels/lovelace/cards/hui-heading-card.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts index 4f6c62f243..29db2c7e57 100644 --- a/src/panels/lovelace/cards/hui-heading-card.ts +++ b/src/panels/lovelace/cards/hui-heading-card.ts @@ -138,6 +138,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { flex-direction: column; justify-content: flex-end; height: 100%; + min-height: 24px; } [role="button"] { cursor: pointer; @@ -147,7 +148,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { transition: transform 180ms ease-in-out; } .container { - padding: 2px 4px; + padding: 0 4px; display: flex; flex-direction: row; justify-content: space-between; From 61e27cb1ea3d09ddf62cc8bcdc2222a862e12ca4 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 17:21:36 +0200 Subject: [PATCH 29/84] Fix automation sidebar z index (#26810) --- src/panels/config/automation/ha-automation-sidebar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts index 3c184c2372..5777c0c051 100644 --- a/src/panels/config/automation/ha-automation-sidebar.ts +++ b/src/panels/config/automation/ha-automation-sidebar.ts @@ -208,6 +208,7 @@ export default class HaAutomationSidebar extends LitElement { static styles = css` :host { + z-index: 6; outline: none; height: 100%; --ha-card-border-radius: var( From cd294ba61938fb4e9c38f19b9fa0e2ac260818e4 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 18:12:34 +0200 Subject: [PATCH 30/84] Force energy distribution to display the data of today (#26811) --- src/panels/lovelace/strategies/home/home-main-view-strategy.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts index 5e53923e66..92b6e87838 100644 --- a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts @@ -207,6 +207,7 @@ export class HomeMainViewStrategy extends ReactiveElement { "ui.panel.lovelace.cards.energy.energy_distribution.title_today" ), type: "energy-distribution", + collection_key: "energy_home_dashboard", link_dashboard: true, }); } From 9845f0b47cf94bedfe3fe877ff54663d82cfdaec Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 18:12:08 +0200 Subject: [PATCH 31/84] Don't use ha-automation-row-selected to know if the item was selected (#26812) --- src/components/ha-sortable.ts | 13 ++----------- .../automation/action/ha-automation-action.ts | 15 ++------------- .../condition/ha-automation-condition.ts | 15 ++------------- .../automation/option/ha-automation-option.ts | 15 ++------------- .../automation/trigger/ha-automation-trigger.ts | 15 ++------------- 5 files changed, 10 insertions(+), 63 deletions(-) diff --git a/src/components/ha-sortable.ts b/src/components/ha-sortable.ts index 64fd388724..c7219e7cbe 100644 --- a/src/components/ha-sortable.ts +++ b/src/components/ha-sortable.ts @@ -15,21 +15,16 @@ declare global { "item-added": { index: number; data: any; + item: any; }; "item-removed": { index: number; }; "drag-start": undefined; "drag-end": undefined; - "item-cloned": HaSortableClonedEventData; } } -export interface HaSortableClonedEventData { - item: any; - clone: any; -} - export type HaSortableOptions = Omit< SortableInstance.SortableOptions, "onStart" | "onChoose" | "onEnd" | "onUpdate" | "onAdd" | "onRemove" @@ -154,7 +149,6 @@ export class HaSortable extends LitElement { onUpdate: this._handleUpdate, onAdd: this._handleAdd, onRemove: this._handleRemove, - onClone: this._handleClone, }; if (this.draggableSelector) { @@ -187,6 +181,7 @@ export class HaSortable extends LitElement { fireEvent(this, "item-added", { index: evt.newIndex, data: evt.item.sortableData, + item: evt.item, }); }; @@ -194,10 +189,6 @@ export class HaSortable extends LitElement { fireEvent(this, "item-removed", { index: evt.oldIndex }); }; - private _handleClone = (evt) => { - fireEvent(this, "item-cloned", evt); - }; - private _handleEnd = async (evt) => { fireEvent(this, "drag-end"); // put back in original location diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index f23cfaf414..f0e9d57c3d 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -9,7 +9,6 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-sortable"; -import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import { ACTION_BUILDING_BLOCKS, @@ -76,7 +75,6 @@ export default class HaAutomationAction extends LitElement { @item-moved=${this._actionMoved} @item-added=${this._actionAdded} @item-removed=${this._actionRemoved} - @item-cloned=${this._actionCloned} >
${repeat( @@ -301,11 +299,8 @@ export default class HaAutomationAction extends LitElement { private async _actionAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; - let selected = false; - if (data?.["ha-automation-row-selected"]) { - selected = true; - delete data["ha-automation-row-selected"]; - } + const item = ev.detail.item as HaAutomationActionRow; + const selected = item.isSelected(); let actions = [ ...this.actions.slice(0, index), @@ -363,12 +358,6 @@ export default class HaAutomationAction extends LitElement { fireEvent(this, "value-changed", { value: actions }); } - private _actionCloned(ev: CustomEvent) { - if (ev.detail.item.action && ev.detail.item.isSelected()) { - ev.detail.item.action["ha-automation-row-selected"] = true; - } - } - private _duplicateAction(ev: CustomEvent) { ev.stopPropagation(); const index = (ev.target as any).index; diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 98e1df7a0f..5a60c5b70b 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -10,7 +10,6 @@ import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-sortable"; -import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import type { AutomationClipboard, @@ -153,7 +152,6 @@ export default class HaAutomationCondition extends LitElement { @item-moved=${this._conditionMoved} @item-added=${this._conditionAdded} @item-removed=${this._conditionRemoved} - @item-cloned=${this._conditionCloned} >
${repeat( @@ -319,11 +317,8 @@ export default class HaAutomationCondition extends LitElement { private async _conditionAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; - let selected = false; - if (data?.["ha-automation-row-selected"]) { - selected = true; - delete data["ha-automation-row-selected"]; - } + const item = ev.detail.item as HaAutomationConditionRow; + const selected = item.isSelected(); let conditions = [ ...this.conditions.slice(0, index), data, @@ -361,12 +356,6 @@ export default class HaAutomationCondition extends LitElement { fireEvent(this, "value-changed", { value: conditions }); } - private _conditionCloned(ev: CustomEvent) { - if (ev.detail.item.isSelected()) { - ev.detail.item.condition["ha-automation-row-selected"] = true; - } - } - private _conditionChanged(ev: CustomEvent) { ev.stopPropagation(); const conditions = [...this.conditions]; diff --git a/src/panels/config/automation/option/ha-automation-option.ts b/src/panels/config/automation/option/ha-automation-option.ts index 31a1a7a5e6..9f72fecc03 100644 --- a/src/panels/config/automation/option/ha-automation-option.ts +++ b/src/panels/config/automation/option/ha-automation-option.ts @@ -9,7 +9,6 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-sortable"; -import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import type { AutomationClipboard } from "../../../../data/automation"; import type { Option } from "../../../../data/script"; @@ -65,7 +64,6 @@ export default class HaAutomationOption extends LitElement { @item-moved=${this._optionMoved} @item-added=${this._optionAdded} @item-removed=${this._optionRemoved} - @item-cloned=${this._optionCloned} >
${repeat( @@ -241,11 +239,8 @@ export default class HaAutomationOption extends LitElement { private async _optionAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; - let selected = false; - if (data?.["ha-automation-row-selected"]) { - selected = true; - delete data["ha-automation-row-selected"]; - } + const item = ev.detail.item as HaAutomationOptionRow; + const selected = item.isSelected(); const options = [ ...this.options.slice(0, index), @@ -273,12 +268,6 @@ export default class HaAutomationOption extends LitElement { fireEvent(this, "value-changed", { value: options }); } - private _optionCloned(ev: CustomEvent) { - if (ev.detail.item.isSelected()) { - ev.detail.item.option["ha-automation-row-selected"] = true; - } - } - private _optionChanged(ev: CustomEvent) { ev.stopPropagation(); const options = [...this.options]; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index bcc3e7ff5d..f4e2548876 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -10,7 +10,6 @@ import { nextRender } from "../../../../common/util/render-status"; import "../../../../components/ha-button"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-sortable"; -import type { HaSortableClonedEventData } from "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import type { AutomationClipboard, @@ -72,7 +71,6 @@ export default class HaAutomationTrigger extends LitElement { @item-moved=${this._triggerMoved} @item-added=${this._triggerAdded} @item-removed=${this._triggerRemoved} - @item-cloned=${this._triggerCloned} >
${repeat( @@ -260,11 +258,8 @@ export default class HaAutomationTrigger extends LitElement { private async _triggerAdded(ev: CustomEvent): Promise { ev.stopPropagation(); const { index, data } = ev.detail; - let selected = false; - if (data?.["ha-automation-row-selected"]) { - selected = true; - delete data["ha-automation-row-selected"]; - } + const item = ev.detail.item as HaAutomationTriggerRow; + const selected = item.isSelected(); let triggers = [ ...this.triggers.slice(0, index), @@ -303,12 +298,6 @@ export default class HaAutomationTrigger extends LitElement { fireEvent(this, "value-changed", { value: triggers }); } - private _triggerCloned(ev: CustomEvent) { - if (ev.detail.item.isSelected()) { - ev.detail.item.trigger["ha-automation-row-selected"] = true; - } - } - private _triggerChanged(ev: CustomEvent) { ev.stopPropagation(); const triggers = [...this.triggers]; From ec80f6a6f12620a02b187b549b1df7e528e4b99f Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 18:08:59 +0200 Subject: [PATCH 32/84] Add automation testing logic to sidebar (#26815) --- .../ha-automation-sidebar-condition.ts | 130 +++++++++++++++++- 1 file changed, 126 insertions(+), 4 deletions(-) diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts index 2e343d0c69..18f4f251dd 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -9,14 +9,20 @@ import { mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; -import { html, LitElement } from "lit"; +import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; -import type { ConditionSidebarConfig } from "../../../../data/automation"; +import { + testCondition, + type ConditionSidebarConfig, +} from "../../../../data/automation"; import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition"; +import { validateConfig } from "../../../../data/config"; import type { HomeAssistant } from "../../../../types"; +import { showAlertDialog } from "../../../lovelace/custom-card-helpers"; import "../condition/ha-automation-condition-editor"; import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor"; import { sidebarEditorStyles } from "../styles"; @@ -40,6 +46,10 @@ export default class HaAutomationSidebarCondition extends LitElement { @state() private _warnings?: string[]; + @state() private _testing = false; + + @state() private _testingResult?: boolean; + @query(".sidebar-editor") public editor?: HaAutomationConditionEditor; @@ -88,7 +98,7 @@ export default class HaAutomationSidebarCondition extends LitElement { > ${title} ${subtitle} - + ${this.hass.localize( "ui.panel.config.automation.editor.conditions.test" )} @@ -191,9 +201,81 @@ export default class HaAutomationSidebarCondition extends LitElement { sidebar >` )} +
+ ${this._testingResult + ? this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_pass" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_error" + )} +
`; } + private _testCondition = async () => { + if (this._testing) { + return; + } + this._testingResult = undefined; + this._testing = true; + const condition = this.config.config; + + try { + const validateResult = await validateConfig(this.hass, { + conditions: condition, + }); + + // Abort if condition changed. + if (this.config.config !== condition) { + this._testing = false; + return; + } + + if (!validateResult.conditions.valid) { + showAlertDialog(this, { + title: this.hass.localize( + "ui.panel.config.automation.editor.conditions.invalid_condition" + ), + text: validateResult.conditions.error, + }); + this._testing = false; + return; + } + + let result: { result: boolean }; + try { + result = await testCondition(this.hass, condition); + } catch (err: any) { + if (this.config.config !== condition) { + this._testing = false; + return; + } + + showAlertDialog(this, { + title: this.hass.localize( + "ui.panel.config.automation.editor.conditions.test_failed" + ), + text: err.message, + }); + this._testing = false; + return; + } + + this._testingResult = result.result; + } finally { + setTimeout(() => { + this._testing = false; + }, 2500); + } + }; + private _handleUiModeNotAvailable(ev: CustomEvent) { this._warnings = handleStructError(this.hass, ev.detail).warnings; if (!this.yamlMode) { @@ -226,7 +308,47 @@ export default class HaAutomationSidebarCondition extends LitElement { fireEvent(this, "toggle-yaml-mode"); }; - static styles = sidebarEditorStyles; + static styles = [ + sidebarEditorStyles, + css` + ha-automation-sidebar-card { + position: relative; + } + .testing { + position: absolute; + z-index: 6; + top: 0px; + right: 0px; + left: 0px; + text-transform: uppercase; + font-size: var(--ha-font-size-m); + font-weight: var(--ha-font-weight-bold); + background-color: var(--divider-color, #e0e0e0); + color: var(--text-primary-color); + max-height: 0px; + overflow: hidden; + transition: max-height 0.3s; + text-align: center; + border-top-right-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + border-top-left-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + } + .testing.active { + max-height: 100px; + } + .testing.error { + background-color: var(--accent-color); + } + .testing.pass { + background-color: var(--success-color); + } + `, + ]; } declare global { From ee5aabdddf2b0f10354c4feef32290bb3912259d Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 17:19:09 +0200 Subject: [PATCH 33/84] Remove box shadow for ha card in automation bottom sheet on mobile (#26817) --- .../config/automation/sidebar/ha-automation-sidebar-card.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts index f449e121eb..bac43f2660 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts @@ -125,6 +125,7 @@ export default class HaAutomationSidebarCard extends LitElement { @media all and (max-width: 870px) { ha-card.mobile { border: none; + box-shadow: none; } ha-card.mobile { border-bottom-right-radius: var(--ha-border-radius-square); From beee09491a501183cf56edb6e80326b015ca4825 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 1 Sep 2025 17:18:18 +0200 Subject: [PATCH 34/84] Fix tag trigger when using it inside sidebar (#26819) --- .../automation/trigger/types/ha-automation-trigger-tag.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts index a0d7fcfa9b..224b9903d1 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts @@ -42,6 +42,8 @@ export class HaTagTrigger extends LitElement implements TriggerElement { .disabled=${this.disabled || this._tags.length === 0} .value=${this.trigger.tag_id} @selected=${this._tagChanged} + fixedMenuPosition + naturalMenuWidth > ${this._tags.map( (tag) => html` From 5d76a92f732b4b3727d502bedd83c2f4ad1ed907 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 1 Sep 2025 17:40:03 +0200 Subject: [PATCH 35/84] Update hover and hightlight states for automation rows (#26820) --- src/components/ha-automation-row.ts | 11 +++++++++++ .../automation/action/ha-automation-action-row.ts | 3 +++ .../config/automation/action/ha-automation-action.ts | 2 +- .../condition/ha-automation-condition-row.ts | 3 +++ .../automation/condition/ha-automation-condition.ts | 2 +- src/panels/config/automation/styles.ts | 6 ------ .../automation/trigger/ha-automation-trigger-row.ts | 3 +++ .../automation/trigger/ha-automation-trigger.ts | 2 +- src/panels/config/script/ha-script-field-row.ts | 11 ++++------- src/panels/config/script/ha-script-fields.ts | 2 +- 10 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index 6a0858682c..27e5b8c617 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -25,6 +25,8 @@ export class HaAutomationRow extends LitElement { @property({ type: Boolean, reflect: true, attribute: "building-block" }) public buildingBlock = false; + @property({ type: Boolean, reflect: true }) public highlight?: boolean; + @query(".row") private _rowElement?: HTMLDivElement; @@ -172,6 +174,15 @@ export class HaAutomationRow extends LitElement { 0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8), inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4); } + .row:hover { + background-color: rgba(var(--rgb-primary-text-color), 0.04); + } + :host([highlight]) .row { + background-color: rgba(var(--rgb-primary-color), 0.08); + } + :host([highlight]) .row:hover { + background-color: rgba(var(--rgb-primary-color), 0.16); + } `; } diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index b8cffcc161..aae09ac05a 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -151,6 +151,8 @@ export default class HaAutomationActionRow extends LitElement { @property({ type: Boolean }) public last?: boolean; + @property({ type: Boolean }) public highlight?: boolean; + @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar = false; @@ -447,6 +449,7 @@ export default class HaAutomationActionRow extends LitElement { ))} .collapsed=${this._collapsed} .selected=${this._selected} + .highlight=${this.highlight} @toggle-collapsed=${this._toggleCollapse} .buildingBlock=${[ ...ACTION_BUILDING_BLOCKS, diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index f0e9d57c3d..94638dacda 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -95,7 +95,7 @@ export default class HaAutomationAction extends LitElement { @move-up=${this._moveUp} @value-changed=${this._actionChanged} .hass=${this.hass} - ?highlight=${this.highlightedActions?.includes(action)} + .highlight=${this.highlightedActions?.includes(action)} .optionsInSidebar=${this.optionsInSidebar} .sortSelected=${this._rowSortSelected === idx} @stop-sort-selection=${this._stopSortSelection} diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index d025377af5..034ebc4f98 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -116,6 +116,8 @@ export default class HaAutomationConditionRow extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ type: Boolean }) public highlight?: boolean; + @property({ type: Boolean, attribute: "sort-selected" }) public sortSelected = false; @@ -355,6 +357,7 @@ export default class HaAutomationConditionRow extends LitElement { )} .collapsed=${this._collapsed} .selected=${this._selected} + .highlight=${this.highlight} @click=${this._toggleSidebar} @toggle-collapsed=${this._toggleCollapse} .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes( diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 5a60c5b70b..4224ca85ef 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -173,7 +173,7 @@ export default class HaAutomationCondition extends LitElement { @move-up=${this._moveUp} @value-changed=${this._conditionChanged} .hass=${this.hass} - ?highlight=${this.highlightedConditions?.includes(cond)} + .highlight=${this.highlightedConditions?.includes(cond)} .optionsInSidebar=${this.optionsInSidebar} .sortSelected=${this._rowSortSelected === idx} @stop-sort-selection=${this._stopSortSelection} diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 6779fc178d..9eda945c88 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -37,12 +37,6 @@ export const rowStyles = css` ha-tooltip { cursor: default; } - :host([highlight]) ha-card { - --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); - --shadow-focus: 0 0 0 1px var(--state-inactive-color); - border-color: var(--state-inactive-color); - box-shadow: var(--shadow-default), var(--shadow-focus); - } .hidden { display: none; } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 2117e29c09..fc9082c405 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -113,6 +113,8 @@ export default class HaAutomationTriggerRow extends LitElement { @property({ type: Boolean }) public last?: boolean; + @property({ type: Boolean }) public highlight?: boolean; + @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar = false; @@ -349,6 +351,7 @@ export default class HaAutomationTriggerRow extends LitElement { this.trigger.enabled === false} @click=${this._toggleSidebar} .selected=${this._selected} + .highlight=${this.highlight} .sortSelected=${this.sortSelected} >${this._selected ? "selected" diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index f4e2548876..64fcce2cb0 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -90,7 +90,7 @@ export default class HaAutomationTrigger extends LitElement { .hass=${this.hass} .disabled=${this.disabled} .narrow=${this.narrow} - ?highlight=${this.highlightedTriggers?.includes(trg)} + .highlight=${this.highlightedTriggers?.includes(trg)} .optionsInSidebar=${this.optionsInSidebar} .sortSelected=${this._rowSortSelected === idx} @stop-sort-selection=${this._stopSortSelection} diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 58eff00d2b..4173ad5098 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -32,6 +32,8 @@ export default class HaScriptFieldRow extends LitElement { @property({ type: Boolean }) public narrow = false; + @property({ type: Boolean }) public highlight?: boolean; + @state() private _yamlMode = false; @state() private _selected = false; @@ -61,6 +63,7 @@ export default class HaScriptFieldRow extends LitElement { left-chevron @toggle-collapsed=${this._toggleCollapse} .collapsed=${this._collapsed} + .highlight=${this.highlight} >

${this.key}

@@ -83,6 +86,7 @@ export default class HaScriptFieldRow extends LitElement { .leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes( Object.keys(this.field.selector)[0] )} + .highlight=${this.highlight} >

${this.hass.localize( @@ -331,13 +335,6 @@ export default class HaScriptFieldRow extends LitElement { li[role="separator"] { border-bottom-color: var(--divider-color); } - :host([highlight]) ha-card { - --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); - --shadow-focus: 0 0 0 1px var(--state-inactive-color); - border-color: var(--state-inactive-color); - box-shadow: var(--shadow-default), var(--shadow-focus); - } - .selector-row { padding: 12px 0 16px 16px; } diff --git a/src/panels/config/script/ha-script-fields.ts b/src/panels/config/script/ha-script-fields.ts index 3ace088fa6..fd1ffa1982 100644 --- a/src/panels/config/script/ha-script-fields.ts +++ b/src/panels/config/script/ha-script-fields.ts @@ -43,7 +43,7 @@ export default class HaScriptFields extends LitElement { .disabled=${this.disabled} @value-changed=${this._fieldChanged} .hass=${this.hass} - ?highlight=${this.highlightedFields?.[key] !== undefined} + .highlight=${this.highlightedFields?.[key] !== undefined} .narrow=${this.narrow} > From b4ad411e6f6a65d748a2931a8bdc0fcf421a9395 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 1 Sep 2025 20:26:25 +0200 Subject: [PATCH 36/84] Change drag selected styling (#26822) --- src/components/ha-automation-row.ts | 8 +++++--- src/components/ha-items-display-editor.ts | 9 ++++++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index 27e5b8c617..d827e6e9aa 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -170,9 +170,11 @@ export class HaAutomationRow extends LitElement { margin: 0 12px; } :host([sort-selected]) .row { - box-shadow: - 0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8), - inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4); + outline: solid; + outline-color: rgba(var(--rgb-accent-color), 0.6); + outline-offset: -2px; + outline-width: 2px; + background-color: rgba(var(--rgb-accent-color), 0.08); } .row:hover { background-color: rgba(var(--rgb-primary-text-color), 0.04); diff --git a/src/components/ha-items-display-editor.ts b/src/components/ha-items-display-editor.ts index c08709249f..39c263a47c 100644 --- a/src/components/ha-items-display-editor.ts +++ b/src/components/ha-items-display-editor.ts @@ -393,10 +393,13 @@ export class HaItemDisplayEditor extends LitElement { --md-list-item-one-line-container-height: 48px; } ha-md-list-item.drag-selected { - box-shadow: - 0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8), - inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4); + --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6); border-radius: 8px; + outline: solid; + outline-color: rgba(var(--rgb-accent-color), 0.6); + outline-offset: -2px; + outline-width: 2px; + background-color: rgba(var(--rgb-accent-color), 0.08); } ha-md-list-item ha-icon-button { margin-left: -12px; From 1fb2f0c989a9420b997487e64c63a30476d4a296 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Mon, 1 Sep 2025 21:41:50 +0200 Subject: [PATCH 37/84] Automation-keybindings (#26762) Co-authored-by: Norbert Rittel Co-authored-by: Bram Kragten --- src/components/ha-automation-row.ts | 23 ++++ src/dialogs/generic/dialog-box.ts | 37 +++-- src/mixins/keyboard-shortcut-mixin.ts | 30 +++- .../action/ha-automation-action-row.ts | 42 ++++-- .../automation/action/ha-automation-action.ts | 2 +- .../add-automation-element-dialog.ts | 113 ++++++++++++++-- .../condition/ha-automation-condition-row.ts | 43 ++++-- .../condition/ha-automation-condition.ts | 2 +- .../config/automation/ha-automation-editor.ts | 19 ++- .../automation/manual-automation-editor.ts | 57 ++++++-- .../option/ha-automation-option-row.ts | 15 +- .../automation/option/ha-automation-option.ts | 2 +- .../sidebar/ha-automation-sidebar-action.ts | 124 ++++++++++++++--- .../ha-automation-sidebar-condition.ts | 128 ++++++++++++++---- .../sidebar/ha-automation-sidebar-option.ts | 58 ++++++-- ...utomation-sidebar-script-field-selector.ts | 42 ++++-- .../ha-automation-sidebar-script-field.ts | 42 ++++-- .../sidebar/ha-automation-sidebar-trigger.ts | 121 +++++++++++++---- src/panels/config/automation/styles.ts | 30 ++++ .../trigger/ha-automation-trigger-row.ts | 32 ++++- .../trigger/ha-automation-trigger.ts | 2 +- src/panels/config/script/ha-script-editor.ts | 19 ++- .../config/script/ha-script-field-row.ts | 1 + .../config/script/manual-script-editor.ts | 52 +++++-- src/translations/en.json | 9 ++ 25 files changed, 857 insertions(+), 188 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index d827e6e9aa..77333eeace 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -81,6 +81,10 @@ export class HaAutomationRow extends LitElement { !( (this.sortSelected || ev.altKey) && (ev.key === "ArrowUp" || ev.key === "ArrowDown") + ) && + !( + (ev.ctrlKey || ev.metaKey) && + (ev.key === "c" || ev.key === "x" || ev.key === "Delete") ) ) { return; @@ -101,6 +105,22 @@ export class HaAutomationRow extends LitElement { return; } + if (ev.ctrlKey || ev.metaKey) { + if (ev.key === "c") { + fireEvent(this, "copy-row"); + return; + } + if (ev.key === "x") { + fireEvent(this, "cut-row"); + return; + } + + if (ev.key === "Delete") { + fireEvent(this, "delete-row"); + return; + } + } + this.click(); } @@ -196,5 +216,8 @@ declare global { interface HASSDomEvents { "toggle-collapsed": undefined; "stop-sort-selection": undefined; + "copy-row": undefined; + "cut-row": undefined; + "delete-row": undefined; } } diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index f030ec90ee..fa00af4ae3 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -3,11 +3,11 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { fireEvent } from "../../common/dom/fire_event"; +import "../../components/ha-button"; +import "../../components/ha-dialog-header"; import "../../components/ha-md-dialog"; import type { HaMdDialog } from "../../components/ha-md-dialog"; -import "../../components/ha-dialog-header"; import "../../components/ha-svg-icon"; -import "../../components/ha-button"; import "../../components/ha-textfield"; import type { HaTextField } from "../../components/ha-textfield"; import type { HomeAssistant } from "../../types"; @@ -52,7 +52,7 @@ class DialogBox extends LitElement { return nothing; } - const confirmPrompt = this._params.confirmation || this._params.prompt; + const confirmPrompt = this._params.confirmation || !!this._params.prompt; const dialogTitle = this._params.title || @@ -62,7 +62,7 @@ class DialogBox extends LitElement { return html`
- ${confirmPrompt && - html` - - ${this._params.dismissText - ? this._params.dismissText - : this.hass.localize("ui.common.cancel")} - - `} + ${confirmPrompt + ? html` + + ${this._params.dismissText + ? this._params.dismissText + : this.hass.localize("ui.common.cancel")} + + ` + : nothing} ${this._params.confirmText diff --git a/src/mixins/keyboard-shortcut-mixin.ts b/src/mixins/keyboard-shortcut-mixin.ts index 6b89a443aa..71e0141bd6 100644 --- a/src/mixins/keyboard-shortcut-mixin.ts +++ b/src/mixins/keyboard-shortcut-mixin.ts @@ -14,20 +14,46 @@ export const KeyboardShortcutMixin = >( if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) { event.preventDefault(); supportedShortcuts[event.key](); + return; + } + + const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts(); + if (event.key in supportedSingleKeyShortcuts) { + event.preventDefault(); + supportedSingleKeyShortcuts[event.key](); } }; + private _listenersAdded = false; + public connectedCallback() { super.connectedCallback(); - window.addEventListener("keydown", this._keydownEvent); + this.addKeyboardShortcuts(); } public disconnectedCallback() { - window.removeEventListener("keydown", this._keydownEvent); + this.removeKeyboardShortcuts(); super.disconnectedCallback(); } + public addKeyboardShortcuts() { + if (this._listenersAdded) { + return; + } + this._listenersAdded = true; + window.addEventListener("keydown", this._keydownEvent); + } + + public removeKeyboardShortcuts() { + this._listenersAdded = false; + window.removeEventListener("keydown", this._keydownEvent); + } + protected supportedShortcuts(): SupportedShortcuts { return {}; } + + protected supportedSingleKeyShortcuts(): SupportedShortcuts { + return {}; + } }; diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index aae09ac05a..36f474be92 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -5,12 +5,12 @@ import { mdiArrowUp, mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiDotsVertical, mdiPlay, mdiPlayCircleOutline, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; @@ -89,6 +89,7 @@ import "./types/ha-automation-action-set_conversation_response"; import "./types/ha-automation-action-stop"; import "./types/ha-automation-action-wait_for_trigger"; import "./types/ha-automation-action-wait_template"; +import { copyToClipboard } from "../../../../common/util/copy-clipboard"; export const getAutomationActionType = memoizeOne( (action: Action | undefined) => { @@ -195,6 +196,10 @@ export default class HaAutomationActionRow extends LitElement { @query("ha-automation-row") private _automationRowElement?: HaAutomationRow; + get selected() { + return this._selected; + } + protected firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); @@ -305,7 +310,7 @@ export default class HaAutomationActionRow extends LitElement { )} @@ -438,7 +443,6 @@ export default class HaAutomationActionRow extends LitElement { ${this.optionsInSidebar ? html`${this._renderRow()}` : html` @@ -500,6 +508,7 @@ export default class HaAutomationActionRow extends LitElement { ...this._clipboard, action: deepClone(this.action), }; + copyToClipboard(JSON.stringify(this.action)); } private _onDisable = () => { @@ -514,6 +523,15 @@ export default class HaAutomationActionRow extends LitElement { }; private _runAction = async () => { + requestAnimationFrame(() => { + // @ts-ignore is supported in all browsers except firefox + if (this.scrollIntoViewIfNeeded) { + // @ts-ignore is supported in all browsers except firefox + this.scrollIntoViewIfNeeded(); + return; + } + this.scrollIntoView(); + }); const validated = await validateConfig(this.hass, { actions: this.action, }); @@ -623,6 +641,12 @@ export default class HaAutomationActionRow extends LitElement { private _copyAction = () => { this._setClipboard(); + showToast(this, { + message: this.hass.localize( + "ui.panel.config.automation.editor.actions.copied_to_clipboard" + ), + duration: 2000, + }); }; private _cutAction = () => { @@ -631,6 +655,12 @@ export default class HaAutomationActionRow extends LitElement { if (this._selected) { fireEvent(this, "close-sidebar"); } + showToast(this, { + message: this.hass.localize( + "ui.panel.config.automation.editor.actions.cut_to_clipboard" + ), + duration: 2000, + }); }; private _moveUp = () => { @@ -761,10 +791,6 @@ export default class HaAutomationActionRow extends LitElement { this._collapsed = !this._collapsed; } - public isSelected() { - return this._selected; - } - public focus() { this._automationRowElement?.focus(); } diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 94638dacda..333aad7df2 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -300,7 +300,7 @@ export default class HaAutomationAction extends LitElement { ev.stopPropagation(); const { index, data } = ev.detail; const item = ev.detail.item as HaAutomationActionRow; - const selected = item.isSelected(); + const selected = item.selected; let actions = [ ...this.actions.slice(0, index), diff --git a/src/panels/config/automation/add-automation-element-dialog.ts b/src/panels/config/automation/add-automation-element-dialog.ts index 222778872a..ad52ade755 100644 --- a/src/panels/config/automation/add-automation-element-dialog.ts +++ b/src/panels/config/automation/add-automation-element-dialog.ts @@ -1,4 +1,9 @@ -import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js"; +import { + mdiAppleKeyboardCommand, + mdiClose, + mdiContentPaste, + mdiPlus, +} from "@mdi/js"; import Fuse from "fuse.js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -41,11 +46,14 @@ import { } from "../../../data/integration"; import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger"; import type { HassDialog } from "../../../dialogs/make-dialog-manager"; +import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin"; +import { HaFuse } from "../../../resources/fuse"; import { haStyle, haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; +import { isMac } from "../../../util/is_mac"; +import { showToast } from "../../../util/toast"; import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog"; import { PASTE_VALUE } from "./show-add-automation-element-dialog"; -import { HaFuse } from "../../../resources/fuse"; const TYPES = { trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS }, @@ -85,7 +93,10 @@ const ENTITY_DOMAINS_OTHER = new Set([ const ENTITY_DOMAINS_MAIN = new Set(["notify"]); @customElement("add-automation-element-dialog") -class DialogAddAutomationElement extends LitElement implements HassDialog { +class DialogAddAutomationElement + extends KeyboardShortcutMixin(LitElement) + implements HassDialog +{ @property({ attribute: false }) public hass!: HomeAssistant; @state() private _params?: AddAutomationElementDialogParams; @@ -108,9 +119,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog { @state() private _height?: number; + @state() private _narrow = false; + public showDialog(params): void { this._params = params; this._group = params.group; + + this.addKeyboardShortcuts(); + if (this._params?.type === "action") { this.hass.loadBackendTranslation("services"); this._fetchManifests(); @@ -120,9 +136,12 @@ class DialogAddAutomationElement extends LitElement implements HassDialog { this._fullScreen = matchMedia( "all and (max-width: 450px), all and (max-height: 500px)" ).matches; + + this._narrow = matchMedia("(max-width: 870px)").matches; } public closeDialog() { + this.removeKeyboardShortcuts(); if (this._params) { fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -555,15 +574,37 @@ class DialogAddAutomationElement extends LitElement implements HassDialog { .value=${PASTE_VALUE} @click=${this._selected} > - ${this.hass.localize( - `ui.panel.config.automation.editor.${this._params.type}s.paste` - )} - ${this.hass.localize( - // @ts-ignore - `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label` - )} +
+
+
+ ${this.hass.localize( + `ui.panel.config.automation.editor.${this._params.type}s.paste` + )} +
+
+ ${this.hass.localize( + // @ts-ignore + `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label` + )} +
+
+ ${!this._narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + V + ` + : nothing} +
` - : ""} + : nothing} ${repeat( items, (item) => item.key, @@ -637,6 +678,30 @@ class DialogAddAutomationElement extends LitElement implements HassDialog { this._filter = ev.detail.value; } + private _addClipboard = () => { + if (this._params?.clipboardItem) { + this._params!.add(PASTE_VALUE); + showToast(this, { + message: this.hass.localize( + "ui.panel.config.automation.editor.item_pasted", + { + item: this.hass.localize( + // @ts-ignore + `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label` + ), + } + ), + }); + this.closeDialog(); + } + }; + + protected supportedShortcuts(): SupportedShortcuts { + return { + v: () => this._addClipboard(), + }; + } + static get styles(): CSSResultGroup { return [ haStyle, @@ -660,6 +725,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog { max-width: 100vw; --md-list-item-leading-space: 24px; --md-list-item-trailing-space: 24px; + --md-list-item-supporting-text-font: var(--ha-font-size-s); } ha-md-list-item img { width: 24px; @@ -668,6 +734,27 @@ class DialogAddAutomationElement extends LitElement implements HassDialog { display: block; margin: 0 16px; } + .shortcut-label { + display: flex; + gap: 12px; + justify-content: space-between; + } + .shortcut-label .supporting-text { + color: var(--secondary-text-color); + font-size: var(--ha-font-size-s); + } + .shortcut-label .shortcut { + --mdc-icon-size: 12px; + display: inline-flex; + flex-direction: row; + align-items: center; + gap: 2px; + } + .shortcut-label .shortcut span { + font-size: var(--ha-font-size-s); + font-family: var(--ha-font-family-code); + color: var(--ha-color-text-secondary); + } `, ]; } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 034ebc4f98..906180d9c1 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -4,12 +4,12 @@ import { mdiArrowUp, mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiDotsVertical, mdiFlask, mdiPlayCircleOutline, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; @@ -53,6 +53,7 @@ import { showPromptDialog, } from "../../../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../../../types"; +import { showToast } from "../../../../util/toast"; import "../ha-automation-editor-warning"; import { rowStyles } from "../styles"; import "./ha-automation-condition-editor"; @@ -68,6 +69,7 @@ import "./types/ha-automation-condition-template"; import "./types/ha-automation-condition-time"; import "./types/ha-automation-condition-trigger"; import "./types/ha-automation-condition-zone"; +import { copyToClipboard } from "../../../../common/util/copy-clipboard"; export interface ConditionElement extends LitElement { condition: Condition; @@ -154,6 +156,10 @@ export default class HaAutomationConditionRow extends LitElement { @query("ha-automation-row") private _automationRowElement?: HaAutomationRow; + get selected() { + return this._selected; + } + private _renderRow() { return html` @@ -358,12 +364,15 @@ export default class HaAutomationConditionRow extends LitElement { .collapsed=${this._collapsed} .selected=${this._selected} .highlight=${this.highlight} - @click=${this._toggleSidebar} - @toggle-collapsed=${this._toggleCollapse} .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes( this.condition.condition )} .sortSelected=${this.sortSelected} + @click=${this._toggleSidebar} + @toggle-collapsed=${this._toggleCollapse} + @copy-row=${this._copyCondition} + @cut-row=${this._cutCondition} + @delete-row=${this._onDelete} >${this._renderRow()}` : html` @@ -432,6 +441,7 @@ export default class HaAutomationConditionRow extends LitElement { ...this._clipboard, condition: deepClone(this.condition), }; + copyToClipboard(JSON.stringify(this.condition)); } private _onDisable = () => { @@ -480,6 +490,15 @@ export default class HaAutomationConditionRow extends LitElement { this._testingResult = undefined; this._testing = true; const condition = this.condition; + requestAnimationFrame(() => { + // @ts-ignore is supported in all browsers expect firefox + if (this.scrollIntoViewIfNeeded) { + // @ts-ignore is supported in all browsers expect firefox + this.scrollIntoViewIfNeeded(); + return; + } + this.scrollIntoView(); + }); try { const validateResult = await validateConfig(this.hass, { @@ -570,6 +589,12 @@ export default class HaAutomationConditionRow extends LitElement { private _copyCondition = () => { this._setClipboard(); + showToast(this, { + message: this.hass.localize( + "ui.panel.config.automation.editor.conditions.copied_to_clipboard" + ), + duration: 2000, + }); }; private _cutCondition = () => { @@ -578,6 +603,12 @@ export default class HaAutomationConditionRow extends LitElement { if (this._selected) { fireEvent(this, "close-sidebar"); } + showToast(this, { + message: this.hass.localize( + "ui.panel.config.automation.editor.conditions.cut_to_clipboard" + ), + duration: 2000, + }); }; private _moveUp = () => { @@ -697,10 +728,6 @@ export default class HaAutomationConditionRow extends LitElement { this._collapsed = !this._collapsed; } - public isSelected() { - return this._selected; - } - public focus() { this._automationRowElement?.focus(); } diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 4224ca85ef..823ba71a78 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -318,7 +318,7 @@ export default class HaAutomationCondition extends LitElement { ev.stopPropagation(); const { index, data } = ev.detail; const item = ev.detail.item as HaAutomationConditionRow; - const selected = item.isSelected(); + const selected = item.selected; let conditions = [ ...this.conditions.slice(0, index), data, diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index e047d874be..242b24c944 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1,7 +1,6 @@ import { consume } from "@lit/context"; import { mdiCog, - mdiContentDuplicate, mdiContentSave, mdiDebugStepOver, mdiDelete, @@ -11,6 +10,7 @@ import { mdiPlay, mdiPlayCircleOutline, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiRobotConfused, mdiStopCircleOutline, @@ -337,7 +337,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( )} @@ -1138,6 +1138,9 @@ export class HaAutomationEditor extends PreventUnsavedMixin( protected supportedShortcuts(): SupportedShortcuts { return { s: () => this._handleSaveAutomation(), + c: () => this._copySelectedRow(), + x: () => this._cutSelectedRow(), + Delete: () => this._deleteSelectedRow(), }; } @@ -1157,6 +1160,18 @@ export class HaAutomationEditor extends PreventUnsavedMixin( this._manualEditor?.expandAll(); } + private _copySelectedRow() { + this._manualEditor?.copySelectedRow(); + } + + private _cutSelectedRow() { + this._manualEditor?.cutSelectedRow(); + } + + private _deleteSelectedRow() { + this._manualEditor?.deleteSelectedRow(); + } + static get styles(): CSSResultGroup { return [ haStyle, diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 3fc30ecba7..93082409b7 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -3,7 +3,13 @@ import type { HassEntity } from "home-assistant-js-websocket"; import { load } from "js-yaml"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { customElement, property, query, state } from "lit/decorators"; +import { + customElement, + property, + query, + queryAll, + state, +} from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { any, @@ -28,6 +34,7 @@ import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; import "../../../components/ha-markdown"; import type { + ActionSidebarConfig, AutomationConfig, Condition, ManualAutomationConfig, @@ -96,6 +103,11 @@ export class HaManualAutomationEditor extends LitElement { @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar; + @queryAll("ha-automation-action, ha-automation-condition") + private _collapsableElements?: NodeListOf< + HaAutomationAction | HaAutomationCondition + >; + private _previousConfig?: ManualAutomationConfig; public connectedCallback() { @@ -478,7 +490,20 @@ export class HaManualAutomationEditor extends LitElement { if (normalized) { ev.preventDefault(); - if (this.dirty) { + if ( + Object.keys(normalized).length === 1 && + ensureArray(normalized[Object.keys(normalized)[0]]).length === 1 + ) { + this._appendToExistingConfig(normalized); + return; + } + + if ( + this.dirty || + ensureArray(this.config.triggers)?.length || + ensureArray(this.config.conditions)?.length || + ensureArray(this.config.actions)?.length + ) { const result = await new Promise((resolve) => { showPasteReplaceDialog(this, { domain: "automation", @@ -587,24 +612,36 @@ export class HaManualAutomationEditor extends LitElement { }); } - private _getCollapsableElements() { - return this.shadowRoot!.querySelectorAll< - HaAutomationAction | HaAutomationCondition - >("ha-automation-action, ha-automation-condition"); - } - public expandAll() { - this._getCollapsableElements().forEach((element) => { + this._collapsableElements?.forEach((element) => { element.expandAll(); }); } public collapseAll() { - this._getCollapsableElements().forEach((element) => { + this._collapsableElements?.forEach((element) => { element.collapseAll(); }); } + public copySelectedRow() { + if ((this._sidebarConfig as ActionSidebarConfig)?.copy) { + (this._sidebarConfig as ActionSidebarConfig).copy(); + } + } + + public cutSelectedRow() { + if ((this._sidebarConfig as ActionSidebarConfig)?.cut) { + (this._sidebarConfig as ActionSidebarConfig).cut(); + } + } + + public deleteSelectedRow() { + if ((this._sidebarConfig as ActionSidebarConfig)?.delete) { + (this._sidebarConfig as ActionSidebarConfig).delete(); + } + } + static get styles(): CSSResultGroup { return [ saveFabStyles, diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index cfb8df9aa2..27f4e6489c 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -2,9 +2,9 @@ import { consume } from "@lit/context"; import { mdiArrowDown, mdiArrowUp, - mdiContentDuplicate, mdiDelete, mdiDotsVertical, + mdiPlusCircleMultipleOutline, mdiRenameBox, } from "@mdi/js"; import type { CSSResultGroup } from "lit"; @@ -86,6 +86,10 @@ export default class HaAutomationOptionRow extends LitElement { @query("ha-automation-row") private _automationRowElement?: HaAutomationRow; + get selected() { + return this._selected; + } + private _expandedChanged(ev) { if (ev.currentTarget.id !== "option") { return; @@ -167,7 +171,7 @@ export default class HaAutomationOptionRow extends LitElement { )} @@ -271,9 +275,10 @@ export default class HaAutomationOptionRow extends LitElement { left-chevron .collapsed=${this._collapsed} .selected=${this._selected} + .sortSelected=${this.sortSelected} @click=${this._toggleSidebar} @toggle-collapsed=${this._toggleCollapse} - .sortSelected=${this.sortSelected} + @delete-row=${this._removeOption} >${this._renderRow()}` : html` @@ -445,10 +450,6 @@ export default class HaAutomationOptionRow extends LitElement { this._collapsed = !this._collapsed; } - public isSelected() { - return this._selected; - } - public focus() { this._automationRowElement?.focus(); } diff --git a/src/panels/config/automation/option/ha-automation-option.ts b/src/panels/config/automation/option/ha-automation-option.ts index 9f72fecc03..e728041509 100644 --- a/src/panels/config/automation/option/ha-automation-option.ts +++ b/src/panels/config/automation/option/ha-automation-option.ts @@ -240,7 +240,7 @@ export default class HaAutomationOption extends LitElement { ev.stopPropagation(); const { index, data } = ev.detail; const item = ev.detail.item as HaAutomationOptionRow; - const selected = item.isSelected(); + const selected = item.selected; const options = [ ...this.options.slice(0, index), diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts index 3d9708d571..30bcd3969e 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts @@ -1,15 +1,16 @@ import { + mdiAppleKeyboardCommand, mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiPlay, mdiPlayCircleOutline, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; -import { html, LitElement } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -21,6 +22,7 @@ import { ACTION_BUILDING_BLOCKS } from "../../../../data/action"; import type { ActionSidebarConfig } from "../../../../data/automation"; import type { RepeatAction } from "../../../../data/script"; import type { HomeAssistant } from "../../../../types"; +import { isMac } from "../../../../util/is_mac"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; import { getAutomationActionType } from "../action/ha-automation-action-row"; import { getRepeatType } from "../action/types/ha-automation-action-repeat"; @@ -103,18 +105,24 @@ export default class HaAutomationSidebarAction extends LitElement { ${subtitle} - ${this.hass.localize("ui.panel.config.automation.editor.actions.run")} +
+ ${this.hass.localize("ui.panel.config.automation.editor.actions.run")} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.rename" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.rename" + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - + +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + +
- ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.copy" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + C + ` + : nothing} +
- ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.cut" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + X + ` + : nothing} +
- ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` + )} + +
- ${this.hass.localize( - `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}` + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.del" + )} + ` + : nothing} +
${description && !this.yamlMode ? html`
${description}
` diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts index 18f4f251dd..c750417574 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -1,15 +1,16 @@ import { + mdiAppleKeyboardCommand, mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiFlask, mdiPlayCircleOutline, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; -import { css, html, LitElement } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { keyed } from "lit/directives/keyed"; @@ -22,6 +23,7 @@ import { import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition"; import { validateConfig } from "../../../../data/config"; import type { HomeAssistant } from "../../../../types"; +import { isMac } from "../../../../util/is_mac"; import { showAlertDialog } from "../../../lovelace/custom-card-helpers"; import "../condition/ha-automation-condition-editor"; import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor"; @@ -99,20 +101,26 @@ export default class HaAutomationSidebarCondition extends LitElement { ${title} ${subtitle} - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.test" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.test" + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.rename" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.rename" + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - + +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + +
- ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.copy" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + C + ` + : nothing} +
- ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.cut" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + X + ` + : nothing} +
- ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` + )} + +
- ${this.hass.localize( - `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}` + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.del" + )} + ` + : nothing} +
${description && !this.yamlMode ? html`
${description}
` diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts index 4e2e68857e..9f37a30e9f 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts @@ -1,8 +1,14 @@ -import { mdiContentDuplicate, mdiDelete, mdiRenameBox } from "@mdi/js"; -import { html, LitElement } from "lit"; +import { + mdiAppleKeyboardCommand, + mdiDelete, + mdiPlusCircleMultipleOutline, + mdiRenameBox, +} from "@mdi/js"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import type { OptionSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; +import { isMac } from "../../../../util/is_mac"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; import { sidebarEditorStyles } from "../styles"; import "./ha-automation-sidebar-card"; @@ -52,10 +58,13 @@ export default class HaAutomationSidebarOption extends LitElement { .clickAction=${this.config.rename} .disabled=${!!disabled} > - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.rename" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.rename" + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.remove_option" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.remove_option" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.del" + )} + ` + : nothing} +
`} diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts index dfdab29f12..ee0304fcfa 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts @@ -1,11 +1,12 @@ -import { mdiDelete, mdiPlaylistEdit } from "@mdi/js"; -import { html, LitElement } from "lit"; +import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import type { LocalizeKeys } from "../../../../common/translations/localize"; import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; +import { isMac } from "../../../../util/is_mac"; import "../../script/ha-script-field-selector-editor"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; import { sidebarEditorStyles } from "../styles"; @@ -68,10 +69,13 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { .clickAction=${this._toggleYamlMode} .disabled=${!!this._warnings} > - ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.del" + )} + ` + : nothing} +
${keyed( this.sidebarKey, diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts index 8729ea2d7a..ac7dbdbbe5 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts @@ -1,10 +1,11 @@ -import { mdiDelete, mdiPlaylistEdit } from "@mdi/js"; -import { html, LitElement } from "lit"; +import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; +import { isMac } from "../../../../util/is_mac"; import "../../script/ha-script-field-editor"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; import { sidebarEditorStyles } from "../styles"; @@ -61,10 +62,13 @@ export default class HaAutomationSidebarScriptField extends LitElement { .clickAction=${this._toggleYamlMode} .disabled=${!!this._warnings} > - ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.del" + )} + ` + : nothing} +
${keyed( this.sidebarKey, diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts index a727a22486..a796ba79b9 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts @@ -1,11 +1,12 @@ import { + mdiAppleKeyboardCommand, mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiIdentifier, mdiPlayCircleOutline, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; @@ -17,6 +18,7 @@ import { handleStructError } from "../../../../common/structs/handle-errors"; import type { TriggerSidebarConfig } from "../../../../data/automation"; import { isTriggerList } from "../../../../data/trigger"; import type { HomeAssistant } from "../../../../types"; +import { isMac } from "../../../../util/is_mac"; import { sidebarEditorStyles } from "../styles"; import "../trigger/ha-automation-trigger-editor"; import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor"; @@ -89,10 +91,13 @@ export default class HaAutomationSidebarTrigger extends LitElement { .clickAction=${this.config.rename} .disabled=${disabled || type === "list"} > - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.rename" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.rename" + )} + +
${!this.yamlMode && !("id" in this.config.config) && @@ -102,10 +107,13 @@ export default class HaAutomationSidebarTrigger extends LitElement { .clickAction=${this._showTriggerId} .disabled=${disabled || type === "list"} > - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.edit_id" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.edit_id" + )} + +
` : nothing} @@ -123,7 +131,10 @@ export default class HaAutomationSidebarTrigger extends LitElement { ${this.hass.localize( "ui.panel.config.automation.editor.triggers.duplicate" )} - + - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.copy" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.copy" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + C + ` + : nothing} +
- ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.cut" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.cut" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + X + ` + : nothing} +
- ${this.hass.localize( - `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` + )} + +
- ${this.hass.localize( - `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}` - )} +
+ ${this.hass.localize( + `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}` + )} + +
- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + ${!this.narrow + ? html` + ${isMac + ? html`` + : this.hass.localize( + "ui.panel.config.automation.editor.ctrl" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.del" + )} + ` + : nothing} +
${keyed( this.sidebarKey, diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 9eda945c88..03bb5fa4d2 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -218,4 +218,34 @@ export const sidebarEditorStyles = css` .description { padding-top: 16px; } + .overflow-label { + display: flex; + justify-content: space-between; + gap: 12px; + white-space: nowrap; + } + .overflow-label .shortcut { + --mdc-icon-size: 12px; + display: inline-flex; + flex-direction: row; + align-items: center; + gap: 2px; + } + .overflow-label .shortcut span { + font-size: var(--ha-font-size-s); + font-family: var(--ha-font-family-code); + color: var(--ha-color-text-secondary); + } + .shortcut-placeholder { + display: inline-block; + width: 60px; + } + .shortcut-placeholder.mac { + width: 46px; + } + @media all and (max-width: 870px) { + .shortcut-placeholder { + display: none; + } + } `; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index fc9082c405..b9e1a83df3 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -4,12 +4,12 @@ import { mdiArrowUp, mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiDotsVertical, mdiIdentifier, mdiPlayCircleOutline, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; @@ -52,6 +52,7 @@ import { showPromptDialog, } from "../../../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../../../types"; +import { showToast } from "../../../../util/toast"; import "../ha-automation-editor-warning"; import { rowStyles } from "../styles"; import "./ha-automation-trigger-editor"; @@ -74,6 +75,7 @@ import "./types/ha-automation-trigger-time"; import "./types/ha-automation-trigger-time_pattern"; import "./types/ha-automation-trigger-webhook"; import "./types/ha-automation-trigger-zone"; +import { copyToClipboard } from "../../../../common/util/copy-clipboard"; export interface TriggerElement extends LitElement { trigger: Trigger; @@ -153,6 +155,10 @@ export default class HaAutomationTriggerRow extends LitElement { @consume({ context: fullEntitiesContext, subscribe: true }) _entityReg!: EntityRegistryEntry[]; + get selected() { + return this._selected; + } + private _triggerUnsub?: Promise; private _renderRow() { @@ -221,7 +227,7 @@ export default class HaAutomationTriggerRow extends LitElement { )} @@ -349,10 +355,13 @@ export default class HaAutomationTriggerRow extends LitElement { ? html`${this._selected ? "selected" : nothing}${this._renderRow()} { @@ -634,6 +644,12 @@ export default class HaAutomationTriggerRow extends LitElement { private _copyTrigger = () => { this._setClipboard(); + showToast(this, { + message: this.hass.localize( + "ui.panel.config.automation.editor.triggers.copied_to_clipboard" + ), + duration: 2000, + }); }; private _cutTrigger = () => { @@ -642,6 +658,12 @@ export default class HaAutomationTriggerRow extends LitElement { if (this._selected) { fireEvent(this, "close-sidebar"); } + showToast(this, { + message: this.hass.localize( + "ui.panel.config.automation.editor.triggers.cut_to_clipboard" + ), + duration: 2000, + }); }; private _moveUp = () => { @@ -679,10 +701,6 @@ export default class HaAutomationTriggerRow extends LitElement { customElements.get(`ha-automation-trigger-${type}`) !== undefined ); - public isSelected() { - return this._selected; - } - public focus() { this._automationRowElement?.focus(); } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 64fcce2cb0..56a1fafd52 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -259,7 +259,7 @@ export default class HaAutomationTrigger extends LitElement { ev.stopPropagation(); const { index, data } = ev.detail; const item = ev.detail.item as HaAutomationTriggerRow; - const selected = item.isSelected(); + const selected = item.selected; let triggers = [ ...this.triggers.slice(0, index), diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 4f419cdf6b..45c28c539b 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1,7 +1,6 @@ import { consume } from "@lit/context"; import { mdiCog, - mdiContentDuplicate, mdiContentSave, mdiDebugStepOver, mdiDelete, @@ -11,6 +10,7 @@ import { mdiInformationOutline, mdiPlay, mdiPlaylistEdit, + mdiPlusCircleMultipleOutline, mdiRenameBox, mdiRobotConfused, mdiTag, @@ -308,7 +308,7 @@ export class HaScriptEditor extends SubscribeMixin( )} @@ -1047,6 +1047,9 @@ export class HaScriptEditor extends SubscribeMixin( protected supportedShortcuts(): SupportedShortcuts { return { s: () => this._handleSaveScript(), + c: () => this._copySelectedRow(), + x: () => this._cutSelectedRow(), + Delete: () => this._deleteSelectedRow(), }; } @@ -1066,6 +1069,18 @@ export class HaScriptEditor extends SubscribeMixin( this._manualEditor?.expandAll(); } + private _copySelectedRow() { + this._manualEditor?.copySelectedRow(); + } + + private _cutSelectedRow() { + this._manualEditor?.cutSelectedRow(); + } + + private _deleteSelectedRow() { + this._manualEditor?.deleteSelectedRow(); + } + static get styles(): CSSResultGroup { return [ haStyle, diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 4173ad5098..f94c243028 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -64,6 +64,7 @@ export default class HaScriptFieldRow extends LitElement { @toggle-collapsed=${this._toggleCollapse} .collapsed=${this._collapsed} .highlight=${this.highlight} + @delete-row=${this._onDelete} >

${this.key}

diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 6a513e2173..0664a27700 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -2,7 +2,13 @@ import { mdiContentSave, mdiHelpCircle } from "@mdi/js"; import { load } from "js-yaml"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { customElement, property, query, state } from "lit/decorators"; +import { + customElement, + property, + query, + queryAll, + state, +} from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { any, @@ -24,7 +30,10 @@ import { } from "../../../common/url/search-params"; import "../../../components/ha-icon-button"; import "../../../components/ha-markdown"; -import type { SidebarConfig } from "../../../data/automation"; +import type { + ActionSidebarConfig, + SidebarConfig, +} from "../../../data/automation"; import type { Action, Fields, ScriptConfig } from "../../../data/script"; import { getActionType, @@ -80,6 +89,11 @@ export class HaManualScriptEditor extends LitElement { @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar; + @queryAll("ha-automation-action, ha-script-fields") + private _collapsableElements?: NodeListOf< + HaAutomationAction | HaScriptFields + >; + private _previousConfig?: ScriptConfig; private _openFields = false; @@ -357,7 +371,11 @@ export class HaManualScriptEditor extends LitElement { if (normalized) { ev.preventDefault(); - if (this.dirty) { + if ( + this.dirty || + ensureArray(this.config.sequence)?.length || + Object.keys(this.config.fields || {}).length + ) { const result = await new Promise((resolve) => { showPasteReplaceDialog(this, { domain: "script", @@ -501,24 +519,36 @@ export class HaManualScriptEditor extends LitElement { fireEvent(this, "save-script"); } - private _getCollapsableElements() { - return this.shadowRoot!.querySelectorAll< - HaAutomationAction | HaScriptFields - >("ha-automation-action, ha-script-fields"); - } - public expandAll() { - this._getCollapsableElements().forEach((element) => { + this._collapsableElements?.forEach((element) => { element.expandAll(); }); } public collapseAll() { - this._getCollapsableElements().forEach((element) => { + this._collapsableElements?.forEach((element) => { element.collapseAll(); }); } + public copySelectedRow() { + if ((this._sidebarConfig as ActionSidebarConfig)?.copy) { + (this._sidebarConfig as ActionSidebarConfig).copy(); + } + } + + public cutSelectedRow() { + if ((this._sidebarConfig as ActionSidebarConfig)?.cut) { + (this._sidebarConfig as ActionSidebarConfig).cut(); + } + } + + public deleteSelectedRow() { + if ((this._sidebarConfig as ActionSidebarConfig)?.delete) { + (this._sidebarConfig as ActionSidebarConfig).delete(); + } + } + static get styles(): CSSResultGroup { return [ saveFabStyles, diff --git a/src/translations/en.json b/src/translations/en.json index 6fccd2fc97..3d2dca9e78 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -3856,6 +3856,9 @@ "type_script_plural": "[%key:ui::panel::config::blueprint::overview::types_plural::script%]", "new_automation_setup_failed_title": "New {type} setup failed", "new_automation_setup_failed_text": "Your new {type} has saved, but waiting for it to setup has timed out. This could be due to errors parsing your configuration.yaml, please check the configuration in developer tools. Your {type} will not be visible until this is corrected, and {types} are reloaded. Changes to area, category, or labels were not saved and must be reapplied.", + "item_pasted": "{item} pasted", + "ctrl": "Ctrl", + "del": "Del", "triggers": { "name": "Triggers", "header": "When", @@ -3882,6 +3885,8 @@ "unknown_trigger": "[%key:ui::panel::config::devices::automation::triggers::unknown_trigger%]", "triggering_event_detail": "Triggering event detail", "trigger": "Trigger", + "copied_to_clipboard": "Trigger copied to clipboard", + "cut_to_clipboard": "Trigger cut to clipboard", "groups": { "entity": { "label": "Entity", @@ -4144,6 +4149,8 @@ "type_select": "Condition type", "unknown_condition": "[%key:ui::panel::config::devices::automation::conditions::unknown_condition%]", "condition": "Condition", + "copied_to_clipboard": "Condition copied to clipboard", + "cut_to_clipboard": "Condition cut to clipboard", "groups": { "entity": { "label": "Entity", @@ -4313,6 +4320,8 @@ "type_select": "Action type", "continue_on_error": "Continue on error", "action": "Action", + "copied_to_clipboard": "Action copied to clipboard", + "cut_to_clipboard": "Action cut to clipboard", "groups": { "helpers": { "label": "Helpers" From b7a6ee37921f157ff9fa92bb2f7518f5f7afe338 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 1 Sep 2025 21:42:55 +0200 Subject: [PATCH 38/84] Bumped version to 20250901.0 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index c5b7ce6891..8f337cfa6e 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250829.0" +version = "20250901.0" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From be2f19637ee3dcedc32798fdad15703f60e94fa8 Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Tue, 2 Sep 2025 03:44:16 -0700 Subject: [PATCH 39/84] Differentate service vs device in more-info link (#26823) --- src/components/ha-related-items.ts | 5 ++++- src/dialogs/more-info/ha-more-info-dialog.ts | 14 ++++++++++++-- src/translations/en.json | 5 +++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/ha-related-items.ts b/src/components/ha-related-items.ts index 6ca49a8065..a6e9c7793a 100644 --- a/src/components/ha-related-items.ts +++ b/src/components/ha-related-items.ts @@ -3,6 +3,7 @@ import { mdiDevices, mdiPaletteSwatch, mdiTextureBox, + mdiTransitConnectionVariant, } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -266,7 +267,9 @@ export class HaRelatedItems extends LitElement { ${device.name_by_user || device.name} diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index da6a0ccb5c..9f950d2729 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -8,6 +8,7 @@ import { mdiPencil, mdiPencilOff, mdiPencilOutline, + mdiTransitConnectionVariant, } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; @@ -311,6 +312,8 @@ export class MoreInfoDialog extends LitElement { const isAdmin = this.hass.user!.is_admin; const deviceId = this._getDeviceId(); + const deviceType = + (deviceId && this.hass.devices[deviceId].entry_type) || "device"; const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView; const isSpecificInitialView = @@ -434,11 +437,18 @@ export class MoreInfoDialog extends LitElement { @request-selected=${this._goToDevice} > ${this.hass.localize( - "ui.dialogs.more_info_control.device_info" + "ui.dialogs.more_info_control.device_or_service_info", + { + type: this.hass.localize( + `ui.dialogs.more_info_control.device_type.${deviceType}` + ), + } )} ` diff --git a/src/translations/en.json b/src/translations/en.json index 3d2dca9e78..b9f825fec3 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1384,6 +1384,11 @@ "history": "History", "logbook": "Activity", "device_info": "Device info", + "device_or_service_info": "[%key:ui::panel::config::devices::device_info%]", + "device_type": { + "device": "[%key:ui::panel::config::devices::type::device_heading%]", + "service": "[%key:ui::panel::config::devices::type::service_heading%]" + }, "last_changed": "Last changed", "last_updated": "Last updated", "show_more": "Show more", From 5ac42e17b06c8e6e4545aca43b7d28900d2551f0 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 2 Sep 2025 09:39:54 +0200 Subject: [PATCH 40/84] prevent keyboard shortcuts with more modifier keys (#26826) --- src/components/ha-automation-row.ts | 4 ++++ src/mixins/keyboard-shortcut-mixin.ts | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index 77333eeace..83ee0cdff2 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -80,10 +80,14 @@ export class HaAutomationRow extends LitElement { ev.key !== " " && !( (this.sortSelected || ev.altKey) && + !(ev.ctrlKey || ev.metaKey) && + !ev.shiftKey && (ev.key === "ArrowUp" || ev.key === "ArrowDown") ) && !( (ev.ctrlKey || ev.metaKey) && + !ev.shiftKey && + !ev.altKey && (ev.key === "c" || ev.key === "x" || ev.key === "Delete") ) ) { diff --git a/src/mixins/keyboard-shortcut-mixin.ts b/src/mixins/keyboard-shortcut-mixin.ts index 71e0141bd6..9609f4bb18 100644 --- a/src/mixins/keyboard-shortcut-mixin.ts +++ b/src/mixins/keyboard-shortcut-mixin.ts @@ -11,7 +11,12 @@ export const KeyboardShortcutMixin = >( class extends superClass { private _keydownEvent = (event: KeyboardEvent) => { const supportedShortcuts = this.supportedShortcuts(); - if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) { + if ( + (event.ctrlKey || event.metaKey) && + !event.shiftKey && + !event.altKey && + event.key in supportedShortcuts + ) { event.preventDefault(); supportedShortcuts[event.key](); return; From dfb9c662e78f06229723ce7ca6924c93c18632ee Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 2 Sep 2025 14:12:48 +0200 Subject: [PATCH 41/84] add shadow when scrollable in automation bottom sheet, min height 50vh (#26828) --- src/components/ha-bottom-sheet.ts | 4 ++ .../sidebar/ha-automation-sidebar-card.ts | 52 +++++++++++++++++-- 2 files changed, 53 insertions(+), 3 deletions(-) diff --git a/src/components/ha-bottom-sheet.ts b/src/components/ha-bottom-sheet.ts index 5737fe9750..49914f6e7d 100644 --- a/src/components/ha-bottom-sheet.ts +++ b/src/components/ha-bottom-sheet.ts @@ -30,6 +30,8 @@ export class HaBottomSheet extends LitElement { @state() private _dialogMaxViewpointHeight = 70; + @state() private _dialogMinViewpointHeight = 55; + @state() private _dialogViewportHeight?: number; render() { @@ -41,6 +43,7 @@ export class HaBottomSheet extends LitElement { ? `${this._dialogViewportHeight}vh` : "auto", maxHeight: `${this._dialogMaxViewpointHeight}vh`, + minHeight: `${this._dialogMinViewpointHeight}vh`, })} >
@@ -80,6 +83,7 @@ export class HaBottomSheet extends LitElement { this._dialogViewportHeight = (this._dialog.offsetHeight / window.innerHeight) * 100; this._dialogMaxViewpointHeight = 90; + this._dialogMinViewpointHeight = 20; } else { // after close animation is done close dialog element and fire closed event this._dialog.close(); diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts index bac43f2660..a7920ccd43 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts @@ -1,4 +1,6 @@ +import { ResizeController } from "@lit-labs/observers/resize-controller"; import { mdiClose, mdiDotsVertical } from "@mdi/js"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, @@ -43,7 +45,22 @@ export default class HaAutomationSidebarCard extends LitElement { @state() private _contentScrolled = false; - @query(".card-content") private _contentElement?: HTMLDivElement; + @state() private _contentScrollable = false; + + @query(".card-content") private _contentElement!: HTMLDivElement; + + private _contentSize = new ResizeController(this, { + target: null, + callback: (entries) => { + if (entries[0]?.target) { + this._canScrollDown(entries[0].target); + } + }, + }); + + protected firstUpdated(_changedProperties: PropertyValues): void { + this._contentSize.observe(this._contentElement); + } protected render() { return html` @@ -94,14 +111,29 @@ export default class HaAutomationSidebarCard extends LitElement {
+ ${this.narrow + ? html` +
+ ` + : nothing} `; } @eventOptions({ passive: true }) - private _onScroll() { - const top = this._contentElement?.scrollTop ?? 0; + private _onScroll(ev) { + const top = ev.target.scrollTop ?? 0; this._contentScrolled = top > 0; + + this._canScrollDown(ev.target); + } + + private _canScrollDown(element: HTMLElement) { + this._contentScrollable = + (element.scrollHeight ?? 0) - (element.clientHeight ?? 0) > + (element.scrollTop ?? 0); } private _closeSidebar() { @@ -151,6 +183,20 @@ export default class HaAutomationSidebarCard extends LitElement { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } + .fade { + position: fixed; + bottom: -12px; + left: 0; + right: 0; + height: 12px; + pointer-events: none; + transition: box-shadow 180ms ease-in-out; + } + + .fade.scrollable { + box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.16); + } + .card-content { max-height: calc(100% - 80px); overflow: auto; From 84ad521b3dee798eec0db4bab7a141b146fa625c Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 2 Sep 2025 11:44:01 +0100 Subject: [PATCH 42/84] Fix capitalization on data table filter button (#26829) --- src/translations/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/en.json b/src/translations/en.json index b9f825fec3..088d70a038 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -678,7 +678,7 @@ }, "subpage-data-table": { "filters": "Filters", - "show_results": "show {number} results", + "show_results": "Show {number} results", "clear_filter": "Clear filter", "close_filter": "Close filters", "exit_selection_mode": "Exit selection mode", From b65f6f46e12d6bd3d528e82859b6650cfbeb4f4b Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 2 Sep 2025 14:57:11 +0200 Subject: [PATCH 43/84] Fix scrolling items in the bottom into view (#26830) --- .../automation/action/ha-automation-action-row.ts | 4 ++-- .../condition/ha-automation-condition-row.ts | 4 ++-- .../config/automation/manual-automation-editor.ts | 6 +++++- .../automation/option/ha-automation-option-row.ts | 4 ++-- src/panels/config/automation/styles.ts | 5 +++++ .../automation/trigger/ha-automation-trigger-row.ts | 4 ++-- src/panels/config/script/ha-script-field-row.ts | 4 ++-- src/panels/config/script/ha-script-fields.ts | 10 ++++++---- src/panels/config/script/manual-script-editor.ts | 6 +++++- 9 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 36f474be92..20c5919c43 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -739,12 +739,12 @@ export default class HaAutomationActionRow extends LitElement { this._collapsed = false; if (this.narrow) { - requestAnimationFrame(() => { + window.setTimeout(() => { this.scrollIntoView({ block: "start", behavior: "smooth", }); - }); + }, 180); // duration of transition of added padding for bottom sheet } } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 906180d9c1..f24831d29c 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -710,12 +710,12 @@ export default class HaAutomationConditionRow extends LitElement { this._collapsed = false; if (this.narrow) { - requestAnimationFrame(() => { + window.setTimeout(() => { this.scrollIntoView({ block: "start", behavior: "smooth", }); - }); + }, 180); // duration of transition of added padding for bottom sheet } } diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 93082409b7..1463ac7922 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -274,7 +274,11 @@ export class HaManualAutomationEditor extends LitElement { })} >
-
+
${this._renderContent()}
diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index 27f4e6489c..4001920b70 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -408,12 +408,12 @@ export default class HaAutomationOptionRow extends LitElement { this._collapsed = false; if (this.narrow) { - requestAnimationFrame(() => { + window.setTimeout(() => { this.scrollIntoView({ block: "start", behavior: "smooth", }); - }); + }, 180); // duration of transition of added padding for bottom sheet } } diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 03bb5fa4d2..dffe21c281 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -136,6 +136,11 @@ export const manualEditorStyles = css` .content { padding-top: 24px; padding-bottom: 72px; + transition: padding-bottom 180ms ease-in-out; + } + + .content.has-bottom-sheet { + padding-bottom: calc(90vh - 72px); } ha-automation-sidebar { diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index b9e1a83df3..749ed13255 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -520,12 +520,12 @@ export default class HaAutomationTriggerRow extends LitElement { this._selected = true; if (this.narrow) { - requestAnimationFrame(() => { + window.setTimeout(() => { this.scrollIntoView({ block: "start", behavior: "smooth", }); - }); + }, 180); } } diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index f94c243028..04773c7e2f 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -236,12 +236,12 @@ export default class HaScriptFieldRow extends LitElement { } satisfies ScriptFieldSidebarConfig); if (this.narrow) { - requestAnimationFrame(() => { + window.setTimeout(() => { this.scrollIntoView({ block: "start", behavior: "smooth", }); - }); + }, 180); // duration of transition of added padding for bottom sheet } } diff --git a/src/panels/config/script/ha-script-fields.ts b/src/panels/config/script/ha-script-fields.ts index fd1ffa1982..6e4d245676 100644 --- a/src/panels/config/script/ha-script-fields.ts +++ b/src/panels/config/script/ha-script-fields.ts @@ -76,10 +76,12 @@ export default class HaScriptFields extends LitElement { row.focus(); if (this.narrow) { - row.scrollIntoView({ - block: "start", - behavior: "smooth", - }); + window.setTimeout(() => { + row.scrollIntoView({ + block: "start", + behavior: "smooth", + }); + }, 180); // duration of transition of added padding for bottom sheet } }); } diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 0664a27700..610460d5c8 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -218,7 +218,11 @@ export class HaManualScriptEditor extends LitElement { })} >
-
+
${this._renderContent()}
From 645ba3f9c1e2f97efcc9d681428702ee5ae884a0 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Tue, 2 Sep 2025 13:03:18 +0200 Subject: [PATCH 44/84] Home dashboard: Ensure temperature sensor entity exists (#26831) --- src/panels/lovelace/cards/hui-home-summary-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-home-summary-card.ts b/src/panels/lovelace/cards/hui-home-summary-card.ts index 93a1662ea3..cded17b59f 100644 --- a/src/panels/lovelace/cards/hui-home-summary-card.ts +++ b/src/panels/lovelace/cards/hui-home-summary-card.ts @@ -119,7 +119,7 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard { const sensorsValues = areaSensors .map( - (entityId) => parseFloat(this.hass!.states[entityId!].state) || NaN + (entityId) => parseFloat(this.hass!.states[entityId!]?.state) || NaN ) .filter((value) => !isNaN(value)); From 1786235c86aeaae96fdf11c68fb097094aceb250 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 2 Sep 2025 14:58:56 +0200 Subject: [PATCH 45/84] Clean graph in security and climate view in home dashboard (#26833) --- .../home/home-climate-view-strategy.ts | 37 +++++-------------- .../home/home-security-view-strategy.ts | 23 +----------- 2 files changed, 11 insertions(+), 49 deletions(-) diff --git a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts index 041314e615..80df571287 100644 --- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts @@ -12,30 +12,11 @@ import { } from "../areas/helpers/areas-strategy-helper"; import { getHomeStructure } from "./helpers/home-structure"; import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries"; -import { computeStateName } from "../../../../common/entity/compute_state_name"; -import { computeObjectId } from "../../../../common/entity/compute_object_id"; export interface HomeClimateViewStrategyConfig { type: "home-climate"; } -const createTempHumidBadge = (hass: HomeAssistant, entityId: string) => { - const stateObj = hass.states[entityId]; - return { - type: "tile", - entity: entityId, - name: stateObj - ? computeStateName(stateObj) - : computeObjectId(entityId).replace(/_/g, " "), - features: [ - { - type: "history-chart", - hours_to_show: 3, - }, - ], - }; -}; - const processAreasForClimate = ( areaIds: string[], hass: HomeAssistant, @@ -64,15 +45,17 @@ const processAreasForClimate = ( }, }); - if (hass.areas[areaId].temperature_entity_id) { - cards.push( - createTempHumidBadge(hass, hass.areas[areaId].temperature_entity_id) - ); + if (area.temperature_entity_id) { + cards.push({ + ...computeTileCard(area.temperature_entity_id), + features: [{ type: "history-chart" }], + }); } - if (hass.areas[areaId].humidity_entity_id) { - cards.push( - createTempHumidBadge(hass, hass.areas[areaId].humidity_entity_id) - ); + if (area.humidity_entity_id) { + cards.push({ + ...computeTileCard(area.humidity_entity_id), + features: [{ type: "history-chart" }], + }); } for (const entityId of areaEntities) { diff --git a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts index c231ffd336..44ed682a15 100644 --- a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts @@ -12,9 +12,6 @@ import { } from "../areas/helpers/areas-strategy-helper"; import { getHomeStructure } from "./helpers/home-structure"; import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries"; -import { computeDomain } from "../../../../common/entity/compute_domain"; -import { computeStateName } from "../../../../common/entity/compute_state_name"; -import { computeObjectId } from "../../../../common/entity/compute_object_id"; export interface HomeSecurityViewStrategyConfig { type: "home-security"; @@ -49,25 +46,7 @@ const processAreasForSecurity = ( }); for (const entityId of areaEntities) { - const stateObj = hass.states[entityId]; - cards.push( - computeDomain(entityId) === "binary_sensor" && - stateObj?.attributes.device_class === "motion" - ? { - type: "tile", - entity: entityId, - name: stateObj - ? computeStateName(stateObj) - : computeObjectId(entityId).replace(/_/g, " "), - features: [ - { - type: "history-chart", - hours_to_show: 6, - }, - ], - } - : computeTileCard(entityId) - ); + cards.push(computeTileCard(entityId)); } } } From 1cf353461f2acf62d42c7eb2c28253f3ba36d851 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 2 Sep 2025 15:50:05 +0200 Subject: [PATCH 46/84] Tweak automation row (#26834) tweak automation row --- src/components/ha-automation-row.ts | 1 + src/panels/config/automation/styles.ts | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index 83ee0cdff2..6db5fc45f1 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -156,6 +156,7 @@ export class HaAutomationRow extends LitElement { .expand-button { transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); color: var(--ha-color-on-neutral-quiet); + margin-left: -8px; } :host([building-block]) .leading-icon-wrapper { background-color: var(--ha-color-fill-neutral-loud-resting); diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index dffe21c281..750224b440 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -189,8 +189,7 @@ export const automationRowsStyles = css` scroll-margin-top: 48px; } .handle { - margin: 4px; - padding: 8px; + padding: 4px; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; border-radius: var(--ha-border-radius-pill); From e0307f968822070377926022e23c69aa8672f856 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 2 Sep 2025 16:15:48 +0200 Subject: [PATCH 47/84] Align box shadows (#26835) * Align box shadows * update colors --- src/components/ha-md-dialog.ts | 1 + .../config/automation/sidebar/ha-automation-sidebar-card.ts | 5 +++-- src/resources/theme/color/color.globals.ts | 4 ++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts index 6240cef67f..f28be6975f 100644 --- a/src/components/ha-md-dialog.ts +++ b/src/components/ha-md-dialog.ts @@ -159,6 +159,7 @@ export class HaMdDialog extends Dialog { --md-dialog-headline-size: var(--ha-font-size-xl); --md-dialog-supporting-text-size: var(--ha-font-size-m); --md-dialog-supporting-text-line-height: var(--ha-line-height-normal); + --md-divider-color: var(--divider-color); } :host([type="alert"]) { diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts index a7920ccd43..b3ff5af54e 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts @@ -180,7 +180,7 @@ export default class HaAutomationSidebarCard extends LitElement { } ha-dialog-header.scrolled { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); + box-shadow: var(--bar-box-shadow); } .fade { @@ -194,7 +194,8 @@ export default class HaAutomationSidebarCard extends LitElement { } .fade.scrollable { - box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.16); + box-shadow: var(--bar-box-shadow); + transform: rotate(180deg); } .card-content { diff --git a/src/resources/theme/color/color.globals.ts b/src/resources/theme/color/color.globals.ts index dbfe8cc2da..b39c32a9f2 100644 --- a/src/resources/theme/color/color.globals.ts +++ b/src/resources/theme/color/color.globals.ts @@ -218,6 +218,7 @@ export const colorStyles = css` --table-row-alternative-background-color: var(--secondary-background-color); --data-table-background-color: var(--card-background-color); --markdown-code-background-color: var(--primary-background-color); + --bar-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); /* https://github.com/material-components/material-web/blob/master/docs/theming.md */ --mdc-theme-primary: var(--primary-color); @@ -246,6 +247,7 @@ export const colorStyles = css` --mdc-dialog-scroll-divider-color: var(--divider-color); --mdc-dialog-heading-ink-color: var(--primary-text-color); --mdc-dialog-content-ink-color: var(--primary-text-color); + --mdc-top-app-bar-fixed-box-shadow: var(--bar-box-shadow); --mdc-text-field-idle-line-color: var(--input-idle-line-color); --mdc-text-field-hover-line-color: var(--input-hover-line-color); @@ -360,6 +362,8 @@ export const darkColorStyles = css` --ha-button-warning-light-color: #917b54c1; --ha-button-neutral-color: #d9dae0; --ha-button-neutral-light-color: #6a7081; + + --bar-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.48); } `; From 69bfb89a656d269b40e19de036b36736c0b87992 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 2 Sep 2025 16:08:32 +0200 Subject: [PATCH 48/84] Add new shortcuts to shortcuts dialog (#26836) --- src/components/ha-automation-row.ts | 7 +++++-- src/dialogs/shortcuts/dialog-shortcuts.ts | 15 +++++++++++++++ src/translations/en.json | 3 +++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index 6db5fc45f1..fe9d6d27a3 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -88,7 +88,10 @@ export class HaAutomationRow extends LitElement { (ev.ctrlKey || ev.metaKey) && !ev.shiftKey && !ev.altKey && - (ev.key === "c" || ev.key === "x" || ev.key === "Delete") + (ev.key === "c" || + ev.key === "x" || + ev.key === "Delete" || + ev.key === "Backspace") ) ) { return; @@ -119,7 +122,7 @@ export class HaAutomationRow extends LitElement { return; } - if (ev.key === "Delete") { + if (ev.key === "Delete" || ev.key === "Backspace") { fireEvent(this, "delete-row"); return; } diff --git a/src/dialogs/shortcuts/dialog-shortcuts.ts b/src/dialogs/shortcuts/dialog-shortcuts.ts index dbd85839ae..9af66e3002 100644 --- a/src/dialogs/shortcuts/dialog-shortcuts.ts +++ b/src/dialogs/shortcuts/dialog-shortcuts.ts @@ -71,6 +71,21 @@ const _SHORTCUTS: Section[] = [ { key: "ui.dialogs.shortcuts.automation_script.title", items: [ + { + type: "shortcut", + shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "C"], + key: "ui.dialogs.shortcuts.automation_script.copy", + }, + { + type: "shortcut", + shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "X"], + key: "ui.dialogs.shortcuts.automation_script.cut", + }, + { + type: "shortcut", + shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "del"], + key: "ui.dialogs.shortcuts.automation_script.delete", + }, { type: "shortcut", shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"], diff --git a/src/translations/en.json b/src/translations/en.json index 088d70a038..5507ff5b62 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2061,6 +2061,9 @@ }, "automation_script": { "title": "Automations / Scripts", + "copy": "to copy the selected automation/script action/condition/trigger", + "cut": "to cut the selected automation/script action/condition/trigger", + "delete": "to delete the selected automation/script action/condition/trigger", "paste": "to paste automation/script YAML from clipboard to editor", "save": "to save automation/script" }, From 42061b2f8cc2eafaaa1e78cfb4d2b8edc50bc87c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 2 Sep 2025 16:26:44 +0200 Subject: [PATCH 49/84] Remove expand all/collapse all options from overflow (#26837) * remove expand all/collapse all options from overflow * ignore --- .../config/automation/ha-automation-editor.ts | 28 ++----------------- src/panels/config/script/ha-script-editor.ts | 28 ++----------------- 2 files changed, 4 insertions(+), 52 deletions(-) diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 242b24c944..bc0aee9c80 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -16,8 +16,6 @@ import { mdiStopCircleOutline, mdiTag, mdiTransitConnection, - mdiUnfoldLessHorizontal, - mdiUnfoldMoreHorizontal, } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; @@ -371,30 +369,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin( - ${!useBlueprint - ? html` - - - ${this.hass.localize( - "ui.panel.config.automation.editor.collapse_all" - )} - - - - - ${this.hass.localize( - "ui.panel.config.automation.editor.expand_all" - )} - - ` - : nothing} -
  • - ${!useBlueprint - ? html` - - - ${this.hass.localize( - "ui.panel.config.automation.editor.collapse_all" - )} - - - - - ${this.hass.localize( - "ui.panel.config.automation.editor.expand_all" - )} - - ` - : nothing} -
  • Date: Tue, 2 Sep 2025 18:14:46 +0200 Subject: [PATCH 50/84] Change home summaries color (#26839) --- src/panels/lovelace/cards/hui-home-summary-card.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-home-summary-card.ts b/src/panels/lovelace/cards/hui-home-summary-card.ts index cded17b59f..f8a7aab2e0 100644 --- a/src/panels/lovelace/cards/hui-home-summary-card.ts +++ b/src/panels/lovelace/cards/hui-home-summary-card.ts @@ -31,8 +31,8 @@ import type { HomeSummaryCard } from "./types"; const COLORS: Record = { lights: "amber", climate: "deep-orange", - security: "blue", - media_players: "purple", + security: "blue-grey", + media_players: "blue", }; @customElement("hui-home-summary-card") From d253041376b4dab53a7dfb7377187a203ec5659f Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 2 Sep 2025 18:41:08 +0200 Subject: [PATCH 51/84] Bumped version to 20250902.0 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 8f337cfa6e..0c80ba927c 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250901.0" +version = "20250902.0" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From b7eff547c700cf2f1b9060c65ae6562281634224 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 2 Sep 2025 19:38:06 +0200 Subject: [PATCH 52/84] Remove non numerical sensor and binary-sensor for history chart feature (#26838) * Use hui-graph-base for chart history feature and remove non numerical sensor support * Fix chart opacity --- .../hui-history-chart-card-feature.ts | 247 +++--------------- .../lovelace/components/hui-graph-base.ts | 6 +- 2 files changed, 45 insertions(+), 208 deletions(-) diff --git a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts index a6dd7546dc..fe04c190d1 100644 --- a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts @@ -1,34 +1,31 @@ -import { css, html, LitElement, nothing, svg } from "lit"; +import { css, html, LitElement, nothing } from "lit"; +import "../../../components/ha-spinner"; import { customElement, property, state } from "lit/decorators"; import { computeDomain } from "../../../common/entity/compute_domain"; -import { - computeHistory, - subscribeHistoryStatesTimeWindow, -} from "../../../data/history"; -import type { - HistoryResult, - LineChartUnit, - TimelineEntity, -} from "../../../data/history"; +import { subscribeHistoryStatesTimeWindow } from "../../../data/history"; import type { HomeAssistant } from "../../../types"; import type { LovelaceCardFeature } from "../types"; import type { LovelaceCardFeatureContext, HistoryChartCardFeatureConfig, } from "./types"; -import { getSensorNumericDeviceClasses } from "../../../data/sensor"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; -import { computeTimelineColor } from "../../../components/chart/timeline-color"; -import { downSampleLineData } from "../../../components/chart/down-sample"; -import { fireEvent } from "../../../common/dom/fire_event"; +import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates"; +import "../components/hui-graph-base"; +import { isNumericFromAttributes } from "../../../common/number/format_number"; export const supportsHistoryChartCardFeature = ( - _hass: HomeAssistant, + hass: HomeAssistant, context: LovelaceCardFeatureContext -) => - !!context.entity_id && - ["sensor", "binary_sensor"].includes(computeDomain(context.entity_id)); +) => { + const stateObj = context.entity_id + ? hass.states[context.entity_id] + : undefined; + if (!stateObj) return false; + const domain = computeDomain(stateObj.entity_id); + return domain === "sensor" && isNumericFromAttributes(stateObj.attributes); +}; @customElement("hui-history-chart-card-feature") class HuiHistoryChartCardFeature @@ -42,7 +39,7 @@ class HuiHistoryChartCardFeature @state() private _config?: HistoryChartCardFeatureConfig; - @state() private _stateHistory?: HistoryResult; + @state() private _coordinates?: number[][]; private _interval?: number; @@ -81,53 +78,27 @@ class HuiHistoryChartCardFeature !this._config || !this.hass || !this.context || - !this._stateHistory || !supportsHistoryChartCardFeature(this.hass, this.context) ) { return nothing; } - - const line = this._stateHistory.line[0]; - const timeline = this._stateHistory.timeline[0]; - const width = this.clientWidth; - const height = this.clientHeight; - if (line) { - const { points, yAxisOrigin } = this._generateLinePoints(line); - const { paths, filledPaths } = this._getLinePaths(points, yAxisOrigin); - + if (!this._coordinates) { return html` -
    - ${svg` - ${paths.map( - (path) => - svg`` - )} - ${filledPaths.map( - (path) => - svg`` - )} - `} +
    +
    `; } - if (timeline) { - const ranges = this._generateTimelineRanges(timeline); + if (!this._coordinates.length) { return html` -
    - ${svg` - - ${ranges.map((r) => svg``)} - - `} +
    +
    No state history found.
    `; } - return nothing; - } - - private _handleClick() { - // open more info dialog to show more detailed history - fireEvent(this, "hass-more-info", { entityId: this.context!.entity_id! }); + return html` + + `; } private async _subscribeHistory(): Promise<() => Promise> { @@ -138,174 +109,36 @@ class HuiHistoryChartCardFeature ) { return () => Promise.resolve(); } - - const { numeric_device_classes: sensorNumericDeviceClasses } = - await getSensorNumericDeviceClasses(this.hass!); - return subscribeHistoryStatesTimeWindow( this.hass!, (historyStates) => { - this._stateHistory = computeHistory( - this.hass!, - historyStates, - [this.context!.entity_id!], - this.hass!.localize, - sensorNumericDeviceClasses, - false - ); + this._coordinates = + coordinatesMinimalResponseCompressedState( + historyStates[this.context!.entity_id!], + this._config!.hours_to_show ?? 24, + 500, + 2, + undefined + ) || []; }, this._config!.hours_to_show ?? 24, [this.context!.entity_id!] ); } - private _generateLinePoints(line: LineChartUnit): { - points: { x: number; y: number }[]; - yAxisOrigin: number; - } { - const width = this.clientWidth; - const height = this.clientHeight; - let yAxisOrigin = height; - let minY = Number(line.data[0].states[0].state); - let maxY = Number(line.data[0].states[0].state); - const minX = line.data[0].states[0].last_changed; - const maxX = Date.now(); - line.data[0].states.forEach((stateData) => { - const stateValue = Number(stateData.state); - if (stateValue < minY) { - minY = stateValue; - } else if (stateValue > maxY) { - maxY = stateValue; - } - }); - const rangeY = maxY - minY || minY * 0.1; - const sampledData = downSampleLineData( - line.data[0].states.map((stateData) => [ - stateData.last_changed, - Number(stateData.state), - ]), - width, - minX, - maxX - ); - if (maxY < 0) { - // all values are negative - // add margin - maxY += rangeY * 0.1; - maxY = Math.min(0, maxY); - yAxisOrigin = 0; - } else if (minY < 0) { - // some values are negative - yAxisOrigin = (maxY / (maxY - minY || 1)) * height; - } else { - // all values are positive - // add margin - minY -= rangeY * 0.1; - minY = Math.max(0, minY); - } - const yDenom = maxY - minY || 1; - const xDenom = maxX - minX || 1; - const points = sampledData!.map((point) => { - const x = ((point![0] - minX) / xDenom) * width; - const y = height - ((Number(point![1]) - minY) / yDenom) * height; - return { x, y }; - }); - points.push({ x: width, y: points[points.length - 1].y }); - return { points, yAxisOrigin }; - } - - private _generateTimelineRanges(timeline: TimelineEntity) { - if (timeline.data.length === 0) { - return []; - } - const computedStyles = getComputedStyle(this); - const width = this.clientWidth; - const minX = timeline.data[0].last_changed; - const maxX = Date.now(); - let prevEndX = 0; - let prevStateColor = ""; - const ranges = timeline.data.map((t) => { - const x = ((t.last_changed - minX) / (maxX - minX)) * width; - const range = { - startX: prevEndX, - endX: x, - color: prevStateColor, - }; - prevStateColor = computeTimelineColor( - t.state, - computedStyles, - this.hass!.states[timeline.entity_id] - ); - prevEndX = x; - return range; - }); - ranges.push({ - startX: prevEndX, - endX: width, - color: prevStateColor, - }); - return ranges; - } - - private _getLinePaths( - points: { x: number; y: number }[], - yAxisOrigin: number - ) { - const paths: string[] = []; - const filledPaths: string[] = []; - if (!points.length) { - return { paths, filledPaths }; - } - // path can interupted by missing data, so we need to split the path into segments - const pathSegments: { x: number; y: number }[][] = [[]]; - points.forEach((point) => { - if (!isNaN(point.y)) { - pathSegments[pathSegments.length - 1].push(point); - } else if (pathSegments[pathSegments.length - 1].length > 0) { - pathSegments.push([]); - } - }); - - pathSegments.forEach((pathPoints) => { - // create a smoothed path - let next: { x: number; y: number }; - let path = ""; - let last = pathPoints[0]; - - path += `M ${last.x},${last.y}`; - - pathPoints.forEach((coord) => { - next = coord; - path += ` ${(next.x + last.x) / 2},${(next.y + last.y) / 2}`; - path += ` Q${next.x},${next.y}`; - last = next; - }); - - path += ` ${next!.x},${next!.y}`; - paths.push(path); - filledPaths.push( - path + - ` L ${next!.x},${yAxisOrigin} L ${pathPoints[0].x},${yAxisOrigin} Z` - ); - }); - - return { paths, filledPaths }; - } - static styles = css` :host { - display: block; + display: flex; width: 100%; height: var(--feature-height); + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + pointer-events: none !important; } - :host > div { + hui-graph-base { width: 100%; - height: 100%; - cursor: pointer; - } - .timeline { - border-radius: 4px; - overflow: hidden; + --accent-color: var(--feature-color); } `; } diff --git a/src/panels/lovelace/components/hui-graph-base.ts b/src/panels/lovelace/components/hui-graph-base.ts index e82f9e8548..db1f3cb645 100644 --- a/src/panels/lovelace/components/hui-graph-base.ts +++ b/src/panels/lovelace/components/hui-graph-base.ts @@ -25,8 +25,9 @@ export class HuiGraphBase extends LitElement { Date: Tue, 2 Sep 2025 21:04:49 +0200 Subject: [PATCH 53/84] Bumped version to 20250902.1 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 0c80ba927c..be9595ca81 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250902.0" +version = "20250902.1" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From 4b78eb7656c4dd14d17e2959796a64a70504a79c Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Wed, 3 Sep 2025 09:06:18 +0200 Subject: [PATCH 54/84] Update device action button variant based on warning class (#26848) --- src/panels/config/devices/ha-config-device-page.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 0120405df9..3f5fee2244 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -773,6 +773,11 @@ export class HaConfigDevicePage extends LitElement { appearance="plain" target=${ifDefined(firstDeviceAction!.target)} class=${ifDefined(firstDeviceAction!.classes)} + .variant=${firstDeviceAction!.classes?.includes( + "warning" + ) + ? "danger" + : "brand"} .action=${firstDeviceAction!.action} @click=${this._deviceActionClicked} > From 21e3fc9bb9f66e41149ff808929ba9bf99048e60 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 3 Sep 2025 10:01:10 +0200 Subject: [PATCH 55/84] Update shortcuts dialog (#26849) --- src/dialogs/shortcuts/dialog-shortcuts.ts | 51 ++++++++++++------- .../config/automation/ha-automation-editor.ts | 1 + src/translations/en.json | 9 ++-- 3 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/dialogs/shortcuts/dialog-shortcuts.ts b/src/dialogs/shortcuts/dialog-shortcuts.ts index 9af66e3002..415cdab476 100644 --- a/src/dialogs/shortcuts/dialog-shortcuts.ts +++ b/src/dialogs/shortcuts/dialog-shortcuts.ts @@ -1,13 +1,14 @@ +import { mdiAppleKeyboardCommand } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; -import "../../components/ha-button"; -import { createCloseHeading } from "../../components/ha-dialog"; -import type { HomeAssistant } from "../../types"; -import { haStyleDialog } from "../../resources/styles"; -import "../../components/ha-alert"; -import "../../components/chips/ha-assist-chip"; import type { LocalizeKeys } from "../../common/translations/localize"; +import "../../components/ha-alert"; +import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-svg-icon"; +import { haStyleDialog } from "../../resources/styles"; +import type { HomeAssistant } from "../../types"; +import { isMac } from "../../util/is_mac"; interface Text { type: "text"; @@ -27,6 +28,8 @@ interface Section { items: (Text | Shortcut)[]; } +const CTRL_CMD = "__CTRL_CMD__"; + const _SHORTCUTS: Section[] = [ { key: "ui.dialogs.shortcuts.searching.title", @@ -53,7 +56,7 @@ const _SHORTCUTS: Section[] = [ }, { type: "shortcut", - shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"], + shortcut: [CTRL_CMD, "F"], key: "ui.dialogs.shortcuts.searching.search_in_table", }, ], @@ -73,27 +76,27 @@ const _SHORTCUTS: Section[] = [ items: [ { type: "shortcut", - shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "C"], + shortcut: [CTRL_CMD, "C"], key: "ui.dialogs.shortcuts.automation_script.copy", }, { type: "shortcut", - shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "X"], + shortcut: [CTRL_CMD, "X"], key: "ui.dialogs.shortcuts.automation_script.cut", }, { type: "shortcut", - shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "del"], + shortcut: [CTRL_CMD, "del"], key: "ui.dialogs.shortcuts.automation_script.delete", }, { type: "shortcut", - shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"], + shortcut: [CTRL_CMD, "V"], key: "ui.dialogs.shortcuts.automation_script.paste", }, { type: "shortcut", - shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"], + shortcut: [CTRL_CMD, "S"], key: "ui.dialogs.shortcuts.automation_script.save", }, ], @@ -103,16 +106,13 @@ const _SHORTCUTS: Section[] = [ items: [ { type: "shortcut", - shortcut: [ - { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, - { key: "ui.dialogs.shortcuts.shortcuts.drag" }, - ], + shortcut: [CTRL_CMD, { key: "ui.dialogs.shortcuts.shortcuts.drag" }], key: "ui.dialogs.shortcuts.charts.drag_to_zoom", }, { type: "shortcut", shortcut: [ - { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, + CTRL_CMD, { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" }, ], key: "ui.dialogs.shortcuts.charts.scroll_to_zoom", @@ -161,7 +161,18 @@ class DialogShortcuts extends LitElement { return html`
    - ${keys.map((key) => html` ${key.toUpperCase()}`)} + ${keys.map( + (key) => + html`${key === CTRL_CMD + ? isMac + ? html`` + : this.hass.localize("ui.panel.config.automation.editor.ctrl") + : key}` + )} ${this.hass.localize(translationKey)}
    `; @@ -247,6 +258,10 @@ class DialogShortcuts extends LitElement { .items p { margin-bottom: 8px; } + + ha-svg-icon { + width: 12px; + } `, ]; } diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index bc0aee9c80..542beb6c88 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1115,6 +1115,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( c: () => this._copySelectedRow(), x: () => this._cutSelectedRow(), Delete: () => this._deleteSelectedRow(), + Backspace: () => this._deleteSelectedRow(), }; } diff --git a/src/translations/en.json b/src/translations/en.json index 5507ff5b62..89ce025384 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2043,8 +2043,7 @@ "shortcuts": { "double_click": "Double-click", "scroll_wheel": "Scroll", - "drag": "Drag", - "ctrl_cmd": "Ctrl/Cmd" + "drag": "Drag" }, "searching": { "title": "Searching", @@ -2061,9 +2060,9 @@ }, "automation_script": { "title": "Automations / Scripts", - "copy": "to copy the selected automation/script action/condition/trigger", - "cut": "to cut the selected automation/script action/condition/trigger", - "delete": "to delete the selected automation/script action/condition/trigger", + "copy": "to copy the selected item to clipboard", + "cut": "to cut the selected item and place it on the clipboard", + "delete": "to delete the selected item", "paste": "to paste automation/script YAML from clipboard to editor", "save": "to save automation/script" }, From 04c9f32539a98f8babc093bd63f7358773cdf29e Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Wed, 3 Sep 2025 11:45:13 +0200 Subject: [PATCH 56/84] Fix automation narrow bottom sheet close animation (#26850) --- .../action/ha-automation-action-row.ts | 3 +-- .../condition/ha-automation-condition-row.ts | 3 +-- .../config/automation/ha-automation-sidebar.ts | 16 ++++++++-------- .../automation/manual-automation-editor.ts | 14 +++++++++----- .../option/ha-automation-option-row.ts | 3 +-- .../trigger/ha-automation-trigger-row.ts | 5 ++--- src/panels/config/script/ha-script-field-row.ts | 6 ++---- src/panels/config/script/manual-script-editor.ts | 14 +++++++++----- 8 files changed, 33 insertions(+), 31 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 20c5919c43..04c366cf16 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -694,8 +694,7 @@ export default class HaAutomationActionRow extends LitElement { ev?.stopPropagation(); if (this._selected) { - this._selected = false; - fireEvent(this, "close-sidebar"); + fireEvent(this, "request-close-sidebar"); return; } this.openSidebar(); diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index f24831d29c..52dd28a4c2 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -669,8 +669,7 @@ export default class HaAutomationConditionRow extends LitElement { ev?.stopPropagation(); if (this._selected) { - this._selected = false; - fireEvent(this, "close-sidebar"); + fireEvent(this, "request-close-sidebar"); return; } this.openSidebar(); diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts index 5777c0c051..c90ec11648 100644 --- a/src/panels/config/automation/ha-automation-sidebar.ts +++ b/src/panels/config/automation/ha-automation-sidebar.ts @@ -55,7 +55,7 @@ export default class HaAutomationSidebar extends LitElement { .yamlMode=${this._yamlMode} .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} - @close-sidebar=${this._handleCloseSidebar} + @close-sidebar=${this.triggerCloseSidebar} > `; } @@ -71,7 +71,7 @@ export default class HaAutomationSidebar extends LitElement { .yamlMode=${this._yamlMode} .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} - @close-sidebar=${this._handleCloseSidebar} + @close-sidebar=${this.triggerCloseSidebar} > `; } @@ -87,7 +87,7 @@ export default class HaAutomationSidebar extends LitElement { .yamlMode=${this._yamlMode} .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} - @close-sidebar=${this._handleCloseSidebar} + @close-sidebar=${this.triggerCloseSidebar} > `; } @@ -100,7 +100,7 @@ export default class HaAutomationSidebar extends LitElement { .isWide=${this.isWide} .narrow=${this.narrow} .disabled=${this.disabled} - @close-sidebar=${this._handleCloseSidebar} + @close-sidebar=${this.triggerCloseSidebar} > `; } @@ -116,7 +116,7 @@ export default class HaAutomationSidebar extends LitElement { .yamlMode=${this._yamlMode} .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} - @close-sidebar=${this._handleCloseSidebar} + @close-sidebar=${this.triggerCloseSidebar} > `; } @@ -132,7 +132,7 @@ export default class HaAutomationSidebar extends LitElement { .yamlMode=${this._yamlMode} .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} - @close-sidebar=${this._handleCloseSidebar} + @close-sidebar=${this.triggerCloseSidebar} > `; } @@ -188,8 +188,8 @@ export default class HaAutomationSidebar extends LitElement { return undefined; } - private _handleCloseSidebar(ev: CustomEvent) { - ev.stopPropagation(); + public triggerCloseSidebar(ev?: CustomEvent) { + ev?.stopPropagation(); if (this.narrow) { this._bottomSheetElement?.closeSheet(); return; diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 1463ac7922..4155a8ce93 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -166,7 +166,7 @@ export class HaManualAutomationEditor extends LitElement { .disabled=${this.disabled || this.saving} .narrow=${this.narrow} @open-sidebar=${this._openSidebar} - @request-close-sidebar=${this._closeSidebar} + @request-close-sidebar=${this._triggerCloseSidebar} @close-sidebar=${this._handleCloseSidebar} root sidebar @@ -213,7 +213,7 @@ export class HaManualAutomationEditor extends LitElement { .disabled=${this.disabled || this.saving} .narrow=${this.narrow} @open-sidebar=${this._openSidebar} - @request-close-sidebar=${this._closeSidebar} + @request-close-sidebar=${this._triggerCloseSidebar} @close-sidebar=${this._handleCloseSidebar} root sidebar @@ -255,7 +255,7 @@ export class HaManualAutomationEditor extends LitElement { .highlightedActions=${this._pastedConfig?.actions || []} @value-changed=${this._actionChanged} @open-sidebar=${this._openSidebar} - @request-close-sidebar=${this._closeSidebar} + @request-close-sidebar=${this._triggerCloseSidebar} @close-sidebar=${this._handleCloseSidebar} .hass=${this.hass} .narrow=${this.narrow} @@ -351,8 +351,12 @@ export class HaManualAutomationEditor extends LitElement { }; } - private _closeSidebar() { + private _triggerCloseSidebar() { if (this._sidebarConfig) { + if (this._sidebarElement) { + this._sidebarElement.triggerCloseSidebar(); + return; + } this._sidebarConfig?.close(); } } @@ -389,7 +393,7 @@ export class HaManualAutomationEditor extends LitElement { } private _saveAutomation() { - this._closeSidebar(); + this._triggerCloseSidebar(); fireEvent(this, "save-automation"); } diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index 4001920b70..c45ab8f79b 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -381,8 +381,7 @@ export default class HaAutomationOptionRow extends LitElement { ev?.stopPropagation(); if (this._selected) { - this._selected = false; - fireEvent(this, "close-sidebar"); + fireEvent(this, "request-close-sidebar"); return; } this.openSidebar(); diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 749ed13255..7b2c27406e 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -25,6 +25,7 @@ import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_de import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { handleStructError } from "../../../../common/structs/handle-errors"; +import { copyToClipboard } from "../../../../common/util/copy-clipboard"; import { debounce } from "../../../../common/util/debounce"; import "../../../../components/ha-alert"; import "../../../../components/ha-automation-row"; @@ -75,7 +76,6 @@ import "./types/ha-automation-trigger-time"; import "./types/ha-automation-trigger-time_pattern"; import "./types/ha-automation-trigger-webhook"; import "./types/ha-automation-trigger-zone"; -import { copyToClipboard } from "../../../../common/util/copy-clipboard"; export interface TriggerElement extends LitElement { trigger: Trigger; @@ -482,8 +482,7 @@ export default class HaAutomationTriggerRow extends LitElement { ev?.stopPropagation(); if (this._selected) { - this._selected = false; - fireEvent(this, "close-sidebar"); + fireEvent(this, "request-close-sidebar"); return; } this.openSidebar(); diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 04773c7e2f..b33adf158b 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -162,8 +162,7 @@ export default class HaScriptFieldRow extends LitElement { ev?.stopPropagation(); if (this._selected) { - this._selected = false; - fireEvent(this, "close-sidebar"); + fireEvent(this, "request-close-sidebar"); return; } @@ -176,8 +175,7 @@ export default class HaScriptFieldRow extends LitElement { ev?.stopPropagation(); if (this._selectorRowSelected) { - this._selectorRowSelected = false; - fireEvent(this, "close-sidebar"); + fireEvent(this, "request-close-sidebar"); return; } diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 610460d5c8..a6c805816e 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -170,6 +170,7 @@ export class HaManualScriptEditor extends LitElement { .disabled=${this.disabled} .narrow=${this.narrow} @open-sidebar=${this._openSidebar} + @request-close-sidebar=${this._triggerCloseSidebar} @close-sidebar=${this._handleCloseSidebar} >` : nothing @@ -200,6 +201,7 @@ export class HaManualScriptEditor extends LitElement { .highlightedActions=${this._pastedConfig?.sequence || []} @value-changed=${this._sequenceChanged} @open-sidebar=${this._openSidebar} + @request-close-sidebar=${this._triggerCloseSidebar} @close-sidebar=${this._handleCloseSidebar} .hass=${this.hass} .narrow=${this.narrow} @@ -506,11 +508,13 @@ export class HaManualScriptEditor extends LitElement { }; } - private _closeSidebar() { + private _triggerCloseSidebar() { if (this._sidebarConfig) { - const closeRow = this._sidebarConfig?.close; - this._sidebarConfig = undefined; - closeRow?.(); + if (this._sidebarElement) { + this._sidebarElement.triggerCloseSidebar(); + return; + } + this._sidebarConfig?.close(); } } @@ -519,7 +523,7 @@ export class HaManualScriptEditor extends LitElement { } private _saveScript() { - this._closeSidebar(); + this._triggerCloseSidebar(); fireEvent(this, "save-script"); } From fc4b7674b16e0cfc2b3835135b3437af032d98ad Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 3 Sep 2025 12:00:49 +0200 Subject: [PATCH 57/84] Improve responsive support for history graph feature (#26851) --- src/data/graph.ts | 2 +- .../hui-history-chart-card-feature.ts | 25 +++++++++++-------- .../lovelace/common/graph/coordinates.ts | 8 +++--- .../lovelace/components/hui-graph-base.ts | 4 ++- .../header-footer/hui-graph-header-footer.ts | 2 +- 5 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/data/graph.ts b/src/data/graph.ts index 72fb0ad4fa..05648544ca 100644 --- a/src/data/graph.ts +++ b/src/data/graph.ts @@ -1 +1 @@ -export const strokeWidth = 5; +export const strokeWidth = 2; diff --git a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts index fe04c190d1..f2b3f47d5f 100644 --- a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts @@ -1,19 +1,19 @@ import { css, html, LitElement, nothing } from "lit"; -import "../../../components/ha-spinner"; import { customElement, property, state } from "lit/decorators"; -import { computeDomain } from "../../../common/entity/compute_domain"; -import { subscribeHistoryStatesTimeWindow } from "../../../data/history"; -import type { HomeAssistant } from "../../../types"; -import type { LovelaceCardFeature } from "../types"; -import type { - LovelaceCardFeatureContext, - HistoryChartCardFeatureConfig, -} from "./types"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import { computeDomain } from "../../../common/entity/compute_domain"; +import { isNumericFromAttributes } from "../../../common/number/format_number"; +import "../../../components/ha-spinner"; +import { subscribeHistoryStatesTimeWindow } from "../../../data/history"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; +import type { HomeAssistant } from "../../../types"; import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates"; import "../components/hui-graph-base"; -import { isNumericFromAttributes } from "../../../common/number/format_number"; +import type { LovelaceCardFeature } from "../types"; +import type { + HistoryChartCardFeatureConfig, + LovelaceCardFeatureContext, +} from "./types"; export const supportsHistoryChartCardFeature = ( hass: HomeAssistant, @@ -39,7 +39,7 @@ class HuiHistoryChartCardFeature @state() private _config?: HistoryChartCardFeatureConfig; - @state() private _coordinates?: number[][]; + @state() private _coordinates?: [number, number][]; private _interval?: number; @@ -139,6 +139,9 @@ class HuiHistoryChartCardFeature hui-graph-base { width: 100%; --accent-color: var(--feature-color); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + overflow: hidden; } `; } diff --git a/src/panels/lovelace/common/graph/coordinates.ts b/src/panels/lovelace/common/graph/coordinates.ts index 39f2fb7960..d7d2eea4c1 100644 --- a/src/panels/lovelace/common/graph/coordinates.ts +++ b/src/panels/lovelace/common/graph/coordinates.ts @@ -14,8 +14,8 @@ const calcPoints = ( detail: number, min: number, max: number -): number[][] => { - const coords = [] as number[][]; +): [number, number][] => { + const coords = [] as [number, number][]; const height = 80; let yRatio = (max - min) / height; yRatio = yRatio !== 0 ? yRatio : height; @@ -61,7 +61,7 @@ export const coordinates = ( width: number, detail: number, limits?: { min?: number; max?: number } -): number[][] | undefined => { +): [number, number][] | undefined => { history.forEach((item) => { item.state = Number(item.state); }); @@ -119,7 +119,7 @@ export const coordinatesMinimalResponseCompressedState = ( width: number, detail: number, limits?: { min?: number; max?: number } -): number[][] | undefined => { +): [number, number][] | undefined => { if (!history) { return undefined; } diff --git a/src/panels/lovelace/components/hui-graph-base.ts b/src/panels/lovelace/components/hui-graph-base.ts index db1f3cb645..0c9214fb8c 100644 --- a/src/panels/lovelace/components/hui-graph-base.ts +++ b/src/panels/lovelace/components/hui-graph-base.ts @@ -13,7 +13,7 @@ export class HuiGraphBase extends LitElement { protected render(): TemplateResult { return html` ${this._path - ? svg` + ? svg` Date: Wed, 3 Sep 2025 12:05:19 +0200 Subject: [PATCH 58/84] Bumped version to 20250903.0 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index be9595ca81..bce684f2cb 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250902.1" +version = "20250903.0" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From 989b0b34fe4d0bb5e6d704cad1ed084a90471c33 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 3 Sep 2025 12:56:05 +0200 Subject: [PATCH 59/84] Rename history chart to trend graph (#26854) * Rename history chart to trend graph * rename element and prettier --------- Co-authored-by: Bram Kragten --- ...ure.ts => hui-trend-graph-card-feature.ts} | 28 +++++++++++-------- src/panels/lovelace/card-features/types.ts | 10 +++---- .../create-card-feature-element.ts | 4 +-- .../hui-card-features-editor.ts | 6 ++-- .../home/home-climate-view-strategy.ts | 4 +-- src/translations/en.json | 4 +-- 6 files changed, 30 insertions(+), 26 deletions(-) rename src/panels/lovelace/card-features/{hui-history-chart-card-feature.ts => hui-trend-graph-card-feature.ts} (85%) diff --git a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts b/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts similarity index 85% rename from src/panels/lovelace/card-features/hui-history-chart-card-feature.ts rename to src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts index f2b3f47d5f..803f5d8fe4 100644 --- a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts @@ -11,11 +11,11 @@ import { coordinatesMinimalResponseCompressedState } from "../common/graph/coord import "../components/hui-graph-base"; import type { LovelaceCardFeature } from "../types"; import type { - HistoryChartCardFeatureConfig, + TrendGraphCardFeatureConfig, LovelaceCardFeatureContext, } from "./types"; -export const supportsHistoryChartCardFeature = ( +export const supportsTrendGraphCardFeature = ( hass: HomeAssistant, context: LovelaceCardFeatureContext ) => { @@ -27,7 +27,9 @@ export const supportsHistoryChartCardFeature = ( return domain === "sensor" && isNumericFromAttributes(stateObj.attributes); }; -@customElement("hui-history-chart-card-feature") +const DEFAULT_HOURS_TO_SHOW = 24; + +@customElement("hui-trend-graph-card-feature") class HuiHistoryChartCardFeature extends SubscribeMixin(LitElement) implements LovelaceCardFeature @@ -37,20 +39,19 @@ class HuiHistoryChartCardFeature @property({ attribute: false }) public context?: LovelaceCardFeatureContext; - @state() private _config?: HistoryChartCardFeatureConfig; + @state() private _config?: TrendGraphCardFeatureConfig; @state() private _coordinates?: [number, number][]; private _interval?: number; - static getStubConfig(): HistoryChartCardFeatureConfig { + static getStubConfig(): TrendGraphCardFeatureConfig { return { - type: "history-chart", - hours_to_show: 24, + type: "trend-graph", }; } - public setConfig(config: HistoryChartCardFeatureConfig): void { + public setConfig(config: TrendGraphCardFeatureConfig): void { if (!config) { throw new Error("Invalid configuration"); } @@ -78,7 +79,7 @@ class HuiHistoryChartCardFeature !this._config || !this.hass || !this.context || - !supportsHistoryChartCardFeature(this.hass, this.context) + !supportsTrendGraphCardFeature(this.hass, this.context) ) { return nothing; } @@ -109,19 +110,22 @@ class HuiHistoryChartCardFeature ) { return () => Promise.resolve(); } + + const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW; + return subscribeHistoryStatesTimeWindow( this.hass!, (historyStates) => { this._coordinates = coordinatesMinimalResponseCompressedState( historyStates[this.context!.entity_id!], - this._config!.hours_to_show ?? 24, + hourToShow, 500, 2, undefined ) || []; }, - this._config!.hours_to_show ?? 24, + hourToShow, [this.context!.entity_id!] ); } @@ -148,6 +152,6 @@ class HuiHistoryChartCardFeature declare global { interface HTMLElementTagNameMap { - "hui-history-chart-card-feature": HuiHistoryChartCardFeature; + "hui-trend-graph-card-feature": HuiHistoryChartCardFeature; } } diff --git a/src/panels/lovelace/card-features/types.ts b/src/panels/lovelace/card-features/types.ts index 7dcf1fb225..6d550bab98 100644 --- a/src/panels/lovelace/card-features/types.ts +++ b/src/panels/lovelace/card-features/types.ts @@ -187,9 +187,9 @@ export interface UpdateActionsCardFeatureConfig { backup?: "yes" | "no" | "ask"; } -export interface HistoryChartCardFeatureConfig { - type: "history-chart"; - hours_to_show: number; +export interface TrendGraphCardFeatureConfig { + type: "trend-graph"; + hours_to_show?: number; } export const AREA_CONTROLS = [ @@ -239,7 +239,7 @@ export type LovelaceCardFeatureConfig = | FanOscillateCardFeatureConfig | FanPresetModesCardFeatureConfig | FanSpeedCardFeatureConfig - | HistoryChartCardFeatureConfig + | TrendGraphCardFeatureConfig | HumidifierToggleCardFeatureConfig | HumidifierModesCardFeatureConfig | LawnMowerCommandsCardFeatureConfig @@ -251,7 +251,7 @@ export type LovelaceCardFeatureConfig = | MediaPlayerVolumeSliderCardFeatureConfig | NumericInputCardFeatureConfig | SelectOptionsCardFeatureConfig - | HistoryChartCardFeatureConfig + | TrendGraphCardFeatureConfig | TargetHumidityCardFeatureConfig | TargetTemperatureCardFeatureConfig | ToggleCardFeatureConfig diff --git a/src/panels/lovelace/create-element/create-card-feature-element.ts b/src/panels/lovelace/create-element/create-card-feature-element.ts index 03fa268289..2b0e319587 100644 --- a/src/panels/lovelace/create-element/create-card-feature-element.ts +++ b/src/panels/lovelace/create-element/create-card-feature-element.ts @@ -36,7 +36,7 @@ import "../card-features/hui-valve-position-card-feature"; import "../card-features/hui-water-heater-operation-modes-card-feature"; import "../card-features/hui-area-controls-card-feature"; import "../card-features/hui-bar-gauge-card-feature"; -import "../card-features/hui-history-chart-card-feature"; +import "../card-features/hui-trend-graph-card-feature"; import type { LovelaceCardFeatureConfig } from "../card-features/types"; import { @@ -75,7 +75,7 @@ const TYPES = new Set([ "media-player-volume-slider", "numeric-input", "select-options", - "history-chart", + "trend-graph", "target-humidity", "target-temperature", "toggle", diff --git a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts index c75c3721ad..11183d9dc6 100644 --- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts @@ -46,7 +46,7 @@ import { supportsMediaPlayerPlaybackCardFeature } from "../../card-features/hui- import { supportsMediaPlayerVolumeSliderCardFeature } from "../../card-features/hui-media-player-volume-slider-card-feature"; import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature"; import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature"; -import { supportsHistoryChartCardFeature } from "../../card-features/hui-history-chart-card-feature"; +import { supportsTrendGraphCardFeature } from "../../card-features/hui-trend-graph-card-feature"; import { supportsTargetHumidityCardFeature } from "../../card-features/hui-target-humidity-card-feature"; import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature"; import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-feature"; @@ -100,7 +100,7 @@ const UI_FEATURE_TYPES = [ "media-player-volume-slider", "numeric-input", "select-options", - "history-chart", + "trend-graph", "target-humidity", "target-temperature", "toggle", @@ -168,7 +168,7 @@ const SUPPORTS_FEATURE_TYPES: Record< "media-player-volume-slider": supportsMediaPlayerVolumeSliderCardFeature, "numeric-input": supportsNumericInputCardFeature, "select-options": supportsSelectOptionsCardFeature, - "history-chart": supportsHistoryChartCardFeature, + "trend-graph": supportsTrendGraphCardFeature, "target-humidity": supportsTargetHumidityCardFeature, "target-temperature": supportsTargetTemperatureCardFeature, toggle: supportsToggleCardFeature, diff --git a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts index 80df571287..b779480b9f 100644 --- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts @@ -48,13 +48,13 @@ const processAreasForClimate = ( if (area.temperature_entity_id) { cards.push({ ...computeTileCard(area.temperature_entity_id), - features: [{ type: "history-chart" }], + features: [{ type: "trend-graph" }], }); } if (area.humidity_entity_id) { cards.push({ ...computeTileCard(area.humidity_entity_id), - features: [{ type: "history-chart" }], + features: [{ type: "trend-graph" }], }); } diff --git a/src/translations/en.json b/src/translations/en.json index 89ce025384..603f7211e8 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -8196,8 +8196,8 @@ "bar-gauge": { "label": "Bar gauge" }, - "history-chart": { - "label": "History chart" + "trend-graph": { + "label": "Trend graph" } } }, From 8f2a02377595ee4f16f1bfb41c0e07340abd4b68 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 3 Sep 2025 12:59:17 +0200 Subject: [PATCH 60/84] Bumped version to 20250903.1 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index bce684f2cb..d7959900b9 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250903.0" +version = "20250903.1" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From c7a8796a47fe24154946d9d398b6f693ad89fe39 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 3 Sep 2025 16:19:02 +0200 Subject: [PATCH 61/84] Dont align with clipboard on copy/cut automation item (#26855) --- .../config/automation/action/ha-automation-action-row.ts | 2 -- .../automation/condition/ha-automation-condition-row.ts | 2 -- src/panels/config/automation/manual-automation-editor.ts | 8 -------- .../automation/trigger/ha-automation-trigger-row.ts | 2 -- 4 files changed, 14 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 04c366cf16..6a1dcbdab6 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -89,7 +89,6 @@ import "./types/ha-automation-action-set_conversation_response"; import "./types/ha-automation-action-stop"; import "./types/ha-automation-action-wait_for_trigger"; import "./types/ha-automation-action-wait_template"; -import { copyToClipboard } from "../../../../common/util/copy-clipboard"; export const getAutomationActionType = memoizeOne( (action: Action | undefined) => { @@ -508,7 +507,6 @@ export default class HaAutomationActionRow extends LitElement { ...this._clipboard, action: deepClone(this.action), }; - copyToClipboard(JSON.stringify(this.action)); } private _onDisable = () => { diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 52dd28a4c2..9a50cd72e3 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -69,7 +69,6 @@ import "./types/ha-automation-condition-template"; import "./types/ha-automation-condition-time"; import "./types/ha-automation-condition-trigger"; import "./types/ha-automation-condition-zone"; -import { copyToClipboard } from "../../../../common/util/copy-clipboard"; export interface ConditionElement extends LitElement { condition: Condition; @@ -441,7 +440,6 @@ export default class HaAutomationConditionRow extends LitElement { ...this._clipboard, condition: deepClone(this.condition), }; - copyToClipboard(JSON.stringify(this.condition)); } private _onDisable = () => { diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 4155a8ce93..55b9a52cbf 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -498,14 +498,6 @@ export class HaManualAutomationEditor extends LitElement { if (normalized) { ev.preventDefault(); - if ( - Object.keys(normalized).length === 1 && - ensureArray(normalized[Object.keys(normalized)[0]]).length === 1 - ) { - this._appendToExistingConfig(normalized); - return; - } - if ( this.dirty || ensureArray(this.config.triggers)?.length || diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 7b2c27406e..47bf7934d3 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -25,7 +25,6 @@ import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_de import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { handleStructError } from "../../../../common/structs/handle-errors"; -import { copyToClipboard } from "../../../../common/util/copy-clipboard"; import { debounce } from "../../../../common/util/debounce"; import "../../../../components/ha-alert"; import "../../../../components/ha-automation-row"; @@ -533,7 +532,6 @@ export default class HaAutomationTriggerRow extends LitElement { ...this._clipboard, trigger: this.trigger, }; - copyToClipboard(JSON.stringify(this.trigger)); } private _onDelete = () => { From 2a6a3edb77d627f0d2e53f3e1dfbb176aca0b6f5 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 3 Sep 2025 16:20:26 +0200 Subject: [PATCH 62/84] Bumped version to 20250903.2 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index d7959900b9..3547a49ba5 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250903.1" +version = "20250903.2" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From a164d793b1d68b2b39d211516dc4e39370e7cf38 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Wed, 3 Sep 2025 18:55:33 +0200 Subject: [PATCH 63/84] Home dashboard: Climate fix (#26856) * Climate dashboard fix * Update home-climate-view-strategy.ts --- .../strategies/home/home-climate-view-strategy.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts index b779480b9f..7038bd90f1 100644 --- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts @@ -45,15 +45,17 @@ const processAreasForClimate = ( }, }); - if (area.temperature_entity_id) { + const temperatureEntityId = area.temperature_entity_id; + if (temperatureEntityId && hass.states[temperatureEntityId]) { cards.push({ - ...computeTileCard(area.temperature_entity_id), + ...computeTileCard(temperatureEntityId), features: [{ type: "trend-graph" }], }); } - if (area.humidity_entity_id) { + const humidityEntityId = area.humidity_entity_id; + if (humidityEntityId && hass.states[humidityEntityId]) { cards.push({ - ...computeTileCard(area.humidity_entity_id), + ...computeTileCard(humidityEntityId), features: [{ type: "trend-graph" }], }); } From 1e95a0f3efcf65cf756d1201392cca66c8628915 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 4 Sep 2025 10:11:35 +0200 Subject: [PATCH 64/84] Display area with only sensors in climate view in home dashboard (#26863) * Display area with only sensors in climate view in home dashboard * Update home-climate-view-strategy.ts Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com> --------- Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com> --- .../home/home-climate-view-strategy.ts | 42 ++++++++++--------- .../home/home-lights-view-strategy.ts | 12 +++--- .../home/home-media-players-view-strategy.ts | 16 +++---- .../home/home-security-view-strategy.ts | 11 +++-- 4 files changed, 45 insertions(+), 36 deletions(-) diff --git a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts index 7038bd90f1..a76d318d81 100644 --- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts @@ -33,8 +33,28 @@ const processAreasForClimate = ( area: area.area_id, }); const areaEntities = entities.filter(areaFilter); + const areaCards: LovelaceCardConfig[] = []; - if (areaEntities.length > 0) { + const temperatureEntityId = area.temperature_entity_id; + if (temperatureEntityId && hass.states[temperatureEntityId]) { + areaCards.push({ + ...computeTileCard(temperatureEntityId), + features: [{ type: "trend-graph" }], + }); + } + const humidityEntityId = area.humidity_entity_id; + if (humidityEntityId && hass.states[humidityEntityId]) { + areaCards.push({ + ...computeTileCard(humidityEntityId), + features: [{ type: "trend-graph" }], + }); + } + + for (const entityId of areaEntities) { + areaCards.push(computeTileCard(entityId)); + } + + if (areaCards.length > 0) { cards.push({ heading_style: "subtitle", type: "heading", @@ -44,25 +64,7 @@ const processAreasForClimate = ( navigation_path: `areas-${area.area_id}`, }, }); - - const temperatureEntityId = area.temperature_entity_id; - if (temperatureEntityId && hass.states[temperatureEntityId]) { - cards.push({ - ...computeTileCard(temperatureEntityId), - features: [{ type: "trend-graph" }], - }); - } - const humidityEntityId = area.humidity_entity_id; - if (humidityEntityId && hass.states[humidityEntityId]) { - cards.push({ - ...computeTileCard(humidityEntityId), - features: [{ type: "trend-graph" }], - }); - } - - for (const entityId of areaEntities) { - cards.push(computeTileCard(entityId)); - } + cards.push(...areaCards); } } diff --git a/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts b/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts index b502779a6a..5a1c486f72 100644 --- a/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts @@ -32,10 +32,15 @@ const processAreasForLights = ( area: area.area_id, }); const areaLights = entities.filter(areaFilter); + const areaCards: LovelaceCardConfig[] = []; const computeTileCard = computeAreaTileCardConfig(hass, "", false); - if (areaLights.length > 0) { + for (const entityId of areaLights) { + areaCards.push(computeTileCard(entityId)); + } + + if (areaCards.length > 0) { cards.push({ heading_style: "subtitle", type: "heading", @@ -45,10 +50,7 @@ const processAreasForLights = ( navigation_path: `areas-${area.area_id}`, }, }); - - for (const entityId of areaLights) { - cards.push(computeTileCard(entityId)); - } + cards.push(...areaCards); } } diff --git a/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts b/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts index 7cb6c9ec40..362a6debc0 100644 --- a/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts @@ -29,6 +29,14 @@ const processAreasForMediaPlayers = ( area: area.area_id, }); const areaEntities = entities.filter(areaFilter); + const areaCards: LovelaceCardConfig[] = []; + + for (const entityId of areaEntities) { + cards.push({ + type: "media-control", + entity: entityId, + } satisfies MediaControlCardConfig); + } if (areaEntities.length > 0) { cards.push({ @@ -40,13 +48,7 @@ const processAreasForMediaPlayers = ( navigation_path: `areas-${area.area_id}`, }, }); - - for (const entityId of areaEntities) { - cards.push({ - type: "media-control", - entity: entityId, - } satisfies MediaControlCardConfig); - } + cards.push(...areaCards); } } diff --git a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts index 44ed682a15..910a885b4c 100644 --- a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts +++ b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts @@ -32,7 +32,13 @@ const processAreasForSecurity = ( const areaFilter = generateEntityFilter(hass, { area: area.area_id, }); + const areaEntities = entities.filter(areaFilter); + const areaCards: LovelaceCardConfig[] = []; + + for (const entityId of areaEntities) { + areaCards.push(computeTileCard(entityId)); + } if (areaEntities.length > 0) { cards.push({ @@ -44,10 +50,7 @@ const processAreasForSecurity = ( navigation_path: `areas-${area.area_id}`, }, }); - - for (const entityId of areaEntities) { - cards.push(computeTileCard(entityId)); - } + cards.push(...areaCards); } } From 96ecf16da2ea4baeac64b788ecb23d684b6d0562 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Thu, 4 Sep 2025 16:11:38 +0200 Subject: [PATCH 65/84] Translate del in shortcut dialog (#26865) --- src/dialogs/shortcuts/dialog-shortcuts.ts | 170 ++++++++++++---------- src/translations/en.json | 3 + 2 files changed, 95 insertions(+), 78 deletions(-) diff --git a/src/dialogs/shortcuts/dialog-shortcuts.ts b/src/dialogs/shortcuts/dialog-shortcuts.ts index 415cdab476..4ab3cbbad3 100644 --- a/src/dialogs/shortcuts/dialog-shortcuts.ts +++ b/src/dialogs/shortcuts/dialog-shortcuts.ts @@ -11,20 +11,22 @@ import type { HomeAssistant } from "../../types"; import { isMac } from "../../util/is_mac"; interface Text { - type: "text"; - key: LocalizeKeys; + textTranslationKey: LocalizeKeys; } -type ShortcutString = string | { key: LocalizeKeys }; +interface LocalizedShortcut { + shortcutTranslationKey: LocalizeKeys; +} + +type ShortcutString = string | LocalizedShortcut; interface Shortcut { - type: "shortcut"; shortcut: ShortcutString[]; - key: LocalizeKeys; + descriptionTranslationKey: LocalizeKeys; } interface Section { - key: LocalizeKeys; + titleTranslationKey: LocalizeKeys; items: (Text | Shortcut)[]; } @@ -32,105 +34,115 @@ const CTRL_CMD = "__CTRL_CMD__"; const _SHORTCUTS: Section[] = [ { - key: "ui.dialogs.shortcuts.searching.title", + titleTranslationKey: "ui.dialogs.shortcuts.searching.title", items: [ - { type: "text", key: "ui.dialogs.shortcuts.searching.on_any_page" }, { - type: "shortcut", + textTranslationKey: "ui.dialogs.shortcuts.searching.on_any_page", + }, + { shortcut: ["C"], - key: "ui.dialogs.shortcuts.searching.search_command", + descriptionTranslationKey: + "ui.dialogs.shortcuts.searching.search_command", }, { - type: "shortcut", shortcut: ["E"], - key: "ui.dialogs.shortcuts.searching.search_entities", + descriptionTranslationKey: + "ui.dialogs.shortcuts.searching.search_entities", }, { - type: "shortcut", shortcut: ["D"], - key: "ui.dialogs.shortcuts.searching.search_devices", + descriptionTranslationKey: + "ui.dialogs.shortcuts.searching.search_devices", }, { - type: "text", - key: "ui.dialogs.shortcuts.searching.on_pages_with_tables", + textTranslationKey: + "ui.dialogs.shortcuts.searching.on_pages_with_tables", }, { - type: "shortcut", shortcut: [CTRL_CMD, "F"], - key: "ui.dialogs.shortcuts.searching.search_in_table", + descriptionTranslationKey: + "ui.dialogs.shortcuts.searching.search_in_table", }, ], }, { - key: "ui.dialogs.shortcuts.assist.title", + titleTranslationKey: "ui.dialogs.shortcuts.assist.title", items: [ { - type: "shortcut", shortcut: ["A"], - key: "ui.dialogs.shortcuts.assist.open_assist", + descriptionTranslationKey: "ui.dialogs.shortcuts.assist.open_assist", }, ], }, { - key: "ui.dialogs.shortcuts.automation_script.title", + titleTranslationKey: "ui.dialogs.shortcuts.automation_script.title", items: [ { - type: "shortcut", shortcut: [CTRL_CMD, "C"], - key: "ui.dialogs.shortcuts.automation_script.copy", + descriptionTranslationKey: + "ui.dialogs.shortcuts.automation_script.copy", }, { - type: "shortcut", shortcut: [CTRL_CMD, "X"], - key: "ui.dialogs.shortcuts.automation_script.cut", + descriptionTranslationKey: "ui.dialogs.shortcuts.automation_script.cut", }, { - type: "shortcut", - shortcut: [CTRL_CMD, "del"], - key: "ui.dialogs.shortcuts.automation_script.delete", - }, - { - type: "shortcut", - shortcut: [CTRL_CMD, "V"], - key: "ui.dialogs.shortcuts.automation_script.paste", - }, - { - type: "shortcut", - shortcut: [CTRL_CMD, "S"], - key: "ui.dialogs.shortcuts.automation_script.save", - }, - ], - }, - { - key: "ui.dialogs.shortcuts.charts.title", - items: [ - { - type: "shortcut", - shortcut: [CTRL_CMD, { key: "ui.dialogs.shortcuts.shortcuts.drag" }], - key: "ui.dialogs.shortcuts.charts.drag_to_zoom", - }, - { - type: "shortcut", shortcut: [ CTRL_CMD, - { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" }, + { shortcutTranslationKey: "ui.dialogs.shortcuts.keys.del" }, ], - key: "ui.dialogs.shortcuts.charts.scroll_to_zoom", + descriptionTranslationKey: + "ui.dialogs.shortcuts.automation_script.delete", }, { - type: "shortcut", - shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }], - key: "ui.dialogs.shortcuts.charts.double_click", + shortcut: [CTRL_CMD, "V"], + descriptionTranslationKey: + "ui.dialogs.shortcuts.automation_script.paste", + }, + { + shortcut: [CTRL_CMD, "S"], + descriptionTranslationKey: + "ui.dialogs.shortcuts.automation_script.save", }, ], }, { - key: "ui.dialogs.shortcuts.other.title", + titleTranslationKey: "ui.dialogs.shortcuts.charts.title", + items: [ + { + shortcut: [ + CTRL_CMD, + { shortcutTranslationKey: "ui.dialogs.shortcuts.shortcuts.drag" }, + ], + descriptionTranslationKey: "ui.dialogs.shortcuts.charts.drag_to_zoom", + }, + { + shortcut: [ + CTRL_CMD, + { + shortcutTranslationKey: + "ui.dialogs.shortcuts.shortcuts.scroll_wheel", + }, + ], + descriptionTranslationKey: "ui.dialogs.shortcuts.charts.scroll_to_zoom", + }, + { + shortcut: [ + { + shortcutTranslationKey: + "ui.dialogs.shortcuts.shortcuts.double_click", + }, + ], + descriptionTranslationKey: "ui.dialogs.shortcuts.charts.double_click", + }, + ], + }, + { + titleTranslationKey: "ui.dialogs.shortcuts.other.title", items: [ { - type: "shortcut", shortcut: ["M"], - key: "ui.dialogs.shortcuts.other.my_link", + descriptionTranslationKey: "ui.dialogs.shortcuts.other.my_link", }, ], }, @@ -152,28 +164,28 @@ class DialogShortcuts extends LitElement { } private _renderShortcut( - shortcuts: ShortcutString[], - translationKey: LocalizeKeys + shortcutKeys: ShortcutString[], + descriptionKey: LocalizeKeys ) { - const keys = shortcuts.map((shortcut) => - typeof shortcut === "string" ? shortcut : this.hass.localize(shortcut.key) - ); - return html`
    - ${keys.map( - (key) => + ${shortcutKeys.map( + (shortcutKey) => html`${key === CTRL_CMD + >${shortcutKey === CTRL_CMD ? isMac ? html`` : this.hass.localize("ui.panel.config.automation.editor.ctrl") - : key}` )} - ${this.hass.localize(translationKey)} + ${this.hass.localize(descriptionKey)}
    `; } @@ -197,16 +209,18 @@ class DialogShortcuts extends LitElement {
    ${_SHORTCUTS.map( (section) => html` -

    ${this.hass.localize(section.key)}

    +

    ${this.hass.localize(section.titleTranslationKey)}

    ${section.items.map((item) => { - if (item.type === "text") { - return html`

    ${this.hass.localize(item.key)}

    `; + if ("shortcut" in item) { + return this._renderShortcut( + (item as Shortcut).shortcut, + (item as Shortcut).descriptionTranslationKey + ); } - if (item.type === "shortcut") { - return this._renderShortcut(item.shortcut, item.key); - } - return nothing; + return html`

    + ${this.hass.localize((item as Text).textTranslationKey)} +

    `; })}
    ` diff --git a/src/translations/en.json b/src/translations/en.json index 603f7211e8..f9ed4e2da8 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2040,6 +2040,9 @@ "title": "Shortcuts", "enable_shortcuts_hint": "For keyboard shortcuts to work, make sure you have them enabled in your {user_profile}.", "enable_shortcuts_hint_user_profile": "user profile", + "keys": { + "del": "Del" + }, "shortcuts": { "double_click": "Double-click", "scroll_wheel": "Scroll", From 8746acd32929e85b83e5855b386583989f91aa43 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Thu, 4 Sep 2025 10:42:41 +0200 Subject: [PATCH 66/84] Fix script with fields fields in tile card button feature (#26866) Check script fields in tile card button feature --- .../lovelace/card-features/hui-button-card-feature.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/panels/lovelace/card-features/hui-button-card-feature.ts b/src/panels/lovelace/card-features/hui-button-card-feature.ts index 021c79735d..aabab84c79 100644 --- a/src/panels/lovelace/card-features/hui-button-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-button-card-feature.ts @@ -4,6 +4,8 @@ import { customElement, property, state } from "lit/decorators"; import { computeDomain } from "../../../common/entity/compute_domain"; import "../../../components/ha-control-button"; import "../../../components/ha-control-button-group"; +import { hasScriptFields } from "../../../data/script"; +import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog"; import type { HomeAssistant } from "../../../types"; import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types"; import { cardFeatureStyles } from "./common/card-feature-styles"; @@ -46,6 +48,14 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature { const service = domain === "button" || domain === "input_button" ? "press" : "turn_on"; + if (domain === "script") { + const entityId = this._stateObj.entity_id; + if (hasScriptFields(this.hass!, entityId)) { + showMoreInfoDialog(this, { entityId: entityId }); + return; + } + } + this.hass.callService(domain, service, { entity_id: this._stateObj.entity_id, }); From bc4caae796eefca5c53772761ab6d011179d6697 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 4 Sep 2025 11:14:16 +0200 Subject: [PATCH 67/84] Revert "Rename "Logbook" to "Activity" in user-facing strings" (#26867) Revert "Rename "Logbook" to "Activity" in user-facing strings (#26619)" This reverts commit 057fad55e8115f8a513b5fab97a3daa5ac871609. --- src/translations/en.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/translations/en.json b/src/translations/en.json index f9ed4e2da8..2292b67bc0 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5,7 +5,7 @@ "config": "Settings", "states": "Overview", "map": "Map", - "logbook": "Activity", + "logbook": "Logbook", "history": "History", "todo": "To-do lists", "developer_tools": "Developer tools", @@ -526,7 +526,7 @@ } }, "logbook": { - "entries_not_found": "No activity found.", + "entries_not_found": "No logbook events found.", "triggered_by": "triggered by", "triggered_by_automation": "triggered by automation", "triggered_by_script": "triggered by script", @@ -539,7 +539,7 @@ "triggered_by_homeassistant_stopping": "triggered by Home Assistant stopping", "triggered_by_homeassistant_starting": "triggered by Home Assistant starting", "show_trace": "[%key:ui::panel::config::automation::editor::show_trace%]", - "retrieval_error": "Could not load activity", + "retrieval_error": "Could not load logbook", "not_loaded": "[%key:ui::dialogs::helper_settings::platform_not_loaded%]", "messages": { "was_away": "was detected away", @@ -1382,7 +1382,7 @@ "info": "Information", "related": "Related", "history": "History", - "logbook": "Activity", + "logbook": "Logbook", "device_info": "Device info", "device_or_service_info": "[%key:ui::panel::config::devices::device_info%]", "device_type": { @@ -4596,7 +4596,7 @@ "tabs": { "details": "Step details", "timeline": "Trace timeline", - "logbook": "Related activity", + "logbook": "Related logbook entries", "automation_config": "Automation config", "step_config": "Step config", "changed_variables": "Changed variables", @@ -4613,7 +4613,7 @@ "error": "Error: {error}", "result": "Result:", "step_not_executed": "This step was not executed.", - "no_logbook_entries": "No activity found for this step.", + "no_logbook_entries": "No logbook entries found for this step.", "no_variables_changed": "No variables changed", "unable_to_find_config": "Unable to find config" }, @@ -4639,8 +4639,8 @@ "disabled": "(disabled)", "triggered_by": "{triggeredBy, select, \n alias {{alias} triggered}\n other {Triggered} \n} {triggeredPath, select, \n trigger {by the {trigger}}\n other {manually} \n} at {time}", "path_error": "Unable to extract path {path}. Download trace and report as bug.", - "not_all_entries_are_related_automation_note": "Not all shown activity might be related to this automation.", - "not_all_entries_are_related_script_note": "Not all shown activity might be related to this script." + "not_all_entries_are_related_automation_note": "Not all shown logbook entries might be related to this automation.", + "not_all_entries_are_related_script_note": "Not all shown logbook entries might be related to this script." } } }, @@ -7557,8 +7557,8 @@ "square": "Render cards as squares" }, "logbook": { - "name": "Activity", - "description": "The Activity card shows a list of events for entities." + "name": "Logbook", + "description": "The Logbook card shows a list of events for entities." }, "history-graph": { "name": "History graph", From 2bfaf77908497a4edb9df31db021df58259618d5 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 4 Sep 2025 16:28:02 +0200 Subject: [PATCH 68/84] Add UI editor for trend graph feature (#26872) --- .../hui-trend-graph-card-feature.ts | 11 ++- .../hui-card-features-editor.ts | 1 + .../hui-trend-graph-card-feature-editor.ts | 82 +++++++++++++++++++ 3 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts diff --git a/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts b/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts index 803f5d8fe4..273447beb7 100644 --- a/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts @@ -9,7 +9,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import type { HomeAssistant } from "../../../types"; import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates"; import "../components/hui-graph-base"; -import type { LovelaceCardFeature } from "../types"; +import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types"; import type { TrendGraphCardFeatureConfig, LovelaceCardFeatureContext, @@ -27,7 +27,7 @@ export const supportsTrendGraphCardFeature = ( return domain === "sensor" && isNumericFromAttributes(stateObj.attributes); }; -const DEFAULT_HOURS_TO_SHOW = 24; +export const DEFAULT_HOURS_TO_SHOW = 24; @customElement("hui-trend-graph-card-feature") class HuiHistoryChartCardFeature @@ -51,6 +51,13 @@ class HuiHistoryChartCardFeature }; } + public static async getConfigElement(): Promise { + await import( + "../editor/config-elements/hui-trend-graph-card-feature-editor" + ); + return document.createElement("hui-trend-graph-card-feature-editor"); + } + public setConfig(config: TrendGraphCardFeatureConfig): void { if (!config) { throw new Error("Invalid configuration"); diff --git a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts index 11183d9dc6..f18485644f 100644 --- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts @@ -128,6 +128,7 @@ const EDITABLES_FEATURE_TYPES = new Set([ "lawn-mower-commands", "numeric-input", "select-options", + "trend-graph", "update-actions", "vacuum-commands", "water-heater-operation-modes", diff --git a/src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts b/src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts new file mode 100644 index 0000000000..f0f917d5d3 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts @@ -0,0 +1,82 @@ +import { html, LitElement, nothing } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import "../../../../components/ha-form/ha-form"; +import type { + HaFormSchema, + SchemaUnion, +} from "../../../../components/ha-form/types"; +import type { HomeAssistant } from "../../../../types"; +import { DEFAULT_HOURS_TO_SHOW } from "../../card-features/hui-trend-graph-card-feature"; +import type { + LovelaceCardFeatureContext, + TrendGraphCardFeatureConfig, +} from "../../card-features/types"; +import type { LovelaceCardFeatureEditor } from "../../types"; + +const SCHEMA = [ + { + name: "hours_to_show", + default: DEFAULT_HOURS_TO_SHOW, + selector: { number: { min: 1, mode: "box" } }, + }, +] as const satisfies HaFormSchema[]; + +@customElement("hui-trend-graph-card-feature-editor") +export class HuiTrendGraphCardFeatureEditor + extends LitElement + implements LovelaceCardFeatureEditor +{ + @property({ attribute: false }) public hass?: HomeAssistant; + + @property({ attribute: false }) public context?: LovelaceCardFeatureContext; + + @state() private _config?: TrendGraphCardFeatureConfig; + + public setConfig(config: TrendGraphCardFeatureConfig): void { + this._config = config; + } + + protected render() { + if (!this.hass || !this._config) { + return nothing; + } + + const data = { ...this._config }; + + if (!this._config.hours_to_show) { + data.hours_to_show = DEFAULT_HOURS_TO_SHOW; + } + + return html` + + `; + } + + private _valueChanged(ev: CustomEvent): void { + fireEvent(this, "config-changed", { config: ev.detail.value }); + } + + private _computeLabelCallback = (schema: SchemaUnion) => { + switch (schema.name) { + case "hours_to_show": + return this.hass!.localize( + `ui.panel.lovelace.editor.card.generic.${schema.name}` + ); + default: + return ""; + } + }; +} + +declare global { + interface HTMLElementTagNameMap { + "hui-trend-graph-card-feature-editor": HuiTrendGraphCardFeatureEditor; + } +} From 9affeab75548fabc3e08f0ebbb13ea6501f02c44 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Thu, 4 Sep 2025 16:42:39 +0300 Subject: [PATCH 69/84] Fix highlighting issue in Energy Sankey card (#26878) --- .../cards/energy/hui-energy-sankey-card.ts | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts index d11babf41e..07e2f3dc3a 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts @@ -109,7 +109,7 @@ class HuiEnergySankeyCard "ui.panel.lovelace.cards.energy.energy_distribution.home" ), value: Math.max(0, consumption.total.used_total), - color: computedStyle.getPropertyValue("--primary-color"), + color: computedStyle.getPropertyValue("--primary-color").trim(), index: 1, }; nodes.push(homeNode); @@ -125,7 +125,9 @@ class HuiEnergySankeyCard "ui.panel.lovelace.cards.energy.energy_distribution.battery" ), value: totalBatteryOut, - color: computedStyle.getPropertyValue("--energy-battery-out-color"), + color: computedStyle + .getPropertyValue("--energy-battery-out-color") + .trim(), index: 0, }); links.push({ @@ -141,7 +143,9 @@ class HuiEnergySankeyCard "ui.panel.lovelace.cards.energy.energy_distribution.battery" ), value: totalBatteryIn, - color: computedStyle.getPropertyValue("--energy-battery-in-color"), + color: computedStyle + .getPropertyValue("--energy-battery-in-color") + .trim(), index: 1, }); if (consumption.total.grid_to_battery > 0) { @@ -169,9 +173,9 @@ class HuiEnergySankeyCard "ui.panel.lovelace.cards.energy.energy_distribution.grid" ), value: totalFromGrid, - color: computedStyle.getPropertyValue( - "--energy-grid-consumption-color" - ), + color: computedStyle + .getPropertyValue("--energy-grid-consumption-color") + .trim(), index: 0, }); @@ -192,7 +196,7 @@ class HuiEnergySankeyCard "ui.panel.lovelace.cards.energy.energy_distribution.solar" ), value: totalSolarProduction, - color: computedStyle.getPropertyValue("--energy-solar-color"), + color: computedStyle.getPropertyValue("--energy-solar-color").trim(), index: 0, }); @@ -213,7 +217,9 @@ class HuiEnergySankeyCard "ui.panel.lovelace.cards.energy.energy_distribution.grid" ), value: totalToGrid, - color: computedStyle.getPropertyValue("--energy-grid-return-color"), + color: computedStyle + .getPropertyValue("--energy-grid-return-color") + .trim(), index: 1, }); if (consumption.total.battery_to_grid > 0) { @@ -295,7 +301,7 @@ class HuiEnergySankeyCard label: this.hass.floors[floorId].name, value: floors[floorId].value, index: 2, - color: computedStyle.getPropertyValue("--primary-color"), + color: computedStyle.getPropertyValue("--primary-color").trim(), }); links.push({ source: "home", @@ -316,7 +322,7 @@ class HuiEnergySankeyCard label: this.hass.areas[areaId]!.name, value: areas[areaId].value, index: 3, - color: computedStyle.getPropertyValue("--primary-color"), + color: computedStyle.getPropertyValue("--primary-color").trim(), }); links.push({ source: floorNodeId, @@ -360,7 +366,9 @@ class HuiEnergySankeyCard "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption" ), value: untrackedConsumption, - color: computedStyle.getPropertyValue("--state-unavailable-color"), + color: computedStyle + .getPropertyValue("--state-unavailable-color") + .trim(), index: 3 + deviceSections.length, }); links.push({ From a66f5fb573ee3e1f5a86e9f5dd68c384e1db62e4 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 4 Sep 2025 15:50:39 +0200 Subject: [PATCH 70/84] Fix testing condition in iOS (#26879) --- src/components/ha-bottom-sheet.ts | 1 - .../sidebar/ha-automation-sidebar-card.ts | 2 +- .../ha-automation-sidebar-condition.ts | 71 ++++++++++++------- src/panels/config/automation/styles.ts | 2 +- 4 files changed, 46 insertions(+), 30 deletions(-) diff --git a/src/components/ha-bottom-sheet.ts b/src/components/ha-bottom-sheet.ts index 49914f6e7d..6c67d5aea5 100644 --- a/src/components/ha-bottom-sheet.ts +++ b/src/components/ha-bottom-sheet.ts @@ -232,7 +232,6 @@ export class HaBottomSheet extends LitElement { box-shadow: var(--wa-shadow-l); padding: 0; margin: 0; - top: auto; inset-inline-end: auto; bottom: 0; diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts index b3ff5af54e..f6badadc05 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts @@ -171,7 +171,6 @@ export default class HaAutomationSidebarCard extends LitElement { transition: box-shadow 180ms ease-in-out; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - z-index: 6; position: relative; background-color: var( --ha-dialog-surface-background, @@ -201,6 +200,7 @@ export default class HaAutomationSidebarCard extends LitElement { .card-content { max-height: calc(100% - 80px); overflow: auto; + margin-top: 0; } @media (min-width: 450px) and (min-height: 500px) { diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts index c750417574..a0c4cda870 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -65,6 +65,10 @@ export default class HaAutomationSidebarCondition extends LitElement { } } } + // Reset testing state when condition changes + if (changedProperties.has("sidebarKey")) { + this._testing = false; + } } protected render() { @@ -283,20 +287,23 @@ export default class HaAutomationSidebarCondition extends LitElement { sidebar >` )} -
    - ${this._testingResult - ? this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_pass" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_error" - )} +
    +
    + ${this._testingResult + ? this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_pass" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_error" + )} +
    `; } @@ -396,21 +403,13 @@ export default class HaAutomationSidebarCondition extends LitElement { ha-automation-sidebar-card { position: relative; } - .testing { + .testing-wrapper { position: absolute; - z-index: 6; top: 0px; right: 0px; left: 0px; - text-transform: uppercase; - font-size: var(--ha-font-size-m); - font-weight: var(--ha-font-weight-bold); - background-color: var(--divider-color, #e0e0e0); - color: var(--text-primary-color); - max-height: 0px; + margin: -1px; overflow: hidden; - transition: max-height 0.3s; - text-align: center; border-top-right-radius: var( --ha-card-border-radius, var(--ha-border-radius-lg) @@ -419,15 +418,33 @@ export default class HaAutomationSidebarCondition extends LitElement { --ha-card-border-radius, var(--ha-border-radius-lg) ); + pointer-events: none; + height: 100px; + } + .testing { + --testing-color: var(--divider-color, #e0e0e0); + text-transform: uppercase; + font-size: var(--ha-font-size-m); + font-weight: var(--ha-font-weight-bold); + background-color: var(--testing-color); + color: var(--text-primary-color); + max-height: 0px; + transition: + max-height 0.3s ease-in-out, + padding-top 0.3s ease-in-out; + text-align: center; + } + .testing.active.narrow { + padding-top: 16px; } .testing.active { - max-height: 100px; + max-height: 100%; } .testing.error { - background-color: var(--accent-color); + --testing-color: var(--accent-color); } .testing.pass { - background-color: var(--success-color); + --testing-color: var(--success-color); } `, ]; diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 750224b440..a2a8a19bb6 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -217,7 +217,7 @@ export const automationRowsStyles = css` export const sidebarEditorStyles = css` .sidebar-editor { display: block; - padding-top: 16px; + padding-top: 8px; } .description { padding-top: 16px; From 1c1c0d70c5189d8b70ae29a653890d7aee920be3 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 4 Sep 2025 16:30:32 +0200 Subject: [PATCH 71/84] Bumped version to 20250903.3 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 3547a49ba5..0cd8b58b99 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250903.2" +version = "20250903.3" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" From 24e3fbf622cb344b953a76257db6bf7930846ef6 Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Sun, 7 Sep 2025 23:33:02 -0700 Subject: [PATCH 72/84] Fix condition action in config flow dialog (#26929) --- .../automation/action/types/ha-automation-action-condition.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts index 5e2946f5fb..ca7357bc4c 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts @@ -3,6 +3,7 @@ import { customElement, property, query } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { stringCompare } from "../../../../../common/string/compare"; +import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import type { LocalizeFunc } from "../../../../../common/translations/localize"; import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; @@ -66,6 +67,7 @@ export class HaConditionAction extends LitElement implements ActionElement { .value=${this.action.condition} naturalMenuWidth @selected=${this._typeChanged} + @closed=${stopPropagation} > ${this._processedTypes(this.hass.localize).map( ([opt, label, icon]) => html` From 21aae026522410a4b526ed9b02c7502147c13bae Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Tue, 9 Sep 2025 00:26:18 -0700 Subject: [PATCH 73/84] Mark new automation as dirty if it has initData (#26953) --- src/panels/config/automation/ha-automation-editor.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 542beb6c88..744e93c3aa 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -593,6 +593,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( this.hass ) { const initData = getAutomationEditorInitData(); + this._dirty = !!initData; let baseConfig: Partial = { description: "" }; if (!initData || !("use_blueprint" in initData)) { baseConfig = { From 9fba7427f88bf03782393b600d22462eb217e97d Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Tue, 9 Sep 2025 09:25:06 +0200 Subject: [PATCH 74/84] Fix yaml editor save in config-flow (#26963) --- .../config/automation/action/ha-automation-action-editor.ts | 2 +- .../automation/condition/ha-automation-condition-editor.ts | 4 +++- .../config/automation/trigger/ha-automation-trigger-editor.ts | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-editor.ts b/src/panels/config/automation/action/ha-automation-action-editor.ts index 97cea3f6c1..7562fafcd8 100644 --- a/src/panels/config/automation/action/ha-automation-action-editor.ts +++ b/src/panels/config/automation/action/ha-automation-action-editor.ts @@ -97,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement { if (!ev.detail.isValid) { return; } - fireEvent(this, "yaml-changed", { + fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", { value: migrateAutomationAction(ev.detail.value), }); } diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index 614ec520e3..d3aaf8cbdd 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -103,7 +103,9 @@ export default class HaAutomationConditionEditor extends LitElement { if (!ev.detail.isValid) { return; } - fireEvent(this, "yaml-changed", { value: ev.detail.value }); + fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", { + value: ev.detail.value, + }); } private _onUiChanged(ev: CustomEvent) { diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts index e354a56713..e28a57c407 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts @@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement { if (!ev.detail.isValid) { return; } - fireEvent(this, "yaml-changed", { + fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", { value: migrateAutomationTrigger(ev.detail.value), }); } From 455925f63796eba4162a25afa9a31ad75f422431 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 9 Sep 2025 09:53:06 +0200 Subject: [PATCH 75/84] Don't trigger automation shortcuts when a field is focused or text selected (#26965) * Don't trigger automation shortcut when a field is focused * Don't trigger automation shortcut when a text is selected --- src/mixins/keyboard-shortcut-mixin.ts | 9 +++++++++ src/panels/config/script/ha-script-editor.ts | 1 + 2 files changed, 10 insertions(+) diff --git a/src/mixins/keyboard-shortcut-mixin.ts b/src/mixins/keyboard-shortcut-mixin.ts index 9609f4bb18..e0fd041454 100644 --- a/src/mixins/keyboard-shortcut-mixin.ts +++ b/src/mixins/keyboard-shortcut-mixin.ts @@ -1,5 +1,6 @@ import type { LitElement } from "lit"; import type { Constructor } from "../types"; +import { canOverrideAlphanumericInput } from "../common/dom/can-override-input"; declare global { type SupportedShortcuts = Record void>; @@ -17,6 +18,14 @@ export const KeyboardShortcutMixin = >( !event.altKey && event.key in supportedShortcuts ) { + // Only capture the event if the user is not focused on an input + if (!canOverrideAlphanumericInput(event.composedPath())) { + return; + } + // Don't capture the event if the user is selecting text + if (window.getSelection()?.toString()) { + return; + } event.preventDefault(); supportedShortcuts[event.key](); return; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index e1536f4015..44c9ab78d0 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1024,6 +1024,7 @@ export class HaScriptEditor extends SubscribeMixin( c: () => this._copySelectedRow(), x: () => this._cutSelectedRow(), Delete: () => this._deleteSelectedRow(), + Backspace: () => this._deleteSelectedRow(), }; } From 8b45ccaaba90937d2e5adfd8e2cd0db8ab9b15d5 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Fri, 12 Sep 2025 10:46:23 +0200 Subject: [PATCH 76/84] Only copy/cut/delete selected automation rows (#26966) --- src/components/ha-automation-row.ts | 25 ------------------- .../action/ha-automation-action-row.ts | 3 --- .../condition/ha-automation-condition-row.ts | 3 --- .../trigger/ha-automation-trigger-row.ts | 3 --- 4 files changed, 34 deletions(-) diff --git a/src/components/ha-automation-row.ts b/src/components/ha-automation-row.ts index fe9d6d27a3..21772e1940 100644 --- a/src/components/ha-automation-row.ts +++ b/src/components/ha-automation-row.ts @@ -83,15 +83,6 @@ export class HaAutomationRow extends LitElement { !(ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "ArrowUp" || ev.key === "ArrowDown") - ) && - !( - (ev.ctrlKey || ev.metaKey) && - !ev.shiftKey && - !ev.altKey && - (ev.key === "c" || - ev.key === "x" || - ev.key === "Delete" || - ev.key === "Backspace") ) ) { return; @@ -112,22 +103,6 @@ export class HaAutomationRow extends LitElement { return; } - if (ev.ctrlKey || ev.metaKey) { - if (ev.key === "c") { - fireEvent(this, "copy-row"); - return; - } - if (ev.key === "x") { - fireEvent(this, "cut-row"); - return; - } - - if (ev.key === "Delete" || ev.key === "Backspace") { - fireEvent(this, "delete-row"); - return; - } - } - this.click(); } diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 6a1dcbdab6..56b344923f 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -460,9 +460,6 @@ export default class HaAutomationActionRow extends LitElement { .sortSelected=${this.sortSelected} @click=${this._toggleSidebar} @toggle-collapsed=${this._toggleCollapse} - @copy-row=${this._copyAction} - @cut-row=${this._cutAction} - @delete-row=${this._onDelete} >${this._renderRow()}` : html` diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 9a50cd72e3..efb4298e69 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -369,9 +369,6 @@ export default class HaAutomationConditionRow extends LitElement { .sortSelected=${this.sortSelected} @click=${this._toggleSidebar} @toggle-collapsed=${this._toggleCollapse} - @copy-row=${this._copyCondition} - @cut-row=${this._cutCondition} - @delete-row=${this._onDelete} >${this._renderRow()}` : html` diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 47bf7934d3..71ad872fa2 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -358,9 +358,6 @@ export default class HaAutomationTriggerRow extends LitElement { .highlight=${this.highlight} .sortSelected=${this.sortSelected} @click=${this._toggleSidebar} - @copy-row=${this._copyTrigger} - @cut-row=${this._cutTrigger} - @delete-row=${this._onDelete} >${this._selected ? "selected" : nothing}${this._renderRow()} Date: Tue, 9 Sep 2025 20:28:09 +0300 Subject: [PATCH 77/84] Fix for batteries with long names in energy dashboard (#26972) --- .../config/energy/components/ha-energy-battery-settings.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts index 92dd4582e5..d38be1d75d 100644 --- a/src/panels/config/energy/components/ha-energy-battery-settings.ts +++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts @@ -226,6 +226,7 @@ export class EnergyBatterySettings extends LitElement { .label { overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } `, ]; From 3e41474faa616a684c35ac11711f2f2d77ddd77e Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Tue, 9 Sep 2025 20:27:41 +0300 Subject: [PATCH 78/84] Fix battery to grid connection in Sankey card (#26973) --- src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts index 07e2f3dc3a..e8d82407ee 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts @@ -225,7 +225,7 @@ class HuiEnergySankeyCard if (consumption.total.battery_to_grid > 0) { links.push({ source: "battery", - target: "grid", + target: "grid_return", value: consumption.total.battery_to_grid, }); } From 2c676baa9936052738494b444d8bca33fc841d46 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Wed, 10 Sep 2025 07:42:47 +0200 Subject: [PATCH 79/84] Fix Webhook Trigger doesn't display correctly (#26982) Webhook --- .../automation/trigger/types/ha-automation-trigger-webhook.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts index 0329b6ec04..a34f6936a5 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts @@ -125,7 +125,7 @@ export class HaWebhookTrigger extends LitElement { .path=${mdiContentCopy} > - + Date: Wed, 10 Sep 2025 15:58:26 +0200 Subject: [PATCH 80/84] Don't show "condition did not pass" before testing (#26987) Testing wrapper --- .../condition/ha-automation-condition-row.ts | 10 +++++----- .../sidebar/ha-automation-sidebar-condition.ts | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index efb4298e69..3d097eba84 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -383,12 +383,12 @@ export default class HaAutomationConditionRow extends LitElement { error: this._testingResult === false, })}" > - ${this._testingResult - ? this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_pass" - ) + ${this._testingResult === undefined + ? nothing : this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_error" + `ui.panel.config.automation.editor.conditions.testing_${ + this._testingResult ? "pass" : "error" + }` )}
    diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts index a0c4cda870..00f9783045 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -296,12 +296,12 @@ export default class HaAutomationSidebarCondition extends LitElement { narrow: this.narrow, })}" > - ${this._testingResult - ? this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_pass" - ) + ${this._testingResult === undefined + ? nothing : this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_error" + `ui.panel.config.automation.editor.conditions.testing_${ + this._testingResult ? "pass" : "error" + }` )}
    From 1922db0474ed4b0a9e2aac20483503ac9307b34a Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Wed, 10 Sep 2025 14:01:05 +0200 Subject: [PATCH 81/84] Fix disabled automation style (#26988) * Update disabled state logic in action and condition editors to account for indent property * Remove opacity --- .../config/automation/action/ha-automation-action-editor.ts | 4 +++- .../automation/condition/ha-automation-condition-editor.ts | 5 +++-- src/panels/config/automation/styles.ts | 1 - .../automation/trigger/ha-automation-trigger-editor.ts | 1 - 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-editor.ts b/src/panels/config/automation/action/ha-automation-action-editor.ts index 7562fafcd8..d91997760f 100644 --- a/src/panels/config/automation/action/ha-automation-action-editor.ts +++ b/src/panels/config/automation/action/ha-automation-action-editor.ts @@ -50,7 +50,9 @@ export default class HaAutomationActionEditor extends LitElement { class=${classMap({ "card-content": true, disabled: - this.disabled || (this.action.enabled === false && !this.yamlMode), + !this.indent && + (this.disabled || + (this.action.enabled === false && !this.yamlMode)), yaml: yamlMode, indent: this.indent, card: !this.inSidebar, diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index d3aaf8cbdd..6698e7b048 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -53,8 +53,9 @@ export default class HaAutomationConditionEditor extends LitElement { class=${classMap({ "card-content": true, disabled: - this.disabled || - (this.condition.enabled === false && !this.yamlMode), + !this.indent && + (this.disabled || + (this.condition.enabled === false && !this.yamlMode)), yaml: yamlMode, indent: this.indent, card: !this.inSidebar, diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index a2a8a19bb6..781edd44cb 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -44,7 +44,6 @@ export const rowStyles = css` export const editorStyles = css` .disabled { - opacity: 0.5; pointer-events: none; } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts index e28a57c407..5f927c5b5f 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts @@ -141,7 +141,6 @@ export default class HaAutomationTriggerEditor extends LitElement { haStyle, css` .disabled { - opacity: 0.5; pointer-events: none; } From 27db5b3b021b8d2fac49ecd5a221ad964ac498ef Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 11 Sep 2025 14:16:02 +0100 Subject: [PATCH 82/84] Move close to the secondary action to allow enter key to submit (#27005) --- .../device-registry-detail/dialog-device-registry-detail.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts index 90451c0776..673f9cf9f3 100644 --- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts +++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts @@ -132,7 +132,7 @@ class DialogDeviceRegistryDetail extends LitElement {
    Date: Fri, 12 Sep 2025 10:43:55 +0200 Subject: [PATCH 83/84] Fix automation sidebar overflow icon size (#27016) --- src/panels/config/automation/styles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 781edd44cb..0610cb45df 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -251,4 +251,7 @@ export const sidebarEditorStyles = css` display: none; } } + ha-md-menu-item { + --mdc-icon-size: 24px; + } `; From 59571d03a6034b6358402c108dcd2f42c73c2b36 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 12 Sep 2025 14:43:09 +0200 Subject: [PATCH 84/84] Bumped version to 20250903.5 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 0cd8b58b99..dab3d7b7d3 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250903.3" +version = "20250903.5" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend"