feat: add timer to bar clock

README.md

@@ -1,5 +1,9 @@
 <h1 align=center>caelestia-shell</h1>
 
+> [!NOTE]
+> This is a fork adding a timer and alarm panel to the dashboard (`feat/timer-v3` branch).
+> The PR to upstream will be rebased after caelestia 2.0 is released.
+
 <div align=center>
 
 ![GitHub last commit](https://img.shields.io/github/last-commit/caelestia-dots/shell?style=for-the-badge&labelColor=101418&color=9ccbfb)

components/DashboardState.qml

@@ -3,4 +3,6 @@ import Quickshell
 PersistentProperties {
     property int currentTab
     property date currentDate: new Date()
+    property bool timerPanelOpen: false
+    property int timerPanelTab: 0
 }

components/DrawerVisibilities.qml

@@ -8,4 +8,5 @@ PersistentProperties {
     property bool dashboard
     property bool utilities
     property bool sidebar
+    property bool fireOverlay
 }

modules/bar/Bar.qml

@@ -34,6 +34,9 @@ ColumnLayout {
     function checkPopout(y: real): void {
         const ch = childAt(width / 2, y) as WrappedLoader;
 
+        if (popouts.locked && ch?.id !== "clock")
+            popouts.locked = false;
+
         if (ch?.id !== "tray")
             closeTray();
 
@@ -73,6 +76,10 @@ ColumnLayout {
             popouts.currentName = id.toLowerCase();
             popouts.currentCenter = (ch.item as Item).mapToItem(root, 0, (ch.item as Item).implicitHeight / 2).y ?? 0;
             popouts.hasCurrent = true;
+        } else if (id === "clock" && (Config.bar.clock.timer?.enabled ?? true)) {
+            popouts.currentName = "timer";
+            popouts.currentCenter = ch.y + ch.height / 2;
+            popouts.hasCurrent = true;
         }
     }
 
@@ -104,6 +111,20 @@ ColumnLayout {
 
     spacing: Tokens.spacing.normal
 
+    Connections {
+        target: TimerService
+        function onFinished(): void {
+            root.visibilities.dashboard = true;
+        }
+    }
+
+    Connections {
+        target: AlarmService
+        function onFinished(): void {
+            root.visibilities.dashboard = true;
+        }
+    }
+
     Repeater {
         id: repeater
 

modules/bar/components/Clock.qml

@@ -67,5 +67,47 @@ StyledRect {
             font.family: Tokens.font.family.mono
             color: root.colour
         }
+
+        Loader {
+            active: TimerService.active && (Config.bar.clock.timer?.enabled ?? true)
+            visible: active
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            sourceComponent: Column {
+                spacing: Tokens.spacing.small
+
+                Rectangle {
+                    width: 30
+                    height: 1
+                    color: root.colour
+                    opacity: 0.2
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                MaterialIcon {
+                    text: "timer"
+                    font.pointSize: Tokens.font.size.small
+                    color: TimerService.running ? root.colour : Qt.alpha(root.colour, 0.5)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    horizontalAlignment: StyledText.AlignHCenter
+                    text: {
+                        const s = TimerService.remainingSeconds;
+                        const h = Math.floor(s / 3600);
+                        const m = Math.floor((s % 3600) / 60);
+                        const sec = s % 60;
+                        if (h > 0)
+                            return h + "\n" + String(m).padStart(2, "0") + "\n" + String(sec).padStart(2, "0");
+                        return String(m).padStart(2, "0") + "\n" + String(sec).padStart(2, "0");
+                    }
+                    font.pointSize: Tokens.font.size.smaller
+                    font.family: Tokens.font.family.mono
+                    color: root.colour
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+        }
     }
 }

modules/bar/popouts/Content.qml

@@ -121,6 +121,13 @@ Item {
             sourceComponent: KbLayout {}
         }
 
+        Popout {
+            name: "timer"
+            sourceComponent: TimerPopout {
+                popouts: root.popouts
+            }
+        }
+
         Popout {
             name: "lockstatus"
             sourceComponent: LockStatus {}

modules/bar/popouts/PopoutState.qml

@@ -3,6 +3,7 @@ import QtQuick
 QtObject {
     property string currentName
     property bool hasCurrent
+    property bool locked: false
 
     signal detachRequested(mode: string)
 }