change order of center left section of bar; introduce focus mode

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

@@ -1,19 +1,35 @@
 const { Gtk } = imports.gi;
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
 
-import WindowTitle from "./spaceleft.js";
-import Indicators from "./spaceright.js";
-import Music from "./music.js";
-import System from "./system.js";
+import WindowTitle from "./normal/spaceleft.js";
+import Indicators from "./normal/spaceright.js";
+import Music from "./normal/music.js";
+import System from "./normal/system.js";
 import { enableClickthrough } from "../.widgetutils/clickthrough.js";
 import { RoundedCorner } from "../.commonwidgets/cairo_roundedcorner.js";
+import { currentShellMode } from '../../variables.js';
 
-const OptionalWorkspaces = async () => {
+const BATTERY_LOW = 20;
+
+const NormalOptionalWorkspaces = async () => {
     try {
-        return (await import('./workspaces_hyprland.js')).default();
+        return (await import('./normal/workspaces_hyprland.js')).default();
     } catch {
         try {
-            return (await import('./workspaces_sway.js')).default();
+            return (await import('./normal/workspaces_sway.js')).default();
+        } catch {
+            return null;
+        }
+    }
+};
+
+const FocusOptionalWorkspaces = async () => {
+    try {
+        return (await import('./focus/workspaces_hyprland.js')).default();
+    } catch {
+        try {
+            return (await import('./focus/workspaces_sway.js')).default();
         } catch {
             return null;
         }
@@ -25,7 +41,7 @@ export const Bar = async (monitor = 0) => {
         className: 'bar-sidemodule',
         children: children,
     });
-    const barContent = Widget.CenterBox({
+    const normalBarContent = Widget.CenterBox({
         className: 'bar-bg',
         setup: (self) => {
             const styleContext = self.get_style_context();
@@ -39,20 +55,54 @@ export const Bar = async (monitor = 0) => {
                 SideModule([Music()]),
                 Widget.Box({
                     homogeneous: true,
-                    children: [await OptionalWorkspaces()],
+                    children: [await NormalOptionalWorkspaces()],
                 }),
                 SideModule([System()]),
             ]
         }),
         endWidget: Indicators(),
     });
+    const focusedBarContent = Widget.CenterBox({
+        className: 'bar-bg-focus',
+        startWidget: Widget.Box({}),
+        centerWidget: Widget.Box({
+            className: 'spacing-h-4',
+            children: [
+                SideModule([]),
+                Widget.Box({
+                    homogeneous: true,
+                    children: [await FocusOptionalWorkspaces()],
+                }),
+                SideModule([]),
+            ]
+        }),
+        endWidget: Widget.Box({}),
+        setup: (self) => {
+            self.hook(Battery, (self) => {
+                if(!Battery.available) return;
+                print(Battery.percent)
+                self.toggleClassName('bar-bg-focus-batterylow', Battery.percent <= BATTERY_LOW);
+            })
+        }
+    });
     return Widget.Window({
         monitor,
         name: `bar${monitor}`,
         anchor: ['top', 'left', 'right'],
         exclusivity: 'exclusive',
         visible: true,
-        child: barContent,
+        child: Widget.Stack({
+            homogeneous: false,
+            transition: 'slide_up_down',
+            transitionDuration: 200,
+            children: {
+                'normal': normalBarContent,
+                'focus': focusedBarContent,
+            },
+            setup: (self) => self.hook(currentShellMode, (self) => {
+                self.shown = currentShellMode.value;
+            })
+        }),
     });
 }
 
@@ -73,4 +123,4 @@ export const BarCornerTopright = (id = '') => Widget.Window({
     visible: true,
     child: RoundedCorner('topright', { className: 'corner', }),
     setup: enableClickthrough,
-});
+});