quickshell and hyprland additions

.config/quickshell/caelestia/modules/lock/Center.qml

@@ -0,0 +1,416 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.controls
+import qs.components.images
+import qs.services
+import qs.config
+import qs.utils
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property var lock
+    readonly property real centerScale: Math.min(1, (lock.screen?.height ?? 1440) / 1440)
+    readonly property int centerWidth: Config.lock.sizes.centerWidth * centerScale
+
+    Layout.preferredWidth: centerWidth
+    Layout.fillWidth: false
+    Layout.fillHeight: true
+
+    spacing: Appearance.spacing.large * 2
+
+    RowLayout {
+        Layout.alignment: Qt.AlignHCenter
+        spacing: Appearance.spacing.small
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            text: Time.hourStr
+            color: Colours.palette.m3secondary
+            font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+            font.family: Appearance.font.family.clock
+            font.bold: true
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            text: ":"
+            color: Colours.palette.m3primary
+            font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+            font.family: Appearance.font.family.clock
+            font.bold: true
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            text: Time.minuteStr
+            color: Colours.palette.m3secondary
+            font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+            font.family: Appearance.font.family.clock
+            font.bold: true
+        }
+
+        Loader {
+            Layout.leftMargin: Appearance.spacing.small
+            Layout.alignment: Qt.AlignVCenter
+
+            active: Config.services.useTwelveHourClock
+            visible: active
+
+            sourceComponent: StyledText {
+                text: Time.amPmStr
+                color: Colours.palette.m3primary
+                font.pointSize: Math.floor(Appearance.font.size.extraLarge * 2 * root.centerScale)
+                font.family: Appearance.font.family.clock
+                font.bold: true
+            }
+        }
+    }
+
+    StyledText {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.topMargin: -Appearance.padding.large * 2
+
+        text: Time.format("dddd, d MMMM yyyy")
+        color: Colours.palette.m3tertiary
+        font.pointSize: Math.floor(Appearance.font.size.extraLarge * root.centerScale)
+        font.family: Appearance.font.family.mono
+        font.bold: true
+    }
+
+    StyledClippingRect {
+        Layout.topMargin: Appearance.spacing.large * 2
+        Layout.alignment: Qt.AlignHCenter
+
+        implicitWidth: root.centerWidth / 2
+        implicitHeight: root.centerWidth / 2
+
+        color: Colours.tPalette.m3surfaceContainer
+        radius: Appearance.rounding.full
+
+        MaterialIcon {
+            anchors.centerIn: parent
+
+            text: "person"
+            color: Colours.palette.m3onSurfaceVariant
+            font.pointSize: Math.floor(root.centerWidth / 4)
+        }
+
+        CachingImage {
+            id: pfp
+
+            anchors.fill: parent
+            path: `${Paths.home}/.face`
+        }
+    }
+
+    StyledRect {
+        Layout.alignment: Qt.AlignHCenter
+
+        implicitWidth: root.centerWidth * 0.8
+        implicitHeight: input.implicitHeight + Appearance.padding.small * 2
+
+        color: Colours.tPalette.m3surfaceContainer
+        radius: Appearance.rounding.full
+
+        focus: true
+        onActiveFocusChanged: {
+            if (!activeFocus)
+                forceActiveFocus();
+        }
+
+        Keys.onPressed: event => {
+            if (root.lock.unlocking)
+                return;
+
+            if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
+                inputField.placeholder.animate = false;
+
+            root.lock.pam.handleKey(event);
+        }
+
+        StateLayer {
+            hoverEnabled: false
+            cursorShape: Qt.IBeamCursor
+
+            function onClicked(): void {
+                parent.forceActiveFocus();
+            }
+        }
+
+        RowLayout {
+            id: input
+
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.small
+            spacing: Appearance.spacing.normal
+
+            Item {
+                implicitWidth: implicitHeight
+                implicitHeight: fprintIcon.implicitHeight + Appearance.padding.small * 2
+
+                MaterialIcon {
+                    id: fprintIcon
+
+                    anchors.centerIn: parent
+                    animate: true
+                    text: {
+                        if (root.lock.pam.fprint.tries >= Config.lock.maxFprintTries)
+                            return "fingerprint_off";
+                        if (root.lock.pam.fprint.active)
+                            return "fingerprint";
+                        return "lock";
+                    }
+                    color: root.lock.pam.fprint.tries >= Config.lock.maxFprintTries ? Colours.palette.m3error : Colours.palette.m3onSurface
+                    opacity: root.lock.pam.passwd.active ? 0 : 1
+
+                    Behavior on opacity {
+                        Anim {}
+                    }
+                }
+
+                CircularIndicator {
+                    anchors.fill: parent
+                    running: root.lock.pam.passwd.active
+                }
+            }
+
+            InputField {
+                id: inputField
+
+                pam: root.lock.pam
+            }
+
+            StyledRect {
+                implicitWidth: implicitHeight
+                implicitHeight: enterIcon.implicitHeight + Appearance.padding.small * 2
+
+                color: root.lock.pam.buffer ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
+                radius: Appearance.rounding.full
+
+                StateLayer {
+                    color: root.lock.pam.buffer ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+
+                    function onClicked(): void {
+                        root.lock.pam.passwd.start();
+                    }
+                }
+
+                MaterialIcon {
+                    id: enterIcon
+
+                    anchors.centerIn: parent
+                    text: "arrow_forward"
+                    color: root.lock.pam.buffer ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                    font.weight: 500
+                }
+            }
+        }
+    }
+
+    Item {
+        Layout.fillWidth: true
+        Layout.topMargin: -Appearance.spacing.large
+
+        implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight)
+
+        Behavior on implicitHeight {
+            Anim {}
+        }
+
+        StyledText {
+            id: stateMessage
+
+            readonly property string msg: {
+                if (Hypr.kbLayout !== Hypr.defaultKbLayout) {
+                    if (Hypr.capsLock && Hypr.numLock)
+                        return qsTr("Caps lock and Num lock are ON.\nKeyboard layout: %1").arg(Hypr.kbLayoutFull);
+                    if (Hypr.capsLock)
+                        return qsTr("Caps lock is ON. Kb layout: %1").arg(Hypr.kbLayoutFull);
+                    if (Hypr.numLock)
+                        return qsTr("Num lock is ON. Kb layout: %1").arg(Hypr.kbLayoutFull);
+                    return qsTr("Keyboard layout: %1").arg(Hypr.kbLayoutFull);
+                }
+
+                if (Hypr.capsLock && Hypr.numLock)
+                    return qsTr("Caps lock and Num lock are ON.");
+                if (Hypr.capsLock)
+                    return qsTr("Caps lock is ON.");
+                if (Hypr.numLock)
+                    return qsTr("Num lock is ON.");
+
+                return "";
+            }
+
+            property bool shouldBeVisible
+
+            onMsgChanged: {
+                if (msg) {
+                    if (opacity > 0) {
+                        animate = true;
+                        text = msg;
+                        animate = false;
+                    } else {
+                        text = msg;
+                    }
+                    shouldBeVisible = true;
+                } else {
+                    shouldBeVisible = false;
+                }
+            }
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            scale: shouldBeVisible && !message.msg ? 1 : 0.7
+            opacity: shouldBeVisible && !message.msg ? 1 : 0
+            color: Colours.palette.m3onSurfaceVariant
+            animateProp: "opacity"
+
+            font.family: Appearance.font.family.mono
+            horizontalAlignment: Qt.AlignHCenter
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            lineHeight: 1.2
+
+            Behavior on scale {
+                Anim {}
+            }
+
+            Behavior on opacity {
+                Anim {}
+            }
+        }
+
+        StyledText {
+            id: message
+
+            readonly property Pam pam: root.lock.pam
+            readonly property string msg: {
+                if (pam.fprintState === "error")
+                    return qsTr("FP ERROR: %1").arg(pam.fprint.message);
+                if (pam.state === "error")
+                    return qsTr("PW ERROR: %1").arg(pam.passwd.message);
+
+                if (pam.lockMessage)
+                    return pam.lockMessage;
+
+                if (pam.state === "max" && pam.fprintState === "max")
+                    return qsTr("Maximum password and fingerprint attempts reached.");
+                if (pam.state === "max") {
+                    if (pam.fprint.available)
+                        return qsTr("Maximum password attempts reached. Please use fingerprint.");
+                    return qsTr("Maximum password attempts reached.");
+                }
+                if (pam.fprintState === "max")
+                    return qsTr("Maximum fingerprint attempts reached. Please use password.");
+
+                if (pam.state === "fail") {
+                    if (pam.fprint.available)
+                        return qsTr("Incorrect password. Please try again or use fingerprint.");
+                    return qsTr("Incorrect password. Please try again.");
+                }
+                if (pam.fprintState === "fail")
+                    return qsTr("Fingerprint not recognized (%1/%2). Please try again or use password.").arg(pam.fprint.tries).arg(Config.lock.maxFprintTries);
+
+                return "";
+            }
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            scale: 0.7
+            opacity: 0
+            color: Colours.palette.m3error
+
+            font.pointSize: Appearance.font.size.small
+            font.family: Appearance.font.family.mono
+            horizontalAlignment: Qt.AlignHCenter
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+            onMsgChanged: {
+                if (msg) {
+                    if (opacity > 0) {
+                        animate = true;
+                        text = msg;
+                        animate = false;
+
+                        exitAnim.stop();
+                        if (scale < 1)
+                            appearAnim.restart();
+                        else
+                            flashAnim.restart();
+                    } else {
+                        text = msg;
+                        exitAnim.stop();
+                        appearAnim.restart();
+                    }
+                } else {
+                    appearAnim.stop();
+                    flashAnim.stop();
+                    exitAnim.start();
+                }
+            }
+
+            Connections {
+                target: root.lock.pam
+
+                function onFlashMsg(): void {
+                    exitAnim.stop();
+                    if (message.scale < 1)
+                        appearAnim.restart();
+                    else
+                        flashAnim.restart();
+                }
+            }
+
+            Anim {
+                id: appearAnim
+
+                target: message
+                properties: "scale,opacity"
+                to: 1
+                onFinished: flashAnim.restart()
+            }
+
+            SequentialAnimation {
+                id: flashAnim
+
+                loops: 2
+
+                FlashAnim {
+                    to: 0.3
+                }
+                FlashAnim {
+                    to: 1
+                }
+            }
+
+            ParallelAnimation {
+                id: exitAnim
+
+                Anim {
+                    target: message
+                    property: "scale"
+                    to: 0.7
+                    duration: Appearance.anim.durations.large
+                }
+                Anim {
+                    target: message
+                    property: "opacity"
+                    to: 0
+                    duration: Appearance.anim.durations.large
+                }
+            }
+        }
+    }
+
+    component FlashAnim: NumberAnimation {
+        target: message
+        property: "opacity"
+        duration: Appearance.anim.durations.small
+        easing.type: Easing.Linear
+    }
+}

.config/quickshell/caelestia/modules/lock/Content.qml

@@ -0,0 +1,93 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+
+    required property var lock
+
+    spacing: Appearance.spacing.large * 2
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.normal
+
+        StyledRect {
+            Layout.fillWidth: true
+            implicitHeight: weather.implicitHeight
+
+            topLeftRadius: Appearance.rounding.large
+            radius: Appearance.rounding.small
+            color: Colours.tPalette.m3surfaceContainer
+
+            WeatherInfo {
+                id: weather
+
+                rootHeight: root.height
+            }
+        }
+
+        StyledRect {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            radius: Appearance.rounding.small
+            color: Colours.tPalette.m3surfaceContainer
+
+            Fetch {}
+        }
+
+        StyledClippingRect {
+            Layout.fillWidth: true
+            implicitHeight: media.implicitHeight
+
+            bottomLeftRadius: Appearance.rounding.large
+            radius: Appearance.rounding.small
+            color: Colours.tPalette.m3surfaceContainer
+
+            Media {
+                id: media
+
+                lock: root.lock
+            }
+        }
+    }
+
+    Center {
+        lock: root.lock
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.normal
+
+        StyledRect {
+            Layout.fillWidth: true
+            implicitHeight: resources.implicitHeight
+
+            topRightRadius: Appearance.rounding.large
+            radius: Appearance.rounding.small
+            color: Colours.tPalette.m3surfaceContainer
+
+            Resources {
+                id: resources
+            }
+        }
+
+        StyledRect {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            bottomRightRadius: Appearance.rounding.large
+            radius: Appearance.rounding.small
+            color: Colours.tPalette.m3surfaceContainer
+
+            NotifDock {
+                lock: root.lock
+            }
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/Fetch.qml

@@ -0,0 +1,178 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import qs.utils
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    anchors.fill: parent
+    anchors.margins: Appearance.padding.large * 2
+    anchors.topMargin: Appearance.padding.large
+
+    spacing: Appearance.spacing.small
+
+    RowLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: false
+        spacing: Appearance.spacing.normal
+
+        StyledRect {
+            implicitWidth: prompt.implicitWidth + Appearance.padding.normal * 2
+            implicitHeight: prompt.implicitHeight + Appearance.padding.normal * 2
+
+            color: Colours.palette.m3primary
+            radius: Appearance.rounding.small
+
+            MonoText {
+                id: prompt
+
+                anchors.centerIn: parent
+                text: ">"
+                font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
+                color: Colours.palette.m3onPrimary
+            }
+        }
+
+        MonoText {
+            Layout.fillWidth: true
+            text: "caelestiafetch.sh"
+            font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
+            elide: Text.ElideRight
+        }
+
+        WrappedLoader {
+            Layout.fillHeight: true
+            active: !iconLoader.active
+
+            sourceComponent: SysInfo.isDefaultLogo ? caelestiaLogo : distroIcon
+        }
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: false
+        spacing: height * 0.15
+
+        WrappedLoader {
+            id: iconLoader
+
+            Layout.fillHeight: true
+            active: root.width > 320
+
+            sourceComponent: SysInfo.isDefaultLogo ? caelestiaLogo : distroIcon
+        }
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.topMargin: Appearance.padding.normal
+            Layout.bottomMargin: Appearance.padding.normal
+            Layout.leftMargin: iconLoader.active ? 0 : width * 0.1
+            spacing: Appearance.spacing.normal
+
+            WrappedLoader {
+                Layout.fillWidth: true
+                active: !batLoader.active && root.height > 200
+
+                sourceComponent: FetchText {
+                    text: `OS  : ${SysInfo.osPrettyName || SysInfo.osName}`
+                }
+            }
+
+            WrappedLoader {
+                Layout.fillWidth: true
+                active: root.height > (batLoader.active ? 200 : 110)
+
+                sourceComponent: FetchText {
+                    text: `WM  : ${SysInfo.wm}`
+                }
+            }
+
+            WrappedLoader {
+                Layout.fillWidth: true
+                active: !batLoader.active || root.height > 110
+
+                sourceComponent: FetchText {
+                    text: `USER: ${SysInfo.user}`
+                }
+            }
+
+            FetchText {
+                text: `UP  : ${SysInfo.uptime}`
+            }
+
+            WrappedLoader {
+                id: batLoader
+
+                Layout.fillWidth: true
+                active: UPower.displayDevice.isLaptopBattery
+
+                sourceComponent: FetchText {
+                    text: `BATT: ${[UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state) ? "(+) " : ""}${Math.round(UPower.displayDevice.percentage * 100)}%`
+                }
+            }
+        }
+    }
+
+    WrappedLoader {
+        Layout.alignment: Qt.AlignHCenter
+        active: root.height > 180
+
+        sourceComponent: RowLayout {
+            spacing: Appearance.spacing.large
+
+            Repeater {
+                model: Math.max(0, Math.min(8, root.width / (Appearance.font.size.larger * 2 + Appearance.spacing.large)))
+
+                StyledRect {
+                    required property int index
+
+                    implicitWidth: implicitHeight
+                    implicitHeight: Appearance.font.size.larger * 2
+                    color: Colours.palette[`term${index}`]
+                    radius: Appearance.rounding.small
+                }
+            }
+        }
+    }
+
+    Component {
+        id: caelestiaLogo
+
+        Logo {
+            width: height
+            height: height
+        }
+    }
+
+    Component {
+        id: distroIcon
+
+        ColouredIcon {
+            source: SysInfo.osLogo
+            implicitSize: height
+            colour: Colours.palette.m3primary
+            layer.enabled: Config.lock.recolourLogo
+        }
+    }
+
+    component WrappedLoader: Loader {
+        visible: active
+    }
+
+    component FetchText: MonoText {
+        Layout.fillWidth: true
+        font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
+        elide: Text.ElideRight
+    }
+
+    component MonoText: StyledText {
+        font.family: Appearance.font.family.mono
+    }
+}

.config/quickshell/caelestia/modules/lock/InputField.qml

@@ -0,0 +1,149 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.services
+import qs.config
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property Pam pam
+    readonly property alias placeholder: placeholder
+    property string buffer
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+
+    clip: true
+
+    Connections {
+        target: root.pam
+
+        function onBufferChanged(): void {
+            if (root.pam.buffer.length > root.buffer.length) {
+                charList.bindImWidth();
+            } else if (root.pam.buffer.length === 0) {
+                charList.implicitWidth = charList.implicitWidth;
+                placeholder.animate = true;
+            }
+
+            root.buffer = root.pam.buffer;
+        }
+    }
+
+    StyledText {
+        id: placeholder
+
+        anchors.centerIn: parent
+
+        text: {
+            if (root.pam.passwd.active)
+                return qsTr("Loading...");
+            if (root.pam.state === "max")
+                return qsTr("You have reached the maximum number of tries");
+            return qsTr("Enter your password");
+        }
+
+        animate: true
+        color: root.pam.passwd.active ? Colours.palette.m3secondary : Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.normal
+        font.family: Appearance.font.family.mono
+
+        opacity: root.buffer ? 0 : 1
+
+        Behavior on opacity {
+            Anim {}
+        }
+    }
+
+    ListView {
+        id: charList
+
+        readonly property int fullWidth: count * (implicitHeight + spacing) - spacing
+
+        function bindImWidth(): void {
+            imWidthBehavior.enabled = false;
+            implicitWidth = Qt.binding(() => fullWidth);
+            imWidthBehavior.enabled = true;
+        }
+
+        anchors.centerIn: parent
+        anchors.horizontalCenterOffset: implicitWidth > root.width ? -(implicitWidth - root.width) / 2 : 0
+
+        implicitWidth: fullWidth
+        implicitHeight: Appearance.font.size.normal
+
+        orientation: Qt.Horizontal
+        spacing: Appearance.spacing.small / 2
+        interactive: false
+
+        model: ScriptModel {
+            values: root.buffer.split("")
+        }
+
+        delegate: StyledRect {
+            id: ch
+
+            implicitWidth: implicitHeight
+            implicitHeight: charList.implicitHeight
+
+            color: Colours.palette.m3onSurface
+            radius: Appearance.rounding.small / 2
+
+            opacity: 0
+            scale: 0
+            Component.onCompleted: {
+                opacity = 1;
+                scale = 1;
+            }
+            ListView.onRemove: removeAnim.start()
+
+            SequentialAnimation {
+                id: removeAnim
+
+                PropertyAction {
+                    target: ch
+                    property: "ListView.delayRemove"
+                    value: true
+                }
+                ParallelAnimation {
+                    Anim {
+                        target: ch
+                        property: "opacity"
+                        to: 0
+                    }
+                    Anim {
+                        target: ch
+                        property: "scale"
+                        to: 0.5
+                    }
+                }
+                PropertyAction {
+                    target: ch
+                    property: "ListView.delayRemove"
+                    value: false
+                }
+            }
+
+            Behavior on opacity {
+                Anim {}
+            }
+
+            Behavior on scale {
+                Anim {
+                    duration: Appearance.anim.durations.expressiveFastSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                }
+            }
+        }
+
+        Behavior on implicitWidth {
+            id: imWidthBehavior
+
+            Anim {}
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/Lock.qml

@@ -0,0 +1,55 @@
+pragma ComponentBehavior: Bound
+
+import qs.components.misc
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+
+Scope {
+    property alias lock: lock
+
+    WlSessionLock {
+        id: lock
+
+        signal unlock
+
+        LockSurface {
+            lock: lock
+            pam: pam
+        }
+    }
+
+    Pam {
+        id: pam
+
+        lock: lock
+    }
+
+    CustomShortcut {
+        name: "lock"
+        description: "Lock the current session"
+        onPressed: lock.locked = true
+    }
+
+    CustomShortcut {
+        name: "unlock"
+        description: "Unlock the current session"
+        onPressed: lock.unlock()
+    }
+
+    IpcHandler {
+        target: "lock"
+
+        function lock(): void {
+            lock.locked = true;
+        }
+
+        function unlock(): void {
+            lock.unlock();
+        }
+
+        function isLocked(): bool {
+            return lock.locked;
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/LockSurface.qml

@@ -0,0 +1,230 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.services
+import qs.config
+import Quickshell.Wayland
+import QtQuick
+import QtQuick.Effects
+
+WlSessionLockSurface {
+    id: root
+
+    required property WlSessionLock lock
+    required property Pam pam
+
+    readonly property alias unlocking: unlockAnim.running
+
+    color: "transparent"
+
+    Connections {
+        target: root.lock
+
+        function onUnlock(): void {
+            unlockAnim.start();
+        }
+    }
+
+    SequentialAnimation {
+        id: unlockAnim
+
+        ParallelAnimation {
+            Anim {
+                target: lockContent
+                properties: "implicitWidth,implicitHeight"
+                to: lockContent.size
+                duration: Appearance.anim.durations.expressiveDefaultSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+            }
+            Anim {
+                target: lockBg
+                property: "radius"
+                to: lockContent.radius
+            }
+            Anim {
+                target: content
+                property: "scale"
+                to: 0
+                duration: Appearance.anim.durations.expressiveDefaultSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+            }
+            Anim {
+                target: content
+                property: "opacity"
+                to: 0
+                duration: Appearance.anim.durations.small
+            }
+            Anim {
+                target: lockIcon
+                property: "opacity"
+                to: 1
+                duration: Appearance.anim.durations.large
+            }
+            Anim {
+                target: background
+                property: "opacity"
+                to: 0
+                duration: Appearance.anim.durations.large
+            }
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: Appearance.anim.durations.small
+                }
+                Anim {
+                    target: lockContent
+                    property: "opacity"
+                    to: 0
+                }
+            }
+        }
+        PropertyAction {
+            target: root.lock
+            property: "locked"
+            value: false
+        }
+    }
+
+    ParallelAnimation {
+        id: initAnim
+
+        running: true
+
+        Anim {
+            target: background
+            property: "opacity"
+            to: 1
+            duration: Appearance.anim.durations.large
+        }
+        SequentialAnimation {
+            ParallelAnimation {
+                Anim {
+                    target: lockContent
+                    property: "scale"
+                    to: 1
+                    duration: Appearance.anim.durations.expressiveFastSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                }
+                Anim {
+                    target: lockContent
+                    property: "rotation"
+                    to: 360
+                    duration: Appearance.anim.durations.expressiveFastSpatial
+                    easing.bezierCurve: Appearance.anim.curves.standardAccel
+                }
+            }
+            ParallelAnimation {
+                Anim {
+                    target: lockIcon
+                    property: "rotation"
+                    to: 360
+                    easing.bezierCurve: Appearance.anim.curves.standardDecel
+                }
+                Anim {
+                    target: lockIcon
+                    property: "opacity"
+                    to: 0
+                }
+                Anim {
+                    target: content
+                    property: "opacity"
+                    to: 1
+                }
+                Anim {
+                    target: content
+                    property: "scale"
+                    to: 1
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+                Anim {
+                    target: lockBg
+                    property: "radius"
+                    to: Appearance.rounding.large * 1.5
+                }
+                Anim {
+                    target: lockContent
+                    property: "implicitWidth"
+                    to: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+                Anim {
+                    target: lockContent
+                    property: "implicitHeight"
+                    to: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+            }
+        }
+    }
+
+    ScreencopyView {
+        id: background
+
+        anchors.fill: parent
+        captureSource: root.screen
+        opacity: 0
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            autoPaddingEnabled: false
+            blurEnabled: true
+            blur: 1
+            blurMax: 64
+            blurMultiplier: 1
+        }
+    }
+
+    Item {
+        id: lockContent
+
+        readonly property int size: lockIcon.implicitHeight + Appearance.padding.large * 4
+        readonly property int radius: size / 4 * Appearance.rounding.scale
+
+        anchors.centerIn: parent
+        implicitWidth: size
+        implicitHeight: size
+
+        rotation: 180
+        scale: 0
+
+        StyledRect {
+            id: lockBg
+
+            anchors.fill: parent
+            color: Colours.palette.m3surface
+            radius: parent.radius
+            opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
+
+            layer.enabled: true
+            layer.effect: MultiEffect {
+                shadowEnabled: true
+                blurMax: 15
+                shadowColor: Qt.alpha(Colours.palette.m3shadow, 0.7)
+            }
+        }
+
+        MaterialIcon {
+            id: lockIcon
+
+            anchors.centerIn: parent
+            text: "lock"
+            font.pointSize: Appearance.font.size.extraLarge * 4
+            font.bold: true
+            rotation: 180
+        }
+
+        Content {
+            id: content
+
+            anchors.centerIn: parent
+            width: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio - Appearance.padding.large * 2
+            height: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult - Appearance.padding.large * 2
+
+            lock: root
+            opacity: 0
+            scale: 0
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/Media.qml

@@ -0,0 +1,208 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property var lock
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+    implicitHeight: layout.implicitHeight
+
+    Image {
+        anchors.fill: parent
+        source: Players.active?.trackArtUrl ?? ""
+
+        asynchronous: true
+        fillMode: Image.PreserveAspectCrop
+        sourceSize.width: width
+        sourceSize.height: height
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: mask
+        }
+
+        opacity: status === Image.Ready ? 1 : 0
+
+        Behavior on opacity {
+            Anim {
+                duration: Appearance.anim.durations.extraLarge
+            }
+        }
+    }
+
+    Rectangle {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+
+            GradientStop {
+                position: 0
+                color: Qt.rgba(0, 0, 0, 0.5)
+            }
+            GradientStop {
+                position: 0.4
+                color: Qt.rgba(0, 0, 0, 0.2)
+            }
+            GradientStop {
+                position: 0.8
+                color: Qt.rgba(0, 0, 0, 0)
+            }
+        }
+    }
+
+    ColumnLayout {
+        id: layout
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Appearance.padding.large
+
+        StyledText {
+            Layout.topMargin: Appearance.padding.large
+            Layout.bottomMargin: Appearance.spacing.larger
+            text: qsTr("Now playing")
+            color: Colours.palette.m3onSurfaceVariant
+            font.family: Appearance.font.family.mono
+            font.weight: 500
+        }
+
+        StyledText {
+            Layout.fillWidth: true
+            animate: true
+            text: Players.active?.trackArtist ?? qsTr("No media")
+            color: Colours.palette.m3primary
+            horizontalAlignment: Text.AlignHCenter
+            font.pointSize: Appearance.font.size.large
+            font.family: Appearance.font.family.mono
+            font.weight: 600
+            elide: Text.ElideRight
+        }
+
+        StyledText {
+            Layout.fillWidth: true
+            animate: true
+            text: Players.active?.trackTitle ?? qsTr("No media")
+            horizontalAlignment: Text.AlignHCenter
+            font.pointSize: Appearance.font.size.larger
+            font.family: Appearance.font.family.mono
+            elide: Text.ElideRight
+        }
+
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: Appearance.spacing.large * 1.2
+            Layout.bottomMargin: Appearance.padding.large
+
+            spacing: Appearance.spacing.large
+
+            PlayerControl {
+                icon: "skip_previous"
+
+                function onClicked(): void {
+                    if (Players.active?.canGoPrevious)
+                        Players.active.previous();
+                }
+            }
+
+            PlayerControl {
+                animate: true
+                icon: active ? "pause" : "play_arrow"
+                colour: "Primary"
+                level: active ? 2 : 1
+                active: Players.active?.isPlaying ?? false
+
+                function onClicked(): void {
+                    if (Players.active?.canTogglePlaying)
+                        Players.active.togglePlaying();
+                }
+            }
+
+            PlayerControl {
+                icon: "skip_next"
+
+                function onClicked(): void {
+                    if (Players.active?.canGoNext)
+                        Players.active.next();
+                }
+            }
+        }
+    }
+
+    component PlayerControl: StyledRect {
+        id: control
+
+        property alias animate: controlIcon.animate
+        property alias icon: controlIcon.text
+        property bool active
+        property string colour: "Secondary"
+        property int level: 1
+
+        function onClicked(): void {
+        }
+
+        Layout.preferredWidth: implicitWidth + (controlState.pressed ? Appearance.padding.normal * 2 : active ? Appearance.padding.small * 2 : 0)
+        implicitWidth: controlIcon.implicitWidth + Appearance.padding.large * 2
+        implicitHeight: controlIcon.implicitHeight + Appearance.padding.normal * 2
+
+        color: active ? Colours.palette[`m3${colour.toLowerCase()}`] : Colours.palette[`m3${colour.toLowerCase()}Container`]
+        radius: active || controlState.pressed ? Appearance.rounding.normal : Math.min(implicitWidth, implicitHeight) / 2 * Math.min(1, Appearance.rounding.scale)
+
+        Elevation {
+            anchors.fill: parent
+            radius: parent.radius
+            z: -1
+            level: controlState.containsMouse && !controlState.pressed ? control.level + 1 : control.level
+        }
+
+        StateLayer {
+            id: controlState
+
+            color: control.active ? Colours.palette[`m3on${control.colour}`] : Colours.palette[`m3on${control.colour}Container`]
+
+            function onClicked(): void {
+                control.onClicked();
+            }
+        }
+
+        MaterialIcon {
+            id: controlIcon
+
+            anchors.centerIn: parent
+            color: control.active ? Colours.palette[`m3on${control.colour}`] : Colours.palette[`m3on${control.colour}Container`]
+            font.pointSize: Appearance.font.size.large
+            fill: control.active ? 1 : 0
+
+            Behavior on fill {
+                Anim {}
+            }
+        }
+
+        Behavior on Layout.preferredWidth {
+            Anim {
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+            }
+        }
+
+        Behavior on radius {
+            Anim {
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+            }
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/NotifDock.qml

@@ -0,0 +1,145 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.containers
+import qs.components.effects
+import qs.services
+import qs.config
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property var lock
+
+    anchors.fill: parent
+    anchors.margins: Appearance.padding.large
+
+    spacing: Appearance.spacing.smaller
+
+    StyledText {
+        Layout.fillWidth: true
+        text: Notifs.list.length > 0 ? qsTr("%1 notification%2").arg(Notifs.list.length).arg(Notifs.list.length === 1 ? "" : "s") : qsTr("Notifications")
+        color: Colours.palette.m3outline
+        font.family: Appearance.font.family.mono
+        font.weight: 500
+        elide: Text.ElideRight
+    }
+
+    ClippingRectangle {
+        id: clipRect
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        radius: Appearance.rounding.small
+        color: "transparent"
+
+        Loader {
+            anchors.centerIn: parent
+            active: opacity > 0
+            opacity: Notifs.list.length > 0 ? 0 : 1
+
+            sourceComponent: ColumnLayout {
+                spacing: Appearance.spacing.large
+
+                Image {
+                    asynchronous: true
+                    source: Qt.resolvedUrl(`${Quickshell.shellDir}/assets/dino.png`)
+                    fillMode: Image.PreserveAspectFit
+                    sourceSize.width: clipRect.width * 0.8
+
+                    layer.enabled: true
+                    layer.effect: Colouriser {
+                        colorizationColor: Colours.palette.m3outlineVariant
+                        brightness: 1
+                    }
+                }
+
+                StyledText {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: qsTr("No Notifications")
+                    color: Colours.palette.m3outlineVariant
+                    font.pointSize: Appearance.font.size.large
+                    font.family: Appearance.font.family.mono
+                    font.weight: 500
+                }
+            }
+
+            Behavior on opacity {
+                Anim {
+                    duration: Appearance.anim.durations.extraLarge
+                }
+            }
+        }
+
+        StyledListView {
+            anchors.fill: parent
+
+            spacing: Appearance.spacing.small
+            clip: true
+
+            model: ScriptModel {
+                values: {
+                    const list = Notifs.notClosed.map(n => [n.appName, null]);
+                    return [...new Map(list).keys()];
+                }
+            }
+
+            delegate: NotifGroup {}
+
+            add: Transition {
+                Anim {
+                    property: "opacity"
+                    from: 0
+                    to: 1
+                }
+                Anim {
+                    property: "scale"
+                    from: 0
+                    to: 1
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+            }
+
+            remove: Transition {
+                Anim {
+                    property: "opacity"
+                    to: 0
+                }
+                Anim {
+                    property: "scale"
+                    to: 0.6
+                }
+            }
+
+            move: Transition {
+                Anim {
+                    properties: "opacity,scale"
+                    to: 1
+                }
+                Anim {
+                    property: "y"
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+            }
+
+            displaced: Transition {
+                Anim {
+                    properties: "opacity,scale"
+                    to: 1
+                }
+                Anim {
+                    property: "y"
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+            }
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/NotifGroup.qml

@@ -0,0 +1,316 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import qs.utils
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Notifications
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    required property string modelData
+
+    readonly property list<var> notifs: Notifs.list.filter(notif => notif.appName === modelData)
+    readonly property string image: notifs.find(n => n.image.length > 0)?.image ?? ""
+    readonly property string appIcon: notifs.find(n => n.appIcon.length > 0)?.appIcon ?? ""
+    readonly property string urgency: notifs.some(n => n.urgency === NotificationUrgency.Critical) ? "critical" : notifs.some(n => n.urgency === NotificationUrgency.Normal) ? "normal" : "low"
+
+    property bool expanded
+
+    anchors.left: parent?.left
+    anchors.right: parent?.right
+    implicitHeight: content.implicitHeight + Appearance.padding.normal * 2
+
+    clip: true
+    radius: Appearance.rounding.normal
+    color: root.urgency === "critical" ? Colours.palette.m3secondaryContainer : Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
+
+    RowLayout {
+        id: content
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: Appearance.padding.normal
+
+        spacing: Appearance.spacing.normal
+
+        Item {
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            implicitWidth: Config.notifs.sizes.image
+            implicitHeight: Config.notifs.sizes.image
+
+            Component {
+                id: imageComp
+
+                Image {
+                    source: Qt.resolvedUrl(root.image)
+                    fillMode: Image.PreserveAspectCrop
+                    cache: false
+                    asynchronous: true
+                    width: Config.notifs.sizes.image
+                    height: Config.notifs.sizes.image
+                }
+            }
+
+            Component {
+                id: appIconComp
+
+                ColouredIcon {
+                    implicitSize: Math.round(Config.notifs.sizes.image * 0.6)
+                    source: Quickshell.iconPath(root.appIcon)
+                    colour: root.urgency === "critical" ? Colours.palette.m3onError : root.urgency === "low" ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
+                    layer.enabled: root.appIcon.endsWith("symbolic")
+                }
+            }
+
+            Component {
+                id: materialIconComp
+
+                MaterialIcon {
+                    text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency)
+                    color: root.urgency === "critical" ? Colours.palette.m3onError : root.urgency === "low" ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
+                    font.pointSize: Appearance.font.size.large
+                }
+            }
+
+            ClippingRectangle {
+                anchors.fill: parent
+                color: root.urgency === "critical" ? Colours.palette.m3error : root.urgency === "low" ? Colours.layer(Colours.palette.m3surfaceContainerHighest, 3) : Colours.palette.m3secondaryContainer
+                radius: Appearance.rounding.full
+
+                Loader {
+                    anchors.centerIn: parent
+                    sourceComponent: root.image ? imageComp : root.appIcon ? appIconComp : materialIconComp
+                }
+            }
+
+            Loader {
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                active: root.appIcon && root.image
+
+                sourceComponent: StyledRect {
+                    implicitWidth: Config.notifs.sizes.badge
+                    implicitHeight: Config.notifs.sizes.badge
+
+                    color: root.urgency === "critical" ? Colours.palette.m3error : root.urgency === "low" ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3secondaryContainer
+                    radius: Appearance.rounding.full
+
+                    ColouredIcon {
+                        anchors.centerIn: parent
+                        implicitSize: Math.round(Config.notifs.sizes.badge * 0.6)
+                        source: Quickshell.iconPath(root.appIcon)
+                        colour: root.urgency === "critical" ? Colours.palette.m3onError : root.urgency === "low" ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
+                        layer.enabled: root.appIcon.endsWith("symbolic")
+                    }
+                }
+            }
+        }
+
+        ColumnLayout {
+            Layout.topMargin: -Appearance.padding.small
+            Layout.bottomMargin: -Appearance.padding.small / 2 - (root.expanded ? 0 : spacing)
+            Layout.fillWidth: true
+            spacing: Math.round(Appearance.spacing.small / 2)
+
+            RowLayout {
+                Layout.bottomMargin: -parent.spacing
+                Layout.fillWidth: true
+                spacing: Appearance.spacing.smaller
+
+                StyledText {
+                    Layout.fillWidth: true
+                    text: root.modelData
+                    color: Colours.palette.m3onSurfaceVariant
+                    font.pointSize: Appearance.font.size.small
+                    elide: Text.ElideRight
+                }
+
+                StyledText {
+                    animate: true
+                    text: root.notifs[0]?.timeStr ?? ""
+                    color: Colours.palette.m3outline
+                    font.pointSize: Appearance.font.size.small
+                }
+
+                StyledRect {
+                    implicitWidth: expandBtn.implicitWidth + Appearance.padding.smaller * 2
+                    implicitHeight: groupCount.implicitHeight + Appearance.padding.small
+
+                    color: root.urgency === "critical" ? Colours.palette.m3error : Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
+                    radius: Appearance.rounding.full
+
+                    opacity: root.notifs.length > Config.notifs.groupPreviewNum ? 1 : 0
+                    Layout.preferredWidth: root.notifs.length > Config.notifs.groupPreviewNum ? implicitWidth : 0
+
+                    StateLayer {
+                        color: root.urgency === "critical" ? Colours.palette.m3onError : Colours.palette.m3onSurface
+
+                        function onClicked(): void {
+                            root.expanded = !root.expanded;
+                        }
+                    }
+
+                    RowLayout {
+                        id: expandBtn
+
+                        anchors.centerIn: parent
+                        spacing: Appearance.spacing.small / 2
+
+                        StyledText {
+                            id: groupCount
+
+                            Layout.leftMargin: Appearance.padding.small / 2
+                            animate: true
+                            text: root.notifs.length
+                            color: root.urgency === "critical" ? Colours.palette.m3onError : Colours.palette.m3onSurface
+                            font.pointSize: Appearance.font.size.small
+                        }
+
+                        MaterialIcon {
+                            Layout.rightMargin: -Appearance.padding.small / 2
+                            animate: true
+                            text: root.expanded ? "expand_less" : "expand_more"
+                            color: root.urgency === "critical" ? Colours.palette.m3onError : Colours.palette.m3onSurface
+                        }
+                    }
+
+                    Behavior on opacity {
+                        Anim {}
+                    }
+
+                    Behavior on Layout.preferredWidth {
+                        Anim {}
+                    }
+                }
+            }
+
+            Repeater {
+                model: ScriptModel {
+                    values: root.notifs.slice(0, Config.notifs.groupPreviewNum)
+                }
+
+                NotifLine {
+                    id: notif
+
+                    ParallelAnimation {
+                        running: true
+
+                        Anim {
+                            target: notif
+                            property: "opacity"
+                            from: 0
+                            to: 1
+                        }
+                        Anim {
+                            target: notif
+                            property: "scale"
+                            from: 0.7
+                            to: 1
+                        }
+                        Anim {
+                            target: notif.Layout
+                            property: "preferredHeight"
+                            from: 0
+                            to: notif.implicitHeight
+                        }
+                    }
+
+                    ParallelAnimation {
+                        running: notif.modelData.closed
+                        onFinished: notif.modelData.unlock(notif)
+
+                        Anim {
+                            target: notif
+                            property: "opacity"
+                            to: 0
+                        }
+                        Anim {
+                            target: notif
+                            property: "scale"
+                            to: 0.7
+                        }
+                        Anim {
+                            target: notif.Layout
+                            property: "preferredHeight"
+                            to: 0
+                        }
+                    }
+                }
+            }
+
+            Loader {
+                Layout.fillWidth: true
+
+                opacity: root.expanded ? 1 : 0
+                Layout.preferredHeight: root.expanded ? implicitHeight : 0
+                active: opacity > 0
+
+                sourceComponent: ColumnLayout {
+                    Repeater {
+                        model: ScriptModel {
+                            values: root.notifs.slice(Config.notifs.groupPreviewNum)
+                        }
+
+                        NotifLine {}
+                    }
+                }
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+        }
+    }
+
+    Behavior on implicitHeight {
+        Anim {
+            duration: Appearance.anim.durations.expressiveDefaultSpatial
+            easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+        }
+    }
+
+    component NotifLine: StyledText {
+        id: notifLine
+
+        required property Notifs.Notif modelData
+
+        Layout.fillWidth: true
+        textFormat: Text.MarkdownText
+        text: {
+            const summary = modelData.summary.replace(/\n/g, " ");
+            const body = modelData.body.replace(/\n/g, " ");
+            const colour = root.urgency === "critical" ? Colours.palette.m3secondary : Colours.palette.m3outline;
+
+            if (metrics.text === metrics.elidedText)
+                return `${summary} <span style='color:${colour}'>${body}</span>`;
+
+            const t = metrics.elidedText.length - 3;
+            if (t < summary.length)
+                return `${summary.slice(0, t)}...`;
+
+            return `${summary} <span style='color:${colour}'>${body.slice(0, t - summary.length)}...</span>`;
+        }
+        color: root.urgency === "critical" ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+
+        Component.onCompleted: modelData.lock(this)
+        Component.onDestruction: modelData.unlock(this)
+
+        TextMetrics {
+            id: metrics
+
+            text: `${notifLine.modelData.summary} ${notifLine.modelData.body}`.replace(/\n/g, " ")
+            font.pointSize: notifLine.font.pointSize
+            font.family: notifLine.font.family
+            elideWidth: notifLine.width
+            elide: Text.ElideRight
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/Pam.qml

@@ -0,0 +1,193 @@
+import qs.config
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Services.Pam
+import QtQuick
+
+Scope {
+    id: root
+
+    required property WlSessionLock lock
+
+    readonly property alias passwd: passwd
+    readonly property alias fprint: fprint
+    property string lockMessage
+    property string state
+    property string fprintState
+    property string buffer
+
+    signal flashMsg
+
+    function handleKey(event: KeyEvent): void {
+        if (passwd.active || state === "max")
+            return;
+
+        if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
+            passwd.start();
+        } else if (event.key === Qt.Key_Backspace) {
+            if (event.modifiers & Qt.ControlModifier) {
+                buffer = "";
+            } else {
+                buffer = buffer.slice(0, -1);
+            }
+        } else if (" abcdefghijklmnopqrstuvwxyz1234567890`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/?".includes(event.text.toLowerCase())) {
+            // No illegal characters (you are insane if you use unicode in your password)
+            buffer += event.text;
+        }
+    }
+
+    PamContext {
+        id: passwd
+
+        config: "passwd"
+        configDirectory: Quickshell.shellDir + "/assets/pam.d"
+
+        onMessageChanged: {
+            if (message.startsWith("The account is locked"))
+                root.lockMessage = message;
+            else if (root.lockMessage && message.endsWith(" left to unlock)"))
+                root.lockMessage += "\n" + message;
+        }
+
+        onResponseRequiredChanged: {
+            if (!responseRequired)
+                return;
+
+            respond(root.buffer);
+            root.buffer = "";
+        }
+
+        onCompleted: res => {
+            if (res === PamResult.Success)
+                return root.lock.unlock();
+
+            if (res === PamResult.Error)
+                root.state = "error";
+            else if (res === PamResult.MaxTries)
+                root.state = "max";
+            else if (res === PamResult.Failed)
+                root.state = "fail";
+
+            root.flashMsg();
+            stateReset.restart();
+        }
+    }
+
+    PamContext {
+        id: fprint
+
+        property bool available
+        property int tries
+        property int errorTries
+
+        function checkAvail(): void {
+            if (!available || !Config.lock.enableFprint || !root.lock.secure) {
+                abort();
+                return;
+            }
+
+            tries = 0;
+            errorTries = 0;
+            start();
+        }
+
+        config: "fprint"
+        configDirectory: Quickshell.shellDir + "/assets/pam.d"
+
+        onCompleted: res => {
+            if (!available)
+                return;
+
+            if (res === PamResult.Success)
+                return root.lock.unlock();
+
+            if (res === PamResult.Error) {
+                root.fprintState = "error";
+                errorTries++;
+                if (errorTries < 5) {
+                    abort();
+                    errorRetry.restart();
+                }
+            } else if (res === PamResult.MaxTries) {
+                // Isn't actually the real max tries as pam only reports completed
+                // when max tries is reached.
+                tries++;
+                if (tries < Config.lock.maxFprintTries) {
+                    // Restart if not actually real max tries
+                    root.fprintState = "fail";
+                    start();
+                } else {
+                    root.fprintState = "max";
+                    abort();
+                }
+            }
+
+            root.flashMsg();
+            fprintStateReset.start();
+        }
+    }
+
+    Process {
+        id: availProc
+
+        command: ["sh", "-c", "fprintd-list $USER"]
+        onExited: code => {
+            fprint.available = code === 0;
+            fprint.checkAvail();
+        }
+    }
+
+    Timer {
+        id: errorRetry
+
+        interval: 800
+        onTriggered: fprint.start()
+    }
+
+    Timer {
+        id: stateReset
+
+        interval: 4000
+        onTriggered: {
+            if (root.state !== "max")
+                root.state = "";
+        }
+    }
+
+    Timer {
+        id: fprintStateReset
+
+        interval: 4000
+        onTriggered: {
+            root.fprintState = "";
+            fprint.errorTries = 0;
+        }
+    }
+
+    Connections {
+        target: root.lock
+
+        function onSecureChanged(): void {
+            if (root.lock.secure) {
+                availProc.running = true;
+                root.buffer = "";
+                root.state = "";
+                root.fprintState = "";
+                root.lockMessage = "";
+            }
+        }
+
+        function onUnlock(): void {
+            fprint.abort();
+        }
+    }
+
+    Connections {
+        target: Config.lock
+
+        function onEnableFprintChanged(): void {
+            fprint.checkAvail();
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/Resources.qml

@@ -0,0 +1,93 @@
+import qs.components
+import qs.components.controls
+import qs.components.misc
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+GridLayout {
+    id: root
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.margins: Appearance.padding.large
+
+    rowSpacing: Appearance.spacing.large
+    columnSpacing: Appearance.spacing.large
+    rows: 2
+    columns: 2
+
+    Ref {
+        service: SystemUsage
+    }
+
+    Resource {
+        Layout.topMargin: Appearance.padding.large
+        icon: "memory"
+        value: SystemUsage.cpuPerc
+        colour: Colours.palette.m3primary
+    }
+
+    Resource {
+        Layout.topMargin: Appearance.padding.large
+        icon: "thermostat"
+        value: Math.min(1, SystemUsage.cpuTemp / 90)
+        colour: Colours.palette.m3secondary
+    }
+
+    Resource {
+        Layout.bottomMargin: Appearance.padding.large
+        icon: "memory_alt"
+        value: SystemUsage.memPerc
+        colour: Colours.palette.m3secondary
+    }
+
+    Resource {
+        Layout.bottomMargin: Appearance.padding.large
+        icon: "hard_disk"
+        value: SystemUsage.storagePerc
+        colour: Colours.palette.m3tertiary
+    }
+
+    component Resource: StyledRect {
+        id: res
+
+        required property string icon
+        required property real value
+        required property color colour
+
+        Layout.fillWidth: true
+        implicitHeight: width
+
+        color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
+        radius: Appearance.rounding.large
+
+        CircularProgress {
+            id: circ
+
+            anchors.fill: parent
+            value: res.value
+            padding: Appearance.padding.large * 3
+            fgColour: res.colour
+            bgColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 3)
+            strokeWidth: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.centerIn: parent
+            text: res.icon
+            color: res.colour
+            font.pointSize: (circ.arcRadius * 0.7) || 1
+            font.weight: 600
+        }
+
+        Behavior on value {
+            Anim {
+                duration: Appearance.anim.durations.large
+            }
+        }
+    }
+}

.config/quickshell/caelestia/modules/lock/WeatherInfo.qml

@@ -0,0 +1,176 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.services
+import qs.config
+import qs.utils
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property int rootHeight
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.margins: Appearance.padding.large * 2
+
+    spacing: Appearance.spacing.small
+
+    Loader {
+        Layout.topMargin: Appearance.padding.large * 2
+        Layout.bottomMargin: -Appearance.padding.large
+        Layout.alignment: Qt.AlignHCenter
+
+        active: root.rootHeight > 610
+        visible: active
+
+        sourceComponent: StyledText {
+            text: qsTr("Weather")
+            color: Colours.palette.m3primary
+            font.pointSize: Appearance.font.size.extraLarge
+            font.weight: 500
+        }
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.large
+
+        MaterialIcon {
+            animate: true
+            text: Weather.icon
+            color: Colours.palette.m3secondary
+            font.pointSize: Appearance.font.size.extraLarge * 2.5
+        }
+
+        ColumnLayout {
+            spacing: Appearance.spacing.small
+
+            StyledText {
+                Layout.fillWidth: true
+
+                animate: true
+                text: Weather.description
+                color: Colours.palette.m3secondary
+                font.pointSize: Appearance.font.size.large
+                font.weight: 500
+                elide: Text.ElideRight
+            }
+
+            StyledText {
+                Layout.fillWidth: true
+
+                animate: true
+                text: qsTr("Humidity: %1%").arg(Weather.humidity)
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.normal
+                elide: Text.ElideRight
+            }
+        }
+
+        Loader {
+            Layout.rightMargin: Appearance.padding.smaller
+            active: root.width > 400
+            visible: active
+
+            sourceComponent: ColumnLayout {
+                spacing: Appearance.spacing.small
+
+                StyledText {
+                    Layout.fillWidth: true
+
+                    animate: true
+                    text: Weather.temp
+                    color: Colours.palette.m3primary
+                    horizontalAlignment: Text.AlignRight
+                    font.pointSize: Appearance.font.size.extraLarge
+                    font.weight: 500
+                    elide: Text.ElideLeft
+                }
+
+                StyledText {
+                    Layout.fillWidth: true
+
+                    animate: true
+                    text: qsTr("Feels like: %1").arg(Weather.feelsLike)
+                    color: Colours.palette.m3outline
+                    horizontalAlignment: Text.AlignRight
+                    font.pointSize: Appearance.font.size.smaller
+                    elide: Text.ElideLeft
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: forecastLoader
+
+        Layout.topMargin: Appearance.spacing.smaller
+        Layout.bottomMargin: Appearance.padding.large * 2
+        Layout.fillWidth: true
+
+        active: root.rootHeight > 820
+        visible: active
+
+        sourceComponent: RowLayout {
+            spacing: Appearance.spacing.large
+
+            Repeater {
+                model: {
+                    const forecast = Weather.hourlyForecast;
+                    const count = root.width < 320 ? 3 : root.width < 400 ? 4 : 5;
+                    if (!forecast)
+                        return Array.from({
+                            length: count
+                        }, () => null);
+
+                    return forecast.slice(0, count);
+                }
+
+                ColumnLayout {
+                    id: forecastHour
+
+                    required property var modelData
+
+                    Layout.fillWidth: true
+                    spacing: Appearance.spacing.small
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: {
+                            const hour = forecastHour.modelData?.hour ?? 0;
+                            return hour > 12 ? `${(hour - 12).toString().padStart(2, "0")} PM` : `${hour.toString().padStart(2, "0")} AM`;
+                        }
+                        color: Colours.palette.m3outline
+                        horizontalAlignment: Text.AlignHCenter
+                        font.pointSize: Appearance.font.size.larger
+                    }
+
+                    MaterialIcon {
+                        Layout.alignment: Qt.AlignHCenter
+                        text: forecastHour.modelData?.icon ?? "cloud_alert"
+                        font.pointSize: Appearance.font.size.extraLarge * 1.5
+                        font.weight: 500
+                    }
+
+                    StyledText {
+                        Layout.alignment: Qt.AlignHCenter
+                        text: Config.services.useFahrenheit ? `${forecastHour.modelData?.tempF ?? 0}°F` : `${forecastHour.modelData?.tempC ?? 0}°C`
+                        color: Colours.palette.m3secondary
+                        font.pointSize: Appearance.font.size.larger
+                    }
+                }
+            }
+        }
+    }
+
+    Timer {
+        running: true
+        triggeredOnStart: true
+        repeat: true
+        interval: 900000 // 15 minutes
+        onTriggered: Weather.reload()
+    }
+}