add toggle page indicator interactions

dots/.config/quickshell/ii/modules/waffle/actionCenter/mainPage/MainPageBodyToggles.qml

@@ -93,38 +93,31 @@ Item {
         anchors.rightMargin: 6
         spacing: 6
 
-        FluentIcon {
+        NavigationArrow {
-            anchors.horizontalCenter: parent.horizontalCenter
+            down: false
-            implicitSize: 12
-            icon: "caret-up"
-            color: Looks.colors.controlBg
-            filled: true
-            opacity: root.currentPage > 0 ? 1 : 0
         }
 
         Repeater {
             model: root.pages
-            delegate: Item {
+            delegate: MouseArea {
+                id: pageIndicator
                 required property int index
+                hoverEnabled: true
+                onClicked: root.currentPage = index
                 anchors.horizontalCenter: parent.horizontalCenter
                 implicitWidth: 6
                 implicitHeight: 6
 
                 Circle {
                     anchors.centerIn: parent
-                    diameter: index === root.currentPage ? 6 : 4
+                    diameter: (index === root.currentPage || pageIndicator.containsMouse) && !pageIndicator.pressed ? 6 : 4
-                    color: Looks.colors.controlBg
+                    color: pageIndicator.containsMouse ? Looks.colors.controlBgHover : Looks.colors.controlBg
                 }
             }
         }
 
-        FluentIcon {
+        NavigationArrow {
-            anchors.horizontalCenter: parent.horizontalCenter
+            down: true
-            implicitSize: 12
-            icon: "caret-down"
-            color: Looks.colors.controlBg
-            filled: true
-            opacity: root.currentPage < (root.pages - 1) ? 1 : 0
         }
     }
 
@@ -136,4 +129,22 @@ Item {
         onScrollUp: decreasePage();
         onScrollDown: increasePage();
     }
+
+    component NavigationArrow: FluentIcon {
+        id: navArrow
+        required property bool down
+        anchors.horizontalCenter: parent.horizontalCenter
+        implicitHeight: 12
+        implicitWidth: 12 - (2 * upArea.containsPress)
+        icon: down ? "caret-down" : "caret-up"
+        color: upArea.containsMouse ? Looks.colors.controlBgHover : Looks.colors.controlBg
+        filled: true
+        opacity: ((down && root.currentPage < root.pages - 1) || (!down && root.currentPage > 0)) ? 1 : 0
+        MouseArea {
+            id: upArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: navArrow.down ? root.increasePage() : root.decreasePage();
+        }
+    }
 }

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

@@ -48,7 +48,8 @@ Singleton {
         property color fg: "#000000"
         property color fg1: "#626262"
         property color inactiveIcon: "#C4C4C4"
-        property color controlBg: '#b18484'
+        property color controlBg: '#807F85'
+        property color controlBgHover: '#57575B'
         property color controlFg: "#FFFFFF"
         property color accentUnfocused: "#848484"
     }
@@ -74,6 +75,7 @@ Singleton {
         property color fg1: "#D1D1D1"
         property color inactiveIcon: "#494949"
         property color controlBg: "#9B9B9B"
+        property color controlBgHover: "#CFCED1"
         property color controlFg: "#454545"
         property color accentUnfocused: "#989898"
     }
@@ -103,6 +105,7 @@ Singleton {
         property color fg1: root.dark ? root.darkColors.fg1 : root.lightColors.fg1
         property color inactiveIcon: root.dark ? root.darkColors.inactiveIcon : root.lightColors.inactiveIcon
         property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg
+        property color controlBgHover: root.dark ? root.darkColors.controlBgHover : root.lightColors.controlBgHover
         property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg
         property color danger: "#C42B1C"
         property color dangerActive: "#B62D1F"