Add support for submenus to reflect HA state.

src/components/submenu.ts

@@ -1,22 +1,60 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators';
+import { hasAction, HomeAssistant } from 'custom-card-helpers';
+import { styleMap } from 'lit/directives/style-map';
 
+import { ExtendedHomeAssistant, MenuSubmenu, MenuSubmenuItem } from '../types.js';
 import { actionHandler } from '../action-handler-directive.js';
-import { MenuSubmenu } from '../types.js';
+import { refreshDynamicStateParameters } from '../common.js';
 
 import submenuStyle from '../scss/submenu.scss';
-import { hasAction } from 'custom-card-helpers';
-import { styleMap } from 'lit/directives/style-map';
 
 @customElement('frigate-card-submenu')
 export class FrigateCardSubmenu extends LitElement {
+  @property({ attribute: false })
+  public hass?: HomeAssistant & ExtendedHomeAssistant;
+
   @property({ attribute: false })
   public submenu?: MenuSubmenu;
 
+  protected _renderItem(item: MenuSubmenuItem): TemplateResult | void {
+    if (!this.hass) {
+      return;
+    }
+    const stateParameters = refreshDynamicStateParameters(this.hass, {...item});
+
+    return html`
+      <mwc-list-item
+        style="${styleMap(stateParameters.style || {})}"
+        graphic="icon"
+        aria-label="${stateParameters.title || ''}"
+        @action=${(ev) => {
+          // Attach the action config so ascendants have access to it.
+          ev.detail.config = item;
+        }}
+        .actionHandler=${actionHandler({
+          hasHold: hasAction(item.hold_action),
+          hasDoubleClick: hasAction(item.double_tap_action),
+        })}
+      >
+        ${stateParameters.title || ''}
+        ${stateParameters.icon
+          ? html` <ha-icon
+              style="${styleMap(stateParameters.style || {})}"
+              slot="graphic"
+              icon="${stateParameters.icon}"
+            >
+            </ha-icon>`
+          : ``}
+      </mwc-list-item>
+    `;
+  }
+
   protected render(): TemplateResult {
     if (!this.submenu) {
       return html``;
     }
+
     return html`
       <ha-button-menu corner="BOTTOM_LEFT">
         <ha-icon-button
@@ -31,33 +69,7 @@ export class FrigateCardSubmenu extends LitElement {
         >
           <ha-icon icon="${this.submenu.icon}"></ha-icon>
         </ha-icon-button>
-        ${this.submenu.items.map(
-          (item) => html`
-            <mwc-list-item
-              style="${styleMap(item.style || {})}"
-              graphic="icon"
-              aria-label="${item.title || ''}"
-              @action=${(ev) => {
-                // Attach the action config so ascendants have access to it.
-                ev.detail.config = item;
-              }}
-              .actionHandler=${actionHandler({
-                hasHold: hasAction(item.hold_action),
-                hasDoubleClick: hasAction(item.double_tap_action),
-              })}
-            >
-              ${item.title || ''}
-              ${item.icon
-                ? html` <ha-icon
-                    style="${styleMap(item.style || {})}"
-                    slot="graphic"
-                    icon="${item.icon}"
-                  >
-                  </ha-icon>`
-                : ``}
-            </mwc-list-item>
-          `,
-        )}
+        ${this.submenu.items.map(this._renderItem.bind(this))}
       </ha-button-menu>
     `;
   }