✨ feat(backlight): add page widget for backlight feature

src/i18n/lang/en_US.ts

@@ -61,6 +61,11 @@ export default {
                 gamma: "Gamma",
                 temperature: "Temperature"
             },
+            backlight: {
+                title: "Backlight",
+                description: "Control the brightness of your screens",
+                refresh: "Refresh backlights"
+            },
             bluetooth: {
                 title: "Bluetooth",
                 description: "Manage Bluetooth devices",

src/i18n/lang/pt_BR.ts

@@ -61,6 +61,11 @@ export default {
                 temperature: "Temperatura",
                 gamma: "Gama"
             },
+            backlight: {
+                title: "Brilho",
+                description: "Controle o nível de brilho das suas telas",
+                refresh: "Recarregar"
+            },
             bluetooth: {
                 title: "Bluetooth",
                 description: "Gerencie dispositivos Bluetooth",

src/i18n/struct.ts

@@ -59,6 +59,11 @@ export type i18nStruct = {
                 title: string,
                 interface: string
             },
+            backlight: {
+                title: string,
+                description: string,
+                refresh: string
+            },
             bluetooth: {
                 title: string,
                 description: string,

src/modules/backlight.ts

@@ -19,15 +19,22 @@ class Backlight extends GObject.Object {
     #maxBrightness: number;
     #brightness: number;
     #available: boolean = true;
+    #monitor: Gio.FileMonitor;
 
     @signal(Number) brightnessChanged(_: number): void {};
 
+    @getter(String)
+    get name() { return this.#name; }
+
     @getter(String)
     get path() { return this.#path; }
 
     @getter(GObject.Object as unknown as ParamSpec<Backlight>)
     get default() { return Backlight.default; }
 
+    @getter(Object as unknown as ParamSpec<Array<Backlight>>)
+    get backlights() { return Backlight.backlights; }
+    
     @getter(Boolean)
     get isDefault() { return this.path === this.default?.path; }
 
@@ -97,6 +104,7 @@ class Backlight extends GObject.Object {
         }
 
         Backlight._backlights = backlights;
+        backlights.forEach(bk => bk.notify("backlights"));
         return backlights;
     }
 
@@ -119,7 +127,7 @@ class Backlight extends GObject.Object {
         this.#brightness = Number.parseInt(readFile(`${this.#path}/brightness`))
 
 
-        monitorFile(`/sys/class/backlight/${name}/brightness`, () => {
+        this.#monitor = monitorFile(`/sys/class/backlight/${name}/brightness`, () => {
             this.#brightness = this.readBrightness();
             this.notify("brightness");
             this.emit("brightness-changed", this.brightness);
@@ -166,6 +174,10 @@ class Backlight extends GObject.Object {
         return null;
     }
 
+    vfunc_dispose(): void {
+        this.#monitor.cancel();
+    }
+
     public emit<Signal extends keyof typeof this.$signals>(
         signal: Signal,
         ...args: Parameters<(typeof this.$signals)[Signal]>

src/widget/control-center/Sliders.tsx

@@ -7,6 +7,7 @@ import { createBinding, With } from "ags";
 import { Backlight } from "../../modules/backlight";
 
 import AstalWp from "gi://AstalWp";
+import { PageBacklight } from "./pages/Backlight";
 
 
 export let slidersPages: Pages|undefined;
@@ -65,6 +66,8 @@ export function Sliders() {
                                   Backlight.getDefault()!.brightness = value
                               }}
                             />
+                            <Gtk.Button class={"more"} iconName={"go-next-symbolic"} onClicked={() => 
+                                slidersPages?.toggle(PageBacklight)} />
                         </Gtk.Box>
                     }
                 </With>

src/widget/control-center/pages/Backlight.tsx

@@ -0,0 +1,41 @@
+import { Astal, Gtk } from "ags/gtk4";
+import { tr } from "../../../i18n/intl";
+import { Backlight } from "../../../modules/backlight";
+import { Page } from "./Page";
+import { createBinding, With } from "ags";
+import { addSliderMarksFromMinMax } from "../../../modules/utils";
+
+
+export const PageBacklight = new Page({
+    id: "backlight",
+    title: tr("control_center.pages.backlight.title"),
+    description: tr("control_center.pages.backlight.description"),
+    content: () => (
+        <With value={createBinding(Backlight.getDefault()!, "backlights")}>
+            {(bklights: Array<Backlight>) => bklights.length > 0 &&
+                <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={6}>
+                    {bklights.map((bklight, i) =>
+                        <Gtk.Box class={"bklight"} orientation={Gtk.Orientation.VERTICAL}
+                          spacing={4}>
+
+                            <Gtk.Label class={"subheader"} label={`Backlight ${i+1} (${bklight.name})`} 
+                              xalign={0} />
+                            <Astal.Slider $={(self) => addSliderMarksFromMinMax(self)} 
+                              min={0} max={bklight.maxBrightness}
+                              value={createBinding(bklight, "brightness")}
+                              onChangeValue={(_, __, value) => {
+                                  bklight.brightness = value
+                              }}
+                            />
+                        </Gtk.Box>
+                    )}
+                </Gtk.Box>
+            }
+        </With>
+    ),
+    headerButtons: [{
+        icon: "arrow-circular-top-right",
+        tooltipText: tr("control_center.pages.backlight.refresh"),
+        actionClicked: () => Backlight.scan()
+    }]
+});