refactor 'rotating' date indicator with repeater/text

.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml

@@ -6,44 +6,42 @@ import qs.modules.common
 import qs.modules.common.widgets
 import QtQuick
 
-Canvas {
-    z: 0
+Item {
+    id: root
 
-    opacity: root.style === "rotating" ? 1.0 : 0
-    Behavior on opacity {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
+    property real radius: 65
+
+    property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd")
+    property real angleStep: Math.PI / 2.35 / dateText.length
+
+    property color dayColor: Appearance.colors.colSecondary
+    property color monthColor: Appearance.colors.colSecondaryHover
 
     rotation: {
-        if (!Config.options.time.secondPrecision)
-            return 0;
-        return (secondHandLoader.item.rotation + 45);  // +45 degrees to align text's center
+        if (!Config.options.time.secondPrecision) return 0
+        else return secondHandLoader.item.rotation + 45 // +45 to center the text
     }
-    onPaint: {
-        var ctx = getContext("2d");
-        ctx.clearRect(0, 0, width, height);
-        ctx.font = "700 30px " + Appearance.font.family.title;
 
-        var text = Qt.locale().toString(DateTime.clock.date, "ddd dd");
-        var radius = 65;
-        var angleStep = Math.PI / 2.35 / text.length;
+    Repeater {
+        model: root.dateText.length 
 
-        for (var i = 0; i < text.length; i++) {
-            var angle = i * angleStep - Math.PI / 2;
-            var x = width / 2 + radius * Math.cos(angle);
-            var y = height / 2 + radius * Math.sin(angle);
+        delegate: Text {
+            required property int index
+            property real angle: index * root.angleStep - Math.PI / 2
 
-            ctx.save();
-            ctx.translate(x, y);
-            ctx.rotate(angle + Math.PI / 2);
+            x: root.width / 2 + root.radius * Math.cos(angle) - width / 2
+            y: root.height / 2 + root.radius * Math.sin(angle) - height / 2
 
-            if (i >= 3)
-                ctx.fillStyle = root.colOnBackground;
-            else
-                ctx.fillStyle = Appearance.colors.colSecondaryHover;
+            text: root.dateText.charAt(index)
+
+            font.family: Appearance.font.family.title
+            font.pixelSize: 30
+            font.weight: Font.DemiBold 
+
+            color: index < 3 ? root.dayColor : root.monthColor
+
+            rotation: angle * 180 / Math.PI + 90
 
-            ctx.fillText(text[i], 0, 0);
-            ctx.restore();
         }
     }
-}
+}