Add lock and stuff

IpcToggle.qml

@@ -0,0 +1,15 @@
+import Quickshell.Io
+
+IpcHandler {
+    target: target
+    required property var item
+    function close() {
+        item.close();
+    }
+    function open() {
+        item.open();
+    }
+    function toggle() {
+        item.visible ? close() : open()
+    }
+}

Launcher.qml

@@ -12,12 +12,12 @@ import Quickshell.Widgets
 PanelWindow {
     id: launcher
 
-    function hide() {
+    function close() {
         visible = false 
         list.visible = false
         searchInput.text = ""
     }
-    function show() { 
+    function open() { 
         visible = true 
         list.visible = true
         list.modelChanged()
@@ -31,10 +31,9 @@ PanelWindow {
         top: true
         bottom: true
     }
+    visible: false
+
     readonly property int radius: 20
-    readonly property var font: {
-        family: "comfortaa"
-    }
     readonly property int entry_height: 100
     property var currentApps: {
         let apps = Array.from(DesktopEntries.applications.values);
@@ -98,7 +97,7 @@ PanelWindow {
                 function execute() {
                     modelData.execute() 
                     launcher.lastLaunched = modelData.id
-                    launcher.hide()
+                    launcher.close()
                 }
                 Behavior on selectedOffset {
                     NumberAnimation {duration: 500; easing.type: Easing.OutQuint}
@@ -168,7 +167,7 @@ PanelWindow {
                         delegate: Shape {
                             id: tri
                             property real x_size: Math.random() * button.width/12 + button.width/10
-                            property real y_size: x_size * Math.SQRT1_2
+                            property real y_size: x_size * 0.8
 
                             property real y_anim: 0
                             property real y_off: Math.random() * entry_height
@@ -205,12 +204,12 @@ PanelWindow {
                     visible: false
                     layer.enabled: true
                     radius: launcher.radius
-                    color: "red"
                 }
                 ShaderEffect {
                     anchors.fill: triangles
                     property var src: triangles
                     property var mask: triMask
+                    property bool fadeDirection: false
                     vertexShader: "default.vert.qsb"
                     fragmentShader: "trifade.frag.qsb"
 
@@ -242,7 +241,7 @@ PanelWindow {
                     spacing: 4
                     Text {
                         text: modelData.name
-                        font.family: launcher.font
+                        font.family: root.font
                         font.pixelSize: 16
                         font.bold: true
                         color: "white"
@@ -251,7 +250,7 @@ PanelWindow {
                         visible: modelData.comment.length > 0
                         width: parent.parent.width - icon.anchors.rightMargin-icon.width - 20
                         text: modelData.comment
-                        font.family: launcher.font
+                        font.family: root.font
                         color: "white"
                         elide: Text.ElideRight
                     }
@@ -282,7 +281,7 @@ PanelWindow {
             TextInput {
                 z: 5
                 id: searchInput
-                font.family: launcher.font
+                font.family: root.font
                 font.pixelSize: 16
                 font.bold: true
                 focus: true

Lock.qml

@@ -0,0 +1,214 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Shapes
+import Quickshell
+import Quickshell.Wayland
+
+WlSessionLock {
+    id: lock
+    readonly property string bgPath: "assets/lockbg.jpg"
+    readonly property string logoPath: "assets/logo.svg"
+    function open() {
+        locked = true
+    }
+    function close() {
+        locked = false
+    }
+    locked: false
+    surface: WlSessionLockSurface {
+        id: surface
+        color: "transparent"
+        Item {
+            id: content
+            visible: true
+            layer.enabled: true
+            anchors.fill: parent
+            Image {
+                visible: false
+                source: lock.bgPath
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    horizontalCenter: parent.horizontalCenter
+                }
+                width: surface.width
+                height: surface.height
+                fillMode: Image.PreserveAspectCrop
+            }
+            Item {
+                id: logo
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    horizontalCenter: parent.horizontalCenter
+                }
+                width: Math.min(surface.width, surface.height) * 0.6 + borderWidth*2
+                height: width
+
+                readonly property real borderWidth: 24
+
+                // Background
+                Shape {
+                    id: circleBg
+                    layer.enabled: true
+                    anchors.fill: parent
+                    containsMode: Shape.FillContains
+                    preferredRendererType: Shape.CurveRenderer
+                    ShapePath {
+                        fillGradient: LinearGradient {
+                            orientation: Gradient.Vertical
+                            GradientStop { position: 0; color: "#FB64A8" }
+                            GradientStop { position: 1; color: "#CA5289" }
+                        }
+                        strokeWidth: 0
+                        PathAngleArc {
+                            moveToStart: true
+                            centerX: logo.width/2
+                            centerY: logo.height/2
+                            radiusX: surface.height * 0.3 + logo.borderWidth/2
+                            radiusY: radiusX
+                            startAngle: 0
+                            sweepAngle: 360
+                        }
+                    }
+                }
+                Item {
+                    id: triangles
+                    visible: false
+                    anchors.fill: parent
+                    clip: true
+                    layer.enabled: true
+                    Instantiator {
+                        model: 24
+                        delegate: Shape {
+                            id: tri
+                            property real x_size: Math.random() * logo.width + logo.width/8
+                            property real y_size: x_size * 0.8
+
+                            property real y_anim: 0
+                            property real y_off: Math.random() * logo.height
+                            x: Math.random() * (logo.width + x_size*2) - x_size
+                            y: (y_anim + y_off) % (logo.height + y_size) - y_size
+                            ShapePath {
+                                strokeWidth: 2
+                                strokeColor: "#9A4272"
+                                fillColor: "transparent"
+
+                                startX: tri.x_size/2
+                                startY: 0
+                                PathLine {x: 0; y: tri.y_size}
+                                PathLine {x: tri.x_size; y: tri.y_size}
+                                PathLine {x: tri.x_size/2; y: 0}
+                            }
+                            PropertyAnimation on y_anim {
+                                from: logo.height + tri.y_size
+                                running: lock.secure
+                                to: 0
+                                duration: Math.random() * 15000 + 12000
+                                loops: Animation.Infinite
+                            }
+                        }
+                        onObjectAdded: (index, obj) => obj.parent = triangles
+                    }
+                }
+                ShaderEffect {
+                    anchors.fill: parent
+                    property var src: triangles
+                    property var mask: circleBg
+                    property bool fadeDirection: true
+                    vertexShader: "default.vert.qsb"
+                    fragmentShader: "trifade.frag.qsb"
+                }
+
+                // Group border and logo to shadow together
+                Item {
+                    anchors.fill: parent
+                    layer.enabled: true
+                    // Circle border
+                    Shape {
+                        anchors.fill: parent
+                        preferredRendererType: Shape.CurveRenderer
+                        ShapePath {
+                            fillColor: "transparent"
+                            strokeColor: "white"
+                            strokeWidth: logo.borderWidth
+                            PathAngleArc {
+                                moveToStart: true
+                                centerX: logo.width/2
+                                centerY: logo.height/2
+                                radiusX: surface.height * 0.3
+                                radiusY: radiusX
+                                startAngle: 0
+                                sweepAngle: 360
+                            }
+                        }
+                    }
+                    // Logo
+                    Image {
+                        anchors {
+                            verticalCenter: parent.verticalCenter
+                            horizontalCenter: parent.horizontalCenter
+                            verticalCenterOffset: logo.height * 0.05 * -1
+                        }
+                        width: logo.width * 0.65
+                        height: width
+                        source: lock.logoPath
+                        sourceSize {
+                            width: width
+                            height: height
+                        }
+                    }
+                    layer.effect: MultiEffect {
+                        anchors.fill: parent
+                        blurMax: 48
+                        shadowEnabled: true
+                        shadowOpacity: 0.4
+                        shadowVerticalOffset: logo.height * 0.015
+                    }
+                }
+            }
+
+            Rectangle {
+                id: flash
+                color: "white"
+                anchors.fill: parent
+                PropertyAnimation on opacity {
+                    running: lock.secure
+                    from: 1
+
+                    to: 0
+                    duration: 800
+                }
+            }
+            Button {
+                text: "unlock"
+                onClicked: lock.locked = false
+            }
+            layer.effect: MultiEffect {
+                anchors.fill: parent
+                maskEnabled: true
+                maskSource: contentMask
+            }
+        }
+
+        Item {
+            id: contentMask
+            layer.enabled: true
+            anchors.fill: parent
+            visible: false
+            Rectangle {
+                x: 0
+                y: surface.height/2 * (1 - progress)
+                width: surface.width
+                height: surface.height * progress
+                property real progress: 0
+                PropertyAnimation on progress {
+                    running: lock.secure
+                    from: 0
+                    to: 1
+                    duration: 800
+                    easing.type: Easing.OutQuint
+                }
+            }
+        }
+    }
+}

assets/logo.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="200"
+   height="200"
+   id="svg2424"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="1.463768"
+     inkscape:cx="291.02973"
+     inkscape:cy="83.346541"
+     inkscape:window-width="1920"
+     inkscape:window-height="1164"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g2424" />
+  <defs
+     id="defs2426">
+    <linearGradient
+       x1="112.49854"
+       y1="6.1372099"
+       x2="112.49853"
+       y2="129.3468"
+       id="path1082_2_"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(287,-83)">
+      <stop
+         id="stop193"
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="0" />
+      <stop
+         id="stop195"
+         style="stop-color:#ffffff;stop-opacity:0.27450982"
+         offset="1" />
+      <midPointStop
+         offset="0"
+         style="stop-color:#FFFFFF"
+         id="midPointStop197" />
+      <midPointStop
+         offset="0.5"
+         style="stop-color:#FFFFFF"
+         id="midPointStop199" />
+      <midPointStop
+         offset="1"
+         style="stop-color:#000000"
+         id="midPointStop201" />
+    </linearGradient>
+    <linearGradient
+       x1="541.33502"
+       y1="104.50665"
+       x2="606.91248"
+       y2="303.14029"
+       id="linearGradient2544"
+       xlink:href="#path1082_2_"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-0.3937741,0,0,0.393752,357.51969,122.00151)" />
+    <linearGradient
+       id="linearGradient3388">
+      <stop
+         id="stop3390"
+         style="stop-color:#000000;stop-opacity:0"
+         offset="0" />
+      <stop
+         id="stop3392"
+         style="stop-color:#000000;stop-opacity:0.37113401"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="490.72305"
+       y1="237.72447"
+       x2="490.72305"
+       y2="183.9644"
+       id="linearGradient4416"
+       xlink:href="#linearGradient3388"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.749107,0,0,0.749107,-35.459862,91.44108)" />
+  </defs>
+  <g
+     transform="translate(-34.777313,-129.80241)"
+     id="layer1">
+    <g
+       transform="matrix(0.8746356,0,0,0.8746356,14.730518,23.408954)"
+       id="g2424">
+      <path
+         d="m 137.23265,124.95732 c -9.88275,24.22987 -15.84354,40.07904 -26.84668,63.58865 6.7463,7.15108 15.02707,15.47888 28.47502,24.88433 -14.45787,-5.94932 -24.3199,-11.9223 -31.68995,-18.12047 -14.081932,29.38411 -36.14426,71.24046 -80.915835,151.68587 35.188955,-20.31519 62.466803,-32.83973 87.888455,-37.61876 -1.09161,-4.69502 -1.71224,-9.77361 -1.67008,-15.07256 l 0.0417,-1.12731 c 0.55835,-22.54463 12.28606,-39.88145 26.17864,-38.70432 13.89259,1.17713 24.69115,20.41841 24.1328,42.96305 -0.10506,4.24219 -0.58352,8.32312 -1.41958,12.10815 25.14564,4.91893 52.13181,17.4114 86.84465,37.45175 -6.84469,-12.60156 -12.95418,-23.96094 -18.78851,-34.77961 -9.19001,-7.12288 -18.77566,-16.39333 -38.32855,-26.42917 13.43953,3.49216 23.06206,7.52118 30.56263,12.02465 C 162.37814,187.36944 157.57455,172.69396 137.23265,124.95732 Z"
+         id="path2518"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.33607" />
+    </g>
+  </g>
+</svg>

shell.qml

@@ -3,18 +3,16 @@ import Quickshell
 import Quickshell.Io
 
 ShellRoot {
-    IpcHandler {
+    id: root
-        target: "launcher"
+    readonly property var font: {
-        function hide() {
+        family: "comfortaa"
-            launcher.hide()
-        }
-        function show() {
-            launcher.show()
-        }
-        function toggle() { launcher.visible ? hide() : show() }
     }
-        
+    Osu.IpcToggle {
-    Osu.Launcher {
+        target: "launcher"
-        id: launcher
+        item: Osu.Launcher {}
+    }
+    Osu.IpcToggle {
+        target: "lock"
+        item: Osu.Lock { }
     }
 }

trifade.frag

@@ -4,11 +4,12 @@ layout(location = 0) out vec4 fragColor;
 layout(std140, binding = 0) uniform buf {
     mat4 qt_Matrix;
     float qt_Opacity;
+    bool fadeDirection; // true: fade top, false: fade bottom
 };
 layout(binding = 1) uniform sampler2D src;
 layout(binding = 2) uniform sampler2D mask;
 void main() {
     vec4 tex = texture(src, coord);
-    float a = texture(mask, coord).a * tex.a * (1-coord.y);
+    float a = texture(mask, coord).a * tex.a * (fadeDirection ? coord.y : 1-coord.y);
     fragColor = vec4(tex.r * a, tex.g * a, tex.b * a, a);
 }