system resources

.config/ags/config.js

@@ -64,7 +64,7 @@ export default {
 };
 
 // Stuff that don't need to be toggled. And they're async so ugh...
-// Bar().catch(print);
+// Bar().catch(print); // Use this to debug the bar
 forMonitors(Bar);
 forMonitors(BarCornerTopleft);
 forMonitors(BarCornerTopright);

.config/ags/scss/_lib_classes.scss

@@ -264,6 +264,14 @@
     margin-right: 0rem;
 }
 
+.spacing-h-4 > overlay > *:first-child {
+    margin-right: 0.273rem;
+}
+
+.spacing-h-4 > overlay:last-child > * {
+    margin-right: 0rem;
+}
+
 .spacing-h-5 > * {
     margin-right: 0.341rem;
 }

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

@@ -1,12 +1,14 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
+const { Box, Label, Overlay, Revealer } = Widget;
 const { execAsync, exec } = Utils;
 import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
+import { MaterialIcon } from '../../lib/materialicon.js';
 import { showMusicControls } from '../../variables.js';
 
 function trimTrackTitle(title) {
-    if(!title) return '';
+    if (!title) return '';
     const cleanRegexes = [
         /【[^】]*】/,         // Touhou n weeb stuff
         /\[FREE DOWNLOAD\]/, // F-777
@@ -15,6 +17,54 @@ function trimTrackTitle(title) {
     return title;
 }
 
+const BarGroup = ({ child }) => Widget.Box({
+    className: 'bar-group-margin bar-sides',
+    children: [
+        Widget.Box({
+            className: 'bar-group bar-group-standalone bar-group-pad-system',
+            children: [child],
+        }),
+    ]
+});
+
+const BarResource = (name, icon, command) => {
+    const resourceCircProg = AnimatedCircProg({
+        className: 'bar-batt-circprog',
+        vpack: 'center',
+        hpack: 'center',
+    });
+    const resourceProgress = Overlay({
+        child: Widget.Box({
+            vpack: 'center',
+            className: 'bar-batt',
+            homogeneous: true,
+            children: [
+                MaterialIcon(icon, 'small'),
+            ],
+        }),
+        overlays: [resourceCircProg]
+    });
+    const resourceLabel = Label({
+        className: 'txt-smallie txt-onSurfaceVariant',
+    });
+    const widget = Box({
+        className: 'spacing-h-4 txt-onSurfaceVariant',
+        children: [
+            resourceLabel,
+            resourceProgress,
+        ],
+        setup: (self) => self
+            .poll(5000, () => execAsync(['bash', '-c', command])
+                .then((output) => {
+                    resourceCircProg.css = `font-size: ${Number(output)}px;`;
+                    resourceLabel.label = `${Math.round(Number(output))}%`;
+                    widget.tooltipText = `${name}: ${Math.round(Number(output))}%`;
+                }).catch(print))
+        ,
+    });
+    return widget;
+}
+
 const TrackProgress = () => {
     const _updateProgress = (circprog) => {
         const mpris = Mpris.getPlayer('');
@@ -84,22 +134,49 @@ export default () => {
             }),
         })
     })
+    const musicStuff = Box({
+        className: 'spacing-h-10',
+        hexpand: true,
+        children: [
+            playingState,
+            trackTitle,
+        ]
+    })
+    const systemResources = BarGroup({
+        child: Box({
+            className: 'spacing-h-10',
+            children: [
+                BarResource('RAM Usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
+                Revealer({
+                    revealChild: true,
+                    transition: 'slide_left',
+                    transitionDuration: 200,
+                    child: Box({
+                        className: 'spacing-h-10',
+                        children: [
+                            BarResource('Swap Usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
+                            BarResource('CPU Usage', 'settings_motion_mode', `top -bn1 | grep Cpu | awk '{print $2}'`),
+                        ]
+                    }),
+                    setup: (self) => self.hook(Mpris, label => {
+                        const mpris = Mpris.getPlayer('');
+                        self.revealChild = (!mpris);
+                    }),
+                })
+            ],
+        })
+    });
     return Widget.EventBox({
         onScrollUp: (self) => switchToRelativeWorkspace(self, -1),
         onScrollDown: (self) => switchToRelativeWorkspace(self, +1),
         onPrimaryClickRelease: () => showMusicControls.setValue(!showMusicControls.value),
         onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']),
         onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
-        child: Widget.Box({
+        child: Box({
-            className: 'bar-group-margin bar-sides',
+            className: 'spacing-h-5',
             children: [
-                Widget.Box({
+                BarGroup({ child: musicStuff }),
-                    className: 'bar-group bar-group-standalone bar-group-pad-music spacing-h-10',
+                systemResources,
-                    children: [
-                        playingState,
-                        trackTitle,
-                    ]
-                })
             ]
         })
     });

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

@@ -121,42 +121,6 @@ const BarBattery = () => Box({
     ]
 });
 
-const BarResource = (name, icon, command) => {
-    const resourceLabel = Label({
-        className: 'txt-smallie txt-onSurfaceVariant',
-    });
-    const resourceCircProg = AnimatedCircProg({
-        className: 'bar-batt-circprog',
-        vpack: 'center', hpack: 'center',
-    });
-    const widget = Box({
-        className: 'spacing-h-4 txt-onSurfaceVariant',
-        children: [
-            resourceLabel,
-            Overlay({
-                child: Widget.Box({
-                    vpack: 'center',
-                    className: 'bar-batt',
-                    homogeneous: true,
-                    children: [
-                        MaterialIcon(icon, 'small'),
-                    ],
-                }),
-                overlays: [resourceCircProg]
-            }),
-        ],
-        setup: (self) => self
-            .poll(5000, () => execAsync(['bash', '-c', command])
-                .then((output) => {
-                    resourceCircProg.css = `font-size: ${Number(output)}px;`;
-                    resourceLabel.label = `${Math.round(Number(output))}%`;
-                    widget.tooltipText = `${name}: ${Math.round(Number(output))}%`;
-                }).catch(print))
-        ,
-    });
-    return widget;
-}
-
 const BarGroup = ({ child }) => Widget.Box({
     className: 'bar-group-margin bar-sides',
     children: [
@@ -195,9 +159,11 @@ export default () => Widget.EventBox({
                         ]
                     })],
                     ['desktop', Box({
-                        className: 'spacing-h-5', children: [
+                        className: 'spacing-h-5',
-                            BarGroup({ child: BarResource('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
+                        children: [
-                            BarGroup({ child: BarResource('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
+                            Label({
+                                label: 'Weather',
+                            })
                         ]
                     })],
                 ],