feat(ags brightness): add changing screen brightness icon

devices/wim/config/ags/js/bar/buttons/brightness.js

@@ -6,6 +6,11 @@ import Separator from '../../misc/separator.js';
 const SPACING = 5;
 
 
+const Indicator = (props) => Icon({
+    ...props,
+    binds: [['icon', Brightness, 'screen-icon']],
+});
+
 const BrightnessPercentLabel = (props) => Label({
     ...props,
     connections: [[Brightness, (self) => {
@@ -34,7 +39,7 @@ export default () => {
         child: Box({
             className: 'brightness',
             children: [
-                Icon('display-brightness-symbolic'),
+                Indicator(),
                 rev,
             ],
         }),

devices/wim/config/ags/js/osd/osds.js

@@ -32,7 +32,7 @@ export const SpeakerOSD = (stack) => OSD({
 
 export const ScreenBrightnessOSD = (stack) => OSD({
     stack,
-    icon: 'display-brightness-symbolic',
+    icon: { binds: [['icon', Brightness, 'screen-icon']] },
     info: {
         mod: Brightness,
         signal: 'screen',

devices/wim/config/ags/js/quick-settings/slider-box.js

@@ -58,7 +58,7 @@ export default () => Box({
             children: [
                 Icon({
                     className: 'slider-label',
-                    icon: 'display-brightness-symbolic',
+                    binds: [['icon', Brightness, 'screen-icon']],
                 }),
 
                 Slider({

devices/wim/config/ags/services/brightness.js

@@ -5,6 +5,12 @@ import { exec, execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 const KBD = 'tpacpi::kbd_backlight';
 const CAPS = 'input0::capslock';
 const INTERVAL = 500;
+const SCREEN_ICONS = {
+    90: 'display-brightness-high-symbolic',
+    70: 'display-brightness-medium-symbolic',
+    20: 'display-brightness-low-symbolic',
+    5: 'display-brightness-off-symbolic',
+};
 
 class Brightness extends Service {
     static {
@@ -13,12 +19,14 @@ class Brightness extends Service {
             kbd: ['float'],
             caps: ['int'],
         }, {
+            'screen-icon': ['string', 'rw'],
             'caps-icon': ['string', 'rw'],
         });
     }
 
     #kbd = 0;
     #screen = 0;
+    #screenIcon = 'display-brightness-symbolic';
     #caps = 0;
     #capsIcon = 'caps-lock-symbolic';
 
@@ -30,6 +38,10 @@ class Brightness extends Service {
         return this.#screen;
     }
 
+    get screenIcon() {
+        return this.#screenIcon;
+    }
+
     get caps() {
         return this.#caps;
     }
@@ -55,6 +67,7 @@ class Brightness extends Service {
         execAsync(`brightnessctl s ${percent * 100}% -q`)
             .then(() => {
                 this.#screen = percent;
+                this.#getScreenIcon();
                 this.emit('screen', this.#screen);
             })
             .catch(console.error);
@@ -73,6 +86,18 @@ class Brightness extends Service {
         }
     }
 
+    #getScreenIcon() {
+        const brightness = this.#screen * 100;
+
+        // eslint-disable-next-line
+        for (const threshold of [4, 19, 69, 89]) {
+            if (brightness > threshold + 1) {
+                this.#screenIcon = SCREEN_ICONS[threshold + 1];
+                this.notify('screen-icon');
+            }
+        }
+    }
+
     fetchCapsState() {
         execAsync(`brightnessctl -d ${CAPS} g`)
             .then((out) => {