feat: clamshell lock pfp

modules/lock/Center.qml

@@ -16,7 +16,7 @@ ColumnLayout {
     Layout.fillWidth: false
     Layout.fillHeight: true
 
-    spacing: Tokens.spacing.largeIncreased * 2
+    spacing: Tokens.spacing.largeIncreased
 
     Clock {
         Layout.alignment: Qt.AlignHCenter
@@ -25,7 +25,6 @@ ColumnLayout {
 
     StyledText {
         Layout.alignment: Qt.AlignHCenter
-        Layout.topMargin: -Tokens.padding.largeIncreased
 
         text: Time.format("dddd • d MMM").toUpperCase()
         color: Colours.palette.m3onSurface
@@ -34,6 +33,8 @@ ColumnLayout {
 
     ProfilePic {
         Layout.alignment: Qt.AlignHCenter
+        Layout.topMargin: Tokens.spacing.largeIncreased
+        Layout.bottomMargin: Tokens.spacing.medium
         centerWidth: root.centerWidth
     }
 
@@ -45,7 +46,6 @@ ColumnLayout {
 
     StateMessage {
         Layout.fillWidth: true
-        Layout.topMargin: -Tokens.spacing.largeIncreased
         pam: root.lock.pam
     }
 }

modules/lock/center/ProfilePic.qml

@@ -1,20 +1,37 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
+import M3Shapes
 import Caelestia.Config
 import qs.components
+import qs.components.effects
 import qs.components.images
 import qs.services
 import qs.utils
 
-StyledClippingRect {
+Item {
     id: root
 
     required property int centerWidth
+    readonly property color bgColour: Colours.tPalette.m3surfaceContainerHighest
 
-    implicitWidth: centerWidth / 2
-    implicitHeight: centerWidth / 2
+    implicitWidth: Math.round(centerWidth * 0.7)
+    implicitHeight: {
+        const bounds = shape.pathBounds();
+        return bounds.height - bounds.y;
+    }
 
-    color: Colours.tPalette.m3surfaceContainer
-    radius: Tokens.rounding.full
+    MaterialShape {
+        id: shape
+
+        anchors.centerIn: parent
+        implicitSize: root.implicitWidth
+
+        shape: MaterialShape.ClamShell
+        color: Qt.alpha(root.bgColour, 1)
+        opacity: root.bgColour.a
+        layer.enabled: true
+    }
 
     MaterialIcon {
         anchors.centerIn: parent
@@ -28,7 +45,12 @@ StyledClippingRect {
     CachingImage {
         id: pfp
 
-        anchors.fill: parent
+        anchors.fill: shape
         path: `${Paths.home}/.face`
+
+        layer.enabled: true
+        layer.effect: Mask {
+            maskSource: shape
+        }
     }
 }