sidebar: make quick toggle behave more similar to on android

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidAudioToggle.qml

@@ -12,7 +12,7 @@ AndroidQuickToggleButton {
     statusText: toggled ? Translation.tr("Unmuted") : Translation.tr("Muted")
     toggled: !Audio.sink?.audio?.muted
     buttonIcon: Audio.sink?.audio?.muted ? "volume_off" : "volume_up"
-    onClicked: {
+    mainAction: () => {
         Audio.sink.audio.muted = !Audio.sink.audio.muted
     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidBluetoothToggle.qml

@@ -14,7 +14,7 @@ AndroidQuickToggleButton {
 
     toggled: BluetoothStatus.enabled
     buttonIcon: BluetoothStatus.connected ? "bluetooth_connected" : BluetoothStatus.enabled ? "bluetooth" : "bluetooth_disabled"
-    onClicked: {
+    mainAction: () => {
         Bluetooth.defaultAdapter.enabled = !Bluetooth.defaultAdapter?.enabled
     }
     altAction: () => {

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidCloudflareWarpToggle.qml

@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
     toggled: false
     buttonIcon: "cloud_lock"
     
-    onClicked: {
+    mainAction: () => {
         if (toggled) {
             root.toggled = false
             Quickshell.execDetached(["warp-cli", "disconnect"])

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidColorPickerToggle.qml

@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
     toggled: false
     buttonIcon: "colorize"
 
-    onClicked: {
+    mainAction: () => {
         GlobalStates.sidebarRightOpen = false;
         delayedActionTimer.start()
     }

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidDarkModeToggle.qml

@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
     toggled: Appearance.m3colors.darkmode
     buttonIcon: "contrast"
     
-    onClicked: event => {
+    mainAction: () => {
         if (Appearance.m3colors.darkmode) {
             Quickshell.execDetached([Directories.wallpaperSwitchScriptPath, "--mode", "light", "--noswitch"]);
         } else {

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidEasyEffectsToggle.qml

@@ -16,7 +16,7 @@ AndroidQuickToggleButton {
         EasyEffects.fetchActiveState()
     }
 
-    onClicked: {
+    mainAction: () => {
         EasyEffects.toggle()
     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidGameModeToggle.qml

@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
     toggled: toggled
     buttonIcon: "gamepad"
 
-    onClicked: {
+    mainAction: () => {
         root.toggled = !root.toggled
         if (root.toggled) {
             Quickshell.execDetached(["bash", "-c", `hyprctl --batch "keyword animations:enabled 0; keyword decoration:shadow:enabled 0; keyword decoration:blur:enabled 0; keyword general:gaps_in 0; keyword general:gaps_out 0; keyword general:border_size 1; keyword decoration:rounding 0; keyword general:allow_tearing 1"`])

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidIdleInhibitorToggle.qml

@@ -11,7 +11,7 @@ AndroidQuickToggleButton {
 
     toggled: Idle.inhibit
     buttonIcon: "coffee"
-    onClicked: {
+    mainAction: () => {
         Idle.toggleInhibit()
     }
     StyledToolTip {

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidMicToggle.qml

@@ -12,7 +12,7 @@ AndroidQuickToggleButton {
     statusText: toggled ? Translation.tr("Enabled") : Translation.tr("Muted")
     toggled: !Audio.source?.audio?.muted
     buttonIcon: Audio.source?.audio?.muted ? "mic_off" : "mic"
-    onClicked: {
+    mainAction: () => {
         Audio.source.audio.muted = !Audio.source.audio.muted
     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidMusicRecognition.qml

@@ -21,7 +21,7 @@ AndroidQuickToggleButton {
         text: Translation.tr("Recognize music | Right-click to toggle source")
     }
 
-    onClicked: {
+    mainAction: () => {
         SongRec.toggleRunning()
     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidNetworkToggle.qml

@@ -12,7 +12,7 @@ AndroidQuickToggleButton {
 
     toggled: Network.wifiStatus !== "disabled"
     buttonIcon: Network.materialSymbol
-    onClicked: Network.toggleWifi()
+    mainAction: () => Network.toggleWifi()
     altAction: () => {
         root.openMenu()
     }

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidNightLightToggle.qml

@@ -14,7 +14,8 @@ AndroidQuickToggleButton {
 
     toggled: Hyprsunset.active
     buttonIcon: auto ? "night_sight_auto" : "bedtime"
-    onClicked: {
+    
+    mainAction: () => {
         Hyprsunset.toggle()
     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidNotificationToggle.qml

@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
     toggled: !Notifications.silent
     buttonIcon: toggled ? "notifications_active" : "notifications_paused"
 
-    onClicked: {
+    mainAction: () => {
         Notifications.silent = !Notifications.silent;
     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidOnScreenKeyboardToggle.qml

@@ -11,7 +11,8 @@ AndroidQuickToggleButton {
     name: Translation.tr("Virtual Keyboard")
     toggled: GlobalStates.oskOpen
     buttonIcon: toggled ? "keyboard_hide" : "keyboard"
-    onClicked: {
+    
+    mainAction: () => {
         GlobalStates.oskOpen = !GlobalStates.oskOpen
     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidPowerProfileToggle.qml

@@ -22,7 +22,7 @@ AndroidQuickToggleButton {
         case PowerProfile.Performance: return "Performance"
     }
     
-    onClicked: (event) => {
+    mainAction: () => {
         if (PowerProfiles.hasPerformanceProfile) {
             switch(PowerProfiles.profile) {
                 case PowerProfile.PowerSaver: PowerProfiles.profile = PowerProfile.Balanced

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidQuickToggleButton.qml

@@ -13,6 +13,7 @@ GroupButton {
     required property bool expandedSize
     required property string buttonIcon
     required property string name
+    required property var mainAction
     property string statusText: toggled ? Translation.tr("Active") : Translation.tr("Inactive")
 
     required property real baseCellWidth
@@ -54,6 +55,11 @@ GroupButton {
     property color colText: (toggled && !(altAction && expandedSize)) ? Appearance.colors.colOnPrimary : Appearance.colors.colOnLayer2
     property color colIcon: expandedSize ? (root.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnLayer3) : colText
 
+    onClicked: {
+        if (root.expandedSize && root.altAction) root.altAction();
+        else root.mainAction();
+    }
+
     contentItem: RowLayout {
         id: contentItem
         spacing: 4
@@ -64,35 +70,63 @@ GroupButton {
             rightMargin: root.horizontalPadding
         }
 
-        Rectangle {
+        // Icon
+        MouseArea {
+            id: iconMouseArea
+            hoverEnabled: true
+            acceptedButtons: (root.expandedSize && root.altAction) ? Qt.LeftButton : Qt.NoButton
             Layout.alignment: Qt.AlignHCenter
             Layout.fillHeight: true
             Layout.topMargin: root.verticalPadding
             Layout.bottomMargin: root.verticalPadding
-            implicitWidth: height
+            implicitHeight: iconBackground.implicitHeight
-            radius: root.radius - root.verticalPadding
+            implicitWidth: iconBackground.implicitWidth
-            color: {
+            cursorShape: Qt.PointingHandCursor
-                const baseColor = root.toggled ? Appearance.colors.colPrimary : Appearance.colors.colLayer3
-                const transparentizeAmount = (root.altAction && root.expandedSize) ? 0 : 1
-                return ColorUtils.transparentize(baseColor, transparentizeAmount)
-            }
 
-            Behavior on radius {
+            onClicked: root.mainAction()
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
-            }
-            Behavior on color {
-                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
-            }
 
-            MaterialSymbol {
+            Rectangle {
-                anchors.centerIn: parent
+                id: iconBackground
-                fill: root.toggled ? 1 : 0
+                anchors.fill: parent
-                iconSize: root.expandedSize ? 22 : 24
+                implicitWidth: height
-                color: root.colIcon
+                radius: root.radius - root.verticalPadding
-                text: root.buttonIcon
+                color: {
+                    const baseColor = root.toggled ? Appearance.colors.colPrimary : Appearance.colors.colLayer3
+                    const transparentizeAmount = (root.altAction && root.expandedSize) ? 0 : 1
+                    return ColorUtils.transparentize(baseColor, transparentizeAmount)
+                }
+
+                Behavior on radius {
+                    animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                }
+                Behavior on color {
+                    animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                }
+
+                MaterialSymbol {
+                    anchors.centerIn: parent
+                    fill: root.toggled ? 1 : 0
+                    iconSize: root.expandedSize ? 22 : 24
+                    color: root.colIcon
+                    text: root.buttonIcon
+                }
+
+                // State layer
+                Loader {
+                    anchors.fill: parent
+                    active: (root.expandedSize && root.altAction)
+                    sourceComponent: Rectangle {
+                        radius: iconBackground.radius
+                        color: ColorUtils.transparentize(root.colIcon, iconMouseArea.containsPress ? 0.88 : iconMouseArea.containsMouse ? 0.95 : 1)
+                        Behavior on color {
+                            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                        }
+                    }
+                }
             }
         }
 
+        // Text column for expanded size
         Loader {
             Layout.alignment: Qt.AlignVCenter
             Layout.fillWidth: true

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidScreenSnipToggle.qml

@@ -14,7 +14,7 @@ AndroidQuickToggleButton {
     toggled: false
     buttonIcon: "screenshot_region"
 
-    onClicked: {
+    mainAction: () => {
         GlobalStates.sidebarRightOpen = false;
         delayedActionTimer.start()
     }