add styles to icons

.github/workflows/merge.yaml

@@ -1,29 +1,29 @@
 name: Merge
 
 on:
-  issue_comment:
-    types: [created]
+    issue_comment:
+        types: [created]
 
 jobs:
-  fast-forward:
-    # Only run if the comment contains the /merge command.
-    if: ${{ contains(github.event.comment.body, '/merge')
-      && github.event.issue.pull_request }}
-    runs-on: ubuntu-latest
+    fast-forward:
+        # Only run if the comment contains the /merge command.
+        if: ${{ contains(github.event.comment.body, '/merge')
+            && github.event.issue.pull_request }}
+        runs-on: ubuntu-latest
 
-    permissions:
-      contents: write
-      pull-requests: write
-      issues: write
-
-    steps:
-      - name: Fast forwarding
-        uses: sequoia-pgp/fast-forward@v1
-        with:
-          merge: true
-          github_token: ${{ secrets.FAST_FORWARD_PAT }}
-          # To reduce the workflow's verbosity, use 'on-error'
-          # to only post a comment when an error occurs, or 'never' to
-          # never post a comment.  (In all cases the information is
-          # still available in the step's summary.)
-          comment: "on-error"
+        steps:
+            - uses: actions/create-github-app-token@v1
+              id: app-token
+              with:
+                  app-id: ${{ vars.BUILD_APP_ID }}
+                  private-key: ${{ secrets.BUILD_PRIVATE_KEY }}
+            - name: Fast forwarding
+              uses: sequoia-pgp/fast-forward@v1
+              with:
+                  merge: true
+                  github_token: ${{ steps.app-token.outputs.token }}
+                  # To reduce the workflow's verbosity, use 'on-error'
+                  # to only post a comment when an error occurs, or 'never' to
+                  # never post a comment.  (In all cases the information is
+                  # still available in the step's summary.)
+                  comment: 'on-error'

src/helpers.ts

@@ -1,15 +1,28 @@
-import { html } from 'lit';
+import { type TemplateResult, html } from 'lit';
 
-import type { Device, Entity, HomeAssistant, State } from './types';
+import { createStateStyles } from './styles';
+import type { Area, Device, Entity, HomeAssistant, State } from './types';
 
 export const createStateIcon = (
     hass: HomeAssistant,
     state: State,
     classes: String[],
-) =>
-    html`<div class="${['icon', ...classes].join(' ')}">
-        <ha-state-icon .hass=${hass} .stateObj=${state}></ha-state-icon>
+    icon: string | undefined = undefined,
+): TemplateResult => {
+    const { iconStyle, iconDivStyle } = createStateStyles(state);
+
+    return html`<div
+        class="${['icon', ...classes].join(' ')}"
+        style=${iconDivStyle}
+    >
+        <ha-state-icon
+            .hass=${hass}
+            .icon="${icon}"
+            .stateObj=${state}
+            style=${iconStyle}
+        ></ha-state-icon>
     </div>`;
+};
 
 export const getState = (hass: HomeAssistant, entityId: string): State =>
     (hass.states as { [key: string]: any })[entityId];
@@ -19,3 +32,6 @@ export const getEntity = (hass: HomeAssistant, entityId: string): Entity =>
 
 export const getDevice = (hass: HomeAssistant, deviceId: string): Device =>
     (hass.devices as { [key: string]: any })[deviceId];
+
+export const getArea = (hass: HomeAssistant, deviceId: string): Area =>
+    (hass.areas as { [key: string]: any })[deviceId];

src/index.ts

@@ -3,8 +3,14 @@ import { CSSResult, LitElement, html } from 'lit';
 import { state } from 'lit/decorators.js';
 
 import { version } from '../package.json';
-import { createStateIcon, getDevice, getEntity, getState } from './helpers';
-import { styles } from './styles';
+import {
+    createStateIcon,
+    getArea,
+    getDevice,
+    getEntity,
+    getState,
+} from './helpers';
+import { createStateStyles, styles } from './styles';
 import type { Config, HomeAssistant, State } from './types';
 
 declare global {
@@ -39,25 +45,29 @@ class RoomSummaryCard extends LitElement {
             return html``;
         }
 
-        const lightEntity = getState(
+        const roomEntity = getState(
             this._hass,
             `light.${this._config.area}_light`,
         );
 
+        const icon = getArea(this._hass, this._config.area).icon;
+
+        const { cardStyle, textStyle } = createStateStyles(roomEntity);
+
         return html`
-            <div class="card">
+            <div class="card" style=${cardStyle}>
                 <div class="grid">
-                    <div class="name text">
+                    <div class="name text" style=${textStyle}>
                         ${this._config.area
                             .split('_')
                             .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
                             .join(' ')}
                     </div>
-                    <div class="label text">
+                    <div class="label text" style=${textStyle}>
                         ${this._getLabel()} <br />
                         <span class="stats">${this._getAreaStatistics()}</span>
                     </div>
-                    ${createStateIcon(this._hass, lightEntity, ['room'])}
+                    ${createStateIcon(this._hass, roomEntity, ['room'], icon)}
                     ${this._states.map((s, i) => {
                         return createStateIcon(this._hass, s, [
                             'entity',
@@ -95,9 +105,11 @@ class RoomSummaryCard extends LitElement {
             `switch.${this._config.area}_fan`,
         ];
 
-        this._states = Object.values(hass.states).filter((state) =>
-            baseEntities.includes(state.entity_id),
-        );
+        const states = baseEntities.map((entity) => getState(hass, entity));
+
+        if (!equal(states, this._states)) {
+            this._states = states;
+        }
     }
 
     private _getLabel(): string {

src/styles.ts

@@ -1,4 +1,41 @@
 import { css } from 'lit';
+import type { DirectiveResult } from 'lit-html/directive';
+import {
+    type StyleMapDirective,
+    styleMap,
+} from 'lit-html/directives/style-map';
+
+import type { State } from './types';
+
+export const createStateStyles = (
+    state: State,
+): {
+    cardStyle: DirectiveResult<typeof StyleMapDirective>;
+    iconStyle: DirectiveResult<typeof StyleMapDirective>;
+    iconDivStyle: DirectiveResult<typeof StyleMapDirective>;
+    textStyle: DirectiveResult<typeof StyleMapDirective>;
+} => {
+    const isActive = state.state === 'on';
+
+    return {
+        cardStyle: styleMap({
+            'background-color': isActive
+                ? 'rgba(var(--color-background-yellow),var(--opacity-bg))'
+                : undefined,
+        }),
+        iconStyle: styleMap({
+            color: isActive ? 'rgba(var(--color-yellow),1)' : undefined,
+        }),
+        iconDivStyle: styleMap({
+            'background-color': isActive
+                ? 'rgba(var(--color-yellow),0.2)'
+                : undefined,
+        }),
+        textStyle: styleMap({
+            color: isActive ? 'rgba(var(--color-yellow-text),1)' : undefined,
+        }),
+    };
+};
 
 export const styles = css`
     .card {

src/types.ts

@@ -24,6 +24,13 @@ export interface HomeAssistant {
 
     /** Object containing the current state of all entities in Home Assistant */
     states: State[];
+
+    areas: Area[];
+}
+
+export interface Area {
+    area_id: string;
+    icon: string;
 }
 
 /**