Bar now properly hides if all sections are empty. (#467)

lib/types/options.d.ts

@@ -15,6 +15,9 @@ export type RecursiveOptionsObject = {
 };
 
 export type BarLocation = 'top' | 'bottom';
+export type BarLayout = {
+    [key: string]: Layout;
+};
 
 export type Unit = 'imperial' | 'metric';
 export type PowerOptions = 'sleep' | 'reboot' | 'logout' | 'shutdown';

modules/bar/Bar.ts

@@ -33,7 +33,7 @@ import Button from 'types/widgets/button.js';
 import Gtk from 'types/@girs/gtk-3.0/gtk-3.0.js';
 
 import './SideEffects';
-import { WindowLayer } from 'lib/types/options.js';
+import { BarLayout, WindowLayer } from 'lib/types/options.js';
 import { Attribute, Child } from 'lib/types/widget.js';
 import Window from 'types/widgets/window.js';
 
@@ -72,10 +72,6 @@ type Layout = {
     right: Section[];
 };
 
-type BarLayout = {
-    [key: string]: Layout;
-};
-
 const getLayoutForMonitor = (monitor: number, layouts: BarLayout): Layout => {
     const matchingKey = Object.keys(layouts).find((key) => key === monitor.toString());
     const wildcard = Object.keys(layouts).find((key) => key === '*');
@@ -95,6 +91,14 @@ const getLayoutForMonitor = (monitor: number, layouts: BarLayout): Layout => {
     };
 };
 
+const isLayoutEmpty = (layout: Layout): boolean => {
+    const isLeftSectionEmpty = !Array.isArray(layout.left) || layout.left.length === 0;
+    const isRightSectionEmpty = !Array.isArray(layout.right) || layout.right.length === 0;
+    const isMiddleSectionEmpty = !Array.isArray(layout.middle) || layout.middle.length === 0;
+
+    return isLeftSectionEmpty && isRightSectionEmpty && isMiddleSectionEmpty;
+};
+
 const widget = {
     battery: (): Button<Child, Attribute> => WidgetContainer(BatteryLabel()),
     dashboard: (): Button<Child, Attribute> => WidgetContainer(Menu()),
@@ -259,7 +263,10 @@ export const Bar = (() => {
             name: `bar-${hyprlandMonitor}`,
             class_name: 'bar',
             monitor,
-            visible: true,
+            visible: layouts.bind('value').as(() => {
+                const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.value);
+                return !isLayoutEmpty(foundLayout);
+            }),
             anchor: location.bind('value').as((ln) => [ln, 'left', 'right']),
             exclusivity: 'exclusive',
             layer: Utils.merge(
@@ -283,7 +290,7 @@ export const Bar = (() => {
                         hexpand: true,
                         setup: (self) => {
                             self.hook(layouts, (self) => {
-                                const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.value as BarLayout);
+                                const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.value);
                                 self.children = foundLayout.left
                                     .filter((mod) => Object.keys(widget).includes(mod))
                                     .map((w) => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
@@ -295,7 +302,7 @@ export const Bar = (() => {
                         hpack: 'center',
                         setup: (self) => {
                             self.hook(layouts, (self) => {
-                                const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.value as BarLayout);
+                                const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.value);
                                 self.children = foundLayout.middle
                                     .filter((mod) => Object.keys(widget).includes(mod))
                                     .map((w) => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
@@ -307,7 +314,7 @@ export const Bar = (() => {
                         hpack: 'end',
                         setup: (self) => {
                             self.hook(layouts, (self) => {
-                                const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.value as BarLayout);
+                                const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.value);
                                 self.children = foundLayout.right
                                     .filter((mod) => Object.keys(widget).includes(mod))
                                     .map((w) => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);

options.ts

@@ -4,6 +4,7 @@ import { KbLabelType } from 'lib/types/customModules/kbLayout';
 import {
     ActiveWsIndicator,
     BarButtonStyles,
+    BarLayout,
     BarLocation,
     BluetoothBatteryState,
     BorderLocation,
@@ -853,7 +854,7 @@ const options = mkOptions(OPTIONS, {
 
     bar: {
         scrollSpeed: opt(5),
-        layouts: opt({
+        layouts: opt<BarLayout>({
             '1': {
                 left: ['dashboard', 'workspaces', 'windowtitle'],
                 middle: ['media'],