Possible brightness implementation

Modules/Bar/Bar.qml

@@ -119,6 +119,10 @@ Variants {
           anchors.verticalCenter: parent.verticalCenter
         }
 
+        Brightness {
+          anchors.verticalCenter: parent.verticalCenter
+        }
+
         Clock {
           anchors.verticalCenter: parent.verticalCenter
         }

Modules/Bar/Brightness.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import Quickshell
+import qs.Modules.Settings
+import qs.Services
+import qs.Widgets
+
+Item {
+  id: root
+
+  width: pill.width
+  height: pill.height
+
+  // Used to avoid opening the pill on Quickshell startup
+  property bool firstBrightnessReceived: false
+
+  function getIcon() {
+    if (!BrightnessService.available) {
+      return "brightness_auto"
+    }
+    var brightness = BrightnessService.brightness
+    return brightness <= 0 ? "brightness_1" : 
+           brightness < 33 ? "brightness_low" : 
+           brightness < 66 ? "brightness_medium" : "brightness_high"
+  }
+
+  // Connection used to open the pill when brightness changes
+  Connections {
+    target: Brightness
+    function onBrightnessUpdated() {
+      // console.log("[Bar:Brightness] onBrightnessUpdated")
+      if (!firstBrightnessReceived) {
+        // Ignore the first brightness change
+        firstBrightnessReceived = true
+      } else {
+        pill.show()
+      }
+    }
+  }
+
+  NPill {
+    id: pill
+    icon: getIcon()
+    iconCircleColor: Colors.mPrimary
+    collapsedIconColor: Colors.mOnSurface
+    autoHide: true
+    text: Math.round(BrightnessService.brightness) + "%"
+    tooltipText: "Brightness: " + Math.round(BrightnessService.brightness) + "%\nMethod: " + BrightnessService.currentMethod + "\nLeft click for advanced settings.\nScroll up/down to change BrightnessService."
+
+    onWheel: function (angle) {
+      if (!BrightnessService.available) return
+      
+      if (angle > 0) {
+        BrightnessService.increaseBrightness(1)
+      } else if (angle < 0) {
+        BrightnessService.decreaseBrightness(1)
+      }
+    }
+    onClicked: {
+      settingsPanel.requestedTab = SettingsPanel.Tab.Display
+      settingsPanel.isLoaded = true
+    }
+  }
+} 

Modules/Demo/DemoPanel.qml

@@ -273,6 +273,60 @@ NLoader {
                 Layout.fillWidth: true
               }
             }
+
+            // Brightness Control
+            ColumnLayout {
+              spacing: Style.marginMedium * scaling
+              NText {
+                text: "Brightness Control"
+                color: Colors.mSecondary
+                font.weight: Style.fontWeightBold
+              }
+
+              NText {
+                text: `Brightness: ${Math.round(Brightness.brightness)}%`
+                Layout.alignment: Qt.AlignVCenter
+              }
+
+              RowLayout {
+                spacing: Style.marginSmall * scaling
+                NIconButton {
+                  icon: "brightness_low"
+                  fontPointSize: Style.fontSizeLarge * scaling
+                  onClicked: {
+                    Brightness.decreaseBrightness(1)
+                  }
+                }
+                NSlider {
+                  from: 0
+                  to: 100
+                  stepSize: 1
+                  value: Brightness.brightness
+                  implicitWidth: bgRect.width * 0.5
+                  onMoved: {
+                    Brightness.setBrightnessDebounced(value)
+                  }
+                }
+                NIconButton {
+                  icon: "brightness_high"
+                  fontPointSize: Style.fontSizeLarge * scaling
+                  onClicked: {
+                    Brightness.increaseBrightness(1)
+                  }
+                }
+              }
+
+              NText {
+                text: `Method: ${Brightness.currentMethod} | Available: ${Brightness.available}`
+                color: Colors.mOnSurfaceVariant
+                font.pointSize: Style.fontSizeSmall * scaling
+                Layout.alignment: Qt.AlignHCenter
+              }
+
+              NDivider {
+                Layout.fillWidth: true
+              }
+            }
           }
         }
       }