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
+            }
+          }
+        }
+      }
+    }
+  }
+}