bar: add "nothing" mode (#544)

.config/ags/modules/bar/main.js

@@ -77,11 +77,14 @@ export const Bar = async (monitor = 0) => {
         endWidget: Widget.Box({}),
         setup: (self) => {
             self.hook(Battery, (self) => {
-                if(!Battery.available) return;
+                if (!Battery.available) return;
                 self.toggleClassName('bar-bg-focus-batterylow', Battery.percent <= userOptions.battery.low);
             })
         }
     });
+    const nothingContent = Widget.Box({
+        className: 'bar-bg-nothing',
+    })
     return Widget.Window({
         monitor,
         name: `bar${monitor}`,
@@ -95,9 +98,11 @@ export const Bar = async (monitor = 0) => {
             children: {
                 'normal': normalBarContent,
                 'focus': focusedBarContent,
+                'nothing': nothingContent,
             },
             setup: (self) => self.hook(currentShellMode, (self) => {
                 self.shown = currentShellMode.value;
+
             })
         }),
     });

.config/ags/scss/_bar.scss

@@ -22,6 +22,11 @@ $bar_ws_width_focus_active: 2.045rem;
     min-height: 1.364rem;
 }
 
+.bar-bg-nothing {
+    background-color: $layer0;
+    min-height: 2px;
+}
+
 .bar-bg-focus-batterylow {
     background-color: mix($layer0, $errorContainer, 80%);
 }

.config/ags/variables.js

@@ -21,12 +21,16 @@ globalThis['currentMode'] = currentShellMode;
 globalThis['cycleMode'] = () => {
     if (currentShellMode.value === 'normal') {
         currentShellMode.value = 'focus';
-    } else {
+    } 
+    else if (currentShellMode.value === 'focus') {
+        currentShellMode.value = 'nothing';
+    }
+    else {
         currentShellMode.value = 'normal';
     }
 }
 
-// // Window controls
+// Window controls
 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
 globalThis['toggleWindowOnAllMonitors'] = (name) => {
     range(Gdk.Display.get_default()?.get_n_monitors() || 1, 0).forEach(id => {