action center: toggles barely working

2025-11-18 21:28:34 +01:00
parent f3bfe8a374
commit b650120fd4
85 changed files with 739 additions and 273 deletions
@@ -581,7 +581,7 @@ Singleton {
                    property bool leftAlignApps: false
                }
                property JsonObject actionCenter: JsonObject {
-                    property list<string> toggles: []
+                    property list<string> toggles: [ "network", "bluetooth", "easyEffects", "powerProfile", "idleInhibitor", "antiFlashbang", "nightLight", "darkMode", "cloudflareWarp", "mic", "audio", "musicRecognition", "notifications", "onScreenKeyboard", "gameMode", "screenSnip", "colorPicker" ]
                }
            }
        }
@@ -124,4 +124,15 @@ Singleton {
        var a = Math.max(0, Math.min(1, alpha));
        return Qt.rgba(c.r, c.g, c.b, a);
    }
+
+    /**
+     * Returns true if the color is considered "dark" (hslLightness < 0.5).
+     *
+     * @param {string} color - The color to check (any Qt.color-compatible string).
+     * @returns {boolean} True if dark, false otherwise.
+     */
+    function isDark(color) {
+        var c = Qt.color(color);
+        return c.hslLightness < 0.5;
+    }
 }
@@ -50,8 +50,7 @@ Scope {

    Process {
        id: detectPackageManagerProc
-        command: ["pidof", "pacman", "yay", "paru", "dnf", "zypper", "apt", "apx", "xbps", "flatpak", "snap", "apk",
-            "yum", "epsi", "pikman"]
+        command: ["bash", "-c", "pidof pacman yay paru dnf zypper apt apx xbps flatpak snap apk yum epsi pikman"]
        onExited: (exitCode, exitStatus) => {
            root.packageManagerRunning = (exitCode === 0);
        }
@@ -146,6 +146,8 @@ GroupButton {
            visible: root.expandedSize
            active: visible
            sourceComponent: Column {
+                spacing: -2
+
                StyledText {
                    anchors {
                        left: parent.left
@@ -22,7 +22,7 @@ DelegateChooser {

    role: "type"

-    DelegateChoice { roleValue: "network"; AndroidNetworkToggle {
+    DelegateChoice { roleValue: "antiFlashbang"; AndroidAntiFlashbangToggle {
        required property int index
        required property var modelData
        buttonIndex: root.startingIndex + index
@@ -34,7 +34,23 @@ DelegateChooser {
        cellSpacing: root.spacing
        cellSize: modelData.size
        onOpenMenu: {
-            root.openWifiDialog()
+            root.openNightLightDialog()
+        }
+    } }
+
+    DelegateChoice { roleValue: "audio"; AndroidAudioToggle {
+        required property int index
+        required property var modelData
+        buttonIndex: root.startingIndex + index
+        buttonData: modelData
+        editMode: root.editMode
+        expandedSize: modelData.size > 1
+        baseCellWidth: root.baseCellWidth
+        baseCellHeight: root.baseCellHeight
+        cellSpacing: root.spacing
+        cellSize: modelData.size
+        onOpenMenu: {
+            root.openAudioOutputDialog()
        }
    } }

@@ -54,61 +70,6 @@ DelegateChooser {
        }
    } }

-    DelegateChoice { roleValue: "idleInhibitor"; AndroidIdleInhibitorToggle {
-        required property int index
-        required property var modelData
-        buttonIndex: root.startingIndex + index
-        buttonData: modelData
-        editMode: root.editMode
-        expandedSize: modelData.size > 1
-        baseCellWidth: root.baseCellWidth
-        baseCellHeight: root.baseCellHeight
-        cellSpacing: root.spacing
-        cellSize: modelData.size
-    } }
-
-    DelegateChoice { roleValue: "easyEffects"; AndroidEasyEffectsToggle {
-        required property int index
-        required property var modelData
-        buttonIndex: root.startingIndex + index
-        buttonData: modelData
-        editMode: root.editMode
-        expandedSize: modelData.size > 1
-        baseCellWidth: root.baseCellWidth
-        baseCellHeight: root.baseCellHeight
-        cellSpacing: root.spacing
-        cellSize: modelData.size
-    } }
-
-    DelegateChoice { roleValue: "nightLight"; AndroidNightLightToggle {
-        required property int index
-        required property var modelData
-        buttonIndex: root.startingIndex + index
-        buttonData: modelData
-        editMode: root.editMode
-        expandedSize: modelData.size > 1
-        baseCellWidth: root.baseCellWidth
-        baseCellHeight: root.baseCellHeight
-        cellSpacing: root.spacing
-        cellSize: modelData.size
-        onOpenMenu: {
-            root.openNightLightDialog()
-        }
-    } }
-
-    DelegateChoice { roleValue: "darkMode"; AndroidDarkModeToggle {
-        required property int index
-        required property var modelData
-        buttonIndex: root.startingIndex + index
-        buttonData: modelData
-        editMode: root.editMode
-        expandedSize: modelData.size > 1
-        baseCellWidth: root.baseCellWidth
-        baseCellHeight: root.baseCellHeight
-        cellSpacing: root.spacing
-        cellSize: modelData.size
-    } }
-
    DelegateChoice { roleValue: "cloudflareWarp"; AndroidCloudflareWarpToggle {
        required property int index
        required property var modelData
@@ -122,32 +83,6 @@ DelegateChooser {
        cellSize: modelData.size
    } }

-    DelegateChoice { roleValue: "gameMode"; AndroidGameModeToggle {
-        required property int index
-        required property var modelData
-        buttonIndex: root.startingIndex + index
-        buttonData: modelData
-        editMode: root.editMode
-        expandedSize: modelData.size > 1
-        baseCellWidth: root.baseCellWidth
-        baseCellHeight: root.baseCellHeight
-        cellSpacing: root.spacing
-        cellSize: modelData.size
-    } }
-
-    DelegateChoice { roleValue: "screenSnip"; AndroidScreenSnipToggle {
-        required property int index
-        required property var modelData
-        buttonIndex: root.startingIndex + index
-        buttonData: modelData
-        editMode: root.editMode
-        expandedSize: modelData.size > 1
-        baseCellWidth: root.baseCellWidth
-        baseCellHeight: root.baseCellHeight
-        cellSpacing: root.spacing
-        cellSize: modelData.size
-    } }
-
    DelegateChoice { roleValue: "colorPicker"; AndroidColorPickerToggle {
        required property int index
        required property var modelData
@@ -161,7 +96,46 @@ DelegateChooser {
        cellSize: modelData.size
    } }

-    DelegateChoice { roleValue: "onScreenKeyboard"; AndroidOnScreenKeyboardToggle {
+    DelegateChoice { roleValue: "darkMode"; AndroidDarkModeToggle {
+        required property int index
+        required property var modelData
+        buttonIndex: root.startingIndex + index
+        buttonData: modelData
+        editMode: root.editMode
+        expandedSize: modelData.size > 1
+        baseCellWidth: root.baseCellWidth
+        baseCellHeight: root.baseCellHeight
+        cellSpacing: root.spacing
+        cellSize: modelData.size
+    } }
+
+    DelegateChoice { roleValue: "easyEffects"; AndroidEasyEffectsToggle {
+        required property int index
+        required property var modelData
+        buttonIndex: root.startingIndex + index
+        buttonData: modelData
+        editMode: root.editMode
+        expandedSize: modelData.size > 1
+        baseCellWidth: root.baseCellWidth
+        baseCellHeight: root.baseCellHeight
+        cellSpacing: root.spacing
+        cellSize: modelData.size
+    } }
+
+    DelegateChoice { roleValue: "gameMode"; AndroidGameModeToggle {
+        required property int index
+        required property var modelData
+        buttonIndex: root.startingIndex + index
+        buttonData: modelData
+        editMode: root.editMode
+        expandedSize: modelData.size > 1
+        baseCellWidth: root.baseCellWidth
+        baseCellHeight: root.baseCellHeight
+        cellSpacing: root.spacing
+        cellSize: modelData.size
+    } }
+
+    DelegateChoice { roleValue: "idleInhibitor"; AndroidIdleInhibitorToggle {
        required property int index
        required property var modelData
        buttonIndex: root.startingIndex + index
@@ -190,7 +164,20 @@ DelegateChooser {
        }
    } }

-    DelegateChoice { roleValue: "audio"; AndroidAudioToggle {
+    DelegateChoice { roleValue: "musicRecognition"; AndroidMusicRecognition {
+        required property int index
+        required property var modelData
+        buttonIndex: root.startingIndex + index
+        buttonData: modelData
+        editMode: root.editMode
+        expandedSize: modelData.size > 1
+        baseCellWidth: root.baseCellWidth
+        baseCellHeight: root.baseCellHeight
+        cellSpacing: root.spacing
+        cellSize: modelData.size
+    } }
+
+    DelegateChoice { roleValue: "network"; AndroidNetworkToggle {
        required property int index
        required property var modelData
        buttonIndex: root.startingIndex + index
@@ -202,7 +189,23 @@ DelegateChooser {
        cellSpacing: root.spacing
        cellSize: modelData.size
        onOpenMenu: {
-            root.openAudioOutputDialog()
+            root.openWifiDialog()
+        }
+    } }
+
+    DelegateChoice { roleValue: "nightLight"; AndroidNightLightToggle {
+        required property int index
+        required property var modelData
+        buttonIndex: root.startingIndex + index
+        buttonData: modelData
+        editMode: root.editMode
+        expandedSize: modelData.size > 1
+        baseCellWidth: root.baseCellWidth
+        baseCellHeight: root.baseCellHeight
+        cellSpacing: root.spacing
+        cellSize: modelData.size
+        onOpenMenu: {
+            root.openNightLightDialog()
        }
    } }

@@ -219,6 +222,19 @@ DelegateChooser {
        cellSize: modelData.size
    } }

+    DelegateChoice { roleValue: "onScreenKeyboard"; AndroidOnScreenKeyboardToggle {
+        required property int index
+        required property var modelData
+        buttonIndex: root.startingIndex + index
+        buttonData: modelData
+        editMode: root.editMode
+        expandedSize: modelData.size > 1
+        baseCellWidth: root.baseCellWidth
+        baseCellHeight: root.baseCellHeight
+        cellSpacing: root.spacing
+        cellSize: modelData.size
+    } }
+
    DelegateChoice { roleValue: "powerProfile"; AndroidPowerProfileToggle {
        required property int index
        required property var modelData
@@ -232,7 +248,7 @@ DelegateChooser {
        cellSize: modelData.size
    } }

-    DelegateChoice { roleValue: "musicRecognition"; AndroidMusicRecognition {
+    DelegateChoice { roleValue: "screenSnip"; AndroidScreenSnipToggle {
        required property int index
        required property var modelData
        buttonIndex: root.startingIndex + index
@@ -244,21 +260,4 @@ DelegateChooser {
        cellSpacing: root.spacing
        cellSize: modelData.size
    } }
-
-    DelegateChoice { roleValue: "antiFlashbang"; AndroidAntiFlashbangToggle {
-        required property int index
-        required property var modelData
-        buttonIndex: root.startingIndex + index
-        buttonData: modelData
-        editMode: root.editMode
-        expandedSize: modelData.size > 1
-        baseCellWidth: root.baseCellWidth
-        baseCellHeight: root.baseCellHeight
-        cellSpacing: root.spacing
-        cellSize: modelData.size
-        onOpenMenu: {
-            root.openNightLightDialog()
-        }
-    } }
-
 }
@@ -10,13 +10,6 @@ import qs.modules.waffle.looks
 Rectangle {
    id: root

-    property int currentPage: 0
-    property alias columns: grid.columns
-    property alias rows: grid.rows
-    readonly property int itemsPerPage: columns * rows
-    property list<string> toggles: Config.options.waffles.actionCenter.toggles
-    property list<string> togglesInCurrentPage: toggles.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage)
-
    Layout.fillHeight: true
    Layout.fillWidth: true
    color: Looks.colors.bgPanelBody
@@ -29,39 +22,10 @@ Rectangle {
        anchors.fill: parent
        spacing: 0

-        Item {
+        ActionCenterBodyToggles {
            id: togglesContainer
-            property real padding: 22
            Layout.fillWidth: true
            Layout.bottomMargin: -12
-            implicitHeight: grid.implicitHeight + padding * 2
-
-            GridLayout {
-                id: grid
-                anchors {
-                    fill: parent
-                    margins: parent.padding
-                }
-
-                columns: 3
-                rows: 2
-                rowSpacing: 12
-                columnSpacing: 12
-                uniformCellHeights: true
-                uniformCellWidths: true
-
-                Repeater {
-                    model: ScriptModel {
-                        values: root.togglesInCurrentPage
-                    }
-                    delegate: ActionCenterToggle {
-                        required property var modelData
-                        name: modelData
-                    }
-                }
-            }
-
-            // TODO: pages indicator on the right
        }

        Rectangle {
@@ -70,44 +34,10 @@ Rectangle {
            color: Looks.colors.bg1Border
        }

-        RowLayout {
+        ActionCenterBodySliders {
            Layout.margins: 12
            Layout.topMargin: 18
            Layout.bottomMargin: 14
-            spacing: 4
-
-            WPanelIconButton {
-                iconName: WIcons.volumeIcon
-                onClicked: {
-                    Audio.sink.audio.muted = !Audio.sink.audio.muted;
-                }
-            }
-            WSlider {
-                Layout.fillWidth: true
-                value: Audio.sink.audio.volume
-                onMoved: {
-                    Audio.sink.audio.volume = value;
-                }
-            }
-            WPanelIconButton {
-                contentItem: Item {
-                    anchors.centerIn: parent
-                    Row {
-                        anchors.centerIn: parent
-                        spacing: -1
-                        FluentIcon {
-                            anchors.verticalCenter: parent.verticalCenter
-                            implicitSize: 18
-                            icon: "settings"
-                        }
-                        FluentIcon {
-                            anchors.verticalCenter: parent.verticalCenter
-                            implicitSize: 12
-                            icon: "chevron-right"
-                        }
-                    }
-                }
-            }
        }
    }
 }
@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+RowLayout {
+    spacing: 4
+
+    WPanelIconButton {
+        iconName: WIcons.volumeIcon
+        onClicked: Audio.toggleMute();
+    }
+    
+    WSlider {
+        Layout.fillWidth: true
+        value: Audio.sink.audio.volume
+        onMoved: {
+            Audio.sink.audio.volume = value;
+        }
+    }
+
+    WPanelIconButton {
+        contentItem: Item {
+            anchors.centerIn: parent
+            Row {
+                anchors.centerIn: parent
+                spacing: -1
+                FluentIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    implicitSize: 18
+                    icon: "options"
+                }
+                FluentIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    implicitSize: 12
+                    icon: "chevron-right"
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,49 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.models.quickToggles
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter.toggles
+
+Item {
+    id: root
+
+    property int currentPage: 0
+    property alias columns: grid.columns
+    property alias rows: grid.rows
+    readonly property int itemsPerPage: columns * rows
+    property list<string> toggles: Config.options.waffles.actionCenter.toggles
+    property list<string> togglesInCurrentPage: toggles.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage)
+
+    property real padding: 22
+    implicitHeight: grid.implicitHeight + padding * 2
+
+    GridLayout {
+        id: grid
+        anchors {
+            fill: parent
+            margins: parent.padding
+        }
+
+        columns: 3
+        rows: 2
+        rowSpacing: 12
+        columnSpacing: 12
+        uniformCellHeights: true
+        uniformCellWidths: true
+
+        Repeater {
+            model: ScriptModel {
+                values: root.togglesInCurrentPage
+            }
+            delegate: ActionCenterTogglesDelegateChooser {}
+        }
+    }
+
+    // TODO: pages indicator on the right
+}
@@ -1,40 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import qs.modules.common
-import qs.modules.common.functions
-import qs.modules.waffle.looks
-
-// It should be perfectly fine to use just a Column here, but somehow
-// using ColumnLayout prevents weird opening anim stutter
-ColumnLayout { 
-    id: root
-
-    property alias name: toggleNameText.text
-
-    Rectangle {
-        Layout.fillWidth: true
-        implicitWidth: 96
-        implicitHeight: 48
-        color: "transparent"
-        border.width: 1
-        border.color: Looks.colors.bg0Border // ???
-        radius: Looks.radius.medium
-    }
-
-    Item {
-        implicitHeight: 36
-        Layout.fillWidth: true
-        WText {
-            id: toggleNameText
-            anchors {
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-                right: parent.right
-            }
-            horizontalAlignment: Text.AlignHCenter
-            elide: Text.ElideRight
-            text: "Toggle"
-        }
-    }
-}
@@ -0,0 +1,120 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.models.quickToggles
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+
+// It should be perfectly fine to use just a Column here, but somehow
+// using ColumnLayout prevents weird opening anim stutter
+ColumnLayout { 
+    id: root
+
+    required property QuickToggleModel toggleModel
+    property string name: toggleModel?.name ?? ""
+    property string statusText: (toggleModel?.hasStatusText) ? (toggleModel?.statusText || (toggled ? Translation.tr("Active") : Translation.tr("Inactive"))) : ""
+    property string tooltipText: toggleModel?.tooltipText ?? ""
+    required property string icon
+    property bool available: toggleModel?.available ?? true
+    property bool toggled: toggleModel?.toggled ?? false
+    property var mainAction: toggleModel?.mainAction ?? null
+    property var altAction: toggleModel?.hasMenu ? (() => root.openMenu()) : (toggleModel?.altAction ?? null)
+    property bool hasMenu: toggleModel?.hasMenu ?? false
+
+    property color colBackground: toggled ? Looks.colors.accent : Looks.colors.bg2
+    property color colBackgroundHovered: toggled ? Looks.colors.accentHover : Looks.colors.bg2Hover
+    property color colBackgroundActive: toggled ? Looks.colors.accentActive : Looks.colors.bg2Active
+    property color colBorder: toggled ? Looks.colors.accentHover : Looks.colors.bg0Border
+    property color colForeground: toggled ? Looks.colors.accentFg : Looks.colors.fg1
+
+    Rectangle {
+        Layout.fillWidth: true
+        implicitWidth: 96
+        implicitHeight: 48
+        color: root.colBackground
+        border.color: root.colBorder
+        border.width: 1
+        radius: Looks.radius.medium
+
+        RowLayout {
+            anchors.fill: parent
+            uniformCellSizes: true
+            spacing: 0
+
+            WButton {
+                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
+                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
+                    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
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Item {
+        id: toggleNameWidget
+        implicitHeight: 36
+        Layout.fillWidth: true
+        WText {
+            id: toggleNameText
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                right: parent.right
+            }
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight
+            text: root.name
+        }
+
+    }
+}
@@ -0,0 +1,136 @@
+pragma ComponentBehavior: Bound
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.models.quickToggles
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+DelegateChooser {
+    id: root
+
+    // role: "type" is implied by usage
+
+    DelegateChoice {
+        roleValue: "antiFlashbang"
+        ActionCenterToggleButton {
+            toggleModel: AntiFlashbangToggle {}
+            icon: "flash-off"
+        }
+    }
+    DelegateChoice {
+        roleValue: "audio"
+        ActionCenterToggleButton {
+            toggleModel: AudioToggle {}
+            icon: "speaker-2"
+        }
+    }
+    DelegateChoice {
+        roleValue: "bluetooth"
+        ActionCenterToggleButton {
+            toggleModel: BluetoothToggle {}
+            icon: WIcons.bluetoothIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "cloudflareWarp"
+        ActionCenterToggleButton {
+            toggleModel: CloudflareWarpToggle {}
+            icon: "globe-shield"
+        }
+    }
+    DelegateChoice {
+        roleValue: "colorPicker"
+        ActionCenterToggleButton {
+            toggleModel: ColorPickerToggle {}
+            icon: "eyedropper"
+        }
+    }
+    DelegateChoice {
+        roleValue: "darkMode"
+        ActionCenterToggleButton {
+            toggleModel: DarkModeToggle {}
+            icon: "dark-theme*"
+        }
+    }
+    DelegateChoice {
+        roleValue: "easyEffects"
+        ActionCenterToggleButton {
+            toggleModel: EasyEffectsToggle {}
+            icon: "device-eq"
+        }
+    }
+    DelegateChoice {
+        roleValue: "gameMode"
+        ActionCenterToggleButton {
+            toggleModel: GameModeToggle {}
+            icon: "games"
+        }
+    }
+    DelegateChoice {
+        roleValue: "idleInhibitor"
+        ActionCenterToggleButton {
+            toggleModel: IdleInhibitorToggle {}
+            icon: "drink-coffee"
+        }
+    }
+    DelegateChoice {
+        roleValue: "mic"
+        ActionCenterToggleButton {
+            toggleModel: MicToggle {}
+            icon: WIcons.micIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "musicRecognition"
+        ActionCenterToggleButton {
+            toggleModel: MusicRecognitionToggle {}
+            icon: "music-note-2"
+        }
+    }
+    DelegateChoice {
+        roleValue: "network"
+        ActionCenterToggleButton {
+            toggleModel: NetworkToggle {}
+            icon: WIcons.internetIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "nightLight"
+        ActionCenterToggleButton {
+            toggleModel: NightLightToggle {}
+            icon: WIcons.nightLightIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "notifications"
+        ActionCenterToggleButton {
+            toggleModel: NotificationToggle {}
+            icon: WIcons.notificationsIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "onScreenKeyboard"
+        ActionCenterToggleButton {
+            toggleModel: OnScreenKeyboardToggle {}
+            icon: GlobalStates.oskOpen ? "keyboard-dock" : "keyboard"
+        }
+    }
+    DelegateChoice {
+        roleValue: "powerProfile"
+        ActionCenterToggleButton {
+            toggleModel: PowerProfilesToggle {}
+            icon: WIcons.powerProfileIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "screenSnip"
+        ActionCenterToggleButton {
+            toggleModel: ScreenSnipToggle {}
+            icon: "cut"
+        }
+    }
+}
@@ -13,6 +13,7 @@ BarIconButton {
    padding: 4
    iconName: "arrow-sync"
    iconSize: 20 // Needed because the icon appears to have some padding
+    iconMonochrome: true
    tooltipText: Translation.tr("Get the latest features and security improvements with\nthe newest feature update.\n\n%1 packages").arg(Updates.count)

    onClicked: {
@@ -6,6 +6,7 @@ import qs.modules.waffle.looks
 Kirigami.Icon {
    id: root
    required property string icon
+    property bool filled: false
    property alias monochrome: root.isMask
    // Should be 16, but it appears the icons have some padding, 
    // Unlike the Windows-only Segoe UI icons, the open source FluentUI ones are hella small
@@ -13,7 +14,7 @@ Kirigami.Icon {
    implicitWidth: implicitSize
    implicitHeight: implicitSize

-    source: `${Looks.iconsPath}/${root.icon}.svg`
+    source: `${Looks.iconsPath}/${root.icon}${filled ? "-filled" : ""}.svg`
    fallback: root.icon
    roundToIconSize: false
    color: Looks.colors.fg
@@ -17,6 +17,12 @@ Singleton {

    property real backgroundTransparency: 0.17
    property real contentTransparency: 0.25
+    function applyBackgroundTransparency(col) {
+        return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency)
+    }
+    function applyContentTransparency(col) {
+        return ColorUtils.applyAlpha(col, 1 - root.contentTransparency)
+    }
    colors: QtObject {
        id: colors
        property color ambientShadow: ColorUtils.transparentize("#000000", 0.75)
@@ -41,8 +47,11 @@ Singleton {
        property color dangerActive: "#B62D1F"
        property color warning: "#FF9900"
        // property color accent: root.dark ? "#A5C6D8" : "#5377A3"
-        property color accent: Appearance.m3colors.m3primary
+        property color accent: Appearance.colors.colPrimary
+        property color accentHover: Appearance.colors.colPrimaryHover
+        property color accentActive: Appearance.colors.colPrimaryActive
        property color accentUnfocused: root.dark ? "#989898" : "#848484"
+        property color accentFg: ColorUtils.isDark(accent) ? "#FFFFFF" : "#000000"
    }

    radius: QtObject {
@@ -9,9 +9,13 @@ import qs.modules.waffle.looks
 Button {
    id: root

+    property color colBackground: ColorUtils.transparentize(Looks.colors.bg1)
    property color colBackgroundHover: Looks.colors.bg2Hover
    property color colBackgroundActive: Looks.colors.bg2Active
-    property color colBackground: ColorUtils.transparentize(Looks.colors.bg1)
+    property color colBackgroundToggled: Looks.colors.accent
+    property color colBackgroundToggledHover: Looks.colors.accentHover
+    property color colBackgroundToggledActive: Looks.colors.accentActive
+    property alias backgroundOpacity: backgroundRect.opacity

    property alias monochromeIcon: buttonIcon.monochrome
    property bool forceShowIcon: false
@@ -24,17 +28,33 @@ Button {
    bottomInset: inset
    leftInset: inset
    rightInset: inset
+    property alias radius: backgroundRect.radius
+    property alias topLeftRadius: backgroundRect.topLeftRadius
+    property alias topRightRadius: backgroundRect.topRightRadius
+    property alias bottomLeftRadius: backgroundRect.bottomLeftRadius
+    property alias bottomRightRadius: backgroundRect.bottomRightRadius
+    property alias border: backgroundRect.border
    horizontalPadding: 10
    verticalPadding: 6
    implicitHeight: contentItem.implicitHeight + verticalPadding * 2
    implicitWidth: contentItem.implicitWidth + horizontalPadding * 2

    background: Rectangle {
+        id: backgroundRect
        radius: Looks.radius.medium
        color: {
+            if (root.checked) {
+                if (root.down) {
+                    return root.colBackgroundToggledActive;
+                } else if (root.hovered && !root.down) {
+                    return root.colBackgroundToggledHover;
+                } else {
+                    return root.colBackgroundToggled;
+                }
+            }
            if (root.down) {
                return root.colBackgroundActive;
-            } else if ((root.hovered && !root.down) || root.checked) {
+            } else if (root.hovered && !root.down) {
                return root.colBackgroundHover;
            } else {
                return root.colBackground;
@@ -1,6 +1,7 @@
 pragma Singleton
 import QtQuick
 import Quickshell
+import Quickshell.Services.UPower
 import qs.services

 Singleton {
@@ -38,5 +39,24 @@ Singleton {
        if (volume < 0.5)
            return "speaker-1";
        return "speaker";
-    }    
+    }
+
+    property string micIcon: {
+        const muted = Audio.source?.audio.muted ?? false;
+        return muted ? "mic-off" : "mic";
+    }
+
+    property string bluetoothIcon: BluetoothStatus.connected ? "bluetooth-connected" : BluetoothStatus.enabled ? "bluetooth" : "bluetooth-disabled"
+
+    property string nightLightIcon: Hyprsunset.active ? "weather-moon" : "weather-moon-off"
+
+    property string notificationsIcon: Notifications.silent ? "alert-snooze" : "alert"
+
+    property string powerProfileIcon: {
+        switch(PowerProfiles.profile) {
+            case PowerProfile.PowerSaver: return "leaf-two";
+            case PowerProfile.Balanced: return "settings-cog-multiple";
+            case PowerProfile.Performance: return "fire";
+        }
+    }
 }