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

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()
+    }]
+});