Final

* Add Add entity to feature for external_app

* Update icon from plus to plusboxmultiple

* Apply suggestion on the name

* Add missing shouldHandleRequestSelectedEvent that caused duplicate

* WIP

* Rework the logic to match the agreed design

* Rename property

* Apply PR comments

* Apply prettier

* Merge MessageWithAnswer

* Apply PR comments

build-scripts/bundle.cjs

@@ -18,16 +18,16 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
   [
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
-    isHassioBuild &&
+    (isHassioBuild || isLandingPageBuild) &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
-    isHassioBuild &&
+    (isHassioBuild || isLandingPageBuild) &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
@@ -337,6 +337,7 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
+      isLandingPageBuild: true,
     };
   },
 };

build-scripts/rspack.cjs

@@ -41,6 +41,7 @@ const createRspackConfig = ({
   isStatsBuild,
   isTestBuild,
   isHassioBuild,
+  isLandingPageBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -168,7 +169,9 @@ const createRspackConfig = ({
         },
       }),
       new rspack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+        new RegExp(
+          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
+        ),
         path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),

src/components/chart/ha-chart-base.ts

@@ -35,6 +35,7 @@ export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
+const RESIZE_ANIMATION_DURATION = 250;
 
 export type CustomLegendOption = ECOption["legend"] & {
   type: "custom";
@@ -90,8 +91,6 @@ export class HaChartBase extends LitElement {
 
   private _shouldResizeChart = false;
 
-  private _resizeAnimationDuration?: number;
-
   // @ts-ignore
   private _resizeController = new ResizeController(this, {
     callback: () => {
@@ -215,7 +214,6 @@ export class HaChartBase extends LitElement {
       ) {
         // custom legend changes may require a resize to layout properly
         this._shouldResizeChart = true;
-        this._resizeAnimationDuration = 250;
       }
     } else if (this._isTouchDevice && changedProps.has("_isZoomed")) {
       chartOptions.dataZoom = this._getDataZoomConfig();
@@ -979,14 +977,11 @@ export class HaChartBase extends LitElement {
   private _handleChartRenderFinished = () => {
     if (this._shouldResizeChart) {
       this.chart?.resize({
-        animation:
-          this._reducedMotion ||
-          typeof this._resizeAnimationDuration !== "number"
-            ? undefined
-            : { duration: this._resizeAnimationDuration },
+        animation: this._reducedMotion
+          ? undefined
+          : { duration: RESIZE_ANIMATION_DURATION },
       });
       this._shouldResizeChart = false;
-      this._resizeAnimationDuration = undefined;
     }
   };
 

src/components/ha-generic-picker.ts

@@ -10,7 +10,6 @@ import type { HomeAssistant } from "../types";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
-import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-picker-combo-box";
 import type {

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -0,0 +1,152 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../components/ha-alert";
+import "../../components/ha-icon";
+import "../../components/ha-list-item";
+import "../../components/ha-spinner";
+import type {
+  ExternalEntityAddToActions,
+  ExternalEntityAddToAction,
+} from "../../external_app/external_messaging";
+import { showToast } from "../../util/toast";
+
+import type { HomeAssistant } from "../../types";
+
+@customElement("ha-more-info-add-to")
+export class HaMoreInfoAddTo extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entityId!: string;
+
+  @state() private _externalActions?: ExternalEntityAddToActions = {
+    actions: [],
+  };
+
+  @state() private _loading = true;
+
+  private async _loadExternalActions() {
+    if (this.hass.auth.external?.config.hasEntityAddTo) {
+      this._externalActions =
+        await this.hass.auth.external?.sendMessage<"entity/add_to/get_actions">(
+          {
+            type: "entity/add_to/get_actions",
+            payload: { entity_id: this.entityId },
+          }
+        );
+    }
+  }
+
+  private async _actionSelected(ev: CustomEvent) {
+    const action = (ev.currentTarget as any)
+      .action as ExternalEntityAddToAction;
+    if (!action.enabled) {
+      return;
+    }
+
+    try {
+      await this.hass.auth.external!.fireMessage({
+        type: "entity/add_to",
+        payload: {
+          entity_id: this.entityId,
+          app_payload: action.app_payload,
+        },
+      });
+    } catch (err: any) {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.dialogs.more_info_control.add_to.action_failed",
+          {
+            error: err.message || err,
+          }
+        ),
+      });
+    }
+  }
+
+  protected async firstUpdated() {
+    await this._loadExternalActions();
+    this._loading = false;
+  }
+
+  protected render() {
+    if (this._loading) {
+      return html`
+        <div class="loading">
+          <ha-spinner></ha-spinner>
+        </div>
+      `;
+    }
+
+    if (!this._externalActions?.actions.length) {
+      return html`
+        <ha-alert alert-type="info">
+          ${this.hass.localize(
+            "ui.dialogs.more_info_control.add_to.no_actions"
+          )}
+        </ha-alert>
+      `;
+    }
+
+    return html`
+      <div class="actions-list">
+        ${this._externalActions.actions.map(
+          (action) => html`
+            <ha-list-item
+              graphic="icon"
+              .disabled=${!action.enabled}
+              .action=${action}
+              .twoline=${!!action.details}
+              @click=${this._actionSelected}
+            >
+              <span>${action.name}</span>
+              ${action.details
+                ? html`<span slot="secondary">${action.details}</span>`
+                : nothing}
+              <ha-icon slot="graphic" .icon=${action.mdi_icon}></ha-icon>
+            </ha-list-item>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
+        var(--ha-space-6);
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--ha-space-8);
+    }
+
+    .actions-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    ha-list-item {
+      cursor: pointer;
+    }
+
+    ha-list-item[disabled] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    ha-icon {
+      display: flex;
+      align-items: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-add-to": HaMoreInfoAddTo;
+  }
+}

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

@@ -8,6 +8,7 @@ import {
   mdiPencil,
   mdiPencilOff,
   mdiPencilOutline,
+  mdiPlusBoxMultipleOutline,
   mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -60,6 +61,7 @@ import {
   computeShowLogBookComponent,
 } from "./const";
 import "./controls/more-info-default";
+import "./ha-more-info-add-to";
 import "./ha-more-info-history-and-logbook";
 import "./ha-more-info-info";
 import "./ha-more-info-settings";
@@ -73,7 +75,7 @@ export interface MoreInfoDialogParams {
   data?: Record<string, any>;
 }
 
-type View = "info" | "history" | "settings" | "related";
+type View = "info" | "history" | "settings" | "related" | "add_to";
 
 interface ChildView {
   viewTag: string;
@@ -194,6 +196,10 @@ export class MoreInfoDialog extends LitElement {
     );
   }
 
+  private _shouldShowAddEntityTo(): boolean {
+    return !!this.hass.auth.external?.config.hasEntityAddTo;
+  }
+
   private _getDeviceId(): string | null {
     const entity = this.hass.entities[this._entityId!] as
       | EntityRegistryEntry
@@ -295,6 +301,11 @@ export class MoreInfoDialog extends LitElement {
     this._setView("related");
   }
 
+  private _goToAddEntityTo(ev) {
+    if (!shouldHandleRequestSelectedEvent(ev)) return;
+    this._setView("add_to");
+  }
+
   private _breadcrumbClick(ev: Event) {
     ev.stopPropagation();
     this._setView("related");
@@ -521,6 +532,22 @@ export class MoreInfoDialog extends LitElement {
                             .path=${mdiInformationOutline}
                           ></ha-svg-icon>
                         </ha-list-item>
+                        ${this._shouldShowAddEntityTo()
+                          ? html`
+                              <ha-list-item
+                                graphic="icon"
+                                @request-selected=${this._goToAddEntityTo}
+                              >
+                                ${this.hass.localize(
+                                  "ui.dialogs.more_info_control.add_entity_to"
+                                )}
+                                <ha-svg-icon
+                                  slot="graphic"
+                                  .path=${mdiPlusBoxMultipleOutline}
+                                ></ha-svg-icon>
+                              </ha-list-item>
+                            `
+                          : nothing}
                       </ha-button-menu>
                     `
                   : nothing}
@@ -613,7 +640,14 @@ export class MoreInfoDialog extends LitElement {
                                   : "entity"}
                               ></ha-related-items>
                             `
-                          : nothing
+                          : this._currView === "add_to"
+                            ? html`
+                                <ha-more-info-add-to
+                                  .hass=${this.hass}
+                                  .entityId=${entityId}
+                                ></ha-more-info-add-to>
+                              `
+                            : nothing
               )}
             </div>
           `

src/external_app/external_messaging.ts

@@ -36,6 +36,13 @@ interface EMOutgoingMessageConfigGet extends EMMessage {
   type: "config/get";
 }
 
+interface EMOutgoingMessageEntityAddToGetActions extends EMMessage {
+  type: "entity/add_to/get_actions";
+  payload: {
+    entity_id: string;
+  };
+}
+
 interface EMOutgoingMessageBarCodeScan extends EMMessage {
   type: "bar_code/scan";
   payload: {
@@ -75,6 +82,10 @@ interface EMOutgoingMessageWithAnswer {
     request: EMOutgoingMessageConfigGet;
     response: ExternalConfig;
   };
+  "entity/add_to/get_actions": {
+    request: EMOutgoingMessageEntityAddToGetActions;
+    response: ExternalEntityAddToActions;
+  };
 }
 
 interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
@@ -157,6 +168,14 @@ interface EMOutgoingMessageThreadStoreInPlatformKeychain extends EMMessage {
   };
 }
 
+interface EMOutgoingMessageAddEntityTo extends EMMessage {
+  type: "entity/add_to";
+  payload: {
+    entity_id: string;
+    app_payload: string; // Opaque string received from get_actions
+  };
+}
+
 type EMOutgoingMessageWithoutAnswer =
   | EMMessageResultError
   | EMMessageResultSuccess
@@ -177,7 +196,8 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageThemeUpdate
   | EMOutgoingMessageThreadStoreInPlatformKeychain
   | EMOutgoingMessageImprovScan
-  | EMOutgoingMessageImprovConfigureDevice;
+  | EMOutgoingMessageImprovConfigureDevice
+  | EMOutgoingMessageAddEntityTo;
 
 export interface EMIncomingMessageRestart {
   id: number;
@@ -293,18 +313,31 @@ type EMIncomingMessage =
 type EMIncomingMessageHandler = (msg: EMIncomingMessageCommands) => boolean;
 
 export interface ExternalConfig {
-  hasSettingsScreen: boolean;
-  hasSidebar: boolean;
-  canWriteTag: boolean;
-  hasExoPlayer: boolean;
-  canCommissionMatter: boolean;
-  canImportThreadCredentials: boolean;
-  canTransferThreadCredentialsToKeychain: boolean;
-  hasAssist: boolean;
-  hasBarCodeScanner: number;
-  canSetupImprov: boolean;
-  downloadFileSupported: boolean;
-  appVersion: string;
+  hasSettingsScreen?: boolean;
+  hasSidebar?: boolean;
+  canWriteTag?: boolean;
+  hasExoPlayer?: boolean;
+  canCommissionMatter?: boolean;
+  canImportThreadCredentials?: boolean;
+  canTransferThreadCredentialsToKeychain?: boolean;
+  hasAssist?: boolean;
+  hasBarCodeScanner?: number;
+  canSetupImprov?: boolean;
+  downloadFileSupported?: boolean;
+  appVersion?: string;
+  hasEntityAddTo?: boolean; // Supports "Add to" from more-info dialog, with action coming from external app
+}
+
+export interface ExternalEntityAddToAction {
+  enabled: boolean;
+  name: string; // Translated name of the action to be displayed in the UI
+  details?: string; // Optional translated details of the action to be displayed in the UI
+  mdi_icon: string; // MDI icon name to be displayed in the UI (e.g., "mdi:car")
+  app_payload: string; // Opaque string to be sent back when the action is selected
+}
+
+export interface ExternalEntityAddToActions {
+  actions: ExternalEntityAddToAction[];
 }
 
 export class ExternalMessaging {

src/html/index.html.template

@@ -20,6 +20,21 @@
     <meta name="color-scheme" content="dark light" />
     <%= renderTemplate("_style_base.html.template") %>
     <style>
+      @keyframes fade-out {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+      ::view-transition-group(launch-screen) {
+        animation-duration: var(--ha-animation-base-duration, 350ms);
+        animation-timing-function: ease-out;
+      }
+      ::view-transition-old(launch-screen) {
+        animation: fade-out var(--ha-animation-base-duration, 350ms) ease-out;
+      }
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
@@ -32,11 +47,28 @@
         }
       }
       #ha-launch-screen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        view-transition-name: launch-screen;
+        background-color: var(--primary-background-color, #fafafa);
+        z-index: 100;
+      }
+      @media (prefers-color-scheme: dark) {
+        #ha-launch-screen {
+          background-color: var(--primary-background-color, #111111);
+        }
+      }
+      #ha-launch-screen.removing {
+        opacity: 0;
       }
       #ha-launch-screen svg {
         width: 112px;

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -9,6 +9,7 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-markdown";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type {
   FlowFromGridSourceEnergyPreference,
@@ -19,11 +20,7 @@ import {
   emptyFlowToGridSourceEnergyPreference,
   energyStatisticHelpUrl,
 } from "../../../../data/energy";
-import {
-  getDisplayUnit,
-  getStatisticMetadata,
-  isExternalStatistic,
-} from "../../../../data/recorder";
+import { isExternalStatistic } from "../../../../data/recorder";
 import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -47,8 +44,6 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
-  @state() private _pickedDisplayUnit?: string | null;
-
   @state() private _energy_units?: string[];
 
   @state() private _error?: string;
@@ -81,11 +76,6 @@ export class DialogEnergyGridFlowSettings
           : "stat_energy_to"
       ];
 
-    this._pickedDisplayUnit = getDisplayUnit(
-      this.hass,
-      initialSourceId,
-      params.metadata
-    );
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
@@ -103,7 +93,6 @@ export class DialogEnergyGridFlowSettings
   public closeDialog() {
     this._params = undefined;
     this._source = undefined;
-    this._pickedDisplayUnit = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -117,10 +106,6 @@ export class DialogEnergyGridFlowSettings
 
     const pickableUnit = this._energy_units?.join(", ") || "";
 
-    const unitPriceSensor = this._pickedDisplayUnit
-      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
-      : undefined;
-
     const unitPriceFixed = `${this.hass.config.currency}/kWh`;
 
     const externalSource =
@@ -246,9 +231,15 @@ export class DialogEnergyGridFlowSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${`${this.hass.localize(
+              .label=${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_entity_input`
-              )} ${unitPriceSensor ? ` (${unitPriceSensor})` : ""}`}
+              )}
+              .helper=${html`<ha-markdown
+                .content=${this.hass.localize(
+                  "ui.panel.config.energy.grid.flow_dialog.cost_entity_helper",
+                  { currency: this.hass.config.currency }
+                )}
+              ></ha-markdown>`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
@@ -341,16 +332,6 @@ export class DialogEnergyGridFlowSettings
   }
 
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
-    if (ev.detail.value) {
-      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
-      this._pickedDisplayUnit = getDisplayUnit(
-        this.hass,
-        ev.detail.value,
-        metadata[0]
-      );
-    } else {
-      this._pickedDisplayUnit = undefined;
-    }
     this._source = {
       ...this._source!,
       [this._params!.direction === "from"

src/resources/styles.ts

@@ -199,3 +199,23 @@ export const baseEntrypointStyles = css`
     width: 100vw;
   }
 `;
+
+export const baseAnimationStyles = css`
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;

src/resources/theme/core.globals.ts

@@ -42,6 +42,14 @@ export const coreStyles = css`
     --ha-space-18: 72px;
     --ha-space-19: 76px;
     --ha-space-20: 80px;
+
+    --ha-animation-base-duration: 350ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      --ha-animation-base-duration: 0ms;
+    }
   }
 `;
 

src/translations/en.json

@@ -1434,6 +1434,7 @@
         "back_to_info": "Back to info",
         "info": "Information",
         "related": "Related",
+        "add_entity_to": "Add to",
         "history": "History",
         "aggregate": "5-minute aggregated",
         "logbook": "Activity",
@@ -1450,6 +1451,10 @@
           "last_action": "Last action",
           "last_triggered": "Last triggered"
         },
+        "add_to": {
+          "no_actions": "No actions available",
+          "action_failed": "Failed to perform the action {error}"
+        },
         "sun": {
           "azimuth": "Azimuth",
           "elevation": "Elevation",
@@ -3071,6 +3076,7 @@
             "remove_co2_signal": "Remove Electricity Maps integration",
             "add_co2_signal": "Add Electricity Maps integration",
             "flow_dialog": {
+              "cost_entity_helper": "Any sensor with a unit of `{currency}/(valid energy unit)` (e.g. `{currency}/Wh` or `{currency}/kWh`) may be used and will be automatically converted.",
               "from": {
                 "header": "Configure grid consumption",
                 "paragraph": "Grid consumption is the energy that flows from the energy grid to your home.",

src/util/launch-screen.ts

@@ -1,10 +1,26 @@
 import type { TemplateResult } from "lit";
 import { render } from "lit";
 
+const removeElement = (launchScreenElement: HTMLElement) => {
+  launchScreenElement.classList.add("removing");
+  setTimeout(() => {
+    launchScreenElement.parentElement?.removeChild(launchScreenElement);
+  }, 500);
+};
+
 export const removeLaunchScreen = () => {
   const launchScreenElement = document.getElementById("ha-launch-screen");
-  if (launchScreenElement) {
-    launchScreenElement.parentElement!.removeChild(launchScreenElement);
+  if (!launchScreenElement?.parentElement) {
+    return;
+  }
+
+  if (document.startViewTransition) {
+    document.startViewTransition(() => {
+      removeElement(launchScreenElement);
+    });
+  } else {
+    // Fallback: Direct removal without transition
+    removeElement(launchScreenElement);
   }
 };