action center: toggle pages

dots/.config/quickshell/ii/assets/icons/fluent/caret-down-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.102 8c-1.074 0-1.648 1.265-.94 2.073l5.521 6.31a1.75 1.75 0 0 0 2.634 0l5.522-6.31c.707-.808.133-2.073-.94-2.073H6.101Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/caret-down.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.161 10.073C4.454 9.265 5.028 8 6.102 8h11.796c1.074 0 1.648 1.265.941 2.073l-5.522 6.31a1.75 1.75 0 0 1-2.634 0l-5.522-6.31ZM6.653 9.5l5.159 5.896a.25.25 0 0 0 .376 0l5.16-5.896H6.652Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/caret-up-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.102 16.981c-1.074 0-1.648-1.265-.94-2.073l5.521-6.31a1.75 1.75 0 0 1 2.634 0l5.522 6.31c.707.809.133 2.073-.94 2.073H6.101Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/caret-up.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.161 14.908c-.707.809-.133 2.073.941 2.073h11.796c1.074 0 1.648-1.265.941-2.073l-5.522-6.31a1.75 1.75 0 0 0-2.634 0l-5.522 6.31Zm1.492.573 5.159-5.896a.25.25 0 0 1 .376 0l5.16 5.896H6.652Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/cloudflare-filled.svg

@@ -0,0 +1 @@
+../cloudflare-dns-symbolic.svg

dots/.config/quickshell/ii/assets/icons/fluent/cloudflare.svg

@@ -0,0 +1 @@
+../cloudflare-dns-symbolic.svg

dots/.config/quickshell/ii/assets/icons/fluent/flash-on-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/flash-on.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Zm4.745-5.487a.75.75 0 0 0 .711.987h3.74l-8.824 9.196 1.316-5.264a.75.75 0 0 0-.727-.932h-2.51l2.57-9h5.394l-1.67 5.013Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/leaf-two (1).svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000">
-<path d="M2.00244 4.70455V9C2.00244 12.3137 4.68873 15 8.00244 15C8.10042 15 8.19784 14.9977 8.29467 14.993C8.55723 15.8766 8.98958 16.6872 9.5539 17.3868L7.22374 19.7156C6.93075 20.0084 6.93061 20.4833 7.22342 20.7763C7.51622 21.0692 7.99109 21.0694 8.28408 20.7766L10.6146 18.4474C11.8152 19.4154 13.3421 19.9949 15.0044 19.9949C18.8696 19.9949 22.0031 16.8615 22.0031 12.9962V7.74756C22.0031 6.78106 21.2196 5.99756 20.2531 5.99756L15.0044 5.99756C14.4209 5.99756 13.8541 6.06896 13.3123 6.2035C12.3069 4.29847 10.3063 3 8.00244 3H3.70699C2.76559 3 2.00244 3.76315 2.00244 4.70455ZM11.6835 17.3792L15.7801 13.2851C16.0731 12.9923 16.0732 12.5174 15.7804 12.2244C15.4876 11.9314 15.0128 11.9313 14.7198 12.2241L10.6226 16.3188C9.92169 15.3958 9.50569 14.2446 9.50569 12.9962C9.50569 9.9594 11.9675 7.49756 15.0044 7.49756H20.2531C20.3911 7.49756 20.5031 7.60949 20.5031 7.74756V12.9962C20.5031 16.0331 18.0412 18.4949 15.0044 18.4949C13.7567 18.4949 12.6062 18.0794 11.6835 17.3792ZM8.00244 4.5C9.65903 4.5 11.1065 5.39514 11.8877 6.72812C10.7891 7.27543 9.85464 8.10307 9.17802 9.11737L7.28032 7.21967C6.98743 6.92678 6.51255 6.92678 6.21966 7.21967C5.92677 7.51256 5.92677 7.98744 6.21966 8.28033L8.45718 10.5179C8.1654 11.2883 8.00569 12.1236 8.00569 12.9962C8.00569 13.1656 8.01171 13.3336 8.02354 13.5L8.00244 13.5C5.51716 13.5 3.50244 11.4853 3.50244 9L3.50244 4.70455C3.50244 4.59158 3.59402 4.5 3.70699 4.5L8.00244 4.5Z" fill="#000000"/>
-</svg>

dots/.config/quickshell/ii/assets/icons/fluent/leaf-two-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.707 2c-.941 0-1.705.763-1.705 1.705V8a6.002 6.002 0 0 0 5.003 5.917A7.961 7.961 0 0 1 8.408 9.47L6.22 7.28a.75.75 0 0 1 1.06-1.06l2.094 2.093a7.979 7.979 0 0 1 4.322-2.21A6.003 6.003 0 0 0 8.002 2H3.707Z" fill="#212121"/><path d="M9.554 18.387 7.22 20.719a.75.75 0 1 0 1.06 1.061l2.335-2.333a6.999 6.999 0 0 0 11.389-5.451V8.748a1.75 1.75 0 0 0-1.75-1.75h-5.25a6.999 6.999 0 0 0-5.45 11.389Zm6.226-4.102-4.095 4.095a5.53 5.53 0 0 1-1.061-1.06l4.095-4.096a.75.75 0 0 1 1.061 1.061Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/weather-sunny-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.996 18.532a1 1 0 0 1 .993.883l.007.117v1.456a1 1 0 0 1-1.993.116l-.007-.116v-1.456a1 1 0 0 1 1-1Zm6.037-1.932 1.03 1.03a1 1 0 0 1-1.415 1.413l-1.03-1.029a1 1 0 0 1 1.415-1.414Zm-10.66 0a1 1 0 0 1 0 1.414l-1.029 1.03a1 1 0 0 1-1.414-1.415l1.03-1.03a1 1 0 0 1 1.413 0ZM12.01 6.472a5.525 5.525 0 1 1 0 11.05 5.525 5.525 0 0 1 0-11.05Zm8.968 4.546a1 1 0 0 1 .117 1.993l-.117.007h-1.456a1 1 0 0 1-.116-1.993l.116-.007h1.456ZM4.479 10.99a1 1 0 0 1 .116 1.993l-.116.007H3.023a1 1 0 0 1-.117-1.993l.117-.007h1.456Zm1.77-6.116.095.083 1.03 1.03a1 1 0 0 1-1.32 1.497L5.958 7.4 4.93 6.371a1 1 0 0 1 1.32-1.497Zm12.813.083a1 1 0 0 1 .083 1.32l-.083.094-1.03 1.03a1 1 0 0 1-1.497-1.32l.084-.095 1.029-1.03a1 1 0 0 1 1.414 0ZM12 2.013a1 1 0 0 1 .993.883l.007.117v1.455a1 1 0 0 1-1.993.117L11 4.468V3.013a1 1 0 0 1 1-1Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/weather-sunny.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.996 19.01a.75.75 0 0 1 .743.649l.007.102v1.5a.75.75 0 0 1-1.493.101l-.007-.101v-1.5a.75.75 0 0 1 .75-.75Zm6.022-2.072 1.06 1.06a.75.75 0 1 1-1.06 1.061l-1.06-1.06a.75.75 0 0 1 1.06-1.061Zm-10.983 0a.75.75 0 0 1 0 1.06L5.974 19.06a.75.75 0 0 1-1.06-1.06l1.06-1.061a.75.75 0 0 1 1.06 0ZM12 6.475a5.525 5.525 0 1 1 0 11.05 5.525 5.525 0 0 1 0-11.05Zm0 1.5a4.025 4.025 0 1 0 0 8.05 4.025 4.025 0 0 0 0-8.05Zm9.25 3.293a.75.75 0 0 1 .102 1.493l-.102.007h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm-17-.029a.75.75 0 0 1 .102 1.494l-.102.006h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm1.64-6.37.084.072 1.06 1.06a.75.75 0 0 1-.976 1.134l-.084-.073-1.06-1.06a.75.75 0 0 1 .976-1.134Zm13.188.072a.75.75 0 0 1 .073.977l-.073.084-1.06 1.06a.75.75 0 0 1-1.133-.976l.072-.084 1.06-1.061a.75.75 0 0 1 1.061 0ZM12 1.99a.75.75 0 0 1 .743.648l.007.102v1.5a.75.75 0 0 1-1.493.101l-.007-.102v-1.5a.75.75 0 0 1 .75-.75Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/modules/common/Config.qml

@@ -581,7 +581,7 @@ Singleton {
                     property bool leftAlignApps: false
                 }
                 property JsonObject actionCenter: JsonObject {
-                    property list<string> toggles: [ "network", "bluetooth", "easyEffects", "powerProfile", "idleInhibitor", "antiFlashbang", "nightLight", "darkMode", "cloudflareWarp", "mic", "audio", "musicRecognition", "notifications", "onScreenKeyboard", "gameMode", "screenSnip", "colorPicker" ]
+                    property list<string> toggles: [ "network", "bluetooth", "easyEffects", "powerProfile", "idleInhibitor", "nightLight", "darkMode", "antiFlashbang", "cloudflareWarp", "mic", "audio", "musicRecognition", "notifications", "onScreenKeyboard", "gameMode", "screenSnip", "colorPicker" ]
                 }
             }
         }

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

@@ -25,7 +25,6 @@ Rectangle {
         ActionCenterBodyToggles {
             id: togglesContainer
             Layout.fillWidth: true
-            Layout.bottomMargin: -12
         }
 
         Rectangle {

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

@@ -7,39 +7,75 @@ import qs.modules.common
 import qs.modules.common.functions
 import qs.modules.waffle.looks
 
-RowLayout {
+ColumnLayout {
-    spacing: 4
+    id: root
+    property var screen: root.QsWindow.window?.screen
+    property var brightnessMonitor: Brightness.getMonitorForScreen(screen)
+    spacing: 12
 
-    WPanelIconButton {
+    RowLayout {
-        iconName: WIcons.volumeIcon
+        spacing: 4
-        onClicked: Audio.toggleMute();
+
-    }
+        WPanelIconButton {
-    
+            color: colBackground
-    WSlider {
+            property real animationValue: root.brightnessMonitor.brightness
-        Layout.fillWidth: true
+            rotation: animationValue * 180
-        value: Audio.sink.audio.volume
+            scale: 0.8 + animationValue * 0.2
-        onMoved: {
+            iconName: "weather-sunny"
-            Audio.sink.audio.volume = value;
+
+            Behavior on animationValue {
+                animation: Looks.transition.longMovement.createObject(this)
+            }
+        }
+        
+        WSlider {
+            Layout.fillWidth: true
+            value: root.brightnessMonitor.brightness
+            onMoved: {
+                root.brightnessMonitor.setBrightness(value)
+            }
+        }
+
+        WPanelIconButton {
+            opacity: 0
         }
     }
+    
+    RowLayout {
+        spacing: 4
 
-    WPanelIconButton {
+        WPanelIconButton {
-        contentItem: Item {
+            iconName: WIcons.volumeIcon
-            anchors.centerIn: parent
+            onClicked: Audio.toggleMute();
-            Row {
+        }
+        
+        WSlider {
+            Layout.fillWidth: true
+            value: Audio.sink.audio.volume
+            onMoved: {
+                Audio.sink.audio.volume = value;
+            }
+        }
+
+        WPanelIconButton {
+            contentItem: Item {
                 anchors.centerIn: parent
-                spacing: -1
+                Row {
-                FluentIcon {
+                    anchors.centerIn: parent
-                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: -1
-                    implicitSize: 18
+                    FluentIcon {
-                    icon: "options"
+                        anchors.verticalCenter: parent.verticalCenter
-                }
+                        implicitSize: 18
-                FluentIcon {
+                        icon: "options"
-                    anchors.verticalCenter: parent.verticalCenter
+                    }
-                    implicitSize: 12
+                    FluentIcon {
-                    icon: "chevron-right"
+                        anchors.verticalCenter: parent.verticalCenter
+                        implicitSize: 12
+                        icon: "chevron-right"
+                    }
                 }
             }
         }
     }
-}
+
+}

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

@@ -1,10 +1,13 @@
 pragma ComponentBehavior: Bound
+import Qt.labs.synchronizer
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Controls
 import Quickshell
 import qs
 import qs.services
 import qs.modules.common
+import qs.modules.common.widgets
 import qs.modules.common.models.quickToggles
 import qs.modules.common.functions
 import qs.modules.waffle.looks
@@ -13,37 +16,124 @@ import qs.modules.waffle.actionCenter.toggles
 Item {
     id: root
 
+    property int columns: 3
+    property int rows: 2
     property int currentPage: 0
-    property alias columns: grid.columns
-    property alias rows: grid.rows
     readonly property int itemsPerPage: columns * rows
+    readonly property int pages: Math.ceil(toggles.length / itemsPerPage)
     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
+    property real reducedBottomPadding: 12
+    implicitHeight: swipeView.implicitHeight + (padding - swipeView.padding) * 2 - reducedBottomPadding
 
-    GridLayout {
+    function togglesInPage(index) {
-        id: grid
+        var start = index * root.itemsPerPage;
-        anchors {
+        var end = start + root.itemsPerPage;
-            fill: parent
+        return root.toggles.slice(start, end);
-            margins: parent.padding
+    }
-        }
 
-        columns: 3
+    function decreasePage() {
-        rows: 2
+        if (root.currentPage > 0) {
-        rowSpacing: 12
+            root.currentPage -= 1;
-        columnSpacing: 12
-        uniformCellHeights: true
-        uniformCellWidths: true
-
-        Repeater {
-            model: ScriptModel {
-                values: root.togglesInCurrentPage
-            }
-            delegate: ActionCenterTogglesDelegateChooser {}
         }
     }
 
-    // TODO: pages indicator on the right
+    function increasePage() {
+        if (root.currentPage < (root.pages - 1)) {
+            root.currentPage += 1;
+        }
+    }
+
+    clip: true
+    SwipeView {
+        id: swipeView
+        anchors {
+            fill: parent
+            topMargin: root.padding - swipeView.padding
+            bottomMargin: root.padding - swipeView.padding - root.reducedBottomPadding
+        }
+        padding: 4
+        leftPadding: root.padding
+        rightPadding: root.padding
+        spacing: padding
+
+        orientation: Qt.Vertical
+        clip: true
+        Synchronizer on currentIndex {
+            property alias source: root.currentPage
+        }
+
+        Repeater {
+            model: root.pages
+            delegate: GridLayout {
+                id: grid
+                required property int index
+                // width: SwipeView.view.width - root.padding * 2
+                // height: SwipeView.view.height - root.padding * 2
+
+                columns: root.columns
+                rows: root.rows
+                rowSpacing: 12
+                columnSpacing: 12
+
+                Repeater {
+                    model: ScriptModel {
+                        values: root.togglesInPage(grid.index)
+                    }
+                    delegate: ActionCenterTogglesDelegateChooser {}
+                }
+            }
+        }
+    }
+
+    Column {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 6
+        spacing: 6
+
+        FluentIcon {
+            anchors.horizontalCenter: parent.horizontalCenter
+            implicitSize: 12
+            icon: "caret-up"
+            color: Looks.colors.controlBg
+            filled: true
+            opacity: root.currentPage > 0 ? 1 : 0
+        }
+
+        Repeater {
+            model: root.pages
+            delegate: Item {
+                required property int index
+                anchors.horizontalCenter: parent.horizontalCenter
+                implicitWidth: 6
+                implicitHeight: 6
+
+                Circle {
+                    anchors.centerIn: parent
+                    diameter: index === root.currentPage ? 6 : 4
+                    color: Looks.colors.controlBg
+                }
+            }
+        }
+
+        FluentIcon {
+            anchors.horizontalCenter: parent.horizontalCenter
+            implicitSize: 12
+            icon: "caret-down"
+            color: Looks.colors.controlBg
+            filled: true
+            opacity: root.currentPage < (root.pages - 1) ? 1 : 0
+        }
+    }
+
+    FocusedScrollMouseArea {
+        z: 999
+        anchors.fill: parent
+        acceptedButtons: Qt.NoButton
+        hoverEnabled: false
+        onScrollUp: decreasePage();
+        onScrollDown: increasePage();
+    }
 }

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

@@ -14,10 +14,7 @@ WBarAttachedPanelContent {
         anchors.centerIn: parent
         spacing: 0
 
-        ActionCenterBody {
+        ActionCenterBody {}
-            topLeftRadius: root.border.radius - root.border.border.width
-            topRightRadius: topLeftRadius
-        }
 
         Rectangle {
             Layout.fillHeight: false
@@ -26,9 +23,6 @@ WBarAttachedPanelContent {
             implicitHeight: 1
         }
 
-        ActionCenterFooter {
+        ActionCenterFooter {}
-            bottomLeftRadius: root.border.radius - root.border.border.width
-            bottomRightRadius: bottomLeftRadius
-        }
     }
 }

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

@@ -42,6 +42,11 @@ Rectangle {
         anchors.right: parent.right
         anchors.rightMargin: 12
 
+        onClicked: {
+            GlobalStates.sidebarLeftOpen = false;
+            Quickshell.execDetached(["qs", "-p", Quickshell.shellPath("settings.qml")]);
+        }
+
         contentItem: FluentIcon {
             icon: "settings"
         }

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

@@ -56,6 +56,13 @@ Scope {
                 id: content
                 anchors.centerIn: parent
 
+                focus: true
+                Keys.onPressed: event => { // Esc to close
+                    if (event.key === Qt.Key_Escape) {
+                        content.close()
+                    }
+                }
+
                 onClosed: {
                     barLoader.active = false;
                     GlobalStates.sidebarLeftOpen = false;

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

@@ -32,18 +32,18 @@ ColumnLayout {
     property color colBorder: toggled ? Looks.colors.accentHover : Looks.colors.bg0Border
     property color colForeground: toggled ? Looks.colors.accentFg : Looks.colors.fg1
 
+    spacing: 0
+    property real wholeToggleWidth: 96
+
     Rectangle {
         Layout.fillWidth: true
-        implicitWidth: 96
+        implicitWidth: root.wholeToggleWidth
         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 {
@@ -102,8 +102,8 @@ ColumnLayout {
 
     Item {
         id: toggleNameWidget
+        implicitWidth: root.wholeToggleWidth
         implicitHeight: 36
-        Layout.fillWidth: true
         WText {
             id: toggleNameText
             anchors {

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

@@ -32,6 +32,7 @@ DelegateChooser {
         roleValue: "bluetooth"
         ActionCenterToggleButton {
             toggleModel: BluetoothToggle {}
+            name: toggleModel.statusText
             icon: WIcons.bluetoothIcon
         }
     }
@@ -39,7 +40,7 @@ DelegateChooser {
         roleValue: "cloudflareWarp"
         ActionCenterToggleButton {
             toggleModel: CloudflareWarpToggle {}
-            icon: "globe-shield"
+            icon: "cloudflare"
         }
     }
     DelegateChoice {
@@ -53,7 +54,7 @@ DelegateChooser {
         roleValue: "darkMode"
         ActionCenterToggleButton {
             toggleModel: DarkModeToggle {}
-            icon: "dark-theme*"
+            icon: "dark-theme"
         }
     }
     DelegateChoice {
@@ -95,6 +96,7 @@ DelegateChooser {
         roleValue: "network"
         ActionCenterToggleButton {
             toggleModel: NetworkToggle {}
+            name: toggleModel.statusText
             icon: WIcons.internetIcon
         }
     }
@@ -124,6 +126,7 @@ DelegateChooser {
         ActionCenterToggleButton {
             toggleModel: PowerProfilesToggle {}
             icon: WIcons.powerProfileIcon
+            name: toggleModel.statusText
         }
     }
     DelegateChoice {

dots/.config/quickshell/ii/modules/waffle/bar/TimeButton.qml

@@ -18,18 +18,29 @@ BarButton {
 
     contentItem: Item {
         anchors.centerIn: root.background
-        implicitHeight: column.implicitHeight
+        implicitHeight: contentLayout.implicitHeight
-        implicitWidth: column.implicitWidth
+        implicitWidth: contentLayout.implicitWidth
-        Column {
+        Row {
-            id: column
+            id: contentLayout
             anchors.centerIn: parent
-            WText {
+            spacing: 7
-                anchors.right: parent.right
+            
-                text: DateTime.time
+            Column {
+                anchors.verticalCenter: parent.verticalCenter
+                WText {
+                    anchors.right: parent.right
+                    text: DateTime.time
+                }
+                WText {
+                    anchors.right: parent.right
+                    text: DateTime.date
+                }
             }
-            WText {
+            FluentIcon {
-                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
-                text: DateTime.date
+                icon: "alert-snooze"
+                implicitSize: 18
+                filled: true
             }
         }
     }

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

@@ -148,5 +148,13 @@ Singleton {
                 easing.bezierCurve: transition.easing.bezierCurve.easeIn
             }
         }
+
+        property Component longMovement: Component {
+            NumberAnimation {
+                duration: 1000
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: transition.easing.bezierCurve.easeIn
+            }
+        }
     }
 }

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

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import Quickshell
 import qs
 import qs.services
@@ -9,10 +10,10 @@ import qs.modules.waffle.looks
 Item {
     id: root
 
-    signal closed()
+    signal closed
 
     property alias border: borderRect
-    required default property Item contentItem
+    default required property Item contentItem
     property real visualMargin: 12
 
     function close() {
@@ -26,6 +27,7 @@ Item {
 
     Rectangle {
         id: borderRect
+        z: 1
 
         color: "transparent"
         radius: Looks.radius.large
@@ -33,7 +35,6 @@ Item {
         border.width: 1
         implicitWidth: contentItem.implicitWidth + border.width * 2
         implicitHeight: contentItem.implicitHeight + border.width * 2
-        children: [root.contentItem]
 
         anchors {
             left: parent.left
@@ -76,4 +77,20 @@ Item {
             }
         }
     }
+
+    Item {
+        id: contentArea
+        z: 0
+        anchors.fill: borderRect
+        anchors.margins: borderRect.border.width
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: contentArea.width
+                height: contentArea.height
+                radius: borderRect.radius - borderRect.border.width
+            }
+        }
+        children: [root.contentItem]
+    }
 }

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

@@ -16,6 +16,24 @@ Button {
     property color colBackgroundToggledHover: Looks.colors.accentHover
     property color colBackgroundToggledActive: Looks.colors.accentActive
     property alias backgroundOpacity: backgroundRect.opacity
+    property color 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) {
+            return root.colBackgroundHover;
+        } else {
+            return root.colBackground;
+        }
+    }
 
     property alias monochromeIcon: buttonIcon.monochrome
     property bool forceShowIcon: false
@@ -42,24 +60,7 @@ Button {
     background: Rectangle {
         id: backgroundRect
         radius: Looks.radius.medium
-        color: {
+        color: root.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) {
-                return root.colBackgroundHover;
-            } else {
-                return root.colBackground;
-            }
-        }
         Behavior on color {
             animation: Looks.transition.color.createObject(this)
         }

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

@@ -55,7 +55,7 @@ Singleton {
     property string powerProfileIcon: {
         switch(PowerProfiles.profile) {
             case PowerProfile.PowerSaver: return "leaf-two";
-            case PowerProfile.Balanced: return "settings-cog-multiple";
+            case PowerProfile.Balanced: return "flash-on";
             case PowerProfile.Performance: return "fire";
         }
     }

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

@@ -46,8 +46,8 @@ Slider {
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            topLeftRadius: root.trackWidth / 2
+            topRightRadius: root.trackWidth / 2
-            bottomLeftRadius: root.trackWidth / 2
+            bottomRightRadius: root.trackWidth / 2
             color: Looks.colors.controlBg
             implicitHeight: root.trackWidth
             width: background.width * (1 - root.visualPosition)