init: working version

modules/session/Background.qml

@@ -0,0 +1,51 @@
+import qs.config
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property Item wrapper
+    readonly property real rounding: Config.border.rounding
+    readonly property bool flatten: wrapper.height < rounding * 2
+    readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+
+    ShapePath {
+        startX: -root.rounding + 0.5
+        startY: -0.5
+        strokeWidth: -1
+        fillColor: Config.colors.bg
+
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: root.wrapper.height - root.roundingY * 2
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: root.wrapper.width - root.rounding * 2
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.rounding
+            radiusX: root.rounding
+            radiusY: root.rounding
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: -root.wrapper.height - root.rounding
+        }
+    }
+}

modules/session/Content.qml

@@ -0,0 +1,131 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+
+Row {
+    id: root
+    required property PersistentProperties uiState
+
+    padding: 12
+    spacing: 12
+
+    SessionButton {
+        id: sleep
+
+        icon: "bedtime"
+        iconColor: Config.colors.violet
+        command: Config.session.sleep
+
+        KeyNavigation.right: lock
+
+        Component.onCompleted: forceActiveFocus()
+    }
+
+    SessionButton {
+        id: lock
+
+        icon: "lock"
+        iconColor: Config.colors.brown
+        command: Config.session.lock
+
+        KeyNavigation.left: sleep
+        KeyNavigation.right: logout
+    }
+
+    SessionButton {
+        id: logout
+
+        icon: "logout"
+        iconColor: Config.colors.cyan
+        command: Config.session.logout
+
+        KeyNavigation.left: lock
+        KeyNavigation.right: reboot
+    }
+
+    SessionButton {
+        id: reboot
+
+        icon: "cached"
+        iconColor: Config.colors.yellow
+        command: Config.session.reboot
+
+        KeyNavigation.left: logout
+        KeyNavigation.right: shutdown
+    }
+
+    SessionButton {
+        id: shutdown
+
+        icon: "power_settings_new"
+        iconColor: Config.colors.red
+        command: Config.session.shutdown
+
+        KeyNavigation.left: reboot
+    }
+
+    component SessionButton: CustomRect {
+        id: button
+
+        required property string icon
+        required property color iconColor
+        required property list<string> command
+
+        implicitWidth: Config.session.buttonSize
+        implicitHeight: Config.session.buttonSize
+
+        radius: 22
+        color: button.activeFocus ? Config.colors.containerAlt : Config.colors.container
+
+        Behavior on color {
+            CAnim {}
+        }
+
+        Keys.onEnterPressed: layer.onClicked()
+        Keys.onReturnPressed: layer.onClicked()
+        Keys.onPressed: event => {
+            if (event.modifiers & Qt.ControlModifier) {
+                if (event.key === Qt.Key_L && KeyNavigation.right) {
+                    KeyNavigation.right.focus = true;
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_H && KeyNavigation.left) {
+                    KeyNavigation.left.focus = true;
+                    event.accepted = true;
+                }
+            } else if (event.key === Qt.Key_Tab && KeyNavigation.right) {
+                KeyNavigation.right.focus = true;
+                event.accepted = true;
+            } else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))) {
+                if (KeyNavigation.left) {
+                    KeyNavigation.left.focus = true;
+                    event.accepted = true;
+                }
+            }
+        }
+
+        StateLayer {
+            id: layer
+            anchors.fill: parent
+            radius: parent.radius
+
+            function onClicked(): void {
+                root.uiState.session = false;
+                Quickshell.execDetached(button.command);
+            }
+        }
+
+        MaterialIcon {
+            anchors.centerIn: parent
+
+            text: button.icon
+            color: button.iconColor
+            font.pointSize: Config.font.size.largest
+            font.weight: 500
+        }
+    }
+}

modules/session/Wrapper.qml

@@ -0,0 +1,80 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property var panels
+    readonly property real nonAnimHeight: content.implicitHeight
+
+    visible: height > 0
+    implicitWidth: content.implicitWidth
+    implicitHeight: 0
+
+    states: State {
+        name: "visible"
+        when: root.uiState.session
+
+        PropertyChanges {
+            root.implicitHeight: root.nonAnimHeight
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "visible"
+
+            Anim {
+                target: root
+                property: "implicitHeight"
+                easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+            }
+        },
+        Transition {
+            from: "visible"
+            to: ""
+
+            Anim {
+                target: root
+                property: "implicitHeight"
+                easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+            }
+        }
+    ]
+
+    Binding {
+        target: root.uiState
+        property: "blockScreen"
+        value: true
+        when: root.uiState.session
+    }
+
+    Background {
+        id: background
+        visible: false
+        wrapper: root
+    }
+
+    GlowEffect {
+        source: background
+        glowColor: Config.colors.power
+    }
+
+    Loader {
+        id: content
+
+        anchors.bottom: parent.bottom
+
+        Component.onCompleted: active = Qt.binding(() => root.uiState.session || root.visible)
+
+        sourceComponent: Content {
+            uiState: root.uiState
+        }
+    }
+}