ags/system-menu: rework connections/binds

home/programs/ags/utils/battery.js

@@ -0,0 +1,22 @@
+import { Battery } from "../imports.js";
+
+export const toTime = (time) => {
+  const MINUTE = 60;
+  const HOUR = MINUTE * 60;
+
+  if (time > 24 * HOUR) return "";
+
+  const hours = Math.round(time / HOUR);
+  const minutes = Math.round((time - hours * HOUR) / MINUTE);
+
+  const hoursDisplay = hours > 0 ? `${hours}h ` : "";
+  const minutesDisplay = minutes > 0 ? `${minutes}m ` : "";
+
+  return `${hoursDisplay}${minutesDisplay}`;
+};
+
+export const batteryTime = () => {
+  return Battery.timeRemaining > 0 && toTime(Battery.timeRemaining) != ""
+    ? `${toTime(Battery.timeRemaining)}remaining`
+    : "";
+};

home/programs/ags/utils/net.js

@@ -0,0 +1,15 @@
+import { Network } from "../imports.js";
+
+export const getNetIcon = (conn) => {
+  if (conn == "none") return "";
+  if (Network.primary == "wired") return "network-wired";
+
+  return Network.wifi.icon_name;
+};
+
+export const getNetText = (conn) => {
+  if (conn == "none") return "";
+  if (Network.primary == "wired") return "Wired";
+
+  return Network.wifi.ssid;
+};

home/programs/ags/windows/bar/modules/net.js

@@ -1,25 +1,16 @@
 import { Network, Widget } from "../../../imports.js";
+import { getNetIcon, getNetText } from "../../../utils/net.js";
 
 export default Widget.Icon({ className: "net module" })
   .bind(
     "icon",
     Network,
     "connectivity",
-    (conn) => {
-      if (conn == "none") return "";
-      if (Network.primary == "wired") return "network-wired";
-
-      return Network.wifi.icon_name;
-    },
+    getNetIcon,
   )
   .bind(
     "tooltip-text",
     Network,
     "connectivity",
-    (conn) => {
-      if (conn == "none") return "";
-      if (Network.primary == "wired") return "Wired";
-
-      return Network.wifi.ssid;
-    },
+    getNetText,
   );

home/programs/ags/windows/system-menu/battery_info.js

@@ -1,56 +1,29 @@
 import { App, Battery, Icons, Utils, Widget } from "../../imports.js";
+import { batteryTime } from "../../utils/battery.js";
 
 const batteryEnergy = () => {
   return Battery.energyRate > 0.1 ? `${Battery.energyRate.toFixed(1)} W ` : "";
 };
 
-const BatteryIcon = Widget.Icon({
-  binds: [
-    ["icon", Battery, "percent", () => Battery.iconName],
-    ["tooltip-text", Battery, "energy-rate", batteryEnergy],
-  ],
-});
+const BatteryIcon = Widget.Icon()
+  .bind("icon", Battery, "percent", () => Battery.iconName)
+  .bind("tooltip-text", Battery, "energy-rate", batteryEnergy);
 
-const BatteryPercent = Widget.Label({
-  binds: [[
+const BatteryPercent = Widget.Label()
+  .bind(
     "label",
     Battery,
     "percent",
     (percent) => `${percent}%`,
-  ]],
-});
-
-const toTime = (time) => {
-  const MINUTE = 60;
-  const HOUR = MINUTE * 60;
-
-  if (time > 24 * HOUR) return "";
-
-  const hours = Math.round(time / HOUR);
-  const minutes = Math.round((time - hours * HOUR) / MINUTE);
-
-  const hoursDisplay = hours > 0 ? `${hours}h ` : "";
-  const minutesDisplay = minutes > 0 ? `${minutes}m ` : "";
-
-  return `${hoursDisplay}${minutesDisplay}`;
-};
-
-const batteryTime = () => {
-  return Battery.timeRemaining > 0 && toTime(Battery.timeRemaining) != ""
-    ? `${toTime(Battery.timeRemaining)}remaining`
-    : "";
-};
+  );
 
 const BatteryTime = Widget.Label({
   className: "time",
   vexpand: true,
   vpack: "center",
-
-  binds: [
-    ["label", Battery, "charging", batteryTime],
-    ["label", Battery, "energy-rate", batteryTime],
-  ],
-});
+})
+  .bind("label", Battery, "charging", batteryTime)
+  .bind("label", Battery, "energy-rate", batteryTime);
 
 const BatteryBox = Widget.Box({
   className: "battery-box",

home/programs/ags/windows/system-menu/powerprofiles.js

@@ -14,11 +14,11 @@ const Profile = (args) =>
       children: [
         Widget.Icon({
           icon: args.icon ?? "",
-          binds: args.iconBinds ?? [],
+          setup: args.iconSetup,
         }),
         Widget.Label({
           label: args.label ?? "",
-          binds: args.labelBinds ?? [],
+          setup: args.labelSetup,
         }),
       ],
     }),
@@ -40,6 +40,33 @@ const makeProfiles = (profiles) =>
     })
   );
 
+const ActiveProfile = Profile({
+  props: {
+    className: "current-profile",
+  },
+  primaryClickAction: () => showList.value = !showList.value,
+  iconSetup: (self) => self.bind("icon", PowerProfiles, "icon"),
+  labelSetup: (self) =>
+    self.bind("label", PowerProfiles, "active-profile", prettyName),
+});
+
+const ProfileRevealer = Widget.Revealer({
+  revealChild: false,
+  transition: "slide_down",
+
+  child: Widget.Box({
+    className: "options",
+    vertical: true,
+  })
+    .bind(
+      "children",
+      PowerProfiles,
+      "profiles",
+      makeProfiles,
+    ),
+})
+  .bind("reveal-child", showList);
+
 export default Widget.Box({
   className: "power-profiles",
   vertical: true,
@@ -48,32 +75,8 @@ export default Widget.Box({
     Widget.Box({
       vertical: true,
       children: [
-        Profile({
-          props: {
-            className: "current-profile",
-          },
-          primaryClickAction: () => showList.value = !showList.value,
-          iconBinds: [["icon", PowerProfiles, "icon"]],
-          labelBinds: [["label", PowerProfiles, "active-profile", prettyName]],
-        }),
-        Widget.Revealer({
-          revealChild: false,
-          transition: "slide_down",
-
-          binds: [["reveal-child", showList]],
-
-          child: Widget.Box({
-            className: "options",
-            vertical: true,
-
-            binds: [[
-              "children",
-              PowerProfiles,
-              "profiles",
-              makeProfiles,
-            ]],
-          }),
-        }),
+        ActiveProfile,
+        ProfileRevealer,
       ],
     }),
   ],

home/programs/ags/windows/system-menu/sliders.js

@@ -12,13 +12,13 @@ const Slider = (args) =>
         onPrimaryClick: args.icon.action ?? null,
         child: Widget.Icon({
           icon: args.icon.icon ?? "",
-          binds: args.icon.binds ?? [],
+          setup: args.icon.setup,
         }),
       }),
       Widget.Slider({
         drawValue: false,
         hexpand: true,
-        binds: args.slider.binds ?? [],
+        setup: args.slider.setup,
         onChange: args.slider.onChange ?? null,
       }),
     ],
@@ -31,22 +31,13 @@ const vol = {
       App.toggleWindow("system-menu");
       Utils.execAsync("pavucontrol");
     },
-    binds: [
-      ["icon", Audio.speaker, "volume", audioIcon],
-      [
-        "icon",
-        Audio.speaker.stream,
-        "is-muted",
-        audioIcon,
-      ],
-    ],
+    setup: (self) =>
+      self
+        .bind("icon", Audio.speaker, "volume", audioIcon)
+        .bind("icon", Audio.speaker.stream, "is-muted", audioIcon),
   },
   slider: {
-    binds: [[
-      "value",
-      Audio.speaker,
-      "volume",
-    ]],
+    setup: (self) => self.bind("value", Audio.speaker, "volume"),
     onChange: ({ value }) => Audio.speaker.volume = value,
   },
 };
@@ -57,11 +48,7 @@ const brightness = {
     icon: Icons.brightness,
   },
   slider: {
-    binds: [[
-      "value",
-      Brightness,
-      "screen-value",
-    ]],
+    setup: (self) => self.bind("value", Brightness, "screen-value"),
     onChange: ({ value }) => Brightness.screenValue(value),
   },
 };