✨ feat: add backlight support

src/widget/bar/FocusedClient.tsx

@@ -10,13 +10,12 @@ import AstalHyprland from "gi://AstalHyprland";
 const hyprland = AstalHyprland.get_default();
 
 // Fix empty focused-client on opening a window on an empty workspace
-hyprland.connect("client-added", () => hyprland.notify("focused-client"));
+hyprland.connect("notify::clients", () => hyprland.notify("focused-client"));
 
 export const FocusedClient = () => {
     const focusedClient = createBinding(hyprland, "focusedClient");
 
-    return <Gtk.Box class={"focused-client"} 
-      visible={variableToBoolean(createBinding(hyprland, "focusedClient"))}>
+    return <Gtk.Box class={"focused-client"} visible={variableToBoolean(focusedClient)}>
         <With value={focusedClient}>
             {(focusedClient) => focusedClient?.class && <Gtk.Box>
                 <Gtk.Image iconName={createBinding(focusedClient, "class").as((clss) => 

src/widget/control-center/Sliders.tsx

@@ -4,6 +4,7 @@ import { Pages } from "./Pages";
 import { PageSound } from "./pages/Sound";
 import { PageMicrophone } from "./pages/Microphone";
 import { createBinding, With } from "ags";
+import { Backlight } from "../../modules/backlight";
 
 import AstalWp from "gi://AstalWp";
 
@@ -48,6 +49,27 @@ export function Sliders() {
                     slidersPages?.toggle(PageMicrophone)} />
             </Gtk.Box>}
         </With>
+        <Gtk.Box visible={Boolean(Backlight.getDefault())}>
+            {Backlight.getDefault() &&
+                <With value={createBinding(Backlight.getDefault()!, "default")}>
+                    {(bklight: Backlight) => bklight && 
+                        <Gtk.Box class={"backlight"} spacing={3}>
+                            <Gtk.Button onClicked={() => {
+                                  bklight.brightness = bklight.maxBrightness
+                              }} iconName={"display-brightness-symbolic"}
+                            />
+
+                            <Astal.Slider drawValue={false} hexpand value={createBinding(bklight, "brightness")} 
+                              max={bklight.maxBrightness}
+                              onChangeValue={(_, __, value) => {
+                                  Backlight.getDefault()!.brightness = value
+                              }}
+                            />
+                        </Gtk.Box>
+                    }
+                </With>
+            }
+        </Gtk.Box>
         <Pages $={(self) => slidersPages = self} />
     </Gtk.Box>
 }