sidebar: android-style quick toggles & sliders (#2217)

Co-Authored-By: Vague Syntax <173799252+vaguesyntax@users.noreply.github.com>
2025-10-18 19:07:10 +02:00
parent 77ae119d32
commit 5d1a9b1e9c
35 changed files with 1895 additions and 90 deletions
@@ -352,7 +352,7 @@ Singleton {
            property JsonObject search: JsonObject {
                property int nonAppResultDelay: 30 // This prevents lagging when typing
                property string engineBaseUrl: "https://www.google.com/search?q="
-                property list<string> excludedSites: ["quora.com"]
+                property list<string> excludedSites: ["quora.com", "facebook.com"]
                property bool sloppy: false // Uses levenshtein distance based scoring instead of fuzzy sort. Very weird.
                property JsonObject prefix: JsonObject {
                    property bool showDefaultActionsWithoutPrefix: true
@@ -393,6 +393,28 @@ Singleton {
                    property bool visualize: false
                    property bool clicklessCornerEnd: true
                }
+
+                property JsonObject quickToggles: JsonObject {
+                    property string style: "android" // Options: classic, android
+                    property JsonObject android: JsonObject {
+                        property int columns: 5
+                        property list<var> toggles: [
+                            { type: "network", size: 2 },
+                            { type: "bluetooth", size: 2 },
+                            { type: "idleinhibitor", size: 1 },
+                            { type: "easyeffects", size: 1 },
+                            { type: "nightlight", size: 2 },
+                            { type: "darkmode", size: 2 }
+                        ]
+                    }
+                }
+
+                property JsonObject quickSliders: JsonObject {
+                    property bool enable: false
+                    property bool showMic: false
+                    property bool showVolume: true
+                    property bool showBrightness: true
+                }
            }

            property JsonObject time: JsonObject {
@@ -14,6 +14,7 @@ Rectangle {
    property real spacing: 5
    property real padding: 0
    property int clickIndex: rowLayout.clickIndex
+    property int childrenCount: rowLayout.children.length

    property real contentWidth: {
        let total = 0;
@@ -22,13 +22,15 @@ Button {
    property bool bounce: true
    property real baseWidth: contentItem.implicitWidth + horizontalPadding * 2
    property real baseHeight: contentItem.implicitHeight + verticalPadding * 2
-    property real clickedWidth: baseWidth + 20
+    property real clickedWidth: baseWidth + (isAtSide ? 10 : 20)
    property real clickedHeight: baseHeight
    property var parentGroup: root.parent
+    property int indexInParent: parentGroup?.children.indexOf(root) ?? 0
    property int clickIndex: parentGroup?.clickIndex ?? -1
+    property bool isAtSide: indexInParent === 0 || indexInParent === (parentGroup?.childrenCount - 1)

-    Layout.fillWidth: (clickIndex - 1 <= parentGroup?.children.indexOf(root) && parentGroup?.children.indexOf(root) <= clickIndex + 1)
-    Layout.fillHeight: (clickIndex - 1 <= parentGroup?.children.indexOf(root) && parentGroup?.children.indexOf(root) <= clickIndex + 1)
+    Layout.fillWidth: (clickIndex - 1 <= indexInParent && indexInParent <= clickIndex + 1)
+    Layout.fillHeight: (clickIndex - 1 <= indexInParent && indexInParent <= clickIndex + 1)
    implicitWidth: (root.down && bounce) ? clickedWidth : baseWidth
    implicitHeight: (root.down && bounce) ? clickedHeight : baseHeight

@@ -599,6 +599,86 @@ ContentPage {
            }
        }

+        ContentSubsection {
+            title: Translation.tr("Quick toggles")
+            
+            ConfigSelectionArray {
+                Layout.fillWidth: false
+                currentValue: Config.options.sidebar.quickToggles.style
+                onSelected: newValue => {
+                    Config.options.sidebar.quickToggles.style = newValue;
+                }
+                options: [
+                    {
+                        displayName: Translation.tr("Classic"),
+                        icon: "password_2",
+                        value: "classic"
+                    },
+                    {
+                        displayName: Translation.tr("Android"),
+                        icon: "action_key",
+                        value: "android"
+                    }
+                ]
+            }
+
+            ConfigSpinBox {
+                enabled: Config.options.sidebar.quickToggles.style === "android"
+                icon: "splitscreen_left"
+                text: Translation.tr("Columns")
+                value: Config.options.sidebar.quickToggles.android.columns
+                from: 1
+                to: 8
+                stepSize: 1
+                onValueChanged: {
+                    Config.options.sidebar.quickToggles.android.columns = value;
+                }
+            }
+        }
+
+        ContentSubsection {
+            title: Translation.tr("Sliders")
+
+            ConfigSwitch {
+                buttonIcon: "check"
+                text: Translation.tr("Enable")
+                checked: Config.options.sidebar.quickSliders.enable
+                onCheckedChanged: {
+                    Config.options.sidebar.quickSliders.enable = checked;
+                }
+            }
+            
+            ConfigSwitch {
+                buttonIcon: "brightness_6"
+                text: Translation.tr("Brightness")
+                enabled: Config.options.sidebar.quickSliders.enable
+                checked: Config.options.sidebar.quickSliders.showBrightness
+                onCheckedChanged: {
+                    Config.options.sidebar.quickSliders.showBrightness = checked;
+                }
+            }
+
+            ConfigSwitch {
+                buttonIcon: "volume_up"
+                text: Translation.tr("Volume")
+                enabled: Config.options.sidebar.quickSliders.enable
+                checked: Config.options.sidebar.quickSliders.showVolume
+                onCheckedChanged: {
+                    Config.options.sidebar.quickSliders.showVolume = checked;
+                }
+            }
+
+            ConfigSwitch {
+                buttonIcon: "mic"
+                text: Translation.tr("Microphone")
+                enabled: Config.options.sidebar.quickSliders.enable
+                checked: Config.options.sidebar.quickSliders.showMic
+                onCheckedChanged: {
+                    Config.options.sidebar.quickSliders.showMic = checked;
+                }
+            }
+        }
+
        ContentSubsection {
            title: Translation.tr("Corner open")
            tooltip: Translation.tr("Allows you to open sidebars by clicking or hovering screen corners regardless of bar position")
@@ -0,0 +1,111 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.UPower
+
+Rectangle {
+    id: root
+
+    property var screen: root.QsWindow.window?.screen
+    property var brightnessMonitor: Brightness.getMonitorForScreen(screen)
+
+    implicitWidth: contentItem.implicitWidth + root.horizontalPadding * 2
+    implicitHeight: contentItem.implicitHeight + root.verticalPadding * 2
+    radius: Appearance.rounding.normal
+    color: Appearance.colors.colLayer1
+    property real verticalPadding: 4
+    property real horizontalPadding: 12
+
+    Column {
+        id: contentItem
+        anchors {
+            fill: parent
+            leftMargin: root.horizontalPadding
+            rightMargin: root.horizontalPadding
+            topMargin: root.verticalPadding
+            bottomMargin: root.verticalPadding
+        }
+
+        Loader {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            visible: active
+            active: Config.options.sidebar.quickSliders.showBrightness
+            sourceComponent: QuickSlider {
+                materialSymbol: "brightness_6"
+                value: root.brightnessMonitor.brightness
+                onMoved: {
+                    root.brightnessMonitor.setBrightness(value)
+                }
+            }
+        }
+
+        Loader {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            visible: active
+            active: Config.options.sidebar.quickSliders.showVolume
+            sourceComponent: QuickSlider {
+                materialSymbol: "volume_up"
+                value: Audio.sink.audio.volume
+                onMoved: {
+                    Audio.sink.audio.volume = value
+                }
+            }
+        }
+
+        Loader {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            visible: active
+            active: Config.options.sidebar.quickSliders.showMic
+            sourceComponent: QuickSlider {
+                materialSymbol: "mic"
+                value: Audio.source.audio.volume
+                onMoved: {
+                    Audio.source.audio.volume = value
+                }
+            }
+        }
+    }
+
+    component QuickSlider: StyledSlider { 
+        id: quickSlider
+        required property string materialSymbol
+        configuration: StyledSlider.Configuration.M
+        stopIndicatorValues: []
+        
+        MaterialSymbol {
+            id: icon
+            property bool nearFull: quickSlider.value >= 0.9
+            anchors {
+                verticalCenter: parent.verticalCenter
+                right: nearFull ? quickSlider.handle.right : parent.right
+                rightMargin: quickSlider.nearFull ? 14 : 8
+            }
+            iconSize: 20
+            color: nearFull ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
+            text: quickSlider.materialSymbol
+
+            Behavior on color {
+                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+            Behavior on anchors.rightMargin {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+
+        }
+    }
+}
@@ -2,9 +2,6 @@ import qs
 import qs.services
 import qs.modules.common
 import qs.modules.common.widgets
-import "./quickToggles/"
-import "./wifiNetworks/"
-import "./bluetoothDevices/"
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
@@ -12,6 +9,11 @@ import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Hyprland

+import "./quickToggles/"
+import "./quickToggles/classicStyle/"
+import "./wifiNetworks/"
+import "./bluetoothDevices/"
+
 Item {
    id: root
    property int sidebarWidth: Appearance.sizes.sidebarWidth
@@ -19,6 +21,7 @@ Item {
    property string settingsQmlPath: Quickshell.shellPath("settings.qml")
    property bool showWifiDialog: false
    property bool showBluetoothDialog: false
+    property bool editMode: false

    Connections {
        target: GlobalStates
@@ -52,94 +55,36 @@ Item {
            anchors.margins: sidebarPadding
            spacing: sidebarPadding

-            RowLayout {
+            SystemButtonRow {
                Layout.fillHeight: false
-                spacing: 10
                Layout.margins: 10
                Layout.topMargin: 5
                Layout.bottomMargin: 0
-
-                CustomIcon {
-                    id: distroIcon
-                    width: 25
-                    height: 25
-                    source: SystemInfo.distroIcon
-                    colorize: true
-                    color: Appearance.colors.colOnLayer0
-                }
-
-                StyledText {
-                    font.pixelSize: Appearance.font.pixelSize.normal
-                    color: Appearance.colors.colOnLayer0
-                    text: Translation.tr("Up %1").arg(DateTime.uptime)
-                    textFormat: Text.MarkdownText
-                }
-
-                Item {
-                    Layout.fillWidth: true
-                }
-
-                ButtonGroup {
-                    QuickToggleButton {
-                        toggled: false
-                        buttonIcon: "restart_alt"
-                        onClicked: {
-                            Hyprland.dispatch("reload");
-                            Quickshell.reload(true);
-                        }
-                        StyledToolTip {
-                            text: Translation.tr("Reload Hyprland & Quickshell")
-                        }
-                    }
-                    QuickToggleButton {
-                        toggled: false
-                        buttonIcon: "settings"
-                        onClicked: {
-                            GlobalStates.sidebarRightOpen = false;
-                            Quickshell.execDetached(["qs", "-p", root.settingsQmlPath]);
-                        }
-                        StyledToolTip {
-                            text: Translation.tr("Settings")
-                        }
-                    }
-                    QuickToggleButton {
-                        toggled: false
-                        buttonIcon: "power_settings_new"
-                        onClicked: {
-                            GlobalStates.sessionOpen = true;
-                        }
-                        StyledToolTip {
-                            text: Translation.tr("Session")
-                        }
-                    }
-                }
            }

-            ButtonGroup {
-                Layout.alignment: Qt.AlignHCenter
-                spacing: 5
-                padding: 5
-                color: Appearance.colors.colLayer1
+            Loader {
+                id: slidersLoader
+                Layout.fillWidth: true
+                visible: active
+                active: {
+                    const configQuickSliders = Config.options.sidebar.quickSliders
+                    if (!configQuickSliders.enable) return false
+                    if (!configQuickSliders.showMic && !configQuickSliders.showVolume && !configQuickSliders.showBrightness) return false;
+                    return true;
+                }
+                sourceComponent: QuickSliders {}
+            }

-                NetworkToggle {
-                    altAction: () => {
-                        Network.enableWifi();
-                        Network.rescanWifi();
-                        root.showWifiDialog = true;
-                    }
+            LoaderedQuickPanelImplementation {
+                styleName: "classic"
+                sourceComponent: ClassicQuickPanel {}
+            }
+
+            LoaderedQuickPanelImplementation {
+                styleName: "android"
+                sourceComponent: AndroidQuickPanel {
+                    editMode: root.editMode
                }
-                BluetoothToggle {
-                    altAction: () => {
-                        Bluetooth.defaultAdapter.enabled = true;
-                        Bluetooth.defaultAdapter.discovering = true;
-                        root.showBluetoothDialog = true;
-                    }
-                }
-                NightLight {}
-                GameMode {}
-                IdleInhibitor {}
-                EasyEffectsToggle {}
-                CloudflareWarp {}
            }

            CenterWidgetGroup {
@@ -207,4 +152,94 @@ Item {
            }
        }
    }
+
+    component LoaderedQuickPanelImplementation: Loader {
+        id: quickPanelImplLoader
+        required property string styleName
+        Layout.alignment: item?.Layout.alignment ?? Qt.AlignHCenter
+        Layout.fillWidth: item?.Layout.fillWidth ?? false
+        visible: active
+        active: Config.options.sidebar.quickToggles.style === styleName
+        Connections {
+            target: quickPanelImplLoader.item
+            function onOpenWifiDialog() {
+                Network.enableWifi();
+                Network.rescanWifi();
+                root.showWifiDialog = true;
+            }
+            function onOpenBluetoothDialog() {
+                Bluetooth.defaultAdapter.enabled = true;
+                Bluetooth.defaultAdapter.discovering = true;
+                root.showBluetoothDialog = true;
+            }
+        }
+    }
+
+    component SystemButtonRow: RowLayout {
+        spacing: 10
+
+        CustomIcon {
+            id: distroIcon
+            width: 25
+            height: 25
+            source: SystemInfo.distroIcon
+            colorize: true
+            color: Appearance.colors.colOnLayer0
+        }
+
+        StyledText {
+            font.pixelSize: Appearance.font.pixelSize.normal
+            color: Appearance.colors.colOnLayer0
+            text: Translation.tr("Up %1").arg(DateTime.uptime)
+            textFormat: Text.MarkdownText
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        ButtonGroup {
+            QuickToggleButton {
+                toggled: root.editMode
+                visible: Config.options.sidebar.quickToggles.style === "android"
+                buttonIcon: "edit"
+                onClicked: root.editMode = !root.editMode
+                StyledToolTip {
+                    text: Translation.tr("Edit quick toggles") + (root.editMode ? Translation.tr("\nLMB to enable/disable\nRMB to toggle size\nScroll to swap position") : "")
+                }
+            }
+            QuickToggleButton {
+                toggled: false
+                buttonIcon: "restart_alt"
+                onClicked: {
+                    Hyprland.dispatch("reload");
+                    Quickshell.reload(true);
+                }
+                StyledToolTip {
+                    text: Translation.tr("Reload Hyprland & Quickshell")
+                }
+            }
+            QuickToggleButton {
+                toggled: false
+                buttonIcon: "settings"
+                onClicked: {
+                    GlobalStates.sidebarRightOpen = false;
+                    Quickshell.execDetached(["qs", "-p", root.settingsQmlPath]);
+                }
+                StyledToolTip {
+                    text: Translation.tr("Settings")
+                }
+            }
+            QuickToggleButton {
+                toggled: false
+                buttonIcon: "power_settings_new"
+                onClicked: {
+                    GlobalStates.sessionOpen = true;
+                }
+                StyledToolTip {
+                    text: Translation.tr("Session")
+                }
+            }
+        }
+    }
 }
@@ -0,0 +1,12 @@
+import QtQuick
+import qs.modules.common
+
+Rectangle {
+    id: root
+
+    radius: Appearance.rounding.normal
+    color: Appearance.colors.colLayer1
+
+    signal openWifiDialog()
+    signal openBluetoothDialog()
+}
@@ -0,0 +1,156 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Bluetooth
+
+import "./androidStyle/"
+
+AbstractQuickPanel {
+    id: root
+    property bool editMode: false
+    Layout.fillWidth: true
+    implicitHeight: (editMode ? contentItem.implicitHeight : usedRows.implicitHeight) + root.padding * 2
+
+    Behavior on implicitHeight {
+        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+    }
+
+    property real spacing: 6
+    property real padding: 6
+
+    readonly property list<string> availableToggleTypes: ["network", "bluetooth", "idleInhibitor", "easyEffects", "nightLight", "darkMode", "cloudflareWarp", "gameMode", "screenSnip", "colorPicker", "onScreenKeyboard", "mic", "audio", "notifications", "powerProfile"]
+    readonly property int columns: Config.options.sidebar.quickToggles.android.columns
+    readonly property list<var> toggles: Config.options.sidebar.quickToggles.android.toggles
+    readonly property list<var> toggleRows: toggleRowsForList(toggles)
+    readonly property list<var> unusedToggles: {
+        const types = availableToggleTypes.filter(type => !toggles.some(toggle => (toggle && toggle.type === type)))
+        return types.map(type => { return { type: type, size: 1 } })
+    }
+    readonly property list<var> unusedToggleRows: toggleRowsForList(unusedToggles)
+    readonly property real baseCellWidth: {
+        // This is the wrong calculation, but it looks correct in reality???
+        // (theoretically spacing should be multiplied by 1 column less)
+        const availableWidth = root.width - (root.padding * 2) - (root.spacing * (root.columns))
+        return availableWidth / root.columns
+    }
+    readonly property real baseCellHeight: 56
+
+    function toggleRowsForList(togglesList) {
+        var rows = [];
+        var row = [];
+        var totalSize = 0; // Total cols taken in current row
+        for (var i = 0; i < togglesList.length; i++) {
+            if (!togglesList[i]) continue;
+            if (totalSize + togglesList[i].size > columns) {
+                rows.push(row);
+                row = [];
+                totalSize = 0;
+            }
+            row.push(togglesList[i]);
+            totalSize += togglesList[i].size;
+        }
+        if (row.length > 0) {
+            rows.push(row);
+        }
+        return rows;
+    }
+
+    Column {
+        id: contentItem
+        anchors {
+            fill: parent
+            margins: root.padding
+        }
+        spacing: 12
+        
+        Column {
+            id: usedRows
+            spacing: root.spacing
+
+            Repeater {
+                id: usedRowsRepeater
+                model: ScriptModel {
+                    values: root.toggleRows
+                }
+                delegate: ButtonGroup {
+                    id: toggleRow
+                    required property var modelData
+                    required property int index
+                    property int startingIndex: {
+                        const rows = usedRowsRepeater.model.values;
+                        let sum = 0;
+                        for (let i = 0; i < index; i++) {
+                            sum += rows[i].length;
+                        }
+                        return sum;
+                    }
+                    spacing: root.spacing
+
+                    Repeater {
+                        model: ScriptModel {
+                            values: toggleRow.modelData
+                        }
+                        delegate: AndroidToggleDelegateChooser {
+                            startingIndex: toggleRow.startingIndex
+                            editMode: root.editMode
+                            baseCellWidth: root.baseCellWidth
+                            baseCellHeight: root.baseCellHeight
+                            spacing: root.spacing
+                            onOpenWifiDialog: root.openWifiDialog()
+                            onOpenBluetoothDialog: root.openBluetoothDialog()
+                        }
+                    }
+                }
+            }
+        }
+
+        FadeLoader {
+            shown: root.editMode
+            anchors {
+                left: parent.left
+                right: parent.right
+                leftMargin: root.baseCellHeight / 2
+                rightMargin: root.baseCellHeight / 2
+            }
+            sourceComponent: Rectangle {
+                implicitHeight: 1
+                color: Appearance.colors.colOutlineVariant
+            }
+        }
+
+        FadeLoader {
+            shown: root.editMode
+            sourceComponent: Column {
+                id: unusedRows
+                spacing: root.spacing
+
+                Repeater {
+                    model: ScriptModel {
+                        values: root.unusedToggleRows
+                    }
+                    delegate: ButtonGroup {
+                        id: unusedToggleRow
+                        required property var modelData
+                        spacing: root.spacing
+
+                        Repeater {
+                            model: ScriptModel {
+                                values: unusedToggleRow.modelData
+                            }
+                            delegate: AndroidToggleDelegateChooser {
+                                startingIndex: -1
+                                editMode: root.editMode
+                                baseCellWidth: root.baseCellWidth
+                                baseCellHeight: root.baseCellHeight
+                                spacing: root.spacing
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,39 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Bluetooth
+
+import "./classicStyle/"
+
+AbstractQuickPanel {
+    id: root
+    Layout.alignment: Qt.AlignHCenter
+    implicitWidth: buttonGroup.implicitWidth
+    implicitHeight: buttonGroup.implicitHeight
+    color: "transparent"
+
+    ButtonGroup {
+        id: buttonGroup
+        spacing: 5
+        padding: 5
+        color: Appearance.colors.colLayer1
+
+        NetworkToggle {
+            altAction: () => {
+                root.openWifiDialog();
+            }
+        }
+        BluetoothToggle {
+            altAction: () => {
+                root.openBluetoothDialog();
+            }
+        }
+        NightLight {}
+        GameMode {}
+        IdleInhibitor {}
+        EasyEffectsToggle {}
+        CloudflareWarp {}
+    }
+}
@@ -0,0 +1,18 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Audio")
+    statusText: toggled ? Translation.tr("Unmuted") : Translation.tr("Muted")
+    toggled: !Audio.sink?.audio?.muted
+    buttonIcon: Audio.sink?.audio?.muted ? "volume_off" : "volume_up"
+    onClicked: {
+        Audio.sink.audio.muted = !Audio.sink.audio.muted
+    }
+}
@@ -0,0 +1,27 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import QtQuick
+import Quickshell
+import Quickshell.Bluetooth
+
+AndroidQuickToggleButton {
+    id: root
+    
+    name: Translation.tr("Bluetooth")
+    statusText: BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("No device")
+
+    toggled: BluetoothStatus.enabled
+    buttonIcon: BluetoothStatus.connected ? "bluetooth_connected" : BluetoothStatus.enabled ? "bluetooth" : "bluetooth_disabled"
+    onClicked: {
+        Bluetooth.defaultAdapter.enabled = !Bluetooth.defaultAdapter?.enabled
+    }
+    StyledToolTip {
+        text: Translation.tr("%1 | Right-click to configure").arg(
+            (BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("Bluetooth"))
+            + (BluetoothStatus.activeDeviceCount > 1 ? ` +${BluetoothStatus.activeDeviceCount - 1}` : "")
+            )
+    }
+}
+
@@ -0,0 +1,80 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Cloudflare WARP")
+
+    toggled: false
+    buttonIcon: "cloud_lock"
+    
+    onClicked: {
+        if (toggled) {
+            root.toggled = false
+            Quickshell.execDetached(["warp-cli", "disconnect"])
+        } else {
+            root.toggled = true
+            Quickshell.execDetached(["warp-cli", "connect"])
+        }
+    }
+
+    Process {
+        id: connectProc
+        command: ["warp-cli", "connect"]
+        onExited: (exitCode, exitStatus) => {
+            if (exitCode !== 0) {
+                Quickshell.execDetached(["notify-send", 
+                    Translation.tr("Cloudflare WARP"), 
+                    Translation.tr("Connection failed. Please inspect manually with the <tt>warp-cli</tt> command")
+                    , "-a", "Shell"
+                ])
+            }
+        }
+    }
+
+    Process {
+        id: registrationProc
+        command: ["warp-cli", "registration", "new"]
+        onExited: (exitCode, exitStatus) => {
+            console.log("Warp registration exited with code and status:", exitCode, exitStatus)
+            if (exitCode === 0) {
+                connectProc.running = true
+            } else {
+                Quickshell.execDetached(["notify-send", 
+                    Translation.tr("Cloudflare WARP"), 
+                    Translation.tr("Registration failed. Please inspect manually with the <tt>warp-cli</tt> command"),
+                    "-a", "Shell"
+                ])
+            }
+        }
+    }
+
+    Process {
+        id: fetchActiveState
+        running: true
+        command: ["bash", "-c", "warp-cli status"]
+        stdout: StdioCollector {
+            id: warpStatusCollector
+            onStreamFinished: {
+                if (warpStatusCollector.text.length > 0) {
+                    root.visible = true
+                }
+                if (warpStatusCollector.text.includes("Unable")) {
+                    registrationProc.running = true
+                } else if (warpStatusCollector.text.includes("Connected")) {
+                    root.toggled = true
+                } else if (warpStatusCollector.text.includes("Disconnected")) {
+                    root.toggled = false
+                }
+            }
+        }
+    }
+    StyledToolTip {
+        text: Translation.tr("Cloudflare WARP (1.1.1.1)")
+    }
+}
@@ -0,0 +1,26 @@
+import qs
+import qs.modules.common
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Color Picker")
+    toggled: false
+    buttonIcon: "colorize"
+
+    onClicked: {
+        GlobalStates.sidebarRightOpen = false;
+        delayedActionTimer.start()
+    }
+    Timer {
+        id: delayedActionTimer
+        interval: 300
+        repeat: false 
+        onTriggered: {
+            Quickshell.execDetached(["hyprpicker", "-a"])
+        }
+    }
+}
@@ -0,0 +1,23 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Dark Mode")
+    statusText: Appearance.m3colors.darkmode ? Translation.tr("Dark") : Translation.tr("Light")
+
+    toggled: Appearance.m3colors.darkmode
+    buttonIcon: Appearance.m3colors.darkmode ? "contrast" : "light_mode"
+    
+    onClicked: event => {
+        if (Appearance.m3colors.darkmode) {
+            Quickshell.execDetached([Directories.wallpaperSwitchScriptPath, "--mode", "light", "--noswitch"]);
+        } else {
+            Quickshell.execDetached([Directories.wallpaperSwitchScriptPath, "--mode", "dark", "--noswitch"]);
+        }
+    }
+}
@@ -0,0 +1,32 @@
+import qs
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+    
+    name: Translation.tr("EasyEffects")
+
+    toggled: EasyEffects.active
+    buttonIcon: "graphic_eq"
+
+    Component.onCompleted: {
+        EasyEffects.fetchActiveState()
+    }
+
+    onClicked: {
+        EasyEffects.toggle()
+    }
+
+    altAction: () => {
+        Quickshell.execDetached(["bash", "-c", "flatpak run com.github.wwmm.easyeffects || easyeffects"])
+        GlobalStates.sidebarRightOpen = false
+    }
+
+    StyledToolTip {
+        text: Translation.tr("EasyEffects | Right-click to configure")
+    }
+}
+
@@ -0,0 +1,34 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Game mode")
+    toggled: toggled
+    buttonIcon: "gamepad"
+
+    onClicked: {
+        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"`])
+        } else {
+            Quickshell.execDetached(["hyprctl", "reload"])
+        }
+    }
+    Process {
+        id: fetchActiveState
+        running: true
+        command: ["bash", "-c", `test "$(hyprctl getoption animations:enabled -j | jq ".int")" -ne 0`]
+        onExited: (exitCode, exitStatus) => {
+            root.toggled = exitCode !== 0 // Inverted because enabled = nonzero exit
+        }
+    }
+    StyledToolTip {
+        text: Translation.tr("Game mode")
+    }
+}
@@ -0,0 +1,21 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import QtQuick
+
+AndroidQuickToggleButton {
+    id: root
+    
+    name: Translation.tr("Idle Inhibitor")
+
+    toggled: Idle.inhibit
+    buttonIcon: "coffee"
+    onClicked: {
+        Idle.toggleInhibit()
+    }
+    StyledToolTip {
+        text: Translation.tr("Keep system awake")
+    }
+}
+
@@ -0,0 +1,18 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Microphone")
+    statusText: toggled ? Translation.tr("Enabled") : Translation.tr("Muted")
+    toggled: !Audio.source?.audio?.muted
+    buttonIcon: Audio.source?.audio?.muted ? "mic_off" : "mic"
+    onClicked: {
+        Audio.source.audio.muted = !Audio.source.audio.muted
+    }
+}
@@ -0,0 +1,23 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import QtQuick
+
+AndroidQuickToggleButton {
+    id: root
+    
+    name: Translation.tr("Internet")
+    statusText: Network.networkName
+
+    toggled: Network.wifiStatus !== "disabled"
+    buttonIcon: Network.materialSymbol
+    onClicked: Network.toggleWifi()
+    altAction: () => {
+        root.openMenu()
+    }
+    StyledToolTip {
+        text: Translation.tr("%1 | Right-click to configure").arg(Network.networkName)
+    }
+}
+
@@ -0,0 +1,33 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+    
+    property bool auto: Config.options.light.night.automatic
+
+    name: Translation.tr("Night Light")
+    statusText: (auto ? Translation.tr("Auto, ") : "") + (toggled ? Translation.tr("Active") : Translation.tr("Inactive"))
+
+    toggled: Hyprsunset.active
+    buttonIcon: auto ? "night_sight_auto" : "bedtime"
+    onClicked: {
+        Hyprsunset.toggle()
+    }
+
+    altAction: () => {
+        Config.options.light.night.automatic = !Config.options.light.night.automatic
+    }
+
+    Component.onCompleted: {
+        Hyprsunset.fetchState()
+    }
+    
+    StyledToolTip {
+        text: Translation.tr("Night Light | Right-click to toggle Auto mode")
+    }
+}
+
@@ -0,0 +1,18 @@
+import qs
+import qs.modules.common
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Notifications")
+    statusText: toggled ? Translation.tr("Show") : Translation.tr("Silent")
+    toggled: !Notifications.silent
+    buttonIcon: toggled ? "notifications_active" : "notifications_paused"
+
+    onClicked: {
+        Notifications.silent = !Notifications.silent;
+    }
+}
@@ -0,0 +1,17 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Virtual Keyboard")
+    toggled: GlobalStates.oskOpen
+    buttonIcon: toggled ? "keyboard_hide" : "keyboard"
+    onClicked: {
+        GlobalStates.oskOpen = !GlobalStates.oskOpen
+    }
+}
@@ -0,0 +1,42 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+import Quickshell.Services.UPower
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Power Profile")
+    toggled: PowerProfiles.profile !== PowerProfile.Balanced
+    buttonIcon: switch(PowerProfiles.profile) {
+        case PowerProfile.PowerSaver: return "energy_savings_leaf"
+        case PowerProfile.Balanced: return "settings_slow_motion"
+        case PowerProfile.Performance: return "local_fire_department"
+    }
+    statusText: switch(PowerProfiles.profile) {
+                        case PowerProfile.PowerSaver: return "Power Saver"
+                        case PowerProfile.Balanced: return "Balanced"
+                        case PowerProfile.Performance: return "Performance"
+                    }
+    
+    onClicked: (event) => {
+        if (PowerProfiles.hasPerformanceProfile) {
+            switch(PowerProfiles.profile) {
+                case PowerProfile.PowerSaver: PowerProfiles.profile = PowerProfile.Balanced
+                break;
+                case PowerProfile.Balanced: PowerProfiles.profile = PowerProfile.Performance
+                break;
+                case PowerProfile.Performance: PowerProfiles.profile = PowerProfile.PowerSaver
+                break;
+            }
+        } else {
+            PowerProfiles.profile = PowerProfiles.profile == PowerProfile.Balanced ? PowerProfile.PowerSaver : PowerProfile.Balanced
+        }
+    }
+    StyledToolTip {
+        text: Translation.tr("Click to cycle through power profiles")
+    }
+}
@@ -0,0 +1,173 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+
+GroupButton {
+    id: root
+    
+    required property int buttonIndex
+    required property var buttonData
+    required property bool expandedSize
+    required property string buttonIcon
+    required property string name
+    property string statusText: toggled ? Translation.tr("Active") : Translation.tr("Inactive")
+
+    required property real baseCellWidth
+    required property real baseCellHeight
+    required property real cellSpacing
+    required property int cellSize
+    baseWidth: root.baseCellWidth * cellSize + cellSpacing * (cellSize - 1)
+    baseHeight: root.baseCellHeight
+
+    Behavior on baseWidth {
+        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+    }
+
+    property bool editMode: false
+
+    signal openMenu()
+
+    padding: 6
+    horizontalPadding: padding
+    verticalPadding: padding
+
+    colBackground: Appearance.colors.colLayer2
+    colBackgroundToggled: (altAction && expandedSize) ? Appearance.colors.colLayer2 : Appearance.colors.colPrimary
+    colBackgroundToggledHover: (altAction && expandedSize) ? Appearance.colors.colLayer2Hover : Appearance.colors.colPrimaryHover
+    colBackgroundToggledActive: (altAction && expandedSize) ? Appearance.colors.colLayer2Active : Appearance.colors.colPrimaryActive
+    buttonRadius: toggled ? Appearance.rounding.large : height / 2
+    buttonRadiusPressed: Appearance.rounding.normal
+    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
+
+    contentItem: RowLayout {
+        id: contentItem
+        spacing: 4
+        anchors {
+            centerIn: root.expandedSize ? undefined : parent
+            fill: root.expandedSize ? parent : undefined
+            leftMargin: root.horizontalPadding
+            rightMargin: root.horizontalPadding
+        }
+
+        Rectangle {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.fillHeight: true
+            Layout.topMargin: root.verticalPadding
+            Layout.bottomMargin: root.verticalPadding
+            implicitWidth: height
+            radius: root.radius - root.verticalPadding
+            color: {
+                const baseColor = root.toggled ? Appearance.colors.colPrimary : Appearance.colors.colLayer3
+                const transparentizeAmount = (root.altAction && root.expandedSize) ? 0 : 1
+                return ColorUtils.transparentize(baseColor, transparentizeAmount)
+            }
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                fill: root.toggled ? 1 : 0
+                iconSize: Appearance.font.pixelSize.huge
+                color: root.colIcon
+                text: root.buttonIcon
+            }
+        }
+
+        Loader {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+            visible: root.expandedSize
+            active: visible
+            sourceComponent: Column {
+                StyledText {
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    font.pixelSize: Appearance.font.pixelSize.smallie
+                    color: root.colText
+                    elide: Text.ElideRight
+                    text: root.name
+                }
+
+                StyledText {
+                    visible: root.statusText
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    font {
+                        pixelSize: Appearance.font.pixelSize.smaller
+                        weight: Font.Light
+                    }
+                    color: root.colText
+                    elide: Text.ElideRight
+                    text: root.statusText
+                }
+            }
+        }
+    }
+
+    MouseArea { // Blocking MouseArea for edit interactions
+        id: editModeInteraction
+        visible: root.editMode
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        acceptedButtons: Qt.AllButtons
+
+        function toggleEnabled() {
+            const index = root.buttonIndex;
+            const toggleList = Config.options.sidebar.quickToggles.android.toggles;
+            const buttonType = root.buttonData.type;
+            if (!toggleList.find(toggle => toggle.type === buttonType)) {
+                toggleList.push({ type: buttonType, size: 1 });
+            } else {
+                toggleList.splice(index, 1);
+            }
+        }
+
+        function toggleSize() {
+            const index = root.buttonIndex;
+            const toggleList = Config.options.sidebar.quickToggles.android.toggles;
+            const buttonType = root.buttonData.type;
+            if (!toggleList.find(toggle => toggle.type === buttonType)) return;
+            toggleList[index].size = 3 - toggleList[index].size; // Alternate between 1 and 2
+        }
+
+        function movePositionBy(offset) {
+            const index = root.buttonIndex;
+            const toggleList = Config.options.sidebar.quickToggles.android.toggles;
+            const buttonType = root.buttonData.type;
+            const targetIndex = index + offset;
+            if (targetIndex < 0 || targetIndex >= toggleList.length) return;
+            const temp = toggleList[index];
+            toggleList[index] = toggleList[targetIndex];
+            toggleList[targetIndex] = temp;
+        }
+
+        onReleased: (event) => {
+            if (event.button === Qt.LeftButton)
+                toggleEnabled();
+        }
+        onPressed: (event) => {
+            if (event.button === Qt.RightButton) toggleSize();
+        }
+        onPressAndHold: (event) => { // Also toggle size
+            toggleSize();
+        }
+        onWheel: (event) => {
+            const index = root.buttonIndex;
+            const toggleList = Config.options.sidebar.quickToggles.android.toggles;
+            const buttonType = root.buttonData.type;
+            if (event.angleDelta.y < 0) { // Move to right
+                movePositionBy(1);
+            } else if (event.angleDelta.y > 0) { // Move to left
+                movePositionBy(-1);
+            }
+            event.accepted = true;
+        }
+    }
+}
@@ -0,0 +1,27 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+AndroidQuickToggleButton {
+    id: root
+
+    name: Translation.tr("Screen snip")
+    toggled: false
+    buttonIcon: "screenshot_region"
+
+    onClicked: {
+        GlobalStates.sidebarRightOpen = false;
+        delayedActionTimer.start()
+    }
+    Timer {
+        id: delayedActionTimer
+        interval: 300
+        repeat: false
+        onTriggered: {
+            Quickshell.execDetached(["qs", "-p", Quickshell.shellPath("screenshot.qml")])
+        }
+    }
+}
@@ -0,0 +1,225 @@
+pragma ComponentBehavior: Bound
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Bluetooth
+
+import "./androidStyle/"
+
+DelegateChooser {
+    id: root
+    property bool editMode: false
+    required property real baseCellWidth
+    required property real baseCellHeight
+    required property real spacing
+    required property int startingIndex
+    signal openWifiDialog()
+    signal openBluetoothDialog()
+
+    role: "type"
+
+    DelegateChoice { roleValue: "network"; AndroidNetworkToggle {
+        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
+        altAction: () => {
+            root.openWifiDialog()
+        }
+    } }
+
+    DelegateChoice { roleValue: "bluetooth"; AndroidBluetoothToggle {
+        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
+        altAction: () => {
+            root.openBluetoothDialog()
+        }
+    } }
+
+    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
+    } }
+
+    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
+        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: "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
+        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: "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: "mic"; AndroidMicToggle {
+        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: "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
+    } }
+
+    DelegateChoice { roleValue: "notifications"; AndroidNotificationToggle {
+        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
+        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
+    } }
+
+}
@@ -8,8 +8,8 @@ import Quickshell.Hyprland

 QuickToggleButton {
    id: root
-    toggled: EasyEffects.active
    visible: EasyEffects.available
+    toggled: EasyEffects.active
    buttonIcon: "instant_mix"

    Component.onCompleted: {
@@ -6,8 +6,7 @@ import Quickshell.Io

 QuickToggleButton {
    id: nightLightButton
-    property bool enabled: Hyprsunset.active
-    toggled: enabled
+    toggled: Hyprsunset.active
    buttonIcon: Config.options.light.night.automatic ? "night_sight_auto" : "bedtime"
    onClicked: {
        Hyprsunset.toggle()