wip

modules/bar/Bar.qml

@@ -31,6 +31,9 @@ Item {
         const b = statusIconsInner.battery;
         const by = statusIcons.y + statusIconsInner.y + b.y - spacing / 2;
 
+        const c = clock;
+        const cy = clock.y;
+
         if (y >= awy && y <= awy + aw.implicitHeight) {
             popouts.currentName = "activewindow";
             popouts.currentCenter = Qt.binding(() => activeWindow.y + aw.y + aw.implicitHeight / 2);
@@ -54,6 +57,10 @@ Item {
             popouts.currentName = "battery";
             popouts.currentCenter = Qt.binding(() => statusIcons.y + statusIconsInner.y + b.y + b.implicitHeight / 2);
             popouts.hasCurrent = true;
+        } else if (y >= cy && y <= cy + c.implicitHeight) {
+            popouts.currentName = "calendar";
+            popouts.currentCenter = Qt.binding(() => clock.y + clock.implicitHeight / 2);
+            popouts.hasCurrent = true;
         } else {
             popouts.hasCurrent = false;
         }

modules/bar/popouts/Calendar.qml

@@ -0,0 +1,178 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+
+Column {
+    id: root
+
+    spacing: Appearance.spacing.normal
+    width: 250
+
+    property date currentDate: new Date()
+    property bool isCurrentMonth: true
+
+    // Time and Date header
+    Column {
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: Appearance.spacing.small
+
+        StyledText {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: Qt.formatDateTime(new Date(), "HH:mm:ss")
+            font.pointSize: Appearance.font.size.larger
+            font.family: Appearance.font.family.mono
+        }
+
+        Row {
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: Appearance.spacing.small
+
+            StyledText {
+                text: Qt.formatDateTime(root.currentDate, "yyyy")
+                font.pointSize: Appearance.font.size.large
+                font.weight: 700
+            }
+
+            Row {
+                spacing: Appearance.spacing.small
+
+                MaterialIcon {
+                    text: "chevron_left"
+                    color: Colours.palette.m3onSurfaceVariant
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            monthView.decrementCurrentIndex()
+                        }
+                    }
+                }
+
+                StyledText {
+                    text: Qt.formatDateTime(root.currentDate, "MMMM")
+                    font.pointSize: Appearance.font.size.large
+                    font.weight: 400
+                    color: Colours.palette.m3onSurfaceVariant
+                }
+
+                MaterialIcon {
+                    text: "chevron_right"
+                    color: Colours.palette.m3onSurfaceVariant
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            monthView.incrementCurrentIndex()
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Calendar grid
+    Item {
+        width: 250
+        height: 200
+        anchors.horizontalCenter: parent.horizontalCenter
+        clip: true
+
+        ListView {
+            id: monthView
+            anchors.fill: parent
+            orientation: ListView.Horizontal
+            snapMode: ListView.SnapOneItem
+            highlightRangeMode: ListView.StrictlyEnforceRange
+            highlightMoveDuration: Appearance.anim.durations.normal
+            highlightMoveVelocity: -1
+            highlightResizeDuration: Appearance.anim.durations.normal
+            highlightResizeVelocity: -1
+
+            model: 12 // Show all months
+            currentIndex: new Date().getMonth()
+
+            delegate: Grid {
+                width: monthView.width
+                height: monthView.height
+                columns: 7
+                spacing: Appearance.spacing.small
+
+                // Day headers
+                Repeater {
+                    model: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
+                    
+                    StyledText {
+                        width: 30
+                        horizontalAlignment: Text.AlignHCenter
+                        text: modelData
+                        font.pointSize: Appearance.font.size.small
+                        color: Colours.palette.m3onSurfaceVariant
+                    }
+                }
+
+                // Calendar days
+                Repeater {
+                    model: {
+                        const firstDay = new Date(new Date().getFullYear(), monthView.currentIndex, 1);
+                        const lastDay = new Date(new Date().getFullYear(), monthView.currentIndex + 1, 0);
+                        const daysInMonth = lastDay.getDate();
+                        const firstDayOfWeek = firstDay.getDay() || 7; // Convert Sunday (0) to 7
+                        const today = new Date();
+                        
+                        let days = [];
+                        // Add empty cells for days before the first of the month
+                        for (let i = 1; i < firstDayOfWeek; i++) {
+                            days.push({ day: "", isCurrentMonth: false });
+                        }
+                        // Add days of the current month
+                        for (let i = 1; i <= daysInMonth; i++) {
+                            const isToday = i === today.getDate() && 
+                                          monthView.currentIndex === today.getMonth() && 
+                                          new Date().getFullYear() === today.getFullYear();
+                            days.push({ 
+                                day: i,
+                                isCurrentMonth: true,
+                                isToday: isToday
+                            });
+                        }
+                        return days;
+                    }
+
+                    Rectangle {
+                        width: 30
+                        height: 30
+                        radius: Appearance.rounding.full
+                        color: modelData.isToday ? Colours.palette.m3primary : "transparent"
+
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: modelData.day
+                            font.pointSize: Appearance.font.size.small
+                            color: modelData.isToday ? 
+                                   Colours.palette.m3onPrimary : 
+                                   modelData.isCurrentMonth ? 
+                                   Colours.palette.m3onSurface : 
+                                   Colours.palette.m3outline
+                        }
+                    }
+                }
+            }
+
+            onCurrentIndexChanged: {
+                root.currentDate = new Date(new Date().getFullYear(), currentIndex, 1)
+                root.isCurrentMonth = currentIndex === new Date().getMonth()
+            }
+        }
+    }
+
+    // Reset to current month when popout closes
+    Connections {
+        target: root.parent
+        function onVisibleChanged() {
+            if (!root.parent.visible) {
+                monthView.currentIndex = new Date().getMonth()
+                root.currentDate = new Date()
+                root.isCurrentMonth = true
+            }
+        }
+    }
+} 

modules/bar/popouts/Content.qml

@@ -48,6 +48,16 @@ Item {
             source: "Battery.qml"
         }
 
+        Popout {
+            name: "calendar"
+            source: "Calendar.qml"
+        }
+
+        Popout {
+            name: "debug"
+            source: "Debug.qml"
+        }
+
         Repeater {
             model: ScriptModel {
                 values: [...SystemTray.items.values]

modules/bar/popouts/Debug.qml

@@ -0,0 +1,9 @@
+import QtQuick
+
+Rectangle {
+    id: root
+
+    width: 200
+    height: 200
+    color: "red"
+} 

modules/bar/popouts/WorkspaceWindows.qml

@@ -0,0 +1,40 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/utils"
+import "root:/config"
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property int workspaceId
+
+    implicitWidth: child.implicitWidth
+    implicitHeight: child.implicitHeight
+
+    // Ensure the popout doesn't affect the bar's size
+    visible: width > 0 && height > 0
+    clip: true
+
+    StyledRect {
+        id: child
+
+        anchors.centerIn: parent
+        color: Colours.palette.m3surfaceContainer
+        radius: Appearance.rounding.normal
+
+        StyledText {
+            anchors.centerIn: parent
+            text: `Workspace ${root.workspaceId}`
+            font.pointSize: Appearance.font.size.normal
+            color: Colours.palette.m3onSurface
+        }
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.emphasized
+    }
+} 

modules/drawers/Panels.qml

@@ -89,5 +89,8 @@ Item {
                 return off + diff;
             return off;
         }
+
+        visible: width > 0 && height > 0
+        clip: true
     }
 }