refactor(ags): rearrange bar js

config/ags/config.js

@@ -1,6 +1,6 @@
 import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
 import { Powermenu } from './js/powermenu.js';
-import { LeftBar } from './js/bar/traybuttons.js';
+import { Bar } from './js/bar/bar.js';
 import { Closer } from './js/common.js';
 
 const scss = ags.App.configDir + '/scss/main.scss';
@@ -13,7 +13,7 @@ export default {
     style: css,
     windows: [
       Powermenu,
-      LeftBar,
+      Bar,
       Closer,
     ]
 }

config/ags/js/bar/bar.js

@@ -0,0 +1,65 @@
+const { Window, CenterBox, Box } = ags.Widget;
+
+import { Separator, EventBox }  from '../common.js';
+import { CurrentWindow }        from './current-window.js';
+import { Workspaces }           from './workspaces.js';
+import { OskToggle }            from './osk-toggle.js'
+import { Heart }                from './heart.js'
+
+export const Bar = Window({
+  name: 'left-bar',
+  layer: 'overlay',
+  anchor: 'top left right',
+  exclusive: true,
+
+  child: CenterBox({
+    className: 'transparent',
+    halign: 'fill',
+    style: 'margin-top: 5px; margin-left: 5px;',
+    vertical: false,
+    
+    children: [
+
+      // Left
+      Box({
+        halign: 'start',
+        children: [
+
+          OskToggle,
+  
+          Separator(12),
+
+          EventBox({
+            className: 'toggle-off',
+            onPrimaryClickRelease: '',
+            child: ags.Widget.Box({
+              className: 'tablet-toggle',
+              vertical: false,
+
+              child: ags.Widget.Label({
+                label: " 󰦧 ",
+              }),
+            }),
+          }),
+      
+          Separator(12),
+
+          Heart,
+
+          Separator(12),
+
+          Workspaces(),
+
+        ],
+      }),
+
+      // Center
+      CurrentWindow,
+
+      // Right
+      Box({
+        halign: 'end',
+      }),
+    ],
+  }),
+});

config/ags/js/bar/heart.js

@@ -0,0 +1,31 @@
+
+
+import { EventBox } from '../common.js';
+
+ags.Utils.subprocess(
+  ['bash', '-c', 'tail -f /home/matt/.config/.heart'],
+  (output) => {
+    Heart.child.children[0].label = ' ' + output;
+
+    if (output == '󰣐') {
+      Heart.toggleClassName('toggle-on', true);
+    } else {
+      Heart.toggleClassName('toggle-on', false);
+    }
+  },
+);
+export const Heart = EventBox({
+  className: 'toggle-off',
+  halign: 'center',
+  onPrimaryClickRelease: function() {
+    ags.Utils.exec('/home/matt/.nix/config/ags/bin/heart.sh toggle');
+  },
+  child: ags.Widget.Box({
+    className: 'heart-toggle',
+    vertical: false,
+
+    child: ags.Widget.Label({
+      label: '',
+    }),
+  }),
+});

config/ags/js/bar/osk-toggle.js

@@ -0,0 +1,37 @@
+import { Separator, EventBox } from '../common.js';
+
+ags.Utils.subprocess(
+  ['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh getState'],
+  (output) => {
+    if (output == 'Running') {
+      OskToggle.toggleClassName('toggle-on', true);
+    } else {
+      OskToggle.toggleClassName('toggle-on', false);
+    }
+  },
+);
+export const OskToggle = EventBox({
+  className: 'toggle-off',
+  onPrimaryClickRelease: function() {
+    ags.Utils.subprocess(
+      ['bash', '-c', '/home/matt/.nix/config/ags/bin/osk-toggle.sh toggle'],
+      (output) => {
+        if (output == 'Running') {
+          OskToggle.toggleClassName('toggle-on', false);
+        } else {
+          OskToggle.toggleClassName('toggle-on', true);
+        }
+      },
+    );
+  },
+  child: ags.Widget.Box({
+    className: 'osk-toggle',
+    vertical: false,
+
+    children: [
+      ags.Widget.Label({
+        label: " 󰌌 ",
+      }),
+    ],
+  }),
+});

config/ags/js/bar/traybuttons.js

@@ -1,146 +0,0 @@
-import Gdk from 'gi://Gdk';
-const display = Gdk.Display.get_default();
-import { CurrentWindow } from './current-window.js';
-import { Workspaces } from './workspaces.js';
-
-const Separator = width => ags.Widget.Box({
-  style: `min-width: ${width}px;`,
-});
-
-ags.Utils.subprocess(
-  ['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh getState'],
-  (output) => {
-    if (output == 'Running') {
-      OskToggle.toggleClassName('toggle-on', true);
-    } else {
-      OskToggle.toggleClassName('toggle-on', false);
-    }
-  },
-);
-const OskToggle = ags.Widget.EventBox({
-  className: 'toggle-off',
-  onPrimaryClickRelease: function() {
-    ags.Utils.subprocess(
-      ['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh toggle'],
-      (output) => {
-        if (output == 'Running') {
-          OskToggle.toggleClassName('toggle-on', false);
-        } else {
-          OskToggle.toggleClassName('toggle-on', true);
-        }
-      },
-    );
-  },
-  onHover: box => {
-    box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
-  },
-  onHoverLost: box => {
-    box.window.set_cursor(null);
-  },
-  child: ags.Widget.Box({
-    className: 'osk-toggle',
-    vertical: false,
-
-    children: [
-      ags.Widget.Label({
-        label: " 󰌌 ",
-      }),
-    ],
-  }),
-});
-
-ags.Utils.subprocess(
-  ['bash', '-c', 'tail -f /home/matt/.config/.heart'],
-  (output) => {
-    HeartToggle.child.children[0].label = ' ' + output;
-
-    if (output == '󰣐') {
-      HeartToggle.toggleClassName('toggle-on', true);
-    } else {
-      HeartToggle.toggleClassName('toggle-on', false);
-    }
-  },
-);
-const HeartToggle = ags.Widget.EventBox({
-  className: 'toggle-off',
-  halign: 'center',
-  onPrimaryClickRelease: function() {
-    ags.Utils.exec('/home/matt/.nix/config/ags/scripts/heart.sh toggle');
-  },
-  onHover: box => {
-    box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
-  },
-  onHoverLost: box => {
-    box.window.set_cursor(null);
-  },
-  child: ags.Widget.Box({
-    className: 'heart-toggle',
-    vertical: false,
-
-    child: ags.Widget.Label({
-      label: '',
-    }),
-  }),
-});
-
-export const LeftBar = ags.Widget.Window({
-  name: 'left-bar',
-  layer: 'overlay',
-  anchor: 'top left right',
-  exclusive: true,
-
-  child: ags.Widget.CenterBox({
-    className: 'transparent',
-    halign: 'fill',
-    style: 'margin-top: 5px; margin-left: 5px;',
-    vertical: false,
-    
-    children: [
-
-      ags.Widget.Box({
-        halign: 'start',
-        children: [
-
-          OskToggle,
-  
-          Separator(12),
-
-          ags.Widget.EventBox({
-            className: 'toggle-off',
-            onPrimaryClickRelease: '',
-            onHover: box => {
-              box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
-            },
-            onHoverLost: box => {
-              box.window.set_cursor(null);
-            },
-            child: ags.Widget.Box({
-              className: 'tablet-toggle',
-              vertical: false,
-
-              child: ags.Widget.Label({
-                label: " 󰦧 ",
-              }),
-            }),
-          }),
-      
-          Separator(12),
-
-          HeartToggle,
-
-          Separator(12),
-
-          Workspaces(),
-
-        ],
-      }),
-
-      CurrentWindow,
-
-      ags.Widget.Box({
-        halign: 'end',
-        style: 'background: red; min-width: 100px; min-height: 40px',
-      }),
-    ],
-  }),
-});

config/ags/js/common.js

@@ -11,3 +11,20 @@ export const Closer = ags.Widget.Window({
     },
   }),
 });
+
+export const Separator = width => ags.Widget.Box({
+  style: `min-width: ${width}px;`,
+});
+
+import Gdk from 'gi://Gdk';
+const display = Gdk.Display.get_default();
+
+export const EventBox = ({ ...params }) => ags.Widget.EventBox({
+  ...params,
+  onHover: box => {
+    box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
+  },
+  onHoverLost: box => {
+    box.window.set_cursor(null);
+  },
+});