feat: add date + calendar, also tidy up pointers/tooltips

feat: add date + calendar, also tidy up pointers/tooltips

Bar/Bar.qml

@@ -111,6 +111,7 @@ Scope {
                         }
 
                         ClockWidget {
+                            screen: modelData
                             anchors.verticalCenter: parent.verticalCenter
                         }
 

Bar/Modules/Applauncher.qml

@@ -10,7 +10,7 @@ import "../../Helpers/Fuzzysort.js" as Fuzzysort
 
 PanelWithOverlay {
     id: appLauncherPanel
-
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
     function showAt() {
         appLauncherPanelRect.showAt();
     }
@@ -377,6 +377,7 @@ PanelWithOverlay {
                                     root.selectedIndex = index;
                                     root.activateSelected();
                                 }
+                                cursorShape: Qt.PointingHandCursor
                                 onPressed: ripple.opacity = 0.18
                                 onReleased: ripple.opacity = 0.0
                             }

Bar/Modules/Calendar.qml

@@ -0,0 +1,127 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Components
+import qs.Settings
+import Quickshell.Wayland
+
+PanelWithOverlay {
+    id: calendarOverlay
+
+    Rectangle {
+        color: Theme.backgroundPrimary
+        radius: 12
+        border.color: Theme.backgroundTertiary
+        border.width: 1
+        width: 340
+        height: 380
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.topMargin: 4
+        anchors.rightMargin: 4
+
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.margins: 16
+            spacing: 12
+
+            // Month/Year header with navigation
+            RowLayout {
+                Layout.fillWidth: true
+                spacing: 8
+
+                IconButton {
+                    icon: "chevron_left"
+                    onClicked: {
+                        let newDate = new Date(calendar.year, calendar.month - 1, 1);
+                        calendar.year = newDate.getFullYear();
+                        calendar.month = newDate.getMonth();
+                    }
+                }
+
+                Text {
+                    Layout.fillWidth: true
+                    horizontalAlignment: Text.AlignHCenter
+                    text: calendar.title
+                    color: Theme.textPrimary
+                    opacity: 0.7
+                    font.pixelSize: 13
+                    font.family: Theme.fontFamily
+                    font.bold: true
+                }
+
+                IconButton {
+                    icon: "chevron_right"
+                    onClicked: {
+                        let newDate = new Date(calendar.year, calendar.month + 1, 1);
+                        calendar.year = newDate.getFullYear();
+                        calendar.month = newDate.getMonth();
+                    }
+                }
+            }
+
+            DayOfWeekRow {
+                Layout.fillWidth: true
+                spacing: 0
+                Layout.leftMargin: 8  // Align with grid
+                Layout.rightMargin: 8
+                delegate: Text {
+                    text: shortName
+                    color: Theme.textPrimary
+                    opacity: 0.8
+                    font.pixelSize: 13
+                    font.family: Theme.fontFamily
+                    font.bold: true
+                    horizontalAlignment: Text.AlignHCenter
+                    width: 32
+                }
+            }
+
+            MonthGrid {
+                id: calendar
+                Layout.fillWidth: true
+                Layout.leftMargin: 8
+                Layout.rightMargin: 8
+                spacing: 0
+                month: Time.date.getMonth()
+                year: Time.date.getFullYear()
+
+                delegate: Rectangle {
+                    width: 32
+                    height: 32
+                    radius: 8
+                    color: {
+                        if (model.today)
+                            return Theme.accentPrimary;
+                        if (mouseArea2.containsMouse)
+                            return Theme.backgroundTertiary;
+                        return "transparent";
+                    }
+
+                    Text {
+                        anchors.centerIn: parent
+                        text: model.day
+                        color: model.today ? Theme.onAccent : Theme.textPrimary
+                        opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1.0 : 0.7) : 0.3
+                        font.pixelSize: 13
+                        font.family: Theme.fontFamily
+                        font.bold: model.today ? true : false
+                    }
+
+                    MouseArea {
+                        id: mouseArea2
+                        anchors.fill: parent
+                        hoverEnabled: true
+                    }
+
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: 150
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Bar/Modules/ClockWidget.qml

@@ -1,7 +1,11 @@
 import QtQuick
 import qs.Settings
+import qs.Components
 
 Rectangle {
+    id: clockWidget
+    property var screen: (typeof modelData !== 'undefined' ? modelData : null)
+    property var showTooltip: false
     width: textItem.paintedWidth
     height: textItem.paintedHeight
     color: "transparent"
@@ -15,4 +19,30 @@ Rectangle {
         color: Theme.textPrimary
         anchors.centerIn: parent
     }
+
+    MouseArea {
+        id: clockMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: showTooltip = true
+        onExited: showTooltip = false
+        cursorShape: Qt.PointingHandCursor
+        onClicked: function() {
+            calendar.visible = !calendar.visible
+        }
+    }
+
+    Calendar {
+        id: calendar
+        screen: clockWidget.screen
+        visible: false
+    }
+
+    StyledTooltip {
+        id: dateTooltip
+        text: Time.dateString
+        tooltipVisible: showTooltip && !calendar.visible
+        targetItem: clockWidget
+        delay: 200
+    }
 }

Bar/Modules/Media.qml

@@ -104,6 +104,7 @@ Item {
                 MouseArea {
                     id: playButton
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     hoverEnabled: true
                     enabled: MusicManager.canPlay || MusicManager.canPause
                     onClicked: MusicManager.playPause()

Bar/Modules/SystemTray.qml

@@ -90,6 +90,7 @@ Row {
                 id: trayMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
                 acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
                 onClicked: (mouse) => {
                     if (!modelData) return;

Bar/Modules/Time.qml

@@ -2,15 +2,45 @@ pragma Singleton
 
 import Quickshell
 import QtQuick
+import qs.Settings
 
 Singleton {
     id: root
-  readonly property string time: {
+
-    Qt.formatDateTime(clock.date, "hh:mm")
+    property var date: new Date()
+    property string time: Settings.settings.use12HourClock ? Qt.formatDateTime(date, "h:mm AP") : Qt.formatDateTime(date, "HH:mm")
+    property string dateString: {
+        let now = date;
+        let dayName = now.toLocaleDateString(Qt.locale(), "ddd");
+        dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1);
+        let day = now.getDate();
+        let suffix;
+        if (day > 3 && day < 21)
+            suffix = 'th';
+        else
+            switch (day % 10) {
+            case 1:
+                suffix = "st";
+                break;
+            case 2:
+                suffix = "nd";
+                break;
+            case 3:
+                suffix = "rd";
+                break;
+            default:
+                suffix = "th";
+            }
+        let month = now.toLocaleDateString(Qt.locale(), "MMMM");
+        let year = now.toLocaleDateString(Qt.locale(), "yyyy");
+        return `${dayName}, ` + (Settings.settings.reverseDayMonth ? `${month} ${day}${suffix} ${year}` : `${day}${suffix} ${month} ${year}`);
     }
 
-  SystemClock {
+    Timer {
-    id: clock
+        interval: 1000
-    precision: SystemClock.Seconds
+        repeat: true
+        running: true
+
+        onTriggered: root.date = new Date()
     }
 }

Bar/Modules/Volume.qml

@@ -56,6 +56,7 @@ Item {
         propagateComposedEvents: true
         onEntered: volumeTooltip.tooltipVisible = true
         onExited: volumeTooltip.tooltipVisible = false
+        cursorShape: Qt.PointingHandCursor
         onWheel:(wheel) => {
             if (!shell) return;
             let step = 5;

Components/IconButton.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import qs.Settings
+
+MouseArea {
+    id: root
+    property string icon
+    property bool enabled: true
+    property bool hovering: false
+    property real size: 32
+    cursorShape: Qt.PointingHandCursor
+    implicitWidth: size
+    implicitHeight: size
+
+    hoverEnabled: true
+    onEntered: hovering = true
+    onExited: hovering = false
+
+    Rectangle {
+        anchors.fill: parent
+        radius: 8
+        color: root.hovering ? Theme.accentPrimary : "transparent"
+    }
+    Text {
+        id: iconText
+        anchors.centerIn: parent
+        text: root.icon
+        font.family: "Material Symbols Outlined"
+        font.pixelSize: 24
+        color: root.hovering ? Theme.onAccent : Theme.textPrimary
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        opacity: root.enabled ? 1.0 : 0.5
+    }
+}

Components/PanelWithOverlay.qml

@@ -22,7 +22,6 @@ PanelWindow {
     color: visible ? overlayColor : "transparent"
     visible: false
     WlrLayershell.exclusionMode: ExclusionMode.Ignore
-    WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
     screen: (typeof modelData !== 'undefined' ? modelData : null)
     anchors.top: true
     anchors.left: true

Settings/Settings.qml

@@ -54,6 +54,8 @@ Singleton {
             property string transitionType: "random"
             property real transitionDuration: 1.1
             property string visualizerType: "radial"
+            property bool reverseDayMonth: false
+            property bool use12HourClock: false
         }
     }
 

Widgets/Notification/NotificationIcon.qml

@@ -2,6 +2,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Settings
+import qs.Components
 
 Item {
     id: root
@@ -25,6 +26,16 @@ Item {
             hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
             onClicked: notificationHistoryWin.visible = !notificationHistoryWin.visible
+            onEntered: notificationTooltip.tooltipVisible = true
+            onExited: notificationTooltip.tooltipVisible = false
         }
     }
+
+    StyledTooltip {
+        id: notificationTooltip
+        text: "Notification History"
+        tooltipVisible: false
+        targetItem: bell
+        delay: 200
+    }
 }

Widgets/Sidebar/Button.qml

@@ -20,6 +20,7 @@ Item {
         id: mouseArea
         anchors.fill: parent
         hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
         onClicked: {
             if (sidebarPopup.visible) {
                 sidebarPopup.hidePopup();

Widgets/Sidebar/Config/ProfileSettings.qml

@@ -133,6 +133,7 @@ Rectangle {
                         }
                         MouseArea {
                             anchors.fill: parent
+                            cursorShape: Qt.IBeamCursor
                             onClicked: {
                                 profileImageInput.forceActiveFocus()
                             }
@@ -188,6 +189,7 @@ Rectangle {
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon
                     }
@@ -242,6 +244,7 @@ Rectangle {
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar
                     }
@@ -296,6 +299,7 @@ Rectangle {
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar
                     }
@@ -445,6 +449,7 @@ Rectangle {
                     }
                     MouseArea {
                         anchors.fill: parent
+                        cursorShape: Qt.IBeamCursor
                         onClicked: videoPathInput.forceActiveFocus()
                     }
                 }

Widgets/Sidebar/Config/WallpaperSettings.qml

@@ -79,6 +79,7 @@ Rectangle {
                     }
                     MouseArea {
                         anchors.fill: parent
+                        cursorShape: Qt.IBeamCursor
                         onClicked: folderInput.forceActiveFocus()
                     }
                 }
@@ -133,6 +134,7 @@ Rectangle {
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         Settings.settings.useSWWW = !Settings.settings.useSWWW;
                     }
@@ -188,6 +190,7 @@ Rectangle {
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         Settings.settings.randomWallpaper = !Settings.settings.randomWallpaper;
                     }
@@ -243,6 +246,7 @@ Rectangle {
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         Settings.settings.useWallpaperTheme = !Settings.settings.useWallpaperTheme;
                     }

Widgets/Sidebar/Config/WeatherSettings.qml

@@ -5,7 +5,7 @@ import qs.Settings
 Rectangle {
     id: weatherSettingsCard
     Layout.fillWidth: true
-    Layout.preferredHeight: 180
+    Layout.preferredHeight: 320
     color: Theme.surface
     radius: 18
 
@@ -79,13 +79,14 @@ Rectangle {
                     inputMethodHints: Qt.ImhNone
 
                     onTextChanged: {
-                        Settings.settings.weatherCity = text
+                        Settings.settings.weatherCity = text;
                     }
 
                     MouseArea {
                         anchors.fill: parent
+                        cursorShape: Qt.IBeamCursor
                         onClicked: {
-                            cityInput.forceActiveFocus()
+                            cityInput.forceActiveFocus();
                         }
                     }
                 }
@@ -140,14 +141,132 @@ Rectangle {
                     }
 
                     Behavior on x {
-                        NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
+                        NumberAnimation {
+                            duration: 200
+                            easing.type: Easing.OutCubic
+                        }
                     }
                 }
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
-                        Settings.settings.useFahrenheit = !Settings.settings.useFahrenheit
+                        Settings.settings.useFahrenheit = !Settings.settings.useFahrenheit;
+                    }
+                }
+            }
+
+        
+        }
+
+            // Random Wallpaper Setting
+            RowLayout {
+                spacing: 8
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+
+                Text {
+                    text: "Use 12 Hour Clock"
+                    font.pixelSize: 13
+                    font.bold: true
+                    color: Theme.textPrimary
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                // Custom Material 3 Switch
+                Rectangle {
+                    id: use12HourClockSwitch
+                    width: 52
+                    height: 32
+                    radius: 16
+                    color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.surfaceVariant
+                    border.color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.outline
+                    border.width: 2
+
+                    Rectangle {
+                        id: randomWallpaperThumb
+                        width: 28
+                        height: 28
+                        radius: 14
+                        color: Theme.surface
+                        border.color: Theme.outline
+                        border.width: 1
+                        y: 2
+                        x: Settings.settings.use12HourClock ? use12HourClockSwitch.width - width - 2 : 2
+
+                        Behavior on x {
+                            NumberAnimation {
+                                duration: 200
+                                easing.type: Easing.OutCubic
+                            }
+                        }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            Settings.settings.use12HourClock = !Settings.settings.use12HourClock;
+                        }
+                    }
+                }
+            }
+
+            // Reverse Day Month Setting
+            RowLayout {
+                spacing: 8
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+
+                Text {
+                    text: "US Style Date"
+                    font.pixelSize: 13
+                    font.bold: true
+                    color: Theme.textPrimary
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                // Custom Material 3 Switch
+                Rectangle {
+                    id: reverseDayMonthSwitch
+                    width: 52
+                    height: 32
+                    radius: 16
+                    color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.surfaceVariant
+                    border.color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.outline
+                    border.width: 2
+
+                    Rectangle {
+                        id: reverseDayMonthThumb
+                        width: 28
+                        height: 28
+                        radius: 14
+                        color: Theme.surface
+                        border.color: Theme.outline
+                        border.width: 1
+                        y: 2
+                        x: Settings.settings.reverseDayMonth ? reverseDayMonthSwitch.width - width - 2 : 2
+
+                        Behavior on x {
+                            NumberAnimation {
+                                duration: 200
+                                easing.type: Easing.OutCubic
+                            }
+                        }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth;
                         }
                     }
                 }

Widgets/Sidebar/Panel/PanelPopup.qml

@@ -144,12 +144,6 @@ PanelWithOverlay {
                 }
             }
 
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                hoverEnabled: true
-            }
-
             ColumnLayout {
                 anchors.fill: parent
                 anchors.margins: 20
@@ -235,6 +229,12 @@ PanelWithOverlay {
                                     cursorShape: Qt.PointingHandCursor
                                     onClicked: wifiPanel.showAt()
                                 }
+
+                                StyledTooltip {
+                                    text: "Wifi"
+                                    targetItem: wifiButtonArea
+                                    tooltipVisible: wifiButtonArea.containsMouse
+                                }
                             }
 
                             // Bluetooth button
@@ -264,6 +264,12 @@ PanelWithOverlay {
                                     cursorShape: Qt.PointingHandCursor
                                     onClicked: bluetoothPanel.showAt()
                                 }
+
+                                StyledTooltip {
+                                    text: "Bluetooth"
+                                    targetItem: bluetoothButtonArea
+                                    tooltipVisible: bluetoothButtonArea.containsMouse
+                                }
                             }
                         }
                     }

Widgets/Sidebar/Panel/QuickAccess.qml

@@ -67,6 +67,7 @@ Rectangle {
                 MouseArea {
                     id: settingsButtonArea
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     hoverEnabled: true
                     onClicked: {
                         settingsRequested()
@@ -110,6 +111,7 @@ Rectangle {
                 MouseArea {
                     id: recorderButtonArea
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     hoverEnabled: true
                     onClicked: {
                         if (isRecording) {
@@ -156,6 +158,7 @@ Rectangle {
                 MouseArea {
                     id: wallpaperButtonArea
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     hoverEnabled: true
                     onClicked: {
                         wallpaperRequested()

Widgets/Sidebar/Panel/System.qml

@@ -7,6 +7,7 @@ import Quickshell.Io
 import qs.Settings
 import qs.Widgets
 import qs.Helpers
+import qs.Components
 
 Rectangle {
     id: systemWidget
@@ -129,31 +130,44 @@ Rectangle {
                     MouseArea {
                         id: systemButtonArea
                         anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
                         hoverEnabled: true
                         onClicked: {
-                            systemMenu.visible = !systemMenu.visible
+                            systemMenu.visible = !systemMenu.visible;
                         }
                     }
+                    StyledTooltip {
+                        id: systemTooltip
+                        text: "System"
+                        targetItem: systemButton
+                        tooltipVisible: systemButtonArea.containsMouse
+                    }
                 }
             }
         }
     }
 
+    PanelWithOverlay {
+        id: systemMenu
+        anchors.top: systemButton.bottom
+        anchors.right: systemButton.right
         // System menu popup
         Rectangle {
-        id: systemMenu
+
             width: 160
             height: 180
             color: Theme.surface
             radius: 8
             border.color: Theme.outline
             border.width: 1
-        visible: false
+            visible: true
             z: 9999
+            anchors.top: parent.top
+            anchors.right: parent.right
 
             // Position below system button
-        x: systemButton.x + systemButton.width - width + 12
+            anchors.rightMargin: 32
-        y: systemButton.y + systemButton.height + 32
+            anchors.topMargin: systemButton.y + systemButton.height + 48
 
             ColumnLayout {
                 anchors.fill: parent
@@ -192,6 +206,7 @@ Rectangle {
                         id: lockButtonArea
                         anchors.fill: parent
                         hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
                         onClicked: {
                             lockScreen.locked = true;
                             systemMenu.visible = false;
@@ -231,9 +246,10 @@ Rectangle {
                         id: rebootButtonArea
                         anchors.fill: parent
                         hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
                         onClicked: {
-                        reboot()
+                            reboot();
-                        systemMenu.visible = false
+                            systemMenu.visible = false;
                         }
                     }
                 }
@@ -269,9 +285,10 @@ Rectangle {
                         id: logoutButtonArea
                         anchors.fill: parent
                         hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
                         onClicked: {
-                        logout()
+                            logout();
-                        systemMenu.visible = false
+                            systemMenu.visible = false;
                         }
                     }
                 }
@@ -307,22 +324,14 @@ Rectangle {
                         id: shutdownButtonArea
                         anchors.fill: parent
                         hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
                         onClicked: {
-                        shutdown()
+                            shutdown();
-                        systemMenu.visible = false
+                            systemMenu.visible = false;
                         }
                     }
                 }
-
-
             }
-
-        // Close menu when clicking outside
-        MouseArea {
-            anchors.fill: parent
-            enabled: systemMenu.visible
-            onClicked: systemMenu.visible = false
-            z: -1 // Put this behind other elements
         }
     }
 
@@ -336,8 +345,8 @@ Rectangle {
         running: false
         stdout: StdioCollector {
             onStreamFinished: {
-                uptimeText = this.text.trim()
+                uptimeText = this.text.trim();
-                uptimeProcess.running = false
+                uptimeProcess.running = false;
             }
         }
     }
@@ -359,13 +368,13 @@ Rectangle {
     }
 
     function shutdown() {
-        shutdownProcess.running = true
+        shutdownProcess.running = true;
     }
     function reboot() {
-        rebootProcess.running = true
+        rebootProcess.running = true;
     }
     function logout() {
-        logoutProcess.running = true
+        logoutProcess.running = true;
     }
 
     property bool panelVisible: false
@@ -373,7 +382,7 @@ Rectangle {
     // Trigger initial update when panel becomes visible
     onPanelVisibleChanged: {
         if (panelVisible) {
-            updateSystemInfo()
+            updateSystemInfo();
         }
     }
 
@@ -386,11 +395,11 @@ Rectangle {
     }
 
     Component.onCompleted: {
-        uptimeProcess.running = true
+        uptimeProcess.running = true;
     }
 
     function updateSystemInfo() {
-        uptimeProcess.running = true
+        uptimeProcess.running = true;
     }
 
     // Add lockscreen instance (hidden by default)