refactor: use signals instead of functions

components/StateLayer.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Shapes
 import Caelestia.Config
 import qs.services
 
@@ -7,90 +8,168 @@ MouseArea {
 
     property bool disabled
     property bool showHoverBackground: true
-    property color color: Colours.palette.m3onSurface
+    readonly property alias rect: base
-    // Pick up radius from parent if it has one (parent can be anything with a radius property)
-    property real radius: parent?.radius ?? 0 // qmllint disable missing-property
-    property alias rect: hoverLayer
 
-    function onClicked(): void {
+    property bool shapeMorph
+    property real stateOpacity: pressed ? 0.1 : containsMouse ? 0.08 : 0
+
+    property real pressX: width / 2
+    property real pressY: height / 2
+    property real circleRadius
+
+    property alias color: base.color
+    property alias radius: base.radius
+    property alias topLeftRadius: base.topLeftRadius
+    property alias topRightRadius: base.topRightRadius
+    property alias bottomLeftRadius: base.bottomLeftRadius
+    property alias bottomRightRadius: base.bottomRightRadius
+
+    readonly property real endRadius: {
+        const d1 = distSq(0, 0);
+        const d2 = distSq(width, 0);
+        const d3 = distSq(0, height);
+        const d4 = distSq(width, height);
+        return Math.sqrt(Math.max(d1, d2, d3, d4)) * (shapeMorph ? 1.16 : 1);
+    }
+    property real endRadiusAtPress
+
+    function distSq(x: real, y: real): real {
+        return (pressX - x) ** 2 + (pressY - y) ** 2;
+    }
+
+    function press(x: real, y: real): void {
+        pressX = x;
+        pressY = y;
+        fadeAnim.complete();
+        circleRadius = 0;
+        circle.opacity = 0.1;
+        rippleAnim.restart();
+        endRadiusAtPress = endRadius;
     }
 
     anchors.fill: parent
-
     enabled: !disabled
     cursorShape: disabled ? undefined : Qt.PointingHandCursor
     hoverEnabled: true
 
-    onPressed: event => {
+    onPressedChanged: {
-        if (disabled)
+        if (!pressed && !rippleAnim.running && circle.opacity > 0)
-            return;
+            fadeAnim.start();
-
-        rippleAnim.x = event.x;
-        rippleAnim.y = event.y;
-
-        const dist = (ox, oy) => ox * ox + oy * oy;
-        rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
-
-        rippleAnim.restart();
     }
 
-    onClicked: event => !disabled && onClicked(event)
+    onCircleRadiusChanged: {
+        if (!pressed && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+            fadeAnim.start();
+    }
 
-    SequentialAnimation {
+    Anim {
         id: rippleAnim
 
-        property real x
+        alwaysRunToEnd: true
-        property real y
+        target: root
-        property real radius
+        property: "circleRadius"
-
+        to: root.endRadius
-        PropertyAction {
+        easing: Tokens.anim.standardDecel
-            target: ripple
+        duration: Tokens.anim.durations.normal * 2
-            property: "x"
-            value: rippleAnim.x
-        }
-        PropertyAction {
-            target: ripple
-            property: "y"
-            value: rippleAnim.y
-        }
-        PropertyAction {
-            target: ripple
-            property: "opacity"
-            value: 0.08
-        }
-        Anim {
-            target: ripple
-            properties: "implicitWidth,implicitHeight"
-            from: 0
-            to: rippleAnim.radius * 2
-            easing: Tokens.anim.standardDecel
-        }
-        Anim {
-            target: ripple
-            property: "opacity"
-            to: 0
-        }
     }
 
-    StyledClippingRect {
+    Anim {
-        id: hoverLayer
+        id: fadeAnim
+
+        target: circle
+        property: "opacity"
+        to: 0
+    }
+
+    StyledRect {
+        id: base
 
         anchors.fill: parent
+        opacity: root.stateOpacity
+        color: Colours.palette.m3onSurface
+        // Pick up radius from parent if it has one (parent can be anything with a radius property)
+        radius: root.parent?.radius ?? 0 // qmllint disable missing-property
+    }
 
-        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.12 : (root.showHoverBackground && root.containsMouse) ? 0.08 : 0)
+    Shape {
-        radius: root.radius
+        id: circle
 
-        StyledRect {
+        anchors.fill: parent
-            id: ripple
+        opacity: 0
+        preferredRendererType: Shape.CurveRenderer
 
-            radius: Tokens.rounding.full
+        ShapePath {
-            color: root.color
+            strokeWidth: 0
-            opacity: 0
+            strokeColor: "transparent"
+            fillColor: base.color
+            fillGradient: RadialGradient {
+                centerX: root.pressX
+                centerY: root.pressY
+                centerRadius: root.circleRadius
+                focalX: centerX
+                focalY: centerY
 
-            transform: Translate {
+                GradientStop {
-                x: -ripple.width / 2
+                    position: 0
-                y: -ripple.height / 2
+                    color: Qt.alpha(base.color, 1)
+                }
+                GradientStop {
+                    position: 0.99
+                    color: Qt.alpha(base.color, 1)
+                }
+                GradientStop {
+                    position: 1
+                    color: Qt.alpha(base.color, 0)
+                }
+            }
+
+            startX: base.topLeftRadius
+            startY: 0
+
+            PathLine {
+                x: root.width - base.topLeftRadius
+                y: 0
+            }
+            PathArc {
+                relativeX: base.topLeftRadius
+                relativeY: base.topLeftRadius
+                radiusX: base.topLeftRadius
+                radiusY: base.topLeftRadius
+            }
+            PathLine {
+                x: root.width
+                y: root.height - base.bottomRightRadius
+            }
+            PathArc {
+                relativeX: -base.bottomRightRadius
+                relativeY: base.bottomRightRadius
+                radiusX: base.bottomRightRadius
+                radiusY: base.bottomRightRadius
+            }
+            PathLine {
+                x: base.bottomLeftRadius
+                y: root.height
+            }
+            PathArc {
+                relativeX: -base.bottomLeftRadius
+                relativeY: -base.bottomLeftRadius
+                radiusX: base.bottomLeftRadius
+                radiusY: base.bottomLeftRadius
+            }
+            PathLine {
+                x: 0
+                y: base.topLeftRadius
+            }
+            PathArc {
+                x: base.topLeftRadius
+                y: 0
+                radiusX: base.topLeftRadius
+                radiusY: base.topLeftRadius
             }
         }
     }
+
+    Behavior on stateOpacity {
+        Anim {}
+    }
 }

components/controls/CollapsibleSection.qml

@@ -62,15 +62,14 @@ ColumnLayout {
         }
 
         StateLayer {
-            function onClicked(): void {
-                root.toggleRequested();
-                root.expanded = !root.expanded;
-            }
-
             anchors.fill: parent
             color: Colours.palette.m3onSurface
             radius: Tokens.rounding.normal
             showHoverBackground: false
+            onClicked: {
+                root.toggleRequested();
+                root.expanded = !root.expanded;
+            }
         }
     }
 

components/controls/CustomSpinBox.qml

@@ -94,7 +94,12 @@ RowLayout {
         StateLayer {
             id: upState
 
-            function onClicked(): void {
+            color: Colours.palette.m3onPrimary
+
+            onPressAndHold: timer.start()
+            onReleased: timer.stop()
+
+            onClicked: {
                 let newValue = Math.min(root.max, root.value + root.step);
                 // Round to avoid floating point precision errors
                 const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -103,11 +108,6 @@ RowLayout {
                 root.displayText = newValue.toString();
                 root.valueModified(newValue);
             }
-
-            color: Colours.palette.m3onPrimary
-
-            onPressAndHold: timer.start()
-            onReleased: timer.stop()
         }
 
         MaterialIcon {
@@ -129,7 +129,7 @@ RowLayout {
         StateLayer {
             id: downState
 
-            function onClicked(): void {
+            onClicked: {
                 let newValue = Math.max(root.min, root.value - root.step);
                 // Round to avoid floating point precision errors
                 const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -162,9 +162,9 @@ RowLayout {
         triggeredOnStart: true
         onTriggered: {
             if (upState.pressed)
-                upState.onClicked();
+                upState.clicked();
             else if (downState.pressed)
-                downState.onClicked();
+                downState.clicked();
         }
     }
 }

components/controls/IconButton.qml

@@ -53,14 +53,13 @@ StyledRect {
     StateLayer {
         id: stateLayer
 
-        function onClicked(): void {
+        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+        disabled: root.disabled
+        onClicked: {
             if (root.toggle)
                 root.internalChecked = !root.internalChecked;
             root.clicked();
         }
-
-        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-        disabled: root.disabled
     }
 
     MaterialIcon {

components/controls/IconTextButton.qml

@@ -45,13 +45,12 @@ StyledRect {
     StateLayer {
         id: stateLayer
 
-        function onClicked(): void {
+        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+        onClicked: {
             if (root.toggle)
                 root.internalChecked = !root.internalChecked;
             root.clicked();
         }
-
-        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
     }
 
     RowLayout {

components/controls/Menu.qml

@@ -52,15 +52,14 @@ Elevation {
                     color: Qt.alpha(Colours.palette.m3secondaryContainer, active ? 1 : 0)
 
                     StateLayer {
-                        function onClicked(): void {
+                        color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                        disabled: !root.expanded
+                        onClicked: {
                             root.itemSelected(item.modelData);
                             root.active = item.modelData;
                             item.modelData.clicked();
                             root.expanded = false;
                         }
-
-                        color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
-                        disabled: !root.expanded
                     }
 
                     RowLayout {

components/controls/SplitButton.qml

@@ -47,14 +47,11 @@ Row {
         StateLayer {
             id: stateLayer
 
-            function onClicked(): void {
-                root.active?.clicked();
-            }
-
             rect.topRightRadius: parent.topRightRadius
             rect.bottomRightRadius: parent.bottomRightRadius
             color: root.textColour
             disabled: root.disabled
+            onClicked: root.active?.clicked()
         }
 
         RowLayout {
@@ -109,7 +106,7 @@ Row {
         StateLayer {
             id: expandStateLayer
 
-            function onClicked(): void {
+            onClicked: {
                 root.expanded = !root.expanded;
             }
 

components/controls/StyledRadioButton.qml

@@ -24,13 +24,11 @@ RadioButton {
         anchors.verticalCenter: parent.verticalCenter
 
         StateLayer {
-            function onClicked(): void {
-                root.click();
-            }
 
             anchors.margins: -Tokens.padding.smaller
             color: root.checked ? Colours.palette.m3onSurface : Colours.palette.m3primary
             z: -1
+            onClicked: root.click()
         }
 
         StyledRect {

components/controls/TextButton.qml

@@ -56,13 +56,12 @@ StyledRect {
     StateLayer {
         id: stateLayer
 
-        function onClicked(): void {
+        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+        onClicked: {
             if (root.toggle)
                 root.internalChecked = !root.internalChecked;
             root.clicked();
         }
-
-        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
     }
 
     StyledText {

components/controls/ToggleButton.qml

@@ -46,11 +46,8 @@ StyledRect {
     StateLayer {
         id: toggleStateLayer
 
-        function onClicked(): void {
-            root.clicked();
-        }
-
         color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
+        onClicked: root.clicked()
     }
 
     RowLayout {

components/filedialog/DialogButtons.qml

@@ -49,11 +49,9 @@ StyledRect {
             implicitHeight: cancelText.implicitHeight + Tokens.padding.normal * 2
 
             StateLayer {
-                function onClicked(): void {
-                    root.dialog.accepted(root.folder.currentItem.modelData.path);
-                }
 
                 disabled: !root.dialog.selectionValid
+                onClicked: root.dialog.accepted(root.folder.currentItem.modelData.path)
             }
 
             StyledText {
@@ -75,7 +73,7 @@ StyledRect {
             implicitHeight: cancelText.implicitHeight + Tokens.padding.normal * 2
 
             StateLayer {
-                function onClicked(): void {
+                onClicked: {
                     root.dialog.rejected();
                 }
             }

components/filedialog/FolderContents.qml

@@ -173,10 +173,7 @@ Item {
         clip: true
 
         StateLayer {
-            function onClicked(): void {
+            onClicked: view.currentIndex = item.index
-                view.currentIndex = item.index;
-            }
-
             onDoubleClicked: {
                 if (item.modelData.isDir)
                     root.dialog.cwd.push(item.modelData.name);

components/filedialog/HeaderBar.qml

@@ -28,12 +28,10 @@ StyledRect {
             implicitHeight: upIcon.implicitHeight + Tokens.padding.small * 2
 
             StateLayer {
-                function onClicked(): void {
-                    root.dialog.cwd.pop();
-                }
 
                 radius: Tokens.rounding.small
                 disabled: root.dialog.cwd.length === 1
+                onClicked: root.dialog.cwd.pop()
             }
 
             MaterialIcon {
@@ -94,7 +92,7 @@ StyledRect {
                                 anchors.fill: parent
                                 active: folder.index < root.dialog.cwd.length - 1
                                 sourceComponent: StateLayer {
-                                    function onClicked(): void {
+                                    onClicked: {
                                         root.dialog.cwd = root.dialog.cwd.slice(0, folder.index + 1);
                                     }
 

components/filedialog/Sidebar.qml

@@ -52,14 +52,13 @@ StyledRect {
                 color: Qt.alpha(Colours.palette.m3secondaryContainer, selected ? 1 : 0)
 
                 StateLayer {
-                    function onClicked(): void {
+                    color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                    onClicked: {
                         if (place.modelData === "Home")
                             root.dialog.cwd = ["Home"];
                         else
                             root.dialog.cwd = ["Home", place.modelData];
                     }
-
-                    color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
                 }
 
                 RowLayout {

modules/background/Wallpaper.qml

@@ -79,12 +79,9 @@ Item {
                         }
 
                         StateLayer {
-                            function onClicked(): void {
-                                dialog.open();
-                            }
-
                             radius: parent.radius
                             color: Colours.palette.m3onPrimary
+                            onClicked: dialog.open()
                         }
 
                         StyledText {

modules/bar/components/Power.qml

@@ -13,15 +13,12 @@ Item {
 
     StateLayer {
         // Cursed workaround to make the height larger than the parent
-        function onClicked(): void {
-            root.visibilities.session = !root.visibilities.session;
-        }
-
         anchors.fill: undefined
         anchors.centerIn: parent
         implicitWidth: implicitHeight
         implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
         radius: Tokens.rounding.full
+        onClicked: root.visibilities.session = !root.visibilities.session
     }
 
     MaterialIcon {

modules/bar/components/Settings.qml

@@ -1,39 +0,0 @@
-import QtQuick
-import Caelestia.Config
-import qs.components
-import qs.services
-import qs.modules.controlcenter
-
-Item {
-    id: root
-
-    implicitWidth: icon.implicitHeight + Tokens.padding.small * 2
-    implicitHeight: icon.implicitHeight
-
-    StateLayer {
-        // Cursed workaround to make the height larger than the parent
-        function onClicked(): void {
-            WindowFactory.create(null, {
-                active: "network"
-            });
-        }
-
-        anchors.fill: undefined
-        anchors.centerIn: parent
-        implicitWidth: implicitHeight
-        implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
-        radius: Tokens.rounding.full
-    }
-
-    MaterialIcon {
-        id: icon
-
-        anchors.centerIn: parent
-        anchors.horizontalCenterOffset: -1
-
-        text: "settings"
-        color: Colours.palette.m3onSurface
-        font.bold: true
-        font.pointSize: Tokens.font.size.normal
-    }
-}

modules/bar/components/SettingsIcon.qml

@@ -1,39 +0,0 @@
-import QtQuick
-import Caelestia.Config
-import qs.components
-import qs.services
-import qs.modules.controlcenter
-
-Item {
-    id: root
-
-    implicitWidth: icon.implicitHeight + Tokens.padding.small * 2
-    implicitHeight: icon.implicitHeight
-
-    StateLayer {
-        // Cursed workaround to make the height larger than the parent
-        function onClicked(): void {
-            WindowFactory.create(null, {
-                active: "network"
-            });
-        }
-
-        anchors.fill: undefined
-        anchors.centerIn: parent
-        implicitWidth: implicitHeight
-        implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
-        radius: Tokens.rounding.full
-    }
-
-    MaterialIcon {
-        id: icon
-
-        anchors.centerIn: parent
-        anchors.horizontalCenterOffset: -1
-
-        text: "settings"
-        color: Colours.palette.m3onSurface
-        font.bold: true
-        font.pointSize: Tokens.font.size.normal
-    }
-}

modules/bar/popouts/ActiveWindow.qml

@@ -65,11 +65,8 @@ Item {
                 Layout.alignment: Qt.AlignVCenter
 
                 StateLayer {
-                    function onClicked(): void {
-                        root.popouts.detachRequested("winfo");
-                    }
-
                     radius: Tokens.rounding.normal
+                    onClicked: root.popouts.detachRequested("winfo")
                 }
 
                 MaterialIcon {

modules/bar/popouts/Battery.qml

@@ -203,12 +203,9 @@ Column {
         implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
 
         StateLayer {
-            function onClicked(): void {
-                PowerProfiles.profile = parent.profile;
-            }
-
             radius: Tokens.rounding.full
             color: profiles.current === parent.icon ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+            onClicked: PowerProfiles.profile = parent.profile
         }
 
         MaterialIcon {

modules/bar/popouts/Bluetooth.qml

@@ -124,12 +124,9 @@ ColumnLayout {
                 }
 
                 StateLayer {
-                    function onClicked(): void {
-                        device.modelData.connected = !device.modelData.connected;
-                    }
-
                     color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface // qmllint disable unresolved-type
                     disabled: device.loading
+                    onClicked: device.modelData.connected = !device.modelData.connected
                 }
 
                 MaterialIcon {
@@ -157,11 +154,8 @@ ColumnLayout {
                     implicitHeight: connectBtn.implicitHeight
 
                     StateLayer {
-                        function onClicked(): void {
-                            device.modelData.forget();
-                        }
-
                         radius: Tokens.rounding.full
+                        onClicked: device.modelData.forget()
                     }
 
                     MaterialIcon {

modules/bar/popouts/Network.qml

@@ -123,7 +123,10 @@ ColumnLayout {
                 }
 
                 StateLayer {
-                    function onClicked(): void {
+                    color: networkItem.modelData.active ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                    disabled: networkItem.loading || !Nmcli.wifiEnabled
+
+                    onClicked: {
                         if (networkItem.modelData.active) {
                             Nmcli.disconnectFromNetwork();
                         } else {
@@ -139,9 +142,6 @@ ColumnLayout {
                             // This is handled by the onActiveChanged connection below
                         }
                     }
-
-                    color: networkItem.modelData.active ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
-                    disabled: networkItem.loading || !Nmcli.wifiEnabled
                 }
 
                 MaterialIcon {
@@ -173,12 +173,9 @@ ColumnLayout {
         color: Colours.palette.m3primaryContainer
 
         StateLayer {
-            function onClicked(): void {
-                Nmcli.rescanWifi();
-            }
-
             color: Colours.palette.m3onPrimaryContainer
             disabled: Nmcli.scanning || !Nmcli.wifiEnabled
+            onClicked: Nmcli.rescanWifi()
         }
 
         RowLayout {
@@ -303,16 +300,16 @@ ColumnLayout {
                 }
 
                 StateLayer {
-                    function onClicked(): void {
+                    color: ethernetItem.modelData.connected ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                    disabled: ethernetItem.loading
+
+                    onClicked: {
                         if (ethernetItem.modelData.connected && ethernetItem.modelData.connection) {
                             Nmcli.disconnectEthernet(ethernetItem.modelData.connection, () => {});
                         } else {
                             Nmcli.connectEthernet(ethernetItem.modelData.connection || "", ethernetItem.modelData.interface || "", () => {});
                         }
                     }
-
-                    color: ethernetItem.modelData.connected ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
-                    disabled: ethernetItem.loading
                 }
 
                 MaterialIcon {

modules/bar/popouts/TrayMenu.qml

@@ -97,7 +97,14 @@ StackView {
                         implicitHeight: label.implicitHeight
 
                         StateLayer {
-                            function onClicked(): void {
+                            anchors.margins: -Tokens.padding.small / 2
+                            anchors.leftMargin: -Tokens.padding.smaller
+                            anchors.rightMargin: -Tokens.padding.smaller
+
+                            radius: item.radius
+                            disabled: !item.modelData.enabled
+
+                            onClicked: {
                                 const entry = item.modelData;
                                 if (entry.hasChildren)
                                     root.push(subMenuComp.createObject(null, {
@@ -109,13 +116,6 @@ StackView {
                                     root.popouts.hasCurrent = false;
                                 }
                             }
-
-                            anchors.margins: -Tokens.padding.small / 2
-                            anchors.leftMargin: -Tokens.padding.smaller
-                            anchors.rightMargin: -Tokens.padding.smaller
-
-                            radius: item.radius
-                            disabled: !item.modelData.enabled
                         }
 
                         Loader {
@@ -197,12 +197,9 @@ StackView {
                         color: Colours.palette.m3secondaryContainer
 
                         StateLayer {
-                            function onClicked(): void {
-                                root.pop();
-                            }
-
                             radius: parent.radius
                             color: Colours.palette.m3onSecondaryContainer
+                            onClicked: root.pop()
                         }
                     }
 

modules/bar/popouts/WirelessPassword.qml

@@ -363,13 +363,10 @@ ColumnLayout {
                 }
 
                 StateLayer {
-                    function onClicked(): void {
-                        passwordContainer.forceActiveFocus();
-                    }
-
                     hoverEnabled: false
                     cursorShape: Qt.IBeamCursor
                     radius: Tokens.rounding.normal
+                    onClicked: passwordContainer.forceActiveFocus()
                 }
 
                 StyledText {

modules/bar/popouts/kblayout/KbLayout.qml

@@ -95,7 +95,7 @@ ColumnLayout {
             StateLayer {
                 id: layer
 
-                function onClicked(): void {
+                onClicked: {
                     if (!kbDelegate.isDisabled)
                         kb.switchTo(kbDelegate.layoutIndex);
                 }

modules/controlcenter/NavRail.qml

@@ -59,7 +59,7 @@ Item {
                 StateLayer {
                     id: normalWinState
 
-                    function onClicked(): void {
+                    onClicked: {
                         root.session.root.close();
                         WindowFactory.create(null, {
                             active: root.session.active,
@@ -173,7 +173,7 @@ Item {
             implicitHeight: icon.implicitHeight + Tokens.padding.small
 
             StateLayer {
-                function onClicked(): void {
+                onClicked: {
                     // Prevent tab switching during initial opening animation to avoid blank pages
                     if (!root.initialOpeningComplete) {
                         return;

modules/controlcenter/WindowTitle.qml

@@ -34,7 +34,7 @@ StyledRect {
         implicitHeight: closeIcon.implicitHeight + Tokens.padding.small
 
         StateLayer {
-            function onClicked(): void {
+            onClicked: {
                 QsWindow.window.destroy();
             }
 

modules/controlcenter/appearance/sections/ColorSchemeSection.qml

@@ -38,7 +38,7 @@ CollapsibleSection {
                 implicitHeight: schemeRow.implicitHeight + Tokens.padding.normal * 2
 
                 StateLayer {
-                    function onClicked(): void {
+                    onClicked: {
                         const name = modelData.name;
                         const flavour = modelData.flavour;
                         const schemeKey = `${name} ${flavour}`;

modules/controlcenter/appearance/sections/ColorVariantSection.qml

@@ -35,7 +35,7 @@ CollapsibleSection {
                 implicitHeight: variantRow.implicitHeight + Tokens.padding.normal * 2
 
                 StateLayer {
-                    function onClicked(): void {
+                    onClicked: {
                         const variant = modelData.variant;
 
                         Schemes.currentVariant = variant;

modules/controlcenter/appearance/sections/FontsSection.qml

@@ -58,7 +58,7 @@ CollapsibleSection {
                     implicitHeight: fontFamilySansRow.implicitHeight + Tokens.padding.normal * 2
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             rootPane.fontFamilySans = modelData;
                             rootPane.saveConfig();
                         }
@@ -139,7 +139,7 @@ CollapsibleSection {
                     implicitHeight: fontFamilyMonoRow.implicitHeight + Tokens.padding.normal * 2
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             rootPane.fontFamilyMono = modelData;
                             rootPane.saveConfig();
                         }
@@ -222,7 +222,7 @@ CollapsibleSection {
                     implicitHeight: fontFamilyMaterialRow.implicitHeight + Tokens.padding.normal * 2
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             rootPane.fontFamilyMaterial = modelData;
                             rootPane.saveConfig();
                         }

modules/controlcenter/audio/AudioPane.qml

@@ -97,7 +97,7 @@ Item {
                                     implicitHeight: outputRowLayout.implicitHeight + Tokens.padding.normal * 2
 
                                     StateLayer {
-                                        function onClicked(): void {
+                                        onClicked: {
                                             Audio.setAudioSink(modelData);
                                         }
                                     }
@@ -174,7 +174,7 @@ Item {
                                     implicitHeight: inputRowLayout.implicitHeight + Tokens.padding.normal * 2
 
                                     StateLayer {
-                                        function onClicked(): void {
+                                        onClicked: {
                                             Audio.setAudioSource(modelData);
                                         }
                                     }
@@ -318,7 +318,7 @@ Item {
                                     color: Audio.muted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
 
                                     StateLayer {
-                                        function onClicked(): void {
+                                        onClicked: {
                                             if (Audio.sink?.audio) {
                                                 Audio.sink.audio.muted = !Audio.sink.audio.muted;
                                             }
@@ -436,7 +436,7 @@ Item {
                                     color: Audio.sourceMuted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
 
                                     StateLayer {
-                                        function onClicked(): void {
+                                        onClicked: {
                                             if (Audio.source?.audio) {
                                                 Audio.source.audio.muted = !Audio.source.audio.muted;
                                             }
@@ -570,7 +570,7 @@ Item {
                                             color: Audio.getStreamMuted(modelData) ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
 
                                             StateLayer {
-                                                function onClicked(): void {
+                                                onClicked: {
                                                     Audio.setStreamMuted(modelData, !Audio.getStreamMuted(modelData));
                                                 }
                                             }

modules/controlcenter/bluetooth/Details.qml

@@ -239,7 +239,7 @@ StyledFlickable {
                                         scale: root.session.bt.editingDeviceName ? 1 : 0.5
 
                                         StateLayer {
-                                            function onClicked(): void {
+                                            onClicked: {
                                                 root.session.bt.editingDeviceName = false;
                                                 deviceNameEdit.text = Qt.binding(() => root.device?.name ?? "");
                                             }
@@ -276,7 +276,7 @@ StyledFlickable {
                                         color: Qt.alpha(Colours.palette.m3primary, root.session.bt.editingDeviceName ? 1 : 0)
 
                                         StateLayer {
-                                            function onClicked(): void {
+                                            onClicked: {
                                                 root.session.bt.editingDeviceName = !root.session.bt.editingDeviceName;
                                                 if (root.session.bt.editingDeviceName)
                                                     deviceNameEdit.forceActiveFocus();
@@ -527,7 +527,7 @@ StyledFlickable {
                 ]
 
                 StateLayer {
-                    function onClicked(): void {
+                    onClicked: {
                         root.session.bt.fabMenuOpen = false;
 
                         const name = fabMenuItem.modelData.name;
@@ -624,7 +624,7 @@ StyledFlickable {
             StateLayer {
                 id: fabState
 
-                function onClicked(): void {
+                onClicked: {
                     root.session.bt.fabMenuOpen = !root.session.bt.fabMenuOpen;
                 }
 

modules/controlcenter/bluetooth/DeviceList.qml

@@ -145,7 +145,7 @@ DeviceList {
             StateLayer {
                 id: stateLayer
 
-                function onClicked(): void {
+                onClicked: {
                     if (device.modelData)
                         root.session.bt.active = device.modelData;
                 }
@@ -222,7 +222,7 @@ DeviceList {
                     }
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             if (device.loading)
                                 return;
 

modules/controlcenter/bluetooth/Settings.qml

@@ -131,7 +131,7 @@ ColumnLayout {
                     implicitHeight: adapterPicker.implicitHeight + Tokens.padding.smaller * 2
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             adapterPickerButton.expanded = !adapterPickerButton.expanded;
                         }
 
@@ -209,7 +209,7 @@ ColumnLayout {
                                     implicitHeight: adapterInner.implicitHeight + Tokens.padding.normal * 2
 
                                     StateLayer {
-                                        function onClicked(): void {
+                                        onClicked: {
                                             adapterPickerButton.expanded = false;
                                             root.session.bt.currentAdapter = adapter.modelData;
                                         }
@@ -376,7 +376,7 @@ ColumnLayout {
                     scale: root.session.bt.editingAdapterName ? 1 : 0.5
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             root.session.bt.editingAdapterName = false;
                             adapterNameEdit.text = Qt.binding(() => root.session.bt.currentAdapter?.name ?? "");
                         }
@@ -413,7 +413,7 @@ ColumnLayout {
                     color: Qt.alpha(Colours.palette.m3primary, root.session.bt.editingAdapterName ? 1 : 0)
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             root.session.bt.editingAdapterName = !root.session.bt.editingAdapterName;
                             if (root.session.bt.editingAdapterName)
                                 adapterNameEdit.forceActiveFocus();

modules/controlcenter/components/WallpaperGrid.qml

@@ -40,7 +40,7 @@ GridView {
         height: root.cellHeight
 
         StateLayer {
-            function onClicked(): void {
+            onClicked: {
                 Wallpapers.setWallpaper(modelData.path);
             }
 

modules/controlcenter/launcher/LauncherPane.qml

@@ -328,7 +328,7 @@ Item {
                             }
 
                             StateLayer {
-                                function onClicked(): void {
+                                onClicked: {
                                     root.session.launcher.active = modelData;
                                 }
                             }

modules/controlcenter/network/EthernetList.qml

@@ -70,7 +70,7 @@ DeviceList {
             StateLayer {
                 id: stateLayer
 
-                function onClicked(): void {
+                onClicked: {
                     root.session.ethernet.active = modelData;
                 }
             }
@@ -147,7 +147,7 @@ DeviceList {
                     color: Qt.alpha(Colours.palette.m3primaryContainer, modelData.connected ? 1 : 0)
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             if (modelData.connected && modelData.connection) {
                                 Nmcli.disconnectEthernet(modelData.connection, () => {});
                             } else {

modules/controlcenter/network/VpnList.qml

@@ -109,7 +109,7 @@ ColumnLayout {
                 radius: Tokens.rounding.normal
 
                 StateLayer {
-                    function onClicked(): void {
+                    onClicked: {
                         if (root.session && root.session.vpn) {
                             root.session.vpn.active = modelData;
                         }
@@ -211,7 +211,7 @@ ColumnLayout {
                         color: Qt.alpha(Colours.palette.m3primaryContainer, VPN.connected && modelData.enabled ? 1 : 0)
 
                         StateLayer {
-                            function onClicked(): void {
+                            onClicked: {
                                 const clickedIndex = modelData.index;
 
                                 if (modelData.enabled) {
@@ -271,7 +271,7 @@ ColumnLayout {
                         color: "transparent"
 
                         StateLayer {
-                            function onClicked(): void {
+                            onClicked: {
                                 const providers = [];
                                 for (let i = 0; i < GlobalConfig.utilities.vpn.provider.length; i++) {
                                     if (i !== modelData.index) {

modules/controlcenter/network/WirelessList.qml

@@ -116,7 +116,7 @@ DeviceList {
             radius: Tokens.rounding.normal
 
             StateLayer {
-                function onClicked(): void {
+                onClicked: {
                     root.session.network.active = modelData;
                     if (modelData && modelData.ssid) {
                         root.checkSavedProfileForNetwork(modelData.ssid);
@@ -197,7 +197,7 @@ DeviceList {
                     color: Qt.alpha(Colours.palette.m3primaryContainer, modelData.active ? 1 : 0)
 
                     StateLayer {
-                        function onClicked(): void {
+                        onClicked: {
                             if (modelData.active) {
                                 Nmcli.disconnectFromNetwork();
                             } else {

modules/controlcenter/network/WirelessPasswordDialog.qml

@@ -288,7 +288,7 @@ Item {
                 }
 
                 StateLayer {
-                    function onClicked(): void {
+                    onClicked: {
                         passwordContainer.forceActiveFocus();
                     }
 

modules/dashboard/dash/Calendar.qml

@@ -51,11 +51,8 @@ CustomMouseArea {
                 StateLayer {
                     id: prevMonthStateLayer
 
-                    function onClicked(): void {
-                        root.dashState.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
-                    }
-
                     radius: Tokens.rounding.full
+                    onClicked: root.dashState.currentDate = new Date(root.currYear, root.currMonth - 1, 1)
                 }
 
                 MaterialIcon {
@@ -76,7 +73,7 @@ CustomMouseArea {
                 implicitHeight: monthYearDisplay.implicitHeight + Tokens.padding.small * 2
 
                 StateLayer {
-                    function onClicked(): void {
+                    onClicked: {
                         root.dashState.currentDate = new Date();
                     }
 
@@ -111,7 +108,7 @@ CustomMouseArea {
                 StateLayer {
                     id: nextMonthStateLayer
 
-                    function onClicked(): void {
+                    onClicked: {
                         root.dashState.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
                     }
 

modules/dashboard/dash/Media.qml

@@ -173,31 +173,22 @@ Item {
 
         spacing: Tokens.spacing.small
 
-        Control {
+        PlayerControl {
-            function onClicked(): void {
-                Players.active?.previous();
-            }
-
             icon: "skip_previous"
             canUse: Players.active?.canGoPrevious ?? false
+            onClicked: Players.active?.previous()
         }
 
-        Control {
+        PlayerControl {
-            function onClicked(): void {
-                Players.active?.togglePlaying();
-            }
-
             icon: Players.active?.isPlaying ? "pause" : "play_arrow"
             canUse: Players.active?.canTogglePlaying ?? false
+            onClicked: Players.active?.togglePlaying()
         }
 
-        Control {
+        PlayerControl {
-            function onClicked(): void {
-                Players.active?.next();
-            }
-
             icon: "skip_next"
             canUse: Players.active?.canGoNext ?? false
+            onClicked: Players.active?.next()
         }
     }
 
@@ -219,25 +210,21 @@ Item {
         fillMode: AnimatedImage.PreserveAspectFit
     }
 
-    component Control: StyledRect {
+    component PlayerControl: StyledRect {
         id: control
 
         required property string icon
         required property bool canUse
 
-        function onClicked(): void {
+        signal clicked
-        }
 
         implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + Tokens.padding.small
         implicitHeight: implicitWidth
 
         StateLayer {
-            function onClicked(): void {
-                control.onClicked();
-            }
-
             disabled: !control.canUse
             radius: Tokens.rounding.full
+            onClicked: control.clicked()
         }
 
         MaterialIcon {

modules/dashboard/dash/User.qml

@@ -69,12 +69,11 @@ Row {
                 opacity: parent.containsMouse ? 1 : 0
 
                 StateLayer {
-                    function onClicked(): void {
+                    color: Colours.palette.m3onPrimary
+                    onClicked: {
                         root.visibilities.launcher = false;
                         root.facePicker.open();
                     }
-
-                    color: Colours.palette.m3onPrimary
                 }
 
                 MaterialIcon {

modules/launcher/items/ActionItem.qml

@@ -15,11 +15,8 @@ Item {
     anchors.right: parent?.right
 
     StateLayer {
-        function onClicked(): void {
-            root.modelData?.onClicked(root.list);
-        }
-
         radius: Tokens.rounding.normal
+        onClicked: root.modelData?.onClicked(root.list)
     }
 
     Item {

modules/launcher/items/AppItem.qml

@@ -19,12 +19,11 @@ Item {
     anchors.right: parent?.right
 
     StateLayer {
-        function onClicked(): void {
+        radius: Tokens.rounding.normal
+        onClicked: {
             Apps.launch(root.modelData);
             root.visibilities.launcher = false;
         }
-
-        radius: Tokens.rounding.normal
     }
 
     Item {

modules/launcher/items/CalcItem.qml

@@ -28,11 +28,8 @@ Item {
     anchors.right: parent?.right
 
     StateLayer {
-        function onClicked(): void {
-            root.onClicked();
-        }
-
         radius: Tokens.rounding.normal
+        onClicked: root.onClicked()
     }
 
     RowLayout {
@@ -80,7 +77,7 @@ Item {
             StateLayer {
                 id: stateLayer
 
-                function onClicked(): void {
+                onClicked: {
                     Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.terminal, "fish", "-C", `exec qalc -i '${root.math}'`]);
                     root.list.visibilities.launcher = false;
                 }

modules/launcher/items/SchemeItem.qml

@@ -16,11 +16,8 @@ Item {
     anchors.right: parent?.right
 
     StateLayer {
-        function onClicked(): void {
-            root.modelData?.onClicked(root.list);
-        }
-
         radius: Tokens.rounding.normal
+        onClicked: root.modelData?.onClicked(root.list)
     }
 
     Item {

modules/launcher/items/VariantItem.qml

@@ -16,11 +16,8 @@ Item {
     anchors.right: parent?.right
 
     StateLayer {
-        function onClicked(): void {
-            root.modelData?.onClicked(root.list);
-        }
-
         radius: Tokens.rounding.normal
+        onClicked: root.modelData?.onClicked(root.list)
     }
 
     Item {

modules/launcher/items/WallpaperItem.qml

@@ -25,12 +25,11 @@ Item {
     implicitHeight: image.height + label.height + Tokens.spacing.small / 2 + Tokens.padding.large + Tokens.padding.normal
 
     StateLayer {
-        function onClicked(): void {
+        radius: Tokens.rounding.normal
+        onClicked: {
             Wallpapers.setWallpaper(root.modelData.path);
             root.visibilities.launcher = false;
         }
-
-        radius: Tokens.rounding.normal
     }
 
     Elevation {

modules/lock/Center.qml

@@ -135,7 +135,7 @@ ColumnLayout {
         }
 
         StateLayer {
-            function onClicked(): void {
+            onClicked: {
                 parent.forceActiveFocus();
             }
 
@@ -194,11 +194,8 @@ ColumnLayout {
                 radius: Tokens.rounding.full
 
                 StateLayer {
-                    function onClicked(): void {
-                        root.lock.pam.passwd.start();
-                    }
-
                     color: root.lock.pam.buffer ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                    onClicked: root.lock.pam.passwd.start()
                 }
 
                 MaterialIcon {

modules/lock/Media.qml

@@ -110,34 +110,31 @@ Item {
             spacing: Tokens.spacing.large
 
             PlayerControl {
-                function onClicked(): void {
+                icon: "skip_previous"
+                onClicked: {
                     if (Players.active?.canGoPrevious)
                         Players.active.previous();
                 }
-
-                icon: "skip_previous"
             }
 
             PlayerControl {
-                function onClicked(): void {
-                    if (Players.active?.canTogglePlaying)
-                        Players.active.togglePlaying();
-                }
-
                 animate: true
                 icon: active ? "pause" : "play_arrow"
                 colour: "Primary"
                 level: active ? 2 : 1
                 active: Players.active?.isPlaying ?? false
+                onClicked: {
+                    if (Players.active?.canTogglePlaying)
+                        Players.active.togglePlaying();
+                }
             }
 
             PlayerControl {
-                function onClicked(): void {
+                icon: "skip_next"
+                onClicked: {
                     if (Players.active?.canGoNext)
                         Players.active.next();
                 }
-
-                icon: "skip_next"
             }
         }
     }
@@ -151,8 +148,7 @@ Item {
         property string colour: "Secondary"
         property int level: 1
 
-        function onClicked(): void {
+        signal clicked
-        }
 
         Layout.preferredWidth: implicitWidth + (controlState.pressed ? Tokens.padding.normal * 2 : active ? Tokens.padding.small * 2 : 0)
         implicitWidth: controlIcon.implicitWidth + Tokens.padding.large * 2
@@ -171,11 +167,8 @@ Item {
         StateLayer {
             id: controlState
 
-            function onClicked(): void {
-                control.onClicked();
-            }
-
             color: control.active ? Colours.palette[`m3on${control.colour}`] : Colours.palette[`m3on${control.colour}Container`]
+            onClicked: control.clicked()
         }
 
         MaterialIcon {

modules/lock/NotifGroup.qml

@@ -176,11 +176,8 @@ StyledRect {
                     Layout.preferredWidth: root.notifs.length > Config.notifs.groupPreviewNum ? implicitWidth : 0
 
                     StateLayer {
-                        function onClicked(): void {
-                            root.expanded = !root.expanded;
-                        }
-
                         color: root.urgency === "critical" ? Colours.palette.m3onError : Colours.palette.m3onSurface
+                        onClicked: root.expanded = !root.expanded
                     }
 
                     RowLayout {

modules/notifications/Notification.qml

@@ -356,12 +356,9 @@ StyledRect {
                 implicitHeight: expandIcon.height
 
                 StateLayer {
-                    function onClicked() {
-                        root.expanded = !root.expanded;
-                    }
-
                     radius: Tokens.rounding.full
                     color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                    onClicked: root.expanded = !root.expanded
                 }
 
                 MaterialIcon {
@@ -487,12 +484,9 @@ StyledRect {
         implicitHeight: actionText.height + Tokens.padding.small * 2
 
         StateLayer {
-            function onClicked(): void {
-                action.modelData.invoke();
-            }
-
             radius: Tokens.rounding.full
             color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurface
+            onClicked: action.modelData.invoke()
         }
 
         StyledText {

modules/session/Content.qml

@@ -115,12 +115,9 @@ Column {
         }
 
         StateLayer {
-            function onClicked(): void {
-                Quickshell.execDetached(button.command);
-            }
-
             radius: parent.radius
             color: button.activeFocus ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+            onClicked: Quickshell.execDetached(button.command)
         }
 
         MaterialIcon {

modules/sidebar/NotifActionList.qml

@@ -131,7 +131,7 @@ Item {
                     StateLayer {
                         id: actionStateLayer
 
-                        function onClicked(): void {
+                        onClicked: {
                             if (action.modelData.isClose) {
                                 root.notif.close();
                             } else if (action.modelData.isCopy) {

modules/sidebar/NotifGroup.qml

@@ -204,11 +204,8 @@ StyledRect {
                     radius: Tokens.rounding.full
 
                     StateLayer {
-                        function onClicked(): void {
-                            root.toggleExpand(!root.expanded);
-                        }
-
                         color: root.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : Colours.palette.m3onSurface
+                        onClicked: root.toggleExpand(!root.expanded)
                     }
 
                     RowLayout {

modules/windowinfo/Buttons.qml

@@ -37,11 +37,8 @@ ColumnLayout {
             implicitHeight: moveToWsIcon.implicitHeight + Tokens.padding.small
 
             StateLayer {
-                function onClicked(): void {
-                    root.moveToWsExpanded = !root.moveToWsExpanded;
-                }
-
                 color: Colours.palette.m3onPrimary
+                onClicked: root.moveToWsExpanded = !root.moveToWsExpanded
             }
 
             MaterialIcon {
@@ -83,7 +80,7 @@ ColumnLayout {
                     readonly property int wsId: Math.floor((Hypr.activeWsId - 1) / 10) * 10 + index + 1
                     readonly property bool isCurrent: root.client?.workspace.id === wsId
 
-                    function onClicked(): void {
+                    onClicked: {
                         Hypr.dispatch(`movetoworkspace ${wsId},address:0x${root.client?.address}`);
                     }
 
@@ -109,13 +106,10 @@ ColumnLayout {
         spacing: root.client?.lastIpcObject.floating ? Tokens.spacing.normal : Tokens.spacing.small
 
         Button {
-            function onClicked(): void {
-                Hypr.dispatch(`togglefloating address:0x${root.client?.address}`);
-            }
-
             color: Colours.palette.m3secondaryContainer
             onColor: Colours.palette.m3onSecondaryContainer
             text: root.client?.lastIpcObject.floating ? qsTr("Tile") : qsTr("Float")
+            onClicked: Hypr.dispatch(`togglefloating address:0x${root.client?.address}`)
         }
 
         Loader {
@@ -126,24 +120,18 @@ ColumnLayout {
             Layout.rightMargin: active ? 0 : -parent.spacing
 
             sourceComponent: Button {
-                function onClicked(): void {
-                    Hypr.dispatch(`pin address:0x${root.client?.address}`);
-                }
-
                 color: Colours.palette.m3secondaryContainer
                 onColor: Colours.palette.m3onSecondaryContainer
                 text: root.client?.lastIpcObject.pinned ? qsTr("Unpin") : qsTr("Pin")
+                onClicked: Hypr.dispatch(`pin address:0x${root.client?.address}`)
             }
         }
 
         Button {
-            function onClicked(): void {
-                Hypr.dispatch(`killwindow address:0x${root.client?.address}`);
-            }
-
             color: Colours.palette.m3errorContainer
             onColor: Colours.palette.m3onErrorContainer
             text: qsTr("Kill")
+            onClicked: Hypr.dispatch(`killwindow address:0x${root.client?.address}`)
         }
     }
 
@@ -152,8 +140,7 @@ ColumnLayout {
         property alias disabled: stateLayer.disabled
         property alias text: label.text
 
-        function onClicked(): void {
+        signal clicked
-        }
 
         radius: Tokens.rounding.small
 
@@ -163,11 +150,8 @@ ColumnLayout {
         StateLayer {
             id: stateLayer
 
-            function onClicked(): void {
-                parent.onClicked();
-            }
-
             color: parent.onColor
+            onClicked: parent.clicked()
         }
 
         StyledText {