make bar (more likely to work with) multimonitor (#162)

.config/ags/config.js

@@ -43,9 +43,9 @@ const Windows = () => [
     SideRight(),
     Osk(),
     Session(),
-    Bar(),
+    // forMonitors(Bar),
-    BarCornerTopleft(),
+    // forMonitors(BarCornerTopleft),
-    BarCornerTopright(),
+    // forMonitors(BarCornerTopright),
     forMonitors((id) => Corner(id, 'top left')),
     forMonitors((id) => Corner(id, 'top right')),
     forMonitors((id) => Corner(id, 'bottom left')),
@@ -62,3 +62,8 @@ export default {
     },
     windows: Windows().flat(1),
 };
+
+// Stuff that don't need to be toggled. And they're async so ugh...
+forMonitors(Bar);
+forMonitors(BarCornerTopleft);
+forMonitors(BarCornerTopright);

.config/ags/widgets/bar/main.js

@@ -1,11 +1,12 @@
 const { Gtk } = imports.gi;
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 
-import ModuleSpaceLeft from "./spaceleft.js";
+import WindowTitle from "./spaceleft.js";
-import ModuleSpaceRight from "./spaceright.js";
+import Indicators from "./spaceright.js";
-import { ModuleMusic } from "./music.js";
+import Music from "./music.js";
-import { ModuleSystem } from "./system.js";
+import System from "./system.js";
-import { RoundedCorner, dummyRegion, enableClickthrough } from "../../lib/roundedcorner.js";
+import { RoundedCorner, enableClickthrough } from "../../lib/roundedcorner.js";
+
 const OptionalWorkspaces = async () => {
     try {
         return (await import('./workspaces_hyprland.js')).default();
@@ -14,21 +15,29 @@ const OptionalWorkspaces = async () => {
         return null;
     }
 };
-const optionalWorkspacesInstance = await OptionalWorkspaces();
 
-export const Bar = (monitor = 0) => {
+export const Bar = async (monitor = 0) => {
-    const left = Widget.Box({
+    const SideModule = (children) => Widget.Box({
         className: 'bar-sidemodule',
-        children: [ModuleMusic()],
+        children: children,
     });
-
+    const barContent = Widget.CenterBox({
-    const center = Widget.Box({
+        className: 'bar-bg',
-        children: [optionalWorkspacesInstance],
+        setup: (self) => {
-    });
+            const styleContext = self.get_style_context();
-
+            const minHeight = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-    const right = Widget.Box({
+            // execAsync(['bash', '-c', `hyprctl keyword monitor ,addreserved,${minHeight},0,0,0`]).catch(print);
-        className: 'bar-sidemodule',
+        },
-        children: [ModuleSystem()],
+        startWidget: WindowTitle(),
+        centerWidget: Widget.Box({
+            className: 'spacing-h-4',
+            children: [
+                SideModule([Music()]),
+                await OptionalWorkspaces(),
+                SideModule([System()]),
+            ]
+        }),
+        endWidget: Indicators(),
     });
     return Widget.Window({
         monitor,
@@ -36,24 +45,7 @@ export const Bar = (monitor = 0) => {
         anchor: ['top', 'left', 'right'],
         exclusivity: 'exclusive',
         visible: true,
-        child: Widget.CenterBox({
+        child: barContent,
-            className: 'bar-bg',
-            startWidget: ModuleSpaceLeft(),
-            endWidget: ModuleSpaceRight(),
-            centerWidget: Widget.Box({
-                className: 'spacing-h-4',
-                children: [
-                    left,
-                    center,
-                    right,
-                ]
-            }),
-            setup: (self) => {
-                const styleContext = self.get_style_context();
-                const minHeight = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-                // execAsync(['bash', '-c', `hyprctl keyword monitor ,addreserved,${minHeight},0,0,0`]).catch(print);
-            }
-        }),
     });
 }
 

.config/ags/widgets/bar/music.js

@@ -41,7 +41,7 @@ const moveToRelativeWorkspace = async (self, num) => {
     }
 }
 
-export const ModuleMusic = () => {
+export default () => {
     // TODO: use cairo to make button bounce smaller on click, if that's possible
     const playingState = Widget.Box({ // Wrap a box cuz overlay can't have margins itself
         homogeneous: true,

.config/ags/widgets/bar/system.js

@@ -121,25 +121,6 @@ const BarBattery = () => Box({
     ]
 });
 
-const BarResourceValue = (name, icon, command) => Widget.Box({
-    vpack: 'center',
-    className: 'bar-batt spacing-h-5',
-    children: [
-        MaterialIcon(icon, 'small'),
-        Widget.ProgressBar({ // Progress
-            vpack: 'center', hexpand: true,
-            className: 'bar-prog-batt',
-            setup: (self) => self.poll(5000, (progress) => execAsync(['bash', '-c', command])
-                .then((output) => {
-                    progress.value = Number(output) / 100;
-                    progress.tooltipText = `${name}: ${Number(output)}%`
-                })
-                .catch(print)
-            ),
-        }),
-    ]
-});
-
 const BarResource = (name, icon, command) => {
     const resourceLabel = Label({
         className: 'txt-smallie txt-onSurfaceVariant',
@@ -195,7 +176,7 @@ const moveToRelativeWorkspace = async (self, num) => {
     }
 }
 
-export const ModuleSystem = () => Widget.EventBox({
+export default () => Widget.EventBox({
     onScrollUp: (self) => moveToRelativeWorkspace(self, -1),
     onScrollDown: (self) => moveToRelativeWorkspace(self, +1),
     onPrimaryClick: () => App.toggleWindow('sideright'),

.config/ags/widgets/indicators/main.js

@@ -1,7 +1,7 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Indicator from '../../services/indicator.js';
 import IndicatorValues from './indicatorvalues.js';
-import MusicControls from './musiccontrols.js';
+// import MusicControls from './musiccontrols.js';
 import ColorScheme from './colorscheme.js';
 import NotificationPopups from './notificationpopups.js';
 
@@ -23,7 +23,7 @@ export default (monitor = 0) => Widget.Window({
             css: 'min-height: 2px;',
             children: [
                 IndicatorValues(),
-                MusicControls(),
+                // MusicControls(),
                 NotificationPopups(),
                 ColorScheme(),
             ]