From 57c3c954510912b4579e45f093c0e2de2ad105e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <zil1st@bosch.com>
Date: Sun, 21 Apr 2024 17:52:25 +0200
Subject: [PATCH 1/4] feat: :art: hide icons

---
 src/components/battery.ts                     | 25 +++++++++++--------
 src/components/grid.ts                        |  2 +-
 src/components/home.ts                        |  2 +-
 src/components/individualLeftBottomElement.ts |  2 +-
 src/components/individualLeftTopElement.ts    |  2 +-
 .../individualRightBottomElement.ts           |  2 +-
 src/components/individualRightTopElement.ts   |  2 +-
 src/components/nonFossil.ts                   |  2 +-
 src/components/solar.ts                       |  2 +-
 9 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/battery.ts b/src/components/battery.ts
index 4c6fec2..5d1093e 100644
--- a/src/components/battery.ts
+++ b/src/components/battery.ts
@@ -57,17 +57,20 @@ export const batteryElement = (
             })}
           </span>`
         : null}
-      <ha-icon
-        .icon=${battery.icon}
-        @click=${(e: { stopPropagation: () => void }) => {
-          main.openDetails(e, entities.battery?.state_of_charge!);
-        }}
-        @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
-          if (e.key === "Enter") {
-            main.openDetails(e, entities.battery?.state_of_charge!);
-          }
-        }}
-      ></ha-icon>
+      ${battery.icon !== " "
+        ? html` <ha-icon
+            id="battery-icon"
+            .icon=${battery.icon}
+            @click=${(e: { stopPropagation: () => void }) => {
+              main.openDetails(e, entities.battery?.state_of_charge!);
+            }}
+            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+              if (e.key === "Enter") {
+                main.openDetails(e, entities.battery?.state_of_charge!);
+              }
+            }}
+          />`
+        : null}
       ${entities.battery?.display_state === "two_way" ||
       entities.battery?.display_state === undefined ||
       (entities.battery?.display_state === "one_way_no_zero" && battery.state.toBattery > 0) ||
diff --git a/src/components/grid.ts b/src/components/grid.ts
index 38e6cfc..0248439 100644
--- a/src/components/grid.ts
+++ b/src/components/grid.ts
@@ -37,7 +37,7 @@ export const gridElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, grid, "grid")}
-      <ha-icon .icon=${grid.icon}></ha-icon>
+      ${grid.icon !== " " ? html` <ha-icon id="grid-icon" .icon=${grid.icon} />` : null}
       ${(entities.grid?.display_state === "two_way" ||
         entities.grid?.display_state === undefined ||
         (entities.grid?.display_state === "one_way_no_zero" && (grid.state.toGrid ?? 0) > 0) ||
diff --git a/src/components/home.ts b/src/components/home.ts
index 9c40a48..fa0e28b 100644
--- a/src/components/home.ts
+++ b/src/components/home.ts
@@ -53,7 +53,7 @@ export const homeElement = (
     }}
   >
     ${generalSecondarySpan(main.hass, main, config, templatesObj, home, "home")}
-    <ha-icon .icon=${home.icon}></ha-icon>
+    ${home.icon !== " " ? html`<ha-icon id="home-icon" .icon=${home.icon} />` : null}
     ${homeUsageToDisplay}
     <svg class="home-circle-sections">
       ${
diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
index 72b1fd8..ae118d7 100644
--- a/src/components/individualLeftBottomElement.ts
+++ b/src/components/individualLeftBottomElement.ts
@@ -63,7 +63,7 @@ export const individualLeftBottomElement = (
       }}
     >
       ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, 1, "left-bottom")}
-      <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon}></ha-icon>
+      ${individualObj?.icon !== " " ? html` <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-bottom"
             >${individualObj?.showDirection
diff --git a/src/components/individualLeftTopElement.ts b/src/components/individualLeftTopElement.ts
index 687caca..9f87539 100644
--- a/src/components/individualLeftTopElement.ts
+++ b/src/components/individualLeftTopElement.ts
@@ -38,7 +38,7 @@ export const individualLeftTopElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 0, "left-top")}
-      <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-left-top">
             ${individualObj?.showDirection
diff --git a/src/components/individualRightBottomElement.ts b/src/components/individualRightBottomElement.ts
index 341a2f1..9ee9491 100644
--- a/src/components/individualRightBottomElement.ts
+++ b/src/components/individualRightBottomElement.ts
@@ -46,7 +46,7 @@ export const individualRightBottomElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 3, "right-bottom")}
-      <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-right-bottom">
             ${individualObj?.showDirection
diff --git a/src/components/individualRightTopElement.ts b/src/components/individualRightTopElement.ts
index b6a47e4..35bcb3b 100644
--- a/src/components/individualRightTopElement.ts
+++ b/src/components/individualRightTopElement.ts
@@ -47,7 +47,7 @@ export const individualRightTopElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 2, "right-top")}
-      <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-right-top">
             ${individualObj?.showDirection
diff --git a/src/components/nonFossil.ts b/src/components/nonFossil.ts
index a47cb8c..1cc06f2 100644
--- a/src/components/nonFossil.ts
+++ b/src/components/nonFossil.ts
@@ -38,7 +38,7 @@ export const nonFossilElement = (
           }}
         >
           ${generalSecondarySpan(main.hass, main, config, templatesObj, nonFossil, "low-carbon")}
-          <ha-icon .icon=${nonFossil.icon} class="low-carbon"></ha-icon>
+          ${nonFossil.icon !== " " ? html` <ha-icon id="low-carbon-icon" .icon=${nonFossil.icon} />` : null}
           ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
           (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
             ? html`
diff --git a/src/components/solar.ts b/src/components/solar.ts
index 18944e0..8d297fc 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -32,7 +32,7 @@ export const solarElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, solar, "solar")}
-      <ha-icon id="solar-icon" .icon=${solar.icon}></ha-icon>
+          ${solar.icon !== " " ? html` <ha-icon id="solar-icon" .icon=${solar.icon} />` : null}
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
         ? html` <span class="solar">
             ${displayValue(main.hass, config, solar.state.total, {

From 9d7e7dcadafa914156647049fbbb95721de9f1e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <zil1st@bosch.com>
Date: Sun, 21 Apr 2024 17:54:01 +0200
Subject: [PATCH 2/4] style: :art: whitespace formatting

---
 src/components/solar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/solar.ts b/src/components/solar.ts
index 8d297fc..d69222d 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -32,7 +32,7 @@ export const solarElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, solar, "solar")}
-          ${solar.icon !== " " ? html` <ha-icon id="solar-icon" .icon=${solar.icon} />` : null}
+      ${solar.icon !== " " ? html` <ha-icon id="solar-icon" .icon=${solar.icon} />` : null}
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
         ? html` <span class="solar">
             ${displayValue(main.hass, config, solar.state.total, {

From e37eb1eaa48a73f32ef15ab3d5d3da3bc3178f8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <zil1st@bosch.com>
Date: Sun, 21 Apr 2024 17:52:25 +0200
Subject: [PATCH 3/4] feat: :art: hide icons

---
 src/components/battery.ts                     | 25 +++++++++++--------
 src/components/grid.ts                        |  2 +-
 src/components/home.ts                        |  2 +-
 src/components/individualLeftBottomElement.ts |  2 +-
 src/components/individualLeftTopElement.ts    |  2 +-
 .../individualRightBottomElement.ts           |  2 +-
 src/components/individualRightTopElement.ts   |  2 +-
 src/components/nonFossil.ts                   |  2 +-
 src/components/solar.ts                       |  2 +-
 9 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/battery.ts b/src/components/battery.ts
index 4c6fec2..5d1093e 100644
--- a/src/components/battery.ts
+++ b/src/components/battery.ts
@@ -57,17 +57,20 @@ export const batteryElement = (
             })}
           </span>`
         : null}
-      <ha-icon
-        .icon=${battery.icon}
-        @click=${(e: { stopPropagation: () => void }) => {
-          main.openDetails(e, entities.battery?.state_of_charge!);
-        }}
-        @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
-          if (e.key === "Enter") {
-            main.openDetails(e, entities.battery?.state_of_charge!);
-          }
-        }}
-      ></ha-icon>
+      ${battery.icon !== " "
+        ? html` <ha-icon
+            id="battery-icon"
+            .icon=${battery.icon}
+            @click=${(e: { stopPropagation: () => void }) => {
+              main.openDetails(e, entities.battery?.state_of_charge!);
+            }}
+            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+              if (e.key === "Enter") {
+                main.openDetails(e, entities.battery?.state_of_charge!);
+              }
+            }}
+          />`
+        : null}
       ${entities.battery?.display_state === "two_way" ||
       entities.battery?.display_state === undefined ||
       (entities.battery?.display_state === "one_way_no_zero" && battery.state.toBattery > 0) ||
diff --git a/src/components/grid.ts b/src/components/grid.ts
index 38e6cfc..0248439 100644
--- a/src/components/grid.ts
+++ b/src/components/grid.ts
@@ -37,7 +37,7 @@ export const gridElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, grid, "grid")}
-      <ha-icon .icon=${grid.icon}></ha-icon>
+      ${grid.icon !== " " ? html` <ha-icon id="grid-icon" .icon=${grid.icon} />` : null}
       ${(entities.grid?.display_state === "two_way" ||
         entities.grid?.display_state === undefined ||
         (entities.grid?.display_state === "one_way_no_zero" && (grid.state.toGrid ?? 0) > 0) ||
diff --git a/src/components/home.ts b/src/components/home.ts
index 9c40a48..fa0e28b 100644
--- a/src/components/home.ts
+++ b/src/components/home.ts
@@ -53,7 +53,7 @@ export const homeElement = (
     }}
   >
     ${generalSecondarySpan(main.hass, main, config, templatesObj, home, "home")}
-    <ha-icon .icon=${home.icon}></ha-icon>
+    ${home.icon !== " " ? html`<ha-icon id="home-icon" .icon=${home.icon} />` : null}
     ${homeUsageToDisplay}
     <svg class="home-circle-sections">
       ${
diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
index 72b1fd8..ae118d7 100644
--- a/src/components/individualLeftBottomElement.ts
+++ b/src/components/individualLeftBottomElement.ts
@@ -63,7 +63,7 @@ export const individualLeftBottomElement = (
       }}
     >
       ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, 1, "left-bottom")}
-      <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon}></ha-icon>
+      ${individualObj?.icon !== " " ? html` <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-bottom"
             >${individualObj?.showDirection
diff --git a/src/components/individualLeftTopElement.ts b/src/components/individualLeftTopElement.ts
index 687caca..9f87539 100644
--- a/src/components/individualLeftTopElement.ts
+++ b/src/components/individualLeftTopElement.ts
@@ -38,7 +38,7 @@ export const individualLeftTopElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 0, "left-top")}
-      <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-left-top">
             ${individualObj?.showDirection
diff --git a/src/components/individualRightBottomElement.ts b/src/components/individualRightBottomElement.ts
index 341a2f1..9ee9491 100644
--- a/src/components/individualRightBottomElement.ts
+++ b/src/components/individualRightBottomElement.ts
@@ -46,7 +46,7 @@ export const individualRightBottomElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 3, "right-bottom")}
-      <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-right-bottom">
             ${individualObj?.showDirection
diff --git a/src/components/individualRightTopElement.ts b/src/components/individualRightTopElement.ts
index b6a47e4..35bcb3b 100644
--- a/src/components/individualRightTopElement.ts
+++ b/src/components/individualRightTopElement.ts
@@ -47,7 +47,7 @@ export const individualRightTopElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 2, "right-top")}
-      <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-right-top">
             ${individualObj?.showDirection
diff --git a/src/components/nonFossil.ts b/src/components/nonFossil.ts
index a47cb8c..1cc06f2 100644
--- a/src/components/nonFossil.ts
+++ b/src/components/nonFossil.ts
@@ -38,7 +38,7 @@ export const nonFossilElement = (
           }}
         >
           ${generalSecondarySpan(main.hass, main, config, templatesObj, nonFossil, "low-carbon")}
-          <ha-icon .icon=${nonFossil.icon} class="low-carbon"></ha-icon>
+          ${nonFossil.icon !== " " ? html` <ha-icon id="low-carbon-icon" .icon=${nonFossil.icon} />` : null}
           ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
           (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
             ? html`
diff --git a/src/components/solar.ts b/src/components/solar.ts
index 18944e0..8d297fc 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -32,7 +32,7 @@ export const solarElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, solar, "solar")}
-      <ha-icon id="solar-icon" .icon=${solar.icon}></ha-icon>
+          ${solar.icon !== " " ? html` <ha-icon id="solar-icon" .icon=${solar.icon} />` : null}
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
         ? html` <span class="solar">
             ${displayValue(main.hass, config, solar.state.total, {

From c19ab71f752d314a7875ad0e5539f2feb147321c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <zil1st@bosch.com>
Date: Sun, 21 Apr 2024 17:54:01 +0200
Subject: [PATCH 4/4] style: :art: whitespace formatting

---
 src/components/solar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/solar.ts b/src/components/solar.ts
index 8d297fc..d69222d 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -32,7 +32,7 @@ export const solarElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, solar, "solar")}
-          ${solar.icon !== " " ? html` <ha-icon id="solar-icon" .icon=${solar.icon} />` : null}
+      ${solar.icon !== " " ? html` <ha-icon id="solar-icon" .icon=${solar.icon} />` : null}
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
         ? html` <span class="solar">
             ${displayValue(main.hass, config, solar.state.total, {