feat: Long Live the DankBar > Top/Bottom positioning

Modules/DankBar/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
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modules/DankBar/Battery.qml

@@ -0,0 +1,153 @@
+import QtQuick
+import Quickshell.Services.UPower
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: battery
+
+    property bool batteryPopupVisible: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal toggleBatteryPopup()
+
+    width: batteryContent.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = batteryArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    visible: true
+
+    Row {
+        id: batteryContent
+
+        anchors.centerIn: parent
+        spacing: SettingsData.dankBarNoBackground ? 1 : 2
+
+        DankIcon {
+            name: BatteryService.getBatteryIcon()
+            size: Theme.iconSize - 6
+            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.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: BatteryService.batteryAvailable
+        }
+
+    }
+
+    MouseArea {
+        id: batteryArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            toggleBatteryPopup();
+        }
+    }
+
+    Rectangle {
+        id: batteryTooltip
+
+        width: Math.max(120, tooltipText.contentWidth + Theme.spacingM * 2)
+        height: tooltipText.contentHeight + Theme.spacingS * 2
+        radius: Theme.cornerRadius
+        color: Theme.widgetBaseBackgroundColor
+        border.color: Theme.surfaceVariantAlpha
+        border.width: 1
+        visible: batteryArea.containsMouse && !batteryPopupVisible
+        anchors.bottom: parent.top
+        anchors.bottomMargin: Theme.spacingS
+        anchors.horizontalCenter: parent.horizontalCenter
+        opacity: batteryArea.containsMouse ? 1 : 0
+
+        Column {
+            anchors.centerIn: parent
+            spacing: 2
+
+            StyledText {
+                id: tooltipText
+
+                text: {
+                    if (!BatteryService.batteryAvailable) {
+                        if (typeof PowerProfiles === "undefined") {
+                            return "Power Management";
+                        }
+
+                        switch (PowerProfiles.profile) {
+                        case PowerProfile.PowerSaver:
+                            return "Power Profile: Power Saver";
+                        case PowerProfile.Performance:
+                            return "Power Profile: Performance";
+                        default:
+                            return "Power Profile: Balanced";
+                        }
+                    }
+                    const status = BatteryService.batteryStatus;
+                    const level = `${BatteryService.batteryLevel}%`;
+                    const time = BatteryService.formatTimeRemaining();
+                    if (time !== "Unknown") {
+                        return `${status} • ${level} • ${time}`;
+                    } else {
+                        return `${status} • ${level}`;
+                    }
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
+            }
+
+        }
+
+    }
+
+
+}

Modules/DankBar/BatteryPopout.qml

@@ -0,0 +1,440 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.UPower
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+DankPopout {
+    id: root
+
+    property string triggerSection: "right"
+    property var triggerScreen: null
+
+    function setTriggerPosition(x, y, width, section, screen) {
+        triggerX = x;
+        triggerY = y;
+        triggerWidth = width;
+        triggerSection = section;
+        triggerScreen = screen;
+    }
+
+    function isActiveProfile(profile) {
+        if (typeof PowerProfiles === "undefined") {
+            return false;
+        }
+
+        return PowerProfiles.profile === profile;
+    }
+
+    function setProfile(profile) {
+        if (typeof PowerProfiles === "undefined") {
+            ToastService.showError("power-profiles-daemon not available");
+            return ;
+        }
+        PowerProfiles.profile = profile;
+        if (PowerProfiles.profile !== profile) {
+            ToastService.showError("Failed to set power profile");
+        }
+
+    }
+
+    popupWidth: 400
+    popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 400
+    triggerX: Screen.width - 380 - Theme.spacingL
+    triggerY: Theme.barHeight - 4 + SettingsData.dankBarSpacing + Theme.popupDistance
+    triggerWidth: 70
+    positioning: "center"
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    content: Component {
+        Rectangle {
+            id: batteryContent
+
+            implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
+            color: Theme.popupBackground()
+            radius: Theme.cornerRadius
+            border.color: Theme.outlineMedium
+            border.width: 0
+            antialiasing: true
+            smooth: true
+            focus: true
+            Component.onCompleted: {
+                if (root.shouldBeVisible) {
+                    forceActiveFocus();
+                }
+
+            }
+            Keys.onPressed: function(event) {
+                if (event.key === Qt.Key_Escape) {
+                    root.close();
+                    event.accepted = true;
+                }
+            }
+
+            Connections {
+                function onShouldBeVisibleChanged() {
+                    if (root.shouldBeVisible) {
+                        Qt.callLater(function() {
+                            batteryContent.forceActiveFocus();
+                        });
+                    }
+
+                }
+
+                target: root
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: -3
+                color: "transparent"
+                radius: parent.radius + 3
+                border.color: Qt.rgba(0, 0, 0, 0.05)
+                border.width: 0
+                z: -3
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: -2
+                color: "transparent"
+                radius: parent.radius + 2
+                border.color: Theme.shadowMedium
+                border.width: 0
+                z: -2
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                color: "transparent"
+                border.color: Theme.outlineStrong
+                border.width: 0
+                radius: parent.radius
+                z: -1
+            }
+
+            Column {
+                id: contentColumn
+
+                width: parent.width - Theme.spacingL * 2
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingL
+
+                Row {
+                    width: parent.width
+                    height: 48
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: {
+                            if (!BatteryService.batteryAvailable)
+                                return "power";
+
+                            if (!BatteryService.isCharging && BatteryService.isPluggedIn) {
+                                if (BatteryService.batteryLevel >= 90) {
+                                    return "battery_charging_full";
+                                }
+                                if (BatteryService.batteryLevel >= 80) {
+                                    return "battery_charging_90";
+                                }
+                                if (BatteryService.batteryLevel >= 60) {
+                                    return "battery_charging_80";
+                                }
+                                if (BatteryService.batteryLevel >= 50) {
+                                    return "battery_charging_60";
+                                }
+                                if (BatteryService.batteryLevel >= 30) {
+                                    return "battery_charging_50";
+                                }
+                                if (BatteryService.batteryLevel >= 20) {
+                                    return "battery_charging_30";
+                                }
+                                return "battery_charging_20";
+                            }
+                            if (BatteryService.isCharging) {
+                                if (BatteryService.batteryLevel >= 90) {
+                                    return "battery_charging_full";
+                                }
+                                if (BatteryService.batteryLevel >= 80) {
+                                    return "battery_charging_90";
+                                }
+                                if (BatteryService.batteryLevel >= 60) {
+                                    return "battery_charging_80";
+                                }
+                                if (BatteryService.batteryLevel >= 50) {
+                                    return "battery_charging_60";
+                                }
+                                if (BatteryService.batteryLevel >= 30) {
+                                    return "battery_charging_50";
+                                }
+                                if (BatteryService.batteryLevel >= 20) {
+                                    return "battery_charging_30";
+                                }
+                                return "battery_charging_20";
+                            } else {
+                                if (BatteryService.batteryLevel >= 95) {
+                                    return "battery_full";
+                                }
+                                if (BatteryService.batteryLevel >= 85) {
+                                    return "battery_6_bar";
+                                }
+                                if (BatteryService.batteryLevel >= 70) {
+                                    return "battery_5_bar";
+                                }
+                                if (BatteryService.batteryLevel >= 55) {
+                                    return "battery_4_bar";
+                                }
+                                if (BatteryService.batteryLevel >= 40) {
+                                    return "battery_3_bar";
+                                }
+                                if (BatteryService.batteryLevel >= 25) {
+                                    return "battery_2_bar";
+                                }
+                                return "battery_1_bar";
+                            }
+                        }
+                        size: Theme.iconSizeLarge
+                        color: {
+                            if (BatteryService.isLowBattery && !BatteryService.isCharging)
+                                return Theme.error;
+                            if (BatteryService.isCharging || BatteryService.isPluggedIn)
+                                return Theme.primary;
+                            return Theme.surfaceText;
+                        }
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Column {
+                        spacing: Theme.spacingXS
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: parent.width - Theme.iconSizeLarge - 32 - Theme.spacingM * 2
+
+                        Row {
+                            spacing: Theme.spacingS
+
+                            StyledText {
+                                text: BatteryService.batteryAvailable ? `${BatteryService.batteryLevel}%` : "Power"
+                                font.pixelSize: Theme.fontSizeXLarge
+                                color: {
+                                    if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                                        return Theme.error;
+                                    }
+                                    if (BatteryService.isCharging) {
+                                        return Theme.primary;
+                                    }
+                                    return Theme.surfaceText;
+                                }
+                                font.weight: Font.Bold
+                            }
+
+                            StyledText {
+                                text: BatteryService.batteryAvailable ? BatteryService.batteryStatus : "Management"
+                                font.pixelSize: Theme.fontSizeLarge
+                                color: {
+                                    if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                                        return Theme.error;
+                                    }
+                                    if (BatteryService.isCharging) {
+                                        return Theme.primary;
+                                    }
+                                    return Theme.surfaceText;
+                                }
+                                font.weight: Font.Medium
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+                        }
+
+                        StyledText {
+                            text: {
+                                if (!BatteryService.batteryAvailable) return "Power profile management available"
+                                const time = BatteryService.formatTimeRemaining();
+                                if (time !== "Unknown") {
+                                    return BatteryService.isCharging ? `Time until full: ${time}` : `Time remaining: ${time}`;
+                                }
+                                return "";
+                            }
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceTextMedium
+                            visible: text.length > 0
+                            elide: Text.ElideRight
+                            width: parent.width
+                        }
+                    }
+
+                    Rectangle {
+                        width: 32
+                        height: 32
+                        radius: 16
+                        color: closeBatteryArea.containsMouse ? Theme.errorHover : "transparent"
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "close"
+                            size: Theme.iconSize - 4
+                            color: closeBatteryArea.containsMouse ? Theme.error : Theme.surfaceText
+                        }
+
+                        MouseArea {
+                            id: closeBatteryArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onPressed: {
+                                root.close();
+                            }
+                        }
+                    }
+                }
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingM
+                    visible: BatteryService.batteryAvailable
+
+                    StyledRect {
+                        width: (parent.width - Theme.spacingM) / 2
+                        height: 64
+                        radius: Theme.cornerRadius
+                        color: Theme.surfaceContainerHigh
+                        border.width: 0
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: "Health"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.primary
+                                font.weight: Font.Medium
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+
+                            StyledText {
+                                text: BatteryService.batteryHealth
+                                font.pixelSize: Theme.fontSizeLarge
+                                color: {
+                                    if (BatteryService.batteryHealth === "N/A") {
+                                        return Theme.surfaceText;
+                                    }
+                                    const healthNum = parseInt(BatteryService.batteryHealth);
+                                    return healthNum < 80 ? Theme.error : Theme.surfaceText;
+                                }
+                                font.weight: Font.Bold
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+                        }
+                    }
+
+                    StyledRect {
+                        width: (parent.width - Theme.spacingM) / 2
+                        height: 64
+                        radius: Theme.cornerRadius
+                        color: Theme.surfaceContainerHigh
+                        border.width: 0
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: "Capacity"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.primary
+                                font.weight: Font.Medium
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+
+                            StyledText {
+                                text: BatteryService.batteryCapacity > 0 ? `${BatteryService.batteryCapacity.toFixed(1)} Wh` : "Unknown"
+                                font.pixelSize: Theme.fontSizeLarge
+                                color: Theme.surfaceText
+                                font.weight: Font.Bold
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+                        }
+                    }
+                }
+
+                DankButtonGroup {
+                    property var profileModel: (typeof PowerProfiles !== "undefined") ? [PowerProfile.PowerSaver, PowerProfile.Balanced].concat(PowerProfiles.hasPerformanceProfile ? [PowerProfile.Performance] : []) : [PowerProfile.PowerSaver, PowerProfile.Balanced, PowerProfile.Performance]
+                    property int currentProfileIndex: {
+                        if (typeof PowerProfiles === "undefined") return 1
+                        return profileModel.findIndex(profile => root.isActiveProfile(profile))
+                    }
+
+                    model: profileModel.map(profile => Theme.getPowerProfileLabel(profile))
+                    currentIndex: currentProfileIndex
+                    selectionMode: "single"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    onSelectionChanged: (index, selected) => {
+                        if (!selected) return
+                        root.setProfile(profileModel[index])
+                    }
+                }
+
+                StyledRect {
+                    width: parent.width
+                    height: degradationContent.implicitHeight + Theme.spacingL * 2
+                    radius: Theme.cornerRadius
+                    color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
+                    border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
+                    border.width: 0
+                    visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
+
+                    Column {
+                        id: degradationContent
+                        width: parent.width - Theme.spacingL * 2
+                        anchors.left: parent.left
+                        anchors.top: parent.top
+                        anchors.margins: Theme.spacingL
+                        spacing: Theme.spacingS
+
+                        Row {
+                            width: parent.width
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "warning"
+                                size: Theme.iconSize
+                                color: Theme.error
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            Column {
+                                spacing: Theme.spacingXS
+                                anchors.verticalCenter: parent.verticalCenter
+                                width: parent.width - Theme.iconSize - Theme.spacingM
+
+                                StyledText {
+                                    text: "Power Profile Degradation"
+                                    font.pixelSize: Theme.fontSizeLarge
+                                    color: Theme.error
+                                    font.weight: Font.Medium
+                                }
+
+                                StyledText {
+                                    text: (typeof PowerProfiles !== "undefined") ? PerformanceDegradationReason.toString(PowerProfiles.degradationReason) : ""
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.8)
+                                    wrapMode: Text.WordWrap
+                                    width: parent.width
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

Modules/DankBar/Clock.qml

@@ -0,0 +1,93 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool compactMode: false
+    property string section: "center"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+
+    signal clockClicked
+
+    width: clockRow.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = clockMouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    Row {
+        id: clockRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        StyledText {
+            text: {
+                const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP"
+                return systemClock?.date?.toLocaleTimeString(Qt.locale(), format)
+            }
+            font.pixelSize: Theme.fontSizeMedium - 1
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: "•"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.outlineButton
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !SettingsData.clockCompactMode
+        }
+
+        StyledText {
+            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.fontSizeMedium - 1
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !SettingsData.clockCompactMode
+        }
+    }
+
+    SystemClock {
+        id: systemClock
+        precision: SystemClock.Seconds
+    }
+
+    MouseArea {
+        id: clockMouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const screenX = currentScreen.x || 0
+                const relativeX = globalPos.x - screenX
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen)
+            }
+            root.clockClicked()
+        }
+    }
+
+}

Modules/DankBar/ColorPicker.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isActive: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal clicked()
+
+    width: colorPickerIcon.width + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = colorPickerArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: colorPickerIcon
+
+        anchors.centerIn: parent
+        name: "palette"
+        size: Theme.iconSize - 6
+        color: colorPickerArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+    }
+
+    MouseArea {
+        id: colorPickerArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            console.log("Color picker button clicked!")
+            root.colorPickerRequested();
+        }
+    }
+
+    // Signal to notify TopBar to open color picker
+    signal colorPickerRequested()
+
+}

Modules/DankBar/ControlCenterButton.qml

@@ -0,0 +1,170 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isActive: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property var widgetData: null
+    property bool showNetworkIcon: SettingsData.controlCenterShowNetworkIcon
+    property bool showBluetoothIcon: SettingsData.controlCenterShowBluetoothIcon
+    property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
+    property real widgetHeight: 30
+    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal clicked()
+
+    width: controlIndicators.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = controlCenterArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    Row {
+        id: controlIndicators
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        DankIcon {
+            id: networkIcon
+
+            name: {
+                if (NetworkService.wifiToggling) {
+                    return "sync";
+                }
+
+                if (NetworkService.networkStatus === "ethernet") {
+                    return "lan";
+                }
+
+                return NetworkService.wifiSignalIcon;
+            }
+            size: Theme.iconSize - 8
+            color: {
+                if (NetworkService.wifiToggling) {
+                    return Theme.primary;
+                }
+
+                return NetworkService.networkStatus !== "disconnected" ? Theme.primary : Theme.outlineButton;
+            }
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.showNetworkIcon
+
+
+        }
+
+        DankIcon {
+            id: bluetoothIcon
+
+            name: "bluetooth"
+            size: Theme.iconSize - 8
+            color: BluetoothService.enabled ? 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.iconSize - 8
+                color: Theme.surfaceText
+                anchors.centerIn: parent
+            }
+
+            MouseArea {
+                id: audioWheelArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                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;
+                        AudioService.volumeChanged();
+                    }
+                    wheelEvent.accepted = true;
+                }
+            }
+
+        }
+
+        DankIcon {
+            name: "mic"
+            size: Theme.iconSize - 8
+            color: Theme.primary
+            anchors.verticalCenter: parent.verticalCenter
+            visible: false // TODO: Add mic detection
+        }
+
+        // Fallback settings icon when all other icons are hidden
+        DankIcon {
+            name: "settings"
+            size: Theme.iconSize - 8
+            color: controlCenterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !root.showNetworkIcon && !root.showBluetoothIcon && !root.showAudioIcon
+        }
+
+    }
+
+    MouseArea {
+        id: controlCenterArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            root.clicked();
+        }
+    }
+
+
+}

Modules/DankBar/CpuMonitor.qml

@@ -0,0 +1,117 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    width: cpuContent.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = cpuArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    Component.onCompleted: {
+        DgopService.addRef(["cpu"]);
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["cpu"]);
+    }
+
+    MouseArea {
+        id: cpuArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            DgopService.setSortBy("cpu");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+
+        }
+    }
+
+    Row {
+        id: cpuContent
+
+        anchors.centerIn: parent
+        spacing: 3
+
+        DankIcon {
+            name: "memory"
+            size: Theme.iconSize - 8
+            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.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: cpuBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100%"
+            }
+
+            width: Math.max(cpuBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+
+    }
+
+}

Modules/DankBar/CpuTemperature.qml

@@ -0,0 +1,118 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    width: cpuTempContent.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = cpuTempArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    Component.onCompleted: {
+        DgopService.addRef(["cpu"]);
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["cpu"]);
+    }
+
+    MouseArea {
+        id: cpuTempArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            DgopService.setSortBy("cpu");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+
+        }
+    }
+
+    Row {
+        id: cpuTempContent
+
+        anchors.centerIn: parent
+        spacing: 3
+
+        DankIcon {
+            name: "memory"
+            size: Theme.iconSize - 8
+            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.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: tempBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100°"
+            }
+
+            width: Math.max(tempBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+
+    }
+
+
+}

Modules/DankBar/DiskUsage.qml

@@ -0,0 +1,171 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property var widgetData: null
+    property real widgetHeight: 30
+    property string mountPath: (widgetData && widgetData.mountPath !== undefined) ? widgetData.mountPath : "/"
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    property var selectedMount: {
+        if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
+            return null
+        }
+
+        // Force re-evaluation when mountPath changes
+        const currentMountPath = root.mountPath || "/"
+
+        // First try to find exact match
+        for (let i = 0; i < DgopService.diskMounts.length; i++) {
+            if (DgopService.diskMounts[i].mount === currentMountPath) {
+                return DgopService.diskMounts[i]
+            }
+        }
+
+        // Fallback to root
+        for (let i = 0; i < DgopService.diskMounts.length; i++) {
+            if (DgopService.diskMounts[i].mount === "/") {
+                return DgopService.diskMounts[i]
+            }
+        }
+
+        // Last resort - first mount
+        return DgopService.diskMounts[0] || null
+    }
+
+    property real diskUsagePercent: {
+        if (!selectedMount || !selectedMount.percent) {
+            return 0
+        }
+        const percentStr = selectedMount.percent.replace("%", "")
+        return parseFloat(percentStr) || 0
+    }
+
+    width: diskContent.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    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)
+    }
+    Component.onCompleted: {
+        DgopService.addRef(["diskmounts"])
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["diskmounts"])
+    }
+
+    Connections {
+        function onWidgetDataChanged() {
+            // Force property re-evaluation by triggering change detection
+            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 || "/"
+
+                // First try to find exact match
+                for (let i = 0; i < DgopService.diskMounts.length; i++) {
+                    if (DgopService.diskMounts[i].mount === currentMountPath) {
+                        return DgopService.diskMounts[i]
+                    }
+                }
+
+                // Fallback to root
+                for (let i = 0; i < DgopService.diskMounts.length; i++) {
+                    if (DgopService.diskMounts[i].mount === "/") {
+                        return DgopService.diskMounts[i]
+                    }
+                }
+
+                // Last resort - first mount
+                return DgopService.diskMounts[0] || null
+            })
+        }
+
+        target: SettingsData
+    }
+
+
+    Row {
+        id: diskContent
+
+        anchors.centerIn: parent
+        spacing: 3
+
+        DankIcon {
+            name: "storage"
+            size: Theme.iconSize - 8
+            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.fontSizeSmall
+            font.weight: Font.Medium
+            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.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: diskBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100%"
+            }
+
+            width: Math.max(diskBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+}

Modules/DankBar/FocusedApp.qml

@@ -0,0 +1,159 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool compactMode: SettingsData.focusedWindowCompactMode
+    property int availableWidth: 400
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+    readonly property int baseWidth: contentRow.implicitWidth + horizontalPadding * 2
+    readonly property int maxNormalWidth: 456
+    readonly property int maxCompactWidth: 288
+    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+    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
+            }
+
+            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
+        }
+
+        return activeWindow && activeWindow.title
+    }
+
+    width: !hasWindowsOnCurrentWorkspace ? 0 : (compactMode ? Math.min(baseWidth, maxCompactWidth) : Math.min(baseWidth, maxNormalWidth))
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (!activeWindow || !activeWindow.title) {
+            return "transparent";
+        }
+
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    clip: true
+    visible: hasWindowsOnCurrentWorkspace
+
+    Row {
+        id: contentRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        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.fontSizeSmall
+            font.weight: Font.Medium
+            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.fontSizeSmall
+            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;
+                }
+
+                // Remove app name from end of title if it exists there
+                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.fontSizeSmall
+            font.weight: Font.Medium
+            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: true
+    }
+
+
+    Behavior on width {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+
+    }
+
+}

Modules/DankBar/GpuTemperature.qml

@@ -0,0 +1,209 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property var widgetData: null
+    property real barHeight: 48
+    property real widgetHeight: 30
+    property int selectedGpuIndex: (widgetData && widgetData.selectedGpuIndex !== undefined) ? widgetData.selectedGpuIndex : 0
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    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) {
+        // Find and update this widget's pciId in the settings
+        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 ;
+                }
+            }
+        }
+    }
+
+    width: gpuTempContent.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = gpuArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    Component.onCompleted: {
+        DgopService.addRef(["gpu"]);
+        console.log("GpuTemperature widget - pciId:", widgetData ? widgetData.pciId : "no widgetData", "selectedGpuIndex:", widgetData ? widgetData.selectedGpuIndex : "no widgetData");
+        // Add this widget's PCI ID to the service
+        if (widgetData && widgetData.pciId) {
+            console.log("Adding GPU PCI ID to service:", widgetData.pciId);
+            DgopService.addGpuPciId(widgetData.pciId);
+        } else {
+            console.log("No PCI ID in widget data, starting auto-detection");
+            // No PCI ID saved, auto-detect and save the first GPU
+            autoSaveTimer.running = true;
+        }
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["gpu"]);
+        // Remove this widget's PCI ID from the service
+        if (widgetData && widgetData.pciId) {
+            DgopService.removeGpuPciId(widgetData.pciId);
+        }
+
+    }
+
+    Connections {
+        function onWidgetDataChanged() {
+            // Force property re-evaluation by triggering change detection
+            root.selectedGpuIndex = Qt.binding(() => {
+                return (root.widgetData && root.widgetData.selectedGpuIndex !== undefined) ? root.widgetData.selectedGpuIndex : 0;
+            });
+        }
+
+        target: SettingsData
+    }
+
+    MouseArea {
+        id: gpuArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            DgopService.setSortBy("cpu");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+
+        }
+    }
+
+    Row {
+        id: gpuTempContent
+
+        anchors.centerIn: parent
+        spacing: 3
+
+        DankIcon {
+            name: "auto_awesome_mosaic"
+            size: Theme.iconSize - 8
+            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.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: gpuTempBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100°"
+            }
+
+            width: Math.max(gpuTempBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+
+    }
+
+    Timer {
+        id: autoSaveTimer
+
+        interval: 100
+        running: false
+        onTriggered: {
+            if (DgopService.availableGpus && DgopService.availableGpus.length > 0) {
+                const firstGpu = DgopService.availableGpus[0];
+                if (firstGpu && firstGpu.pciId) {
+                    // Save the first GPU's PCI ID to this widget's settings
+                    updateWidgetPciId(firstGpu.pciId);
+                    DgopService.addGpuPciId(firstGpu.pciId);
+                }
+            }
+        }
+    }
+
+
+}

Modules/DankBar/IdleInhibitor.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    width: idleIcon.width + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: idleIcon
+
+        anchors.centerIn: parent
+        name: SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
+        size: Theme.iconSize - 6
+        color: Theme.surfaceText
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            SessionService.toggleIdleInhibit();
+        }
+    }
+
+
+}

Modules/DankBar/KeyboardLayoutName.qml

@@ -0,0 +1,110 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Modules.ProcessList
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    property string currentLayout: ""
+    property string hyprlandKeyboard: ""
+
+    width: contentRow.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            if (CompositorService.isNiri) {
+                NiriService.cycleKeyboardLayout()
+            } else if (CompositorService.isHyprland) {
+                Quickshell.execDetached([
+                    "hyprctl",
+                    "switchxkblayout",
+                    root.hyprlandKeyboard,
+                    "next"
+                ])
+                updateLayout()
+            }
+        }
+    }
+
+    Row {
+        id: contentRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        StyledText {
+            text: currentLayout
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+    }
+
+
+    Process {
+        id: hyprlandLayoutProcess
+        running: false
+        command: ["hyprctl", "-j", "devices"]
+        stdout: StdioCollector {
+            onStreamFinished: {
+                try {
+                    const data = JSON.parse(text)
+                    // Find the main keyboard and get its active keymap
+                    const mainKeyboard = data.keyboards.find(kb => kb.main === true)
+                    root.hyprlandKeyboard = mainKeyboard.name
+                    if (mainKeyboard && mainKeyboard.active_keymap) {
+                        root.currentLayout = mainKeyboard.active_keymap
+                    } else {
+                        root.currentLayout = "Unknown"
+                    }
+                } catch (e) {
+                    root.currentLayout = "Unknown"
+                }
+            }
+        }
+    }
+
+    Timer {
+        id: updateTimer
+        interval: 1000
+        running: true
+        repeat: true
+        onTriggered: {
+            updateLayout()
+        }
+    }
+
+    Component.onCompleted: {
+        updateLayout()
+    }
+
+    function updateLayout() {
+        if (CompositorService.isNiri) {
+            root.currentLayout = NiriService.getCurrentKeyboardLayoutName()
+        } else if (CompositorService.isHyprland) {
+            hyprlandLayoutProcess.running = true
+        }
+    }
+}

Modules/DankBar/LauncherButton.qml

@@ -0,0 +1,73 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool isActive: false
+    property string section: "left"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal clicked()
+
+    width: Theme.iconSize + horizontalPadding * 2
+    height: widgetHeight
+
+    MouseArea {
+        id: launcherArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            root.clicked();
+        }
+    }
+
+    Rectangle {
+        id: launcherContent
+
+        anchors.fill: parent
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+        color: {
+            if (SettingsData.dankBarNoBackground) {
+                return "transparent";
+            }
+
+            const baseColor = launcherArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+        }
+
+        SystemLogo {
+            visible: SettingsData.useOSLogo
+            anchors.centerIn: parent
+            width: Theme.iconSize - 3
+            height: Theme.iconSize - 3
+            colorOverride: SettingsData.osLogoColorOverride
+            brightnessOverride: SettingsData.osLogoBrightness
+            contrastOverride: SettingsData.osLogoContrast
+        }
+
+        DankIcon {
+            visible: !SettingsData.useOSLogo
+            anchors.centerIn: parent
+            name: "apps"
+            size: Theme.iconSize - 6
+            color: Theme.surfaceText
+        }
+    }
+}

Modules/DankBar/Media.qml

@@ -0,0 +1,336 @@
+import QtQuick
+import Quickshell.Services.Mpris
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    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; // No text in small mode
+        case 2:
+            return 180; // Large text area
+        default:
+            return 120; // Medium text area
+        }
+    }
+    readonly property int currentContentWidth: {
+        // Calculate actual content width:
+        // AudioViz (20) + spacing + [text + spacing] + controls (prev:20 + spacing + play:24 + spacing + next:20) + padding
+        const controlsWidth = 20 + Theme.spacingXS + 24 + Theme.spacingXS + 20;
+        // ~72px total
+        const audioVizWidth = 20;
+        const contentWidth = audioVizWidth + Theme.spacingXS + controlsWidth;
+        return contentWidth + (textWidth > 0 ? textWidth + Theme.spacingXS : 0) + horizontalPadding * 2;
+    }
+    property string section: "center"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal clicked()
+
+    height: widgetHeight
+    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);
+    }
+    states: [
+        State {
+            name: "shown"
+            when: playerAvailable
+
+            PropertyChanges {
+                target: root
+                opacity: 1
+                width: currentContentWidth
+            }
+
+        },
+        State {
+            name: "hidden"
+            when: !playerAvailable
+
+            PropertyChanges {
+                target: root
+                opacity: 0
+                width: 0
+            }
+
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "shown"
+            to: "hidden"
+
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: 500
+                }
+
+                NumberAnimation {
+                    properties: "opacity,width"
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+
+            }
+
+        },
+        Transition {
+            from: "hidden"
+            to: "shown"
+
+            NumberAnimation {
+                properties: "opacity,width"
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
+            }
+
+        }
+    ]
+
+    Row {
+        id: mediaRow
+
+        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: 20
+                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.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Medium
+                    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 && root.opacity > 0 && root.width > 0 && textContainer.visible
+                    hoverEnabled: enabled
+                    cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    onPressed: {
+                        if (root.popupTarget && root.popupTarget.setTriggerPosition) {
+                            const globalPos = mapToGlobal(0, 0);
+                            const currentScreen = root.parentScreen || Screen;
+                            const screenX = currentScreen.x || 0;
+                            const relativeX = globalPos.x - screenX;
+                            root.popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), root.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 && root.width > 0
+                    hoverEnabled: enabled
+                    cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    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 && root.width > 0
+                    hoverEnabled: enabled
+                    cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    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 && root.width > 0
+                    hoverEnabled: enabled
+                    cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    onClicked: {
+                        if (activePlayer) {
+                            activePlayer.next();
+                        }
+                    }
+                }
+
+            }
+
+        }
+
+    }
+
+
+    Behavior on width {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+
+    }
+
+}

Modules/DankBar/NetworkMonitor.qml

@@ -0,0 +1,148 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modules.ProcessList
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property int availableWidth: 400
+    readonly property int baseWidth: contentRow.implicitWidth + Theme.spacingS * 2
+    readonly property int maxNormalWidth: 456
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    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";
+        }
+    }
+
+    width: contentRow.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = networkArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    Component.onCompleted: {
+        DgopService.addRef(["network"]);
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["network"]);
+    }
+
+    MouseArea {
+        id: networkArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    Row {
+        id: contentRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        DankIcon {
+            name: "network_check"
+            size: Theme.iconSize - 8
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Row {
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 4
+
+            StyledText {
+                text: "↓"
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.info
+            }
+
+            StyledText {
+                text: DgopService.networkRxRate > 0 ? formatNetworkSpeed(DgopService.networkRxRate) : "0 B/s"
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Text.AlignLeft
+                elide: Text.ElideNone
+                wrapMode: Text.NoWrap
+
+                StyledTextMetrics {
+                    id: rxBaseline
+                    font.pixelSize: Theme.fontSizeSmall
+                    font.weight: Font.Medium
+                    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.fontSizeSmall
+                color: Theme.error
+            }
+
+            StyledText {
+                text: DgopService.networkTxRate > 0 ? formatNetworkSpeed(DgopService.networkTxRate) : "0 B/s"
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Text.AlignLeft
+                elide: Text.ElideNone
+                wrapMode: Text.NoWrap
+
+                StyledTextMetrics {
+                    id: txBaseline
+                    font.pixelSize: Theme.fontSizeSmall
+                    font.weight: Font.Medium
+                    text: "88.8 MB/s"
+                }
+
+                width: Math.max(txBaseline.width, paintedWidth)
+
+                Behavior on width {
+                    NumberAnimation {
+                        duration: 120
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            }
+
+        }
+
+    }
+
+
+}

Modules/DankBar/NotepadButton.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isActive: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal clicked()
+
+    width: notepadIcon.width + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = notepadArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: notepadIcon
+
+        anchors.centerIn: parent
+        name: "assignment"
+        size: Theme.iconSize - 6
+        color: notepadArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+    }
+
+    Rectangle {
+        width: 6
+        height: 6
+        radius: 3
+        color: Theme.primary
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: SettingsData.dankBarNoBackground ? 0 : 4
+        anchors.topMargin: SettingsData.dankBarNoBackground ? 0 : 4
+        visible: NotepadStorageService.tabs && NotepadStorageService.tabs.length > 0
+        opacity: 0.8
+    }
+
+    MouseArea {
+        id: notepadArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            root.clicked();
+        }
+    }
+
+
+}

Modules/DankBar/NotificationCenterButton.qml

@@ -0,0 +1,71 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool hasUnread: false
+    property bool isActive: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal clicked()
+
+    width: notificationIcon.width + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = notificationArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: notificationIcon
+
+        anchors.centerIn: parent
+        name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
+        size: Theme.iconSize - 6
+        color: SessionData.doNotDisturb ? Theme.error : (notificationArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText)
+    }
+
+    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.hasUnread
+    }
+
+    MouseArea {
+        id: notificationArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            root.clicked();
+        }
+    }
+
+
+}

Modules/DankBar/PrivacyIndicator.qml

@@ -0,0 +1,170 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    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
+
+    width: hasActivePrivacy ? (contentWidth + horizontalPadding * 2) : 0
+    height: hasActivePrivacy ? widgetHeight : 0
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    visible: hasActivePrivacy
+    opacity: hasActivePrivacy ? 1 : 0
+    enabled: hasActivePrivacy
+    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);
+    }
+
+    MouseArea {
+        // Privacy indicator click handler
+
+        id: privacyArea
+
+        anchors.fill: parent
+        hoverEnabled: hasActivePrivacy
+        enabled: hasActivePrivacy
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+        }
+    }
+
+    Row {
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+        visible: hasActivePrivacy
+
+        Item {
+            width: 18
+            height: 18
+            visible: PrivacyService.microphoneActive
+            anchors.verticalCenter: parent.verticalCenter
+
+            DankIcon {
+                name: "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
+            }
+
+        }
+
+    }
+
+    Rectangle {
+        id: tooltip
+
+        width: tooltipText.contentWidth + Theme.spacingM * 2
+        height: tooltipText.contentHeight + Theme.spacingS * 2
+        radius: Theme.cornerRadius
+        color: Theme.popupBackground()
+        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.fontSizeSmall
+            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
+
+        NumberAnimation {
+            duration: Theme.mediumDuration
+            easing.type: Theme.emphasizedEasing
+        }
+
+    }
+
+}

Modules/DankBar/RamMonitor.qml

@@ -0,0 +1,117 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool showPercentage: true
+    property bool showIcon: true
+    property var toggleProcessList
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    width: ramContent.implicitWidth + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = ramArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    Component.onCompleted: {
+        DgopService.addRef(["memory"]);
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["memory"]);
+    }
+
+    MouseArea {
+        id: ramArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            DgopService.setSortBy("memory");
+            if (root.toggleProcessList) {
+                root.toggleProcessList();
+            }
+
+        }
+    }
+
+    Row {
+        id: ramContent
+
+        anchors.centerIn: parent
+        spacing: 3
+
+        DankIcon {
+            name: "developer_board"
+            size: Theme.iconSize - 8
+            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 "--%";
+                }
+
+                return DgopService.memoryUsage.toFixed(0) + "%";
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: ramBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100%"
+            }
+
+            width: Math.max(ramBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+
+    }
+
+}

Modules/DankBar/RunningApps.qml

@@ -0,0 +1,431 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string section: "left"
+    property var parentScreen
+    property var hoveredItem: null
+    property var topBar: null
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+    // The visual root for this window
+    property Item windowRoot: (Window.window ? Window.window.contentItem : null)
+    readonly property var sortedToplevels: {
+        if (SettingsData.runningAppsCurrentWorkspace) {
+            return CompositorService.filterCurrentWorkspace(CompositorService.sortedToplevels, parentScreen.name);
+        }
+        return CompositorService.sortedToplevels;
+    }
+    readonly property int windowCount: sortedToplevels.length
+    readonly property int calculatedWidth: {
+        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: calculatedWidth
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    visible: windowCount > 0
+    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 (let 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 (let 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;
+        }
+    }
+
+    Row {
+        id: windowRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        Repeater {
+            id: windowRepeater
+
+            model: sortedToplevels
+
+            delegate: Item {
+                id: delegateItem
+
+                property bool isFocused: modelData.activated
+                property string appId: modelData.appId || ""
+                property string windowTitle: modelData.title || "(Unnamed)"
+                property var toplevelObject: modelData
+                property string tooltipText: {
+                    let appName = "Unknown";
+                    if (appId) {
+                        const desktopEntry = DesktopEntries.heuristicLookup(appId);
+                        appName = desktopEntry
+                                && desktopEntry.name ? desktopEntry.name : appId;
+                    }
+                    return appName + (windowTitle ? " • " + windowTitle : "")
+                }
+
+                width: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
+                height: 24
+
+                Rectangle {
+                    anchors.fill: 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 - 18) / 2 : Theme.spacingXS
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 18
+                    height: 18
+                    source: {
+                        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 - 18) / 2 : Theme.spacingXS
+                    anchors.verticalCenter: parent.verticalCenter
+                    size: 18
+                    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: {
+                        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
+                    font.weight: Font.Medium
+                }
+
+                // 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.fontSizeMedium - 1
+                    color: Theme.surfaceText
+                    font.weight: Font.Medium
+                    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 (toplevelObject) {
+                                toplevelObject.activate();
+                            }
+                        } else if (mouse.button === Qt.RightButton) {
+                            if (tooltipLoader.item) {
+                                tooltipLoader.item.hideTooltip();
+                            }
+                            tooltipLoader.active = false;
+                            
+                            windowContextMenuLoader.active = true;
+                            if (windowContextMenuLoader.item) {
+                                windowContextMenuLoader.item.currentWindow = toplevelObject;
+                                const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, 0);
+                                const screenX = root.parentScreen ? root.parentScreen.x : 0;
+                                const screenY = root.parentScreen ? root.parentScreen.y : 0;
+                                const relativeX = globalPos.x - screenX;
+                                const yPos = Theme.barHeight + SettingsData.dankBarSpacing - 7;
+                                windowContextMenuLoader.item.showAt(relativeX, yPos);
+                            }
+                        }
+                    }
+                    onEntered: {
+                        root.hoveredItem = delegateItem;
+                        const globalPos = delegateItem.mapToGlobal(
+                                    delegateItem.width / 2, delegateItem.height);
+                        tooltipLoader.active = true;
+                        if (tooltipLoader.item) {
+                            const tooltipY = Theme.barHeight
+                                    + SettingsData.dankBarSpacing + Theme.spacingXS;
+                            tooltipLoader.item.showTooltip(
+                                        delegateItem.tooltipText, globalPos.x,
+                                        tooltipY, root.parentScreen);
+                        }
+                    }
+                    onExited: {
+                        if (root.hoveredItem === delegateItem) {
+                            root.hoveredItem = null;
+                            if (tooltipLoader.item) {
+                                tooltipLoader.item.hideTooltip();
+                            }
+
+                            tooltipLoader.active = false;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: tooltipLoader
+
+        active: false
+
+        sourceComponent: RunningAppsTooltip {}
+    }
+    
+    Loader {
+        id: windowContextMenuLoader
+        active: false
+        sourceComponent: PanelWindow {
+            id: contextMenuWindow
+            
+            property var currentWindow: null
+            property bool isVisible: false
+            property point anchorPos: Qt.point(0, 0)
+            
+            function showAt(x, y) {
+                screen = root.parentScreen;
+                anchorPos = Qt.point(x, y);
+                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: {
+                    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: contextMenuWindow.anchorPos.y
+                width: 100
+                height: 32
+                color: Theme.popupBackground()
+                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: "Close"
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                }
+                
+                MouseArea {
+                    id: closeMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (contextMenuWindow.currentWindow) {
+                            contextMenuWindow.currentWindow.close();
+                        }
+                        contextMenuWindow.close();
+                    }
+                }
+            }
+        }
+    }
+}

Modules/DankBar/RunningAppsTooltip.qml

@@ -0,0 +1,67 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+
+PanelWindow {
+    id: root
+
+    property string tooltipText: ""
+    property real targetX: 0
+    property real targetY: 0
+    property var targetScreen: null
+
+    function showTooltip(text, x, y, screen) {
+        tooltipText = text;
+        targetScreen = screen;
+        const screenX = screen ? screen.x : 0;
+        targetX = x - screenX;
+        targetY = y;
+        visible = true;
+    }
+
+    function hideTooltip() {
+        visible = false;
+    }
+
+    screen: targetScreen
+    implicitWidth: Math.min(300, Math.max(120, textContent.implicitWidth + Theme.spacingM * 2))
+    implicitHeight: textContent.implicitHeight + Theme.spacingS * 2
+    color: "transparent"
+    visible: false
+    WlrLayershell.layer: WlrLayershell.Overlay
+    WlrLayershell.exclusiveZone: -1
+
+    anchors {
+        top: true
+        left: true
+    }
+
+    margins {
+        left: Math.round(targetX - implicitWidth / 2)
+        top: Math.round(targetY)
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.surfaceContainerHigh
+        radius: Theme.cornerRadius
+        border.width: 1
+        border.color: Theme.outlineMedium
+
+        Text {
+            id: textContent
+
+            anchors.centerIn: parent
+            text: root.tooltipText
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            wrapMode: Text.NoWrap
+            maximumLineCount: 1
+            elide: Text.ElideRight
+            width: parent.width - Theme.spacingM * 2
+        }
+
+    }
+
+}

Modules/DankBar/SystemTrayBar.qml

@@ -0,0 +1,510 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.SystemTray
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property var parentWindow: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    property bool isAtBottom: false
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+    readonly property int calculatedWidth: SystemTray.items.values.length > 0 ? SystemTray.items.values.length * 24 + horizontalPadding * 2 : 0
+
+    width: calculatedWidth
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SystemTray.items.values.length === 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);
+    }
+    visible: SystemTray.items.values.length > 0
+
+    Row {
+        id: systemTrayRow
+
+        anchors.centerIn: parent
+        spacing: 0
+
+        Repeater {
+            model: SystemTray.items.values
+
+            delegate: Item {
+                property var trayItem: modelData
+                property string iconSource: {
+                    let icon = trayItem && trayItem.icon;
+                    if (typeof icon === 'string' || icon instanceof String) {
+                        if (icon === "") {
+                            return "";
+                        }
+                        if (icon.includes("?path=")) {
+                            const split = icon.split("?path=");
+                            if (split.length !== 2) {
+                                return icon;
+                            }
+
+                            const name = split[0];
+                            const path = split[1];
+                            const fileName = name.substring(name.lastIndexOf("/") + 1);
+                            return `file://${path}/${fileName}`;
+                        }
+                        if (icon.startsWith("/") && !icon.startsWith("file://")) {
+                            return `file://${icon}`;
+                        }
+                        return icon;
+                    }
+                    return "";
+                }
+
+                width: 24
+                height: 24
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Theme.cornerRadius
+                    color: trayItemArea.containsMouse ? Theme.primaryHover : "transparent"
+
+
+                }
+
+                IconImage {
+                    anchors.centerIn: parent
+                    width: 16
+                    height: 16
+                    source: parent.iconSource
+                    asynchronous: true
+                    smooth: true
+                    mipmap: true
+                }
+
+                MouseArea {
+                    id: trayItemArea
+
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: (mouse) => {
+                        if (!trayItem) {
+                            return;
+                        }
+
+                        if (mouse.button === Qt.LeftButton && !trayItem.onlyMenu) {
+                            trayItem.activate();
+                            return ;
+                        }
+                        if (trayItem.hasMenu) {
+                            root.showForTrayItem(trayItem, parent, parentScreen, root.isAtBottom);
+                        }
+                    }
+                }
+
+            }
+
+        }
+
+    }
+
+    Component {
+        id: trayMenuComponent
+
+        Rectangle {
+            id: menuRoot
+
+            property var trayItem: null
+            property var anchorItem: null
+            property var parentScreen: null
+            property bool isAtBottom: false
+            property bool showMenu: false
+            property var menuHandle: null
+
+            ListModel { id: entryStack }
+            function topEntry() {
+                return entryStack.count ? entryStack.get(entryStack.count - 1).handle : null
+            }
+
+            function showForTrayItem(item, anchor, screen, atBottom) {
+                trayItem = item
+                anchorItem = anchor
+                parentScreen = screen
+                isAtBottom = atBottom
+                menuHandle = item?.menu
+
+                if (parentScreen) {
+                    for (var i = 0; i < Quickshell.screens.length; i++) {
+                        const s = Quickshell.screens[i]
+                        if (s === parentScreen) {
+                            menuWindow.screen = s
+                            break
+                        }
+                    }
+                }
+
+                showMenu = true
+            }
+
+            function close() {
+                showMenu = false
+            }
+
+            function showSubMenu(entry) {
+                if (!entry || !entry.hasChildren) return;
+
+                entryStack.append({ handle: entry });
+
+                const h = entry.menu || entry;
+                if (h && typeof h.updateLayout === "function") h.updateLayout();
+
+                submenuHydrator.menu = h;
+                submenuHydrator.open();
+                Qt.callLater(() => submenuHydrator.close());
+            }
+
+            function goBack() {
+                if (!entryStack.count) return;
+                entryStack.remove(entryStack.count - 1);
+            }
+
+            width: 0
+            height: 0
+            color: "transparent"
+
+            PanelWindow {
+                id: menuWindow
+                visible: menuRoot.showMenu && menuRoot.trayItem?.hasMenu
+                WlrLayershell.layer: WlrLayershell.Overlay
+                WlrLayershell.exclusiveZone: -1
+                WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+                color: "transparent"
+
+                anchors {
+                    top: true
+                    left: true
+                    right: true
+                    bottom: true
+                }
+
+                property point anchorPos: Qt.point(screen.width / 2, screen.height / 2)
+
+                onVisibleChanged: {
+                    if (visible) {
+                        updatePosition()
+                    }
+                }
+
+                function updatePosition() {
+                    if (!menuRoot.anchorItem || !menuRoot.trayItem) {
+                        anchorPos = Qt.point(screen.width / 2, screen.height / 2)
+                        return
+                    }
+
+                    const globalPos = menuRoot.anchorItem.mapToGlobal(0, 0)
+                    const screenX = screen.x || 0
+                    const screenY = screen.y || 0
+                    const relativeX = globalPos.x - screenX
+                    const relativeY = globalPos.y - screenY
+
+                    const widgetHeight = Math.max(20, 26 + SettingsData.dankBarInnerPadding * 0.6)
+                    const effectiveBarHeight = Math.max(widgetHeight + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+
+                    let targetY
+                    if (menuRoot.isAtBottom) {
+                        const popupY = effectiveBarHeight + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap - 2 + Theme.popupDistance
+                        targetY = screen.height - popupY
+                    } else {
+                        targetY = effectiveBarHeight + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap - 2 + Theme.popupDistance
+                    }
+
+                    anchorPos = Qt.point(relativeX + menuRoot.anchorItem.width / 2, targetY)
+                }
+
+                Rectangle {
+                    id: menuContainer
+
+                    width: Math.min(500, Math.max(250, menuColumn.implicitWidth + Theme.spacingS * 2))
+                    height: Math.max(40, menuColumn.implicitHeight + Theme.spacingS * 2)
+
+                    x: {
+                        const left = 10
+                        const right = menuWindow.width - width - 10
+                        const want = menuWindow.anchorPos.x - width / 2
+                        return Math.max(left, Math.min(right, want))
+                    }
+
+                    y: {
+                        if (menuRoot.isAtBottom) {
+                            const targetY = menuWindow.anchorPos.y - height
+                            return Math.max(10, targetY)
+                        } else {
+                            const targetY = menuWindow.anchorPos.y
+                            return Math.min(menuWindow.screen.height - height - 10, targetY)
+                        }
+                    }
+
+                    color: Theme.popupBackground()
+                    radius: Theme.cornerRadius
+                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+                    border.width: 1
+
+                    opacity: menuRoot.showMenu ? 1 : 0
+                    scale: menuRoot.showMenu ? 1 : 0.85
+
+                    Rectangle {
+                        anchors.fill: parent
+                        anchors.topMargin: 4
+                        anchors.leftMargin: 2
+                        anchors.rightMargin: -2
+                        anchors.bottomMargin: -4
+                        radius: parent.radius
+                        color: Qt.rgba(0, 0, 0, 0.15)
+                        z: parent.z - 1
+                    }
+
+                    QsMenuAnchor {
+                        id: submenuHydrator
+                        anchor.window: menuWindow
+                    }
+
+                    QsMenuOpener {
+                        id: rootOpener
+                        menu: menuRoot.menuHandle
+                    }
+
+                    QsMenuOpener {
+                        id: subOpener
+                        menu: {
+                            const e = menuRoot.topEntry();
+                            return e ? (e.menu || e) : null;
+                        }
+                    }
+
+
+                    Column {
+                        id: menuColumn
+
+                        width: parent.width - Theme.spacingS * 2
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.top: parent.top
+                        anchors.topMargin: Theme.spacingS
+                        spacing: 1
+
+                        Rectangle {
+                            visible: entryStack.count > 0
+                            width: parent.width
+                            height: 28
+                            radius: Theme.cornerRadius
+                            color: backArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                            Row {
+                                anchors.left: parent.left
+                                anchors.leftMargin: Theme.spacingS
+                                anchors.verticalCenter: parent.verticalCenter
+                                spacing: Theme.spacingXS
+
+                                DankIcon {
+                                    name: "arrow_back"
+                                    size: 16
+                                    color: Theme.surfaceText
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+
+                                StyledText {
+                                    text: "Back"
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceText
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+                            }
+
+                            MouseArea {
+                                id: backArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: menuRoot.goBack()
+                            }
+                        }
+
+                        Rectangle {
+                            visible: entryStack.count > 0
+                            width: parent.width
+                            height: 1
+                            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                        }
+
+                        Repeater {
+                            model: entryStack.count
+                                   ? (subOpener.children ? subOpener.children
+                                                         : (menuRoot.topEntry()?.children || []))
+                                   : rootOpener.children
+
+                            Rectangle {
+                                property var menuEntry: modelData
+
+                                width: menuColumn.width
+                                height: menuEntry?.isSeparator ? 1 : 28
+                                radius: menuEntry?.isSeparator ? 0 : Theme.cornerRadius
+                                color: {
+                                    if (menuEntry?.isSeparator) {
+                                        return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                                    }
+                                    return itemArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                                }
+
+                                MouseArea {
+                                    id: itemArea
+                                    anchors.fill: parent
+                                    enabled: !menuEntry?.isSeparator && (menuEntry?.enabled !== false)
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+
+                                    onClicked: {
+                                        if (!menuEntry || menuEntry.isSeparator) return;
+
+                                        if (menuEntry.hasChildren) {
+                                            console.log("Opening submenu for:", menuEntry.text);
+                                            menuRoot.showSubMenu(menuEntry);
+                                        } else {
+                                            if (typeof menuEntry.activate === "function") {
+                                                menuEntry.activate();          // preferred
+                                            } else if (typeof menuEntry.triggered === "function") {
+                                                menuEntry.triggered();
+                                            }
+                                            // optional: small delay to let provider flip state before closing
+                                            Qt.createQmlObject('import QtQuick; Timer { interval: 80; running: true; repeat: false; onTriggered: menuRoot.close() }', menuRoot);
+                                        }
+                                    }
+                                }
+
+                                Row {
+                                    anchors.left: parent.left
+                                    anchors.leftMargin: Theme.spacingS
+                                    anchors.right: parent.right
+                                    anchors.rightMargin: Theme.spacingS
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    spacing: Theme.spacingXS
+                                    visible: !menuEntry?.isSeparator
+
+                                    Rectangle {
+                                        width: 16
+                                        height: 16
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        visible: menuEntry?.buttonType !== undefined && menuEntry.buttonType !== 0
+                                        radius: menuEntry?.buttonType === 2 ? 8 : 2
+                                        border.width: 1
+                                        border.color: Theme.outline
+                                        color: "transparent"
+
+                                        Rectangle {
+                                            anchors.centerIn: parent
+                                            width: parent.width - 6
+                                            height: parent.height - 6
+                                            radius: parent.radius - 3
+                                            color: Theme.primary
+                                            visible: menuEntry?.checkState === 2
+                                        }
+
+                                        DankIcon {
+                                            anchors.centerIn: parent
+                                            name: "check"
+                                            size: 10
+                                            color: Theme.primaryText
+                                            visible: menuEntry?.buttonType === 1 && menuEntry?.checkState === 2
+                                        }
+                                    }
+
+                                    Item {
+                                        width: 16
+                                        height: 16
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        visible: menuEntry?.icon && menuEntry.icon !== ""
+
+                                        Image {
+                                            anchors.fill: parent
+                                            source: menuEntry?.icon || ""
+                                            sourceSize.width: 16
+                                            sourceSize.height: 16
+                                            fillMode: Image.PreserveAspectFit
+                                            smooth: true
+                                        }
+                                    }
+
+                                    StyledText {
+                                        text: menuEntry?.text || ""
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: (menuEntry?.enabled !== false) ? Theme.surfaceText : Theme.surfaceTextMedium
+                                        elide: Text.ElideRight
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        width: Math.max(150, parent.width - 64)
+                                        wrapMode: Text.NoWrap
+                                    }
+
+                                    Item {
+                                        width: 16
+                                        height: 16
+                                        anchors.verticalCenter: parent.verticalCenter
+
+                                        DankIcon {
+                                            anchors.centerIn: parent
+                                            name: "chevron_right"
+                                            size: 14
+                                            color: Theme.surfaceText
+                                            visible: menuEntry?.hasChildren ?? false
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+
+                    Behavior on scale {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    z: -1
+                    onClicked: menuRoot.close()
+                }
+            }
+        }
+    }
+
+    property var currentTrayMenu: null
+
+    function showForTrayItem(item, anchor, screen, atBottom) {
+        if (currentTrayMenu) {
+            currentTrayMenu.destroy()
+        }
+        currentTrayMenu = trayMenuComponent.createObject(null)
+        if (currentTrayMenu) {
+            currentTrayMenu.showForTrayItem(item, anchor, screen, atBottom)
+        }
+    }
+
+}

Modules/DankBar/SystemUpdate.qml

@@ -0,0 +1,104 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isActive: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property bool hasUpdates: SystemUpdateService.updateCount > 0
+    readonly property bool isChecking: SystemUpdateService.isChecking
+
+    signal clicked()
+
+    width: updaterIcon.width + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = updaterArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    Row {
+        id: updaterIcon
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        DankIcon {
+            id: statusIcon
+
+            anchors.verticalCenter: parent.verticalCenter
+            name: {
+                if (isChecking) return "refresh";
+                if (SystemUpdateService.hasError) return "error";
+                if (hasUpdates) return "system_update_alt";
+                return "check_circle";
+            }
+            size: Theme.iconSize - 6
+            color: {
+                if (SystemUpdateService.hasError) return Theme.error;
+                if (hasUpdates) return Theme.primary;
+                return (updaterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText);
+            }
+
+            RotationAnimation {
+                id: rotationAnimation
+                target: statusIcon
+                property: "rotation"
+                from: 0
+                to: 360
+                duration: 1000
+                running: isChecking
+                loops: Animation.Infinite
+
+                onRunningChanged: {
+                    if (!running) {
+                        statusIcon.rotation = 0
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            id: countText
+
+            anchors.verticalCenter: parent.verticalCenter
+            text: SystemUpdateService.updateCount.toString()
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            visible: hasUpdates && !isChecking
+        }
+    }
+
+    MouseArea {
+        id: updaterArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            root.clicked();
+        }
+    }
+
+}

Modules/DankBar/Vpn.qml

@@ -0,0 +1,113 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    // Passed in by TopBar
+    property int widgetHeight: 28
+    property int barHeight: 32
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    signal toggleVpnPopup()
+
+    width: Theme.iconSize + horizontalPadding * 2
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = clickArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: icon
+
+        name: VpnService.isBusy ? "sync" : (VpnService.connected ? "vpn_lock" : "vpn_key_off")
+        size: Theme.iconSize - 6
+        color: VpnService.connected ? Theme.primary : Theme.surfaceText
+        anchors.centerIn: parent
+
+        RotationAnimation on rotation {
+            running: VpnService.isBusy
+            loops: Animation.Infinite
+            from: 0
+            to: 360
+            duration: 900
+        }
+
+    }
+
+    MouseArea {
+        id: clickArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            root.toggleVpnPopup();
+        }
+    }
+
+    Rectangle {
+        id: tooltip
+
+        width: Math.max(120, tooltipText.contentWidth + Theme.spacingM * 2)
+        height: tooltipText.contentHeight + Theme.spacingS * 2
+        radius: Theme.cornerRadius
+        color: Theme.widgetBaseBackgroundColor
+        border.color: Theme.surfaceVariantAlpha
+        border.width: 1
+        visible: clickArea.containsMouse && !(popupTarget && popupTarget.shouldBeVisible)
+        anchors.bottom: parent.top
+        anchors.bottomMargin: Theme.spacingS
+        anchors.horizontalCenter: parent.horizontalCenter
+        opacity: clickArea.containsMouse ? 1 : 0
+
+        Text {
+            id: tooltipText
+
+            anchors.centerIn: parent
+            text: {
+                if (!VpnService.connected) {
+                    return "VPN Disconnected";
+                }
+
+                const names = VpnService.activeNames || [];
+                if (names.length <= 1) {
+                    return "VPN Connected • " + (names[0] || "");
+                }
+
+                return "VPN Connected • " + names[0] + " +" + (names.length - 1);
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
+            }
+
+        }
+
+    }
+
+}

Modules/DankBar/VpnPopout.qml

@@ -0,0 +1,418 @@
+// No external details import; content inlined for consistency
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+DankPopout {
+    id: root
+
+    property string triggerSection: "right"
+    property var triggerScreen: null
+
+    function setTriggerPosition(x, y, width, section, screen) {
+        triggerX = x;
+        triggerY = y;
+        triggerWidth = width;
+        triggerSection = section;
+        triggerScreen = screen;
+    }
+
+    popupWidth: 360
+    popupHeight: Math.min(Screen.height - 100, contentLoader.item ? contentLoader.item.implicitHeight : 260)
+    triggerX: Screen.width - 380 - Theme.spacingL
+    triggerY: Theme.barHeight - 4 + SettingsData.dankBarSpacing + Theme.popupDistance
+    triggerWidth: 70
+    positioning: "center"
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    content: Component {
+        Rectangle {
+            id: content
+
+            implicitHeight: contentColumn.height + Theme.spacingL * 2
+            color: Theme.popupBackground()
+            radius: Theme.cornerRadius
+            border.color: Theme.outlineMedium
+            border.width: 0
+            antialiasing: true
+            smooth: true
+            focus: true
+            Keys.onPressed: function(event) {
+                if (event.key === Qt.Key_Escape) {
+                    root.close();
+                    event.accepted = true;
+                }
+            }
+
+            // Outer subtle shadow rings to match BatteryPopout
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: -3
+                color: "transparent"
+                radius: parent.radius + 3
+                border.color: Qt.rgba(0, 0, 0, 0.05)
+                border.width: 0
+                z: -3
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: -2
+                color: "transparent"
+                radius: parent.radius + 2
+                border.color: Theme.shadowMedium
+                border.width: 0
+                z: -2
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                color: "transparent"
+                border.color: Theme.outlineStrong
+                border.width: 0
+                radius: parent.radius
+                z: -1
+            }
+
+            Column {
+                id: contentColumn
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingM
+
+                Item {
+                    width: parent.width
+                    height: 32
+
+                    StyledText {
+                        text: "VPN Connections"
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    // Close button (matches BatteryPopout)
+                    Rectangle {
+                        width: 32
+                        height: 32
+                        radius: 16
+                        color: closeArea.containsMouse ? Theme.errorHover : "transparent"
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "close"
+                            size: Theme.iconSize - 4
+                            color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
+                        }
+
+                        MouseArea {
+                            id: closeArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onPressed: root.close()
+                        }
+
+                    }
+
+                }
+
+                // Inlined VPN details
+                Rectangle {
+                    id: vpnDetail
+
+                    width: parent.width
+                    implicitHeight: detailsColumn.implicitHeight + Theme.spacingM * 2
+                    radius: Theme.cornerRadius
+                    color: Qt.rgba(Theme.surfaceContainerHigh.r, Theme.surfaceContainerHigh.g, Theme.surfaceContainerHigh.b, Theme.getContentBackgroundAlpha() * 0.6)
+                    border.color: Theme.outlineStrong
+                    border.width: 0
+                    clip: true
+
+                    Column {
+                        id: detailsColumn
+
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingM
+                        spacing: Theme.spacingS
+
+                        RowLayout {
+                            spacing: Theme.spacingS
+                            width: parent.width
+
+                            StyledText {
+                                text: {
+                                    if (!VpnService.connected) {
+                                        return "Active: None";
+                                    }
+
+                                    const names = VpnService.activeNames || [];
+                                    if (names.length <= 1) {
+                                        return "Active: " + (names[0] || "VPN");
+                                    }
+
+                                    return "Active: " + names[0] + " +" + (names.length - 1);
+                                }
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            Item {
+                                Layout.fillWidth: true
+                                height: 1
+                            }
+
+                            // Removed Quick Connect for clarity
+                            Item {
+                                width: 1
+                                height: 1
+                            }
+
+                            // Disconnect all (shown only when any active)
+                            Rectangle {
+                                height: 28
+                                radius: 14
+                                color: discAllArea.containsMouse ? Theme.errorHover : Theme.surfaceLight
+                                visible: VpnService.connected
+                                width: 130
+                                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                                border.width: 0
+                                border.color: Theme.outlineLight
+
+                                Row {
+                                    anchors.centerIn: parent
+                                    spacing: Theme.spacingXS
+
+                                    DankIcon {
+                                        name: "link_off"
+                                        size: Theme.fontSizeSmall
+                                        color: Theme.surfaceText
+                                    }
+
+                                    StyledText {
+                                        text: "Disconnect"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceText
+                                        font.weight: Font.Medium
+                                    }
+
+                                }
+
+                                MouseArea {
+                                    id: discAllArea
+
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: VpnService.disconnectAllActive()
+                                }
+
+                            }
+
+                        }
+
+                        Rectangle {
+                            height: 1
+                            width: parent.width
+                            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                        }
+
+                        DankFlickable {
+                            width: parent.width
+                            height: 160
+                            contentHeight: listCol.height
+                            clip: true
+
+                            Column {
+                                id: listCol
+
+                                width: parent.width
+                                spacing: Theme.spacingXS
+
+                                Item {
+                                    width: parent.width
+                                    height: VpnService.profiles.length === 0 ? 120 : 0
+                                    visible: height > 0
+
+                                    Column {
+                                        anchors.centerIn: parent
+                                        spacing: Theme.spacingS
+
+                                        DankIcon {
+                                            name: "playlist_remove"
+                                            size: 36
+                                            color: Theme.surfaceVariantText
+                                            anchors.horizontalCenter: parent.horizontalCenter
+                                        }
+
+                                        StyledText {
+                                            text: "No VPN profiles found"
+                                            font.pixelSize: Theme.fontSizeMedium
+                                            color: Theme.surfaceVariantText
+                                            anchors.horizontalCenter: parent.horizontalCenter
+                                        }
+
+                                        StyledText {
+                                            text: "Add a VPN in NetworkManager"
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            color: Theme.surfaceVariantText
+                                            anchors.horizontalCenter: parent.horizontalCenter
+                                        }
+
+                                    }
+
+                                }
+
+                                Repeater {
+                                    model: VpnService.profiles
+
+                                    delegate: Rectangle {
+                                        required property var modelData
+
+                                        width: parent ? parent.width : 300
+                                        height: 50
+                                        radius: Theme.cornerRadius
+                                        color: rowArea.containsMouse ? Theme.primaryHoverLight : (VpnService.isActiveUuid(modelData.uuid) ? Theme.primaryPressed : Theme.surfaceLight)
+                                        border.width: VpnService.isActiveUuid(modelData.uuid) ? 2 : 1
+                                        border.color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.outlineLight
+
+                                        RowLayout {
+                                            anchors.left: parent.left
+                                            anchors.right: parent.right
+                                            anchors.verticalCenter: parent.verticalCenter
+                                            anchors.margins: Theme.spacingM
+                                            spacing: Theme.spacingS
+
+                                            DankIcon {
+                                                name: VpnService.isActiveUuid(modelData.uuid) ? "vpn_lock" : "vpn_key_off"
+                                                size: Theme.iconSize - 4
+                                                color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                                Layout.alignment: Qt.AlignVCenter
+                                            }
+
+                                            Column {
+                                                spacing: 2
+                                                Layout.alignment: Qt.AlignVCenter
+
+                                                StyledText {
+                                                    text: modelData.name
+                                                    font.pixelSize: Theme.fontSizeMedium
+                                                    color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                                }
+
+                                                StyledText {
+                                                    text: {
+                                                        if (modelData.type === "wireguard") {
+                                                            return "WireGuard";
+                                                        }
+
+                                                        const svc = modelData.serviceType || "";
+                                                        if (svc.indexOf("openvpn") !== -1) {
+                                                            return "OpenVPN";
+                                                        }
+
+                                                        if (svc.indexOf("wireguard") !== -1) {
+                                                            return "WireGuard (plugin)";
+                                                        }
+
+                                                        if (svc.indexOf("openconnect") !== -1) {
+                                                            return "OpenConnect";
+                                                        }
+
+                                                        if (svc.indexOf("fortissl") !== -1 || svc.indexOf("forti") !== -1) {
+                                                            return "Fortinet";
+                                                        }
+
+                                                        if (svc.indexOf("strongswan") !== -1) {
+                                                            return "IPsec (strongSwan)";
+                                                        }
+
+                                                        if (svc.indexOf("libreswan") !== -1) {
+                                                            return "IPsec (Libreswan)";
+                                                        }
+
+                                                        if (svc.indexOf("l2tp") !== -1) {
+                                                            return "L2TP/IPsec";
+                                                        }
+
+                                                        if (svc.indexOf("pptp") !== -1) {
+                                                            return "PPTP";
+                                                        }
+
+                                                        if (svc.indexOf("vpnc") !== -1) {
+                                                            return "Cisco (vpnc)";
+                                                        }
+
+                                                        if (svc.indexOf("sstp") !== -1) {
+                                                            return "SSTP";
+                                                        }
+
+                                                        if (svc) {
+                                                            const parts = svc.split('.');
+                                                            return parts[parts.length - 1];
+                                                        }
+                                                        return "VPN";
+                                                    }
+                                                    font.pixelSize: Theme.fontSizeSmall
+                                                    color: Theme.surfaceTextMedium
+                                                }
+
+                                            }
+
+                                            Item {
+                                                Layout.fillWidth: true
+                                                height: 1
+                                            }
+
+                                        }
+
+                                        MouseArea {
+                                            id: rowArea
+
+                                            anchors.fill: parent
+                                            hoverEnabled: true
+                                            cursorShape: Qt.PointingHandCursor
+                                            onClicked: VpnService.toggle(modelData.uuid)
+                                        }
+
+                                    }
+
+                                }
+
+                                Item {
+                                    height: 1
+                                    width: 1
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modules/DankBar/Weather.qml

@@ -0,0 +1,91 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string section: "center"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+
+    signal clicked()
+
+    visible: SettingsData.weatherEnabled
+    width: visible ? Math.min(100, weatherRow.implicitWidth + horizontalPadding * 2) : 0
+    height: widgetHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = weatherArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    Ref {
+        service: WeatherService
+    }
+
+    Row {
+        id: weatherRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        DankIcon {
+            name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
+            size: Theme.iconSize - 4
+            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.fontSizeSmall
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+    }
+
+    MouseArea {
+        id: weatherArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0);
+                const currentScreen = parentScreen || Screen;
+                const screenX = currentScreen.x || 0;
+                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(relativeX, SettingsData.getPopupYPosition(barHeight), width, section, currentScreen);
+            }
+            root.clicked();
+        }
+    }
+
+
+    Behavior on width {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+
+    }
+
+}

Modules/DankBar/WorkspaceSwitcher.qml

@@ -0,0 +1,525 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string screenName: ""
+    property real widgetHeight: 30
+    property int currentWorkspace: {
+        if (CompositorService.isNiri) {
+            return getNiriActiveWorkspace()
+        } else if (CompositorService.isHyprland) {
+            return getHyprlandActiveWorkspace()
+        }
+        return 1
+    }
+    property var workspaceList: {
+        if (CompositorService.isNiri) {
+            const baseList = getNiriWorkspaces()
+            return SettingsData.showWorkspacePadding ? padWorkspaces(baseList) : baseList
+        }
+        if (CompositorService.isHyprland) {
+            const baseList = getHyprlandWorkspaces()
+            return SettingsData.showWorkspacePadding ? padWorkspaces(baseList) : baseList
+        }
+        return [1]
+    }
+
+    function getWorkspaceIcons(ws) {
+        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 {
+            return []
+        }
+
+        const wins = CompositorService.isNiri ? (NiriService.windows || []) : CompositorService.sortedToplevels
+
+
+        const byApp = {}
+        const isActiveWs = CompositorService.isNiri ? NiriService.allWorkspaces.some(ws => ws.id === targetWorkspaceId && ws.is_active) : targetWorkspaceId === root.currentWorkspace
+
+        wins.forEach((w, i) => {
+                         if (!w) {
+                             return
+                         }
+
+                         let winWs = null
+                         if (CompositorService.isNiri) {
+                             winWs = w.workspace_id
+                         } else {
+                             // For Hyprland, we need to find the corresponding Hyprland toplevel to get workspace
+                             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").toLowerCase()
+                         const key = isActiveWs ? `${keyBase}_${i}` : keyBase
+
+                         if (!byApp[key]) {
+                             const moddedId = Paths.moddedAppId(keyBase)
+                             const isSteamApp = moddedId.toLowerCase().includes("steam_app")
+                             const icon = isSteamApp ? "" : Quickshell.iconPath(DesktopEntries.heuristicLookup(moddedId)?.icon, true)
+                             byApp[key] = {
+                                 "type": "icon",
+                                 "icon": icon,
+                                 "isSteamApp": isSteamApp,
+                                 "active": !!(w.activated || (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 || (CompositorService.isNiri && w.is_focused)) {
+                                 byApp[key].active = true
+                             }
+                         }
+                     })
+
+        return Object.values(byApp)
+    }
+
+    function padWorkspaces(list) {
+        const padded = list.slice()
+        const placeholder = CompositorService.isHyprland ? {
+                                                               "id": -1,
+                                                               "name": ""
+                                                           } : -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 getHyprlandWorkspaces() {
+        const workspaces = Hyprland.workspaces?.values || []
+
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            // Show all workspaces on all monitors if per-monitor filtering is disabled
+            const sorted = workspaces.slice().sort((a, b) => a.id - b.id)
+            return sorted.length > 0 ? sorted : [{
+                        "id": 1,
+                        "name": "1"
+                    }]
+        }
+
+        // Filter workspaces for this specific monitor using lastIpcObject.monitor
+        // This matches the approach from the original kyle-config
+        const monitorWorkspaces = workspaces.filter(ws => {
+            return ws.lastIpcObject && ws.lastIpcObject.monitor === root.screenName
+        })
+
+        if (monitorWorkspaces.length === 0) {
+            // Fallback if no workspaces exist for this monitor
+            return [{
+                        "id": 1,
+                        "name": "1"
+                    }]
+        }
+
+        // Return all workspaces for this monitor, sorted by ID
+        return monitorWorkspaces.sort((a, b) => a.id - b.id)
+    }
+
+    function getHyprlandActiveWorkspace() {
+        if (!root.screenName || !SettingsData.workspacesPerMonitor) {
+            return Hyprland.focusedWorkspace ? Hyprland.focusedWorkspace.id : 1
+        }
+
+        // Find the monitor object for this screen
+        const monitors = Hyprland.monitors?.values || []
+        const currentMonitor = monitors.find(monitor => monitor.name === root.screenName)
+
+        if (!currentMonitor) {
+            return 1
+        }
+
+        // Use the monitor's active workspace ID (like original config)
+        return currentMonitor.activeWorkspace?.id ?? 1
+    }
+
+    readonly property real padding: (widgetHeight - workspaceRow.implicitHeight) / 2
+
+    function getRealWorkspaces() {
+        return root.workspaceList.filter(ws => {
+                                             if (CompositorService.isHyprland) {
+                                                 return ws && ws.id !== -1
+                                             }
+                                             return ws !== -1
+                                         })
+    }
+
+    function switchWorkspace(direction) {
+        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 ? (validIndex + 1) % realWorkspaces.length : (validIndex - 1 + realWorkspaces.length) % realWorkspaces.length
+
+            NiriService.switchToWorkspace(realWorkspaces[nextIndex] - 1)
+        } else if (CompositorService.isHyprland) {
+            const command = direction > 0 ? "workspace r+1" : "workspace r-1"
+            Hyprland.dispatch(command)
+        }
+    }
+
+    width: workspaceRow.implicitWidth + padding * 2
+    height: widgetHeight
+    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)
+    }
+    visible: CompositorService.isNiri || CompositorService.isHyprland
+
+    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 direction = deltaY < 0 ? 1 : -1
+
+                     if (isMouseWheel) {
+                         switchWorkspace(direction)
+                     } else {
+                         scrollAccumulator += deltaY
+
+                         if (Math.abs(scrollAccumulator) >= touchpadThreshold) {
+                             const touchDirection = scrollAccumulator < 0 ? 1 : -1
+                             switchWorkspace(touchDirection)
+                             scrollAccumulator = 0
+                         }
+                     }
+
+                     wheel.accepted = true
+                 }
+    }
+
+    Row {
+        id: workspaceRow
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        Repeater {
+            model: root.workspaceList
+
+            Rectangle {
+                id: delegateRoot
+
+                property bool isActive: {
+                    if (CompositorService.isHyprland) {
+                        return modelData && modelData.id === root.currentWorkspace
+                    }
+                    return modelData === root.currentWorkspace
+                }
+                property bool isPlaceholder: {
+                    if (CompositorService.isHyprland) {
+                        return modelData && modelData.id === -1
+                    }
+                    return modelData === -1
+                }
+                property bool isHovered: mouseArea.containsMouse
+
+                property var loadedWorkspaceData: null
+                property var loadedIconData: null
+                property bool loadedHasIcon: false
+                property var loadedIcons: []
+
+                Timer {
+                    id: dataUpdateTimer
+                    interval: 50 // Defer data calculation by 50ms
+                    onTriggered: {
+                        if (isPlaceholder) {
+                            delegateRoot.loadedWorkspaceData = null
+                            delegateRoot.loadedIconData = null
+                            delegateRoot.loadedHasIcon = false
+                            delegateRoot.loadedIcons = []
+                            return
+                        }
+
+                        var wsData = null;
+                        if (CompositorService.isNiri) {
+                            wsData = NiriService.allWorkspaces.find(ws => ws.idx + 1 === modelData && ws.output === root.screenName) || null;
+                        } else if (CompositorService.isHyprland) {
+                            wsData = modelData;
+                        }
+                        delegateRoot.loadedWorkspaceData = wsData;
+
+                        var icData = null;
+                        if (wsData?.name) {
+                            icData = SettingsData.getWorkspaceNameIcon(wsData.name);
+                        }
+                        delegateRoot.loadedIconData = icData;
+                        delegateRoot.loadedHasIcon = icData !== null;
+
+                        if (SettingsData.showWorkspaceApps) {
+                            delegateRoot.loadedIcons = root.getWorkspaceIcons(CompositorService.isHyprland ? modelData : (modelData === -1 ? null : modelData));
+                        } else {
+                            delegateRoot.loadedIcons = [];
+                        }
+                    }
+                }
+
+                function updateAllData() {
+                    dataUpdateTimer.restart()
+                }
+
+                width: {
+                    if (SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
+                        const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons);
+                        const iconsWidth = numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0);
+                        const baseWidth = isActive ? root.widgetHeight * 1.0 + Theme.spacingXS : root.widgetHeight * 0.8;
+                        return baseWidth + iconsWidth;
+                    }
+                    return isActive ? root.widgetHeight * 1.2 : root.widgetHeight * 0.8;
+                }
+                height: SettingsData.showWorkspaceApps ? widgetHeight * 0.8 : widgetHeight * 0.6
+                radius: height / 2
+                color: isActive ? Theme.primary : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha
+
+                Behavior on width {
+                    enabled: (!SettingsData.showWorkspaceApps || SettingsData.maxWorkspaceIcons <= 3)
+                    NumberAnimation {
+                        duration: Theme.mediumDuration
+                        easing.type: Theme.emphasizedEasing
+                    }
+                }
+
+                MouseArea {
+                    id: mouseArea
+
+                    anchors.fill: parent
+                    hoverEnabled: !isPlaceholder
+                    cursorShape: isPlaceholder ? Qt.ArrowCursor : Qt.PointingHandCursor
+                    enabled: !isPlaceholder
+                    onClicked: {
+                        if (isPlaceholder) {
+                            return
+                        }
+
+                        if (CompositorService.isNiri) {
+                            NiriService.switchToWorkspace(modelData - 1)
+                        } else if (CompositorService.isHyprland && modelData?.id) {
+                            Hyprland.dispatch(`workspace ${modelData.id}`)
+                        }
+                    }
+                }
+
+                // Loader for App Icons
+                Loader {
+                    id: appIconsLoader
+                    anchors.fill: parent
+                    active: SettingsData.showWorkspaceApps
+                    sourceComponent: Item {
+                        Row {
+                            id: contentRow
+                            anchors.centerIn: parent
+                            spacing: 4
+                            visible: loadedIcons.length > 0
+
+                            Repeater {
+                                model: 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
+                                        hoverEnabled: true
+                                        anchors.fill: parent
+                                        enabled: isActive
+                                        cursorShape: Qt.PointingHandCursor
+                                        onClicked: {
+                                            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.fontSizeSmall
+                            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: {
+                                const isPlaceholder = CompositorService.isHyprland ? (modelData?.id === -1) : (modelData === -1)
+                                if (isPlaceholder) {
+                                    return index + 1
+                                }
+                                return CompositorService.isHyprland ? (modelData?.id || "") : (modelData - 1);
+                            }
+                            color: isActive ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                            font.pixelSize: Theme.fontSizeSmall
+                            font.weight: (isActive && !isPlaceholder) ? Font.DemiBold : Font.Normal
+                        }
+                    }
+                }
+
+                // --- LOGIC / TRIGGERS ---
+                Component.onCompleted: updateAllData()
+
+                Connections {
+                    target: CompositorService
+                    function onSortedToplevelsChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: NiriService
+                    enabled: CompositorService.isNiri
+                    function onAllWorkspacesChanged() { delegateRoot.updateAllData() }
+                }
+                Connections {
+                    target: SettingsData
+                    function onShowWorkspaceAppsChanged() { delegateRoot.updateAllData() }
+                    function onWorkspaceNameIconsChanged() { delegateRoot.updateAllData() }
+                }
+            }
+        }
+    }
+}