actioncenter: stack view setup

dots/.config/quickshell/ii/modules/waffle/actionCenter/toggles/ActionCenterToggleButton.qml

@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import qs
@@ -9,6 +10,7 @@ import qs.modules.common.models.quickToggles
 import qs.modules.common.functions
 import qs.modules.common.widgets
 import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
 
 // It should be perfectly fine to use just a Column here, but somehow
 // using ColumnLayout prevents weird opening anim stutter
@@ -25,6 +27,7 @@ ColumnLayout {
     property var mainAction: toggleModel?.mainAction ?? null
     property var altAction: toggleModel?.hasMenu ? (() => root.openMenu()) : (toggleModel?.altAction ?? null)
     property bool hasMenu: toggleModel?.hasMenu ?? false
+    property Item menu
 
     property color colBackground: toggled ? Looks.colors.accent : Looks.colors.bg2
     property color colBackgroundHovered: toggled ? Looks.colors.accentHover : Looks.colors.bg2Hover
@@ -46,54 +49,26 @@ ColumnLayout {
             anchors.fill: parent
             spacing: 0
 
-            WButton {
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                inset: 0
-                backgroundOpacity: 0.8
-                checked: root.toggled
-                border.width: 1
-                border.color: root.colBorder
+            ToggleFragment {
                 topLeftRadius: Looks.radius.medium
                 bottomLeftRadius: Looks.radius.medium
                 topRightRadius: root.hasMenu ? 0 : Looks.radius.medium
                 bottomRightRadius: root.hasMenu ? 0 : Looks.radius.medium
+                iconName: root.icon
                 onClicked: root.mainAction && root.mainAction()
-                contentItem: Item {
-                    anchors.centerIn: parent
-                    FluentIcon {
-                        anchors.centerIn: parent
-                        icon: root.icon
-                        implicitSize: 18
-                        monochrome: true
-                        filled: root.toggled
-                        color: root.colForeground
-                    }
-                }
             }
             FadeLoader {
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 shown: root.hasMenu
-                sourceComponent: WButton {
-                    inset: 0
-                    backgroundOpacity: 0.8
-                    checked: root.toggled
-                    border.width: 1
-                    border.color: root.colBorder
+                sourceComponent: ToggleFragment {
                     topLeftRadius: 0
                     bottomLeftRadius: 0
                     topRightRadius: Looks.radius.medium
                     bottomRightRadius: Looks.radius.medium
-                    contentItem: Item {
-                        anchors.centerIn: parent
-                        FluentIcon {
-                            anchors.centerIn: parent
-                            icon: "chevron-right"
-                            implicitSize: 18
-                            monochrome: true
-                            color: root.colForeground
-                        }
+                    iconName: "chevron-right"
+                    onClicked: {
+                        ActionCenterContext.stackView.push(root.menu)
                     }
                 }
             }
@@ -115,6 +90,29 @@ ColumnLayout {
             elide: Text.ElideRight
             text: root.name
         }
+    }
 
+    component ToggleFragment: WButton {
+        id: toggleFragment
+        required property string iconName
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        inset: 0
+        backgroundOpacity: 0.8
+        checked: root.toggled
+        border.width: 1
+        border.color: root.colBorder
+
+        contentItem: Item {
+            anchors.centerIn: parent
+            FluentIcon {
+                anchors.centerIn: parent
+                icon: toggleFragment.iconName
+                implicitSize: 18
+                monochrome: true
+                filled: root.toggled
+                color: root.colForeground
+            }
+        }
     }
 }