updated clock module: added animations and removed redundancies

bar/modules/Clock.qml

@@ -203,14 +203,56 @@ Rectangle {
                     RowLayout {
                         Layout.fillWidth: true
 
-                        Text {
+                        Rectangle {
-                            text: "‹"; color: root.t.clockPopupDim; font.pixelSize: 18; font.bold: true
+                            id: prevMonthBtn
+                            width: 26; height: 26; radius: 6
+                            color: prevBtnMouse.containsMouse
+                                   ? (prevBtnMouse.pressed ? root.t.calArrowBgPress : root.t.calArrowBgHover)
+                                   : root.t.calArrowBg
+                            scale: prevBtnMouse.pressed ? 0.88 : 1.0
+
+                            Behavior on color { ColorAnimation { duration: 120 } }
+                            Behavior on scale { NumberAnimation { duration: 100; easing.type: Easing.OutCubic } }
+
                             MouseArea {
-                                anchors.fill: parent; cursorShape: Qt.PointingHandCursor
+                                id: prevBtnMouse
-                                onClicked: {
+                                anchors.fill: parent
-                                    cal.displayMonth -= 1
+                                hoverEnabled: true
-                                    if (cal.displayMonth < 0) { cal.displayMonth = 11; cal.displayYear -= 1 }
+                                cursorShape: Qt.PointingHandCursor
+
+                                function goToPrev() {
+                                    if (slideAnim.running) return
+                                    cal.slideDir = -1
+                                    let m = cal.displayMonth - 1
+                                    let y = cal.displayYear
+                                    if (m < 0) { m = 11; y -= 1 }
+                                    cal.pendingMonth = m
+                                    cal.pendingYear  = y
+                                    slideAnim.restart()
                                 }
+
+                                onPressed:  { goToPrev(); prevHoldDelay.restart() }
+                                onReleased: { prevHoldDelay.stop(); prevHoldRepeat.stop() }
+                                onCanceled: { prevHoldDelay.stop(); prevHoldRepeat.stop() }
+
+                                Timer {
+                                    id: prevHoldDelay
+                                    interval: 400; repeat: false
+                                    onTriggered: prevHoldRepeat.restart()
+                                }
+                                Timer {
+                                    id: prevHoldRepeat
+                                    interval: 200; repeat: true
+                                    onTriggered: prevBtnMouse.goToPrev()
+                                }
+                            }
+
+                            Text {
+                                anchors.centerIn: parent
+                                text: "‹"
+                                color: prevBtnMouse.containsMouse ? root.t.calArrowIconHover : root.t.calArrowIcon
+                                font.pixelSize: 18; font.bold: true
+                                Behavior on color { ColorAnimation { duration: 120 } }
                             }
                         }
 
@@ -221,14 +263,56 @@ Rectangle {
                             Layout.fillWidth: true; horizontalAlignment: Text.AlignHCenter
                         }
 
-                        Text {
+                        Rectangle {
-                            text: "›"; color: root.t.clockPopupDim; font.pixelSize: 18; font.bold: true
+                            id: nextMonthBtn
+                            width: 26; height: 26; radius: 6
+                            color: nextBtnMouse.containsMouse
+                                   ? (nextBtnMouse.pressed ? root.t.calArrowBgPress : root.t.calArrowBgHover)
+                                   : root.t.calArrowBg
+                            scale: nextBtnMouse.pressed ? 0.88 : 1.0
+
+                            Behavior on color { ColorAnimation { duration: 120 } }
+                            Behavior on scale { NumberAnimation { duration: 100; easing.type: Easing.OutCubic } }
+
                             MouseArea {
-                                anchors.fill: parent; cursorShape: Qt.PointingHandCursor
+                                id: nextBtnMouse
-                                onClicked: {
+                                anchors.fill: parent
-                                    cal.displayMonth += 1
+                                hoverEnabled: true
-                                    if (cal.displayMonth > 11) { cal.displayMonth = 0; cal.displayYear += 1 }
+                                cursorShape: Qt.PointingHandCursor
+
+                                function goToNext() {
+                                    if (slideAnim.running) return
+                                    cal.slideDir = 1
+                                    let m = cal.displayMonth + 1
+                                    let y = cal.displayYear
+                                    if (m > 11) { m = 0; y += 1 }
+                                    cal.pendingMonth = m
+                                    cal.pendingYear  = y
+                                    slideAnim.restart()
                                 }
+
+                                onPressed:  { goToNext(); nextHoldDelay.restart() }
+                                onReleased: { nextHoldDelay.stop(); nextHoldRepeat.stop() }
+                                onCanceled: { nextHoldDelay.stop(); nextHoldRepeat.stop() }
+
+                                Timer {
+                                    id: nextHoldDelay
+                                    interval: 400; repeat: false
+                                    onTriggered: nextHoldRepeat.restart()
+                                }
+                                Timer {
+                                    id: nextHoldRepeat
+                                    interval: 200; repeat: true
+                                    onTriggered: nextBtnMouse.goToNext()
+                                }
+                            }
+
+                            Text {
+                                anchors.centerIn: parent
+                                text: "›"
+                                color: nextBtnMouse.containsMouse ? root.t.calArrowIconHover : root.t.calArrowIcon
+                                font.pixelSize: 18; font.bold: true
+                                Behavior on color { ColorAnimation { duration: 120 } }
                             }
                         }
                     }
@@ -239,6 +323,9 @@ Rectangle {
                         implicitHeight: gridCol.implicitHeight
                         property int displayYear:   timeManager.now.getFullYear()
                         property int displayMonth:  timeManager.now.getMonth()
+                        property int pendingYear:   displayYear
+                        property int pendingMonth:  displayMonth
+                        property int slideDir:      1   
 
                         Connections {
                             target: calendarPopup
@@ -250,9 +337,35 @@ Rectangle {
                             }
                         }
 
+                        SequentialAnimation {
+                            id: slideAnim
+                            NumberAnimation {
+                                target: gridCol; property: "x"
+                                to: -cal.slideDir * cal.width
+                                duration: 80; easing.type: Easing.InCubic
+                            }
+                            ScriptAction {
+                                script: {
+                                    cal.displayMonth = cal.pendingMonth
+                                    cal.displayYear  = cal.pendingYear
+                                    gridCol.x = cal.slideDir * cal.width
+                                }
+                            }
+                            NumberAnimation {
+                                target: gridCol; property: "x"
+                                to: 0
+                                duration: 100; easing.type: Easing.OutCubic
+                            }
+                        }
+
+                        Item {
+                            id: calGridClip
+                            anchors.fill: parent
+                            clip: true
+
                         ColumnLayout {
                             id: gridCol
-                            anchors.fill: parent
+                            width: parent.width
                             spacing: 2
 
                             Row {
@@ -300,26 +413,39 @@ Rectangle {
                             }
                         }   
                         }   
+                    }   
 
                     Rectangle { Layout.fillWidth: true; height: 1; color: root.t.calSeparator }
 
                     RowLayout {
-                        Layout.fillWidth: true; spacing: 12
+                        Layout.fillWidth:   true
-                        Text { text: "󰣐"; color: root.t.clockIcon; font.pixelSize: 16 }
+                        Layout.leftMargin:  6
-                        ColumnLayout {
+                        Layout.rightMargin: 6
-                            spacing: 0; Layout.fillWidth: true
+
-                            Text {
-                                text: timeManager.now.toLocaleTimeString(Qt.locale(), "t") || "UTC"
-                                color: root.t.clockPopupText; font.pixelSize: 12; font.bold: true
-                            }
                         Text {
                             text: "UTC " + (root.tzOffsetHours >= 0 ? "+" : "") + root.tzOffsetHours
-                                color: root.t.clockPopupDim; font.pixelSize: 10
+                            color:          root.t.clockPopupUtc
-                            }
+                            font.pixelSize: 13
+                            font.bold:      true
+                            font.family:    "monospace"
                         }
+
+                        Item { Layout.fillWidth: true }
+
                         Text {
-                            text: timeManager.now.toLocaleTimeString(Qt.locale(), "HH:mm:ss")
+                            text: {
-                            color: root.t.clockTime; font.pixelSize: 20; font.bold: true; font.family: "monospace"
+                                let d     = timeManager.now
+                                let month = d.getMonth() + 1
+                                let day   = d.getDate()
+                                let year  = d.getFullYear()
+                                if (Cfg.Config.clockDateFormat === "DMY")
+                                    return day + "/" + month + "/" + year
+                                return month + "/" + day + "/" + year
+                            }
+                            color:          root.t.clockPopupDate
+                            font.pixelSize: 14
+                            font.bold:      true
+                            font.family:    "monospace"
                         }
                     }
 

bar/modules/Volume.qml

@@ -402,6 +402,14 @@ Rectangle {
                 onPressed:         pos => sliderItem.seek(pos.x)
                 onPositionChanged: pos => { if (pressed) sliderItem.seek(pos.x) }
             }
+            WheelHandler {
+                acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+                onWheel: event => {
+                    const step = 2
+                    const delta = event.angleDelta.y > 0 ? step : -step
+                    vs.sliderMoved(Math.max(0, Math.min(vs.maxVolume, vs.volume + delta)))
+                }
+            }
             function seek(x) {
                 let ratio = Math.max(0.0, Math.min(1.0, x / sliderItem.width))
                 vs.sliderMoved(Math.round(ratio * vs.maxVolume))

config/config.qml

@@ -43,6 +43,12 @@ QtObject {
     property int popupBorderWidth:   1
     property int popupAnimDuration:  500
 
+    // ── Clock Popup ───────────────────────────────────────────────────────────
+    // Date format shown in the clock popup.
+    // "MDY" → month/day/year   (e.g. 4/28/2026)
+    // "DMY" → day/month/year   (e.g. 28/4/2026)
+    property string clockDateFormat: "DMY"
+
     // ── Tray Styling ─────────────────────────────────────────────────────────
     property int trayHeight:    26
     property int trayIconSize:  20

config/themes/aero.qml

@@ -157,4 +157,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#55000000"
     readonly property color notifHistoryHover:  "#11cbdc3d"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#22cbdc3d"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#66000000"
+    readonly property color bgDateSecondsText: textMain
 }

config/themes/aurora.qml

@@ -158,4 +158,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#55000000"
     readonly property color notifHistoryHover:  "#1100d9ff"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#2200d9ff"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#88000000"
+    readonly property color bgDateSecondsText: textMain
 }

config/themes/beach.qml

@@ -157,4 +157,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#55000000"
     readonly property color notifHistoryHover:  "#11ebc6a0"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#22ebc6a0"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#66000000"
+    readonly property color bgDateSecondsText: textMain
 }

config/themes/colorful.qml

@@ -158,4 +158,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#55000000"
     readonly property color notifHistoryHover:  "#11f0a1ba"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#22f0a1ba"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#66000000"
+    readonly property color bgDateSecondsText: textMain
 }

config/themes/cosmic.qml

@@ -157,4 +157,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#55000000"
     readonly property color notifHistoryHover:  "#11bdf0ff"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#22bdf0ff"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#66000000"
+    readonly property color bgDateSecondsText: textMain
 }

config/themes/everforest.qml

@@ -158,6 +158,21 @@ QtObject {
     readonly property color notifHistoryShadow: "#55000000"
     readonly property color notifHistoryHover:  "#22ffffff"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#224a8c5c"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#44000000"
+    readonly property color bgDateSecondsText: textMain
 }
 
 

config/themes/goldencity.qml

@@ -84,6 +84,13 @@ QtObject {
     readonly property color clockPopupHeader: "#ffc19375"
     readonly property color clockPopupText:   textMain
     readonly property color clockPopupDim:    textDim
+    readonly property color clockPopupDate:   textMain  // Numeric date in the popup (month/day/year)
+    readonly property color clockPopupUtc:    textDim   // UTC offset label (e.g. UTC +2)
+    readonly property color calArrowIcon:      textDim             // Default arrow glyph color
+    readonly property color calArrowIconHover: "#ffc19375"         // Hovered arrow — horizon gold
+    readonly property color calArrowBg:        "transparent"       // Default button background
+    readonly property color calArrowBgHover:   "#22c19375"         // Hovered button — soft gold tint
+    readonly property color calArrowBgPress:   "#ffc19375"         // Pressed button — full horizon gold
 
     // ── Workspace Module ───────────────────────────────────────────────────────
     readonly property color wsPanelBg:      bgPanel
@@ -158,4 +165,9 @@ QtObject {
     readonly property color notifHistoryShadow: "#aa000000"
     readonly property color notifHistoryHover:  "#11c19375"
     readonly property color notifHistoryEmpty:  textDim
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText:        textMain          // Date string color
+    readonly property color bgDateShadow:      "#66000000"       // Drop shadow for both texts
+    readonly property color bgDateSecondsText: textMain      // Seconds clock — sun-glow gold
 }

config/themes/metropolitan.qml

@@ -158,4 +158,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#aa000000"
     readonly property color notifHistoryHover:  "#11ffb86c"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#22ffb86c"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#aa000000"
+    readonly property color bgDateSecondsText: textMain
 }

config/themes/neonica.qml

@@ -156,4 +156,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#33000000"
     readonly property color notifHistoryHover:  "#22c4a7e7"
     readonly property color notifHistoryEmpty:  "#ff6e6a86"
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#22ff2e97"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#44000000"
+    readonly property color bgDateSecondsText: textMain
 }

config/themes/supreme.qml

@@ -157,4 +157,19 @@ QtObject {
     readonly property color notifHistoryShadow: "#552d1621"
     readonly property color notifHistoryHover:  "#11ff7eb9"
     readonly property color notifHistoryEmpty:  textDim
+
+    // new variables adaptated
+    readonly property color frameBorder: "transparent"
+    readonly property color clockPopupDate: textMain
+    readonly property color clockPopupUtc: textDim
+    readonly property color calArrowIcon: textDim
+    readonly property color calArrowIconHover: accent
+    readonly property color calArrowBg: "transparent"
+    readonly property color calArrowBgHover: "#22ff7eb9"
+    readonly property color calArrowBgPress: accent
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText: textMain
+    readonly property color bgDateShadow: "#662d1621"
+    readonly property color bgDateSecondsText: textMain
 }

widgets/bgDate/BgDate.qml

@@ -14,32 +14,93 @@ PanelWindow {
     WlrLayershell.exclusiveZone: -1
     mask: Region {}
 
-    property string dateString: ""
+    property string fullDateString: ""
+    property int    typedChars:     0
+    property string secondsString:  ""
+
+    function startTyping() {
+        typedChars         = 0;
+        secondsText.opacity = 0;
+        typingTimer.start();
+    }
 
     function updateDate() {
         let d = new Date();
-        dateString = d.toLocaleDateString(Qt.locale(), "dddd, d MMMM yyyy"); 
+        fullDateString = d.toLocaleDateString(Qt.locale(), "dddd, d MMMM yyyy");
+        startTyping();
     }
 
-    Component.onCompleted: updateDate()
+    function updateSeconds() {
+        let d = new Date();
+        secondsString = Qt.formatTime(d, "hh:mm:ss");
+    }
+
+    Component.onCompleted: {
+        updateSeconds();
+        updateDate();
+    }
+
+    Column {
+        anchors.centerIn: parent
+        spacing: 10
 
         Text {
             id: dateText
-        anchors.centerIn: parent
+            anchors.horizontalCenter: parent.horizontalCenter
-        color:      Cfg.Config.theme.clockText
+            color:          Cfg.Config.theme.bgDateText
-        styleColor: Cfg.Config.theme.clockShadow
+            styleColor:     Cfg.Config.theme.bgDateShadow
             font.pixelSize: 64
             font.weight:    Font.ExtraLight
             font.letterSpacing: 4
             opacity: 0.55
             style: Text.DropShadow
-        text: dateString
+            text: fullDateString.substring(0, typedChars)
+        }
+
+        Text {
+            id: secondsText
+            anchors.horizontalCenter: parent.horizontalCenter
+            color:          Cfg.Config.theme.bgDateSecondsText
+            styleColor:     Cfg.Config.theme.bgDateShadow
+            font.pixelSize: 22
+            font.weight:    Font.ExtraLight
+            font.letterSpacing: 6
+            opacity: 0
+            style: Text.DropShadow
+            text: secondsString
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 700
+                    easing.type: Easing.InOutQuad
+                }
+            }
+        }
     }
 
     Timer {
-        interval: 60000 
+        id: typingTimer
+        interval: 55
+        repeat: true
+        onTriggered: {
+            if (typedChars < fullDateString.length) {
+                typedChars++;
+            } else {
+                stop();
+                secondsText.opacity = 0.55;
+            }
+        }
+    }
+
+    Timer {
+        interval: 1000
         running: true
         repeat: true
-        onTriggered: updateDate()
+        onTriggered: {
+            updateSeconds();
+            let d = new Date();
+            if (d.getSeconds() === 0 && d.getMinutes() === 0 && d.getHours() === 0)
+                updateDate();
+        }
     }
 }