prettier

src/components/ha-chip.ts

@@ -9,6 +9,7 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 
 @customElement("ha-chip")
 export class HaChip extends LitElement {
@@ -18,9 +19,17 @@ export class HaChip extends LitElement {
 
   @property({ type: Boolean }) public noText = false;
 
+  @property({ type: Boolean }) public outline = false;
+
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip ${this.noText ? "no-text" : ""}">
+      <div
+        class=${classMap({
+          "mdc-chip": true,
+          "no-text": this.noText,
+          outline: this.outline,
+        })}
+      >
         ${this.hasIcon
           ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
               <slot name="icon"></slot>
@@ -81,6 +90,14 @@ export class HaChip extends LitElement {
       :host {
         outline: none;
       }
+
+      .mdc-chip.outline {
+        background: none;
+        border: var(
+          --ha-chip-border,
+          1px solid rgba(var(--rgb-primary-text-color), 0.5)
+        );
+      }
     `;
   }
 }

src/components/ha-related-items.ts

@@ -1,4 +1,4 @@
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -9,15 +9,9 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import {
-  AreaRegistryEntry,
-  subscribeAreaRegistry,
-} from "../data/area_registry";
+import { AreaRegistryEntry } from "../data/area_registry";
 import { ConfigEntry, getConfigEntries } from "../data/config_entries";
-import {
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../data/device_registry";
+import { DeviceRegistryEntry } from "../data/device_registry";
 import { SceneEntity } from "../data/scene";
 import { findRelated, ItemType, RelatedResult } from "../data/search";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
@@ -34,23 +28,8 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
 
   @state() private _entries?: ConfigEntry[];
 
-  @state() private _devices?: DeviceRegistryEntry[];
-
-  @state() private _areas?: AreaRegistryEntry[];
-
   @state() private _related?: RelatedResult;
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this._devices = devices;
-      }),
-      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this._areas = areas;
-      }),
-    ];
-  }
-
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     getConfigEntries(this.hass).then((configEntries) => {
@@ -104,11 +83,10 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
             `;
           })
         : ""}
-      ${this._related.device && this._devices
+      ${this._related.device
         ? this._related.device.map((relatedDeviceId) => {
-            const device: DeviceRegistryEntry | undefined = this._devices!.find(
-              (dev) => dev.id === relatedDeviceId
-            );
+            const device: DeviceRegistryEntry | undefined =
+              this.hass.devices[relatedDeviceId];
             if (!device) {
               return "";
             }
@@ -125,11 +103,10 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
             `;
           })
         : ""}
-      ${this._related.area && this._areas
+      ${this._related.area
         ? this._related.area.map((relatedAreaId) => {
-            const area: AreaRegistryEntry | undefined = this._areas!.find(
-              (ar) => ar.area_id === relatedAreaId
-            );
+            const area: AreaRegistryEntry | undefined =
+              this.hass.areas[relatedAreaId];
             if (!area) {
               return "";
             }

src/components/ha-target-chip.ts

@@ -0,0 +1,218 @@
+// @ts-ignore
+import chipStyles from "@material/chips/dist/mdc.chips.min.css";
+import { mdiUnfoldMoreVertical, mdiClose } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  unsafeCSS,
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { HomeAssistant } from "../types";
+import "@polymer/paper-tooltip/paper-tooltip";
+import "./ha-icon-button";
+import "./ha-state-icon";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-target-chip")
+export class HaTargetChip extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public type: "entity_id" | "area_id" | "device_id" = "entity_id";
+
+  @property() public name!: string;
+
+  @property() public iconPath?: string;
+
+  @property({ attribute: false }) public entityState?: HassEntity;
+
+  @property({ type: Boolean }) public canExpand = false;
+
+  @property({ type: Boolean }) public canRemove = false;
+
+  @property({ type: Boolean }) public noClick = false;
+
+  @property({ type: Boolean }) public filled = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        class="mdc-chip ${classMap({
+          [this.type]: true,
+          filled: this.filled,
+          noClick: this.noClick,
+        })}"
+      >
+        ${this.iconPath
+          ? html`<ha-svg-icon
+              class="mdc-chip__icon mdc-chip__icon--leading"
+              .path=${this.iconPath}
+            ></ha-svg-icon>`
+          : ""}
+        ${this.entityState
+          ? html`<ha-state-icon
+              class="mdc-chip__icon mdc-chip__icon--leading"
+              .state=${this.entityState}
+            ></ha-state-icon>`
+          : ""}
+        ${this.noClick ? "" : html`<div class="mdc-chip__ripple"></div>`}
+        <span role="gridcell">
+          <span role="button" tabindex="0" class="mdc-chip__primary-action">
+            <span class="mdc-chip__text">${this.name}</span>
+          </span>
+        </span>
+        ${this.canExpand && this.type !== "entity_id"
+          ? html`<span role="gridcell">
+              <ha-icon-button
+                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
+                tabindex="-1"
+                role="button"
+                .label=${this.hass.localize(
+                  "ui.components.target-picker.expand"
+                )}
+                .path=${mdiUnfoldMoreVertical}
+                hideTooltip
+                .id=${this.id}
+                .type=${this.type}
+                @click=${this._handleExpand}
+              ></ha-icon-button>
+              <paper-tooltip class="expand" animation-delay="0"
+                >${this.hass.localize(
+                  `ui.components.target-picker.expand_${this.type}`
+                )}</paper-tooltip
+              >
+            </span>`
+          : ""}
+        ${this.canRemove
+          ? html` <span role="gridcell">
+              <ha-icon-button
+                class="mdc-chip__icon mdc-chip__icon--trailing"
+                tabindex="-1"
+                role="button"
+                .label=${this.hass.localize(
+                  "ui.components.target-picker.remove"
+                )}
+                .path=${mdiClose}
+                hideTooltip
+                .id=${this.id}
+                .type=${this.type}
+                @click=${this._handleRemove}
+              ></ha-icon-button>
+              <paper-tooltip animation-delay="0"
+                >${this.hass.localize(
+                  `ui.components.target-picker.remove_${this.type}`
+                )}</paper-tooltip
+              >
+            </span>`
+          : ""}
+      </div>
+    `;
+  }
+
+  private _handleExpand(ev) {
+    const target = ev.currentTarget as any;
+    fireEvent(this, "target-expand", { type: target.type, id: target.id });
+  }
+
+  private _handleRemove(ev) {
+    const target = ev.currentTarget as any;
+    fireEvent(this, "target-remove", { type: target.type, id: target.id });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ${unsafeCSS(chipStyles)}
+      .mdc-chip {
+        color: var(--primary-text-color);
+      }
+      .mdc-chip.filled {
+        color: rgba(0, 0, 0, 0.87);
+      }
+      .mdc-chip.noClick {
+        cursor: default;
+      }
+      .mdc-chip ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        display: flex;
+        align-items: center;
+        outline: none;
+      }
+      .mdc-chip ha-icon-button ha-svg-icon {
+        border-radius: 50%;
+        background: var(--secondary-text-color);
+      }
+      .mdc-chip__icon.mdc-chip__icon--trailing {
+        width: 16px;
+        height: 16px;
+        --mdc-icon-size: 14px;
+        color: var(--secondary-text-color);
+        margin-inline-start: 4px !important;
+        margin-inline-end: -4px !important;
+        direction: var(--direction);
+      }
+      .mdc-chip__icon--leading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        --mdc-icon-size: 20px;
+        border-radius: 50%;
+        padding: 6px;
+        margin-left: -14px !important;
+        margin-inline-start: -14px !important;
+        margin-inline-end: 4px !important;
+        direction: var(--direction);
+      }
+      .expand-btn {
+        margin-right: 0;
+      }
+      .mdc-chip.area_id:not(.filled) {
+        border: 2px solid #fed6a4;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.area_id:not(.filled) .mdc-chip__icon--leading,
+      .mdc-chip.area_id.filled {
+        background: #fed6a4;
+      }
+      .mdc-chip.device_id:not(.filled) {
+        border: 2px solid #a8e1fb;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.device_id:not(.filled) .mdc-chip__icon--leading,
+      .mdc-chip.device_id.filled {
+        background: #a8e1fb;
+      }
+      .mdc-chip.entity_id:not(.filled) {
+        border: 2px solid #d2e7b9;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.entity_id:not(.filled) .mdc-chip__icon--leading,
+      .mdc-chip.entity_id.filled {
+        background: #d2e7b9;
+      }
+      .mdc-chip:hover {
+        z-index: 5;
+      }
+      :host([disabled]) .mdc-chip {
+        opacity: var(--light-disabled-opacity);
+        pointer-events: none;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HASSDomEvents {
+    "target-expand": { type: "area_id" | "device_id"; id: string };
+    "target-remove": {
+      type: "entity_id" | "area_id" | "device_id";
+      id: string;
+    };
+  }
+  interface HTMLElementTagNameMap {
+    "ha-target-chip": HaTargetChip;
+  }
+}

src/components/ha-target-picker.ts

@@ -1,22 +1,14 @@
 // @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import "@material/mwc-button/mwc-button";
-import {
-  mdiClose,
-  mdiDevices,
-  mdiPlus,
-  mdiSofa,
-  mdiUnfoldMoreVertical,
-} from "@mdi/js";
+import { mdiDevices, mdiPlus, mdiSofa } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   HassEntity,
   HassServiceTarget,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
+import { css, CSSResultGroup, html, LitElement } 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 { ensureArray } from "../common/array/ensure-array";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -44,6 +36,7 @@ import "./ha-area-picker";
 import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-svg-icon";
+import "./ha-target-chip";
 
 @customElement("ha-target-picker")
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
@@ -138,7 +131,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   private _renderItems() {
     return html`
-      <div class="mdc-chip-set items">
+      <div class="chip-set items">
         ${this.value?.area_id
           ? ensureArray(this.value.area_id).map((area_id) => {
               const area = this._areas![area_id];
@@ -180,67 +173,40 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   private _renderChips() {
     return html`
-      <div class="mdc-chip-set">
-        <div
-          class="mdc-chip area_id add"
+      <div class="chip-set">
+        <ha-target-chip
+          .hass=${this.hass}
           .type=${"area_id"}
+          .name=${this.hass.localize("ui.components.target-picker.add_area_id")}
+          .iconPath=${mdiPlus}
           @click=${this._showPicker}
-        >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_area_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-        <div
-          class="mdc-chip device_id add"
+          filled
+          class="add"
+        ></ha-target-chip>
+
+        <ha-target-chip
+          .hass=${this.hass}
           .type=${"device_id"}
+          .name=${this.hass.localize(
+            "ui.components.target-picker.add_device_id"
+          )}
+          .iconPath=${mdiPlus}
           @click=${this._showPicker}
-        >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_device_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-        <div
-          class="mdc-chip entity_id add"
+          filled
+          class="add"
+        ></ha-target-chip>
+
+        <ha-target-chip
+          .hass=${this.hass}
           .type=${"entity_id"}
+          .name=${this.hass.localize(
+            "ui.components.target-picker.add_entity_id"
+          )}
+          .iconPath=${mdiPlus}
           @click=${this._showPicker}
-        >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_entity_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
+          filled
+          class="add"
+        ></ha-target-chip>
       </div>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
@@ -262,71 +228,19 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     entityState?: HassEntity,
     iconPath?: string
   ) {
-    return html`
-      <div
-        class="mdc-chip ${classMap({
-          [type]: true,
-        })}"
-      >
-        ${iconPath
-          ? html`<ha-svg-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .path=${iconPath}
-            ></ha-svg-icon>`
-          : ""}
-        ${entityState
-          ? html`<ha-state-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .state=${entityState}
-            ></ha-state-icon>`
-          : ""}
-        <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
-            <span class="mdc-chip__text">${name}</span>
-          </span>
-        </span>
-        ${type === "entity_id"
-          ? ""
-          : html` <span role="gridcell">
-              <ha-icon-button
-                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
-                tabindex="-1"
-                role="button"
-                .label=${this.hass.localize(
-                  "ui.components.target-picker.expand"
-                )}
-                .path=${mdiUnfoldMoreVertical}
-                hideTooltip
-                .id=${id}
-                .type=${type}
-                @click=${this._handleExpand}
-              ></ha-icon-button>
-              <paper-tooltip class="expand" animation-delay="0"
-                >${this.hass.localize(
-                  `ui.components.target-picker.expand_${type}`
-                )}</paper-tooltip
-              >
-            </span>`}
-        <span role="gridcell">
-          <ha-icon-button
-            class="mdc-chip__icon mdc-chip__icon--trailing"
-            tabindex="-1"
-            role="button"
-            .label=${this.hass.localize("ui.components.target-picker.remove")}
-            .path=${mdiClose}
-            hideTooltip
-            .id=${id}
-            .type=${type}
-            @click=${this._handleRemove}
-          ></ha-icon-button>
-          <paper-tooltip animation-delay="0"
-            >${this.hass.localize(
-              `ui.components.target-picker.remove_${type}`
-            )}</paper-tooltip
-          >
-        </span>
-      </div>
-    `;
+    return html`<ha-target-chip
+      .hass=${this.hass}
+      .type=${type}
+      .id=${id}
+      .name=${name}
+      .entityState=${entityState}
+      .iconPath=${iconPath}
+      noClick
+      canExpand
+      canRemove
+      @target-expand=${this._handleExpand}
+      @target-remove=${this._handleRemove}
+    ></ha-target-chip>`;
   }
 
   private _renderPicker() {
@@ -405,14 +319,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleExpand(ev) {
-    const target = ev.currentTarget as any;
+  private _handleExpand(ev: CustomEvent<HASSDomEvents["target-expand"]>) {
+    const type = ev.detail.type;
+    const id = ev.detail.id;
     const newDevices: string[] = [];
     const newEntities: string[] = [];
-    if (target.type === "area_id") {
+    if (type === "area_id") {
       Object.values(this._devices!).forEach((device) => {
         if (
-          device.area_id === target.id &&
+          device.area_id === id &&
           !this.value!.device_id?.includes(device.id) &&
           this._deviceMeetsFilter(device)
         ) {
@@ -421,17 +336,17 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       });
       this._entities!.forEach((entity) => {
         if (
-          entity.area_id === target.id &&
+          entity.area_id === id &&
           !this.value!.entity_id?.includes(entity.entity_id) &&
           this._entityRegMeetsFilter(entity)
         ) {
           newEntities.push(entity.entity_id);
         }
       });
-    } else if (target.type === "device_id") {
+    } else if (type === "device_id") {
       this._entities!.forEach((entity) => {
         if (
-          entity.device_id === target.id &&
+          entity.device_id === id &&
           !this.value!.entity_id?.includes(entity.entity_id) &&
           this._entityRegMeetsFilter(entity)
         ) {
@@ -448,14 +363,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     if (newDevices.length) {
       value = this._addItems(value, "device_id", newDevices);
     }
-    value = this._removeItem(value, target.type, target.id);
+    value = this._removeItem(value, type, id);
     fireEvent(this, "value-changed", { value });
   }
 
-  private _handleRemove(ev) {
-    const target = ev.currentTarget as any;
+  private _handleRemove(ev: CustomEvent<HASSDomEvents["target-remove"]>) {
+    const type = ev.detail.type;
+    const id = ev.detail.id;
     fireEvent(this, "value-changed", {
-      value: this._removeItem(this.value, target.type, target.id),
+      value: this._removeItem(this.value, type, id),
     });
   }
 
@@ -567,96 +483,30 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
-      ${unsafeCSS(chipStyles)}
       .horizontal-container {
         display: flex;
         flex-wrap: wrap;
         min-height: 56px;
         align-items: center;
       }
-      .mdc-chip {
-        color: var(--primary-text-color);
-      }
       .items {
         z-index: 2;
       }
-      .mdc-chip-set {
+      .chip-set {
+        display: flex;
+        flex-wrap: wrap;
+        box-sizing: border-box;
         padding: 4px 0;
       }
-      .mdc-chip.add {
-        color: rgba(0, 0, 0, 0.87);
+      ha-target-chip {
+        margin: 4px;
       }
-      .mdc-chip:not(.add) {
-        cursor: default;
-      }
-      .mdc-chip ha-icon-button {
-        --mdc-icon-button-size: 24px;
-        display: flex;
-        align-items: center;
-        outline: none;
-      }
-      .mdc-chip ha-icon-button ha-svg-icon {
-        border-radius: 50%;
-        background: var(--secondary-text-color);
-      }
-      .mdc-chip__icon.mdc-chip__icon--trailing {
-        width: 16px;
-        height: 16px;
-        --mdc-icon-size: 14px;
-        color: var(--secondary-text-color);
-        margin-inline-start: 4px !important;
-        margin-inline-end: -4px !important;
-        direction: var(--direction);
-      }
-      .mdc-chip__icon--leading {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        --mdc-icon-size: 20px;
-        border-radius: 50%;
-        padding: 6px;
-        margin-left: -14px !important;
-        margin-inline-start: -14px !important;
-        margin-inline-end: 4px !important;
-        direction: var(--direction);
-      }
-      .expand-btn {
-        margin-right: 0;
-      }
-      .mdc-chip.area_id:not(.add) {
-        border: 2px solid #fed6a4;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.area_id.add {
-        background: #fed6a4;
-      }
-      .mdc-chip.device_id:not(.add) {
-        border: 2px solid #a8e1fb;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.device_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.device_id.add {
-        background: #a8e1fb;
-      }
-      .mdc-chip.entity_id:not(.add) {
-        border: 2px solid #d2e7b9;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.entity_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.entity_id.add {
-        background: #d2e7b9;
-      }
-      .mdc-chip:hover {
-        z-index: 5;
+      ha-target-chip.add {
+        cursor: pointer;
       }
       paper-tooltip.expand {
         min-width: 200px;
       }
-      :host([disabled]) .mdc-chip {
-        opacity: var(--light-disabled-opacity);
-        pointer-events: none;
-      }
     `;
   }
 }

src/dialogs/more-info/ha-more-info-device-entities-shortcuts.ts

@@ -0,0 +1,181 @@
+import { mdiDevices } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { SENSOR_ENTITIES } from "../../common/const";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateDisplay } from "../../common/entity/compute_state_display";
+import { navigate } from "../../common/navigate";
+import { groupBy } from "../../common/util/group-by";
+import "../../components/ha-target-chip";
+import { computeDeviceName } from "../../data/device_registry";
+import { isUnavailableState } from "../../data/entity";
+import { EntityRegistryEntry } from "../../data/entity_registry";
+import { EntityRegistryStateEntry } from "../../panels/config/devices/ha-config-device-page";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-more-info-device-entities-shortcuts")
+class MoreInfoDevicesEntitiesShortcuts extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  private _deviceEntityEntries = memoizeOne((deviceId: string) => {
+    if (!deviceId) return [];
+
+    return Object.values(this.hass!.entities).filter(
+      (entity) =>
+        entity.device_id === deviceId &&
+        !entity.hidden_by &&
+        !entity.disabled_by &&
+        !entity.entity_category
+    );
+  });
+
+  private _handleChipClick(ev) {
+    if (ev.defaultPrevented) {
+      return;
+    }
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
+    const entityId = (ev.target as any).id as string;
+    fireEvent(this, "shortcut-clicked", { entityId });
+  }
+
+  private _handleDeviceChipClick(ev) {
+    if (ev.defaultPrevented) {
+      return;
+    }
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
+    const deviceId = (ev.target as any).id as string;
+    fireEvent(this, "hass-more-info", { entityId: null });
+    navigate(`/config/devices/device/${deviceId}`);
+  }
+
+  protected render(): TemplateResult | null {
+    if (!this.hass || !this.stateObj) {
+      return null;
+    }
+    const deviceId = this.hass!.entities[this.stateObj.entity_id].device_id;
+
+    if (!deviceId) {
+      return null;
+    }
+
+    const deviceEntities = this._deviceEntityEntries(deviceId).filter(
+      (entry) => this.hass!.states[entry.entity_id]
+    );
+
+    let displayedEntities = deviceEntities.filter(
+      (entity) => entity.entity_id !== this.stateObj!.entity_id
+    );
+
+    // Do not display device entities if the current entity is not inside
+    if (
+      !displayedEntities.length ||
+      displayedEntities.length === deviceEntities.length
+    ) {
+      return null;
+    }
+
+    if (displayedEntities.length > 3) {
+      const result = groupBy(displayedEntities, (entry) =>
+        entry.entity_category
+          ? entry.entity_category
+          : SENSOR_ENTITIES.includes(computeDomain(entry.entity_id))
+          ? "sensor"
+          : "control"
+      ) as Record<
+        | "control"
+        | "sensor"
+        | NonNullable<EntityRegistryEntry["entity_category"]>,
+        EntityRegistryStateEntry[]
+      >;
+
+      if (result.control?.length > 3) {
+        displayedEntities = result.control.slice(0, 3);
+      } else {
+        displayedEntities = (result.control || [])
+          .concat(result.sensor)
+          .slice(0, 3);
+      }
+    }
+
+    return html`
+      <div class="container">
+        ${displayedEntities.map((entry) => {
+          const stateObj = this.hass!.states[entry.entity_id];
+
+          const iconPath = "";
+
+          const state = computeStateDisplay(
+            this.hass!.localize,
+            stateObj,
+            this.hass!.locale,
+            this.hass!.entities
+          );
+
+          const name = stateObj.attributes.friendly_name ?? "";
+
+          return html`
+            <ha-target-chip
+              @click=${this._handleChipClick}
+              @keydown=${this._handleChipClick}
+              .entityState=${stateObj}
+              .iconPath=${iconPath}
+              type="entity_id"
+              .id=${stateObj.entity_id}
+              aria-label=${name}
+              .title=${name}
+              .name=${isUnavailableState(stateObj.state) ? name : state}
+            >
+            </ha-target-chip>
+          `;
+        })}
+        <ha-target-chip
+          @click=${this._handleDeviceChipClick}
+          @keydown=${this._handleDeviceChipClick}
+          .iconPath=${mdiDevices}
+          type="device_id"
+          .id=${deviceId}
+          .name=${computeDeviceName(
+            this.hass.devices[deviceId],
+            this.hass,
+            deviceEntities
+          )}
+        >
+        </ha-target-chip>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .container {
+        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+      .container > * {
+        margin: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HASSDomEvents {
+    "shortcut-clicked": { entityId: string };
+  }
+  interface HTMLElementTagNameMap {
+    "ha-more-info-device-entities-shortcuts": MoreInfoDevicesEntitiesShortcuts;
+  }
+}

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

@@ -62,6 +62,11 @@ export class MoreInfoDialog extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  private _entityShortcutClicked(ev: CustomEvent) {
+    ev.stopPropagation();
+    this._entityId = ev.detail.entityId;
+  }
+
   protected shouldShowEditIcon(
     domain: string,
     stateObj: HassEntity | undefined
@@ -160,6 +165,7 @@ export class MoreInfoDialog extends LitElement {
                   <ha-more-info-info
                     .hass=${this.hass}
                     .entityId=${this._entityId}
+                    @shortcut-clicked=${this._entityShortcutClicked}
                   ></ha-more-info-info>
                 `
               : this._currTab === "history"

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

@@ -94,7 +94,7 @@ export class MoreInfoHistory extends LitElement {
         this.entityId
       }&start_date=${startOfYesterday().toISOString()}`;
 
-      this._throttleGetStateHistory();
+      this._getStateHistory();
       return;
     }
 

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { subscribeOne } from "../../common/util/subscribe-one";
@@ -13,6 +13,7 @@ import {
   DOMAINS_NO_INFO,
   DOMAINS_WITH_MORE_INFO,
 } from "./const";
+import "./ha-more-info-device-entities-shortcuts";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
 
@@ -70,10 +71,12 @@ export class MoreInfoInfo extends LitElement {
             .hass=${this.hass}
             .entityId=${this.entityId}
           ></ha-more-info-logbook>`}
-      <more-info-content
+      <ha-more-info-device-entities-shortcuts
         .stateObj=${stateObj}
         .hass=${this.hass}
-      ></more-info-content>
+      ></ha-more-info-device-entities-shortcuts>
+      <more-info-related-info .stateObj=${stateObj} .hass=${this.hass}>
+      </more-info-related-info>
     `;
   }