fix: Use HA style and coloring for all icons (#1790)

src/components-lib/icon-controller.ts

@@ -0,0 +1,44 @@
+import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
+import frigateSVG from '../camera-manager/frigate/assets/frigate.svg';
+import motioneyeSVG from '../camera-manager/motioneye/assets/motioneye.svg';
+import reolinkSVG from '../camera-manager/reolink/assets/reolink.svg';
+import { Icon } from '../types';
+import { HassEntity } from 'home-assistant-js-websocket';
+
+export class IconController {
+  public getCustomIcon(icon?: Icon): string | null {
+    switch (icon?.icon) {
+      case 'frigate':
+        return frigateSVG;
+      case 'motioneye':
+        return motioneyeSVG;
+      case 'reolink':
+        return reolinkSVG;
+      default:
+        return null;
+    }
+  }
+
+  public createStateObjectForStateBadge(
+    hass: HomeAssistant,
+    entityID: string,
+  ): HassEntity | null {
+    if (!hass.states[entityID]) {
+      return null;
+    }
+    return {
+      ...hass.states[entityID],
+      attributes: {
+        ...hass.states[entityID].attributes,
+
+        // State badge is the only available component that will allow the
+        // Home Assistant frontend to correctly color based on the state, but
+        // it also will render an image (instead of an icon) if one is present
+        // in the attributes. By overriding the below attributes, we avoid
+        // that behavior.
+        entity_picture: undefined,
+        entity_picture_local: undefined,
+      },
+    };
+  }
+}

src/components-lib/menu-button-controller.ts

@@ -23,7 +23,7 @@ import {
 } from '../utils/action';
 import { isTruthy } from '../utils/basic';
 import { isBeingCasted } from '../utils/casting';
-import { getEntityIcon, getEntityTitle } from '../utils/ha';
+import { getEntityTitle } from '../utils/ha';
 import { getPTZTarget } from '../utils/ptz';
 import { getStreamCameraID, hasSubstream } from '../utils/substream';
 import { View } from '../view/view';
@@ -134,30 +134,27 @@ export class MenuButtonController {
     // current view for a less surprising UX.
     const menuCameraIDs = cameraManager.getStore().getCameraIDsWithCapability('menu');
     if (menuCameraIDs.size > 1) {
-      const menuItems = Array.from(
-        cameraManager.getStore().getCameraConfigEntries(menuCameraIDs),
-        ([cameraID, config]) => {
-          const action = createCameraAction('camera_select', cameraID);
-          const metadata = cameraManager.getCameraMetadata(cameraID);
+      const submenuItems = Array.from(menuCameraIDs, (cameraID) => {
+        const action = createCameraAction('camera_select', cameraID);
+        const metadata = cameraManager.getCameraMetadata(cameraID);
 
-          return {
-            enabled: true,
-            icon: metadata?.icon,
-            entity: config.camera_entity,
-            state_color: true,
-            title: metadata?.title,
-            selected: view?.camera === cameraID,
-            ...(action && { tap_action: action }),
-          };
-        },
-      );
+        return {
+          enabled: true,
+          icon: metadata?.icon.icon,
+          entity: metadata?.icon.entity,
+          state_color: true,
+          title: metadata?.title,
+          selected: view?.camera === cameraID,
+          ...(action && { tap_action: action }),
+        };
+      });
 
       return {
         icon: 'mdi:video-switch',
         ...config.menu.buttons.cameras,
         type: 'custom:frigate-card-menu-submenu',
         title: localize('config.menu.buttons.cameras'),
-        items: menuItems,
+        items: submenuItems,
       };
     }
     return null;
@@ -201,11 +198,10 @@ export class MenuButtonController {
         const menuItems = Array.from(streams, (streamID) => {
           const action = createCameraAction('live_substream_select', streamID);
           const metadata = cameraManager.getCameraMetadata(streamID) ?? undefined;
-          const cameraConfig = cameraManager.getStore().getCameraConfig(streamID);
           return {
             enabled: true,
-            icon: metadata?.icon,
-            entity: cameraConfig?.camera_entity,
+            icon: metadata?.icon.icon,
+            entity: metadata?.icon.entity,
             state_color: true,
             title: metadata?.title,
             selected: substreamAwareCameraID === streamID,
@@ -465,7 +461,6 @@ export class MenuButtonController {
           return {
             enabled: true,
             selected: false,
-            icon: getEntityIcon(hass, playerEntityID),
             entity: playerEntityID,
             state_color: false,
             title: title,

src/components-lib/menu-controller.ts

@@ -1,4 +1,4 @@
-import { HASSDomEvent, HomeAssistant } from '@dermotduffy/custom-card-helpers';
+import { HASSDomEvent } from '@dermotduffy/custom-card-helpers';
 import { LitElement } from 'lit';
 import { orderBy } from 'lodash-es';
 import { dispatchActionExecutionRequest } from '../card-controller/actions/utils/execution-request.js';
@@ -9,13 +9,11 @@ import {
   type MenuConfig,
   type MenuItem,
 } from '../config/types.js';
-import { StateParameters } from '../types.js';
 import {
   convertActionToCardCustomAction,
   getActionConfigGivenAction,
 } from '../utils/action';
 import { arrayify, isTruthy, setOrRemoveAttribute } from '../utils/basic.js';
-import { refreshDynamicStateParameters } from '../utils/ha/index.js';
 
 export class MenuController {
   protected _host: LitElement;
@@ -158,13 +156,6 @@ export class MenuController {
     }
   }
 
-  public getFreshButtonState(hass: HomeAssistant, button: MenuItem): StateParameters {
-    const stateParameters = { ...button } as StateParameters;
-    return hass && button.type === 'custom:frigate-card-menu-state-icon'
-      ? refreshDynamicStateParameters(hass, stateParameters)
-      : stateParameters;
-  }
-
   protected _sortButtons(): void {
     this._buttons = orderBy(
       this._buttons,