extract BacklightApplet, add brightness and notif pills to lock screen right column

shell/applets/BacklightApplet.qml

@@ -0,0 +1,79 @@
+import QtQuick
+import "../services" as S
+
+Item {
+    id: root
+
+    required property int percent
+    required property color accentColor
+
+    signal setPercent(real pct)
+
+    implicitHeight: 36
+
+    Text {
+        id: _icon
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        anchors.verticalCenter: parent.verticalCenter
+        text: "\uF185"
+        color: root.accentColor
+        font.pixelSize: S.Theme.fontSize + 2
+        font.family: S.Theme.iconFontFamily
+    }
+
+    Item {
+        id: _slider
+        anchors.left: _icon.right
+        anchors.leftMargin: 8
+        anchors.right: _label.left
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+        height: 6
+
+        Rectangle {
+            anchors.fill: parent
+            color: S.Theme.base02
+            radius: 3
+        }
+
+        Rectangle {
+            width: parent.width * root.percent / 100
+            height: parent.height
+            color: root.accentColor
+            radius: 3
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 80
+                }
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -6
+            cursorShape: Qt.PointingHandCursor
+            onPressed: mouse => _set(mouse)
+            onPositionChanged: mouse => {
+                if (pressed)
+                    _set(mouse);
+            }
+            function _set(mouse) {
+                root.setPercent(mouse.x / _slider.width * 100);
+            }
+        }
+    }
+
+    Text {
+        id: _label
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+        anchors.verticalCenter: parent.verticalCenter
+        text: root.percent + "%"
+        color: S.Theme.base05
+        font.pixelSize: S.Theme.fontSize
+        font.family: S.Theme.fontFamily
+        width: 30
+    }
+}

shell/applets/qmldir

@@ -6,3 +6,4 @@ CpuApplet 1.0 CpuApplet.qml
 MemoryApplet 1.0 MemoryApplet.qml
 TemperatureApplet 1.0 TemperatureApplet.qml
 DiskApplet 1.0 DiskApplet.qml
+BacklightApplet 1.0 BacklightApplet.qml

shell/lock/LockSurface.qml

@@ -115,16 +115,6 @@ WlSessionLockSurface {
             anchors.horizontalCenter: parent.horizontalCenter
             spacing: 24
 
-            LockNotifPills {
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            // Spacer
-            Item {
-                width: 1
-                height: 24
-            }
-
             // Password input
             LockInput {
                 anchors.horizontalCenter: parent.horizontalCenter

shell/lock/LockWidgets.qml

@@ -1,4 +1,6 @@
 import QtQuick
+import Quickshell
+import Quickshell.Io
 import Quickshell.Services.Mpris
 import Quickshell.Services.Pipewire
 import "../services" as S
@@ -28,13 +30,19 @@ Item {
     }
 
     implicitHeight: _widgetContent.implicitHeight
-    visible: _mprisCard.visible || _volumeCard.visible
+    visible: _mprisCard.visible || _volumeCard.visible || _backlightCard.visible || _notifPills.visible
 
     Column {
         id: _widgetContent
         width: parent.width
         spacing: 12
 
+        // Notification pills
+        LockNotifPills {
+            id: _notifPills
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
         // Media widget
         Rectangle {
             id: _mprisCard
@@ -96,5 +104,74 @@ Item {
                 accentColor: S.Theme.base0E
             }
         }
+
+        // Brightness widget
+        Rectangle {
+            id: _backlightCard
+            width: parent.width
+            height: _backlightContent.implicitHeight + 8
+            radius: S.Theme.radius + 2
+            color: Qt.rgba(S.Theme.base01.r, S.Theme.base01.g, S.Theme.base01.b, 0.7)
+            border.color: Qt.rgba(S.Theme.base03.r, S.Theme.base03.g, S.Theme.base03.b, 0.3)
+            border.width: 1
+            visible: _blDev !== ""
+
+            property string _blDev: ""
+            property int _percent: 0
+
+            Process {
+                running: true
+                command: ["sh", "-c", "ls /sys/class/backlight/ 2>/dev/null | head -1"]
+                stdout: StdioCollector {
+                    onStreamFinished: {
+                        const dev = text.trim();
+                        if (dev)
+                            _backlightCard._blDev = "/sys/class/backlight/" + dev;
+                    }
+                }
+            }
+
+            FileView {
+                id: _blCurrent
+                path: _backlightCard._blDev ? _backlightCard._blDev + "/brightness" : ""
+                watchChanges: true
+                onFileChanged: reload()
+                onLoaded: _backlightCard._updatePercent()
+            }
+            FileView {
+                id: _blMax
+                path: _backlightCard._blDev ? _backlightCard._blDev + "/max_brightness" : ""
+                onLoaded: _backlightCard._updatePercent()
+            }
+
+            function _updatePercent() {
+                const c = parseInt(_blCurrent.text());
+                const m = parseInt(_blMax.text());
+                if (m > 0)
+                    _percent = Math.round((c / m) * 100);
+            }
+
+            Process {
+                id: _blAdj
+                property string cmd: ""
+                command: ["sh", "-c", cmd]
+                onRunningChanged: if (!running && cmd !== "")
+                    _blCurrent.reload()
+            }
+
+            C.BacklightApplet {
+                id: _backlightContent
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.topMargin: 4
+                percent: _backlightCard._percent
+                accentColor: S.Theme.base0A
+                onSetPercent: pct => {
+                    _blAdj.cmd = "light -S " + Math.round(Math.max(0, Math.min(100, pct)));
+                    _blAdj.running = true;
+                }
+            }
+        }
     }
 }

shell/modules/BacklightModule.qml

@@ -3,6 +3,7 @@ import Quickshell
 import Quickshell.Io
 import "." as M
 import "../services" as S
+import "../applets" as C
 
 M.BarSection {
     id: root
@@ -113,75 +114,11 @@ M.BarSection {
         panelTitle: "Brightness"
         contentWidth: 200
 
-        Item {
+        C.BacklightApplet {
             width: parent.width
-            height: 36
+            percent: root.percent
-
+            accentColor: root.accentColor
-            Text {
+            onSetPercent: pct => root.setPercent(pct)
-                id: blIcon
-                anchors.left: parent.left
-                anchors.leftMargin: 12
-                anchors.verticalCenter: parent.verticalCenter
-                text: "\uF185"
-                color: root.accentColor
-                font.pixelSize: S.Theme.fontSize + 2
-                font.family: S.Theme.iconFontFamily
-            }
-
-            Item {
-                id: slider
-                anchors.left: blIcon.right
-                anchors.leftMargin: 8
-                anchors.right: blLabel.left
-                anchors.rightMargin: 8
-                anchors.verticalCenter: parent.verticalCenter
-                height: 6
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: S.Theme.base02
-                    radius: 3
-                }
-
-                Rectangle {
-                    width: parent.width * root.percent / 100
-                    height: parent.height
-                    color: root.accentColor
-                    radius: 3
-
-                    Behavior on width {
-                        NumberAnimation {
-                            duration: 80
-                        }
-                    }
-                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    anchors.margins: -6
-                    cursorShape: Qt.PointingHandCursor
-                    onPressed: mouse => _set(mouse)
-                    onPositionChanged: mouse => {
-                        if (pressed)
-                            _set(mouse);
-                    }
-                    function _set(mouse) {
-                        root.setPercent(mouse.x / slider.width * 100);
-                    }
-                }
-            }
-
-            Text {
-                id: blLabel
-                anchors.right: parent.right
-                anchors.rightMargin: 12
-                anchors.verticalCenter: parent.verticalCenter
-                text: root.percent + "%"
-                color: S.Theme.base05
-                font.pixelSize: S.Theme.fontSize
-                font.family: S.Theme.fontFamily
-                width: 30
-            }
         }
     }
 }