waffles: notif center: calendar header and focus

dots/.config/quickshell/ii/assets/icons/fluent/add-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/add.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/stop-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 3A1.75 1.75 0 0 0 3 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0 0 21 19.25V4.75A1.75 1.75 0 0 0 19.25 3H4.75Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/stop.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.25 4.5a.25.25 0 0 1 .25.25v14.5a.25.25 0 0 1-.25.25H4.75a.25.25 0 0 1-.25-.25V4.75a.25.25 0 0 1 .25-.25h14.5ZM4.75 3A1.75 1.75 0 0 0 3 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0 0 21 19.25V4.75A1.75 1.75 0 0 0 19.25 3H4.75Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/subtract-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/subtract.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterContent.qml

@@ -15,7 +15,7 @@ WBarAttachedPanelContent {
 
     readonly property bool barAtBottom: Config.options.waffles.bar.bottom
     
-    contentItem: Column {
+    contentItem: ColumnLayout {
         // This somewhat sophisticated anchoring is needed to make opening anim not jump abruptly when stuff appear
         anchors {
             left: parent.left
@@ -28,24 +28,21 @@ WBarAttachedPanelContent {
         spacing: 12
 
         WPane {
-            visible: MprisController.activePlayer != null && MprisController.isRealPlayer(MprisController.activePlayer)
+            opacity: (MprisController.activePlayer != null && MprisController.isRealPlayer(MprisController.activePlayer)) ? 1 : 0
-            anchors {
+            Layout.fillWidth: true
-                left: parent.left
-                right: parent.right
-            }
             contentItem: MediaPaneContent {}
         }
         WPane {
+            Layout.fillWidth: true
             contentItem: WStackView {
                 id: stackView
-                anchors.fill: parent
                 implicitWidth: initItem.implicitWidth
                 implicitHeight: initItem.implicitHeight
 
-                initialItem: PageColumn {
+                initialItem: WPanelPageColumn {
                     id: initItem
                     MainPageBody {}
-                    Separator {}
+                    WPanelSeparator {}
                     MainPageFooter {}
                 }
 

dots/.config/quickshell/ii/modules/waffle/actionCenter/WaffleActionCenter.qml

@@ -15,12 +15,12 @@ Scope {
         target: GlobalStates
 
         function onSidebarLeftOpenChanged() {
-            if (GlobalStates.sidebarLeftOpen) barLoader.active = true;
+            if (GlobalStates.sidebarLeftOpen) panelLoader.active = true;
         }
     }
 
     Loader {
-        id: barLoader
+        id: panelLoader
         active: GlobalStates.sidebarLeftOpen
         sourceComponent: PanelWindow {
             id: panelWindow
@@ -56,16 +56,9 @@ Scope {
                 id: content
                 anchors.fill: parent
 
-                focus: true
-                Keys.onPressed: event => { // Esc to close
-                    if (event.key === Qt.Key_Escape) {
-                        content.close()
-                    }
-                }
-
                 onClosed: {
                     GlobalStates.sidebarLeftOpen = false;
-                    barLoader.active = false;
+                    panelLoader.active = false;
                 }
             }
         }

dots/.config/quickshell/ii/modules/waffle/actionCenter/bluetooth/BluetoothControl.qml

@@ -23,7 +23,7 @@ Item {
         Bluetooth.defaultAdapter.discovering = false;
     }
 
-    PageColumn {
+    WPanelPageColumn {
         anchors.fill: parent
 
         BodyRectangle {
@@ -96,7 +96,7 @@ Item {
             }
         }
 
-        Separator {}
+        WPanelSeparator {}
 
         FooterRectangle {
             FooterMoreButton {

dots/.config/quickshell/ii/modules/waffle/actionCenter/nightLight/NightLightControl.qml

@@ -24,7 +24,7 @@ Item {
         Bluetooth.defaultAdapter.discovering = false;
     }
 
-    PageColumn {
+    WPanelPageColumn {
         anchors.fill: parent
 
         BodyRectangle {
@@ -61,7 +61,7 @@ Item {
             }
         }
 
-        Separator {}
+        WPanelSeparator {}
 
         FooterRectangle {}
     }

dots/.config/quickshell/ii/modules/waffle/actionCenter/volumeControl/VolumeControl.qml

@@ -14,7 +14,7 @@ Item {
     id: root
     property bool output: true
 
-    PageColumn {
+    WPanelPageColumn {
         anchors.fill: parent
 
         BodyRectangle {
@@ -48,7 +48,7 @@ Item {
             }
         }
 
-        Separator {}
+        WPanelSeparator {}
 
         FooterRectangle {
             WButton {
@@ -103,7 +103,7 @@ Item {
             }
         }
 
-        Separator {
+        WPanelSeparator {
             visible: EasyEffects.available && root.output
             color: Looks.colors.bg2Hover
         }
@@ -129,7 +129,7 @@ Item {
             onClicked: EasyEffects.enable()
         }
 
-        Separator {
+        WPanelSeparator {
             color: Looks.colors.bg2Hover
         }
 

dots/.config/quickshell/ii/modules/waffle/actionCenter/wifi/WifiControl.qml

@@ -19,7 +19,7 @@ Item {
         Network.rescanWifi();
     }
 
-    PageColumn {
+    WPanelPageColumn {
         anchors.fill: parent
 
         BodyRectangle {
@@ -86,7 +86,7 @@ Item {
             }
         }
 
-        Separator {}
+        WPanelSeparator {}
 
         FooterRectangle {
             FooterMoreButton {

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

@@ -12,6 +12,6 @@ Rectangle {
     Layout.fillWidth: true
     color: "transparent"
 
-    implicitWidth: 360
+    implicitWidth: 358
     implicitHeight: 47
 }

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

@@ -20,7 +20,7 @@ Singleton {
     property real backgroundTransparency: 0.13
     property real panelBackgroundTransparency: 0.12
     property real panelLayerTransparency: root.dark ? 0.9 : 0.7
-    property real contentTransparency: root.dark ? 0.9 : 0.5
+    property real contentTransparency: root.dark ? 0.87 : 0.5
     function applyBackgroundTransparency(col) {
         return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency)
     }
@@ -41,8 +41,8 @@ Singleton {
         property color bg1Border: '#d7d7d7'
         property color bg2: "#FBFBFB"
         property color bg2Base: "#FBFBFB"
-        property color bg2Hover: "#FDFDFD"
+        property color bg2Hover: '#ffffff'
-        property color bg2Active: "#FDFDFD"
+        property color bg2Active: '#eeeeee'
         property color bg2Border: '#cdcdcd'
         property color subfg: "#5C5C5C"
         property color fg: "#000000"

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

@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
@@ -10,11 +11,13 @@ import qs.modules.waffle.looks
 Item {
     id: root
 
-    signal closed()
+    signal closed
 
     required property Item contentItem
     property real visualMargin: 12
     property int closeAnimDuration: 150
+    property bool revealFromSides: false
+    property bool revealFromLeft: true
 
     function close() {
         closeAnim.start();
@@ -25,16 +28,25 @@ Item {
     implicitHeight: contentItem.implicitHeight + visualMargin * 2
     implicitWidth: contentItem.implicitWidth + visualMargin * 2
 
+    focus: true
+    Keys.onPressed: event => { // Esc to close
+        if (event.key === Qt.Key_Escape) {
+            content.close();
+        }
+    }
+
     Item {
         id: panelContent
         anchors {
-            left: parent.left
+            left: (root.revealFromSides && !root.revealFromLeft) ? undefined : parent.left
-            right: parent.right
+            right: (root.revealFromSides && root.revealFromLeft) ? undefined : parent.right
-            top: root.barAtBottom ? undefined : parent.top
+            top: (!root.revealFromSides && root.barAtBottom) ? undefined : parent.top
-            bottom: root.barAtBottom ? parent.bottom : undefined
+            bottom: (!root.revealFromSides && !root.barAtBottom) ? undefined : parent.bottom
             // Opening anim
-            bottomMargin: root.barAtBottom ? sourceEdgeMargin : root.visualMargin
+            bottomMargin: (!root.revealFromSides && root.barAtBottom) ? sourceEdgeMargin : root.visualMargin
-            topMargin: root.barAtBottom ? root.visualMargin : sourceEdgeMargin
+            topMargin: (!root.revealFromSides && !root.barAtBottom) ? sourceEdgeMargin : root.visualMargin
+            leftMargin: (root.revealFromSides && root.revealFromLeft) ? sideEdgeMargin : root.visualMargin
+            rightMargin: (root.revealFromSides && !root.revealFromLeft) ? sideEdgeMargin : root.visualMargin
         }
 
         Component.onCompleted: {
@@ -42,24 +54,22 @@ Item {
         }
 
         property real sourceEdgeMargin: -(implicitHeight + root.visualMargin)
-        PropertyAnimation {
+        property real sideEdgeMargin: -(implicitWidth + root.visualMargin)
+        OpenAnim {
             id: openAnim
-            target: panelContent
+            properties: "sourceEdgeMargin, sideEdgeMargin"
-            property: "sourceEdgeMargin"
-            to: root.visualMargin
-            duration: 200
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
         }
         SequentialAnimation {
             id: closeAnim
-            PropertyAnimation {
+            ParallelAnimation {
-                target: panelContent
+                CloseAnim {
-                property: "sourceEdgeMargin"
+                    property: "sourceEdgeMargin"
-                to: -(implicitHeight + root.visualMargin)
+                    to: -(implicitHeight + root.visualMargin)
-                duration: root.closeAnimDuration
+                }
-                easing.type: Easing.BezierSpline
+                CloseAnim {
-                easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+                    property: "sideEdgeMargin"
+                    to: -(implicitWidth + root.visualMargin)
+                }
             }
             ScriptAction {
                 script: {
@@ -70,5 +80,19 @@ Item {
         implicitWidth: root.contentItem.implicitWidth
         implicitHeight: root.contentItem.implicitHeight
         children: [root.contentItem]
-    }    
+    }
+
+    component OpenAnim: PropertyAnimation {
+        target: panelContent
+        to: root.visualMargin
+        duration: 200
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+    }
+    component CloseAnim: PropertyAnimation {
+        target: panelContent
+        duration: root.closeAnimDuration
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+    }
 }

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

@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+WButton {
+    id: root
+
+    colBackground: Looks.colors.bg2
+    colBackgroundHover: Looks.colors.bg2Hover
+    colBackgroundActive: Looks.colors.bg2Active
+    border.color: Looks.colors.bg2Border
+    border.width: root.pressed ? 2 : 1
+
+    
+}

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

@@ -15,8 +15,8 @@ Item {
     property alias border: borderRect
     property alias borderColor: borderRect.border.color
 
-    implicitWidth: contentItem.implicitWidth
+    implicitWidth: borderRect.implicitWidth
-    implicitHeight: contentItem.implicitHeight
+    implicitHeight: borderRect.implicitHeight
 
     WRectangularShadow {
         target: borderRect

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

@@ -0,0 +1,51 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+FooterRectangle {
+    id: root
+
+    property bool collapsed
+    implicitWidth: 334
+
+    RowLayout {
+        anchors {
+            fill: parent
+            leftMargin: 16
+            rightMargin: 16
+            topMargin: 12
+            bottomMargin: 12
+        }
+
+        WText {
+            Layout.fillWidth: true
+            font.pixelSize: Looks.font.pixelSize.large
+            text: DateTime.collapsedCalendarFormat
+        }
+
+        WBorderedButton {
+            implicitWidth: 24
+            implicitHeight: 24
+            padding: 0
+            onClicked: root.collapsed = !root.collapsed
+            contentItem: Item {
+                FluentIcon {
+                    anchors.centerIn: parent
+                    implicitSize: 12
+                    icon: "chevron-down"
+                    rotation: root.collapsed ? 180 : 0
+                    Behavior on rotation {
+                        animation: Looks.transition.rotate.createObject(this)
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+BodyRectangle {
+    id: root
+
+    property bool collapsed
+    implicitHeight: collapsed ? 0 : 400 // For now
+    implicitWidth: 334
+
+    Behavior on implicitHeight {
+        animation: Looks.transition.enter.createObject(this)
+    }
+
+}

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

@@ -0,0 +1,87 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+FooterRectangle {
+    Layout.fillWidth: true
+    implicitWidth: 334
+
+    RowLayout {
+        anchors {
+            fill: parent
+            leftMargin: 16
+            rightMargin: 16
+            topMargin: 12
+            bottomMargin: 12
+        }
+        spacing: 0
+
+        SmallBorderedIconButton {
+            visible: !TimerService.pomodoroRunning
+            icon.name: "subtract"
+            onClicked: Config.options.time.pomodoro.focus -= 300 // 5 mins
+        }
+
+        WTextWithFixedWidth {
+            visible: !TimerService.pomodoroRunning
+            implicitWidth: 81
+            horizontalAlignment: Text.AlignHCenter
+            color: Looks.colors.subfg
+            text: Translation.tr("%1 mins").arg(`<font color="${Looks.colors.fg.toString()}">${TimerService.focusTime / 60}</font>`)
+        }
+
+        SmallBorderedIconButton {
+            visible: !TimerService.pomodoroRunning
+            icon.name: "add"
+            onClicked: Config.options.time.pomodoro.focus += 300 // 5 mins
+        }
+
+        WText {
+            visible: TimerService.pomodoroRunning
+            font.pixelSize: Looks.font.pixelSize.large
+            text: Translation.tr("Focusing")
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        SmallBorderedIconButton {
+            leftPadding: 12
+            rightPadding: 12
+            implicitWidth: focusButtonContent.implicitWidth + leftPadding + rightPadding
+
+            onClicked: {
+                if (TimerService.pomodoroRunning) {
+                    TimerService.togglePomodoro()
+                    TimerService.resetPomodoro()
+                } else {
+                    TimerService.togglePomodoro()
+                    Quickshell.execDetached(["qs", "-p", Quickshell.shellPath(""), "ipc", "call", "sidebarRight", "toggle"]);
+                }
+            }
+
+            contentItem: Row {
+                id: focusButtonContent
+                spacing: 4
+                FluentIcon {
+                    icon: TimerService.pomodoroRunning ? "stop" : "play"
+                    filled: true
+                    implicitSize: 14
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                WText {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: TimerService.pomodoroRunning ? Translation.tr("End session") : Translation.tr("Focus")
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,57 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Qt.labs.synchronizer
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+WBarAttachedPanelContent {
+    id: root
+
+    readonly property bool barAtBottom: Config.options.waffles.bar.bottom
+    revealFromSides: true
+    revealFromLeft: false
+
+    property bool collapsed: false
+
+    contentItem: Column {
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: root.barAtBottom ? undefined : parent.top
+            bottom: root.barAtBottom ? parent.bottom : undefined
+        }
+        spacing: 12
+
+        WPane {
+            contentItem: ColumnLayout {
+                spacing: 0
+                CalendarHeader {
+                    Layout.fillWidth: true
+                    Synchronizer on collapsed {
+                        property alias source: root.collapsed
+                    }
+                }
+
+                WPanelSeparator { visible: !root.collapsed }
+
+                CalendarView {
+                    Layout.fillWidth: true
+                    Synchronizer on collapsed {
+                        property alias source: root.collapsed
+                    }
+                }
+
+                WPanelSeparator {}
+
+                FocusFooter {
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+import QtQuick
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+WBorderedButton {
+    id: root
+    implicitWidth: 24
+    implicitHeight: 24
+    contentItem: Item {
+        FluentIcon {
+            anchors.centerIn: parent
+            implicitSize: 12
+            icon: root.icon.name
+        }
+    }
+}

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

@@ -0,0 +1,85 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+Scope {
+    id: root
+
+    Connections {
+        target: GlobalStates
+
+        function onSidebarRightOpenChanged() {
+            if (GlobalStates.sidebarRightOpen) panelLoader.active = true;
+        }
+    }
+
+    Loader {
+        id: panelLoader
+        active: GlobalStates.sidebarRightOpen
+        sourceComponent: PanelWindow {
+            id: panelWindow
+            exclusiveZone: 0
+            WlrLayershell.namespace: "quickshell:wNotificationCenter"
+            WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
+            color: "transparent"
+
+            anchors {
+                bottom: true
+                top: true
+                right: true
+            }
+
+            implicitWidth: content.implicitWidth
+            implicitHeight: content.implicitHeight
+
+            HyprlandFocusGrab {
+                id: focusGrab
+                active: true
+                windows: [panelWindow]
+                onCleared: content.close();
+            }
+
+            Connections {
+                target: GlobalStates
+                function onSidebarRightOpenChanged() {
+                    if (!GlobalStates.sidebarRightOpen) content.close();
+                }
+            }
+
+            NotificationCenterContent {
+                id: content
+                anchors.fill: parent
+
+                onClosed: {
+                    GlobalStates.sidebarRightOpen = false;
+                    panelLoader.active = false;
+                }
+            }
+        }
+    }
+
+    function toggleOpen() {
+        GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
+    }
+
+    IpcHandler {
+        target: "sidebarRight"
+
+        function toggle() {
+            root.toggleOpen();
+        }
+    }
+
+    GlobalShortcut {
+        name: "sidebarRightToggle"
+        description: "Toggles notification center on press"
+
+        onPressed: root.toggleOpen();
+    }
+}

dots/.config/quickshell/ii/services/DateTime.qml

@@ -22,7 +22,7 @@ Singleton {
     property string shortDate: Qt.locale().toString(clock.date, Config.options?.time.shortDateFormat ?? "dd/MM")
     property string date: Qt.locale().toString(clock.date, Config.options?.time.dateWithYearFormat ?? "dd/MM/yyyy")
     property string longDate: Qt.locale().toString(clock.date, Config.options?.time.dateFormat ?? "dddd, dd/MM")
-    property string collapsedCalendarFormat: Qt.locale().toString(clock.date, "dd MMMM yyyy")
+    property string collapsedCalendarFormat: Qt.locale().toString(clock.date, "dddd, MMMM dd")
     property string uptime: "0h, 0m"
 
     Timer {

dots/.config/quickshell/ii/shell.qml

@@ -31,6 +31,7 @@ import qs.modules.ii.wallpaperSelector
 import qs.modules.waffle.actionCenter
 import qs.modules.waffle.background
 import qs.modules.waffle.bar
+import qs.modules.waffle.notificationCenter
 import qs.modules.waffle.onScreenDisplay
 
 import QtQuick
@@ -79,6 +80,7 @@ ShellRoot {
     PanelLoader { identifier: "wActionCenter"; component: WaffleActionCenter {} }
     PanelLoader { identifier: "wBar"; component: WaffleBar {} }
     PanelLoader { identifier: "wBackground"; component: WaffleBackground {} }
+    PanelLoader { identifier: "wNotificationCenter"; component: WaffleNotificationCenter {} }
     PanelLoader { identifier: "wOnScreenDisplay"; component: WaffleOSD {} }
     ReloadPopup {}
 
@@ -92,7 +94,7 @@ ShellRoot {
     property list<string> families: ["ii", "waffle"]
     property var panelFamilies: ({
         "ii": ["iiBar", "iiBackground", "iiCheatsheet", "iiDock", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenDisplay", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiScreenCorners", "iiSessionScreen", "iiSidebarLeft", "iiSidebarRight", "iiVerticalBar", "iiWallpaperSelector"],
-        "waffle": ["wActionCenter", "wBar", "wBackground", "wOnScreenDisplay", "iiCheatsheet", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiSessionScreen", "iiSidebarRight", "iiWallpaperSelector"],
+        "waffle": ["wActionCenter", "wBar", "wBackground", "wNotificationCenter", "wOnScreenDisplay", "iiCheatsheet", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiSessionScreen", "iiWallpaperSelector"],
     })
     function cyclePanelFamily() {
         const currentIndex = families.indexOf(Config.options.panelFamily)