From b95ea7dde03f3f0a6d84df485346e314f323471c Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Thu, 21 Mar 2024 22:16:55 -0400
Subject: [PATCH] feat(ags binto): add OSD

---
 modules/ags/config/binto.ts                   |  4 +-
 .../ags/config/scss/binto-widgets/osd.scss    | 40 +++++++++++++++++++
 modules/ags/config/scss/binto.scss            |  1 +
 modules/ags/config/services/brightness.ts     | 12 +++---
 4 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 modules/ags/config/scss/binto-widgets/osd.scss

diff --git a/modules/ags/config/binto.ts b/modules/ags/config/binto.ts
index e56af1bf..691dd89f 100644
--- a/modules/ags/config/binto.ts
+++ b/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(),
     ],
 });
diff --git a/modules/ags/config/scss/binto-widgets/osd.scss b/modules/ags/config/scss/binto-widgets/osd.scss
new file mode 100644
index 00000000..26ecdb4c
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/modules/ags/config/scss/binto.scss b/modules/ags/config/scss/binto.scss
index b85b9a2d..034e6bb4 100644
--- a/modules/ags/config/scss/binto.scss
+++ b/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';
diff --git a/modules/ags/config/services/brightness.ts b/modules/ags/config/services/brightness.ts
index a77eb1df..2dd9cd56 100644
--- a/modules/ags/config/services/brightness.ts
+++ b/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);
     }
 }