From 10c9d4200fffb6f3f49fc0ec871f0429ddd6aced Mon Sep 17 00:00:00 2001
From: Jean Tinland <jean.tinland@gmail.com>
Date: Sat, 23 Dec 2023 16:09:23 +0100
Subject: [PATCH] Simplify data widget section hiding if empty with CSS only

---
 index.jsx               | 47 ++++++++++++++++++-----------------------
 lib/styles/core/base.js |  5 ++++-
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/index.jsx b/index.jsx
index 53c4a075..64add7fa 100644
--- a/index.jsx
+++ b/index.jsx
@@ -34,9 +34,6 @@ const refreshFrequency = false;
 const settings = Settings.get();
 const { yabaiPath = "/usr/local/bin/yabai", shell } = settings.global;
 const { processWidget } = settings.widgets;
-const hasAnyWidgetEnabled = Object.entries(settings.widgets)
-  .filter(([widgetName]) => widgetName !== "processWidget")
-  .some(([_, enabled]) => enabled);
 const { hideWindowTitle, displayOnlyIcon, displaySkhdMode } = settings.process;
 
 const enableTitleChangedSignal = hideWindowTitle || displayOnlyIcon;
@@ -131,29 +128,27 @@ const render = ({ output, error }) => {
         />
       )}
       <Settings.Wrapper />
-      {hasAnyWidgetEnabled && (
-        <div className="simple-bar__data">
-          <UserWidgets display={displayIndex} />
-          <Zoom.Widget display={displayIndex} />
-          <BrowserTrack.Widget display={displayIndex} />
-          <Spotify.Widget display={displayIndex} />
-          <Crypto.Widget display={displayIndex} />
-          <Stock.Widget display={displayIndex} />
-          <Music.Widget display={displayIndex} />
-          <Mpd.Widget display={displayIndex} />
-          <Weather.Widget display={displayIndex} />
-          <Netstats.Widget display={displayIndex} />
-          <Cpu.Widget display={displayIndex} />
-          <Battery.Widget display={displayIndex} />
-          <Mic.Widget display={displayIndex} />
-          <Sound.Widget display={displayIndex} />
-          <ViscosityVPN.Widget display={displayIndex} />
-          <Wifi.Widget display={displayIndex} />
-          <Keyboard.Widget display={displayIndex} />
-          <DateDisplay.Widget display={displayIndex} />
-          <Time.Widget display={displayIndex} />
-        </div>
-      )}
+      <div className="simple-bar__data">
+        <UserWidgets display={displayIndex} />
+        <Zoom.Widget display={displayIndex} />
+        <BrowserTrack.Widget display={displayIndex} />
+        <Spotify.Widget display={displayIndex} />
+        <Crypto.Widget display={displayIndex} />
+        <Stock.Widget display={displayIndex} />
+        <Music.Widget display={displayIndex} />
+        <Mpd.Widget display={displayIndex} />
+        <Weather.Widget display={displayIndex} />
+        <Netstats.Widget display={displayIndex} />
+        <Cpu.Widget display={displayIndex} />
+        <Battery.Widget display={displayIndex} />
+        <Mic.Widget display={displayIndex} />
+        <Sound.Widget display={displayIndex} />
+        <ViscosityVPN.Widget display={displayIndex} />
+        <Wifi.Widget display={displayIndex} />
+        <Keyboard.Widget display={displayIndex} />
+        <DateDisplay.Widget display={displayIndex} />
+        <Time.Widget display={displayIndex} />
+      </div>
     </div>
   );
 };
diff --git a/lib/styles/core/base.js b/lib/styles/core/base.js
index 56c22667..236c4021 100644
--- a/lib/styles/core/base.js
+++ b/lib/styles/core/base.js
@@ -19,7 +19,7 @@ const baseStyles = /* css */ `
 @media only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (min-device-pixel-ratio: 2),
   only screen and (min-resolution: 192dpi),
-  only screen and (min-resolution: 2dppx) { 
+  only screen and (min-resolution: 2dppx) {
   .simple-bar {
     -webkit-font-smoothing: antialiased;
   }
@@ -86,6 +86,9 @@ const baseStyles = /* css */ `
   align-items: stretch;
   margin-left: auto;
 }
+.simple-bar__data:empty {
+  display: none;
+}
 .simple-bar--no-bar-background .simple-bar__data {
   padding: 4px 5px 4px 0;
   background-color: var(--background);