From f0bf559885b95d71b8bf1d8e4f0728bae569f2b9 Mon Sep 17 00:00:00 2001
From: Joshua Yuen <joshuayuen99@gmail.com>
Date: Sat, 12 Sep 2026 17:57:14 -0400
Subject: [PATCH] Add brightness slider polled from brightnessctl

---
 modules/home/ags/app/widget/Brightness.tsx    | 31 +++++++++++++++++++
 modules/home/ags/app/widget/QuickSettings.tsx |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 modules/home/ags/app/widget/Brightness.tsx

diff --git a/modules/home/ags/app/widget/Brightness.tsx b/modules/home/ags/app/widget/Brightness.tsx
new file mode 100644
index 0000000..abf0e84
--- /dev/null
+++ b/modules/home/ags/app/widget/Brightness.tsx
@@ -0,0 +1,31 @@
+import { execAsync, Variable, bind } from "astal"
+
+// no astal.brightness lib in nixpkgs: poll brightnessctl for the current
+// level as a 0..1 fraction, pushing changes through brightnessctl set
+const percent = Variable(0).poll(
+    2000,
+    ["sh", "-c", "echo $(( $(brightnessctl get) * 100 / $(brightnessctl max) ))"],
+    (out) => parseInt(out) / 100,
+)
+
+export function BrightnessRow() {
+    return (
+        <box className="qs-row">
+            <button className="qs-toggle">
+                <icon icon="display-brightness-symbolic" />
+            </button>
+            <slider
+                className="vol-slider"
+                hexpand
+                value={bind(percent)}
+                onDragged={(self) => {
+                    const pct = Math.round(self.value * 100)
+                    percent.set(pct / 100)
+                    execAsync(["brightnessctl", "set", `${pct}%`]).catch(
+                        console.error,
+                    )
+                }}
+            />
+        </box>
+    )
+}
diff --git a/modules/home/ags/app/widget/QuickSettings.tsx b/modules/home/ags/app/widget/QuickSettings.tsx
index b36530b..77477bb 100644
--- a/modules/home/ags/app/widget/QuickSettings.tsx
+++ b/modules/home/ags/app/widget/QuickSettings.tsx
@@ -5,6 +5,7 @@ import { execAsync, Variable, bind } from "astal"
 import Dropdown from "./Dropdown"
 import { wifiIcon, WifiSection } from "./Wifi"
 import { bluetoothIndicator, BluetoothSection } from "./Bluetooth"
+import { BrightnessRow } from "./Brightness"
 import { batteryIcon, batteryPercent, BatterySection } from "./Battery"
 import { NotificationCard } from "./Notifications"
 
@@ -125,6 +126,7 @@ export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
                     />
                 </box>
             )}
+            <BrightnessRow />
             <WifiSection open={open} />
             <BluetoothSection open={open} />
             <BatterySection />