better structure

config/quickshell/Modules/Bar/Bar.qml

@@ -0,0 +1,256 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Services.UPower
+import Quickshell.Wayland
+import qs.Constants
+import qs.Modules.Bar.Components
+import qs.Modules.Bar.Misc
+import qs.Modules.Misc
+import qs.Services
+
+Variants {
+    model: Quickshell.screens
+
+    Item {
+        property var modelData
+
+        PanelWindow {
+            id: panel
+
+            screen: modelData
+            WlrLayershell.namespace: "quickshell-bar"
+            color: Colors.transparent
+            implicitHeight: Style.barHeight
+
+            anchors {
+                left: true
+                right: true
+                top: true
+            }
+
+            Rectangle {
+                id: barBackground
+
+                anchors.fill: parent
+                color: Niri.noFocus ? null : Colors.base
+
+                gradient: Gradient {
+                    GradientStop {
+                        position: 0
+                        color: Qt.rgba(Colors.base.r, Colors.base.g, Colors.base.b, Niri.noFocus ? 0.8 : 1)
+
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: Style.animationSlowest
+                                easing.type: Easing.InOutCubic
+                            }
+
+                        }
+
+                    }
+
+                    GradientStop {
+                        position: 1
+                        color: Qt.rgba(Colors.base.r, Colors.base.g, Colors.base.b, Niri.noFocus ? 0 : 1)
+
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: Style.animationSlowest
+                                easing.type: Easing.InOutCubic
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+            RowLayout {
+                id: leftLayout
+
+                height: parent.height - 10
+
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: 5
+                }
+
+                SymbolButton {
+                    symbol: Icons.distro
+                    buttonColor: Colors.distroColor
+                    onClicked: {
+                        PanelService.getPanel("controlCenterPanel")?.toggle(this)
+                    }
+                    onRightClicked: {
+                        if (action.running) {
+                            action.signal(15);
+                            return ;
+                        }
+                        action.exec(["rofi", "-show", "drun"]);
+                    }
+                }
+
+                Separator {
+                }
+
+                Workspace {
+                    screen: modelData
+                }
+
+                Separator {
+                }
+
+                Item {
+                    width: 10
+                }
+
+                CavaBar {
+                    count: 6
+                }
+
+                Item {
+                    width: 10
+                }
+
+                Separator {
+                }
+
+                Item {
+                    width: 10
+                }
+
+                FocusedWindow {
+                    maxWidth: 400
+                }
+
+            }
+
+            RowLayout {
+                id: middleLayout
+
+                height: parent.height - 10
+
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    verticalCenter: parent.verticalCenter
+                }
+
+                Time {
+                }
+
+            }
+
+            RowLayout {
+                id: rightLayout
+
+                height: parent.height - 10
+
+                anchors {
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    rightMargin: 5
+                }
+
+                RowLayout {
+                    id: monitorsLayout
+                    visible: !SettingsService.showLyricsBar
+
+                    height: parent.height
+                    NetworkSpeed {
+                    }
+
+                    Separator {
+                    }
+
+                    Item {
+                        width: 10
+                    }
+
+                    RecordIndicator {
+                    }
+
+                    Ip {
+                        showCountryCode: true
+                    }
+
+                    CpuTemp {
+                    }
+
+                    MemUsage {
+                    }
+
+                    CpuUsage {
+                    }
+
+                    Battery {
+                    }
+
+                    Brightness {
+                        screen: modelData
+                    }
+
+                    Volume {
+                    }
+                }
+
+                LyricsBar {
+                    id: lyricsBar
+                    visible: SettingsService.showLyricsBar
+                    width: 600
+                }
+
+                Item {
+                    width: 5
+                }
+
+                Separator {
+                }
+
+                Item {
+                    width: 5
+                }
+
+                TrayExpander {
+                    screen: modelData
+                }
+
+                SymbolButton {
+                    symbol: Caffeine.isInhibited ? Icons.idleInhibitorActivated : Icons.idleInhibitorDeactivated
+                    buttonColor: Caffeine.isInhibited ? Colors.peach : Colors.yellow
+                    onClicked: {
+                        Caffeine.manualToggle();
+                    }
+
+                }
+
+                SymbolButton {
+                    symbol: Icons.powerMenu
+                    buttonColor: Colors.red
+                    onClicked: {
+                        if (action.running) {
+                            action.signal(15);
+                            return ;
+                        }
+                        Quickshell.execDetached(["wlogout"]);
+                    }
+                }
+
+            }
+
+            Process {
+                id: action
+
+                running: false
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Bar/Components/Battery.qml

@@ -0,0 +1,23 @@
+import QtQuick
+import Quickshell.Services.UPower
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Services
+
+MonitorItem {
+    readonly property var battery: UPower.displayDevice
+    readonly property bool isReady: (battery && battery.ready && battery.isLaptopBattery && battery.isPresent)
+    readonly property real percent: (isReady ? (battery.percentage * 100) : 0)
+    readonly property bool charging: (isReady ? battery.state === UPowerDeviceState.Charging : false)
+    property int lowBatteryThreshold: 20
+
+    symbol: {
+        return charging ? Icons.charging : percent >= 80 ? Icons.battery100 : percent >= 60 ? Icons.battery75 : percent >= 40 ? Icons.battery50 : percent >= 20 ? Icons.battery25 : Icons.battery00;
+    }
+    fillColor: Colors.sapphire
+    value: percent
+    critical: isReady && !charging && percent <= lowBatteryThreshold
+    maxValue: 100
+    textSuffix: "%"
+    pointerCursor: false
+}

config/quickshell/Modules/Bar/Components/Brightness.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import Quickshell
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Services
+
+MonitorItem {
+    property ShellScreen screen: null
+
+    function getMonitor() {
+        return BrightnessService.getMonitorForScreen(screen) || null;
+    }
+
+    symbol: Icons.brightness
+    fillColor: Colors.blue
+    value: {
+        const monitor = getMonitor();
+        return monitor ? Math.round(monitor.brightness * 100) : "N/A";
+    }
+    maxValue: 100
+    textSuffix: "%"
+    expandOnValueChange: true
+    onWheelUp: {
+        const monitor = getMonitor();
+        if (monitor)
+            monitor.increaseBrightness();
+
+    }
+    onWheelDown: {
+        const monitor = getMonitor();
+        if (monitor)
+            monitor.decreaseBrightness();
+
+    }
+}

config/quickshell/Modules/Bar/Components/CavaBar.qml

@@ -0,0 +1,73 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Constants
+import qs.Services
+import qs.Utils
+
+Item {
+    id: root
+
+    property int count: 6
+    property int barWidth: 5
+    property int barSpacing: 3
+
+    implicitWidth: root.barWidth * root.count + root.barSpacing * (root.count - 1)
+    implicitHeight: parent.height - 10
+
+    Cava {
+        id: cavaProcess
+
+        count: root.count
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        spacing: root.barSpacing
+
+        anchors {
+            verticalCenter: parent.verticalCenter
+        }
+
+        Repeater {
+            model: cavaProcess.values
+
+            Rectangle {
+                width: root.barWidth
+                implicitHeight: Math.max(1, modelData * (parent.height - 10))
+                color: Colors.cavaList[Math.min(Math.floor(modelData * (Colors.cavaList.length - 1)), Colors.cavaList.length - 1)]
+
+                Behavior on height {
+                    NumberAnimation {
+                        duration: 100
+                        easing.type: Easing.InOutCubic
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.LeftButton)
+                MusicManager.playPause();
+            else if (mouse.button === Qt.RightButton)
+                SettingsService.showLyricsBar = !SettingsService.showLyricsBar;
+        }
+        onWheel: function(wheel) {
+            if (wheel.angleDelta.y > 0)
+                MusicManager.previous();
+            else if (wheel.angleDelta.y < 0)
+                MusicManager.next();
+        }
+    }
+
+}

config/quickshell/Modules/Bar/Components/CpuTemp.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import Quickshell.Io
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Services
+
+MonitorItem {
+    symbol: SystemStatService.cpuTemp > 80 ? Icons.tempHigh : SystemStatService.cpuTemp > 50 ? Icons.tempMedium : Icons.tempLow
+    fillColor: Colors.yellow
+    critical: SystemStatService.cpuTemp > 80
+    value: Math.round(SystemStatService.cpuTemp)
+    maxValue: 100
+    textSuffix: "°C"
+    onClicked: {
+        if (action.running) {
+            action.signal(15);
+            return ;
+        }
+        action.exec(["ghostty", "-e", "btop"]);
+    }
+
+    Process {
+        id: action
+
+        running: false
+    }
+
+}

config/quickshell/Modules/Bar/Components/CpuUsage.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import Quickshell.Io
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Services
+
+MonitorItem {
+    symbol: Icons.cpu
+    fillColor: Colors.teal
+    critical: SystemStatService.cpuUsage > 90
+    value: Math.round(SystemStatService.cpuUsage)
+    maxValue: 100
+    textSuffix: "%"
+    onClicked: {
+        if (action.running) {
+            action.signal(15);
+            return ;
+        }
+        action.exec(["ghostty", "-e", "btop"]);
+    }
+
+    Process {
+        id: action
+
+        running: false
+    }
+
+}

config/quickshell/Modules/Bar/Components/FocusedWindow.qml

@@ -0,0 +1,129 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import qs.Constants
+import qs.Services
+import qs.Utils
+
+Item {
+    id: root
+
+    property real maxWidth: 250
+    property string fallbackIcon: "application-x-executable"
+
+    function getAppIcon(appId) {
+        try {
+            if (appId) {
+                try {
+                    const normalizedId = (typeof appId === 'string') ? appId : String(appId);
+                    const iconResult = ThemeIcons.iconForAppId(normalizedId.toLowerCase());
+                    if (iconResult && iconResult !== "")
+                        return iconResult;
+
+                } catch (iconError) {
+                    Logger.warn("FocusedWindow", "Error getting icon from CompositorService: " + iconError);
+                }
+            }
+            return ThemeIcons.iconFromName(root.fallbackIcon);
+        } catch (e) {
+            Logger.warn("FocusedWindow", "Error in getAppIcon:", e);
+            return ThemeIcons.iconFromName(root.fallbackIcon);
+        }
+    }
+
+    implicitHeight: parent.height
+
+    RowLayout {
+        id: layout
+
+        anchors.fill: parent
+        spacing: 10
+        visible: Niri.focusedWindowId !== -1
+
+        Item {
+            // Layout.alignment: Qt.AlignVCenter
+
+            id: iconContainer
+
+            implicitWidth: 18
+            implicitHeight: 18
+
+            IconImage {
+                id: windowIcon
+
+                anchors.fill: parent
+                source: getAppIcon(Niri.focusedWindowAppId)
+                asynchronous: true
+                smooth: true
+                visible: source !== ""
+            }
+
+        }
+
+        Item {
+            id: titleContainer
+
+            implicitWidth: root.maxWidth
+            implicitHeight: parent.height
+            // Layout.alignment: Qt.AlignVCenter
+            clip: true
+
+            Text {
+                id: windowTitle
+
+                text: Niri.focusedWindowTitle
+                anchors.verticalCenter: parent.verticalCenter
+                font.pointSize: Fonts.medium
+                font.family: Fonts.primary
+                color: Colors.primary
+
+                MouseArea {
+                    id: mouseArea
+
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    hoverEnabled: true
+                    acceptedButtons: Qt.LeftButton | Qt.MiddleButton
+                    onEntered: {
+                        if (windowTitle.implicitWidth > titleContainer.width)
+                            windowTitle.x = titleContainer.width - windowTitle.implicitWidth;
+
+                    }
+                    onExited: {
+                        windowTitle.x = 0;
+                    }
+                    onClicked: function(mouse) {
+                        if (mouse.button === Qt.MiddleButton)
+                            Quickshell.execDetached(["niri", "msg", "action", "close-window"]);
+                        else if (mouse.button === Qt.LeftButton)
+                            Quickshell.execDetached(["niri", "msg", "action", "center-window"]);
+                    }
+                    onWheel: function(wheel) {
+                        if (wheel.angleDelta.y > 0)
+                            Quickshell.execDetached(["niri", "msg", "action", "set-column-width", "+10%"]);
+                        else if (wheel.angleDelta.y < 0)
+                            Quickshell.execDetached(["niri", "msg", "action", "set-column-width", "-10%"]);
+                        else if (wheel.angleDelta.x > 0)
+                            Quickshell.execDetached(["niri", "msg", "action", "focus-column-left"]);
+                        else if (wheel.angleDelta.x < 0)
+                            Quickshell.execDetached(["niri", "msg", "action", "focus-column-right"]);
+                    }
+                }
+
+                Behavior on x {
+                    NumberAnimation {
+                        duration: 1000
+                        easing.type: Easing.OutCubic
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Bar/Components/Ip.qml

@@ -0,0 +1,85 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Services
+
+Item {
+    // Text {
+    //     id: ipText
+    //     anchors.verticalCenter: parent.verticalCenter
+    //     text: Icons.global + " " + (showCountryCode ? IpService.countryCode : IpService.ip)
+    //     font.pixelSize: Fonts.medium
+    //     color: Colors.peach
+    // }
+
+    id: root
+
+    property bool showCountryCode: true
+
+    implicitHeight: parent.height
+    implicitWidth: layout.width + 10
+
+    RowLayout {
+        id: layout
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        spacing: 0
+
+        Text {
+            text: Icons.global
+            font.pointSize: Fonts.icon + 6
+            color: Colors.peach
+        }
+
+        Item {
+            id: expander
+
+            implicitWidth: mouseArea.containsMouse ? ipText.implicitWidth + 10 : 0
+            implicitHeight: parent.height
+            clip: true
+
+            Text {
+                id: ipText
+
+                text: showCountryCode ? IpService.countryCode : IpService.ip
+                font.pointSize: showCountryCode ? Fonts.medium : Fonts.small
+                font.family: Fonts.primary
+                color: Colors.peach
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+            }
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: Style.animationFast
+                    easing.type: Easing.InOutCubic
+                }
+
+            }
+
+        }
+
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.LeftButton) {
+                WriteClipboard.write(showCountryCode ? IpService.countryCode : IpService.ip);
+                SendNotification.show("Copied to clipboard", showCountryCode ? IpService.countryCode : IpService.ip);
+            } else if (mouse.button === Qt.RightButton)
+                showCountryCode = !showCountryCode;
+            else if (mouse.button === Qt.MiddleButton)
+                IpService.refresh();
+        }
+    }
+
+}

config/quickshell/Modules/Bar/Components/LyricsBar.qml

@@ -0,0 +1,89 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+
+Rectangle {
+    implicitHeight: parent.height
+    radius: Style.radiusS
+    color: Colors.base
+    border.color: Colors.primary
+    border.width: Style.borderS
+
+    Connections {
+        function onShowLyricsBarChanged() {
+            visible = SettingsService.showLyricsBar;
+            if (visible)
+                LyricsService.startSyncing();
+            else
+                LyricsService.stopSyncing();
+        }
+
+        target: SettingsService
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        anchors.leftMargin: Style.marginM
+        anchors.rightMargin: Style.marginM
+        spacing: Style.marginS
+
+        Item {
+            implicitWidth: parent.width - slowerButton.implicitWidth * 3 - parent.spacing * 3 - parent.anchors.leftMargin - parent.anchors.rightMargin
+            Layout.fillHeight: true
+            clip: true
+
+            NText {
+                text: LyricsService.lyrics[LyricsService.currentIndex] || ""
+                family: Fonts.sans
+                pointSize: Style.fontSizeS
+                maximumLineCount: 1
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+        }
+
+        NIconButton {
+            id: slowerButton
+
+            baseSize: 24
+            colorBg: Color.transparent
+            colorBgHover: Colors.blue
+            colorFg: Colors.blue
+            icon: "rotate-2"
+            onClicked: {
+                LyricsService.increaseOffset();
+            }
+        }
+
+        NIconButton {
+            id: playPauseButton
+
+            baseSize: 24
+            colorBg: Color.transparent
+            colorBgHover: Colors.yellow
+            colorFg: Colors.yellow
+            icon: "rotate-clockwise-2"
+            onClicked: {
+                LyricsService.decreaseOffset();
+            }
+        }
+
+        NIconButton {
+            id: nextButton
+
+            baseSize: 24
+            colorBg: Color.transparent
+            colorBgHover: Colors.green
+            colorFg: Colors.green
+            icon: "rotate-clockwise"
+            onClicked: {
+                LyricsService.resetOffset();
+            }
+        }
+
+    }
+
+}

config/quickshell/Modules/Bar/Components/MemUsage.qml

@@ -0,0 +1,34 @@
+import QtQuick
+import Quickshell.Io
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Services
+
+MonitorItem {
+    property bool showPercent: false
+
+    symbol: Icons.memory
+    fillColor: Colors.green
+    critical: SystemStatService.memPercent > 90
+    value: Math.round(SystemStatService.memPercent)
+    maxValue: 100
+    textValue: showPercent ? SystemStatService.memPercent : SystemStatService.memGb
+    textSuffix: showPercent ? "%" : "GB"
+    onClicked: {
+        if (action.running) {
+            action.signal(15);
+            return ;
+        }
+        action.exec(["ghostty", "-e", "btop"]);
+    }
+    onRightClicked: {
+        showPercent = !showPercent;
+    }
+
+    Process {
+        id: action
+
+        running: false
+    }
+
+}

config/quickshell/Modules/Bar/Components/NetworkSpeed.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Services
+
+Item {
+    implicitHeight: parent.height
+    implicitWidth: layout.width + 10
+
+    RowLayout {
+        id: layout
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        spacing: 5
+
+        Text {
+            text: Icons.download
+            font.pointSize: Fonts.icon - 3
+            color: Colors.primary
+            Layout.leftMargin: 10
+        }
+
+        Text {
+            text: SystemStatService.formatSpeed(SystemStatService.rxSpeed)
+            font.pointSize: Fonts.medium
+            font.family: Fonts.primary
+            color: Colors.primary
+        }
+
+        Item {
+            width: 5
+        }
+
+        Text {
+            text: Icons.upload
+            font.pointSize: Fonts.icon - 3
+            color: Colors.primary
+        }
+
+        Text {
+            text: SystemStatService.formatSpeed(SystemStatService.txSpeed)
+            font.pointSize: Fonts.medium
+            font.family: Fonts.primary
+            color: Colors.primary
+        }
+
+    }
+
+}

config/quickshell/Modules/Bar/Components/RecordIndicator.qml

@@ -0,0 +1,107 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Services
+
+Item {
+    id: root
+
+    property color fillColor: Colors.red
+    property color _actualColor: Colors.red
+
+    visible: RecordService.isRecording
+    implicitHeight: parent.height
+    implicitWidth: layout.width + 10
+
+    SequentialAnimation {
+        id: blinkAnimation
+
+        running: RecordService.isRecording
+        loops: Animation.Infinite
+
+        ColorAnimation {
+            target: root
+            property: "_actualColor"
+            to: Qt.rgba(fillColor.r, fillColor.g, fillColor.b, 0)
+            duration: Style.animationSlowest
+            easing.type: Easing.InOutCubic
+        }
+
+        ColorAnimation {
+            target: root
+            property: "_actualColor"
+            to: fillColor
+            duration: Style.animationSlowest
+            easing.type: Easing.InOutCubic
+        }
+
+    }
+
+    RowLayout {
+        id: layout
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        spacing: 0
+
+        Text {
+            text: Icons.record
+            font.pointSize: Fonts.icon + 6
+            color: _actualColor
+        }
+
+        Item {
+            id: expander
+
+            implicitWidth: mouseArea.containsMouse ? ipText.implicitWidth + 10 : 0
+            implicitHeight: parent.height
+            clip: true
+
+            Text {
+                id: ipText
+
+                text: RecordService.recordingDisplay
+                font.pointSize: Fonts.medium
+                font.family: Fonts.primary
+                color: fillColor
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+            }
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: Style.animationFast
+                    easing.type: Easing.InOutCubic
+                }
+
+            }
+
+        }
+
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.LeftButton)
+                RecordService.startOrStop();
+
+        }
+    }
+
+    Behavior on _actualColor {
+        ColorAnimation {
+            duration: Style.animationFast
+            easing.type: Easing.InOutCubic
+        }
+
+    }
+
+}

config/quickshell/Modules/Bar/Components/Separator.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Constants
+
+Item {
+    id: root
+
+    implicitHeight: parent.height
+
+    Rectangle {
+        anchors.centerIn: parent
+        width: 1.5
+        height: parent.height * 0.32
+        color: Colors.text
+    }
+
+}

config/quickshell/Modules/Bar/Components/Time.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import qs.Constants
+import qs.Services
+
+Text {
+    text: TimeService.time + " | " + TimeService.dateString
+    font.pointSize: Fonts.medium
+    font.family: Fonts.primary
+    color: Colors.primary
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.LeftButton)
+                PanelService.getPanel("calendarPanel")?.toggle(this)
+            else if (mouse.button === Qt.RightButton)
+                PanelService.getPanel("notificationHistoryPanel")?.toggle(this)
+        }
+    }
+}

config/quickshell/Modules/Bar/Components/TrayExpander.qml

@@ -0,0 +1,61 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Modules.Bar.Misc
+
+Item {
+    id: root
+
+    property ShellScreen screen
+
+    implicitHeight: parent.height
+    implicitWidth: layout.implicitWidth
+
+    RowLayout {
+        id: layout
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        SymbolButton {
+            symbol: Icons.tray
+            buttonColor: Colors.green
+            disabledHover: true
+        }
+
+        Item {
+            id: trayContainer
+
+            implicitHeight: parent.height
+            implicitWidth: mouseArea.containsMouse ? expandedTray.implicitWidth : 0
+            clip: true
+
+            SystemTray {
+                id: expandedTray
+
+                screen: root.screen
+            }
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: 200
+                    easing.type: Easing.InOutCubic
+                }
+
+            }
+
+        }
+
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+    }
+
+}

config/quickshell/Modules/Bar/Components/Volume.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import Quickshell
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Services
+
+MonitorItem {
+    symbol: AudioService.muted ? Icons.volumeMuted : (AudioService.volume >= 0.5 ? Icons.volumeHigh : (AudioService.volume >= 0.2 ? Icons.volumeMedium : Icons.volumeLow))
+    fillColor: Colors.lavender
+    value: Math.round(AudioService.volume * 100)
+    maxValue: 100
+    textSuffix: "%"
+    expandOnValueChange: true
+    onWheelUp: {
+        AudioService.increaseVolume();
+    }
+    onWheelDown: {
+        AudioService.decreaseVolume();
+    }
+    onClicked: {
+        AudioService.toggleMute();
+    }
+    onRightClicked: {
+        Quickshell.execDetached(["sh", "-c", "pkill -x -n pavucontrol || pavucontrol"]);
+    }
+}

config/quickshell/Modules/Bar/Components/Workspace.qml

@@ -0,0 +1,299 @@
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import Quickshell
+import Quickshell.Io
+import qs.Constants
+import qs.Services
+
+Item {
+    id: root
+
+    required property ShellScreen screen
+    property bool hovered: false
+    property ListModel localWorkspaces
+    property real masterProgress: 0
+    property bool effectsActive: false
+    property color effectColor: Colors.primary
+    property int horizontalPadding: 16
+    property int spacingBetweenPills: 8
+    property bool isDestroying: false
+
+    signal workspaceChanged(int workspaceId, color primaryColor)
+
+    function triggerUnifiedWave() {
+        effectColor = Colors.primary;
+        masterAnimation.restart();
+    }
+
+    function updateWorkspaceFocus() {
+        for (let i = 0; i < localWorkspaces.count; i++) {
+            const ws = localWorkspaces.get(i);
+            if (ws.isFocused === true) {
+                root.triggerUnifiedWave();
+                root.workspaceChanged(ws.id, Colors.primary);
+                break;
+            }
+        }
+    }
+
+    implicitWidth: {
+        let total = 0;
+        for (let i = 0; i < localWorkspaces.count; i++) {
+            const ws = localWorkspaces.get(i);
+            if (ws.isFocused)
+                total += 44;
+            else if (ws.isActive)
+                total += 28;
+            else
+                total += 16;
+        }
+        total += Math.max(localWorkspaces.count - 1, 0) * spacingBetweenPills;
+        total += horizontalPadding * 2;
+        return total;
+    }
+    height: parent.height
+    Component.onCompleted: {
+        localWorkspaces.clear();
+        for (let i = 0; i < WorkspaceManager.workspaces.count; i++) {
+            const ws = WorkspaceManager.workspaces.get(i);
+            if (ws.output.toLowerCase() === screen.name.toLowerCase())
+                localWorkspaces.append(ws);
+
+        }
+        workspaceRepeater.model = localWorkspaces;
+        updateWorkspaceFocus();
+    }
+    Component.onDestruction: {
+        root.isDestroying = true;
+    }
+
+    Connections {
+        function onWorkspacesChanged() {
+            localWorkspaces.clear();
+            for (let i = 0; i < WorkspaceManager.workspaces.count; i++) {
+                const ws = WorkspaceManager.workspaces.get(i);
+                if (ws.output.toLowerCase() === screen.name.toLowerCase())
+                    localWorkspaces.append(ws);
+
+            }
+            workspaceRepeater.model = localWorkspaces;
+            updateWorkspaceFocus();
+        }
+
+        target: WorkspaceManager
+    }
+
+    SequentialAnimation {
+        id: masterAnimation
+
+        PropertyAction {
+            target: root
+            property: "effectsActive"
+            value: true
+        }
+
+        NumberAnimation {
+            target: root
+            property: "masterProgress"
+            from: 0
+            to: 1
+            duration: 1000
+            easing.type: Easing.OutQuint
+        }
+
+        PropertyAction {
+            target: root
+            property: "effectsActive"
+            value: false
+        }
+
+        PropertyAction {
+            target: root
+            property: "masterProgress"
+            value: 0
+        }
+
+    }
+
+    Rectangle {
+        id: workspaceBackground
+
+        width: parent.width - 15
+        height: 26
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        radius: 12
+        color: Colors.transparent
+        layer.enabled: true
+
+        layer.effect: DropShadow {
+            color: "black"
+            radius: 12
+            samples: 24
+            verticalOffset: 0
+            horizontalOffset: 0
+            opacity: 0.1
+        }
+
+    }
+
+    Row {
+        id: pillRow
+
+        spacing: spacingBetweenPills
+        anchors.verticalCenter: workspaceBackground.verticalCenter
+        width: root.width - horizontalPadding * 2
+        x: horizontalPadding
+
+        Repeater {
+            id: workspaceRepeater
+
+            model: localWorkspaces
+
+            Item {
+                id: workspacePillContainer
+
+                height: 12
+                width: {
+                    if (model.isFocused)
+                        return 44;
+                    else if (model.isActive)
+                        return 28;
+                    else
+                        return 16;
+                }
+
+                Rectangle {
+                    // half of focused height (if you want to animate this too)
+
+                    id: workspacePill
+
+                    anchors.fill: parent
+                    radius: {
+                        if (model.isFocused)
+                            return 12;
+                        else
+                            return 6;
+                    }
+                    color: {
+                        if (model.isFocused)
+                            return Colors.primary;
+
+                        if (model.isActive)
+                            return Colors.primary.lighter(130);
+
+                        if (model.isUrgent)
+                            return Theme.error;
+
+                        return Colors.surface2;
+                    }
+                    scale: model.isFocused ? 1 : 0.9
+                    z: 0
+
+                    MouseArea {
+                        id: pillMouseArea
+
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            WorkspaceManager.switchToWorkspace(model.idx);
+                        }
+                        z: 20
+                        hoverEnabled: true
+                    }
+                    // Material 3-inspired smooth animation for width, height, scale, color, opacity, and radius
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: 350
+                            easing.type: Easing.OutBack
+                        }
+
+                    }
+
+                    Behavior on height {
+                        NumberAnimation {
+                            duration: 350
+                            easing.type: Easing.OutBack
+                        }
+
+                    }
+
+                    Behavior on scale {
+                        NumberAnimation {
+                            duration: 300
+                            easing.type: Easing.OutBack
+                        }
+
+                    }
+
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: 200
+                            easing.type: Easing.InOutCubic
+                        }
+
+                    }
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: 200
+                            easing.type: Easing.InOutCubic
+                        }
+
+                    }
+
+                    Behavior on radius {
+                        NumberAnimation {
+                            duration: 350
+                            easing.type: Easing.OutBack
+                        }
+
+                    }
+
+                }
+
+                Rectangle {
+                    id: pillBurst
+
+                    anchors.centerIn: workspacePillContainer
+                    width: workspacePillContainer.width + 18 * root.masterProgress
+                    height: workspacePillContainer.height + 18 * root.masterProgress
+                    radius: width / 2
+                    color: "transparent"
+                    border.color: root.effectColor
+                    border.width: 2 + 6 * (1 - root.masterProgress)
+                    opacity: root.effectsActive && model.isFocused ? (1 - root.masterProgress) * 0.7 : 0
+                    visible: root.effectsActive && model.isFocused
+                    z: 1
+                }
+
+                Behavior on width {
+                    NumberAnimation {
+                        duration: 350
+                        easing.type: Easing.OutBack
+                    }
+
+                }
+
+                Behavior on height {
+                    NumberAnimation {
+                        duration: 350
+                        easing.type: Easing.OutBack
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+    localWorkspaces: ListModel {
+    }
+
+}

config/quickshell/Modules/Bar/Misc/MonitorItem.qml

@@ -0,0 +1,193 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+
+Item {
+    id: root
+
+    required property string symbol
+    property real maxValue: 100
+    property real value: 100
+    property string textValue: "" // override value in textDisplay if set
+    property color fillColor: Colors.primary
+    property string textSuffix: ""
+    property bool pointerCursor: true
+    property bool expandOnValueChange: false
+    property real hideTimeOut: 2000 // ms
+    property bool forceExpand: false
+    property bool _expand: forceExpand || mouseArea.containsMouse
+    property bool _isFirst: true
+    property bool disableHover: false
+    property bool critical: false
+    property color criticalColor: Colors.red
+    readonly property real ratio: value / maxValue
+    property color realColor: critical ? criticalColor : fillColor
+
+    signal wheelUp()
+    signal wheelDown()
+    signal clicked()
+    signal rightClicked()
+
+    implicitHeight: parent.height - 5
+    implicitWidth: parent.height + (_expand ? textDisplay.width : 0)
+
+    Loader {
+        id: connectionLoader
+
+        active: expandOnValueChange
+
+        sourceComponent: Connections {
+            function onValueChanged() {
+                // No need to expand (again) if already hovering
+                if (mouseArea.containsMouse)
+                    return ;
+
+                // Skip first change (which is most likely initialization)
+                if (root._isFirst) {
+                    root._isFirst = false;
+                    return ;
+                }
+                root.forceExpand = true;
+                hideTimer.restart();
+            }
+
+            target: root
+        }
+
+    }
+
+    Timer {
+        id: hideTimer
+
+        interval: parent.hideTimeOut
+        running: false
+        repeat: false
+        onTriggered: {
+            root.forceExpand = false;
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: !disableHover
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        cursorShape: pointerCursor ? Qt.PointingHandCursor : Qt.ArrowCursor
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.LeftButton)
+                root.clicked();
+            else if (mouse.button === Qt.RightButton)
+                root.rightClicked();
+        }
+        onWheel: (wheel) => {
+            if (wheel.angleDelta.y > 0)
+                root.wheelUp();
+            else if (wheel.angleDelta.y < 0)
+                root.wheelDown();
+        }
+    }
+
+    RowLayout {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        spacing: 0
+
+        Item {
+            id: progressDisplay
+
+            Layout.preferredHeight: parent.height
+            Layout.preferredWidth: parent.height
+
+            Canvas {
+                id: progressCircle
+
+                anchors.fill: parent
+                anchors.centerIn: parent
+                onPaint: {
+                    var ctx = getContext("2d");
+                    ctx.reset();
+                    var centerX = width / 2;
+                    var centerY = height / 2;
+                    var radius = width / 2 - 3;
+                    var startAngle = -Math.PI / 2;
+                    var endAngle = startAngle - (2 * Math.PI * root.ratio);
+                    ctx.beginPath();
+                    ctx.arc(centerX, centerY, radius, endAngle, startAngle, false);
+                    ctx.lineWidth = 3;
+                    ctx.strokeStyle = root.realColor;
+                    ctx.lineCap = "round";
+                    ctx.stroke();
+                }
+
+                Connections {
+                    function onRatioChanged() {
+                        progressCircle.requestPaint();
+                    }
+
+                    function onRealColorChanged() {
+                        progressCircle.requestPaint();
+                    }
+
+                    target: root
+                }
+
+            }
+
+            Text {
+                id: symbolText
+
+                anchors.fill: parent
+                text: symbol
+                font.family: Fonts.nerd
+                font.pointSize: Fonts.icon
+                color: root.realColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+
+        }
+
+        Item {
+            id: textDisplay
+
+            implicitHeight: parent.height
+            implicitWidth: root._expand ? textLabel.implicitWidth + 10 : 0
+            clip: true
+
+            Text {
+                id: textLabel
+
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+                text: (textValue || Math.round(root.value)) + root.textSuffix
+                font.pointSize: Fonts.small
+                font.family: Fonts.primary
+                color: root.realColor
+                opacity: root._expand ? 1 : 0
+            }
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: Style.animationNormal
+                    easing.type: Easing.InOutCubic
+                }
+
+            }
+
+        }
+
+    }
+
+    Behavior on realColor {
+        ColorAnimation {
+            duration: Style.animationNormal
+            easing.type: Easing.InOutCubic
+        }
+
+    }
+
+}

config/quickshell/Modules/Bar/Misc/SymbolButton.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Constants
+
+Item {
+    id: root
+
+    required property string symbol
+    property color buttonColor: Colors.distroColor
+    readonly property alias hovered: mouseArea.containsMouse
+    property real iconSize: Fonts.icon
+    property real radius: Style.radiusS
+    property bool disabledHover: false
+
+    signal clicked()
+    signal rightClicked()
+
+    implicitHeight: parent.height
+    implicitWidth: parent.height
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: !disabledHover
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.RightButton)
+                root.rightClicked();
+            else if (mouse.button === Qt.LeftButton)
+                root.clicked();
+        }
+    }
+
+    Text {
+        anchors.fill: parent
+        text: symbol
+        font.family: Fonts.nerd
+        font.pointSize: iconSize
+        font.bold: false
+        color: buttonColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: parent.hovered ? buttonColor : Colors.transparent
+        opacity: 0.3
+        radius: root.radius
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Style.animationNormal
+                easing.type: Easing.InOutCubic
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Bar/Misc/SystemTray.qml

@@ -0,0 +1,160 @@
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.SystemTray
+import Quickshell.Widgets
+import qs.Modules.Bar.Misc
+import qs.Constants
+import qs.Services
+import qs.Utils
+
+Rectangle {
+  id: root
+
+  property ShellScreen screen
+
+  implicitWidth: trayFlow.implicitWidth + 20
+  implicitHeight: parent.height
+  radius: 0
+  color: Colors.transparent
+
+  Layout.alignment: Qt.AlignVCenter
+
+  Flow {
+    id: trayFlow
+    anchors.centerIn: parent
+    spacing: 8
+    flow: Flow.LeftToRight
+
+    Repeater {
+      id: repeater
+      model: SystemTray.items
+
+      delegate: Item {
+        width: 18
+        height: 18
+        visible: modelData
+
+        IconImage {
+          id: trayIcon
+
+          property ShellScreen screen: root.screen
+
+          anchors.centerIn: parent
+          width: 14
+          height: 14
+          smooth: false
+          asynchronous: true
+          backer.fillMode: Image.PreserveAspectFit
+          source: {
+            let icon = modelData?.icon || ""
+            if (!icon) {
+              return ""
+            }
+
+            // Process icon path
+            if (icon.includes("?path=")) {
+              // Seems qmlfmt does not support the following ES6 syntax: const[name, path] = icon.split
+              const chunks = icon.split("?path=")
+              const name = chunks[0]
+              const path = chunks[1]
+              const fileName = name.substring(name.lastIndexOf("/") + 1)
+              return `file://${path}/${fileName}`
+            }
+            return icon
+          }
+          opacity: status === Image.Ready ? 1 : 0
+        }
+
+        MouseArea {
+          anchors.fill: parent
+          hoverEnabled: true
+          cursorShape: Qt.PointingHandCursor
+          acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+          onClicked: mouse => {
+                       if (!modelData) {
+                         return
+                       }
+
+                       if (mouse.button === Qt.LeftButton) {
+                         // Close any open menu first
+                         trayPanel.close()
+
+                         if (!modelData.onlyMenu) {
+                           modelData.activate()
+                         }
+                       } else if (mouse.button === Qt.MiddleButton) {
+                         // Close any open menu first
+                         trayPanel.close()
+
+                         modelData.secondaryActivate && modelData.secondaryActivate()
+                       } else if (mouse.button === Qt.RightButton) {
+                         // Close the menu if it was visible
+                         if (trayPanel && trayPanel.visible) {
+                           trayPanel.close()
+                           return
+                         }
+
+                         if (modelData.hasMenu && modelData.menu && trayMenu.item) {
+                           trayPanel.open()
+
+                           // Position menu based on bar position
+                           let menuX, menuY
+                             // For horizontal bars: center horizontally and position below
+                             menuX = (width / 2) - (trayMenu.item.width / 2)
+                             menuY = root.height
+                           trayMenu.item.menu = modelData.menu
+                           trayMenu.item.showAt(parent, menuX, menuY)
+                         } else {
+                           Logger.log("Tray", "No menu available for", modelData.id, "or trayMenu not set")
+                         }
+                       }
+                     }
+          onEntered: {
+            trayPanel.close()
+          }
+        }
+      }
+    }
+  }
+
+  PanelWindow {
+    id: trayPanel
+    anchors.top: true
+    anchors.left: true
+    anchors.right: true
+    anchors.bottom: true
+    visible: false
+    color: Colors.transparent
+    screen: root.screen
+
+    function open() {
+      visible = true
+      PanelService.willOpenPanel(trayPanel)
+    }
+
+    function close() {
+      visible = false
+      if (trayMenu.item) {
+        trayMenu.item.hideMenu()
+      }
+    }
+
+    // Clicking outside of the rectangle to close
+    MouseArea {
+      anchors.fill: parent
+      onClicked: trayPanel.close()
+    }
+
+    Loader {
+      id: trayMenu
+    Component.onCompleted: {
+        setSource("../Misc/TrayMenu.qml", {
+            "screen": root.screen
+        })
+    }
+    }
+  }
+}

config/quickshell/Modules/Bar/Misc/TrayMenu.qml

@@ -0,0 +1,253 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Utils
+import qs.Noctalia
+
+PopupWindow {
+  id: root
+  property QsMenuHandle menu
+  property var anchorItem: null
+  property real anchorX
+  property real anchorY
+  property bool isSubMenu: false
+  property bool isHovered: rootMouseArea.containsMouse
+  property ShellScreen screen
+
+  readonly property int menuWidth: 180
+
+  implicitWidth: menuWidth
+
+  // Use the content height of the Flickable for implicit height
+  implicitHeight: Math.min(screen ? screen.height * 0.9 : Screen.height * 0.9, flickable.contentHeight + (Style.marginS * 2))
+  visible: false
+  color: Colors.transparent
+  anchor.item: anchorItem
+  anchor.rect.x: anchorX
+  anchor.rect.y: anchorY - (isSubMenu ? 0 : 4)
+
+  function showAt(item, x, y) {
+    if (!item) {
+      Logger.warn("TrayMenu", "AnchorItem is undefined, won't show menu.");
+      return
+    }
+
+    if (!opener.children || opener.children.values.length === 0) {
+      Qt.callLater(() => showAt(item, x, y))
+      return
+    }
+
+    anchorItem = item
+    anchorX = x
+    anchorY = y
+
+    visible = true
+    forceActiveFocus()
+
+    // Force update after showing.
+    Qt.callLater(() => {
+                   root.anchor.updateAnchor()
+                 })
+  }
+
+  function hideMenu() {
+    visible = false
+
+    // Clean up all submenus recursively
+    for (var i = 0; i < columnLayout.children.length; i++) {
+      const child = columnLayout.children[i]
+      if (child?.subMenu) {
+        child.subMenu.hideMenu()
+        child.subMenu.destroy()
+        child.subMenu = null
+      }
+    }
+  }
+
+  // Full-sized, transparent MouseArea to track the mouse.
+  MouseArea {
+    id: rootMouseArea
+    anchors.fill: parent
+    hoverEnabled: true
+  }
+
+  Item {
+    anchors.fill: parent
+    Keys.onEscapePressed: root.hideMenu()
+  }
+
+  QsMenuOpener {
+    id: opener
+    menu: root.menu
+  }
+
+  Rectangle {
+    anchors.fill: parent
+    color: Colors.base
+    border.color: Colors.primary
+    border.width: 2
+    radius: Style.radiusM
+  }
+
+  Flickable {
+    id: flickable
+    anchors.fill: parent
+    anchors.margins: Style.marginS
+    contentHeight: columnLayout.implicitHeight
+    interactive: true
+
+    // Use a ColumnLayout to handle menu item arrangement
+    ColumnLayout {
+      id: columnLayout
+      width: flickable.width
+      spacing: 0
+
+      Repeater {
+        model: opener.children ? [...opener.children.values] : []
+
+        delegate: Rectangle {
+          id: entry
+          required property var modelData
+
+          Layout.preferredWidth: parent.width
+          Layout.preferredHeight: {
+            if (modelData?.isSeparator) {
+              return 8
+            } else {
+              // Calculate based on text content
+              const textHeight = text.contentHeight || (Style.fontSizeS * 1.2)
+              return Math.max(28, textHeight + (Style.marginS * 2))
+            }
+          }
+
+          color: Colors.transparent
+          property var subMenu: null
+
+          NDivider {
+            anchors.centerIn: parent
+            width: parent.width - (Style.marginM * 2)
+            visible: modelData?.isSeparator ?? false
+          }
+
+          Rectangle {
+            anchors.fill: parent
+            color: mouseArea.containsMouse ? Colors.primary : Colors.transparent
+            radius: Style.radiusS
+            visible: !(modelData?.isSeparator ?? false)
+
+            RowLayout {
+              anchors.fill: parent
+              anchors.leftMargin: Style.marginM
+              anchors.rightMargin: Style.marginM
+              spacing: Style.marginS
+
+              NText {
+                id: text
+                Layout.fillWidth: true
+                color: (modelData?.enabled ?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.mOnSurfaceVariant
+                text: modelData?.text !== "" ? modelData?.text.replace(/[\n\r]+/g, ' ') : "..."
+                pointSize: Style.fontSizeS
+                verticalAlignment: Text.AlignVCenter
+                wrapMode: Text.WordWrap
+                family: Fonts.sans
+              }
+
+              Image {
+                Layout.preferredWidth: Style.marginL
+                Layout.preferredHeight: Style.marginL
+                source: modelData?.icon ?? ""
+                visible: (modelData?.icon ?? "") !== ""
+                fillMode: Image.PreserveAspectFit
+              }
+
+              NIcon {
+                icon: modelData?.hasChildren ? "menu" : ""
+                pointSize: Style.fontSizeS
+                verticalAlignment: Text.AlignVCenter
+                visible: modelData?.hasChildren ?? false
+                color: (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface)
+              }
+            }
+
+            MouseArea {
+              id: mouseArea
+              anchors.fill: parent
+              hoverEnabled: true
+              enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && root.visible
+
+              onClicked: {
+                if (modelData && !modelData.isSeparator && !modelData.hasChildren) {
+                  modelData.triggered()
+                  root.hideMenu()
+                }
+              }
+
+              onEntered: {
+                if (!root.visible)
+                  return
+
+                // Close all sibling submenus
+                for (var i = 0; i < columnLayout.children.length; i++) {
+                  const sibling = columnLayout.children[i]
+                  if (sibling !== entry && sibling?.subMenu) {
+                    sibling.subMenu.hideMenu()
+                    sibling.subMenu.destroy()
+                    sibling.subMenu = null
+                  }
+                }
+
+                // Create submenu if needed
+                if (modelData?.hasChildren) {
+                  if (entry.subMenu) {
+                    entry.subMenu.hideMenu()
+                    entry.subMenu.destroy()
+                  }
+
+                  // Need a slight overlap so that menu don't close when moving the mouse to a submenu
+                  const submenuWidth = menuWidth // Assuming a similar width as the parent
+                  const overlap = 4 // A small overlap to bridge the mouse path
+
+                  // Position with overlap
+                  const anchorX = -submenuWidth + overlap
+
+                  // Create submenu
+                  entry.subMenu = Qt.createComponent("TrayMenu.qml").createObject(root, {
+                                                                                    "menu": modelData,
+                                                                                    "anchorItem": entry,
+                                                                                    "anchorX": anchorX,
+                                                                                    "anchorY": 0,
+                                                                                    "isSubMenu": true,
+                                                                                    "screen": root.screen
+                                                                                  })
+
+                  if (entry.subMenu) {
+                    entry.subMenu.showAt(entry, anchorX, 0)
+                  }
+                }
+              }
+
+              onExited: {
+                Qt.callLater(() => {
+                               if (entry.subMenu && !entry.subMenu.isHovered) {
+                                 entry.subMenu.hideMenu()
+                                 entry.subMenu.destroy()
+                                 entry.subMenu = null
+                               }
+                             })
+              }
+            }
+          }
+
+          Component.onDestruction: {
+            if (subMenu) {
+              subMenu.destroy()
+              subMenu = null
+            }
+          }
+        }
+      }
+    }
+  }
+}

config/quickshell/Modules/Misc/Corner.qml

@@ -0,0 +1,87 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Constants
+
+Shape {
+    id: root
+
+    property string position: "topleft" // Corner position: topleft/topright/bottomleft/bottomright
+    property real size: 1 // Scale multiplier for entire corner
+    property int concaveWidth: 100 * size
+    property int concaveHeight: 60 * size
+    property int offsetX: -20
+    property int offsetY: -20
+    property color fillColor: Colors.base
+    property int arcRadius: 20 * size
+    property var modelData: null
+    // Position flags derived from position string
+    property bool _isTop: position.includes("top")
+    property bool _isLeft: position.includes("left")
+    property bool _isRight: position.includes("right")
+    property bool _isBottom: position.includes("bottom")
+    // Shift the path vertically if offsetY is negative to pull shape up
+    property real pathOffsetY: Math.min(offsetY, 0)
+    // Base coordinates for left corner shape, shifted by pathOffsetY vertically
+    property real _baseStartX: 30 * size
+    property real _baseStartY: (_isTop ? 20 * size : 0) + pathOffsetY
+    property real _baseLineX: 30 * size
+    property real _baseLineY: (_isTop ? 0 : 20 * size) + pathOffsetY
+    property real _baseArcX: 50 * size
+    property real _baseArcY: (_isTop ? 20 * size : 0) + pathOffsetY
+    // Mirror coordinates for right corners
+    property real _startX: _isRight ? (concaveWidth - _baseStartX) : _baseStartX
+    property real _startY: _baseStartY
+    property real _lineX: _isRight ? (concaveWidth - _baseLineX) : _baseLineX
+    property real _lineY: _baseLineY
+    property real _arcX: _isRight ? (concaveWidth - _baseArcX) : _baseArcX
+    property real _arcY: _baseArcY
+    // Arc direction varies by corner to maintain proper concave shape
+    property int _arcDirection: {
+        if (_isTop && _isLeft)
+            return PathArc.Counterclockwise;
+
+        if (_isTop && _isRight)
+            return PathArc.Clockwise;
+
+        if (_isBottom && _isLeft)
+            return PathArc.Clockwise;
+
+        if (_isBottom && _isRight)
+            return PathArc.Counterclockwise;
+
+        return PathArc.Counterclockwise;
+    }
+
+    width: concaveWidth
+    height: concaveHeight
+    // Position relative to parent based on corner type
+    x: _isLeft ? offsetX : (parent ? parent.width - width + offsetX : 0)
+    y: _isTop ? offsetY : (parent ? parent.height - height + offsetY : 0)
+    preferredRendererType: Shape.CurveRenderer
+    layer.enabled: true
+    layer.samples: 4
+
+    ShapePath {
+        strokeWidth: 0
+        fillColor: root.fillColor
+        strokeColor: root.fillColor
+        startX: root._startX
+        startY: root._startY
+
+        PathLine {
+            x: root._lineX
+            y: root._lineY
+        }
+
+        PathArc {
+            x: root._arcX
+            y: root._arcY
+            radiusX: root.arcRadius
+            radiusY: root.arcRadius
+            useLargeArc: false
+            direction: root._arcDirection
+        }
+
+    }
+
+}

config/quickshell/Modules/Misc/Corners.qml

@@ -0,0 +1,178 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import qs.Constants
+import qs.Modules.Misc
+import qs.Services
+
+Scope {
+    id: rootScope
+
+    property var shell
+    property string namespace: "quickshell-corners"
+    property int topMargin: 45
+    property int cornerHeight: 20
+    property real cornerSize: 1
+    property real opacity: Niri.noFocus ? 0 : 1
+
+    Item {
+        id: cornersRootItem
+
+        anchors.fill: parent
+
+        Variants {
+            model: Quickshell.screens
+
+            Item {
+                property var modelData
+
+                PanelWindow {
+                    id: fakeBar
+
+                    anchors.top: true
+                    anchors.left: true
+                    anchors.right: true
+                    color: "transparent"
+                    screen: modelData
+                    WlrLayershell.exclusionMode: ExclusionMode.Ignore
+                    visible: true
+                    WlrLayershell.layer: WlrLayer.Background
+                    aboveWindows: false
+                    WlrLayershell.namespace: namespace
+                    implicitHeight: topMargin
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: Colors.base
+                        opacity: rootScope.opacity
+                    }
+
+                }
+
+                PanelWindow {
+                    id: topLeftPanel
+
+                    anchors.top: true
+                    anchors.left: true
+                    color: "transparent"
+                    screen: modelData
+                    margins.top: topMargin
+                    WlrLayershell.exclusionMode: ExclusionMode.Ignore
+                    visible: true
+                    WlrLayershell.layer: WlrLayer.Background
+                    aboveWindows: false
+                    WlrLayershell.namespace: namespace
+                    implicitHeight: cornerHeight
+
+                    Corner {
+                        id: topLeftCorner
+
+                        position: "bottomleft"
+                        size: rootScope.cornerSize
+                        offsetX: -32
+                        offsetY: 0
+                        anchors.top: parent.top
+                        opacity: rootScope.opacity
+                    }
+
+                }
+
+                PanelWindow {
+                    id: topRightPanel
+
+                    anchors.top: true
+                    anchors.right: true
+                    color: "transparent"
+                    screen: modelData
+                    margins.top: topMargin
+                    WlrLayershell.exclusionMode: ExclusionMode.Ignore
+                    visible: true
+                    WlrLayershell.layer: WlrLayer.Background
+                    aboveWindows: false
+                    WlrLayershell.namespace: namespace
+                    implicitHeight: cornerHeight
+
+                    Corner {
+                        id: topRightCorner
+
+                        position: "bottomright"
+                        size: rootScope.cornerSize
+                        offsetX: 32
+                        offsetY: 0
+                        anchors.top: parent.top
+                        opacity: rootScope.opacity
+                    }
+
+                }
+
+                PanelWindow {
+                    id: bottomLeftPanel
+
+                    anchors.bottom: true
+                    anchors.left: true
+                    color: "transparent"
+                    screen: modelData
+                    WlrLayershell.exclusionMode: ExclusionMode.Ignore
+                    visible: true
+                    WlrLayershell.layer: WlrLayer.Background
+                    aboveWindows: false
+                    WlrLayershell.namespace: namespace
+                    implicitHeight: cornerHeight
+
+                    Corner {
+                        id: bottomLeftCorner
+
+                        position: "topleft"
+                        size: rootScope.cornerSize
+                        offsetX: -32
+                        offsetY: 0
+                        anchors.top: parent.top
+                        opacity: rootScope.opacity
+                    }
+
+                }
+
+                PanelWindow {
+                    id: bottomRightPanel
+
+                    anchors.bottom: true
+                    anchors.right: true
+                    color: "transparent"
+                    screen: modelData
+                    WlrLayershell.exclusionMode: ExclusionMode.Ignore
+                    visible: true
+                    WlrLayershell.layer: WlrLayer.Background
+                    aboveWindows: false
+                    WlrLayershell.namespace: namespace
+                    implicitHeight: cornerHeight
+
+                    Corner {
+                        id: bottomRightCorner
+
+                        position: "topright"
+                        size: rootScope.cornerSize
+                        offsetX: 32
+                        offsetY: 0
+                        anchors.top: parent.top
+                        opacity: rootScope.opacity
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: 1000
+            easing.type: Easing.InOutCubic
+        }
+
+    }
+
+}

config/quickshell/Modules/Misc/Notification.qml

@@ -0,0 +1,439 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Notifications
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+// Simple notification popup - displays multiple notifications
+Variants {
+    // Force removal without animation as fallback
+
+    // If no notification display activated in settings, then show them all
+    model: Quickshell.screens
+
+    delegate: Loader {
+        id: root
+
+        required property ShellScreen modelData
+        property real scaling: 1
+        // Access the notification model from the service
+        property ListModel notificationModel: NotificationService.activeList
+
+        // Loader is active when there are notifications
+        active: notificationModel.count > 0 || delayTimer.running
+
+        // Keep loader active briefly after last notification to allow animations to complete
+        Timer {
+            id: delayTimer
+
+            interval: Style.animationSlow + 200 // Animation duration + buffer
+            repeat: false
+        }
+
+        // Start delay timer when last notification is removed
+        Connections {
+            function onCountChanged() {
+                if (notificationModel.count === 0 && root.active)
+                    delayTimer.restart();
+
+            }
+
+            target: notificationModel
+        }
+
+        sourceComponent: PanelWindow {
+            readonly property string location: "top_right"
+            readonly property bool isTop: (location === "top") || (location.length >= 3 && location.substring(0, 3) === "top")
+            readonly property bool isBottom: (location === "bottom") || (location.length >= 6 && location.substring(0, 6) === "bottom")
+            readonly property bool isLeft: location.indexOf("_left") >= 0
+            readonly property bool isRight: location.indexOf("_right") >= 0
+            readonly property bool isCentered: (location === "top" || location === "bottom")
+            // Store connection for cleanup
+            property var animateConnection: null
+
+            screen: modelData
+            WlrLayershell.namespace: "noctalia-notifications"
+            WlrLayershell.layer: WlrLayer.Overlay
+            color: Color.transparent
+            // Anchor selection based on location (window edges)
+            anchors.top: isTop
+            anchors.bottom: isBottom
+            anchors.left: isLeft
+            anchors.right: isRight
+            // Margins depending on bar position and chosen location
+            margins.top: Style.barHeight + Style.marginM
+            margins.bottom: 0
+            margins.left: 0
+            margins.right: Style.marginM
+            implicitWidth: 360
+            implicitHeight: notificationStack.implicitHeight
+            WlrLayershell.exclusionMode: ExclusionMode.Ignore
+            // Connect to animation signal from service
+            Component.onCompleted: {
+                animateConnection = NotificationService.animateAndRemove.connect(function(notificationId) {
+                    // Find the delegate by notification ID
+                    var delegate = null;
+                    if (notificationStack && notificationStack.children && notificationStack.children.length > 0) {
+                        for (var i = 0; i < notificationStack.children.length; i++) {
+                            var child = notificationStack.children[i];
+                            if (child && child.notificationId === notificationId) {
+                                delegate = child;
+                                break;
+                            }
+                        }
+                    }
+                    if (delegate && delegate.animateOut)
+                        delegate.animateOut();
+                    else
+                        NotificationService.dismissActiveNotification(notificationId);
+                });
+            }
+            // Disconnect when destroyed to prevent memory leaks
+            Component.onDestruction: {
+                if (animateConnection) {
+                    NotificationService.animateAndRemove.disconnect(animateConnection);
+                    animateConnection = null;
+                }
+            }
+
+            // Main notification container
+            ColumnLayout {
+                id: notificationStack
+
+                // Anchor the stack inside the window based on chosen location
+                anchors.top: parent.isTop ? parent.top : undefined
+                anchors.bottom: parent.isBottom ? parent.bottom : undefined
+                anchors.left: parent.isLeft ? parent.left : undefined
+                anchors.right: parent.isRight ? parent.right : undefined
+                anchors.horizontalCenter: parent.isCentered ? parent.horizontalCenter : undefined
+                spacing: Style.marginS
+                width: 360
+                visible: true
+
+                // Multiple notifications display
+                Repeater {
+                    model: notificationModel
+
+                    delegate: Rectangle {
+                        id: card
+
+                        // Store the notification ID and data for reference
+                        property string notificationId: model.id
+                        property var notificationData: model
+                        // Animation properties
+                        property real scaleValue: 0.8
+                        property real opacityValue: 0
+                        property bool isRemoving: false
+
+                        // Animate out when being removed
+                        function animateOut() {
+                            if (isRemoving)
+                                return ;
+
+                            // Prevent multiple animations
+                            isRemoving = true;
+                            scaleValue = 0.8;
+                            opacityValue = 0;
+                        }
+
+                        Layout.preferredWidth: 360
+                        Layout.preferredHeight: notificationLayout.implicitHeight + (Style.marginL * 2)
+                        Layout.maximumHeight: Layout.preferredHeight
+                        radius: Style.radiusL
+                        border.color: Colors.overlay0
+                        border.width: Math.max(1, Style.borderS)
+                        color: Color.mSurface
+                        // Scale and fade-in animation
+                        scale: scaleValue
+                        opacity: opacityValue
+                        // Animate in when the item is created
+                        Component.onCompleted: {
+                            scaleValue = 1;
+                            opacityValue = 1;
+                        }
+                        // Check if this notification is being removed
+                        onIsRemovingChanged: {
+                            if (isRemoving)
+                                removalTimer.start();
+
+                        }
+
+                        // Optimized progress bar container
+                        Rectangle {
+                            id: progressBarContainer
+
+                            // Pre-calculate available width for the progress bar
+                            readonly property real availableWidth: parent.width - (2 * parent.radius)
+
+                            anchors.top: parent.top
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                            height: 2
+                            color: Color.transparent
+
+                            // Actual progress bar - centered and symmetric
+                            Rectangle {
+                                id: progressBar
+
+                                height: parent.height
+                                // Center the bar and make it shrink symmetrically
+                                x: parent.parent.radius + (parent.availableWidth * (1 - model.progress)) / 2
+                                width: parent.availableWidth * model.progress
+                                color: {
+                                    if (model.urgency === NotificationUrgency.Critical || model.urgency === 2)
+                                        return Colors.red;
+                                    else if (model.urgency === NotificationUrgency.Low || model.urgency === 0)
+                                        return Colors.green;
+                                    else
+                                        return Colors.primary;
+                                }
+                                antialiasing: true
+
+                                // Smooth progress animation
+                                Behavior on width {
+                                    enabled: !card.isRemoving // Disable during removal animation
+
+                                    NumberAnimation {
+                                        duration: 100 // Quick but smooth
+                                        easing.type: Easing.Linear
+                                    }
+
+                                }
+
+                                Behavior on x {
+                                    enabled: !card.isRemoving
+
+                                    NumberAnimation {
+                                        duration: 100
+                                        easing.type: Easing.Linear
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                        // Right-click to dismiss
+                        MouseArea {
+                            anchors.fill: parent
+                            acceptedButtons: Qt.RightButton
+                            onClicked: (mouse) => {
+                                if (mouse.button === Qt.RightButton)
+                                    animateOut();
+
+                            }
+                        }
+
+                        // Timer for delayed removal after animation
+                        Timer {
+                            id: removalTimer
+
+                            interval: Style.animationSlow
+                            repeat: false
+                            onTriggered: {
+                                NotificationService.dismissActiveNotification(notificationId);
+                            }
+                        }
+
+                        ColumnLayout {
+                            id: notificationLayout
+
+                            anchors.fill: parent
+                            anchors.margins: Style.marginM
+                            anchors.rightMargin: (Style.marginM + 32) // Leave space for close button
+                            spacing: Style.marginM
+
+                            // Main content section
+                            RowLayout {
+                                Layout.fillWidth: true
+                                spacing: Style.marginM
+
+                                ColumnLayout {
+                                    // For real-time notification always show the original image
+                                    // as the cached version is most likely still processing.
+                                    NImageCircled {
+                                        Layout.preferredWidth: 40
+                                        Layout.preferredHeight: 40
+                                        Layout.alignment: Qt.AlignTop
+                                        Layout.topMargin: 30
+                                        imagePath: model.originalImage || ""
+                                        borderColor: Color.transparent
+                                        borderWidth: 0
+                                        fallbackIcon: "bell"
+                                        fallbackIconSize: 24
+                                    }
+
+                                    Item {
+                                        Layout.fillHeight: true
+                                    }
+
+                                }
+
+                                // Text content
+                                ColumnLayout {
+                                    Layout.fillWidth: true
+                                    spacing: Style.marginS
+
+                                    // Header section with app name and timestamp
+                                    RowLayout {
+                                        Layout.fillWidth: true
+                                        spacing: Style.marginS
+
+                                        Rectangle {
+                                            Layout.preferredWidth: 6
+                                            Layout.preferredHeight: 6
+                                            radius: Style.radiusXS
+                                            color: {
+                                                if (model.urgency === NotificationUrgency.Critical || model.urgency === 2)
+                                                    return Color.mError;
+                                                else if (model.urgency === NotificationUrgency.Low || model.urgency === 0)
+                                                    return Color.mOnSurface;
+                                                else
+                                                    return Color.mPrimary;
+                                            }
+                                            Layout.alignment: Qt.AlignVCenter
+                                        }
+
+                                        NText {
+                                            text: `${model.appName || I18n.tr("system.unknown-app")} · ${Time.formatRelativeTime(model.timestamp)}`
+                                            color: Color.mSecondary
+                                            pointSize: Style.fontSizeXS
+                                            family: Fonts.sans
+                                        }
+
+                                        Item {
+                                            Layout.fillWidth: true
+                                        }
+
+                                    }
+
+                                    NText {
+                                        text: model.summary || I18n.tr("general.no-summary")
+                                        pointSize: Style.fontSizeL
+                                        font.weight: Style.fontWeightMedium
+                                        color: Color.mOnSurface
+                                        textFormat: Text.PlainText
+                                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                                        Layout.fillWidth: true
+                                        maximumLineCount: 3
+                                        elide: Text.ElideRight
+                                        family: Fonts.sans
+                                        visible: text.length > 0
+                                    }
+
+                                    NText {
+                                        text: model.body || ""
+                                        pointSize: Style.fontSizeM
+                                        color: Color.mOnSurface
+                                        textFormat: Text.PlainText
+                                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                                        Layout.fillWidth: true
+                                        maximumLineCount: 5
+                                        elide: Text.ElideRight
+                                        family: Fonts.sans
+                                        visible: text.length > 0
+                                    }
+
+                                    // Notification actions
+                                    Flow {
+                                        // Store the notification ID for access in button delegates
+                                        property string parentNotificationId: notificationId
+                                        // Parse actions from JSON string
+                                        property var parsedActions: {
+                                            try {
+                                                return model.actionsJson ? JSON.parse(model.actionsJson) : [];
+                                            } catch (e) {
+                                                return [];
+                                            }
+                                        }
+
+                                        Layout.fillWidth: true
+                                        spacing: Style.marginS
+                                        Layout.topMargin: Style.marginM
+                                        flow: Flow.LeftToRight
+                                        layoutDirection: Qt.LeftToRight
+                                        visible: parsedActions.length > 0
+
+                                        Repeater {
+                                            model: parent.parsedActions
+
+                                            delegate: NButton {
+                                                property var actionData: modelData
+
+                                                text: {
+                                                    var actionText = actionData.text || "Open";
+                                                    // If text contains comma, take the part after the comma (the display text)
+                                                    if (actionText.includes(","))
+                                                        return actionText.split(",")[1] || actionText;
+
+                                                    return actionText;
+                                                }
+                                                fontFamily: Fonts.sans
+                                                fontSize: Style.fontSizeS
+                                                backgroundColor: Color.mPrimary
+                                                textColor: hovered ? Color.mOnTertiary : Color.mOnPrimary
+                                                hoverColor: Color.mTertiary
+                                                outlined: false
+                                                implicitHeight: 24
+                                                onClicked: {
+                                                    NotificationService.invokeAction(parent.parentNotificationId, actionData.identifier);
+                                                }
+                                            }
+
+                                        }
+
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                        // Close button positioned absolutely
+                        NIconButton {
+                            icon: "close"
+                            baseSize: Style.baseWidgetSize * 0.6
+                            anchors.top: parent.top
+                            anchors.topMargin: Style.marginM
+                            anchors.right: parent.right
+                            anchors.rightMargin: Style.marginM
+                            onClicked: {
+                                animateOut();
+                            }
+                        }
+
+                        // Animation behaviors
+                        Behavior on scale {
+                            NumberAnimation {
+                                duration: Style.animationNormal
+                                easing.type: Easing.OutExpo
+                            }
+
+                        }
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: Style.animationNormal
+                                easing.type: Easing.OutQuad
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/CalendarPanel.qml

@@ -0,0 +1,526 @@
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NPanel {
+    id: root
+
+    preferredWidth: 400
+    preferredHeight: 520
+
+    panelContent: ColumnLayout {
+        id: content
+
+        readonly property int firstDayOfWeek: Qt.locale().firstDayOfWeek
+        property bool isCurrentMonth: checkIsCurrentMonth()
+        readonly property bool weatherReady: (LocationService.data.weather !== null)
+
+        function checkIsCurrentMonth() {
+            return (Time.date.getMonth() === grid.month) && (Time.date.getFullYear() === grid.year);
+        }
+
+        function getISOWeekNumber(date) {
+            const target = new Date(date.getTime());
+            target.setHours(0, 0, 0, 0);
+            const dayOfWeek = target.getDay() || 7;
+            target.setDate(target.getDate() + 4 - dayOfWeek);
+            const yearStart = new Date(target.getFullYear(), 0, 1);
+            const weekNumber = Math.ceil(((target - yearStart) / 8.64e+07 + 1) / 7);
+            return weekNumber;
+        }
+
+        anchors.fill: parent
+        anchors.margins: Style.marginL
+        spacing: Style.marginM
+
+        Connections {
+            function onDateChanged() {
+                isCurrentMonth = checkIsCurrentMonth();
+            }
+
+            target: Time
+        }
+
+        // Combined blue banner with date/time and weather summary
+        NBox {
+            Layout.fillWidth: true
+            Layout.preferredHeight: blueColumn.implicitHeight + Style.marginM * 2
+
+            ColumnLayout {
+                id: blueColumn
+
+                anchors.fill: parent
+                anchors.margins: Style.marginM
+                spacing: 0
+
+                // Combined layout for weather icon, date, and weather text
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 60
+                    spacing: Style.marginS
+
+                    // Weather icon and temperature
+                    ColumnLayout {
+                        Layout.alignment: Qt.AlignVCenter
+                        spacing: Style.marginXXS
+
+                        NIcon {
+                            Layout.alignment: Qt.AlignHCenter
+                            icon: weatherReady ? LocationService.weatherSymbolFromCode(LocationService.data.weather.current_weather.weathercode) : "cloud"
+                            pointSize: Style.fontSizeXXL
+                            color: Colors.text
+                        }
+
+                        NText {
+                            Layout.alignment: Qt.AlignHCenter
+                            text: {
+                                if (!weatherReady)
+                                    return "";
+
+                                var temp = LocationService.data.weather.current_weather.temperature;
+                                var suffix = "C";
+                                temp = Math.round(temp);
+                                return `${temp}°${suffix}`;
+                            }
+                            pointSize: Style.fontSizeM
+                            font.weight: Style.fontWeightBold
+                            color: Colors.text
+                        }
+
+                    }
+
+                    // Today day number
+                    NText {
+                        visible: content.isCurrentMonth
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                        text: Time.date.getDate()
+                        pointSize: Style.fontSizeXXXL * 1.5
+                        font.weight: Style.fontWeightBold
+                        color: Colors.text
+                    }
+
+                    Item {
+                        visible: !content.isCurrentMonth
+                    }
+
+                    // Month, year, location
+                    ColumnLayout {
+                        Layout.fillWidth: false
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                        spacing: -Style.marginXS
+
+                        RowLayout {
+                            spacing: 0
+
+                            NText {
+                                text: Qt.locale().monthName(grid.month, Locale.LongFormat).toUpperCase()
+                                pointSize: Style.fontSizeXL * 1.2
+                                font.weight: Style.fontWeightBold
+                                color: Colors.text
+                                Layout.alignment: Qt.AlignBaseline
+                                Layout.maximumWidth: 150
+                                elide: Text.ElideRight
+                            }
+
+                            NText {
+                                text: ` ${grid.year}`
+                                pointSize: Style.fontSizeL
+                                font.weight: Style.fontWeightBold
+                                color: Qt.alpha(Colors.text, 0.7)
+                                Layout.alignment: Qt.AlignBaseline
+                            }
+
+                        }
+
+                        RowLayout {
+                            spacing: 0
+
+                            NText {
+                                text: {
+                                    if (!weatherReady)
+                                        return "Weather unavailable";
+
+                                    const chunks = LocationService.data.name.split(",");
+                                    return chunks[0];
+                                }
+                                pointSize: Style.fontSizeM
+                                font.weight: Style.fontWeightMedium
+                                color: Colors.text
+                                Layout.maximumWidth: 150
+                                elide: Text.ElideRight
+                            }
+
+                            NText {
+                                text: weatherReady ? ` (${LocationService.data.weather.timezone_abbreviation})` : ""
+                                pointSize: Style.fontSizeXS
+                                font.weight: Style.fontWeightMedium
+                                color: Qt.alpha(Colors.text, 0.7)
+                            }
+
+                        }
+
+                    }
+
+                    // Spacer between date and clock
+                    Item {
+                        Layout.fillWidth: true
+                    }
+
+                    // Digital clock with circular progress
+                    Item {
+                        width: Style.fontSizeXXXL * 1.9
+                        height: Style.fontSizeXXXL * 1.9
+                        Layout.alignment: Qt.AlignVCenter
+
+                        // Seconds circular progress
+                        Canvas {
+                            id: secondsProgress
+
+                            property real progress: Time.date.getSeconds() / 60
+
+                            anchors.fill: parent
+                            onProgressChanged: requestPaint()
+                            onPaint: {
+                                var ctx = getContext("2d");
+                                var centerX = width / 2;
+                                var centerY = height / 2;
+                                var radius = Math.min(width, height) / 2 - 3;
+                                ctx.reset();
+                                // Background circle
+                                ctx.beginPath();
+                                ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+                                ctx.lineWidth = 2.5;
+                                ctx.strokeStyle = Qt.alpha(Colors.text, 0.15);
+                                ctx.stroke();
+                                // Progress arc
+                                ctx.beginPath();
+                                ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI);
+                                ctx.lineWidth = 2.5;
+                                ctx.strokeStyle = Colors.text;
+                                ctx.lineCap = "round";
+                                ctx.stroke();
+                            }
+
+                            Connections {
+                                function onDateChanged() {
+                                    secondsProgress.progress = Time.date.getSeconds() / 60;
+                                }
+
+                                target: Time
+                            }
+
+                        }
+
+                        // Digital clock
+                        ColumnLayout {
+                            anchors.centerIn: parent
+                            spacing: -Style.marginXXS
+
+                            NText {
+                                text: {
+                                    var t = Qt.locale().toString(new Date(), "HH");
+                                    return t.split(" ")[0];
+                                }
+                                pointSize: Style.fontSizeXS
+                                font.weight: Style.fontWeightBold
+                                color: Colors.text
+                                family: Fonts.sans
+                                Layout.alignment: Qt.AlignHCenter
+                            }
+
+                            NText {
+                                text: Qt.formatTime(Time.date, "mm")
+                                pointSize: Style.fontSizeXXS
+                                font.weight: Style.fontWeightBold
+                                color: Colors.text
+                                family: Fonts.sans
+                                Layout.alignment: Qt.AlignHCenter
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        // 6-day forecast (outside blue banner)
+        RowLayout {
+            visible: weatherReady
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+            spacing: Style.marginL
+
+            Repeater {
+                model: weatherReady ? Math.min(6, LocationService.data.weather.daily.time.length) : 0
+
+                delegate: ColumnLayout {
+                    Layout.preferredWidth: 0
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignHCenter
+                    spacing: Style.marginS
+
+                    NText {
+                        text: {
+                            var weatherDate = new Date(LocationService.data.weather.daily.time[index].replace(/-/g, "/"));
+                            return Qt.locale().toString(weatherDate, "ddd");
+                        }
+                        color: Color.mOnSurfaceVariant
+                        pointSize: Style.fontSizeM
+                        font.weight: Style.fontWeightMedium
+                        Layout.alignment: Qt.AlignHCenter
+                    }
+
+                    NIcon {
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                        icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
+                        pointSize: Style.fontSizeXXL * 1.5
+                        color: LocationService.weatherColorFromCode(LocationService.data.weather.daily.weathercode[index])
+                    }
+
+                    NText {
+                        Layout.alignment: Qt.AlignHCenter
+                        text: {
+                            var max = LocationService.data.weather.daily.temperature_2m_max[index];
+                            var min = LocationService.data.weather.daily.temperature_2m_min[index];
+                            max = Math.round(max);
+                            min = Math.round(min);
+                            return `${max}°/${min}°`;
+                        }
+                        pointSize: Style.fontSizeXS
+                        color: Colors.text
+                        font.weight: Style.fontWeightMedium
+                    }
+
+                }
+
+            }
+
+        }
+
+        // Loading indicator for weather
+        RowLayout {
+            visible: !weatherReady
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+
+            NBusyIndicator {
+            }
+
+        }
+
+        // Spacer
+        Item {
+        }
+
+        // Navigation and divider
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: Style.marginS
+
+            NDivider {
+                Layout.fillWidth: true
+            }
+
+            NIconButton {
+                icon: "chevron-left"
+                colorBg: Color.transparent
+                colorBorder: Color.transparent
+                colorBorderHover: Color.transparent
+                onClicked: {
+                    let newDate = new Date(grid.year, grid.month - 1, 1);
+                    grid.year = newDate.getFullYear();
+                    grid.month = newDate.getMonth();
+                    content.isCurrentMonth = content.checkIsCurrentMonth();
+                }
+            }
+
+            NIconButton {
+                icon: "calendar"
+                colorBg: Color.transparent
+                colorBorder: Color.transparent
+                colorBorderHover: Color.transparent
+                onClicked: {
+                    grid.month = Time.date.getMonth();
+                    grid.year = Time.date.getFullYear();
+                    content.isCurrentMonth = true;
+                }
+            }
+
+            NIconButton {
+                icon: "chevron-right"
+                colorBg: Color.transparent
+                colorBorder: Color.transparent
+                colorBorderHover: Color.transparent
+                onClicked: {
+                    let newDate = new Date(grid.year, grid.month + 1, 1);
+                    grid.year = newDate.getFullYear();
+                    grid.month = newDate.getMonth();
+                    content.isCurrentMonth = content.checkIsCurrentMonth();
+                }
+            }
+
+        }
+
+        // Names of days of the week
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: 0
+
+            Item {
+                Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
+            }
+
+            GridLayout {
+                Layout.fillWidth: true
+                columns: 7
+                rows: 1
+                columnSpacing: 0
+                rowSpacing: 0
+
+                Repeater {
+                    model: 7
+
+                    Item {
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: Style.baseWidgetSize * 0.6
+
+                        NText {
+                            anchors.centerIn: parent
+                            text: {
+                                let dayIndex = (content.firstDayOfWeek + index) % 7;
+                                const dayNames = ["S", "M", "T", "W", "T", "F", "S"];
+                                return dayNames[dayIndex];
+                            }
+                            color: Color.mPrimary
+                            pointSize: Style.fontSizeS
+                            font.weight: Style.fontWeightBold
+                            horizontalAlignment: Text.AlignHCenter
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        // Grid with weeks and days
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            spacing: 0
+
+            // Column of week numbers
+            ColumnLayout {
+                Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
+                Layout.fillHeight: true
+                spacing: 0
+
+                Repeater {
+                    model: 6
+
+                    Item {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        NText {
+                            anchors.centerIn: parent
+                            color: Color.mOutline
+                            pointSize: Style.fontSizeXXS
+                            font.weight: Style.fontWeightMedium
+                            text: {
+                                let firstOfMonth = new Date(grid.year, grid.month, 1);
+                                let firstDayOfWeek = content.firstDayOfWeek;
+                                let firstOfMonthDayOfWeek = firstOfMonth.getDay();
+                                let daysBeforeFirst = (firstOfMonthDayOfWeek - firstDayOfWeek + 7) % 7;
+                                if (daysBeforeFirst === 0)
+                                    daysBeforeFirst = 7;
+
+                                let gridStartDate = new Date(grid.year, grid.month, 1 - daysBeforeFirst);
+                                let rowStartDate = new Date(gridStartDate);
+                                rowStartDate.setDate(gridStartDate.getDate() + (index * 7));
+                                let thursday = new Date(rowStartDate);
+                                if (firstDayOfWeek === 0) {
+                                    thursday.setDate(rowStartDate.getDate() + 4);
+                                } else if (firstDayOfWeek === 1) {
+                                    thursday.setDate(rowStartDate.getDate() + 3);
+                                } else {
+                                    let daysToThursday = (4 - firstDayOfWeek + 7) % 7;
+                                    thursday.setDate(rowStartDate.getDate() + daysToThursday);
+                                }
+                                return `${getISOWeekNumber(thursday)}`;
+                            }
+                        }
+
+                    }
+
+                }
+
+            }
+
+            // Days Grid
+            MonthGrid {
+                id: grid
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                spacing: Style.marginXXS
+                month: Time.date.getMonth()
+                year: Time.date.getFullYear()
+                locale: Qt.locale()
+
+                delegate: Item {
+                    Rectangle {
+                        width: Style.baseWidgetSize * 0.9
+                        height: Style.baseWidgetSize * 0.9
+                        anchors.centerIn: parent
+                        radius: Style.radiusM
+                        color: model.today ? Color.mSecondary : Color.transparent
+
+                        NText {
+                            anchors.centerIn: parent
+                            text: model.day
+                            color: {
+                                if (model.today)
+                                    return Color.mOnSecondary;
+
+                                if (model.month === grid.month)
+                                    return Color.mOnSurface;
+
+                                return Color.mOnSurfaceVariant;
+                            }
+                            opacity: model.month === grid.month ? 1 : 0.4
+                            pointSize: Style.fontSizeM
+                            font.weight: model.today ? Style.fontWeightBold : Style.fontWeightMedium
+                        }
+
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: Style.animationFast
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/Cards/LyricsCard.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NBox {
+    id: lyricsBox
+
+    Component.onCompleted: {
+        LyricsService.startSyncing();
+    }
+    Component.onDestruction: {
+        LyricsService.stopSyncing();
+    }
+
+    ColumnLayout {
+        id: lyricsColumn
+
+        anchors.fill: parent
+        anchors.margins: Style.marginS
+
+        Repeater {
+            model: LyricsService.lyrics
+
+            NText {
+                Layout.fillWidth: true
+                text: modelData
+                font.pointSize: index === LyricsService.currentIndex ? Style.fontSizeM : Style.fontSizeS
+                font.weight: index === LyricsService.currentIndex ? Style.fontWeightBold : Style.fontWeightRegular
+                font.family: Fonts.sans
+                color: index === LyricsService.currentIndex ? Color.mOnSurface : Color.mOnSurfaceVariant
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+                wrapMode: Text.WrapAnywhere
+                maximumLineCount: 1
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/Cards/LyricsControl.qml

@@ -0,0 +1,96 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Noctalia
+import qs.Services
+
+GridLayout {
+    id: buttonsGrid
+
+    columns: 2
+    columnSpacing: 10
+    rowSpacing: 10
+    Layout.margins: 10
+
+    NIconButton {
+        id: slowerButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.blue
+        colorFg: Colors.blue
+        icon: "arrow-bar-up"
+        onClicked: {
+            LyricsService.increaseOffset();
+        }
+    }
+
+    NIconButton {
+        id: playPauseButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.yellow
+        colorFg: Colors.yellow
+        icon: "arrow-bar-down"
+        onClicked: {
+            LyricsService.decreaseOffset();
+        }
+    }
+
+    NIconButton {
+        id: nextButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.green
+        colorFg: Colors.green
+        icon: "rotate-clockwise"
+        onClicked: {
+            LyricsService.resetOffset();
+        }
+    }
+
+    NIconButton {
+        id: fasterButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.red
+        colorFg: Colors.red
+        icon: "trash"
+        onClicked: {
+            LyricsService.clearCache();
+        }
+    }
+
+    NIconButton {
+        id: barLyricsButton
+
+        baseSize: 32
+        colorBg: SettingsService.showLyricsBar ? Colors.peach : Color.transparent
+        colorBgHover: Colors.peach
+        colorFg: SettingsService.showLyricsBar ? Colors.base : Colors.peach
+        icon: "app-window"
+        onClicked: {
+            SettingsService.showLyricsBar = !SettingsService.showLyricsBar;
+        }
+    }
+
+    NIconButton {
+        id: textButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.subtext1
+        colorFg: Colors.subtext1
+        icon: "align-box-left-bottom"
+        onClicked: {
+            LyricsService.showLyricsText();
+            controlCenterPanel.close();
+        }
+    }
+
+}

config/quickshell/Modules/Panel/Cards/MediaCard.qml

@@ -0,0 +1,458 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NBox {
+    id: root
+
+    // Background artwork that covers everything
+    Item {
+        anchors.fill: parent
+        clip: true
+
+        NImageRounded {
+            id: bgArtImage
+
+            anchors.fill: parent
+            imagePath: MusicManager.trackArtUrl
+            imageRadius: Style.radiusM
+            visible: MusicManager.trackArtUrl !== ""
+        }
+
+        // Dark overlay for readability
+        Rectangle {
+            anchors.fill: parent
+            color: Color.mSurfaceVariant
+            opacity: 0.85
+            radius: Style.radiusM
+        }
+
+        // Border
+        Rectangle {
+            anchors.fill: parent
+            color: Color.transparent
+            radius: Style.radiusM
+        }
+
+    }
+
+    // Background visualizer on top of the artwork
+    Item {
+        id: visualizerContainer
+
+        anchors.fill: parent
+        layer.enabled: true
+
+        Item {
+            anchors.fill: parent
+
+            Cava {
+                id: cava
+
+                count: 32
+            }
+
+            Repeater {
+                model: cava.values
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    width: (parent.width - (cava.count - 1) * Style.marginXS) / cava.count
+                    height: modelData * parent.height
+                    x: index * (width + Style.marginXS)
+                    color: Color.mPrimary
+                    radius: width / 2
+                    opacity: 0.25
+                }
+
+            }
+
+        }
+
+        layer.effect: MultiEffect {
+            maskEnabled: true
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 0
+
+            maskSource: ShaderEffectSource {
+
+                sourceItem: Rectangle {
+                    width: root.width
+                    height: root.height
+                    radius: Style.radiusM
+                    color: "white"
+                }
+
+            }
+
+        }
+
+    }
+
+    // Player selector - positioned at the very top
+    Rectangle {
+        id: playerSelectorButton
+
+        property var currentPlayer: MusicManager.getAvailablePlayers()[MusicManager.selectedPlayerIndex]
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.topMargin: Style.marginXS
+        anchors.leftMargin: Style.marginM
+        anchors.rightMargin: Style.marginM
+        height: Style.barHeight
+        visible: MusicManager.getAvailablePlayers().length > 1
+        radius: Style.radiusM
+        color: Color.transparent
+        Component.onCompleted: {
+            MusicManager.selectedPlayerIndex = -1;
+        }
+        Component.onDestruction: {
+            MusicManager.selectedPlayerIndex = -1;
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: Style.marginS
+
+            NIcon {
+                icon: "caret-down"
+                pointSize: Style.fontSizeXXL
+                color: Color.mOnSurfaceVariant
+            }
+
+            NText {
+                text: playerSelectorButton.currentPlayer ? playerSelectorButton.currentPlayer.identity : ""
+                pointSize: Style.fontSizeXS
+                color: Color.mOnSurfaceVariant
+                Layout.fillWidth: true
+            }
+
+        }
+
+        MouseArea {
+            id: playerSelectorMouseArea
+
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                var menuItems = [];
+                var players = MusicManager.getAvailablePlayers();
+                for (var i = 0; i < players.length; i++) {
+                    menuItems.push({
+                        "label": players[i].identity,
+                        "action": i.toString(),
+                        "icon": "disc",
+                        "enabled": true,
+                        "visible": true
+                    });
+                }
+                playerContextMenu.model = menuItems;
+                playerContextMenu.openAtItem(playerSelectorButton, playerSelectorButton.width - playerContextMenu.width, playerSelectorButton.height);
+            }
+        }
+
+        NContextMenu {
+            id: playerContextMenu
+
+            parent: root
+            width: 200
+            onTriggered: function(action) {
+                var index = parseInt(action);
+                if (!isNaN(index)) {
+                    MusicManager.selectedPlayerIndex = index;
+                    MusicManager.updateCurrentPlayer();
+                }
+            }
+        }
+
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: Style.marginM
+
+        // No media player detected
+        ColumnLayout {
+            id: fallback
+
+            visible: !main.visible
+            spacing: Style.marginS
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                ColumnLayout {
+                    anchors.centerIn: parent
+                    spacing: Style.marginL
+
+                    Item {
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.preferredWidth: Style.fontSizeXXXL * 4
+                        Layout.preferredHeight: Style.fontSizeXXXL * 4
+
+                        // Pulsating audio circles (background)
+                        Repeater {
+                            model: 3
+
+                            Rectangle {
+                                anchors.centerIn: parent
+                                width: parent.width * (1 + index * 0.2)
+                                height: width
+                                radius: width / 2
+                                color: "transparent"
+                                border.color: Color.mOnSurfaceVariant
+                                border.width: 2
+                                opacity: 0
+
+                                SequentialAnimation on opacity {
+                                    running: true
+                                    loops: Animation.Infinite
+
+                                    PauseAnimation {
+                                        duration: index * 600
+                                    }
+
+                                    NumberAnimation {
+                                        from: 1
+                                        to: 0
+                                        duration: 2000
+                                        easing.type: Easing.OutQuad
+                                    }
+
+                                }
+
+                                SequentialAnimation on scale {
+                                    running: true
+                                    loops: Animation.Infinite
+
+                                    PauseAnimation {
+                                        duration: index * 600
+                                    }
+
+                                    NumberAnimation {
+                                        from: 0.5
+                                        to: 1.2
+                                        duration: 2000
+                                        easing.type: Easing.OutQuad
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                        // Spinning disc
+                        NIcon {
+                            anchors.centerIn: parent
+                            icon: "disc"
+                            pointSize: Style.fontSizeXXXL * 3
+                            color: Color.mOnSurfaceVariant
+
+                            RotationAnimator on rotation {
+                                from: 0
+                                to: 360
+                                duration: 8000
+                                loops: Animation.Infinite
+                                running: true
+                            }
+
+                        }
+
+                    }
+
+                    // Descriptive text
+                    ColumnLayout {
+                        Layout.alignment: Qt.AlignHCenter
+                        spacing: Style.marginXS
+                    }
+
+                }
+
+            }
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+        }
+
+        // MediaPlayer Main Content
+        ColumnLayout {
+            id: main
+
+            visible: MusicManager.currentPlayer && MusicManager.canPlay
+            spacing: Style.marginS
+
+            // Spacer to push content down
+            Item {
+                Layout.preferredHeight: Style.marginM
+            }
+
+            // Metadata at the bottom left
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignLeft
+                spacing: Style.marginXS
+
+                NText {
+                    visible: MusicManager.trackTitle !== ""
+                    text: MusicManager.trackTitle
+                    pointSize: Style.fontSizeM
+                    font.weight: Style.fontWeightBold
+                    elide: Text.ElideRight
+                    wrapMode: Text.Wrap
+                    Layout.fillWidth: true
+                    maximumLineCount: 1
+                }
+
+                NText {
+                    visible: MusicManager.trackArtist !== ""
+                    text: MusicManager.trackArtist
+                    color: Color.mPrimary
+                    pointSize: Style.fontSizeS
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
+                    maximumLineCount: 1
+                }
+
+                NText {
+                    visible: MusicManager.trackAlbum !== ""
+                    text: MusicManager.trackAlbum
+                    color: Color.mOnSurfaceVariant
+                    pointSize: Style.fontSizeM
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
+                    maximumLineCount: 1
+                }
+
+            }
+
+            // Progress slider
+            Item {
+                id: progressWrapper
+
+                property real localSeekRatio: -1
+                property real lastSentSeekRatio: -1
+                property real seekEpsilon: 0.01
+                property real progressRatio: {
+                    if (!MusicManager.currentPlayer || MusicManager.trackLength <= 0)
+                        return 0;
+
+                    const r = MusicManager.currentPosition / MusicManager.trackLength;
+                    if (isNaN(r) || !isFinite(r))
+                        return 0;
+
+                    return Math.max(0, Math.min(1, r));
+                }
+                property real effectiveRatio: (MusicManager.isSeeking && localSeekRatio >= 0) ? Math.max(0, Math.min(1, localSeekRatio)) : progressRatio
+
+                visible: (MusicManager.currentPlayer && MusicManager.trackLength > 0)
+                Layout.fillWidth: true
+                height: Style.baseWidgetSize * 0.5
+
+                Timer {
+                    id: seekDebounce
+
+                    interval: 75
+                    repeat: false
+                    onTriggered: {
+                        if (MusicManager.isSeeking && progressWrapper.localSeekRatio >= 0) {
+                            const next = Math.max(0, Math.min(1, progressWrapper.localSeekRatio));
+                            if (progressWrapper.lastSentSeekRatio < 0 || Math.abs(next - progressWrapper.lastSentSeekRatio) >= progressWrapper.seekEpsilon) {
+                                MusicManager.seekByRatio(next);
+                                progressWrapper.lastSentSeekRatio = next;
+                            }
+                        }
+                    }
+                }
+
+                NSlider {
+                    id: progressSlider
+
+                    anchors.fill: parent
+                    from: 0
+                    to: 1
+                    stepSize: 0
+                    snapAlways: false
+                    enabled: MusicManager.trackLength > 0 && MusicManager.canSeek
+                    heightRatio: 0.65
+                    onMoved: {
+                        progressWrapper.localSeekRatio = value;
+                        seekDebounce.restart();
+                    }
+                    onPressedChanged: {
+                        if (pressed) {
+                            MusicManager.isSeeking = true;
+                            progressWrapper.localSeekRatio = value;
+                            MusicManager.seekByRatio(value);
+                            progressWrapper.lastSentSeekRatio = value;
+                        } else {
+                            seekDebounce.stop();
+                            MusicManager.seekByRatio(value);
+                            MusicManager.isSeeking = false;
+                            progressWrapper.localSeekRatio = -1;
+                            progressWrapper.lastSentSeekRatio = -1;
+                        }
+                    }
+                }
+
+                Binding {
+                    target: progressSlider
+                    property: "value"
+                    value: progressWrapper.progressRatio
+                    when: !MusicManager.isSeeking
+                }
+
+            }
+
+            // Media controls
+            RowLayout {
+                spacing: Style.marginS
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter
+
+                NIconButton {
+                    icon: "media-prev"
+                    visible: MusicManager.canGoPrevious
+                    onClicked: MusicManager.canGoPrevious ? MusicManager.previous() : {
+                    }
+                }
+
+                NIconButton {
+                    icon: MusicManager.isPlaying ? "media-pause" : "media-play"
+                    visible: (MusicManager.canPlay || MusicManager.canPause)
+                    onClicked: (MusicManager.canPlay || MusicManager.canPause) ? MusicManager.playPause() : {
+                    }
+                }
+
+                NIconButton {
+                    icon: "media-next"
+                    visible: MusicManager.canGoNext
+                    onClicked: MusicManager.canGoNext ? MusicManager.next() : {
+                    }
+                }
+
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/Cards/SystemMonitorCard.qml

@@ -0,0 +1,61 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Modules.Panel.Misc
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+// Unified system card: monitors CPU, temp, memory, disk
+NBox {
+    id: root
+
+    compact: true
+
+    ColumnLayout {
+        id: content
+
+        anchors.fill: parent
+        anchors.margins: Style.marginXS
+        spacing: Style.marginS
+
+        MonitorSlider {
+            icon: "cpu-usage"
+            value: SystemStatService.cpuUsage
+            from: 0
+            to: 100
+            colorFill: Colors.teal
+            Layout.fillWidth: true
+        }
+
+        MonitorSlider {
+            icon: "memory"
+            value: SystemStatService.memPercent
+            from: 0
+            to: 100
+            colorFill: Colors.green
+            Layout.fillWidth: true
+        }
+
+        MonitorSlider {
+            icon: "cpu-temperature"
+            value: SystemStatService.cpuTemp
+            from: 0
+            to: 100
+            colorFill: Colors.yellow
+            Layout.fillWidth: true
+        }
+
+        MonitorSlider {
+            icon: "storage"
+            value: SystemStatService.diskPercent
+            from: 0
+            to: 100
+            colorFill: Colors.peach
+            Layout.fillWidth: true
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/Cards/TopLeftCard.qml

@@ -0,0 +1,175 @@
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Services.UPower
+import Quickshell.Widgets
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+ColumnLayout {
+    id: root
+
+    readonly property bool hasPP: PowerProfileService.available
+
+    spacing: Style.marginM
+
+    NBox {
+        id: whoamiBox
+
+        property string uptimeText: "--"
+        property string hostname: "--"
+
+        function updateSystemInfo() {
+            uptimeProcess.running = true;
+            hostnameProcess.running = true;
+        }
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        RowLayout {
+            id: content
+
+            spacing: root.spacing
+            anchors.fill: parent
+            anchors.margins: root.spacing
+
+            NImageCircled {
+                width: Style.baseWidgetSize * 1.5
+                height: Style.baseWidgetSize * 1.5
+                imagePath: Quickshell.shellDir + "/Assets/Images/Avatar.jpg"
+                fallbackIcon: "person"
+                borderColor: Color.mPrimary
+                borderWidth: Math.max(1, Style.borderM)
+                Layout.alignment: Qt.AlignVCenter
+                Layout.topMargin: Style.marginXS
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginXXS
+
+                NText {
+                    text: `${Quickshell.env("USER") || "user"} @ ${whoamiBox.hostname}`
+                    font.weight: Style.fontWeightBold
+                    font.pointSize: Style.fontSizeL
+                    font.capitalization: Font.Capitalize
+                }
+
+                NText {
+                    text: "Uptime: " + whoamiBox.uptimeText
+                    font.pointSize: Style.fontSizeM
+                    color: Color.mOnSurfaceVariant
+                }
+
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+        }
+
+        // ----------------------------------
+        // Uptime
+        Timer {
+            interval: 60000
+            repeat: true
+            running: true
+            onTriggered: uptimeProcess.running = true
+        }
+
+        Process {
+            id: uptimeProcess
+
+            command: ["cat", "/proc/uptime"]
+            running: true
+
+            stdout: StdioCollector {
+                onStreamFinished: {
+                    var uptimeSeconds = parseFloat(this.text.trim().split(' ')[0]);
+                    whoamiBox.uptimeText = Time.formatVagueHumanReadableDuration(uptimeSeconds);
+                    uptimeProcess.running = false;
+                }
+            }
+
+        }
+
+        Process {
+            id: hostnameProcess
+
+            command: ["cat", "/etc/hostname"]
+            running: true
+
+            stdout: StdioCollector {
+                onStreamFinished: {
+                    whoamiBox.hostname = this.text.trim();
+                    hostnameProcess.running = false;
+                }
+            }
+
+        }
+
+    }
+
+    RowLayout {
+        id: utilitiesRow
+
+        Layout.fillWidth: true
+
+        // Performance
+        NIconButton {
+            implicitHeight: 32
+            implicitWidth: 32
+            icon: PowerProfileService.getIcon(PowerProfile.Performance)
+            enabled: hasPP
+            opacity: enabled ? Style.opacityFull : Style.opacityMedium
+            colorBgHover: Colors.red
+            colorBg: (enabled && PowerProfileService.profile === PowerProfile.Performance) ? Colors.red : Color.transparent
+            colorFg: (enabled && PowerProfileService.profile === PowerProfile.Performance) ? Color.mOnPrimary : Colors.red
+            onClicked: PowerProfileService.setProfile(PowerProfile.Performance)
+        }
+
+        // Balanced
+        NIconButton {
+            implicitHeight: 32
+            implicitWidth: 32
+            icon: PowerProfileService.getIcon(PowerProfile.Balanced)
+            enabled: hasPP
+            opacity: enabled ? Style.opacityFull : Style.opacityMedium
+            colorBgHover: Colors.blue
+            colorBg: (enabled && PowerProfileService.profile === PowerProfile.Balanced) ? Colors.blue : Color.transparent
+            colorFg: (enabled && PowerProfileService.profile === PowerProfile.Balanced) ? Color.mOnPrimary : Colors.blue
+            onClicked: PowerProfileService.setProfile(PowerProfile.Balanced)
+        }
+
+        // Eco
+        NIconButton {
+            implicitHeight: 32
+            implicitWidth: 32
+            icon: PowerProfileService.getIcon(PowerProfile.PowerSaver)
+            enabled: hasPP
+            opacity: enabled ? Style.opacityFull : Style.opacityMedium
+            colorBgHover: Colors.green
+            colorBg: (enabled && PowerProfileService.profile === PowerProfile.PowerSaver) ? Colors.green : Color.transparent
+            colorFg: (enabled && PowerProfileService.profile === PowerProfile.PowerSaver) ? Color.mOnPrimary : Colors.green
+            onClicked: PowerProfileService.setProfile(PowerProfile.PowerSaver)
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        // Lyrics Offset
+        NText {
+            text: `Lyrics Offset: ${LyricsService.offset >= 0 ? '+' : ''}${LyricsService.offset} ms`
+            Layout.alignment: Qt.AlignVCenter
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/ControlCenterPanel.qml

@@ -0,0 +1,87 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Constants
+import qs.Modules.Panel.Cards
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NPanel {
+    id: root
+
+    // Positioning
+    readonly property string controlCenterPosition: "top_left"
+    property real topCardHeight: 120
+    property real middleCardHeight: 100
+    property real bottomCardHeight: 200
+
+    preferredWidth: 480
+    preferredHeight: topCardHeight + middleCardHeight + bottomCardHeight + Style.marginL * 4
+    panelKeyboardFocus: false
+    panelAnchorHorizontalCenter: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.endsWith("_center")
+    panelAnchorVerticalCenter: false
+    panelAnchorLeft: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.endsWith("_left")
+    panelAnchorRight: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.endsWith("_right")
+    panelAnchorBottom: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.startsWith("bottom_")
+    panelAnchorTop: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.startsWith("top_")
+
+    panelContent: Item {
+        id: content
+
+        property real cardSpacing: Style.marginL
+
+        // Layout content
+        ColumnLayout {
+            id: layout
+
+            anchors.fill: parent
+            anchors.margins: content.cardSpacing
+            spacing: content.cardSpacing
+
+            // Top Card: profile + utilities
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.preferredHeight: topCardHeight
+
+                TopLeftCard {
+                    Layout.fillWidth: true
+                    Layout.maximumHeight: topCardHeight
+                }
+
+                LyricsControl {
+                    Layout.preferredHeight: topCardHeight
+                }
+
+            }
+
+            LyricsCard {
+                Layout.fillWidth: true
+                Layout.preferredHeight: middleCardHeight
+            }
+
+            // Media + stats column
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.preferredHeight: bottomCardHeight
+                spacing: content.cardSpacing
+
+                SystemMonitorCard {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: bottomCardHeight
+                }
+
+                MediaCard {
+                    Layout.preferredWidth: 270
+                    Layout.preferredHeight: bottomCardHeight
+                }
+
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/Misc/MonitorSlider.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+
+Item {
+    id: root
+
+    property string icon: "volume-high"
+    property real value: 50
+    property real from: 0
+    property real to: 100
+    property color colorFill: Colors.primary
+    property color colorRest: Colors.surface0
+
+    implicitHeight: layout.implicitHeight
+
+    RowLayout {
+        id: layout
+
+        anchors.fill: parent
+        spacing: Style.marginS
+
+        NIcon {
+            id: iconItem
+
+            icon: root.icon
+            color: root.colorFill
+        }
+
+        Rectangle {
+            id: whole
+
+            Layout.fillWidth: true
+            color: root.colorRest
+            radius: height / 2
+            height: Style.baseWidgetSize * 0.3
+
+            Rectangle {
+                id: fill
+
+                width: Math.max(0, Math.min(whole.width, (root.value - root.from) / (root.to - root.from) * whole.width))
+                height: parent.height
+                color: root.colorFill
+                radius: height / 2
+                anchors.left: parent.left
+            }
+
+        }
+
+    }
+
+}

config/quickshell/Modules/Panel/NotificationHistoryPanel.qml

@@ -0,0 +1,341 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Notifications
+import Quickshell.Wayland
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+// Notification History panel
+NPanel {
+    id: root
+
+    preferredWidth: 380
+    preferredHeight: 480
+
+    panelContent: Rectangle {
+        id: notificationRect
+
+        color: Color.transparent
+
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.margins: Style.marginL
+            spacing: Style.marginM
+
+            // Header section
+            RowLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginM
+
+                NIcon {
+                    icon: "bell"
+                    pointSize: Style.fontSizeXXL
+                    color: Color.mPrimary
+                }
+
+                NText {
+                    text: "Notifications"
+                    pointSize: Style.fontSizeL
+                    font.weight: Style.fontWeightBold
+                    color: Color.mOnSurface
+                    Layout.fillWidth: true
+                }
+
+                NIconButton {
+                    icon: SettingsService.notifications.doNotDisturb ? "bell-off" : "bell"
+                    baseSize: Style.baseWidgetSize * 0.8
+                    onClicked: SettingsService.notifications.doNotDisturb = !SettingsService.notifications.doNotDisturb
+                    colorFg: SettingsService.notifications.doNotDisturb ? Colors.base : Colors.green
+                    colorBg: SettingsService.notifications.doNotDisturb ? Colors.green : Color.transparent
+                    colorFgHover: Colors.base
+                    colorBgHover: Colors.green
+                }
+
+                NIconButton {
+                    icon: "trash"
+                    baseSize: Style.baseWidgetSize * 0.8
+                    onClicked: {
+                        NotificationService.clearHistory();
+                        // Close panel as there is nothing more to see.
+                        root.close();
+                    }
+                    colorFg: Colors.red
+                    colorBg: Color.transparent
+                    colorFgHover: Colors.base
+                    colorBgHover: Colors.red
+                }
+
+                NIconButton {
+                    icon: "close"
+                    baseSize: Style.baseWidgetSize * 0.8
+                    onClicked: root.close()
+                    colorFg: Colors.blue
+                    colorBg: Color.transparent
+                    colorFgHover: Colors.base
+                    colorBgHover: Colors.blue
+                }
+
+            }
+
+            NDivider {
+                Layout.fillWidth: true
+            }
+
+            // Empty state when no notifications
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.alignment: Qt.AlignHCenter
+                visible: NotificationService.historyList.count === 0
+                spacing: Style.marginL
+
+                Item {
+                    Layout.fillHeight: true
+                }
+
+                NIcon {
+                    icon: "bell-off"
+                    pointSize: 64
+                    color: Color.mOnSurfaceVariant
+                    Layout.alignment: Qt.AlignHCenter
+                }
+
+                NText {
+                    text: "No Notifications"
+                    pointSize: Style.fontSizeL
+                    color: Color.mOnSurfaceVariant
+                    Layout.alignment: Qt.AlignHCenter
+                }
+
+                Item {
+                    Layout.fillHeight: true
+                }
+
+            }
+
+            // Notification list
+            NListView {
+                id: notificationList
+
+                // Track which notification is expanded
+                property string expandedId: ""
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                horizontalPolicy: ScrollBar.AlwaysOff
+                verticalPolicy: ScrollBar.AsNeeded
+                model: NotificationService.historyList
+                spacing: Style.marginM
+                clip: true
+                boundsBehavior: Flickable.StopAtBounds
+                visible: NotificationService.historyList.count > 0
+
+                delegate: NBox {
+                    property string notificationId: model.id
+                    property bool isExpanded: notificationList.expandedId === notificationId
+
+                    width: notificationList.width
+                    height: notificationLayout.implicitHeight + (Style.marginM * 2)
+
+                    // Click to expand/collapse
+                    MouseArea {
+                        anchors.fill: parent
+                        // Don't capture clicks on the delete button
+                        anchors.rightMargin: 48
+                        enabled: (summaryText.truncated || bodyText.truncated)
+                        onClicked: {
+                            if (notificationList.expandedId === notificationId)
+                                notificationList.expandedId = "";
+                            else
+                                notificationList.expandedId = notificationId;
+                        }
+                        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    }
+
+                    RowLayout {
+                        id: notificationLayout
+
+                        anchors.fill: parent
+                        anchors.margins: Style.marginM
+                        spacing: Style.marginM
+
+                        ColumnLayout {
+                            NImageCircled {
+                                Layout.preferredWidth: 40
+                                Layout.preferredHeight: 40
+                                Layout.alignment: Qt.AlignTop
+                                Layout.topMargin: 20
+                                imagePath: model.cachedImage || model.originalImage || ""
+                                borderColor: Color.transparent
+                                borderWidth: 0
+                                fallbackIcon: "bell"
+                                fallbackIconSize: 24
+                            }
+
+                            Item {
+                                Layout.fillHeight: true
+                            }
+
+                        }
+
+                        // Notification content column
+                        ColumnLayout {
+                            Layout.fillWidth: true
+                            Layout.alignment: Qt.AlignTop
+                            spacing: Style.marginXS
+                            Layout.rightMargin: -(Style.marginM + Style.baseWidgetSize * 0.6)
+
+                            // Header row with app name and timestamp
+                            RowLayout {
+                                Layout.fillWidth: true
+                                spacing: Style.marginS
+
+                                // Urgency indicator
+                                Rectangle {
+                                    Layout.preferredWidth: 6
+                                    Layout.preferredHeight: 6
+                                    Layout.alignment: Qt.AlignVCenter
+                                    radius: 3
+                                    visible: model.urgency !== 1
+                                    color: {
+                                        if (model.urgency === 2)
+                                            return Color.mError;
+                                        else if (model.urgency === 0)
+                                            return Color.mOnSurfaceVariant;
+                                        else
+                                            return Color.transparent;
+                                    }
+                                }
+
+                                NText {
+                                    text: model.appName || "Unknown App"
+                                    pointSize: Style.fontSizeXS
+                                    color: Color.mSecondary
+                                    family: Fonts.sans
+                                }
+
+                                NText {
+                                    text: Time.formatRelativeTime(model.timestamp)
+                                    pointSize: Style.fontSizeXS
+                                    color: Color.mSecondary
+                                    family: Fonts.sans
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                            }
+
+                            // Summary
+                            NText {
+                                id: summaryText
+
+                                text: model.summary || "No Summary"
+                                pointSize: Style.fontSizeM
+                                font.weight: Font.Medium
+                                color: Color.mOnSurface
+                                textFormat: Text.PlainText
+                                wrapMode: Text.Wrap
+                                Layout.fillWidth: true
+                                maximumLineCount: isExpanded ? 999 : 2
+                                family: Fonts.sans
+                                elide: Text.ElideRight
+                            }
+
+                            // Body
+                            NText {
+                                id: bodyText
+
+                                text: model.body || ""
+                                pointSize: Style.fontSizeS
+                                color: Color.mOnSurfaceVariant
+                                textFormat: Text.PlainText
+                                wrapMode: Text.Wrap
+                                Layout.fillWidth: true
+                                maximumLineCount: isExpanded ? 999 : 3
+                                elide: Text.ElideRight
+                                family: Fonts.sans
+                                visible: text.length > 0
+                            }
+
+                            // Spacer for expand indicator
+                            Item {
+                                Layout.fillWidth: true
+                                Layout.preferredHeight: (!isExpanded && (summaryText.truncated || bodyText.truncated)) ? (Style.marginS) : 0
+                            }
+
+                            // Expand indicator
+                            RowLayout {
+                                Layout.fillWidth: true
+                                visible: !isExpanded && (summaryText.truncated || bodyText.truncated)
+                                spacing: Style.marginXS
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                NText {
+                                    text: "Click to expand"
+                                    pointSize: Style.fontSizeXS
+                                    color: Color.mPrimary
+                                    family: Fonts.sans
+                                    font.weight: Font.Medium
+                                }
+
+                                NIcon {
+                                    icon: "chevron-down"
+                                    pointSize: Style.fontSizeS
+                                    color: Color.mPrimary
+                                }
+
+                            }
+
+                        }
+
+                        // Delete button
+                        NIconButton {
+                            icon: "trash"
+                            baseSize: Style.baseWidgetSize * 0.7
+                            Layout.alignment: Qt.AlignTop
+                            onClicked: {
+                                // Remove from history using the service API
+                                NotificationService.removeFromHistory(notificationId);
+                            }
+                            colorFg: Colors.red
+                            colorBg: Color.transparent
+                            colorFgHover: Colors.base
+                            colorBgHover: Colors.red
+                        }
+
+                    }
+
+                    Behavior on height {
+                        NumberAnimation {
+                            duration: Style.animationNormal
+                            easing.type: Easing.InOutQuad
+                        }
+
+                    }
+
+                    // Smooth color transition on hover
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: Style.animationFast
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}