feat: add brightness widget

widgets/control-center/sliding-controls.tsx

@@ -1,12 +1,14 @@
 import { createBinding } from "ags";
 import { Gdk, Gtk } from "ags/gtk4";
 import AstalWp from "gi://AstalWp";
+import Brightness from "../../utils/brightness";
 
 export const SlidingControls = () => {
   const { VERTICAL } = Gtk.Orientation;
 
   const { defaultSpeaker: speaker, defaultMicrophone: microphone } =
     AstalWp.get_default()!;
+  const brightness = Brightness.get_default();
 
   const speakerIsMuted = createBinding(speaker, "mute");
 
@@ -36,6 +38,33 @@ export const SlidingControls = () => {
           cursor={Gdk.Cursor.new_from_name("pointer", null)}
         />
       </box>
+
+      <box cssClasses={["volume"]} spacing={20}>
+        <image iconName="fa-brightness-symbolic" />
+        <slider
+          hexpand
+          onChangeValue={(self) => {
+            brightness.screen = self.value;
+          }}
+          value={createBinding(brightness, "screen")}
+          cursor={Gdk.Cursor.new_from_name("pointer", null)}
+        />
+      </box>
+
+      <box cssClasses={["volume"]} spacing={20}>
+        <image iconName="fa-keyboard-symbolic" />
+        <slider
+          hexpand
+          min={0}
+          max={3}
+          step={1}
+          onChangeValue={(self) => {
+            brightness.kbd = self.value;
+          }}
+          value={createBinding(brightness, "kbd")}
+          cursor={Gdk.Cursor.new_from_name("pointer", null)}
+        />
+      </box>
     </box>
   );
 };