feat(ags binto): add OSD

modules/ags/config/binto.ts

@@ -3,10 +3,11 @@ import Pointers from './services/pointers.ts';
 import AppLauncher from './ts/applauncher/main.ts';
 import Bar from './ts/bar/binto.ts';
 import { NotifPopups, NotifCenter } from './ts/notifications/binto.ts';
+import OSD from './ts/osd/main.ts';
 import Powermenu from './ts/powermenu.ts';
 
 
-// TODO: add OSD, workspace indicator and current window indicator
+// TODO: add workspace indicator and current window indicator
 App.config({
     icons: './icons',
 
@@ -21,5 +22,6 @@ App.config({
 
         Bar(),
         NotifPopups(),
+        OSD(),
     ],
 });

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

@@ -0,0 +1,40 @@
+.osd {
+  padding: 12px 20px;
+  background: rgba(40, 42, 54, 0.8);
+  border: 2px solid $contrast-bg;
+
+  label {
+    min-width: 170px;
+  }
+
+  progressbar:disabled {
+    opacity: 0.5;
+  }
+
+  progressbar {
+    min-height: 6px;
+    min-width: 170px;
+    border-radius: 999px;
+    background: transparent;
+    border: none;
+
+    trough {
+      background: #363847;
+      min-height: inherit;
+      border: none;
+    }
+
+    progress {
+      background: #79659f;
+      min-height: inherit;
+      border: none;
+    }
+  }
+
+  image {
+    font-size: 2rem;
+    color: white;
+    margin-left: -0.4rem;
+    margin-right: 0.8rem;
+  }
+}

modules/ags/config/scss/binto.scss

@@ -13,4 +13,5 @@ undershoot {
 @import './binto-widgets/bar';
 @import './binto-widgets/notification';
 @import './binto-widgets/notification-center';
+@import './binto-widgets/osd';
 @import './binto-widgets/powermenu';

modules/ags/config/services/brightness.ts

@@ -121,10 +121,8 @@ class Brightness extends Service {
     }
 
     #monitorKbdState() {
-        Variable(0, {
-            poll: [
-                INTERVAL,
-                `brightnessctl -d ${KBD} g`,
+        const interval = setInterval(() => {
+            execAsync(`brightnessctl -d ${KBD} g`).then(
                 (out) => {
                     if (parseInt(out) !== this.#kbd) {
                         this.#kbd = parseInt(out);
@@ -133,8 +131,10 @@ class Brightness extends Service {
                         return this.#kbd;
                     }
                 },
-            ],
-        });
+            ).catch(() => {
+                interval.destroy();
+            });
+        }, INTERVAL);
     }
 }