feat(quickshell): add clock button

modules/quickshell/config/Config/Theme/Theme.qml

@@ -65,6 +65,7 @@ Item {
     readonly property color colorYellow3: '#f6d32d'
     readonly property color colorYellow4: '#f5c211'
     readonly property color colorYellow5: '#e5a50a'
+    readonly property color darkWindowBg: '#21232D'
     readonly property color destructiveBg: dracula.errorBg
     readonly property color destructiveFg: dracula.accentFg
     readonly property color dialogBg: dracula.windowBg
@@ -76,6 +77,7 @@ Item {
     readonly property color headerbarBorder: 'white'
     readonly property color headerbarFg: dracula.accentFg
     readonly property color headerbarShade: Qt.rgba(0, 0, 0, 0.36)
+    readonly property color lightWindowBg: '#333643'
     readonly property color popoverBg: dracula.windowBg
     readonly property color popoverFg: dracula.accentFg
     readonly property color scrollbarOutline: Qt.rgba(0, 0, 0, 0.5)

modules/quickshell/config/Services/DateTime/DateTime.qml

@@ -0,0 +1,49 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    property string time: Qt.formatDateTime(clock.date, "ddd. d MMM. h:mm AP")
+    property string uptime: "0h, 0m"
+
+    SystemClock {
+        id: clock
+
+        precision: SystemClock.Minutes
+    }
+
+    Timer {
+        interval: 10
+        repeat: true
+        running: true
+
+        onTriggered: {
+            fileUptime.reload();
+            const textUptime = fileUptime.text();
+            const uptimeSeconds = Number(textUptime.split(" ")[0] ?? 0);
+
+            // Convert seconds to days, hours, and minutes
+            const days = Math.floor(uptimeSeconds / 86400);
+            const hours = Math.floor((uptimeSeconds % 86400) / 3600);
+            const minutes = Math.floor((uptimeSeconds % 3600) / 60);
+
+            // Build the formatted uptime string
+            let formatted = "";
+            if (days > 0)
+                formatted += `${days}d`;
+            if (hours > 0)
+                formatted += `${formatted ? ", " : ""}${hours}h`;
+            if (minutes > 0 || !formatted)
+                formatted += `${formatted ? ", " : ""}${minutes}m`;
+            DateTime.uptime = formatted;
+        }
+    }
+
+    FileView {
+        id: fileUptime
+
+        path: "/proc/uptime"
+    }
+}

modules/quickshell/config/Widgets/Bar/Bar.qml

@@ -1,9 +1,11 @@
 import Quickshell
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 
 import "../../Components/RoundCorner"
 import "../../Config/Theme"
+import "../../Services/DateTime"
 
 PanelWindow {
     id: toplevel
@@ -26,17 +28,62 @@ PanelWindow {
         id: bar
 
         color: theme.windowBg
-        height: 30
+        height: 50
 
         anchors {
             left: parent.left
             right: parent.right
         }
 
-        Text {
+        RoundButton {
+            id: button
+
             anchors.centerIn: parent
-            color: theme.windowFg
-            text: "hello world"
+            radius: 5
+
+            background: Rectangle {
+                id: background
+
+                anchors.centerIn: parent
+                color: {
+                    if (button.down) {
+                        return theme.windowBg;
+                    } else if (button.hovered) {
+                        return theme.lightWindowBg;
+                    } else {
+                        return theme.darkWindowBg;
+                    }
+                }
+                height: clockText.height + 0.4 * clockText.height
+                opacity: enabled ? 1 : 0.3
+                radius: 5
+                width: clockText.width + 0.1 * clockText.width
+
+                Behavior on color {
+                    ColorAnimation {
+                        duration: 200
+                        target: background
+                    }
+                }
+            }
+            contentItem: Text {
+                id: clockText
+
+                anchors.centerIn: parent
+                color: theme.windowFg
+                renderType: Text.NativeRendering
+                text: DateTime.time
+
+                font {
+                    pointSize: 16
+                    weight: 500
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+            }
         }
     }