feat(ags): add razer mouse battery indicator

.gitignore

@@ -5,3 +5,4 @@
 *build/
 result*
 *config.js
+*icons

modules/ags/config/binto.ts

@@ -12,6 +12,8 @@ export default {
         globalThis.Pointers = Pointers;
     },
 
+    icons: './icons',
+
     windows: [
         AppLauncher(),
         NotifCenter(),

modules/ags/config/scss/binto-widgets/bar.scss

@@ -5,7 +5,6 @@
   }
 
   .sys-tray {
-
     menubar {
       background-color: $bgfull;
       padding: 2.5px;
@@ -21,3 +20,49 @@
     }
   }
 }
+
+.razer {
+  padding: 0 5px;
+  background: $bgfull;
+
+  .low progress {
+    background: $red;
+  }
+
+  .medium progress {
+    background: $yellow;
+  }
+
+  .high progress {
+    background: $green;
+  }
+
+  progressbar:disabled {
+    opacity: 0.5;
+  }
+
+  progressbar {
+    min-height: 6px;
+    background: transparent;
+    border: none;
+
+    trough {
+      background: #363847;
+      min-height: inherit;
+      border-radius: inherit;
+      border: 0.3px solid black;
+    }
+
+    progress {
+      min-height: inherit;
+      border-radius: inherit;
+      border: none;
+    }
+  }
+
+  image {
+    padding-right: 5px;
+    font-size: 22px;
+    color: white;
+  }
+}

modules/ags/config/ts/bar/binto.ts

@@ -1,9 +1,11 @@
 const { Box, CenterBox, Window } = Widget;
 
-import SysTray from './items/systray.ts';
 import Separator from '../misc/separator.ts';
-import NotifButton from './items/notif-button.ts';
+
 import Clock from './items/clock.ts';
+import NotifButton from './items/notif-button.ts';
+import RazerStats from './items/razer-stats.ts';
+import SysTray from './items/systray.ts';
 
 const PADDING = 20;
 
@@ -26,6 +28,10 @@ export default () => Window({
                         Separator(PADDING),
 
                         SysTray(),
+
+                        Separator(PADDING / 2 / 2),
+
+                        RazerStats(),
                     ],
                 }),
 

modules/ags/config/ts/bar/items/razer-stats.ts

@@ -0,0 +1,61 @@
+const { Box, Icon, ProgressBar } = Widget;
+
+const RAZER_POLL = 30000;
+const LOW_BATT = 20;
+
+
+const RazerBat = Variable(-1, {
+    poll: [
+        RAZER_POLL,
+        [
+            'bash',
+            '-c',
+            "polychromatic-cli -n 'Razer Naga Pro (Wired)' -k" +
+            ' || ' +
+            "polychromatic-cli -n 'Razer Naga Pro (Wireless)' -k",
+        ],
+        (out) => {
+            const battery = out.split('\n')
+                .filter((i) => i.includes('Battery'))[0]
+                .match(/[0-9]+/);
+
+            return battery !== null ? parseInt(battery[0]) : -1;
+        },
+    ],
+});
+
+export default () => Box({
+    class_name: 'razer',
+    children: [
+        Icon({
+            hpack: 'start',
+            icon: RazerBat.bind().transform((v) => {
+                return v > -1 ?
+                    'mouse-razer-symbolic' :
+                    'content-loading-symbolic';
+            }),
+        }),
+
+        ProgressBar({
+            vpack: 'center',
+            value: RazerBat.bind().transform((v) => v >= 0 ? v / 100 : 0),
+            setup: (self) => {
+                self.hook(RazerBat, () => {
+                    self.toggleClassName(
+                        'high',
+                        RazerBat.value > 66,
+                    );
+                    self.toggleClassName(
+                        'medium',
+                        RazerBat.value > LOW_BATT && RazerBat.value <= 66,
+                    );
+                    self.toggleClassName(
+                        'low',
+                        RazerBat.value <= LOW_BATT,
+                    );
+                });
+            },
+        }),
+
+    ],
+});

modules/ags/config/wim.ts

@@ -14,6 +14,8 @@ Setup();
 
 
 export default {
+    icons: './icons',
+
     windows: [
         ...Corners(),
 

modules/ags/default.nix

@@ -29,6 +29,10 @@ in {
       home = {
         file = {
           ".config/ags".source = symlink /home/${mainUser}/.nix/modules/ags/config;
+          ".nix/modules/ags/config/icons/mouse-razer-symbolic.svg".source = pkgs.fetchurl {
+            url = "https://raw.githubusercontent.com/bithatch/razer-icon-font/main/src/devices/mouse.svg";
+            hash = "sha256-A1+eIp2VEFDyY23GIHKhbnByHXrnVS3QgIJ9sjjtuZw=";
+          };
           ".nix/modules/ags/config/types".source = agsTypes.source;
           ".nix/modules/ags/config/config.js".text =
             /*