actioncenter: stack view setup

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterBodySliders.qml

@@ -18,7 +18,7 @@ ColumnLayout {
 
         WPanelIconButton {
             color: colBackground
-            property real animationValue: root.brightnessMonitor.brightness
+            property real animationValue: root.brightnessMonitor?.brightness ?? 0
             rotation: animationValue * 180
             scale: 0.8 + animationValue * 0.2
             iconName: "weather-sunny"
@@ -30,9 +30,9 @@ ColumnLayout {
         
         WSlider {
             Layout.fillWidth: true
-            value: root.brightnessMonitor.brightness
+            value: root.brightnessMonitor?.brightness ?? 0
             onMoved: {
-                root.brightnessMonitor.setBrightness(value)
+                root.brightnessMonitor?.setBrightness(value)
             }
         }
 

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterContent.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import qs
@@ -10,19 +11,28 @@ import qs.modules.waffle.looks
 WBarAttachedPanelContent {
     id: root
 
-    contentItem: ColumnLayout {
+    contentItem: StackView {
-        anchors.centerIn: parent
+        implicitWidth: currentItem.implicitWidth
-        spacing: 0
+        implicitHeight: currentItem.implicitHeight
 
-        ActionCenterBody {}
+        initialItem: ColumnLayout {
+            anchors.centerIn: parent
+            spacing: 0
 
-        Rectangle {
+            ActionCenterBody {}
-            Layout.fillHeight: false
+
-            Layout.fillWidth: true
+            Rectangle {
-            color: Looks.colors.bgPanelSeparator
+                Layout.fillHeight: false
-            implicitHeight: 1
+                Layout.fillWidth: true
+                color: Looks.colors.bgPanelSeparator
+                implicitHeight: 1
+            }
+
+            ActionCenterFooter {}
         }
 
-        ActionCenterFooter {}
+        Component.onCompleted: {
+            ActionCenterContext.stackView = this
+        }
     }
 }

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterContext.qml

@@ -0,0 +1,12 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+
+Singleton {
+    id: root
+    
+    property StackView stackView
+
+}

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 {
+            ToggleFragment {
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                inset: 0
-                backgroundOpacity: 0.8
-                checked: root.toggled
-                border.width: 1
-                border.color: root.colBorder
                 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 {
+                sourceComponent: ToggleFragment {
-                    inset: 0
-                    backgroundOpacity: 0.8
-                    checked: root.toggled
-                    border.width: 1
-                    border.color: root.colBorder
                     topLeftRadius: 0
                     bottomLeftRadius: 0
                     topRightRadius: Looks.radius.medium
                     bottomRightRadius: Looks.radius.medium
-                    contentItem: Item {
+                    iconName: "chevron-right"
-                        anchors.centerIn: parent
+                    onClicked: {
-                        FluentIcon {
+                        ActionCenterContext.stackView.push(root.menu)
-                            anchors.centerIn: parent
-                            icon: "chevron-right"
-                            implicitSize: 18
-                            monochrome: true
-                            color: root.colForeground
-                        }
                     }
                 }
             }
@@ -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
+            }
+        }
     }
 }

dots/.config/quickshell/ii/modules/waffle/looks/FluentIcon.qml

@@ -14,7 +14,7 @@ Kirigami.Icon {
     implicitWidth: implicitSize
     implicitHeight: implicitSize
 
-    source: `${Looks.iconsPath}/${root.icon}${filled ? "-filled" : ""}.svg`
+    source: icon === "" ? "" : `${Looks.iconsPath}/${root.icon}${filled ? "-filled" : ""}.svg`
     fallback: root.icon
     roundToIconSize: false
     color: Looks.colors.fg