lockscreen: implement

Modules/ControlCenter/ControlCenterPopout.qml

@@ -19,6 +19,7 @@ PanelWindow {
     property bool powerOptionsExpanded: false
 
     signal powerActionRequested(string action, string title, string message)
+    signal lockRequested()
 
     visible: controlCenterVisible
     onVisibleChanged: {
@@ -231,13 +232,27 @@ PanelWindow {
 
                     }
 
-                    // Action Buttons - Power and Settings
+                    // Action Buttons - Lock, Power and Settings
                     Row {
                         anchors.right: parent.right
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.rightMargin: Theme.spacingL
                         spacing: Theme.spacingS
 
+                        // Lock Button
+                        DankActionButton {
+                            buttonSize: 40
+                            iconName: "lock"
+                            iconSize: Theme.iconSize - 2
+                            iconColor: Theme.surfaceText
+                            backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5)
+                            hoverColor: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+                            onClicked: {
+                                controlCenterVisible = false;
+                                root.lockRequested();
+                            }
+                        }
+
                         // Power Button
                         Rectangle {
                             width: 40

Modules/Lock/Lock.qml

@@ -0,0 +1,58 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import qs.Common
+
+Item {
+    id: root
+    
+    function activate() {
+        loader.activeAsync = true
+    }
+
+    LazyLoader {
+        id: loader
+
+        WlSessionLock {
+            id: lock
+
+            property bool unlocked: false
+
+            locked: true
+
+            onLockedChanged: {
+                if (!locked)
+                    loader.active = false
+            }
+
+            LockSurface {
+                lock: lock
+            }
+        }
+    }
+
+    LockScreenDemo {
+        id: demoWindow
+    }
+
+    IpcHandler {
+        target: "lock"
+
+        function lock(): void {
+            console.log("Lock screen requested via IPC")
+            loader.activeAsync = true
+        }
+
+        function demo(): void {
+            console.log("Lock screen DEMO mode requested via IPC")
+            demoWindow.showDemo()
+        }
+
+        function isLocked(): bool {
+            return loader.active
+        }
+    }
+}

Modules/Lock/LockScreenContent.qml

@@ -0,0 +1,947 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Services.Pam
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modals
+
+Item {
+    id: root
+    
+    property string passwordBuffer: ""
+    property bool demoMode: false
+    property bool unlocking: false
+    property var powerModal: null
+    property string confirmAction: ""
+    
+    property var facts: [
+        "Light takes 100,000 years to escape the Sun's core, then just 8 minutes to reach us.",
+        "A teaspoon of neutron star matter would weigh a billion tons here on Earth.",
+        "Right now, 100 trillion solar neutrinos are passing through your body every second.",
+        "The Sun burns 4 million tons of itself into pure energy every second.",
+        "The universe still glows with leftover heat from the Big Bang—just 2.7 degrees above absolute zero.",
+        "There's a nebula out there that's actually colder than empty space itself.",
+        "We've detected black holes crashing together by measuring spacetime stretch by less than 1/10,000th the width of a proton.",
+        "Some cosmic radio bursts release more energy in milliseconds than our Sun does in days.",
+        "Our galaxy might be crawling with billions of rogue planets drifting alone in the dark.",
+        "Distant galaxies can move away from us faster than light because space itself is stretching.",
+        "The edge of what we can see is 46.5 billion light-years away, even though the universe is only 13.8 billion years old.",
+        "The universe is mostly invisible: 5% regular matter, 27% dark matter, 68% dark energy.",
+        "A day on Venus lasts longer than its entire year around the Sun.",
+        "On Mercury, the time between sunrises is 176 Earth days long.",
+        "In about 4.5 billion years, our galaxy will smash into Andromeda.",
+        "Most of the gold in your jewelry was forged when neutron stars collided somewhere in space.",
+        "A black hole the mass of our Sun would take longer to evaporate than the current age of the universe... times a trillion trillion trillion trillion trillion.",
+        "The fastest spinning star we know rotates 716 times per second.",
+        "Cosmic rays create particles that shouldn't make it to Earth's surface, but time dilation lets them sneak through.",
+        "Jupiter's magnetic field is so huge that if we could see it, it would look bigger than the Moon in our sky."
+    ]
+    
+    property string randomFact: ""
+    
+    signal unlockRequested()
+    
+    Component.onCompleted: {
+        pickRandomFact()
+        WeatherService.addRef()
+        UserInfoService.refreshUserInfo()
+        if (!demoMode) {
+            debugUnlockTimer.start()
+        }
+    }
+    
+    function pickRandomFact() {
+        randomFact = facts[Math.floor(Math.random() * facts.length)]
+    }
+    
+    onDemoModeChanged: {
+        if (demoMode) {
+            pickRandomFact()
+        }
+    }
+    
+    Component.onDestruction: {
+        WeatherService.removeRef()
+    }
+
+    Timer {
+        id: debugUnlockTimer
+        interval: 30000
+        running: false
+        onTriggered: {
+            if (!demoMode) {
+                console.log("Debug timeout reached - auto unlocking")
+                root.unlockRequested()
+            }
+        }
+    }
+
+    Image {
+        id: wallpaperBackground
+        anchors.fill: parent
+        source: Prefs.wallpaperPath || ""
+        fillMode: Image.PreserveAspectCrop
+        smooth: true
+        asynchronous: true
+        cache: true
+        visible: source !== ""
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            autoPaddingEnabled: false
+            blurEnabled: true
+            blur: 0.8
+            blurMax: 32
+            blurMultiplier: 1.0
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.standardEasing
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: "black"
+        opacity: 0.4
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+
+        Item {
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: -100
+            width: 400
+            height: 140
+
+            Text {
+                id: clockText
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                text: Prefs.use24HourClock ? Qt.formatTime(new Date(), "H:mm") : Qt.formatTime(new Date(), "h:mm AP")
+                font.pixelSize: 120
+                font.weight: Font.Light
+                color: "white"
+                lineHeight: 0.8
+
+                Timer {
+                    interval: 1000
+                    running: true
+                    repeat: true
+                    onTriggered: parent.text = Prefs.use24HourClock ? Qt.formatTime(new Date(), "H:mm") : Qt.formatTime(new Date(), "h:mm AP")
+                }
+            }
+
+            Text {
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: clockText.bottom
+                anchors.topMargin: -20
+                text: Qt.formatDate(new Date(), "dddd, MMMM d")
+                font.pixelSize: Theme.fontSizeXLarge
+                color: "white"
+                opacity: 0.9
+            }
+        }
+
+        ColumnLayout {
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: 50
+            spacing: Theme.spacingM
+            width: 380
+
+            RowLayout {
+                spacing: Theme.spacingL
+                Layout.fillWidth: true
+
+                Item {
+                    id: avatarContainer
+                    Layout.preferredWidth: 60
+                    Layout.preferredHeight: 60
+                    property bool hasImage: profileImageLoader.status === Image.Ready
+
+                    Rectangle {
+                        anchors.fill: parent
+                        radius: width / 2
+                        color: "transparent"
+                        border.color: Theme.primary
+                        border.width: 1
+                        visible: parent.hasImage
+                    }
+
+                    Image {
+                        id: profileImageLoader
+                        source: {
+                            if (Prefs.profileImage === "")
+                                return ""
+                            if (Prefs.profileImage.startsWith("/"))
+                                return "file://" + Prefs.profileImage
+                            return Prefs.profileImage
+                        }
+                        smooth: true
+                        asynchronous: true
+                        mipmap: true
+                        cache: true
+                        visible: false
+                    }
+
+                    MultiEffect {
+                        anchors.fill: parent
+                        anchors.margins: 5
+                        source: profileImageLoader
+                        maskEnabled: true
+                        maskSource: circularMask
+                        visible: avatarContainer.hasImage
+                        maskThresholdMin: 0.5
+                        maskSpreadAtMin: 1
+                    }
+
+                    Item {
+                        id: circularMask
+                        width: 60 - 10
+                        height: 60 - 10
+                        layer.enabled: true
+                        layer.smooth: true
+                        visible: false
+
+                        Rectangle {
+                            anchors.fill: parent
+                            radius: width / 2
+                            color: "black"
+                            antialiasing: true
+                        }
+                    }
+
+                    Rectangle {
+                        anchors.fill: parent
+                        radius: width / 2
+                        color: Theme.primary
+                        visible: !parent.hasImage
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "person"
+                            size: Theme.iconSize + 4
+                            color: Theme.primaryText
+                        }
+                    }
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "warning"
+                        size: Theme.iconSize + 4
+                        color: Theme.primaryText
+                        visible: Prefs.profileImage !== "" && profileImageLoader.status === Image.Error
+                    }
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 60
+                    radius: Theme.cornerRadius
+                    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.9)
+                    border.color: passwordField.activeFocus ? Theme.primary : Qt.rgba(1, 1, 1, 0.3)
+                    border.width: passwordField.activeFocus ? 2 : 1
+                    
+                    property bool showPassword: false
+
+                Behavior on border.color {
+                    ColorAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+                }
+
+                DankIcon {
+                    id: lockIcon
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    name: "lock"
+                    size: 20
+                    color: passwordField.activeFocus ? Theme.primary : Theme.surfaceVariantText
+                }
+
+                TextInput {
+                    id: passwordField
+                    anchors.fill: parent
+                    anchors.leftMargin: lockIcon.width + Theme.spacingM * 2
+                    anchors.rightMargin: (revealButton.visible ? revealButton.width + Theme.spacingM : 0) + (enterButton.visible ? enterButton.width + Theme.spacingM : 0) + (loadingSpinner.visible ? loadingSpinner.width + Theme.spacingM : Theme.spacingM)
+                    opacity: 0
+                    focus: !demoMode
+                    enabled: !demoMode
+                    echoMode: parent.showPassword ? TextInput.Normal : TextInput.Password
+                    
+                    Timer {
+                        id: focusTimer
+                        interval: 100
+                        running: !demoMode
+                        onTriggered: passwordField.forceActiveFocus()
+                    }
+
+                    onTextChanged: {
+                        if (!demoMode) {
+                            root.passwordBuffer = text
+                        }
+                    }
+
+                    onAccepted: {
+                        if (!demoMode && root.passwordBuffer.length > 0 && !pam.active) {
+                            console.log("Enter pressed, starting PAM authentication")
+                            pam.start()
+                        }
+                    }
+
+                    Keys.onPressed: event => {
+                        if (demoMode) return
+                        
+                        if (pam.active) {
+                            console.log("PAM is active, ignoring input")
+                            event.accepted = true
+                            return
+                        }
+                    }
+                }
+
+                Text {
+                    id: placeholder
+                    anchors.left: lockIcon.right
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.right: (revealButton.visible ? revealButton.left : (enterButton.visible ? enterButton.left : (loadingSpinner.visible ? loadingSpinner.left : parent.right)))
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    property string pamState: ""
+
+                    text: {
+                        if (demoMode) return ""
+                        if (root.unlocking) return "Unlocking..."
+                        if (pam.active) return "Authenticating..."
+                        return "hunter2"
+                    }
+
+                    color: root.unlocking ? Theme.primary : (pam.active ? Theme.primary : Theme.outline)
+                    font.pixelSize: Theme.fontSizeMedium
+                    opacity: (demoMode || root.passwordBuffer.length === 0) ? 1 : 0
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.standardEasing
+                        }
+                    }
+                    
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
+                    }
+                }
+
+                Text {
+                    anchors.left: lockIcon.right
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.right: (revealButton.visible ? revealButton.left : (enterButton.visible ? enterButton.left : (loadingSpinner.visible ? loadingSpinner.left : parent.right)))
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    
+                    text: {
+                        if (demoMode) {
+                            return "••••••••"
+                        } else if (parent.showPassword) {
+                            return root.passwordBuffer
+                        } else {
+                            return "•".repeat(Math.min(root.passwordBuffer.length, 25))
+                        }
+                    }
+                    
+                    color: Theme.surfaceText
+                    font.pixelSize: parent.showPassword ? Theme.fontSizeMedium : Theme.fontSizeLarge
+                    opacity: (demoMode || root.passwordBuffer.length > 0) ? 1 : 0
+                    elide: Text.ElideRight
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.standardEasing
+                        }
+                    }
+                }
+
+                DankActionButton {
+                    id: revealButton
+                    anchors.right: enterButton.visible ? enterButton.left : (loadingSpinner.visible ? loadingSpinner.left : parent.right)
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    iconName: parent.showPassword ? "visibility_off" : "visibility"
+                    buttonSize: 32
+                    visible: !demoMode && root.passwordBuffer.length > 0 && !pam.active && !root.unlocking
+                    enabled: visible
+                    onClicked: parent.showPassword = !parent.showPassword
+                }
+
+                Rectangle {
+                    id: loadingSpinner
+                    anchors.right: enterButton.visible ? enterButton.left : parent.right
+                    anchors.rightMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 24
+                    height: 24
+                    radius: 12
+                    color: "transparent"
+                    visible: !demoMode && (pam.active || root.unlocking)
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "check_circle"
+                        size: 20
+                        color: Theme.primary
+                        visible: root.unlocking
+                        
+                        SequentialAnimation on scale {
+                            running: root.unlocking
+                            NumberAnimation { from: 0; to: 1.2; duration: 200; easing.type: Easing.OutBack }
+                            NumberAnimation { from: 1.2; to: 1; duration: 150; easing.type: Easing.InBack }
+                        }
+                    }
+
+                    Item {
+                        anchors.fill: parent
+                        visible: pam.active && !root.unlocking
+                        
+                        Rectangle {
+                            width: 20
+                            height: 20
+                            radius: 10
+                            anchors.centerIn: parent
+                            color: "transparent"
+                            border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+                            border.width: 2
+                        }
+
+                        Rectangle {
+                            width: 20
+                            height: 20
+                            radius: 10
+                            anchors.centerIn: parent
+                            color: "transparent"
+                            border.color: Theme.primary
+                            border.width: 2
+
+                            Rectangle {
+                                width: parent.width
+                                height: parent.height / 2
+                                anchors.top: parent.top
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.9)
+                            }
+
+                            RotationAnimation on rotation {
+                                running: pam.active && !root.unlocking
+                                loops: Animation.Infinite
+                                duration: 1000
+                                from: 0
+                                to: 360
+                            }
+                        }
+                    }
+                }
+
+                DankActionButton {
+                    id: enterButton
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    iconName: "keyboard_return"
+                    buttonSize: 36
+                    visible: (demoMode || (root.passwordBuffer.length > 0 && !pam.active && !root.unlocking))
+                    enabled: !demoMode
+                    onClicked: {
+                        if (!demoMode) {
+                            console.log("Enter button clicked, starting PAM authentication")
+                            pam.start()
+                        }
+                    }
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
+                    }
+                }
+            }
+            
+            }
+            
+            Text {
+                Layout.fillWidth: true
+                Layout.preferredHeight: placeholder.pamState ? 20 : 0
+                text: {
+                    if (placeholder.pamState === "error") return "Authentication error - try again"
+                    if (placeholder.pamState === "max") return "Too many attempts - locked out"  
+                    if (placeholder.pamState === "fail") return "Incorrect password - try again"
+                    return ""
+                }
+                color: Theme.error
+                font.pixelSize: Theme.fontSizeSmall
+                horizontalAlignment: Text.AlignHCenter
+                visible: placeholder.pamState !== ""
+                opacity: placeholder.pamState !== "" ? 1 : 0
+                
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+                }
+                
+                Behavior on Layout.preferredHeight {
+                    NumberAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+                }
+            }
+        }
+
+        Text {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.margins: Theme.spacingXL
+            text: "DEMO MODE - Click anywhere to exit"
+            font.pixelSize: Theme.fontSizeSmall
+            color: "white"
+            opacity: 0.7
+            visible: demoMode
+        }
+
+        Text {
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.margins: Theme.spacingXL
+            text: WeatherService.weather.available && WeatherService.weather.city && WeatherService.weather.city !== "Unknown" ? 
+                  `${WeatherService.weather.city} ${(Prefs.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp)}°${(Prefs.useFahrenheit ? "F" : "C")}` :
+                  ""
+            font.pixelSize: Theme.fontSizeMedium
+            color: "white"
+            horizontalAlignment: Text.AlignRight
+            visible: text !== ""
+        }
+
+        Text {
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right  
+            anchors.margins: Theme.spacingXL
+            text: BatteryService.batteryAvailable ? `Battery: ${BatteryService.batteryLevel}%` : ""
+            font.pixelSize: Theme.fontSizeMedium
+            color: "white"
+            visible: text !== ""
+        }
+
+        Row {
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.margins: Theme.spacingXL
+            spacing: Theme.spacingL
+
+            DankActionButton {
+                iconName: "power_settings_new"
+                iconColor: Theme.error
+                buttonSize: 40
+                onClicked: {
+                    if (demoMode) {
+                        console.log("Demo: Power")
+                    } else {
+                        powerDialog.open()
+                    }
+                }
+            }
+
+            DankActionButton {
+                iconName: "refresh"
+                buttonSize: 40
+                onClicked: {
+                    if (demoMode) {
+                        console.log("Demo: Reboot")
+                    } else {
+                        rebootDialog.open()
+                    }
+                }
+            }
+
+            DankActionButton {
+                iconName: "logout"
+                buttonSize: 40
+                onClicked: {
+                    if (demoMode) {
+                        console.log("Demo: Logout")
+                    } else {
+                        logoutDialog.open()
+                    }
+                }
+            }
+        }
+        
+        Text {
+            anchors.bottom: parent.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.margins: Theme.spacingL
+            width: Math.min(600, parent.width - Theme.spacingXL * 2)
+            text: randomFact
+            font.pixelSize: Theme.fontSizeSmall
+            color: "white"
+            opacity: 0.8
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+            visible: randomFact !== ""
+        }
+    }
+
+    PamContext {
+        id: pam
+
+        onResponseRequiredChanged: {
+            if (demoMode) return
+            console.log("PAM response required:", responseRequired)
+            if (!responseRequired) return
+            console.log("Responding to PAM with password buffer length:", root.passwordBuffer.length)
+            respond(root.passwordBuffer)
+        }
+
+        onCompleted: res => {
+            if (demoMode) return
+            console.log("PAM authentication completed with result:", res)
+            if (res === PamResult.Success) {
+                console.log("Authentication successful, unlocking")
+                root.unlocking = true
+                passwordField.text = ""
+                root.passwordBuffer = ""
+                root.unlockRequested()
+                return
+            }
+
+            console.log("Authentication failed:", res)
+            if (res === PamResult.Error)
+                placeholder.pamState = "error"
+            else if (res === PamResult.MaxTries)
+                placeholder.pamState = "max"
+            else if (res === PamResult.Failed)
+                placeholder.pamState = "fail"
+
+            placeholderDelay.restart()
+        }
+    }
+
+    Timer {
+        id: placeholderDelay
+        interval: 4000
+        onTriggered: placeholder.pamState = ""
+    }
+    
+    MouseArea {
+        anchors.fill: parent
+        enabled: demoMode
+        onClicked: root.unlockRequested()
+    }
+    
+    Rectangle {
+        id: powerDialog
+        anchors.fill: parent
+        color: Qt.rgba(0, 0, 0, 0.8)
+        visible: false
+        z: 1000
+        
+        function open() { visible = true }
+        function close() { visible = false }
+        
+        Rectangle {
+            anchors.centerIn: parent
+            width: 320
+            height: 180
+            radius: Theme.cornerRadiusLarge
+            color: Theme.surfaceContainer
+            border.color: Theme.outline
+            border.width: 1
+            
+            Column {
+                anchors.centerIn: parent
+                spacing: Theme.spacingXL
+                
+                DankIcon {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    name: "power_settings_new"
+                    size: 32
+                    color: Theme.error
+                }
+                
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Power off this computer?"
+                    color: Theme.surfaceText
+                    font.pixelSize: Theme.fontSizeLarge
+                    font.weight: Font.Medium
+                }
+                
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: Theme.spacingM
+                    
+                    Rectangle {
+                        width: 100
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: cancelMouse1.pressed ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.7) : 
+                               cancelMouse1.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.9) : Theme.surfaceVariant
+                        
+                        Text {
+                            anchors.centerIn: parent
+                            text: "Cancel"
+                            color: Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                        }
+                        
+                        MouseArea {
+                            id: cancelMouse1
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: powerDialog.close()
+                        }
+                    }
+                    
+                    Rectangle {
+                        width: 100
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: powerMouse.pressed ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.8) :
+                               powerMouse.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 1.0) : Theme.error
+                        
+                        Text {
+                            anchors.centerIn: parent
+                            text: "Power Off"
+                            color: "white"
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                        }
+                        
+                        MouseArea {
+                            id: powerMouse
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                powerDialog.close()
+                                Quickshell.execDetached(["systemctl", "poweroff"])
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: rebootDialog
+        anchors.fill: parent
+        color: Qt.rgba(0, 0, 0, 0.8)
+        visible: false
+        z: 1000
+        
+        function open() { visible = true }
+        function close() { visible = false }
+        
+        Rectangle {
+            anchors.centerIn: parent
+            width: 320
+            height: 180
+            radius: Theme.cornerRadiusLarge
+            color: Theme.surfaceContainer
+            border.color: Theme.outline
+            border.width: 1
+            
+            Column {
+                anchors.centerIn: parent
+                spacing: Theme.spacingXL
+                
+                DankIcon {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    name: "refresh"
+                    size: 32
+                    color: Theme.primary
+                }
+                
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Restart this computer?"
+                    color: Theme.surfaceText
+                    font.pixelSize: Theme.fontSizeLarge
+                    font.weight: Font.Medium
+                }
+                
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: Theme.spacingM
+                    
+                    Rectangle {
+                        width: 100
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: cancelMouse2.pressed ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.7) : 
+                               cancelMouse2.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.9) : Theme.surfaceVariant
+                        
+                        Text {
+                            anchors.centerIn: parent
+                            text: "Cancel"
+                            color: Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                        }
+                        
+                        MouseArea {
+                            id: cancelMouse2
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: rebootDialog.close()
+                        }
+                    }
+                    
+                    Rectangle {
+                        width: 100
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: rebootMouse.pressed ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.8) :
+                               rebootMouse.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 1.0) : Theme.primary
+                        
+                        Text {
+                            anchors.centerIn: parent
+                            text: "Restart"
+                            color: "white"
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                        }
+                        
+                        MouseArea {
+                            id: rebootMouse
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                rebootDialog.close()
+                                Quickshell.execDetached(["systemctl", "reboot"])
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: logoutDialog
+        anchors.fill: parent
+        color: Qt.rgba(0, 0, 0, 0.8)
+        visible: false
+        z: 1000
+        
+        function open() { visible = true }
+        function close() { visible = false }
+        
+        Rectangle {
+            anchors.centerIn: parent
+            width: 320
+            height: 180
+            radius: Theme.cornerRadiusLarge
+            color: Theme.surfaceContainer
+            border.color: Theme.outline
+            border.width: 1
+            
+            Column {
+                anchors.centerIn: parent
+                spacing: Theme.spacingXL
+                
+                DankIcon {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    name: "logout"
+                    size: 32
+                    color: Theme.primary
+                }
+                
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "End this session?"
+                    color: Theme.surfaceText
+                    font.pixelSize: Theme.fontSizeLarge
+                    font.weight: Font.Medium
+                }
+                
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: Theme.spacingM
+                    
+                    Rectangle {
+                        width: 100
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: cancelMouse3.pressed ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.7) : 
+                               cancelMouse3.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.9) : Theme.surfaceVariant
+                        
+                        Text {
+                            anchors.centerIn: parent
+                            text: "Cancel"
+                            color: Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                        }
+                        
+                        MouseArea {
+                            id: cancelMouse3
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: logoutDialog.close()
+                        }
+                    }
+                    
+                    Rectangle {
+                        width: 100
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: logoutMouse.pressed ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.8) :
+                               logoutMouse.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 1.0) : Theme.primary
+                        
+                        Text {
+                            anchors.centerIn: parent
+                            text: "Log Out"
+                            color: "white"
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                        }
+                        
+                        MouseArea {
+                            id: logoutMouse
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                logoutDialog.close()
+                                Quickshell.execDetached(["niri", "msg", "action", "quit", "-s"])
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+}

Modules/Lock/LockScreenDemo.qml

@@ -0,0 +1,52 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Modals
+
+PanelWindow {
+    id: root
+    
+    property bool demoActive: false
+    
+    visible: demoActive
+    
+    anchors {
+        top: true
+        bottom: true
+        left: true
+        right: true
+    }
+    
+    WlrLayershell.layer: WlrLayershell.Overlay
+    WlrLayershell.exclusiveZone: -1
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+    
+    color: "transparent"
+    
+    function showDemo(): void {
+        console.log("Showing lock screen demo")
+        demoActive = true
+    }
+    
+    function hideDemo(): void {
+        console.log("Hiding lock screen demo")
+        demoActive = false
+    }
+    
+    PowerConfirmModal {
+        id: powerModal
+    }
+
+    Loader {
+        anchors.fill: parent
+        active: demoActive
+        sourceComponent: LockScreenContent {
+            demoMode: true
+            powerModal: powerModal
+            onUnlockRequested: root.hideDemo()
+        }
+    }
+}

Modules/Lock/LockSurface.qml

@@ -0,0 +1,47 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Modals
+
+WlSessionLockSurface {
+    id: root
+
+    required property WlSessionLock lock
+
+    property bool thisLocked: false
+    readonly property bool locked: thisLocked && !lock.unlocked
+
+    function unlock(): void {
+        console.log("LockSurface.unlock() called")
+        lock.unlocked = true
+        animDelay.start()
+    }
+
+    Component.onCompleted: {
+        thisLocked = true
+    }
+
+    color: "transparent"
+
+    Timer {
+        id: animDelay
+        interval: 1500 // Longer delay for success feedback
+        onTriggered: root.lock.locked = false
+    }
+
+    PowerConfirmModal {
+        id: powerModal
+    }
+
+    Loader {
+        anchors.fill: parent
+        sourceComponent: LockScreenContent {
+            demoMode: false
+            powerModal: powerModal
+            onUnlockRequested: root.unlock()
+        }
+    }
+}

README.md

@@ -73,6 +73,10 @@ qs -c DankMaterialShell ipc call <target> <function>
 | processlist | toggle | Toggle process list (task manager) |
 | wallpaper | set \<path\> | Set wallpaper to image path and refresh theme (if auto theme enabled) |
 | wallpaper | get | Get current wallpaper path |
+| lock | lock | Triggers lockscreen |
+| lock | demo | Triggers lockscreen demo mode |
+| lock | isLocked | Whether we're locked or not |
+
 
 ## (Optional) Setup Calendar events (Google, Microsoft, other Caldev, etc.)
 

Services/UserInfoService.qml

@@ -26,7 +26,6 @@ Singleton {
     function refreshUserInfo() {
         getUserInfo();
         getUptime();
-        getProfilePicture();
     }
 
     Component.onCompleted: {

Widgets/StateLayer.qml

@@ -13,23 +13,6 @@ MouseArea {
     cursorShape: disabled ? undefined : Qt.PointingHandCursor
     hoverEnabled: true
 
-    onPressed: event => {
-        if (disabled) return;
-
-        rippleAnimation.x = event.x;
-        rippleAnimation.y = event.y;
-
-        const dist = (ox, oy) => ox * ox + oy * oy;
-        rippleAnimation.radius = Math.sqrt(Math.max(
-            dist(event.x, event.y),
-            dist(event.x, height - event.y),
-            dist(width - event.x, event.y),
-            dist(width - event.x, height - event.y)
-        ));
-
-        rippleAnimation.restart();
-    }
-
     Rectangle {
         id: hoverLayer
         anchors.fill: parent
@@ -39,60 +22,5 @@ MouseArea {
                       root.pressed ? 0.12 : 
                       root.containsMouse ? 0.08 : 0)
 
-        Rectangle {
-            id: ripple
-            radius: width / 2
-            color: root.stateColor
-            opacity: 0
-
-            transform: Translate {
-                x: -ripple.width / 2
-                y: -ripple.height / 2
-            }
-        }
-
-        // Clip ripple to container bounds
-        clip: true
-    }
-
-    SequentialAnimation {
-        id: rippleAnimation
-
-        property real x
-        property real y
-        property real radius
-
-        PropertyAction {
-            target: ripple
-            property: "x"
-            value: rippleAnimation.x
-        }
-        PropertyAction {
-            target: ripple
-            property: "y"
-            value: rippleAnimation.y
-        }
-        PropertyAction {
-            target: ripple
-            property: "opacity"
-            value: 0.12
-        }
-        NumberAnimation {
-            target: ripple
-            properties: "width,height"
-            from: 0
-            to: rippleAnimation.radius * 2
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standardDecel
-        }
-        NumberAnimation {
-            target: ripple
-            property: "opacity"
-            to: 0
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standard
-        }
     }
 }

shell.qml

@@ -10,6 +10,7 @@ import qs.Modules.ControlCenter
 import qs.Modules.Settings
 import qs.Modules.ProcessList
 import qs.Modules.ControlCenter.Network
+import qs.Modules.Lock
 import qs.Modals
 import qs.Services
 
@@ -18,6 +19,11 @@ ShellRoot {
 
     WallpaperBackground {}
     
+    Lock {
+        id: lock
+        anchors.fill: parent
+    }
+    
     // Multi-monitor support using Variants
     Variants {
         model: Quickshell.screens
@@ -52,6 +58,9 @@ ShellRoot {
             powerConfirmModal.powerConfirmMessage = message;
             powerConfirmModal.powerConfirmVisible = true;
         }
+        onLockRequested: {
+            lock.activate();
+        }
     }
 
     WifiPasswordModal {