feat: add a simple desktop clock (#238)

* Adds a simple desktop clock

* Adds ability to change color

* Sets the desktop clock to be disabled by default

* Improves desktop clock code based on feedback

* Disable the clock by default

* Fixes config of background clock

* Removes the timer for the desktop clock

---------

Co-authored-by: Kaj Giesbers <kajgiesbers@gmail.com>

3 files changed, 32 insertions, 0 deletions

diff --git a/config/BackgroundConfig.qml b/config/BackgroundConfig.qml
index 9bcca87..35e16d1 100644
--- a/config/BackgroundConfig.qml
+++ b/config/BackgroundConfig.qml
@@ -2,4 +2,9 @@ import Quickshell.Io
 
 JsonObject {
     property bool enabled: true
+    property DesktopClock desktopClock: DesktopClock {}
+
+    component DesktopClock: JsonObject {
+        property bool enabled: false
+    }
 }
diff --git a/modules/background/Background.qml b/modules/background/Background.qml
index c744baa..1c18786 100644
--- a/modules/background/Background.qml
+++ b/modules/background/Background.qml
@@ -26,6 +26,13 @@ LazyLoader {
             anchors.right: true
 
             Wallpaper {}
+
+            DesktopClock {
+                visible: Config.background.desktopClock.enabled
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.margins: Appearance.padding.large
+            }
         }
     }
 }
diff --git a/widgets/DesktopClock.qml b/widgets/DesktopClock.qml
new file mode 100644
index 0000000..30e4fc4
--- /dev/null
+++ b/widgets/DesktopClock.qml
@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Controls
+import qs.config
+import qs.services
+import qs.widgets
+
+Item {
+    id: clockRoot
+    width: timeText.implicitWidth + Appearance.padding.large * 2
+    height: timeText.implicitHeight + Appearance.padding.large * 2
+
+
+    StyledText {
+        id: timeText
+        anchors.centerIn: parent
+        font.pointSize: Appearance.font.size.extraLarge
+        font.bold: true
+        text: Time.format("hh:mm:ss");
+    }
+}