wnotificationcenter: somewhat working calendar

dots/.config/quickshell/ii/modules/waffle/looks/WBorderlessButton.qml

@@ -25,8 +25,10 @@ Button {
             return root.colBackground
         }
     }
+    property alias radius: background.radius
 
     background: Rectangle {
+        id: background
         radius: Looks.radius.medium
         color: root.color
     }

dots/.config/quickshell/ii/modules/waffle/looks/WButton.qml

@@ -23,7 +23,7 @@ Button {
         if (root.checked) {
             if (root.down) {
                 return root.colBackgroundToggledActive;
-            } else if (root.hovered && !root.down) {
+            } else if (root.hovered) {
                 return root.colBackgroundToggledHover;
             } else {
                 return root.colBackgroundToggled;
@@ -31,7 +31,7 @@ Button {
         }
         if (root.down) {
             return root.colBackgroundActive;
-        } else if (root.hovered && !root.down) {
+        } else if (root.hovered) {
             return root.colBackgroundHover;
         } else {
             return root.colBackground;

dots/.config/quickshell/ii/modules/waffle/notificationCenter/CalendarHeader.qml

@@ -13,7 +13,7 @@ FooterRectangle {
     id: root
 
     property bool collapsed
-    implicitWidth: 334
+    implicitWidth: 0
 
     RowLayout {
         anchors {

dots/.config/quickshell/ii/modules/waffle/notificationCenter/CalendarView.qml

@@ -12,12 +12,111 @@ import qs.modules.waffle.looks
 BodyRectangle {
     id: root
 
+    // State
     property bool collapsed
-    implicitHeight: collapsed ? 0 : 400 // For now
+
-    implicitWidth: 334
+    // Sizes
+    property int _rowsPerMonth: 6
+    property real viewHeight: (_rowsPerMonth * buttonSize) + ((_rowsPerMonth - 1) * buttonSpacing)
+    property real buttonSize: 40
+    property real buttonSpacing: 2
+    property real spacePerExtraRow: buttonSize + buttonSpacing
+
+    implicitWidth: currentMonthGrid.implicitWidth
+    implicitHeight: collapsed ? 0 : viewHeight
+    opacity: implicitHeight > 0 ? 1 : 0
 
     Behavior on implicitHeight {
         animation: Looks.transition.enter.createObject(this)
     }
 
+    // Month stuff
+    property real targetMonthDiff: 0
+    property real monthDiff: targetMonthDiff
+    property int focusedMonthDiff: monthDiff // whole part of monthDiff
+    property int currentMonth: DateTime.clock.date.getMonth() + 1 // 0-indexed -> 1-indexed
+    property int currentYear: DateTime.clock.date.getFullYear()
+
+    clip: true
+    property list<DiffMonthGrid> monthGrids: [previousPreviousMonthGrid, previousMonthGrid, currentMonthGrid, nextMonthGrid, nextNextMonthGrid]
+    ColumnLayout {
+        spacing: 0
+        y: {
+            const origin = - currentMonthGrid.y;
+            const diff = root.monthDiff * root.viewHeight;
+            return origin + (-diff % root.viewHeight);
+        }
+        DiffMonthGrid {
+            id: previousPreviousMonthGrid
+            monthDiff: root.focusedMonthDiff - 2
+        }
+        DiffMonthGrid {
+            id: previousMonthGrid
+            monthDiff: root.focusedMonthDiff - 1
+        }
+        DiffMonthGrid {
+            id: currentMonthGrid
+            monthDiff: root.focusedMonthDiff
+        }
+        DiffMonthGrid {
+            id: nextMonthGrid
+            monthDiff: root.focusedMonthDiff + 1
+        }
+        DiffMonthGrid {
+            id: nextNextMonthGrid
+            monthDiff: root.focusedMonthDiff + 2
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onWheel: wheel => {
+            root.targetMonthDiff += wheel.angleDelta.y / 120 * -0.333333; // Reverse cuz scrolling down should advance
+        }
+    }
+
+    Behavior on monthDiff {
+        animation: Looks.transition.enter.createObject(this)
+    }
+
+    component DiffMonthGrid: MonthGrid {
+        id: monthGrid
+        required property int monthDiff
+        property int index: root.monthGrids.indexOf(this)
+        month: ((root.currentMonth - 1) + monthDiff) % 12 // 1-indexed -> 0-indexed
+        year: root.currentYear + Math.floor((root.currentMonth - 1 + monthDiff) / 12)
+
+        spacing: root.buttonSpacing
+        // background: Rectangle {
+        //     color: Qt.rgba(Math.abs(Math.sin(month * 12.9898)) % 1, Math.abs(Math.sin(month * 78.233)) % 1, Math.abs(Math.sin(month * 45.164)) % 1, 1)
+        // }
+        delegate: MonthDayButton {}
+    }
+
+    component MonthDayButton: WButton {
+        id: monthDayButton
+        required property var model
+        opacity: model.month == parent.parent.month || model.today ? 1 : 0
+        checked: model.today
+        implicitWidth: root.buttonSize
+        implicitHeight: root.buttonSize
+        radius: height / 2
+
+        required property int index
+
+        contentItem: Item {
+            WText {
+                anchors.centerIn: parent
+                text: monthDayButton.model.day
+                color: {
+                    if (monthDayButton.model.today)
+                        return Looks.colors.accentFg;
+                    if (monthDayButton.model.month == root.currentMonth - 1)
+                        return Looks.colors.fg;
+                    return Looks.colors.subfg;
+                }
+                font.pixelSize: Looks.font.pixelSize.large
+            }
+        }
+    }
 }

dots/.config/quickshell/ii/modules/waffle/notificationCenter/FocusFooter.qml

@@ -11,7 +11,7 @@ import qs.modules.waffle.looks
 
 FooterRectangle {
     Layout.fillWidth: true
-    implicitWidth: 334
+    implicitWidth: 0
 
     RowLayout {
         anchors {

dots/.config/quickshell/ii/modules/waffle/notificationCenter/NotificationCenterContent.qml

@@ -40,7 +40,7 @@ WBarAttachedPanelContent {
                 WPanelSeparator { visible: !root.collapsed }
 
                 CalendarView {
-                    Layout.fillWidth: true
+                    // Layout.fillWidth: true
                     Synchronizer on collapsed {
                         property alias source: root.collapsed
                     }