switch hto monorepo structure

quickshell/Modules/DankBar/Widgets/AudioVisualization.qml

@@ -0,0 +1,77 @@
+import QtQuick
+import Quickshell.Services.Mpris
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    readonly property MprisPlayer activePlayer: MprisController.activePlayer
+    readonly property bool hasActiveMedia: activePlayer !== null
+    readonly property bool isPlaying: hasActiveMedia && activePlayer && activePlayer.playbackState === MprisPlaybackState.Playing
+
+    width: 20
+    height: Theme.iconSize
+
+    Loader {
+        active: isPlaying
+
+        sourceComponent: Component {
+            Ref {
+                service: CavaService
+            }
+
+        }
+
+    }
+
+    Timer {
+        id: fallbackTimer
+
+        running: !CavaService.cavaAvailable && isPlaying
+        interval: 256
+        repeat: true
+        onTriggered: {
+            CavaService.values = [Math.random() * 40 + 10, Math.random() * 60 + 20, Math.random() * 50 + 15, Math.random() * 35 + 20, Math.random() * 45 + 15, Math.random() * 55 + 25];
+        }
+    }
+
+    Row {
+        anchors.centerIn: parent
+        spacing: 1.5
+
+        Repeater {
+            model: 6
+
+            Rectangle {
+                width: 2
+                height: {
+                    if (root.isPlaying && CavaService.values.length > index) {
+                        const rawLevel = CavaService.values[index] || 0;
+                        const scaledLevel = Math.sqrt(Math.min(Math.max(rawLevel, 0), 100) / 100) * 100;
+                        const maxHeight = Theme.iconSize - 2;
+                        const minHeight = 3;
+                        return minHeight + (scaledLevel / 100) * (maxHeight - minHeight);
+                    }
+                    return 3;
+                }
+                radius: 1.5
+                color: Theme.primary
+                anchors.verticalCenter: parent.verticalCenter
+
+                Behavior on height {
+                    NumberAnimation {
+                        duration: Anims.durShort
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Anims.standardDecel
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

quickshell/Modules/DankBar/Widgets/Battery.qml

@@ -0,0 +1,114 @@
+import QtQuick
+import Quickshell.Services.UPower
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: battery
+
+    property bool batteryPopupVisible: false
+    property var popoutTarget: null
+
+    signal toggleBatteryPopup()
+
+    visible: true
+
+    content: Component {
+        Item {
+            implicitWidth: battery.isVerticalOrientation ? (battery.widgetThickness - battery.horizontalPadding * 2) : batteryContent.implicitWidth
+            implicitHeight: battery.isVerticalOrientation ? batteryColumn.implicitHeight : (battery.widgetThickness - battery.horizontalPadding * 2)
+
+            Column {
+                id: batteryColumn
+                visible: battery.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: BatteryService.getBatteryIcon()
+                    size: Theme.barIconSize(battery.barThickness)
+                    color: {
+                        if (!BatteryService.batteryAvailable) {
+                            return Theme.surfaceText
+                        }
+
+                        if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                            return Theme.error
+                        }
+
+                        if (BatteryService.isCharging || BatteryService.isPluggedIn) {
+                            return Theme.primary
+                        }
+
+                        return Theme.surfaceText
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: BatteryService.batteryLevel.toString()
+                    font.pixelSize: Theme.barTextSize(battery.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: BatteryService.batteryAvailable
+                }
+            }
+
+            Row {
+                id: batteryContent
+                visible: !battery.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: SettingsData.dankBarNoBackground ? 1 : 2
+
+                DankIcon {
+                    name: BatteryService.getBatteryIcon()
+                    size: Theme.barIconSize(battery.barThickness, -4)
+                    color: {
+                        if (!BatteryService.batteryAvailable) {
+                            return Theme.surfaceText;
+                        }
+
+                        if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                            return Theme.error;
+                        }
+
+                        if (BatteryService.isCharging || BatteryService.isPluggedIn) {
+                            return Theme.primary;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: `${BatteryService.batteryLevel}%`
+                    font.pixelSize: Theme.barTextSize(battery.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: BatteryService.batteryAvailable
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        x: -battery.leftMargin
+        y: -battery.topMargin
+        width: battery.width + battery.leftMargin + battery.rightMargin
+        height: battery.height + battery.topMargin + battery.bottomMargin
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = battery.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, battery.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            toggleBatteryPopup()
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/ClipboardButton.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Plugins
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool isActive: false
+    property var clipboardHistoryModal: null
+
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: "content_paste"
+                size: Theme.barIconSize(root.barThickness)
+                color: Theme.surfaceText
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/Clock.qml

@@ -0,0 +1,257 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Modules.Plugins
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool compactMode: false
+    signal clockClicked
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : clockRow.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? clockColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: clockColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: -2
+
+                Row {
+                    spacing: 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    StyledText {
+                        text: {
+                            if (SettingsData.use24HourClock) {
+                                return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(0)
+                            } else {
+                                const hours = systemClock?.date?.getHours()
+                                const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours
+                                return String(display).padStart(2, '0').charAt(0)
+                            }
+                        }
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+
+                    StyledText {
+                        text: {
+                            if (SettingsData.use24HourClock) {
+                                return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(1)
+                            } else {
+                                const hours = systemClock?.date?.getHours()
+                                const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours
+                                return String(display).padStart(2, '0').charAt(1)
+                            }
+                        }
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+                }
+
+                Row {
+                    spacing: 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    StyledText {
+                        text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(0)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+
+                    StyledText {
+                        text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(1)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+                }
+
+                Row {
+                    visible: SettingsData.showSeconds
+                    spacing: 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    StyledText {
+                        text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(0)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+
+                    StyledText {
+                        text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(1)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+                }
+
+                Item {
+                    width: 12
+                    height: Theme.spacingM
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    Rectangle {
+                        width: 12
+                        height: 1
+                        color: Theme.outlineButton
+                        anchors.centerIn: parent
+                    }
+                }
+
+                Row {
+                    spacing: 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    StyledText {
+                        text: {
+                            const locale = Qt.locale()
+                            const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                            const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                            const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0')
+                            return value.charAt(0)
+                        }
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.primary
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+
+                    StyledText {
+                        text: {
+                            const locale = Qt.locale()
+                            const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                            const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                            const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0')
+                            return value.charAt(1)
+                        }
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.primary
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+                }
+
+                Row {
+                    spacing: 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    StyledText {
+                        text: {
+                            const locale = Qt.locale()
+                            const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                            const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                            const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0')
+                            return value.charAt(0)
+                        }
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.primary
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+
+                    StyledText {
+                        text: {
+                            const locale = Qt.locale()
+                            const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                            const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                            const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0')
+                            return value.charAt(1)
+                        }
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.primary
+                        width: 9
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
+                    }
+                }
+            }
+
+            Row {
+                id: clockRow
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: Theme.spacingS
+
+                StyledText {
+                    id: timeText
+                    text: {
+                        return systemClock?.date?.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat())
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.baseline: dateText.baseline
+                }
+
+                StyledText {
+                    id: middleDot
+                    text: "•"
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.outlineButton
+                    anchors.baseline: dateText.baseline
+                    visible: !SettingsData.clockCompactMode
+                }
+
+                StyledText {
+                    id: dateText
+                    text: {
+                        if (SettingsData.clockDateFormat && SettingsData.clockDateFormat.length > 0) {
+                            return systemClock?.date?.toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat)
+                        }
+                        return systemClock?.date?.toLocaleDateString(Qt.locale(), "ddd d")
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: !SettingsData.clockCompactMode
+                }
+            }
+
+            SystemClock {
+                id: systemClock
+                precision: SystemClock.Seconds
+            }
+        }
+    }
+
+    MouseArea {
+        x: -root.leftMargin
+        y: -root.topMargin
+        width: root.width + root.leftMargin + root.rightMargin
+        height: root.height + root.topMargin + root.bottomMargin
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = root.parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.visualWidth)
+                root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
+            }
+            root.clockClicked()
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/ColorPicker.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Plugins
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool isActive: false
+
+    signal colorPickerRequested()
+
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: "palette"
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: root.isActive ? Theme.primary : Theme.surfaceText
+            }
+        }
+    }
+
+    MouseArea {
+        z: 1
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            root.colorPickerRequested()
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/ControlCenterButton.qml

@@ -0,0 +1,255 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool isActive: false
+    property var popoutTarget: null
+    property var widgetData: null
+    property bool showNetworkIcon: SettingsData.controlCenterShowNetworkIcon
+    property bool showBluetoothIcon: SettingsData.controlCenterShowBluetoothIcon
+    property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : controlIndicators.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? controlColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: controlColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+
+                DankIcon {
+                    name: {
+                        if (NetworkService.wifiToggling) {
+                            return "sync"
+                        }
+
+                        const status = NetworkService.networkStatus
+                        if (status === "ethernet") {
+                            return "lan"
+                        }
+
+                        if (status === "vpn") {
+                            return NetworkService.ethernetConnected ? "lan" : NetworkService.wifiSignalIcon
+                        }
+
+                        return NetworkService.wifiSignalIcon
+                    }
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (NetworkService.wifiToggling) {
+                            return Theme.primary
+                        }
+
+                        return NetworkService.networkStatus !== "disconnected" ? Theme.primary : Theme.outlineButton
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: root.showNetworkIcon && NetworkService.networkAvailable
+                }
+
+                DankIcon {
+                    name: "bluetooth"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: BluetoothService.connected ? Theme.primary : Theme.outlineButton
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: root.showBluetoothIcon && BluetoothService.available && BluetoothService.enabled
+                }
+
+                Rectangle {
+                    width: audioIconV.implicitWidth + 4
+                    height: audioIconV.implicitHeight + 4
+                    color: "transparent"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: root.showAudioIcon
+
+                    DankIcon {
+                        id: audioIconV
+
+                        name: {
+                            if (AudioService.sink && AudioService.sink.audio) {
+                                if (AudioService.sink.audio.muted || AudioService.sink.audio.volume === 0) {
+                                    return "volume_off"
+                                } else if (AudioService.sink.audio.volume * 100 < 33) {
+                                    return "volume_down"
+                                } else {
+                                    return "volume_up"
+                                }
+                            }
+                            return "volume_up"
+                        }
+                        size: Theme.barIconSize(root.barThickness)
+                        color: Theme.surfaceText
+                        anchors.centerIn: parent
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        acceptedButtons: Qt.NoButton
+                        onWheel: function(wheelEvent) {
+                            let delta = wheelEvent.angleDelta.y
+                            let currentVolume = (AudioService.sink && AudioService.sink.audio && AudioService.sink.audio.volume * 100) || 0
+                            let newVolume
+                            if (delta > 0) {
+                                newVolume = Math.min(100, currentVolume + 5)
+                            } else {
+                                newVolume = Math.max(0, currentVolume - 5)
+                            }
+                            if (AudioService.sink && AudioService.sink.audio) {
+                                AudioService.sink.audio.muted = false
+                                AudioService.sink.audio.volume = newVolume / 100
+                            }
+                            wheelEvent.accepted = true
+                        }
+                    }
+                }
+
+                DankIcon {
+                    name: "settings"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: root.isActive ? Theme.primary : Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: !root.showNetworkIcon && !root.showBluetoothIcon && !root.showAudioIcon
+                }
+            }
+
+            Row {
+                id: controlIndicators
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+
+                DankIcon {
+                    id: networkIcon
+
+                    name: {
+                        if (NetworkService.wifiToggling) {
+                            return "sync"
+                        }
+
+                        const status = NetworkService.networkStatus
+                        if (status === "ethernet") {
+                            return "lan"
+                        }
+
+                        if (status === "vpn") {
+                            return NetworkService.ethernetConnected ? "lan" : NetworkService.wifiSignalIcon
+                        }
+
+                        return NetworkService.wifiSignalIcon
+                    }
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (NetworkService.wifiToggling) {
+                            return Theme.primary
+                        }
+
+                        return NetworkService.networkStatus !== "disconnected" ? Theme.primary : Theme.outlineButton
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: root.showNetworkIcon && NetworkService.networkAvailable
+                }
+
+                DankIcon {
+                    id: bluetoothIcon
+
+                    name: "bluetooth"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: BluetoothService.connected ? Theme.primary : Theme.outlineButton
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: root.showBluetoothIcon && BluetoothService.available && BluetoothService.enabled
+                }
+
+                Rectangle {
+                    width: audioIcon.implicitWidth + 4
+                    height: audioIcon.implicitHeight + 4
+                    color: "transparent"
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: root.showAudioIcon
+
+                    DankIcon {
+                        id: audioIcon
+
+                        name: {
+                            if (AudioService.sink && AudioService.sink.audio) {
+                                if (AudioService.sink.audio.muted || AudioService.sink.audio.volume === 0) {
+                                    return "volume_off";
+                                } else if (AudioService.sink.audio.volume * 100 < 33) {
+                                    return "volume_down";
+                                } else {
+                                    return "volume_up";
+                                }
+                            }
+                            return "volume_up";
+                        }
+                        size: Theme.barIconSize(root.barThickness)
+                        color: Theme.surfaceText
+                        anchors.centerIn: parent
+                    }
+
+                    MouseArea {
+                        id: audioWheelArea
+
+                        anchors.fill: parent
+                        acceptedButtons: Qt.NoButton
+                        onWheel: function(wheelEvent) {
+                            let delta = wheelEvent.angleDelta.y;
+                            let currentVolume = (AudioService.sink && AudioService.sink.audio && AudioService.sink.audio.volume * 100) || 0;
+                            let newVolume;
+                            if (delta > 0) {
+                                newVolume = Math.min(100, currentVolume + 5);
+                            } else {
+                                newVolume = Math.max(0, currentVolume - 5);
+                            }
+                            if (AudioService.sink && AudioService.sink.audio) {
+                                AudioService.sink.audio.muted = false;
+                                AudioService.sink.audio.volume = newVolume / 100;
+                            }
+                            wheelEvent.accepted = true;
+                        }
+                    }
+                }
+
+                DankIcon {
+                    name: "mic"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: Theme.primary
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: false
+                }
+
+                DankIcon {
+                    name: "settings"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: root.isActive ? Theme.primary : Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: !root.showNetworkIcon && !root.showBluetoothIcon && !root.showAudioIcon
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        x: -root.leftMargin
+        y: -root.topMargin
+        width: root.width + root.leftMargin + root.rightMargin
+        height: root.height + root.topMargin + root.bottomMargin
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clicked()
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/CpuMonitor.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property var popoutTarget: null
+    property var widgetData: null
+    property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
+
+    Component.onCompleted: {
+        DgopService.addRef(["cpu"]);
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["cpu"]);
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : cpuContent.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? cpuColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: cpuColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: "memory"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (DgopService.cpuUsage > 80) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (DgopService.cpuUsage > 60) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (DgopService.cpuUsage === undefined || DgopService.cpuUsage === null || DgopService.cpuUsage === 0) {
+                            return "--";
+                        }
+
+                        return DgopService.cpuUsage.toFixed(0);
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: cpuContent
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 3
+
+                DankIcon {
+                    name: "memory"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (DgopService.cpuUsage > 80) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (DgopService.cpuUsage > 60) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (DgopService.cpuUsage === undefined || DgopService.cpuUsage === null || DgopService.cpuUsage === 0) {
+                            return "--%";
+                        }
+
+                        return DgopService.cpuUsage.toFixed(0) + "%";
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+
+                    StyledTextMetrics {
+                        id: cpuBaseline
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        text: "100%"
+                    }
+
+                    width: root.minimumWidth ? Math.max(cpuBaseline.width, paintedWidth) : paintedWidth
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: 120
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            DgopService.setSortBy("cpu");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/CpuTemperature.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property var popoutTarget: null
+    property var widgetData: null
+    property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
+
+    Component.onCompleted: {
+        DgopService.addRef(["cpu"]);
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["cpu"]);
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : cpuTempContent.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? cpuTempColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: cpuTempColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: "device_thermostat"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (DgopService.cpuTemperature > 85) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (DgopService.cpuTemperature > 69) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (DgopService.cpuTemperature === undefined || DgopService.cpuTemperature === null || DgopService.cpuTemperature < 0) {
+                            return "--";
+                        }
+
+                        return Math.round(DgopService.cpuTemperature).toString();
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: cpuTempContent
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 3
+
+                DankIcon {
+                    name: "device_thermostat"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (DgopService.cpuTemperature > 85) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (DgopService.cpuTemperature > 69) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (DgopService.cpuTemperature === undefined || DgopService.cpuTemperature === null || DgopService.cpuTemperature < 0) {
+                            return "--°";
+                        }
+
+                        return Math.round(DgopService.cpuTemperature) + "°";
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+
+                    StyledTextMetrics {
+                        id: tempBaseline
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        text: "100°"
+                    }
+
+                    width: root.minimumWidth ? Math.max(tempBaseline.width, paintedWidth) : paintedWidth
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: 120
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            DgopService.setSortBy("cpu");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/DiskUsage.qml

@@ -0,0 +1,223 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property var widgetData: null
+    property string mountPath: (widgetData && widgetData.mountPath !== undefined) ? widgetData.mountPath : "/"
+    property bool isHovered: mouseArea.containsMouse
+
+    property var selectedMount: {
+        if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
+            return null
+        }
+
+        const currentMountPath = root.mountPath || "/"
+
+        for (let i = 0; i < DgopService.diskMounts.length; i++) {
+            if (DgopService.diskMounts[i].mount === currentMountPath) {
+                return DgopService.diskMounts[i]
+            }
+        }
+
+        for (let i = 0; i < DgopService.diskMounts.length; i++) {
+            if (DgopService.diskMounts[i].mount === "/") {
+                return DgopService.diskMounts[i]
+            }
+        }
+
+        return DgopService.diskMounts[0] || null
+    }
+
+    property real diskUsagePercent: {
+        if (!selectedMount || !selectedMount.percent) {
+            return 0
+        }
+        const percentStr = selectedMount.percent.replace("%", "")
+        return parseFloat(percentStr) || 0
+    }
+
+    Component.onCompleted: {
+        DgopService.addRef(["diskmounts"])
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["diskmounts"])
+    }
+
+    Connections {
+        function onWidgetDataChanged() {
+            root.mountPath = Qt.binding(() => {
+                return (root.widgetData && root.widgetData.mountPath !== undefined) ? root.widgetData.mountPath : "/"
+            })
+
+            root.selectedMount = Qt.binding(() => {
+                if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
+                    return null
+                }
+
+                const currentMountPath = root.mountPath || "/"
+
+                for (let i = 0; i < DgopService.diskMounts.length; i++) {
+                    if (DgopService.diskMounts[i].mount === currentMountPath) {
+                        return DgopService.diskMounts[i]
+                    }
+                }
+
+                for (let i = 0; i < DgopService.diskMounts.length; i++) {
+                    if (DgopService.diskMounts[i].mount === "/") {
+                        return DgopService.diskMounts[i]
+                    }
+                }
+
+                return DgopService.diskMounts[0] || null
+            })
+        }
+
+        target: SettingsData
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : diskContent.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? diskColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: diskColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: "storage"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (root.diskUsagePercent > 90) {
+                            return Theme.tempDanger
+                        }
+                        if (root.diskUsagePercent > 75) {
+                            return Theme.tempWarning
+                        }
+                        return Theme.surfaceText
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (root.diskUsagePercent === undefined || root.diskUsagePercent === null || root.diskUsagePercent === 0) {
+                            return "--"
+                        }
+                        return root.diskUsagePercent.toFixed(0)
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: diskContent
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 3
+
+                DankIcon {
+                    name: "storage"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (root.diskUsagePercent > 90) {
+                            return Theme.tempDanger
+                        }
+                        if (root.diskUsagePercent > 75) {
+                            return Theme.tempWarning
+                        }
+                        return Theme.surfaceText
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (!root.selectedMount) {
+                            return "--"
+                        }
+                        return root.selectedMount.mount
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+                }
+
+                StyledText {
+                    text: {
+                        if (root.diskUsagePercent === undefined || root.diskUsagePercent === null || root.diskUsagePercent === 0) {
+                            return "--%"
+                        }
+                        return root.diskUsagePercent.toFixed(0) + "%"
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+
+                    StyledTextMetrics {
+                        id: diskBaseline
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        text: "100%"
+                    }
+
+                    width: Math.max(diskBaseline.width, paintedWidth)
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: 120
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
+    MouseArea {
+        id: mouseArea
+        z: 1
+        anchors.fill: parent
+        hoverEnabled: root.isVerticalOrientation
+        onEntered: {
+            if (root.isVerticalOrientation && root.selectedMount) {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    const globalPos = mapToGlobal(width / 2, height / 2)
+                    const currentScreen = root.parentScreen || Screen
+                    const screenX = currentScreen ? currentScreen.x : 0
+                    const screenY = currentScreen ? currentScreen.y : 0
+                    const relativeY = globalPos.y - screenY
+                    const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (currentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                    const isLeft = root.axis?.edge === "left"
+                    tooltipLoader.item.show(root.selectedMount.mount, screenX + tooltipX, relativeY, currentScreen, isLeft, !isLeft)
+                }
+            }
+        }
+        onExited: {
+            if (tooltipLoader.item) {
+                tooltipLoader.item.hide()
+            }
+            tooltipLoader.active = false
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/FocusedApp.qml

@@ -0,0 +1,254 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool compactMode: SettingsData.focusedWindowCompactMode
+    property int availableWidth: 400
+    readonly property int maxNormalWidth: 456
+    readonly property int maxCompactWidth: 288
+    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+    property var activeDesktopEntry: null
+    property bool isHovered: mouseArea.containsMouse
+
+    Component.onCompleted: {
+        updateDesktopEntry()
+    }
+
+    Connections {
+        target: DesktopEntries
+        function onApplicationsChanged() {
+            root.updateDesktopEntry()
+        }
+    }
+
+    Connections {
+        target: root
+        function onActiveWindowChanged() {
+            root.updateDesktopEntry()
+        }
+    }
+
+    function updateDesktopEntry() {
+        if (activeWindow && activeWindow.appId) {
+            const moddedId = Paths.moddedAppId(activeWindow.appId)
+            activeDesktopEntry = DesktopEntries.heuristicLookup(moddedId)
+        } else {
+            activeDesktopEntry = null
+        }
+    }
+    readonly property bool hasWindowsOnCurrentWorkspace: {
+        if (CompositorService.isNiri) {
+            let currentWorkspaceId = null
+            for (var i = 0; i < NiriService.allWorkspaces.length; i++) {
+                const ws = NiriService.allWorkspaces[i]
+                if (ws.is_focused) {
+                    currentWorkspaceId = ws.id
+                    break
+                }
+            }
+
+            if (!currentWorkspaceId) {
+                return false
+            }
+
+            const workspaceWindows = NiriService.windows.filter(w => w.workspace_id === currentWorkspaceId)
+            return workspaceWindows.length > 0 && activeWindow && activeWindow.title
+        }
+
+        if (CompositorService.isHyprland) {
+            if (!Hyprland.focusedWorkspace || !activeWindow || !activeWindow.title) {
+                return false
+            }
+
+            try {
+                if (!Hyprland.toplevels) return false
+                const hyprlandToplevels = Array.from(Hyprland.toplevels.values)
+                const activeHyprToplevel = hyprlandToplevels.find(t => t?.wayland === activeWindow)
+
+                if (!activeHyprToplevel || !activeHyprToplevel.workspace) {
+                    return false
+                }
+
+                return activeHyprToplevel.workspace.id === Hyprland.focusedWorkspace.id
+            } catch (e) {
+                console.error("FocusedApp: hasWindowsOnCurrentWorkspace error:", e)
+                return false
+            }
+        }
+
+        return activeWindow && activeWindow.title
+    }
+
+    visible: hasWindowsOnCurrentWorkspace
+
+    content: Component {
+        Item {
+            implicitWidth: {
+                if (!root.hasWindowsOnCurrentWorkspace) return 0
+                if (root.isVerticalOrientation) return root.widgetThickness - root.horizontalPadding * 2
+                const baseWidth = contentRow.implicitWidth
+                return compactMode ? Math.min(baseWidth, maxCompactWidth - root.horizontalPadding * 2) : Math.min(baseWidth, maxNormalWidth - root.horizontalPadding * 2)
+            }
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+            clip: false
+
+            IconImage {
+                id: appIcon
+                anchors.centerIn: parent
+                width: 18
+                height: 18
+                visible: root.isVerticalOrientation && activeWindow && status === Image.Ready
+                source: {
+                    if (!activeWindow || !activeWindow.appId) return ""
+                    const moddedId = Paths.moddedAppId(activeWindow.appId)
+                    if (moddedId.toLowerCase().includes("steam_app")) return ""
+                    return Quickshell.iconPath(activeDesktopEntry?.icon, true)
+                }
+                smooth: true
+                mipmap: true
+                asynchronous: true
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                size: 18
+                name: "sports_esports"
+                color: Theme.surfaceText
+                visible: {
+                    if (!root.isVerticalOrientation || !activeWindow || !activeWindow.appId) return false
+                    const moddedId = Paths.moddedAppId(activeWindow.appId)
+                    return moddedId.toLowerCase().includes("steam_app")
+                }
+            }
+
+            Text {
+                anchors.centerIn: parent
+                visible: {
+                    if (!root.isVerticalOrientation || !activeWindow || !activeWindow.appId) return false
+                    if (appIcon.status === Image.Ready) return false
+                    const moddedId = Paths.moddedAppId(activeWindow.appId)
+                    return !moddedId.toLowerCase().includes("steam_app")
+                }
+                text: {
+                    if (!activeWindow || !activeWindow.appId) return "?"
+                    if (activeDesktopEntry && activeDesktopEntry.name) {
+                        return activeDesktopEntry.name.charAt(0).toUpperCase()
+                    }
+                    return activeWindow.appId.charAt(0).toUpperCase()
+                }
+                font.pixelSize: 10
+                color: Theme.surfaceText
+            }
+
+            Row {
+                id: contentRow
+                anchors.centerIn: parent
+                spacing: Theme.spacingS
+                visible: !root.isVerticalOrientation
+
+                StyledText {
+                    id: appText
+                    text: {
+                        if (!activeWindow || !activeWindow.appId) {
+                            return "";
+                        }
+
+                        const desktopEntry = DesktopEntries.heuristicLookup(activeWindow.appId);
+                        return desktopEntry && desktopEntry.name ? desktopEntry.name : activeWindow.appId;
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+                    width: Math.min(implicitWidth, compactMode ? 80 : 180)
+                    visible: !compactMode && text.length > 0
+                }
+
+                StyledText {
+                    text: "•"
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.outlineButton
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: !compactMode && appText.text && titleText.text
+                }
+
+                StyledText {
+                    id: titleText
+                    text: {
+                        const title = activeWindow && activeWindow.title ? activeWindow.title : "";
+                        const appName = appText.text;
+                        if (!title || !appName) {
+                            return title;
+                        }
+
+                        if (title.endsWith(" - " + appName)) {
+                            return title.substring(0, title.length - (" - " + appName).length);
+                        }
+
+                        if (title.endsWith(appName)) {
+                            return title.substring(0, title.length - appName.length).replace(/ - $/, "");
+                        }
+
+                        return title;
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+                    width: Math.min(implicitWidth, compactMode ? 280 : 250)
+                    visible: text.length > 0
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: root.isVerticalOrientation
+        acceptedButtons: Qt.NoButton
+        onEntered: {
+            if (root.isVerticalOrientation && activeWindow && activeWindow.appId && root.parentScreen) {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    const globalPos = mapToGlobal(width / 2, height / 2)
+                    const currentScreen = root.parentScreen
+                    const screenX = currentScreen ? currentScreen.x : 0
+                    const screenY = currentScreen ? currentScreen.y : 0
+                    const relativeY = globalPos.y - screenY
+                    const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (currentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+
+                    const appName = activeDesktopEntry && activeDesktopEntry.name ? activeDesktopEntry.name : activeWindow.appId
+                    const title = activeWindow.title || ""
+                    const tooltipText = appName + (title ? " • " + title : "")
+
+                    const isLeft = root.axis?.edge === "left"
+                    tooltipLoader.item.show(tooltipText, screenX + tooltipX, relativeY, currentScreen, isLeft, !isLeft)
+                }
+            }
+        }
+        onExited: {
+            if (tooltipLoader.item) {
+                tooltipLoader.item.hide()
+            }
+            tooltipLoader.active = false
+        }
+    }
+
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+}

quickshell/Modules/DankBar/Widgets/GpuTemperature.qml

@@ -0,0 +1,220 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property var popoutTarget: null
+    property var widgetData: null
+    property int selectedGpuIndex: (widgetData && widgetData.selectedGpuIndex !== undefined) ? widgetData.selectedGpuIndex : 0
+    property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
+    property real displayTemp: {
+        if (!DgopService.availableGpus || DgopService.availableGpus.length === 0) {
+            return 0;
+        }
+
+        if (selectedGpuIndex >= 0 && selectedGpuIndex < DgopService.availableGpus.length) {
+            return DgopService.availableGpus[selectedGpuIndex].temperature || 0;
+        }
+
+        return 0;
+    }
+
+    function updateWidgetPciId(pciId) {
+        const sections = ["left", "center", "right"];
+        for (let s = 0; s < sections.length; s++) {
+            const sectionId = sections[s];
+            let widgets = [];
+            if (sectionId === "left") {
+                widgets = SettingsData.dankBarLeftWidgets.slice();
+            } else if (sectionId === "center") {
+                widgets = SettingsData.dankBarCenterWidgets.slice();
+            } else if (sectionId === "right") {
+                widgets = SettingsData.dankBarRightWidgets.slice();
+            }
+            for (let i = 0; i < widgets.length; i++) {
+                const widget = widgets[i];
+                if (typeof widget === "object" && widget.id === "gpuTemp" && (!widget.pciId || widget.pciId === "")) {
+                    widgets[i] = {
+                        "id": widget.id,
+                        "enabled": widget.enabled !== undefined ? widget.enabled : true,
+                        "selectedGpuIndex": 0,
+                        "pciId": pciId
+                    };
+                    if (sectionId === "left") {
+                        SettingsData.setDankBarLeftWidgets(widgets);
+                    } else if (sectionId === "center") {
+                        SettingsData.setDankBarCenterWidgets(widgets);
+                    } else if (sectionId === "right") {
+                        SettingsData.setDankBarRightWidgets(widgets);
+                    }
+                    return ;
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        DgopService.addRef(["gpu"]);
+        if (widgetData && widgetData.pciId) {
+            DgopService.addGpuPciId(widgetData.pciId);
+        } else {
+            autoSaveTimer.running = true;
+        }
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["gpu"]);
+        if (widgetData && widgetData.pciId) {
+            DgopService.removeGpuPciId(widgetData.pciId);
+        }
+    }
+
+    Connections {
+        function onWidgetDataChanged() {
+            root.selectedGpuIndex = Qt.binding(() => {
+                return (root.widgetData && root.widgetData.selectedGpuIndex !== undefined) ? root.widgetData.selectedGpuIndex : 0;
+            });
+        }
+
+        target: SettingsData
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : gpuTempContent.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? gpuTempColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: gpuTempColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: "auto_awesome_mosaic"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (root.displayTemp > 80) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (root.displayTemp > 65) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (root.displayTemp === undefined || root.displayTemp === null || root.displayTemp === 0) {
+                            return "--";
+                        }
+
+                        return Math.round(root.displayTemp).toString();
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: gpuTempContent
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 3
+
+                DankIcon {
+                    name: "auto_awesome_mosaic"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (root.displayTemp > 80) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (root.displayTemp > 65) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (root.displayTemp === undefined || root.displayTemp === null || root.displayTemp === 0) {
+                            return "--°";
+                        }
+
+                        return Math.round(root.displayTemp) + "°";
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+
+                    StyledTextMetrics {
+                        id: gpuTempBaseline
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        text: "100°"
+                    }
+
+                    width: root.minimumWidth ? Math.max(gpuTempBaseline.width, paintedWidth) : paintedWidth
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: 120
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            DgopService.setSortBy("cpu");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+        }
+    }
+
+    Timer {
+        id: autoSaveTimer
+
+        interval: 100
+        running: false
+        onTriggered: {
+            if (DgopService.availableGpus && DgopService.availableGpus.length > 0) {
+                const firstGpu = DgopService.availableGpus[0];
+                if (firstGpu && firstGpu.pciId) {
+                    updateWidgetPciId(firstGpu.pciId);
+                    DgopService.addGpuPciId(firstGpu.pciId);
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/IdleInhibitor.qml

@@ -0,0 +1,34 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: Theme.surfaceText
+            }
+        }
+    }
+
+    MouseArea {
+        z: 1
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            SessionService.toggleIdleInhibit()
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/KeyboardLayoutName.qml

@@ -0,0 +1,148 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Io
+import qs.Common
+import qs.Modules.Plugins
+import qs.Modules.ProcessList
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool compactMode: SettingsData.keyboardLayoutNameCompactMode
+    property string currentLayout: CompositorService.isNiri ? NiriService.getCurrentKeyboardLayoutName() : ""
+    property string hyprlandKeyboard: ""
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : contentRow.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? contentColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: contentColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: "keyboard"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (!root.currentLayout) return ""
+                        const parts = root.currentLayout.split(" ")
+                        if (parts.length > 0) {
+                            return parts[0].substring(0, 2).toUpperCase()
+                        }
+                        return root.currentLayout.substring(0, 2).toUpperCase()
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: contentRow
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: Theme.spacingS
+
+                StyledText {
+                    text: root.currentLayout
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        z: 1
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            if (CompositorService.isNiri) {
+                NiriService.cycleKeyboardLayout()
+            } else if (CompositorService.isHyprland) {
+                Quickshell.execDetached([
+                    "hyprctl",
+                    "switchxkblayout",
+                    root.hyprlandKeyboard,
+                    "next"
+                ])
+            }
+        }
+    }
+
+    Connections {
+        target: CompositorService.isHyprland ? Hyprland : null
+        enabled: CompositorService.isHyprland
+
+        function onRawEvent(event) {
+            if (event.name === "activelayout") {
+                updateLayout()
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if (CompositorService.isHyprland) {
+            updateLayout()
+        }
+    }
+
+    function updateLayout() {
+        if (CompositorService.isHyprland) {
+            Proc.runCommand(null, ["hyprctl", "-j", "devices"], (output, exitCode) => {
+                if (exitCode !== 0) {
+                    root.currentLayout = "Unknown"
+                    return
+                }
+                try {
+                    const data = JSON.parse(output)
+                    const mainKeyboard = data.keyboards.find(kb => kb.main === true)
+                    root.hyprlandKeyboard = mainKeyboard.name
+
+                    if (mainKeyboard) {
+    					const layout = mainKeyboard.layout
+    					const variant = mainKeyboard.variant
+    					const index = mainKeyboard.active_layout_index
+
+                        if (root.compactMode && layout && variant && index !== undefined) {
+    						const layouts = mainKeyboard.layout.split(",")
+    						const variants = mainKeyboard.variant.split(",")
+    						const index = mainKeyboard.active_layout_index
+    						
+    						if (layouts[index] && variants[index] !== undefined) {
+    							if (variants[index] === "") {
+    								root.currentLayout = layouts[index]
+                                } else {
+    								root.currentLayout = layouts[index] + "-" + variants[index]
+                                }
+                            } else {
+    							root.currentLayout = "Unknown"
+                            }
+                        } else if (mainKeyboard && mainKeyboard.active_keymap) {
+                            root.currentLayout = mainKeyboard.active_keymap
+                        } else {
+                            root.currentLayout = "Unknown"
+                        }
+                    } else {
+                        root.currentLayout = "Unknown"
+                    }
+                } catch (e) {
+                    root.currentLayout = "Unknown"
+                }
+            })
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/LauncherButton.qml

@@ -0,0 +1,120 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Widgets
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool isActive: false
+    property var hyprlandOverviewLoader: null
+
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                visible: SettingsData.launcherLogoMode === "apps"
+                anchors.centerIn: parent
+                name: "apps"
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: Theme.surfaceText
+            }
+
+            SystemLogo {
+                visible: SettingsData.launcherLogoMode === "os"
+                anchors.centerIn: parent
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                colorOverride: Theme.effectiveLogoColor
+                brightnessOverride: SettingsData.launcherLogoBrightness
+                contrastOverride: SettingsData.launcherLogoContrast
+            }
+
+            IconImage {
+                visible: SettingsData.launcherLogoMode === "dank"
+                anchors.centerIn: parent
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                smooth: true
+                mipmap: true
+                asynchronous: true
+                source: "file://" + Theme.shellDir + "/assets/danklogo.svg"
+                layer.enabled: Theme.effectiveLogoColor !== ""
+                layer.smooth: true
+                layer.mipmap: true
+                layer.effect: MultiEffect {
+                    saturation: 0
+                    colorization: 1
+                    colorizationColor: Theme.effectiveLogoColor
+                }
+            }
+
+            IconImage {
+                visible: SettingsData.launcherLogoMode === "compositor" && (CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isDwl || CompositorService.isSway || CompositorService.isLabwc)
+                anchors.centerIn: parent
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                smooth: true
+                asynchronous: true
+                source: {
+                    if (CompositorService.isNiri) {
+                        return "file://" + Theme.shellDir + "/assets/niri.svg"
+                    } else if (CompositorService.isHyprland) {
+                        return "file://" + Theme.shellDir + "/assets/hyprland.svg"
+                    } else if (CompositorService.isDwl) {
+                        return "file://" + Theme.shellDir + "/assets/mango.png"
+                    } else if (CompositorService.isSway) {
+                        return "file://" + Theme.shellDir + "/assets/sway.svg"
+                    } else if (CompositorService.isLabwc) {
+                        return "file://" + Theme.shellDir + "/assets/labwc.png"
+                    }
+                    return ""
+                }
+                layer.enabled: Theme.effectiveLogoColor !== ""
+                layer.effect: MultiEffect {
+                    saturation: 0
+                    colorization: 1
+                    colorizationColor: Theme.effectiveLogoColor
+                    brightness: {
+                        SettingsData.launcherLogoBrightness
+                    }
+                    contrast: {
+                        SettingsData.launcherLogoContrast
+                    }
+                }
+            }
+
+            IconImage {
+                visible: SettingsData.launcherLogoMode === "custom" && SettingsData.launcherLogoCustomPath !== ""
+                anchors.centerIn: parent
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                smooth: true
+                asynchronous: true
+                source: SettingsData.launcherLogoCustomPath ? "file://" + SettingsData.launcherLogoCustomPath.replace("file://", "") : ""
+                layer.enabled: Theme.effectiveLogoColor !== ""
+                layer.effect: MultiEffect {
+                    saturation: 0
+                    colorization: 1
+                    colorizationColor: Theme.effectiveLogoColor
+                    brightness: SettingsData.launcherLogoBrightness
+                    contrast: SettingsData.launcherLogoContrast
+                }
+            }
+        }
+    }
+
+    onRightClicked: {
+        if (CompositorService.isNiri) {
+            NiriService.toggleOverview()
+        } else if (root.hyprlandOverviewLoader?.item) {
+            root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/Media.qml

@@ -0,0 +1,328 @@
+import QtQuick
+import Quickshell.Services.Mpris
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    readonly property MprisPlayer activePlayer: MprisController.activePlayer
+    readonly property bool playerAvailable: activePlayer !== null
+    property bool compactMode: false
+    readonly property int textWidth: {
+        switch (SettingsData.mediaSize) {
+        case 0:
+            return 0;
+        case 2:
+            return 180;
+        default:
+            return 120;
+        }
+    }
+    readonly property int currentContentWidth: {
+        if (isVerticalOrientation) {
+            return widgetThickness - horizontalPadding * 2;
+        }
+        const controlsWidth = 20 + Theme.spacingXS + 24 + Theme.spacingXS + 20;
+        const audioVizWidth = 20;
+        const contentWidth = audioVizWidth + Theme.spacingXS + controlsWidth;
+        return contentWidth + (textWidth > 0 ? textWidth + Theme.spacingXS : 0);
+    }
+    readonly property int currentContentHeight: {
+        if (!isVerticalOrientation) {
+            return widgetThickness - horizontalPadding * 2;
+        }
+        const audioVizHeight = 20;
+        const playButtonHeight = 24;
+        return audioVizHeight + Theme.spacingXS + playButtonHeight;
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.playerAvailable ? root.currentContentWidth : 0
+            implicitHeight: root.playerAvailable ? root.currentContentHeight : 0
+            opacity: root.playerAvailable ? 1 : 0
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+            }
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+            }
+
+            Behavior on implicitHeight {
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+            }
+
+            Column {
+                id: verticalLayout
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+
+                AudioVisualization {
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
+                                const globalPos = parent.mapToGlobal(0, 0)
+                                const currentScreen = root.parentScreen || Screen
+                                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, parent.width)
+                                root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
+                            }
+                            root.clicked()
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: 24
+                    height: 24
+                    radius: 12
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: activePlayer && activePlayer.playbackState === 1 ? Theme.primary : Theme.primaryHover
+                    visible: root.playerAvailable
+                    opacity: activePlayer ? 1 : 0.3
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: activePlayer && activePlayer.playbackState === 1 ? "pause" : "play_arrow"
+                        size: 14
+                        color: activePlayer && activePlayer.playbackState === 1 ? Theme.background : Theme.primary
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        enabled: root.playerAvailable
+                        cursorShape: Qt.PointingHandCursor
+                        acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
+                        onClicked: (mouse) => {
+                            if (!activePlayer) return
+                            if (mouse.button === Qt.LeftButton) {
+                                activePlayer.togglePlaying()
+                            } else if (mouse.button === Qt.MiddleButton) {
+                                activePlayer.previous()
+                            } else if (mouse.button === Qt.RightButton) {
+                                activePlayer.next()
+                            }
+                        }
+                    }
+                }
+            }
+
+            Row {
+                id: mediaRow
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+
+                Row {
+                    id: mediaInfo
+                    spacing: Theme.spacingXS
+
+                    AudioVisualization {
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Rectangle {
+                        id: textContainer
+                        property string displayText: {
+                            if (!activePlayer || !activePlayer.trackTitle) {
+                                return "";
+                            }
+
+                            let identity = activePlayer.identity || "";
+                            let isWebMedia = identity.toLowerCase().includes("firefox") || identity.toLowerCase().includes("chrome") || identity.toLowerCase().includes("chromium") || identity.toLowerCase().includes("edge") || identity.toLowerCase().includes("safari");
+                            let title = "";
+                            let subtitle = "";
+                            if (isWebMedia && activePlayer.trackTitle) {
+                                title = activePlayer.trackTitle;
+                                subtitle = activePlayer.trackArtist || identity;
+                            } else {
+                                title = activePlayer.trackTitle || "Unknown Track";
+                                subtitle = activePlayer.trackArtist || "";
+                            }
+                            return subtitle.length > 0 ? title + " • " + subtitle : title;
+                        }
+
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: textWidth
+                        height: root.widgetThickness
+                        visible: SettingsData.mediaSize > 0
+                        clip: true
+                        color: "transparent"
+
+                        StyledText {
+                            id: mediaText
+                            property bool needsScrolling: implicitWidth > textContainer.width
+                            property real scrollOffset: 0
+
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: textContainer.displayText
+                            font.pixelSize: Theme.barTextSize(root.barThickness)
+                            color: Theme.surfaceText
+                            wrapMode: Text.NoWrap
+                            x: needsScrolling ? -scrollOffset : 0
+                            onTextChanged: {
+                                scrollOffset = 0;
+                                scrollAnimation.restart();
+                            }
+
+                            SequentialAnimation {
+                                id: scrollAnimation
+                                running: mediaText.needsScrolling && textContainer.visible
+                                loops: Animation.Infinite
+
+                                PauseAnimation {
+                                    duration: 2000
+                                }
+
+                                NumberAnimation {
+                                    target: mediaText
+                                    property: "scrollOffset"
+                                    from: 0
+                                    to: mediaText.implicitWidth - textContainer.width + 5
+                                    duration: Math.max(1000, (mediaText.implicitWidth - textContainer.width + 5) * 60)
+                                    easing.type: Easing.Linear
+                                }
+
+                                PauseAnimation {
+                                    duration: 2000
+                                }
+
+                                NumberAnimation {
+                                    target: mediaText
+                                    property: "scrollOffset"
+                                    to: 0
+                                    duration: Math.max(1000, (mediaText.implicitWidth - textContainer.width + 5) * 60)
+                                    easing.type: Easing.Linear
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            enabled: root.playerAvailable
+                            cursorShape: Qt.PointingHandCursor
+                            onPressed: {
+                                if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
+                                    const globalPos = mapToGlobal(0, 0)
+                                    const currentScreen = root.parentScreen || Screen
+                                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.width)
+                                    root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
+                                }
+                                root.clicked()
+                            }
+                        }
+                    }
+                }
+
+                Row {
+                    spacing: Theme.spacingXS
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    Rectangle {
+                        width: 20
+                        height: 20
+                        radius: 10
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: prevArea.containsMouse ? Theme.primaryHover : "transparent"
+                        visible: root.playerAvailable
+                        opacity: (activePlayer && activePlayer.canGoPrevious) ? 1 : 0.3
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "skip_previous"
+                            size: 12
+                            color: Theme.surfaceText
+                        }
+
+                        MouseArea {
+                            id: prevArea
+                            anchors.fill: parent
+                            enabled: root.playerAvailable
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                if (activePlayer) {
+                                    activePlayer.previous();
+                                }
+                            }
+                        }
+                    }
+
+                    Rectangle {
+                        width: 24
+                        height: 24
+                        radius: 12
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: activePlayer && activePlayer.playbackState === 1 ? Theme.primary : Theme.primaryHover
+                        visible: root.playerAvailable
+                        opacity: activePlayer ? 1 : 0.3
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: activePlayer && activePlayer.playbackState === 1 ? "pause" : "play_arrow"
+                            size: 14
+                            color: activePlayer && activePlayer.playbackState === 1 ? Theme.background : Theme.primary
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            enabled: root.playerAvailable
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                if (activePlayer) {
+                                    activePlayer.togglePlaying();
+                                }
+                            }
+                        }
+                    }
+
+                    Rectangle {
+                        width: 20
+                        height: 20
+                        radius: 10
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: nextArea.containsMouse ? Theme.primaryHover : "transparent"
+                        visible: playerAvailable
+                        opacity: (activePlayer && activePlayer.canGoNext) ? 1 : 0.3
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "skip_next"
+                            size: 12
+                            color: Theme.surfaceText
+                        }
+
+                        MouseArea {
+                            id: nextArea
+                            anchors.fill: parent
+                            enabled: root.playerAvailable
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                if (activePlayer) {
+                                    activePlayer.next();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/NetworkMonitor.qml

@@ -0,0 +1,161 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modules.Plugins
+import qs.Modules.ProcessList
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    function formatNetworkSpeed(bytesPerSec) {
+        if (bytesPerSec < 1024) {
+            return bytesPerSec.toFixed(0) + " B/s"
+        } else if (bytesPerSec < 1024 * 1024) {
+            return (bytesPerSec / 1024).toFixed(1) + " KB/s"
+        } else if (bytesPerSec < 1024 * 1024 * 1024) {
+            return (bytesPerSec / (1024 * 1024)).toFixed(1) + " MB/s"
+        } else {
+            return (bytesPerSec / (1024 * 1024 * 1024)).toFixed(1) + " GB/s"
+        }
+    }
+
+    Component.onCompleted: {
+        DgopService.addRef(["network"])
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["network"])
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : contentRow.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? contentColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: contentColumn
+                anchors.centerIn: parent
+                spacing: 2
+                visible: root.isVerticalOrientation
+
+                DankIcon {
+                    name: "network_check"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        const rate = DgopService.networkRxRate
+                        if (rate < 1024) return rate.toFixed(0)
+                        if (rate < 1024 * 1024) return (rate / 1024).toFixed(0) + "K"
+                        return (rate / (1024 * 1024)).toFixed(0) + "M"
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.info
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        const rate = DgopService.networkTxRate
+                        if (rate < 1024) return rate.toFixed(0)
+                        if (rate < 1024 * 1024) return (rate / 1024).toFixed(0) + "K"
+                        return (rate / (1024 * 1024)).toFixed(0) + "M"
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.error
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: contentRow
+                anchors.centerIn: parent
+                spacing: Theme.spacingS
+                visible: !root.isVerticalOrientation
+
+                DankIcon {
+                    name: "network_check"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                Row {
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: 4
+
+                    StyledText {
+                        text: "↓"
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.info
+                    }
+
+                    StyledText {
+                        text: DgopService.networkRxRate > 0 ? root.formatNetworkSpeed(DgopService.networkRxRate) : "0 B/s"
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                        horizontalAlignment: Text.AlignLeft
+                        elide: Text.ElideNone
+                        wrapMode: Text.NoWrap
+
+                        StyledTextMetrics {
+                            id: rxBaseline
+                            font.pixelSize: Theme.barTextSize(root.barThickness)
+                            text: "88.8 MB/s"
+                        }
+
+                        width: Math.max(rxBaseline.width, paintedWidth)
+
+                        Behavior on width {
+                            NumberAnimation {
+                                duration: 120
+                                easing.type: Easing.OutCubic
+                            }
+                        }
+                    }
+                }
+
+                Row {
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: 4
+
+                    StyledText {
+                        text: "↑"
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.error
+                    }
+
+                    StyledText {
+                        text: DgopService.networkTxRate > 0 ? root.formatNetworkSpeed(DgopService.networkTxRate) : "0 B/s"
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                        horizontalAlignment: Text.AlignLeft
+                        elide: Text.ElideNone
+                        wrapMode: Text.NoWrap
+
+                        StyledTextMetrics {
+                            id: txBaseline
+                            font.pixelSize: Theme.barTextSize(root.barThickness)
+                            text: "88.8 MB/s"
+                        }
+
+                        width: Math.max(txBaseline.width, paintedWidth)
+
+                        Behavior on width {
+                            NumberAnimation {
+                                duration: 120
+                                easing.type: Easing.OutCubic
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/NotepadButton.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import Quickshell.Hyprland
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    readonly property string focusedScreenName: (
+        CompositorService.isHyprland && typeof Hyprland !== "undefined" && Hyprland.focusedWorkspace && Hyprland.focusedWorkspace.monitor ? (Hyprland.focusedWorkspace.monitor.name || "") :
+        CompositorService.isNiri && typeof NiriService !== "undefined" && NiriService.currentOutput ? NiriService.currentOutput : ""
+    )
+
+    function resolveNotepadInstance() {
+        if (typeof notepadSlideoutVariants === "undefined" || !notepadSlideoutVariants || !notepadSlideoutVariants.instances) {
+            return null
+        }
+
+        const targetScreen = focusedScreenName
+        if (targetScreen) {
+            for (var i = 0; i < notepadSlideoutVariants.instances.length; i++) {
+                var slideout = notepadSlideoutVariants.instances[i]
+                if (slideout.modelData && slideout.modelData.name === targetScreen) {
+                    return slideout
+                }
+            }
+        }
+
+        return notepadSlideoutVariants.instances.length > 0 ? notepadSlideoutVariants.instances[0] : null
+    }
+
+    readonly property var notepadInstance: resolveNotepadInstance()
+    readonly property bool isActive: notepadInstance?.isVisible ?? false
+
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                id: notepadIcon
+
+                anchors.centerIn: parent
+                name: "assignment"
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: root.isActive ? Theme.primary : Theme.surfaceText
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            const inst = root.notepadInstance
+            if (inst) {
+                inst.toggle()
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/NotificationCenterButton.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Plugins
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool hasUnread: false
+    property bool isActive: false
+
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                id: notifIcon
+                anchors.centerIn: parent
+                name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: SessionData.doNotDisturb ? Theme.error : (root.isActive ? Theme.primary : Theme.surfaceText)
+            }
+
+            Rectangle {
+                width: 6
+                height: 6
+                radius: 3
+                color: Theme.error
+                anchors.right: notifIcon.right
+                anchors.top: notifIcon.top
+                visible: root.hasUnread
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/PrivacyIndicator.qml

@@ -0,0 +1,252 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+    readonly property bool hasActivePrivacy: PrivacyService.anyPrivacyActive
+    readonly property int activeCount: PrivacyService.microphoneActive + PrivacyService.cameraActive + PrivacyService.screensharingActive
+    readonly property real contentWidth: hasActivePrivacy ? (activeCount * 18 + (activeCount - 1) * Theme.spacingXS) : 0
+    readonly property real contentHeight: hasActivePrivacy ? (activeCount * 18 + (activeCount - 1) * Theme.spacingXS) : 0
+    readonly property real visualWidth: isVertical ? widgetThickness : (hasActivePrivacy ? (contentWidth + horizontalPadding * 2) : 0)
+    readonly property real visualHeight: isVertical ? (hasActivePrivacy ? (contentHeight + horizontalPadding * 2) : 0) : widgetThickness
+
+    width: isVertical ? barThickness : visualWidth
+    height: isVertical ? visualHeight : barThickness
+    visible: hasActivePrivacy
+    opacity: hasActivePrivacy ? 1 : 0
+    enabled: hasActivePrivacy
+
+    Rectangle {
+        id: visualContent
+        width: root.visualWidth
+        height: root.visualHeight
+        anchors.centerIn: parent
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+        color: {
+            if (SettingsData.dankBarNoBackground) {
+                return "transparent"
+            }
+
+            return Qt.rgba(privacyArea.containsMouse ? Theme.errorPressed.r : Theme.errorHover.r, privacyArea.containsMouse ? Theme.errorPressed.g : Theme.errorHover.g, privacyArea.containsMouse ? Theme.errorPressed.b : Theme.errorHover.b, (privacyArea.containsMouse ? Theme.errorPressed.a : Theme.errorHover.a) * Theme.widgetTransparency)
+        }
+
+        Column {
+            anchors.centerIn: parent
+            spacing: Theme.spacingXS
+            visible: root.isVertical && root.hasActivePrivacy
+
+            Item {
+                width: 18
+                height: 18
+                visible: PrivacyService.microphoneActive
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                DankIcon {
+                    name: {
+                        const sourceAudio = AudioService.source?.audio
+                        const muted = !sourceAudio || sourceAudio.muted || sourceAudio.volume === 0.0
+                        if (muted) return "mic_off"
+                        return "mic"
+                    }
+                    size: Theme.iconSizeSmall
+                    color: Theme.error
+                    filled: true
+                    anchors.centerIn: parent
+                }
+            }
+
+            Item {
+                width: 18
+                height: 18
+                visible: PrivacyService.cameraActive
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                DankIcon {
+                    name: "camera_video"
+                    size: Theme.iconSizeSmall
+                    color: Theme.surfaceText
+                    filled: true
+                    anchors.centerIn: parent
+                }
+
+                Rectangle {
+                    width: 6
+                    height: 6
+                    radius: 3
+                    color: Theme.error
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    anchors.rightMargin: -2
+                    anchors.topMargin: -1
+                }
+            }
+
+            Item {
+                width: 18
+                height: 18
+                visible: PrivacyService.screensharingActive
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                DankIcon {
+                    name: "screen_share"
+                    size: Theme.iconSizeSmall
+                    color: Theme.warning
+                    filled: true
+                    anchors.centerIn: parent
+                }
+            }
+        }
+
+        Row {
+            anchors.centerIn: parent
+            spacing: Theme.spacingXS
+            visible: !root.isVertical && root.hasActivePrivacy
+
+            Item {
+                width: 18
+                height: 18
+                visible: PrivacyService.microphoneActive
+                anchors.verticalCenter: parent.verticalCenter
+
+                DankIcon {
+                    name: {
+                        const sourceAudio = AudioService.source?.audio
+                        const muted = !sourceAudio || sourceAudio.muted || sourceAudio.volume === 0.0
+                        if (muted) return "mic_off"
+                        return "mic"
+                    }
+                    size: Theme.iconSizeSmall
+                    color: Theme.error
+                    filled: true
+                    anchors.centerIn: parent
+                }
+            }
+
+            Item {
+                width: 18
+                height: 18
+                visible: PrivacyService.cameraActive
+                anchors.verticalCenter: parent.verticalCenter
+
+                DankIcon {
+                    name: "camera_video"
+                    size: Theme.iconSizeSmall
+                    color: Theme.surfaceText
+                    filled: true
+                    anchors.centerIn: parent
+                }
+
+                Rectangle {
+                    width: 6
+                    height: 6
+                    radius: 3
+                    color: Theme.error
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    anchors.rightMargin: -2
+                    anchors.topMargin: -1
+                }
+            }
+
+            Item {
+                width: 18
+                height: 18
+                visible: PrivacyService.screensharingActive
+                anchors.verticalCenter: parent.verticalCenter
+
+                DankIcon {
+                    name: "screen_share"
+                    size: Theme.iconSizeSmall
+                    color: Theme.warning
+                    filled: true
+                    anchors.centerIn: parent
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        id: privacyArea
+        z: -1
+        anchors.fill: parent
+        hoverEnabled: hasActivePrivacy
+        enabled: hasActivePrivacy
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+        }
+    }
+
+    Rectangle {
+        id: tooltip
+        width: tooltipText.contentWidth + Theme.spacingM * 2
+        height: tooltipText.contentHeight + Theme.spacingS * 2
+        radius: Theme.cornerRadius
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        border.color: Theme.outlineMedium
+        border.width: 1
+        visible: false
+        opacity: privacyArea.containsMouse && hasActivePrivacy ? 1 : 0
+        z: 100
+        x: (parent.width - width) / 2
+        y: -height - Theme.spacingXS
+
+        StyledText {
+            id: tooltipText
+            anchors.centerIn: parent
+            text: PrivacyService.getPrivacySummary()
+            font.pixelSize: Theme.barTextSize(barThickness)
+            color: Theme.surfaceText
+        }
+
+        Rectangle {
+            width: 8
+            height: 8
+            color: parent.color
+            border.color: parent.border.color
+            border.width: parent.border.width
+            rotation: 45
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.bottom
+            anchors.topMargin: -4
+        }
+
+        Behavior on opacity {
+            enabled: hasActivePrivacy && root.visible
+
+            NumberAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
+            }
+        }
+    }
+
+    Behavior on width {
+        enabled: hasActivePrivacy && visible && !isVertical
+
+        NumberAnimation {
+            duration: Theme.mediumDuration
+            easing.type: Theme.emphasizedEasing
+        }
+    }
+
+    Behavior on height {
+        enabled: hasActivePrivacy && visible && isVertical
+
+        NumberAnimation {
+            duration: Theme.mediumDuration
+            easing.type: Theme.emphasizedEasing
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/RamMonitor.qml

@@ -0,0 +1,163 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property var popoutTarget: null
+    property var widgetData: null
+    property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
+    property bool showSwap: (widgetData && widgetData.showSwap !== undefined) ? widgetData.showSwap : false
+    readonly property real swapUsage: DgopService.totalSwapKB > 0 ? (DgopService.usedSwapKB / DgopService.totalSwapKB) * 100 : 0
+
+    Component.onCompleted: {
+        DgopService.addRef(["memory"]);
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["memory"]);
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : ramContent.implicitWidth
+            implicitHeight: root.isVerticalOrientation ? ramColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: ramColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: "developer_board"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (DgopService.memoryUsage > 90) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (DgopService.memoryUsage > 75) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (DgopService.memoryUsage === undefined || DgopService.memoryUsage === null || DgopService.memoryUsage === 0) {
+                            return "--";
+                        }
+
+                        return DgopService.memoryUsage.toFixed(0);
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    visible: root.showSwap && DgopService.totalSwapKB > 0
+                    text: root.swapUsage.toFixed(0)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceVariantText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: ramContent
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 3
+
+                DankIcon {
+                    name: "developer_board"
+                    size: Theme.barIconSize(root.barThickness)
+                    color: {
+                        if (DgopService.memoryUsage > 90) {
+                            return Theme.tempDanger;
+                        }
+
+                        if (DgopService.memoryUsage > 75) {
+                            return Theme.tempWarning;
+                        }
+
+                        return Theme.surfaceText;
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (DgopService.memoryUsage === undefined || DgopService.memoryUsage === null || DgopService.memoryUsage === 0) {
+                            return "--%";
+                        }
+
+                        let ramText = DgopService.memoryUsage.toFixed(0) + "%";
+                        if (root.showSwap && DgopService.totalSwapKB > 0) {
+                            return ramText + " · " + root.swapUsage.toFixed(0) + "%";
+                        }
+                        return ramText;
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+                    wrapMode: Text.NoWrap
+
+                    StyledTextMetrics {
+                        id: ramBaseline
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        text: {
+                            if (!root.showSwap) {
+                                return "100%";
+                            }
+                            if (root.swapUsage < 10) {
+                                return "100% · 0%";
+                            }
+                            return "100% · 100%";
+                        }
+                    }
+
+                    width: root.minimumWidth ? Math.max(ramBaseline.width, paintedWidth) : paintedWidth
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: 120
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            DgopService.setSortBy("memory");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/RunningApps.qml

@@ -0,0 +1,798 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property string section: "left"
+    property var parentScreen
+    property var hoveredItem: null
+    property var topBar: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+    property Item windowRoot: (Window.window ? Window.window.contentItem : null)
+    property int _desktopEntriesUpdateTrigger: 0
+    property int _toplevelsUpdateTrigger: 0
+
+    readonly property var sortedToplevels: {
+        _toplevelsUpdateTrigger
+        const toplevels = CompositorService.sortedToplevels
+        if (!toplevels || toplevels.length === 0) return []
+
+        if (SettingsData.runningAppsCurrentWorkspace) {
+            return CompositorService.filterCurrentWorkspace(toplevels, parentScreen?.name) || []
+        }
+        return toplevels
+    }
+
+    Connections {
+        target: CompositorService
+        function onToplevelsChanged() {
+            _toplevelsUpdateTrigger++
+        }
+    }
+
+    Connections {
+        target: DesktopEntries
+        function onApplicationsChanged() {
+            _desktopEntriesUpdateTrigger++
+        }
+    }
+    readonly property var groupedWindows: {
+        if (!SettingsData.runningAppsGroupByApp) {
+            return []
+        }
+        try {
+            if (!sortedToplevels || sortedToplevels.length === 0) {
+                return []
+            }
+            const appGroups = new Map()
+            sortedToplevels.forEach((toplevel, index) => {
+                                        if (!toplevel)
+                                        return
+                                        const appId = toplevel?.appId || "unknown"
+                                        if (!appGroups.has(appId)) {
+                                            appGroups.set(appId, {
+                                                              "appId": appId,
+                                                              "windows": []
+                                                          })
+                                        }
+                                        appGroups.get(appId).windows.push({
+                                                                              "toplevel": toplevel,
+                                                                              "windowId": index,
+                                                                              "windowTitle": toplevel?.title || "(Unnamed)"
+                                                                          })
+                                    })
+            return Array.from(appGroups.values())
+        } catch (e) {
+            console.error("RunningApps: groupedWindows error:", e)
+            return []
+        }
+    }
+    readonly property int windowCount: SettingsData.runningAppsGroupByApp ? (groupedWindows?.length || 0) : (sortedToplevels?.length || 0)
+    readonly property int calculatedSize: {
+        if (windowCount === 0) {
+            return 0
+        }
+        if (SettingsData.runningAppsCompactMode) {
+            return windowCount * 24 + (windowCount - 1) * Theme.spacingXS + horizontalPadding * 2
+        } else {
+            return windowCount * (24 + Theme.spacingXS + 120) + (windowCount - 1) * Theme.spacingXS + horizontalPadding * 2
+        }
+    }
+
+    width: isVertical ? barThickness : calculatedSize
+    height: isVertical ? calculatedSize : barThickness
+    visible: windowCount > 0
+
+
+    Rectangle {
+        id: visualBackground
+        width: root.isVertical ? root.widgetThickness : root.calculatedSize
+        height: root.isVertical ? root.calculatedSize : root.widgetThickness
+        anchors.centerIn: parent
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+        clip: false
+        color: {
+            if (windowCount === 0) {
+                return "transparent"
+            }
+
+            if (SettingsData.dankBarNoBackground) {
+                return "transparent"
+            }
+
+            const baseColor = Theme.widgetBaseBackgroundColor
+            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+
+        property real scrollAccumulator: 0
+        property real touchpadThreshold: 500
+
+        onWheel: wheel => {
+                     const deltaY = wheel.angleDelta.y
+                     const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0
+
+                     const windows = root.sortedToplevels
+                     if (windows.length < 2) {
+                         return
+                     }
+
+                     if (isMouseWheel) {
+                         // Direct mouse wheel action
+                         let currentIndex = -1
+                         for (var i = 0; i < windows.length; i++) {
+                             if (windows[i].activated) {
+                                 currentIndex = i
+                                 break
+                             }
+                         }
+
+                         let nextIndex
+                         if (deltaY < 0) {
+                             if (currentIndex === -1) {
+                                 nextIndex = 0
+                             } else {
+                                 nextIndex = (currentIndex + 1) % windows.length
+                             }
+                         } else {
+                             if (currentIndex === -1) {
+                                 nextIndex = windows.length - 1
+                             } else {
+                                 nextIndex = (currentIndex - 1 + windows.length) % windows.length
+                             }
+                         }
+
+                         const nextWindow = windows[nextIndex]
+                         if (nextWindow) {
+                             nextWindow.activate()
+                         }
+                     } else {
+                         // Touchpad - accumulate small deltas
+                         scrollAccumulator += deltaY
+
+                         if (Math.abs(scrollAccumulator) >= touchpadThreshold) {
+                             let currentIndex = -1
+                             for (var i = 0; i < windows.length; i++) {
+                                 if (windows[i].activated) {
+                                     currentIndex = i
+                                     break
+                                 }
+                             }
+
+                             let nextIndex
+                             if (scrollAccumulator < 0) {
+                                 if (currentIndex === -1) {
+                                     nextIndex = 0
+                                 } else {
+                                     nextIndex = (currentIndex + 1) % windows.length
+                                 }
+                             } else {
+                                 if (currentIndex === -1) {
+                                     nextIndex = windows.length - 1
+                                 } else {
+                                     nextIndex = (currentIndex - 1 + windows.length) % windows.length
+                                 }
+                             }
+
+                             const nextWindow = windows[nextIndex]
+                             if (nextWindow) {
+                                 nextWindow.activate()
+                             }
+
+                             scrollAccumulator = 0
+                         }
+                     }
+
+                     wheel.accepted = true
+                 }
+    }
+
+    Loader {
+        id: layoutLoader
+        anchors.centerIn: parent
+        sourceComponent: root.isVertical ? columnLayout : rowLayout
+    }
+
+    Component {
+        id: rowLayout
+        Row {
+            spacing: Theme.spacingXS
+
+            Repeater {
+                id: windowRepeater
+                model: ScriptModel {
+                    values: SettingsData.runningAppsGroupByApp ? groupedWindows : sortedToplevels
+                    objectProp: SettingsData.runningAppsGroupByApp ? "appId" : "address"
+                }
+
+                delegate: Item {
+                    id: delegateItem
+
+                    property bool isGrouped: SettingsData.runningAppsGroupByApp
+                    property var groupData: isGrouped ? modelData : null
+                    property var toplevelData: isGrouped ? (modelData.windows.length > 0 ? modelData.windows[0].toplevel : null) : modelData
+                    property bool isFocused: toplevelData ? toplevelData.activated : false
+                    property string appId: isGrouped ? modelData.appId : (modelData.appId || "")
+                    property string windowTitle: toplevelData ? (toplevelData.title || "(Unnamed)") : "(Unnamed)"
+                    property var toplevelObject: toplevelData
+                    property int windowCount: isGrouped ? modelData.windows.length : 1
+                    property string tooltipText: {
+                        root._desktopEntriesUpdateTrigger
+                        let appName = "Unknown"
+                        if (appId) {
+                            const desktopEntry = DesktopEntries.heuristicLookup(appId)
+                            appName = desktopEntry && desktopEntry.name ? desktopEntry.name : appId
+                        }
+                        if (isGrouped && windowCount > 1) {
+                            return appName + " (" + windowCount + " windows)"
+                        }
+                        return appName + (windowTitle ? " • " + windowTitle : "")
+                    }
+                    readonly property real visualWidth: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
+
+                    width: visualWidth
+                    height: root.barThickness
+
+                    Rectangle {
+                        id: visualContent
+                        width: delegateItem.visualWidth
+                        height: 24
+                        anchors.centerIn: parent
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (isFocused) {
+                                return mouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                            } else {
+                                return mouseArea.containsMouse ? Qt.rgba(Theme.primaryHover.r, Theme.primaryHover.g, Theme.primaryHover.b, 0.1) : "transparent"
+                            }
+                        }
+
+                        // App icon
+                        IconImage {
+                            id: iconImg
+                            anchors.left: parent.left
+                            anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: Theme.barIconSize(root.barThickness)
+                            height: Theme.barIconSize(root.barThickness)
+                            source: {
+                                root._desktopEntriesUpdateTrigger
+                                const moddedId = Paths.moddedAppId(appId)
+                                if (moddedId.toLowerCase().includes("steam_app")) {
+                                    return ""
+                                }
+                                return Quickshell.iconPath(DesktopEntries.heuristicLookup(moddedId)?.icon, true)
+                            }
+                            smooth: true
+                            mipmap: true
+                            asynchronous: true
+                            visible: status === Image.Ready
+                        }
+
+                        DankIcon {
+                            anchors.left: parent.left
+                            anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
+                            anchors.verticalCenter: parent.verticalCenter
+                            size: Theme.barIconSize(root.barThickness)
+                            name: "sports_esports"
+                            color: Theme.surfaceText
+                            visible: {
+                                const moddedId = Paths.moddedAppId(appId)
+                                return moddedId.toLowerCase().includes("steam_app")
+                            }
+                        }
+
+                        // Fallback text if no icon found
+                        Text {
+                            anchors.centerIn: parent
+                            visible: {
+                                const moddedId = Paths.moddedAppId(appId)
+                                const isSteamApp = moddedId.toLowerCase().includes("steam_app")
+                                return !iconImg.visible && !isSteamApp
+                            }
+                            text: {
+                                root._desktopEntriesUpdateTrigger
+                                if (!appId) {
+                                    return "?"
+                                }
+
+                                const desktopEntry = DesktopEntries.heuristicLookup(appId)
+                                if (desktopEntry && desktopEntry.name) {
+                                    return desktopEntry.name.charAt(0).toUpperCase()
+                                }
+
+                                return appId.charAt(0).toUpperCase()
+                            }
+                            font.pixelSize: 10
+                            color: Theme.surfaceText
+                        }
+
+                        Rectangle {
+                            anchors.right: parent.right
+                            anchors.bottom: parent.bottom
+                            anchors.rightMargin: SettingsData.runningAppsCompactMode ? -2 : 2
+                            anchors.bottomMargin: -2
+                            width: 14
+                            height: 14
+                            radius: 7
+                            color: Theme.primary
+                            visible: isGrouped && windowCount > 1
+                            z: 10
+
+                            StyledText {
+                                anchors.centerIn: parent
+                                text: windowCount > 9 ? "9+" : windowCount
+                                font.pixelSize: 9
+                                color: Theme.surface
+                            }
+                        }
+
+                        // Window title text (only visible in expanded mode)
+                        StyledText {
+                            anchors.left: iconImg.right
+                            anchors.leftMargin: Theme.spacingXS
+                            anchors.right: parent.right
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: !SettingsData.runningAppsCompactMode
+                            text: windowTitle
+                            font.pixelSize: Theme.barTextSize(barThickness)
+                            color: Theme.surfaceText
+                            elide: Text.ElideRight
+                            maximumLineCount: 1
+                        }
+                    }
+
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        acceptedButtons: Qt.LeftButton | Qt.RightButton
+                        onClicked: mouse => {
+                                       if (mouse.button === Qt.LeftButton) {
+                                           if (isGrouped && windowCount > 1) {
+                                               let currentIndex = -1
+                                               for (var i = 0; i < groupData.windows.length; i++) {
+                                                   if (groupData.windows[i].toplevel.activated) {
+                                                       currentIndex = i
+                                                       break
+                                                   }
+                                               }
+                                               const nextIndex = (currentIndex + 1) % groupData.windows.length
+                                               groupData.windows[nextIndex].toplevel.activate()
+                                           } else if (toplevelObject) {
+                                               toplevelObject.activate()
+                                           }
+                                       } else if (mouse.button === Qt.RightButton) {
+                                           if (tooltipLoader.item) {
+                                               tooltipLoader.item.hide()
+                                           }
+                                           tooltipLoader.active = false
+
+                                           windowContextMenuLoader.active = true
+                                           if (windowContextMenuLoader.item) {
+                                               windowContextMenuLoader.item.currentWindow = toplevelObject
+                                               if (root.isVertical) {
+                                                   const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2)
+                                                   const screenX = root.parentScreen ? root.parentScreen.x : 0
+                                                   const screenY = root.parentScreen ? root.parentScreen.y : 0
+                                                   const relativeY = globalPos.y - screenY
+                                                   const xPos = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                                                   windowContextMenuLoader.item.showAt(xPos, relativeY, true, root.axis?.edge)
+                                               } else {
+                                                   const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, 0)
+                                                   const screenX = root.parentScreen ? root.parentScreen.x : 0
+                                                   const relativeX = globalPos.x - screenX
+                                                   const yPos = Theme.barHeight + SettingsData.dankBarSpacing - 7
+                                                   windowContextMenuLoader.item.showAt(relativeX, yPos, false, "top")
+                                               }
+                                           }
+                                       }
+                                   }
+                        onEntered: {
+                            root.hoveredItem = delegateItem
+                            tooltipLoader.active = true
+                            if (tooltipLoader.item) {
+                                if (root.isVertical) {
+                                    const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2)
+                                    const screenX = root.parentScreen ? root.parentScreen.x : 0
+                                    const screenY = root.parentScreen ? root.parentScreen.y : 0
+                                    const relativeY = globalPos.y - screenY
+                                    const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                                    const isLeft = root.axis?.edge === "left"
+                                    tooltipLoader.item.show(delegateItem.tooltipText, screenX + tooltipX, relativeY, root.parentScreen, isLeft, !isLeft)
+                                } else {
+                                    const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height)
+                                    const screenHeight = root.parentScreen ? root.parentScreen.height : Screen.height
+                                    const isBottom = root.axis?.edge === "bottom"
+                                    const tooltipY = isBottom
+                                        ? (screenHeight - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS - 35)
+                                        : (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS)
+                                    tooltipLoader.item.show(delegateItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false)
+                                }
+                            }
+                        }
+                        onExited: {
+                            if (root.hoveredItem === delegateItem) {
+                                root.hoveredItem = null
+                                if (tooltipLoader.item) {
+                                    tooltipLoader.item.hide()
+                                }
+
+                                tooltipLoader.active = false
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: columnLayout
+        Column {
+            spacing: Theme.spacingXS
+
+            Repeater {
+                id: windowRepeater
+                model: ScriptModel {
+                    values: SettingsData.runningAppsGroupByApp ? groupedWindows : sortedToplevels
+                    objectProp: SettingsData.runningAppsGroupByApp ? "appId" : "address"
+                }
+
+                delegate: Item {
+                    id: delegateItem
+
+                    property bool isGrouped: SettingsData.runningAppsGroupByApp
+                    property var groupData: isGrouped ? modelData : null
+                    property var toplevelData: isGrouped ? (modelData.windows.length > 0 ? modelData.windows[0].toplevel : null) : modelData
+                    property bool isFocused: toplevelData ? toplevelData.activated : false
+                    property string appId: isGrouped ? modelData.appId : (modelData.appId || "")
+                    property string windowTitle: toplevelData ? (toplevelData.title || "(Unnamed)") : "(Unnamed)"
+                    property var toplevelObject: toplevelData
+                    property int windowCount: isGrouped ? modelData.windows.length : 1
+                    property string tooltipText: {
+                        root._desktopEntriesUpdateTrigger
+                        let appName = "Unknown"
+                        if (appId) {
+                            const desktopEntry = DesktopEntries.heuristicLookup(appId)
+                            appName = desktopEntry && desktopEntry.name ? desktopEntry.name : appId
+                        }
+                        if (isGrouped && windowCount > 1) {
+                            return appName + " (" + windowCount + " windows)"
+                        }
+                        return appName + (windowTitle ? " • " + windowTitle : "")
+                    }
+                    readonly property real visualWidth: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
+
+                    width: root.barThickness
+                    height: 24
+
+                    Rectangle {
+                        id: visualContent
+                        width: delegateItem.visualWidth
+                        height: 24
+                        anchors.centerIn: parent
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (isFocused) {
+                                return mouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                            } else {
+                                return mouseArea.containsMouse ? Qt.rgba(Theme.primaryHover.r, Theme.primaryHover.g, Theme.primaryHover.b, 0.1) : "transparent"
+                            }
+                        }
+
+                        IconImage {
+                            id: iconImg
+                            anchors.left: parent.left
+                            anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: Theme.barIconSize(root.barThickness)
+                            height: Theme.barIconSize(root.barThickness)
+                            source: {
+                                root._desktopEntriesUpdateTrigger
+                                const moddedId = Paths.moddedAppId(appId)
+                                if (moddedId.toLowerCase().includes("steam_app")) {
+                                    return ""
+                                }
+                                return Quickshell.iconPath(DesktopEntries.heuristicLookup(moddedId)?.icon, true)
+                            }
+                            smooth: true
+                            mipmap: true
+                            asynchronous: true
+                            visible: status === Image.Ready
+                        }
+
+                        DankIcon {
+                            anchors.left: parent.left
+                            anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
+                            anchors.verticalCenter: parent.verticalCenter
+                            size: Theme.barIconSize(root.barThickness)
+                            name: "sports_esports"
+                            color: Theme.surfaceText
+                            visible: {
+                                const moddedId = Paths.moddedAppId(appId)
+                                return moddedId.toLowerCase().includes("steam_app")
+                            }
+                        }
+
+                        Text {
+                            anchors.centerIn: parent
+                            visible: {
+                                const moddedId = Paths.moddedAppId(appId)
+                                const isSteamApp = moddedId.toLowerCase().includes("steam_app")
+                                return !iconImg.visible && !isSteamApp
+                            }
+                            text: {
+                                root._desktopEntriesUpdateTrigger
+                                if (!appId) {
+                                    return "?"
+                                }
+
+                                const desktopEntry = DesktopEntries.heuristicLookup(appId)
+                                if (desktopEntry && desktopEntry.name) {
+                                    return desktopEntry.name.charAt(0).toUpperCase()
+                                }
+
+                                return appId.charAt(0).toUpperCase()
+                            }
+                            font.pixelSize: 10
+                            color: Theme.surfaceText
+                        }
+
+                        Rectangle {
+                            anchors.right: parent.right
+                            anchors.bottom: parent.bottom
+                            anchors.rightMargin: SettingsData.runningAppsCompactMode ? -2 : 2
+                            anchors.bottomMargin: -2
+                            width: 14
+                            height: 14
+                            radius: 7
+                            color: Theme.primary
+                            visible: isGrouped && windowCount > 1
+                            z: 10
+
+                            StyledText {
+                                anchors.centerIn: parent
+                                text: windowCount > 9 ? "9+" : windowCount
+                                font.pixelSize: 9
+                                color: Theme.surface
+                            }
+                        }
+
+                        StyledText {
+                            anchors.left: iconImg.right
+                            anchors.leftMargin: Theme.spacingXS
+                            anchors.right: parent.right
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: !SettingsData.runningAppsCompactMode
+                            text: windowTitle
+                            font.pixelSize: Theme.barTextSize(barThickness)
+                            color: Theme.surfaceText
+                            elide: Text.ElideRight
+                            maximumLineCount: 1
+                        }
+                    }
+
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        acceptedButtons: Qt.LeftButton | Qt.RightButton
+                        onClicked: mouse => {
+                                       if (mouse.button === Qt.LeftButton) {
+                                           if (isGrouped && windowCount > 1) {
+                                               let currentIndex = -1
+                                               for (var i = 0; i < groupData.windows.length; i++) {
+                                                   if (groupData.windows[i].toplevel.activated) {
+                                                       currentIndex = i
+                                                       break
+                                                   }
+                                               }
+                                               const nextIndex = (currentIndex + 1) % groupData.windows.length
+                                               groupData.windows[nextIndex].toplevel.activate()
+                                           } else if (toplevelObject) {
+                                               toplevelObject.activate()
+                                           }
+                                       } else if (mouse.button === Qt.RightButton) {
+                                           if (tooltipLoader.item) {
+                                               tooltipLoader.item.hide()
+                                           }
+                                           tooltipLoader.active = false
+
+                                           windowContextMenuLoader.active = true
+                                           if (windowContextMenuLoader.item) {
+                                               windowContextMenuLoader.item.currentWindow = toplevelObject
+                                               if (root.isVertical) {
+                                                   const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2)
+                                                   const screenX = root.parentScreen ? root.parentScreen.x : 0
+                                                   const screenY = root.parentScreen ? root.parentScreen.y : 0
+                                                   const relativeY = globalPos.y - screenY
+                                                   const xPos = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                                                   windowContextMenuLoader.item.showAt(xPos, relativeY, true, root.axis?.edge)
+                                               } else {
+                                                   const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, 0)
+                                                   const screenX = root.parentScreen ? root.parentScreen.x : 0
+                                                   const relativeX = globalPos.x - screenX
+                                                   const yPos = Theme.barHeight + SettingsData.dankBarSpacing - 7
+                                                   windowContextMenuLoader.item.showAt(relativeX, yPos, false, "top")
+                                               }
+                                           }
+                                       }
+                                   }
+                        onEntered: {
+                            root.hoveredItem = delegateItem
+                            tooltipLoader.active = true
+                            if (tooltipLoader.item) {
+                                if (root.isVertical) {
+                                    const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2)
+                                    const screenX = root.parentScreen ? root.parentScreen.x : 0
+                                    const screenY = root.parentScreen ? root.parentScreen.y : 0
+                                    const relativeY = globalPos.y - screenY
+                                    const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                                    const isLeft = root.axis?.edge === "left"
+                                    tooltipLoader.item.show(delegateItem.tooltipText, screenX + tooltipX, relativeY, root.parentScreen, isLeft, !isLeft)
+                                } else {
+                                    const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height)
+                                    const screenHeight = root.parentScreen ? root.parentScreen.height : Screen.height
+                                    const isBottom = root.axis?.edge === "bottom"
+                                    const tooltipY = isBottom
+                                        ? (screenHeight - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS - 35)
+                                        : (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS)
+                                    tooltipLoader.item.show(delegateItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false)
+                                }
+                            }
+                        }
+                        onExited: {
+                            if (root.hoveredItem === delegateItem) {
+                                root.hoveredItem = null
+                                if (tooltipLoader.item) {
+                                    tooltipLoader.item.hide()
+                                }
+
+                                tooltipLoader.active = false
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: tooltipLoader
+
+        active: false
+
+        sourceComponent: DankTooltip {}
+    }
+
+    Loader {
+        id: windowContextMenuLoader
+        active: false
+        sourceComponent: PanelWindow {
+            id: contextMenuWindow
+
+            property var currentWindow: null
+            property bool isVisible: false
+            property point anchorPos: Qt.point(0, 0)
+            property bool isVertical: false
+            property string edge: "top"
+
+            function showAt(x, y, vertical, barEdge) {
+                screen = root.parentScreen
+                anchorPos = Qt.point(x, y)
+                isVertical = vertical ?? false
+                edge = barEdge ?? "top"
+                isVisible = true
+                visible = true
+            }
+
+            function close() {
+                isVisible = false
+                visible = false
+                windowContextMenuLoader.active = false
+            }
+
+            implicitWidth: 100
+            implicitHeight: 40
+            visible: false
+            color: "transparent"
+
+            WlrLayershell.layer: WlrLayershell.Overlay
+            WlrLayershell.exclusiveZone: -1
+            WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+
+            anchors {
+                top: true
+                left: true
+                right: true
+                bottom: true
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: contextMenuWindow.close()
+            }
+
+            Rectangle {
+                x: {
+                    if (contextMenuWindow.isVertical) {
+                        if (contextMenuWindow.edge === "left") {
+                            return Math.min(contextMenuWindow.width - width - 10, contextMenuWindow.anchorPos.x)
+                        } else {
+                            return Math.max(10, contextMenuWindow.anchorPos.x - width)
+                        }
+                    } else {
+                        const left = 10
+                        const right = contextMenuWindow.width - width - 10
+                        const want = contextMenuWindow.anchorPos.x - width / 2
+                        return Math.max(left, Math.min(right, want))
+                    }
+                }
+                y: {
+                    if (contextMenuWindow.isVertical) {
+                        const top = 10
+                        const bottom = contextMenuWindow.height - height - 10
+                        const want = contextMenuWindow.anchorPos.y - height / 2
+                        return Math.max(top, Math.min(bottom, want))
+                    } else {
+                        return contextMenuWindow.anchorPos.y
+                    }
+                }
+                width: 100
+                height: 32
+                color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                radius: Theme.cornerRadius
+                border.width: 1
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: parent.radius
+                    color: closeMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                }
+
+                StyledText {
+                    anchors.centerIn: parent
+                    text: I18n.tr("Close")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                }
+
+                MouseArea {
+                    id: closeMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (contextMenuWindow.currentWindow) {
+                            contextMenuWindow.currentWindow.close()
+                        }
+                        contextMenuWindow.close()
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/SystemUpdate.qml

@@ -0,0 +1,136 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    property bool isActive: false
+    readonly property bool hasUpdates: SystemUpdateService.updateCount > 0
+    readonly property bool isChecking: SystemUpdateService.isChecking
+
+    Ref {
+        service: SystemUpdateService
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : updaterIcon.implicitWidth
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                id: statusIcon
+                anchors.centerIn: parent
+                visible: root.isVerticalOrientation
+                name: {
+                    if (root.isChecking) return "refresh"
+                    if (SystemUpdateService.hasError) return "error"
+                    if (root.hasUpdates) return "system_update_alt"
+                    return "check_circle"
+                }
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: {
+                    if (SystemUpdateService.hasError) return Theme.error
+                    if (root.hasUpdates) return Theme.primary
+                    return root.isActive ? Theme.primary : Theme.surfaceText
+                }
+
+                RotationAnimation {
+                    id: rotationAnimation
+                    target: statusIcon
+                    property: "rotation"
+                    from: 0
+                    to: 360
+                    duration: 1000
+                    running: root.isChecking
+                    loops: Animation.Infinite
+
+                    onRunningChanged: {
+                        if (!running) {
+                            statusIcon.rotation = 0
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                width: 8
+                height: 8
+                radius: 4
+                color: Theme.error
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.rightMargin: SettingsData.dankBarNoBackground ? 0 : 6
+                anchors.topMargin: SettingsData.dankBarNoBackground ? 0 : 6
+                visible: root.isVerticalOrientation && root.hasUpdates && !root.isChecking
+            }
+
+            Row {
+                id: updaterIcon
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+                visible: !root.isVerticalOrientation
+
+                DankIcon {
+                    id: statusIconHorizontal
+                    anchors.verticalCenter: parent.verticalCenter
+                    name: {
+                        if (root.isChecking) return "refresh"
+                        if (SystemUpdateService.hasError) return "error"
+                        if (root.hasUpdates) return "system_update_alt"
+                        return "check_circle"
+                    }
+                    size: Theme.barIconSize(root.barThickness, -4)
+                    color: {
+                        if (SystemUpdateService.hasError) return Theme.error
+                        if (root.hasUpdates) return Theme.primary
+                        return root.isActive ? Theme.primary : Theme.surfaceText
+                    }
+
+                    RotationAnimation {
+                        id: rotationAnimationHorizontal
+                        target: statusIconHorizontal
+                        property: "rotation"
+                        from: 0
+                        to: 360
+                        duration: 1000
+                        running: root.isChecking
+                        loops: Animation.Infinite
+
+                        onRunningChanged: {
+                            if (!running) {
+                                statusIconHorizontal.rotation = 0
+                            }
+                        }
+                    }
+                }
+
+                StyledText {
+                    id: countText
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: SystemUpdateService.updateCount.toString()
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    visible: root.hasUpdates && !root.isChecking
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        z: 1
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clicked()
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/Vpn.qml

@@ -0,0 +1,112 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    Ref {
+        service: DMSNetworkService
+    }
+
+    property var popoutTarget: null
+    property bool isHovered: clickArea.containsMouse
+
+    signal toggleVpnPopup()
+
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
+
+            DankIcon {
+                id: icon
+
+                name: DMSNetworkService.connected ? "vpn_lock" : "vpn_key_off"
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: DMSNetworkService.connected ? Theme.primary : Theme.surfaceText
+                opacity: DMSNetworkService.isBusy ? 0.5 : 1.0
+                anchors.centerIn: parent
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Easing.InOutQuad
+                    }
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
+    MouseArea {
+        id: clickArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        enabled: !DMSNetworkService.isBusy
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.toggleVpnPopup();
+        }
+        onEntered: {
+            if (root.parentScreen && !(popoutTarget && popoutTarget.shouldBeVisible)) {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    let tooltipText = ""
+                    if (!DMSNetworkService.connected) {
+                        tooltipText = "VPN Disconnected"
+                    } else {
+                        const names = DMSNetworkService.activeNames || []
+                        if (names.length <= 1) {
+                            const name = names[0] || ""
+                            const maxLength = 25
+                            const displayName = name.length > maxLength ? name.substring(0, maxLength) + "..." : name
+                            tooltipText = "VPN Connected • " + displayName
+                        } else {
+                            const name = names[0]
+                            const maxLength = 20
+                            const displayName = name.length > maxLength ? name.substring(0, maxLength) + "..." : name
+                            tooltipText = "VPN Connected • " + displayName + " +" + (names.length - 1)
+                        }
+                    }
+
+                    if (root.isVerticalOrientation) {
+                        const globalPos = mapToGlobal(width / 2, height / 2)
+                        const screenX = root.parentScreen ? root.parentScreen.x : 0
+                        const screenY = root.parentScreen ? root.parentScreen.y : 0
+                        const relativeY = globalPos.y - screenY
+                        const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                        const isLeft = root.axis?.edge === "left"
+                        tooltipLoader.item.show(tooltipText, screenX + tooltipX, relativeY, root.parentScreen, isLeft, !isLeft)
+                    } else {
+                        const globalPos = mapToGlobal(width / 2, height)
+                        const tooltipY = Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS
+                        tooltipLoader.item.show(tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false)
+                    }
+                }
+            }
+        }
+        onExited: {
+            if (tooltipLoader.item) {
+                tooltipLoader.item.hide()
+            }
+            tooltipLoader.active = false
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/Weather.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Plugins
+import qs.Services
+import qs.Widgets
+
+BasePill {
+    id: root
+
+    visible: SettingsData.weatherEnabled
+
+    Ref {
+        service: WeatherService
+    }
+
+    content: Component {
+        Item {
+            implicitWidth: {
+                if (!SettingsData.weatherEnabled) return 0
+                if (root.isVerticalOrientation) return root.widgetThickness - root.horizontalPadding * 2
+                return Math.min(100 - root.horizontalPadding * 2, weatherRow.implicitWidth)
+            }
+            implicitHeight: root.isVerticalOrientation ? weatherColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+
+            Column {
+                id: weatherColumn
+                visible: root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: 1
+
+                DankIcon {
+                    name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
+                    size: Theme.barIconSize(root.barThickness, -6)
+                    color: Theme.primary
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: {
+                        const temp = SettingsData.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp;
+                        if (temp === undefined || temp === null || temp === 0) {
+                            return "--";
+                        }
+                        return temp;
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            Row {
+                id: weatherRow
+                visible: !root.isVerticalOrientation
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+
+                DankIcon {
+                    name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
+                    size: Theme.barIconSize(root.barThickness, -6)
+                    color: Theme.primary
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: {
+                        const temp = SettingsData.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp;
+                        if (temp === undefined || temp === null || temp === 0) {
+                            return "--°" + (SettingsData.useFahrenheit ? "F" : "C");
+                        }
+
+                        return temp + "°" + (SettingsData.useFahrenheit ? "F" : "C");
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -0,0 +1,950 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import Quickshell.I3
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property string screenName: ""
+    property real widgetHeight: 30
+    property real barThickness: 48
+    property var hyprlandOverviewLoader: null
+    property var parentScreen: null
+    property int _desktopEntriesUpdateTrigger: 0
+    readonly property var sortedToplevels: {
+        return CompositorService.filterCurrentWorkspace(CompositorService.sortedToplevels, screenName);
+    }
+
+    readonly property bool useExtWorkspace: DMSService.forceExtWorkspace || (!CompositorService.isNiri && !CompositorService.isHyprland && !CompositorService.isDwl && !CompositorService.isSway && ExtWorkspaceService.extWorkspaceAvailable)
+
+    Connections {
+        target: DesktopEntries
+        function onApplicationsChanged() {
+            _desktopEntriesUpdateTrigger++
+        }
+    }
+
+    property var currentWorkspace: {
+        if (useExtWorkspace) return getExtWorkspaceActiveWorkspace()
+
+        switch (CompositorService.compositor) {
+        case "niri":
+            return getNiriActiveWorkspace()
+        case "hyprland":
+            return getHyprlandActiveWorkspace()
+        case "dwl":
+            const activeTags = getDwlActiveTags()
+            return activeTags.length > 0 ? activeTags[0] : -1
+        case "sway":
+            return getSwayActiveWorkspace()
+        default:
+            return 1
+        }
+    }
+    property var dwlActiveTags: {
+        if (CompositorService.isDwl) {
+            return getDwlActiveTags()
+        }
+        return []
+    }
+    property var workspaceList: {
+        if (useExtWorkspace) {
+            const baseList = getExtWorkspaceWorkspaces()
+            return SettingsData.showWorkspacePadding ? padWorkspaces(baseList) : baseList
+        }
+
+        let baseList
+        switch (CompositorService.compositor) {
+        case "niri":
+            baseList = getNiriWorkspaces()
+            break
+        case "hyprland":
+            baseList = getHyprlandWorkspaces()
+            break
+        case "dwl":
+            baseList = getDwlTags()
+            break
+        case "sway":
+            baseList = getSwayWorkspaces()
+            break
+        default:
+            return [1]
+        }
+        return SettingsData.showWorkspacePadding ? padWorkspaces(baseList) : baseList
+    }
+
+    function getSwayWorkspaces() {
+        const workspaces = I3.workspaces?.values || []
+        if (workspaces.length === 0) return [{"num": 1}]
+
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            return workspaces.slice().sort((a, b) => a.num - b.num)
+        }
+
+        const monitorWorkspaces = workspaces.filter(ws => ws.monitor?.name === root.screenName)
+        return monitorWorkspaces.length > 0 ? monitorWorkspaces.sort((a, b) => a.num - b.num) : [{"num": 1}]
+    }
+
+    function getSwayActiveWorkspace() {
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            const focusedWs = I3.workspaces?.values?.find(ws => ws.focused === true)
+            return focusedWs ? focusedWs.num : 1
+        }
+
+        const focusedWs = I3.workspaces?.values?.find(ws => ws.monitor?.name === root.screenName && ws.focused === true)
+        return focusedWs ? focusedWs.num : 1
+    }
+
+    function getHyprlandWorkspaces() {
+        const workspaces = Hyprland.workspaces?.values || []
+        if (workspaces.length === 0) return [{id: 1}]
+
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            return workspaces.slice().sort((a, b) => a.id - b.id)
+        }
+
+        const monitorWorkspaces = workspaces.filter(ws => ws.monitor?.name === root.screenName)
+        return monitorWorkspaces.length > 0 ? monitorWorkspaces.sort((a, b) => a.id - b.id) : [{id: 1}]
+    }
+
+    function getHyprlandActiveWorkspace() {
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            return Hyprland.focusedWorkspace?.id || 1
+        }
+
+        const monitor = Hyprland.monitors?.values?.find(m => m.name === root.screenName)
+        return monitor?.activeWorkspace?.id || 1
+    }
+
+    function getWorkspaceIcons(ws) {
+        _desktopEntriesUpdateTrigger
+        if (!SettingsData.showWorkspaceApps || !ws) {
+            return []
+        }
+
+        let targetWorkspaceId
+        if (CompositorService.isNiri) {
+            const wsNumber = typeof ws === "number" ? ws : -1
+            if (wsNumber <= 0) {
+                return []
+            }
+            const workspace = NiriService.allWorkspaces.find(w => w.idx + 1 === wsNumber && w.output === root.screenName)
+            if (!workspace) {
+                return []
+            }
+            targetWorkspaceId = workspace.id
+        } else if (CompositorService.isHyprland) {
+            targetWorkspaceId = ws.id !== undefined ? ws.id : ws
+        } else if (CompositorService.isDwl) {
+            if (typeof ws !== "object" || ws.tag === undefined) {
+                return []
+            }
+            targetWorkspaceId = ws.tag
+        } else if (CompositorService.isSway) {
+            targetWorkspaceId = ws.num !== undefined ? ws.num : ws
+        } else {
+            return []
+        }
+
+        const wins = CompositorService.isNiri ? (NiriService.windows || []) : CompositorService.sortedToplevels
+
+        const byApp = {}
+        let isActiveWs = false
+        if (CompositorService.isNiri) {
+            isActiveWs = NiriService.allWorkspaces.some(ws => ws.id === targetWorkspaceId && ws.is_active)
+        } else if (CompositorService.isSway) {
+            const focusedWs = I3.workspaces?.values?.find(ws => ws.focused === true)
+            isActiveWs = focusedWs ? (focusedWs.num === targetWorkspaceId) : false
+        } else if (CompositorService.isDwl) {
+            const output = DwlService.getOutputState(root.screenName)
+            if (output && output.tags) {
+                const tag = output.tags.find(t => t.tag === targetWorkspaceId)
+                isActiveWs = tag ? (tag.state === 1) : false
+            }
+        } else {
+            isActiveWs = targetWorkspaceId === root.currentWorkspace
+        }
+
+        wins.forEach((w, i) => {
+                         if (!w) {
+                             return
+                         }
+
+                         let winWs = null
+                         if (CompositorService.isNiri) {
+                             winWs = w.workspace_id
+                         } else if (CompositorService.isSway) {
+                             winWs = w.workspace?.num
+                         } else {
+                             const hyprlandToplevels = Array.from(Hyprland.toplevels?.values || [])
+                             const hyprToplevel = hyprlandToplevels.find(ht => ht.wayland === w)
+                             winWs = hyprToplevel?.workspace?.id
+                         }
+
+
+                         if (winWs === undefined || winWs === null || winWs !== targetWorkspaceId) {
+                             return
+                         }
+
+                         const keyBase = (w.app_id || w.appId || w.class || w.windowClass || "unknown")
+                         const key = isActiveWs ? `${keyBase}_${i}` : keyBase
+
+                         if (!byApp[key]) {
+                             const moddedId = Paths.moddedAppId(keyBase)
+                             const isSteamApp = moddedId.toLowerCase().includes("steam_app")
+                             const icon = isSteamApp ? "" : DesktopService.resolveIconPath(moddedId)
+                             byApp[key] = {
+                                 "type": "icon",
+                                 "icon": icon,
+                                 "isSteamApp": isSteamApp,
+                                 "active": !!((w.activated || w.is_focused) || (CompositorService.isNiri && w.is_focused)),
+                                 "count": 1,
+                                 "windowId": w.address || w.id,
+                                 "fallbackText": w.appId || w.class || w.title || ""
+                             }
+                         } else {
+                             byApp[key].count++
+                             if ((w.activated || w.is_focused) || (CompositorService.isNiri && w.is_focused)) {
+                                 byApp[key].active = true
+                             }
+                         }
+                     })
+
+        return Object.values(byApp)
+    }
+
+    function padWorkspaces(list) {
+        const padded = list.slice()
+        let placeholder
+        if (useExtWorkspace) {
+            placeholder = {"id": "", "name": "", "active": false, "hidden": true}
+        } else if (CompositorService.isHyprland) {
+            placeholder = {"id": -1, "name": ""}
+        } else if (CompositorService.isDwl) {
+            placeholder = {"tag": -1}
+        } else if (CompositorService.isSway) {
+            placeholder = {"num": -1}
+        } else {
+            placeholder = -1
+        }
+        while (padded.length < 3) {
+            padded.push(placeholder)
+        }
+        return padded
+    }
+
+    function getNiriWorkspaces() {
+        if (NiriService.allWorkspaces.length === 0) {
+            return [1, 2]
+        }
+
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            return NiriService.getCurrentOutputWorkspaceNumbers()
+        }
+
+        const displayWorkspaces = NiriService.allWorkspaces.filter(ws => ws.output === root.screenName).map(ws => ws.idx + 1)
+        return displayWorkspaces.length > 0 ? displayWorkspaces : [1, 2]
+    }
+
+    function getNiriActiveWorkspace() {
+        if (NiriService.allWorkspaces.length === 0) {
+            return 1
+        }
+
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            return NiriService.getCurrentWorkspaceNumber()
+        }
+
+        const activeWs = NiriService.allWorkspaces.find(ws => ws.output === root.screenName && ws.is_active)
+        return activeWs ? activeWs.idx + 1 : 1
+    }
+
+    function getDwlTags() {
+        if (!DwlService.dwlAvailable) {
+            return []
+        }
+
+        const output = DwlService.getOutputState(root.screenName)
+        if (!output || !output.tags || output.tags.length === 0) {
+            return []
+        }
+
+        if (SettingsData.dwlShowAllTags) {
+            return output.tags.map(tag => ({"tag": tag.tag, "state": tag.state, "clients": tag.clients, "focused": tag.focused}))
+        }
+
+        const visibleTagIndices = DwlService.getVisibleTags(root.screenName)
+        return visibleTagIndices.map(tagIndex => {
+            const tagData = output.tags.find(t => t.tag === tagIndex)
+            return {
+                "tag": tagIndex,
+                "state": tagData?.state ?? 0,
+                "clients": tagData?.clients ?? 0,
+                "focused": tagData?.focused ?? false
+            }
+        })
+    }
+
+    function getDwlActiveTags() {
+        if (!DwlService.dwlAvailable) {
+            return []
+        }
+
+        const activeTags = DwlService.getActiveTags(root.screenName)
+        return activeTags
+    }
+
+    function getExtWorkspaceWorkspaces() {
+        const groups = ExtWorkspaceService.groups
+        if (!ExtWorkspaceService.extWorkspaceAvailable || groups.length === 0) {
+            return [{"id": "1", "name": "1", "active": false}]
+        }
+
+        const group = groups.find(g => g.outputs && g.outputs.includes(root.screenName))
+        if (!group || !group.workspaces) {
+            return [{"id": "1", "name": "1", "active": false}]
+        }
+
+        const visible = group.workspaces.filter(ws => !ws.hidden).sort((a, b) => {
+            const coordsA = a.coordinates || [0, 0]
+            const coordsB = b.coordinates || [0, 0]
+            if (coordsA[0] !== coordsB[0]) return coordsA[0] - coordsB[0]
+            return coordsA[1] - coordsB[1]
+        }).map(ws => ({
+            id: ws.id,
+            name: ws.name,
+            coordinates: ws.coordinates,
+            state: ws.state,
+            active: ws.active,
+            urgent: ws.urgent,
+            hidden: ws.hidden,
+            groupID: group.id
+        }))
+
+        return visible.length > 0 ? visible : [{"id": "1", "name": "1", "active": false}]
+    }
+
+    function getExtWorkspaceActiveWorkspace() {
+        if (!ExtWorkspaceService.extWorkspaceAvailable) {
+            return 1
+        }
+
+        const activeWs = ExtWorkspaceService.getActiveWorkspaceForOutput(root.screenName)
+        return activeWs ? (activeWs.id || activeWs.name || "1") : "1"
+    }
+
+    readonly property real padding: Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real visualWidth: isVertical ? widgetHeight : (workspaceRow.implicitWidth + padding * 2)
+    readonly property real visualHeight: isVertical ? (workspaceRow.implicitHeight + padding * 2) : widgetHeight
+
+    function getRealWorkspaces() {
+        return root.workspaceList.filter(ws => {
+                                             if (useExtWorkspace) return ws && ws.id !== "" && !ws.hidden
+                                             if (CompositorService.isHyprland) return ws && ws.id !== -1
+                                             if (CompositorService.isDwl) return ws && ws.tag !== -1
+                                             if (CompositorService.isSway) return ws && ws.num !== -1
+                                             return ws !== -1
+                                         })
+    }
+
+    function switchWorkspace(direction) {
+        if (useExtWorkspace) {
+            const realWorkspaces = getRealWorkspaces()
+            if (realWorkspaces.length < 2) {
+                return
+            }
+
+            const currentIndex = realWorkspaces.findIndex(ws => (ws.id || ws.name) === root.currentWorkspace)
+            const validIndex = currentIndex === -1 ? 0 : currentIndex
+            const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+            if (nextIndex === validIndex) {
+                return
+            }
+
+            const nextWorkspace = realWorkspaces[nextIndex]
+            ExtWorkspaceService.activateWorkspace(nextWorkspace.id || nextWorkspace.name, nextWorkspace.groupID || "")
+        } else if (CompositorService.isNiri) {
+            const realWorkspaces = getRealWorkspaces()
+            if (realWorkspaces.length < 2) {
+                return
+            }
+
+            const currentIndex = realWorkspaces.findIndex(ws => ws === root.currentWorkspace)
+            const validIndex = currentIndex === -1 ? 0 : currentIndex
+            const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+            if (nextIndex === validIndex) {
+                return
+            }
+
+            NiriService.switchToWorkspace(realWorkspaces[nextIndex] - 1)
+        } else if (CompositorService.isHyprland) {
+            const realWorkspaces = getRealWorkspaces()
+            if (realWorkspaces.length < 2) {
+                return
+            }
+
+            const currentIndex = realWorkspaces.findIndex(ws => ws.id === root.currentWorkspace)
+            const validIndex = currentIndex === -1 ? 0 : currentIndex
+            const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+            if (nextIndex === validIndex) {
+                return
+            }
+
+            Hyprland.dispatch(`workspace ${realWorkspaces[nextIndex].id}`)
+        } else if (CompositorService.isDwl) {
+            const realWorkspaces = getRealWorkspaces()
+            if (realWorkspaces.length < 2) {
+                return
+            }
+
+            const currentIndex = realWorkspaces.findIndex(ws => ws.tag === root.currentWorkspace)
+            const validIndex = currentIndex === -1 ? 0 : currentIndex
+            const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+            if (nextIndex === validIndex) {
+                return
+            }
+
+            DwlService.switchToTag(root.screenName, realWorkspaces[nextIndex].tag)
+        } else if (CompositorService.isSway) {
+            const realWorkspaces = getRealWorkspaces()
+            if (realWorkspaces.length < 2) {
+                return
+            }
+
+            const currentIndex = realWorkspaces.findIndex(ws => ws.num === root.currentWorkspace)
+            const validIndex = currentIndex === -1 ? 0 : currentIndex
+            const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+            if (nextIndex === validIndex) {
+                return
+            }
+
+            try { I3.dispatch(`workspace number ${realWorkspaces[nextIndex].num}`) } catch(_){}
+        }
+    }
+
+    width: isVertical ? barThickness : visualWidth
+    height: isVertical ? visualHeight : barThickness
+    visible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isDwl || CompositorService.isSway || useExtWorkspace
+
+    Rectangle {
+        id: visualBackground
+        width: root.visualWidth
+        height: root.visualHeight
+        anchors.centerIn: parent
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+        color: {
+            if (SettingsData.dankBarNoBackground)
+                return "transparent"
+            const baseColor = Theme.widgetBaseBackgroundColor
+            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.RightButton
+
+        onClicked: mouse => {
+            if (mouse.button === Qt.RightButton) {
+                if (CompositorService.isNiri) {
+                    NiriService.toggleOverview()
+                } else if (CompositorService.isHyprland && root.hyprlandOverviewLoader?.item) {
+                    root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
+                }
+            }
+        }
+    }
+
+    Flow {
+        id: workspaceRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+        flow: isVertical ? Flow.TopToBottom : Flow.LeftToRight
+
+        Repeater {
+            model: ScriptModel {
+                values: root.workspaceList
+            }
+
+            Item {
+                id: delegateRoot
+
+                property bool isActive: {
+                    if (root.useExtWorkspace) return (modelData?.id || modelData?.name) === root.currentWorkspace
+                    if (CompositorService.isHyprland) return !!(modelData && modelData.id === root.currentWorkspace)
+                    if (CompositorService.isDwl) return !!(modelData && root.dwlActiveTags.includes(modelData.tag))
+                    if (CompositorService.isSway) return !!(modelData && modelData.num === root.currentWorkspace)
+                    return modelData === root.currentWorkspace
+                }
+                property bool isPlaceholder: {
+                    if (root.useExtWorkspace) return !!(modelData && modelData.hidden)
+                    if (CompositorService.isHyprland) return !!(modelData && modelData.id === -1)
+                    if (CompositorService.isDwl) return !!(modelData && modelData.tag === -1)
+                    if (CompositorService.isSway) return !!(modelData && modelData.num === -1)
+                    return modelData === -1
+                }
+                property bool isHovered: mouseArea.containsMouse
+
+                property var loadedWorkspaceData: null
+                property bool loadedIsUrgent: false
+                property bool isUrgent: {
+                    if (root.useExtWorkspace) return modelData?.urgent ?? false
+                    if (CompositorService.isHyprland) return modelData?.urgent ?? false
+                    if (CompositorService.isNiri) return loadedIsUrgent
+                    if (CompositorService.isDwl) return modelData?.state === 2
+                    if (CompositorService.isSway) return loadedIsUrgent
+                    return false
+                }
+                property var loadedIconData: null
+                property bool loadedHasIcon: false
+                property var loadedIcons: []
+
+                readonly property real baseWidth: root.isVertical ? (SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5) : (isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7)
+                readonly property real baseHeight: root.isVertical ? (isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7) : (SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5)
+
+                readonly property real iconsExtraWidth: {
+                    if (!root.isVertical && SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
+                        const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons)
+                        return numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0) + (isActive ? Theme.spacingXS : 0)
+                    }
+                    return 0
+                }
+                readonly property real iconsExtraHeight: {
+                    if (root.isVertical && SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
+                        const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons)
+                        return numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0) + (isActive ? Theme.spacingXS : 0)
+                    }
+                    return 0
+                }
+
+                readonly property real visualWidth: baseWidth + iconsExtraWidth
+                readonly property real visualHeight: baseHeight + iconsExtraHeight
+
+		MouseArea {
+                    id: mouseArea
+                    anchors.fill: parent
+                    hoverEnabled: !isPlaceholder
+                    cursorShape: isPlaceholder ? Qt.ArrowCursor : Qt.PointingHandCursor
+                    enabled: !isPlaceholder
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    onClicked: mouse => {
+                        if (isPlaceholder) return
+
+                        const isRightClick = mouse.button === Qt.RightButton
+
+                        if (root.useExtWorkspace && (modelData?.id || modelData?.name)) {
+                            ExtWorkspaceService.activateWorkspace(modelData.id || modelData.name, modelData.groupID || "")
+                        } else if (CompositorService.isNiri) {
+                            if (isRightClick) {
+                                NiriService.toggleOverview()
+                            } else {
+                                NiriService.switchToWorkspace(modelData - 1)
+                            }
+                        } else if (CompositorService.isHyprland && modelData?.id) {
+                            if (isRightClick && root.hyprlandOverviewLoader?.item) {
+                                root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
+                            } else {
+                                Hyprland.dispatch(`workspace ${modelData.id}`)
+                            }
+                        } else if (CompositorService.isDwl && modelData?.tag !== undefined) {
+                            console.log("DWL click - tag:", modelData.tag, "rightClick:", isRightClick)
+                            if (isRightClick) {
+                                console.log("Calling toggleTag")
+                                DwlService.toggleTag(root.screenName, modelData.tag)
+                            } else {
+                                console.log("Calling switchToTag")
+                                DwlService.switchToTag(root.screenName, modelData.tag)
+                            }
+                        } else if (CompositorService.isSway && modelData?.num) {
+                            try { I3.dispatch(`workspace number ${modelData.num}`) } catch(_){}
+                        }
+                    }
+                }
+
+                Timer {
+                    id: dataUpdateTimer
+                    interval: 50
+                    onTriggered: {
+                        if (isPlaceholder) {
+                            delegateRoot.loadedWorkspaceData = null
+                            delegateRoot.loadedIconData = null
+                            delegateRoot.loadedHasIcon = false
+                            delegateRoot.loadedIcons = []
+                            delegateRoot.loadedIsUrgent = false
+                            return
+                        }
+
+                        var wsData = null;
+                        if (root.useExtWorkspace) {
+                            wsData = modelData;
+                        } else if (CompositorService.isNiri) {
+                            wsData = NiriService.allWorkspaces.find(ws => ws.idx + 1 === modelData && ws.output === root.screenName) || null;
+                        } else if (CompositorService.isHyprland) {
+                            wsData = modelData;
+                        } else if (CompositorService.isDwl) {
+                            wsData = modelData;
+                        } else if (CompositorService.isSway) {
+                            wsData = modelData;
+                        }
+                        delegateRoot.loadedWorkspaceData = wsData;
+                        delegateRoot.loadedIsUrgent = wsData?.urgent ?? false;
+
+                        var icData = null;
+                        if (wsData?.name) {
+                            icData = SettingsData.getWorkspaceNameIcon(wsData.name);
+                        }
+                        delegateRoot.loadedIconData = icData;
+                        delegateRoot.loadedHasIcon = icData !== null;
+
+                        if (SettingsData.showWorkspaceApps) {
+                            if (CompositorService.isDwl || CompositorService.isSway) {
+                                delegateRoot.loadedIcons = root.getWorkspaceIcons(modelData);
+                            } else {
+                                delegateRoot.loadedIcons = root.getWorkspaceIcons(CompositorService.isHyprland ? modelData : (modelData === -1 ? null : modelData));
+                            }
+                        } else {
+                            delegateRoot.loadedIcons = [];
+                        }
+                    }
+                }
+
+                function updateAllData() {
+                    dataUpdateTimer.restart()
+                }
+
+                width: root.isVertical ? root.barThickness : visualWidth
+                height: root.isVertical ? visualHeight : root.barThickness
+
+                Rectangle {
+                    id: visualContent
+                    width: delegateRoot.visualWidth
+                    height: delegateRoot.visualHeight
+                    anchors.centerIn: parent
+                    radius: Theme.cornerRadius
+                    color: isActive ? Theme.primary : isUrgent ? Theme.error : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha
+
+                    border.width: isUrgent && !isActive ? 2 : 0
+                    border.color: isUrgent && !isActive ? Theme.error : Theme.withAlpha(Theme.error, 0)
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+
+                    Behavior on height {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+
+                    Behavior on border.width {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+
+                    Behavior on border.color {
+                        ColorAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+
+                    Loader {
+                        id: appIconsLoader
+                        anchors.fill: parent
+                        active: SettingsData.showWorkspaceApps
+                    sourceComponent: Item {
+                        Loader {
+                            id: contentRow
+                            anchors.centerIn: parent
+                            sourceComponent: root.isVertical ? columnLayout : rowLayout
+                        }
+
+                        Component {
+                            id: rowLayout
+                            Row {
+                                spacing: 4
+                                visible: loadedIcons.length > 0
+
+                                Repeater {
+                                    model: ScriptModel {
+                                        values: loadedIcons.slice(0, SettingsData.maxWorkspaceIcons)
+                                    }
+                                    delegate: Item {
+                                        width: 18
+                                        height: 18
+
+                                        IconImage {
+                                            id: appIcon
+                                            property var windowId: modelData.windowId
+                                            anchors.fill: parent
+                                            source: modelData.icon
+                                            opacity: modelData.active ? 1.0 : appMouseArea.containsMouse ? 0.8 : 0.6
+                                            visible: !modelData.isSteamApp
+                                        }
+
+                                        DankIcon {
+                                            anchors.centerIn: parent
+                                            size: 18
+                                            name: "sports_esports"
+                                            color: Theme.surfaceText
+                                            opacity: modelData.active ? 1.0 : appMouseArea.containsMouse ? 0.8 : 0.6
+                                            visible: modelData.isSteamApp
+                                        }
+
+                                        MouseArea {
+                                            id: appMouseArea
+                                            anchors.fill: parent
+                                            enabled: isActive
+                                            cursorShape: Qt.PointingHandCursor
+                                            onClicked: {
+                                                if (!appIcon.windowId) return
+                                                if (CompositorService.isHyprland) {
+                                                    Hyprland.dispatch(`focuswindow address:${appIcon.windowId}`)
+                                                } else if (CompositorService.isNiri) {
+                                                    NiriService.focusWindow(appIcon.windowId)
+                                                }
+                                            }
+                                        }
+
+                                        Rectangle {
+                                            visible: modelData.count > 1 && !isActive
+                                            width: 12
+                                            height: 12
+                                            radius: 6
+                                            color: "black"
+                                            border.color: "white"
+                                            border.width: 1
+                                            anchors.right: parent.right
+                                            anchors.bottom: parent.bottom
+                                            z: 2
+
+                                            Text {
+                                                anchors.centerIn: parent
+                                                text: modelData.count
+                                                font.pixelSize: 8
+                                                color: "white"
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        Component {
+                            id: columnLayout
+                            Column {
+                                spacing: 4
+                                visible: loadedIcons.length > 0
+
+                                Repeater {
+                                    model: ScriptModel {
+                                        values: loadedIcons.slice(0, SettingsData.maxWorkspaceIcons)
+                                    }
+                                    delegate: Item {
+                                        width: 18
+                                        height: 18
+
+                                        IconImage {
+                                            id: appIcon
+                                            property var windowId: modelData.windowId
+                                            anchors.fill: parent
+                                            source: modelData.icon
+                                            opacity: modelData.active ? 1.0 : appMouseArea.containsMouse ? 0.8 : 0.6
+                                            visible: !modelData.isSteamApp
+                                        }
+
+                                        DankIcon {
+                                            anchors.centerIn: parent
+                                            size: 18
+                                            name: "sports_esports"
+                                            color: Theme.surfaceText
+                                            opacity: modelData.active ? 1.0 : appMouseArea.containsMouse ? 0.8 : 0.6
+                                            visible: modelData.isSteamApp
+                                        }
+
+                                        MouseArea {
+                                            id: appMouseArea
+                                            anchors.fill: parent
+                                            enabled: isActive
+                                            cursorShape: Qt.PointingHandCursor
+                                            onClicked: {
+                                                if (!appIcon.windowId) return
+                                                if (CompositorService.isHyprland) {
+                                                    Hyprland.dispatch(`focuswindow address:${appIcon.windowId}`)
+                                                } else if (CompositorService.isNiri) {
+                                                    NiriService.focusWindow(appIcon.windowId)
+                                                }
+                                            }
+                                        }
+
+                                        Rectangle {
+                                            visible: modelData.count > 1 && !isActive
+                                            width: 12
+                                            height: 12
+                                            radius: 6
+                                            color: "black"
+                                            border.color: "white"
+                                            border.width: 1
+                                            anchors.right: parent.right
+                                            anchors.bottom: parent.bottom
+                                            z: 2
+
+                                            Text {
+                                                anchors.centerIn: parent
+                                                text: modelData.count
+                                                font.pixelSize: 8
+                                                color: "white"
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Loader for Custom Name Icon
+                Loader {
+                    id: customIconLoader
+                    anchors.fill: parent
+                    active: !isPlaceholder && loadedHasIcon && loadedIconData.type === "icon" && !SettingsData.showWorkspaceApps
+                    sourceComponent: Item {
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: loadedIconData ? loadedIconData.value : "" // NULL CHECK
+                            size: Theme.fontSizeSmall
+                            color: isActive ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : Theme.surfaceTextMedium
+                            weight: isActive && !isPlaceholder ? 500 : 400
+                        }
+                    }
+                }
+
+                // Loader for Custom Name Text
+                Loader {
+                    id: customTextLoader
+                    anchors.fill: parent
+                    active: !isPlaceholder && loadedHasIcon && loadedIconData.type === "text" && !SettingsData.showWorkspaceApps
+                    sourceComponent: Item {
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: loadedIconData ? loadedIconData.value : "" // NULL CHECK
+                            color: isActive ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : Theme.surfaceTextMedium
+                            font.pixelSize: Theme.barTextSize(barThickness)
+                            font.weight: (isActive && !isPlaceholder) ? Font.DemiBold : Font.Normal
+                        }
+                    }
+                }
+
+                // Loader for Workspace Index
+                Loader {
+                    id: indexLoader
+                    anchors.fill: parent
+                    active: !isPlaceholder && SettingsData.showWorkspaceIndex && !loadedHasIcon && !SettingsData.showWorkspaceApps
+                    sourceComponent: Item {
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: {
+                                let isPlaceholder
+                                if (root.useExtWorkspace) {
+                                    isPlaceholder = modelData?.hidden === true
+                                } else if (CompositorService.isHyprland) {
+                                    isPlaceholder = modelData?.id === -1
+                                } else if (CompositorService.isDwl) {
+                                    isPlaceholder = modelData?.tag === -1
+                                } else if (CompositorService.isSway) {
+                                    isPlaceholder = modelData?.num === -1
+                                } else {
+                                    isPlaceholder = modelData === -1
+                                }
+
+                                if (isPlaceholder) return index + 1
+
+                                if (root.useExtWorkspace) return modelData?.name || modelData?.id || ""
+                                if (CompositorService.isHyprland) return modelData?.id || ""
+                                if (CompositorService.isDwl) return (modelData?.tag !== undefined) ? (modelData.tag + 1) : ""
+                                if (CompositorService.isSway) return modelData?.num || ""
+                                return modelData - 1
+                            }
+                            color: (isActive || isUrgent) ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                            font.pixelSize: Theme.barTextSize(barThickness)
+                            font.weight: (isActive && !isPlaceholder) ? Font.DemiBold : Font.Normal
+                        }
+                    }
+                }
+                }
+
+                Component.onCompleted: updateAllData()
+
+                Connections {
+                    target: CompositorService
+                    function onSortedToplevelsChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: NiriService
+                    enabled: CompositorService.isNiri
+                    function onAllWorkspacesChanged() { delegateRoot.updateAllData() }
+                    function onWindowUrgentChanged() { delegateRoot.updateAllData() }
+		    function onWindowsChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: SettingsData
+                    function onShowWorkspaceAppsChanged() { delegateRoot.updateAllData() }
+                    function onWorkspaceNameIconsChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: DwlService
+                    enabled: CompositorService.isDwl
+                    function onStateChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: Hyprland.workspaces
+                    enabled: CompositorService.isHyprland
+                    function onValuesChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: I3.workspaces
+                    enabled: CompositorService.isSway
+                    function onValuesChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: ExtWorkspaceService
+                    enabled: root.useExtWorkspace
+                    function onStateChanged() { delegateRoot.updateAllData() }
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if (useExtWorkspace && !DMSService.activeSubscriptions.includes("extworkspace")) {
+            DMSService.addSubscription("extworkspace")
+        }
+    }
+}