switch hto monorepo structure

quickshell/Modules/DankBar/AutoHideManager.qml

@@ -0,0 +1,179 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    required property var barWindow
+    required property var axis
+    required property var appDrawerLoader
+    required property var dankDashPopoutLoader
+    required property var processListPopoutLoader
+    required property var notificationCenterLoader
+    required property var batteryPopoutLoader
+    required property var vpnPopoutLoader
+    required property var controlCenterLoader
+    required property var clipboardHistoryModalPopup
+    required property var systemUpdateLoader
+    required property var notepadInstance
+
+    property alias reveal: core.reveal
+    property alias autoHide: core.autoHide
+    property alias backgroundTransparency: core.backgroundTransparency
+    property alias hasActivePopout: core.hasActivePopout
+    property alias mouseArea: topBarMouseArea
+
+    Item {
+        id: inputMask
+
+        readonly property int barThickness: barWindow.px(barWindow.effectiveBarThickness + SettingsData.dankBarSpacing)
+
+        readonly property bool showing: SettingsData.dankBarVisible && (core.reveal
+                                 || (CompositorService.isNiri && NiriService.inOverview && SettingsData.dankBarOpenOnOverview)
+                                 || !core.autoHide)
+
+        readonly property int maskThickness: showing ? barThickness : 1
+
+        x: {
+            if (!axis.isVertical) {
+                return 0
+            } else {
+                switch (SettingsData.dankBarPosition) {
+                case SettingsData.Position.Left:  return 0
+                case SettingsData.Position.Right: return parent.width - maskThickness
+                default: return 0
+                }
+            }
+        }
+        y: {
+            if (axis.isVertical) {
+                return 0
+            } else {
+                switch (SettingsData.dankBarPosition) {
+                case SettingsData.Position.Top:    return 0
+                case SettingsData.Position.Bottom: return parent.height - maskThickness
+                default: return 0
+                }
+            }
+        }
+        width: axis.isVertical ? maskThickness : parent.width
+        height: axis.isVertical ? parent.height : maskThickness
+    }
+
+    Region {
+        id: mask
+        item: inputMask
+    }
+
+    property alias maskRegion: mask
+
+    QtObject {
+        id: core
+
+        property real backgroundTransparency: SettingsData.dankBarTransparency
+        property bool autoHide: SettingsData.dankBarAutoHide
+        property bool revealSticky: false
+
+        property bool notepadInstanceVisible: notepadInstance?.isVisible ?? false
+
+        readonly property bool hasActivePopout: {
+            const loaders = [{
+                                 "loader": appDrawerLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": dankDashPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": processListPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": notificationCenterLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": batteryPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": vpnPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": controlCenterLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": clipboardHistoryModalPopup,
+                                 "prop": "visible"
+                             }, {
+                                 "loader": systemUpdateLoader,
+                                 "prop": "shouldBeVisible"
+                             }]
+            return notepadInstanceVisible || loaders.some(item => {
+                if (item.loader) {
+                    return item.loader?.item?.[item.prop]
+                }
+                return false
+            })
+        }
+
+        property bool reveal: {
+            if (CompositorService.isNiri && NiriService.inOverview) {
+                return SettingsData.dankBarOpenOnOverview
+            }
+            return SettingsData.dankBarVisible && (!autoHide || topBarMouseArea.containsMouse || hasActivePopout || revealSticky)
+        }
+
+        onHasActivePopoutChanged: {
+            if (!hasActivePopout && autoHide && !topBarMouseArea.containsMouse) {
+                revealSticky = true
+                revealHold.restart()
+            }
+        }
+    }
+
+    Timer {
+        id: revealHold
+        interval: 250
+        repeat: false
+        onTriggered: core.revealSticky = false
+    }
+
+    Connections {
+        function onDankBarTransparencyChanged() {
+            core.backgroundTransparency = SettingsData.dankBarTransparency
+        }
+
+        target: SettingsData
+    }
+
+    Connections {
+        target: topBarMouseArea
+        function onContainsMouseChanged() {
+            if (topBarMouseArea.containsMouse) {
+                core.revealSticky = true
+                revealHold.stop()
+            } else {
+                if (core.autoHide && !core.hasActivePopout) {
+                    revealHold.restart()
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        id: topBarMouseArea
+        y: !barWindow.isVertical ? (SettingsData.dankBarPosition === SettingsData.Position.Bottom ? parent.height - height : 0) : 0
+        x: barWindow.isVertical ? (SettingsData.dankBarPosition === SettingsData.Position.Right ? parent.width - width : 0) : 0
+        height: !barWindow.isVertical ? barWindow.px(barWindow.effectiveBarThickness + SettingsData.dankBarSpacing) : undefined
+        width: barWindow.isVertical ? barWindow.px(barWindow.effectiveBarThickness + SettingsData.dankBarSpacing) : undefined
+        anchors {
+            left: !barWindow.isVertical ? parent.left : (SettingsData.dankBarPosition === SettingsData.Position.Left ? parent.left : undefined)
+            right: !barWindow.isVertical ? parent.right : (SettingsData.dankBarPosition === SettingsData.Position.Right ? parent.right : undefined)
+            top: barWindow.isVertical ? parent.top : undefined
+            bottom: barWindow.isVertical ? parent.bottom : undefined
+        }
+        hoverEnabled: SettingsData.dankBarAutoHide && !core.reveal
+        acceptedButtons: Qt.NoButton
+        enabled: SettingsData.dankBarAutoHide && !core.reveal
+    }
+}

quickshell/Modules/DankBar/AxisContext.qml

@@ -0,0 +1,57 @@
+import QtQuick
+
+QtObject {
+    id: root
+
+    property string edge: "top"
+
+    readonly property string orientation: isVertical ? "vertical" : "horizontal"
+    readonly property bool isVertical: edge === "left" || edge === "right"
+    readonly property bool isHorizontal: !isVertical
+
+    function primarySize(item) {
+        return isVertical ? item.height : item.width
+    }
+
+    function crossSize(item) {
+        return isVertical ? item.width : item.height
+    }
+
+    function setPrimaryPos(item, value) {
+        if (isVertical) {
+            item.y = value
+        } else {
+            item.x = value
+        }
+    }
+
+    function getPrimaryPos(item) {
+        return isVertical ? item.y : item.x
+    }
+
+    function primaryAnchor(anchors) {
+        return isVertical ? anchors.verticalCenter : anchors.horizontalCenter
+    }
+
+    function crossAnchor(anchors) {
+        return isVertical ? anchors.horizontalCenter : anchors.verticalCenter
+    }
+
+    function outerVisualEdge() {
+        if (edge === "bottom") return "bottom"
+        if (edge === "left") return "right"
+        if (edge === "right") return "left"
+        if (edge === "top") return "top"
+        return "bottom"
+    }
+
+    signal axisEdgeChanged()
+    signal axisOrientationChanged()
+    signal changed()  // Single coalesced signal
+
+    onEdgeChanged: {
+        axisEdgeChanged()
+        axisOrientationChanged()
+        changed()
+    }
+}

quickshell/Modules/DankBar/BarCanvas.qml

@@ -0,0 +1,410 @@
+import QtQuick
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    required property var barWindow
+    required property var axis
+
+    anchors.fill: parent
+
+    anchors.left: parent.left
+    anchors.top: parent.top
+    anchors.leftMargin: -(SettingsData.dankBarGothCornersEnabled && axis.isVertical && axis.edge === "right" ? barWindow._wingR : 0)
+    anchors.rightMargin: -(SettingsData.dankBarGothCornersEnabled && axis.isVertical && axis.edge === "left" ? barWindow._wingR : 0)
+    anchors.topMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "bottom" ? barWindow._wingR : 0)
+    anchors.bottomMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "top" ? barWindow._wingR : 0)
+
+    readonly property real dpr: CompositorService.getScreenScale(barWindow.screen)
+
+    function requestRepaint() {
+        debounceTimer.restart()
+    }
+
+    Timer {
+        id: debounceTimer
+        interval: 50
+        repeat: false
+        onTriggered: {
+            barShape.requestPaint()
+            barTint.requestPaint()
+            barBorder.requestPaint()
+        }
+    }
+
+    Canvas {
+        id: barShape
+        anchors.fill: parent
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: Theme.px(root.width, dpr)
+        readonly property real correctHeight: Theme.px(root.height, dpr)
+        canvasSize: Qt.size(correctWidth, correctHeight)
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? Theme.px(barWindow._wingR, dpr) : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.px(Theme.cornerRadius, dpr)
+
+        onWingChanged: root.requestRepaint()
+        onRtChanged: root.requestRepaint()
+        onCorrectWidthChanged: root.requestRepaint()
+        onCorrectHeightChanged: root.requestRepaint()
+        onVisibleChanged: if (visible) root.requestRepaint()
+        Component.onCompleted: root.requestRepaint()
+
+        Connections {
+            target: root
+            function onDprChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: barWindow
+            function on_BgColorChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { root.requestRepaint() }
+            function onSurfaceContainerChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: SettingsData
+            function onDankBarGothCornerRadiusOverrideChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusValueChanged() { root.requestRepaint() }
+        }
+
+        onPaint: {
+            const ctx = getContext("2d")
+            const W = barWindow.isVertical ? correctHeight : correctWidth
+            const H_raw = barWindow.isVertical ? correctWidth : correctHeight
+            const R = wing
+            const RT = rt
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            function drawTopPath() {
+                ctx.beginPath()
+                ctx.moveTo(RT, 0)
+                ctx.lineTo(W - RT, 0)
+                ctx.arcTo(W, 0, W, RT, RT)
+                ctx.lineTo(W, H)
+
+                if (R > 0) {
+                    ctx.lineTo(W, H + R)
+                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                    ctx.lineTo(R, H)
+                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                    ctx.lineTo(0, H + R)
+                } else {
+                    ctx.lineTo(W, H - RT)
+                    ctx.arcTo(W, H, W - RT, H, RT)
+                    ctx.lineTo(RT, H)
+                    ctx.arcTo(0, H, 0, H - RT, RT)
+                }
+
+                ctx.lineTo(0, RT)
+                ctx.arcTo(0, 0, RT, 0, RT)
+                ctx.closePath()
+            }
+
+            ctx.reset()
+            ctx.clearRect(0, 0, W, H_raw)
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            drawTopPath()
+            ctx.restore()
+
+            ctx.fillStyle = barWindow._bgColor
+            ctx.fill()
+        }
+    }
+
+    Canvas {
+        id: barTint
+        anchors.fill: parent
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: Theme.px(root.width, dpr)
+        readonly property real correctHeight: Theme.px(root.height, dpr)
+        canvasSize: Qt.size(correctWidth, correctHeight)
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? Theme.px(barWindow._wingR, dpr) : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.px(Theme.cornerRadius, dpr)
+        property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
+
+        onWingChanged: root.requestRepaint()
+        onRtChanged: root.requestRepaint()
+        onAlphaTintChanged: root.requestRepaint()
+        onCorrectWidthChanged: root.requestRepaint()
+        onCorrectHeightChanged: root.requestRepaint()
+        onVisibleChanged: if (visible) root.requestRepaint()
+        Component.onCompleted: root.requestRepaint()
+
+        Connections {
+            target: root
+            function onDprChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: barWindow
+            function on_BgColorChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { root.requestRepaint() }
+            function onSurfaceChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: SettingsData
+            function onDankBarGothCornerRadiusOverrideChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusValueChanged() { root.requestRepaint() }
+        }
+
+        onPaint: {
+            const ctx = getContext("2d")
+            const W = barWindow.isVertical ? correctHeight : correctWidth
+            const H_raw = barWindow.isVertical ? correctWidth : correctHeight
+            const R = wing
+            const RT = rt
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            function drawTopPath() {
+                ctx.beginPath()
+                ctx.moveTo(RT, 0)
+                ctx.lineTo(W - RT, 0)
+                ctx.arcTo(W, 0, W, RT, RT)
+                ctx.lineTo(W, H)
+
+                if (R > 0) {
+                    ctx.lineTo(W, H + R)
+                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                    ctx.lineTo(R, H)
+                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                    ctx.lineTo(0, H + R)
+                } else {
+                    ctx.lineTo(W, H - RT)
+                    ctx.arcTo(W, H, W - RT, H, RT)
+                    ctx.lineTo(RT, H)
+                    ctx.arcTo(0, H, 0, H - RT, RT)
+                }
+
+                ctx.lineTo(0, RT)
+                ctx.arcTo(0, 0, RT, 0, RT)
+                ctx.closePath()
+            }
+
+            ctx.reset()
+            ctx.clearRect(0, 0, W, H_raw)
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            drawTopPath()
+            ctx.restore()
+
+            ctx.fillStyle = Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, alphaTint)
+            ctx.fill()
+        }
+    }
+
+    Canvas {
+        id: barBorder
+        anchors.fill: parent
+        visible: SettingsData.dankBarBorderEnabled
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: Theme.px(root.width, dpr)
+        readonly property real correctHeight: Theme.px(root.height, dpr)
+        canvasSize: Qt.size(correctWidth, correctHeight)
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? Theme.px(barWindow._wingR, dpr) : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.px(Theme.cornerRadius, dpr)
+        property bool borderEnabled: SettingsData.dankBarBorderEnabled
+
+        antialiasing: rt > 0 || wing > 0
+
+        onWingChanged: root.requestRepaint()
+        onRtChanged: root.requestRepaint()
+        onBorderEnabledChanged: root.requestRepaint()
+        onCorrectWidthChanged: root.requestRepaint()
+        onCorrectHeightChanged: root.requestRepaint()
+        onVisibleChanged: if (visible) root.requestRepaint()
+        Component.onCompleted: root.requestRepaint()
+
+        Connections {
+            target: root
+            function onDprChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { root.requestRepaint() }
+            function onSurfaceTextChanged() { root.requestRepaint() }
+            function onPrimaryChanged() { root.requestRepaint() }
+            function onSecondaryChanged() { root.requestRepaint() }
+            function onOutlineChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: SettingsData
+            function onDankBarBorderColorChanged() { root.requestRepaint() }
+            function onDankBarBorderOpacityChanged() { root.requestRepaint() }
+            function onDankBarBorderThicknessChanged() { root.requestRepaint() }
+            function onDankBarSpacingChanged() { root.requestRepaint() }
+            function onDankBarSquareCornersChanged() { root.requestRepaint() }
+            function onDankBarTransparencyChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusOverrideChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusValueChanged() { root.requestRepaint() }
+        }
+
+        onPaint: {
+            if (!borderEnabled) return
+
+            const ctx = getContext("2d")
+            const W = barWindow.isVertical ? correctHeight : correctWidth
+            const H_raw = barWindow.isVertical ? correctWidth : correctHeight
+            const R = wing
+            const RT = rt
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            const spacing = SettingsData.dankBarSpacing
+            const hasEdgeGap = spacing > 0 || RT > 0
+
+            ctx.reset()
+            ctx.clearRect(0, 0, W, H_raw)
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            const uiThickness = Math.max(1, SettingsData.dankBarBorderThickness ?? 1)
+            const devThickness = Math.max(1, Math.round(Theme.px(uiThickness, dpr)))
+
+            const key = SettingsData.dankBarBorderColor || "surfaceText"
+            const base = (key === "surfaceText") ? Theme.surfaceText
+                       : (key === "primary") ? Theme.primary
+                       : Theme.secondary
+            const color = Theme.withAlpha(base, SettingsData.dankBarBorderOpacity ?? 1.0)
+
+            ctx.globalCompositeOperation = "source-over"
+            ctx.fillStyle = color
+
+            function drawTopBorder() {
+                if (!hasEdgeGap) {
+                    ctx.beginPath()
+                    ctx.rect(0, H - devThickness, W, devThickness)
+                    ctx.fill()
+                } else {
+                    const thk = devThickness
+                    const RTi = Math.max(0, RT - thk)
+                    const Ri = Math.max(0, R - thk)
+
+                    ctx.beginPath()
+
+                    if (R > 0 && Ri > 0) {
+                        ctx.moveTo(RT, 0)
+                        ctx.lineTo(W - RT, 0)
+                        ctx.arcTo(W, 0, W, RT, RT)
+                        ctx.lineTo(W, H)
+                        ctx.lineTo(W, H + R)
+                        ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                        ctx.lineTo(R, H)
+                        ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                        ctx.lineTo(0, H + R)
+                        ctx.lineTo(0, RT)
+                        ctx.arcTo(0, 0, RT, 0, RT)
+                        ctx.closePath()
+
+                        ctx.moveTo(RT, thk)
+                        ctx.arcTo(thk, thk, thk, RT, RTi)
+                        ctx.lineTo(thk, H + R)
+                        ctx.arc(R, H + R, Ri, -Math.PI, -Math.PI / 2, false)
+                        ctx.lineTo(W - R, H + thk)
+                        ctx.arc(W - R, H + R, Ri, -Math.PI / 2, 0, false)
+                        ctx.lineTo(W - thk, H + R)
+                        ctx.lineTo(W - thk, RT)
+                        ctx.arcTo(W - thk, thk, W - RT, thk, RTi)
+                        ctx.lineTo(RT, thk)
+                        ctx.closePath()
+                    } else {
+                        ctx.moveTo(RT, 0)
+                        ctx.lineTo(W - RT, 0)
+                        ctx.arcTo(W, 0, W, RT, RT)
+                        ctx.lineTo(W, H - RT)
+                        ctx.arcTo(W, H, W - RT, H, RT)
+                        ctx.lineTo(RT, H)
+                        ctx.arcTo(0, H, 0, H - RT, RT)
+                        ctx.lineTo(0, RT)
+                        ctx.arcTo(0, 0, RT, 0, RT)
+                        ctx.closePath()
+
+                        ctx.moveTo(RT, thk)
+                        ctx.arcTo(thk, thk, thk, RT, RTi)
+                        ctx.lineTo(thk, H - RT)
+                        ctx.arcTo(thk, H - thk, RT, H - thk, RTi)
+                        ctx.lineTo(W - RT, H - thk)
+                        ctx.arcTo(W - thk, H - thk, W - thk, H - RT, RTi)
+                        ctx.lineTo(W - thk, RT)
+                        ctx.arcTo(W - thk, thk, W - RT, thk, RTi)
+                        ctx.lineTo(RT, thk)
+                        ctx.closePath()
+                    }
+
+                    ctx.fill("evenodd")
+                }
+            }
+
+            drawTopBorder()
+            ctx.restore()
+        }
+    }
+}

quickshell/Modules/DankBar/CenterSection.qml

@@ -0,0 +1,499 @@
+import QtQuick
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    property var widgetsModel: null
+    property var components: null
+    property bool noBackground: false
+    required property var axis
+    property string section: "center"
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property bool overrideAxisLayout: false
+    property bool forceVerticalLayout: false
+
+    readonly property bool isVertical: overrideAxisLayout ? forceVerticalLayout : (axis?.isVertical ?? false)
+    readonly property real spacing: noBackground ? 2 : Theme.spacingXS
+
+    property var centerWidgets: []
+    property int totalWidgets: 0
+    property real totalSize: 0
+
+    function updateLayout() {
+        if ((isVertical ? height : width) <= 0 || !visible) {
+            return
+        }
+
+        centerWidgets = []
+        totalWidgets = 0
+        totalSize = 0
+
+        let configuredWidgets = 0
+        let configuredMiddleWidget = null
+        let configuredLeftWidget = null
+        let configuredRightWidget = null
+
+        for (var i = 0; i < centerRepeater.count; i++) {
+            const item = centerRepeater.itemAt(i)
+            if (item && getWidgetVisible(item.widgetId)) {
+                configuredWidgets++
+            }
+        }
+
+        const isOddConfigured = configuredWidgets % 2 === 1
+        const configuredMiddlePos = Math.floor(configuredWidgets / 2)
+        const configuredLeftPos = isOddConfigured ? -1 : ((configuredWidgets / 2) - 1)
+        const configuredRightPos = isOddConfigured ? -1 : (configuredWidgets / 2)
+        let currentConfigIndex = 0
+
+        for (var i = 0; i < centerRepeater.count; i++) {
+            const item = centerRepeater.itemAt(i)
+            if (item && getWidgetVisible(item.widgetId)) {
+                if (isOddConfigured && currentConfigIndex === configuredMiddlePos && item.active && item.item) {
+                    configuredMiddleWidget = item.item
+                }
+                if (!isOddConfigured && currentConfigIndex === configuredLeftPos && item.active && item.item) {
+                    configuredLeftWidget = item.item
+                }
+                if (!isOddConfigured && currentConfigIndex === configuredRightPos && item.active && item.item) {
+                    configuredRightWidget = item.item
+                }
+                if (item.active && item.item) {
+                    centerWidgets.push(item.item)
+                    totalWidgets++
+                    totalSize += isVertical ? item.item.height : item.item.width
+                }
+                currentConfigIndex++
+            }
+        }
+
+        if (totalWidgets === 0) {
+            return
+        }
+
+        if (totalWidgets > 1) {
+            totalSize += spacing * (totalWidgets - 1)
+        }
+
+        positionWidgets(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget)
+    }
+
+    function positionWidgets(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget) {
+        const parentCenter = (isVertical ? height : width) / 2
+        const isOddConfigured = configuredWidgets % 2 === 1
+
+        centerWidgets.forEach(widget => {
+            if (isVertical) {
+                widget.anchors.verticalCenter = undefined
+            } else {
+                widget.anchors.horizontalCenter = undefined
+            }
+        })
+
+        if (isOddConfigured && configuredMiddleWidget) {
+            const middleWidget = configuredMiddleWidget
+            const middleIndex = centerWidgets.indexOf(middleWidget)
+            const middleSize = isVertical ? middleWidget.height : middleWidget.width
+
+            if (isVertical) {
+                middleWidget.y = parentCenter - (middleSize / 2)
+            } else {
+                middleWidget.x = parentCenter - (middleSize / 2)
+            }
+
+            let currentPos = isVertical ? middleWidget.y : middleWidget.x
+            for (var i = middleIndex - 1; i >= 0; i--) {
+                const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                currentPos -= (spacing + size)
+                if (isVertical) {
+                    centerWidgets[i].y = currentPos
+                } else {
+                    centerWidgets[i].x = currentPos
+                }
+            }
+
+            currentPos = (isVertical ? middleWidget.y : middleWidget.x) + middleSize
+            for (var i = middleIndex + 1; i < totalWidgets; i++) {
+                currentPos += spacing
+                if (isVertical) {
+                    centerWidgets[i].y = currentPos
+                } else {
+                    centerWidgets[i].x = currentPos
+                }
+                currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
+            }
+        } else {
+            if (totalWidgets === 1) {
+                const widget = centerWidgets[0]
+                const size = isVertical ? widget.height : widget.width
+                if (isVertical) {
+                    widget.y = parentCenter - (size / 2)
+                } else {
+                    widget.x = parentCenter - (size / 2)
+                }
+                return
+            }
+
+            if (!configuredLeftWidget || !configuredRightWidget) {
+                if (totalWidgets % 2 === 1) {
+                    const middleIndex = Math.floor(totalWidgets / 2)
+                    const middleWidget = centerWidgets[middleIndex]
+
+                    if (!middleWidget) {
+                        return
+                    }
+
+                    const middleSize = isVertical ? middleWidget.height : middleWidget.width
+
+                    if (isVertical) {
+                        middleWidget.y = parentCenter - (middleSize / 2)
+                    } else {
+                        middleWidget.x = parentCenter - (middleSize / 2)
+                    }
+
+                    let currentPos = isVertical ? middleWidget.y : middleWidget.x
+                    for (var i = middleIndex - 1; i >= 0; i--) {
+                        const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                        currentPos -= (spacing + size)
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
+                        } else {
+                            centerWidgets[i].x = currentPos
+                        }
+                    }
+
+                    currentPos = (isVertical ? middleWidget.y : middleWidget.x) + middleSize
+                    for (var i = middleIndex + 1; i < totalWidgets; i++) {
+                        currentPos += spacing
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
+                        } else {
+                            centerWidgets[i].x = currentPos
+                        }
+                        currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                    }
+                } else {
+                    const leftIndex = (totalWidgets / 2) - 1
+                    const rightIndex = totalWidgets / 2
+                    const fallbackLeft = centerWidgets[leftIndex]
+                    const fallbackRight = centerWidgets[rightIndex]
+
+                    if (!fallbackLeft || !fallbackRight) {
+                        return
+                    }
+
+                    const halfSpacing = spacing / 2
+                    const leftSize = isVertical ? fallbackLeft.height : fallbackLeft.width
+
+                    if (isVertical) {
+                        fallbackLeft.y = parentCenter - halfSpacing - leftSize
+                        fallbackRight.y = parentCenter + halfSpacing
+                    } else {
+                        fallbackLeft.x = parentCenter - halfSpacing - leftSize
+                        fallbackRight.x = parentCenter + halfSpacing
+                    }
+
+                    let currentPos = isVertical ? fallbackLeft.y : fallbackLeft.x
+                    for (var i = leftIndex - 1; i >= 0; i--) {
+                        const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                        currentPos -= (spacing + size)
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
+                        } else {
+                            centerWidgets[i].x = currentPos
+                        }
+                    }
+
+                    currentPos = (isVertical ? fallbackRight.y + fallbackRight.height : fallbackRight.x + fallbackRight.width)
+                    for (var i = rightIndex + 1; i < totalWidgets; i++) {
+                        currentPos += spacing
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
+                        } else {
+                            centerWidgets[i].x = currentPos
+                        }
+                        currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                    }
+                }
+                return
+            }
+
+            const leftWidget = configuredLeftWidget
+            const rightWidget = configuredRightWidget
+            const leftIndex = centerWidgets.indexOf(leftWidget)
+            const rightIndex = centerWidgets.indexOf(rightWidget)
+            const halfSpacing = spacing / 2
+            const leftSize = isVertical ? leftWidget.height : leftWidget.width
+
+            if (isVertical) {
+                leftWidget.y = parentCenter - halfSpacing - leftSize
+                rightWidget.y = parentCenter + halfSpacing
+            } else {
+                leftWidget.x = parentCenter - halfSpacing - leftSize
+                rightWidget.x = parentCenter + halfSpacing
+            }
+
+            let currentPos = isVertical ? leftWidget.y : leftWidget.x
+            for (var i = leftIndex - 1; i >= 0; i--) {
+                const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                currentPos -= (spacing + size)
+                if (isVertical) {
+                    centerWidgets[i].y = currentPos
+                } else {
+                    centerWidgets[i].x = currentPos
+                }
+            }
+
+            currentPos = (isVertical ? rightWidget.y + rightWidget.height : rightWidget.x + rightWidget.width)
+            for (var i = rightIndex + 1; i < totalWidgets; i++) {
+                currentPos += spacing
+                if (isVertical) {
+                    centerWidgets[i].y = currentPos
+                } else {
+                    centerWidgets[i].x = currentPos
+                }
+                currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
+            }
+        }
+    }
+
+    function getWidgetVisible(widgetId) {
+        const widgetVisibility = {
+            "cpuUsage": DgopService.dgopAvailable,
+            "memUsage": DgopService.dgopAvailable,
+            "cpuTemp": DgopService.dgopAvailable,
+            "gpuTemp": DgopService.dgopAvailable,
+            "network_speed_monitor": DgopService.dgopAvailable
+        }
+        return widgetVisibility[widgetId] ?? true
+    }
+
+    function getWidgetComponent(widgetId) {
+        // Build dynamic component map including plugins
+        let baseMap = {
+            "launcherButton": "launcherButtonComponent",
+            "workspaceSwitcher": "workspaceSwitcherComponent",
+            "focusedWindow": "focusedWindowComponent",
+            "runningApps": "runningAppsComponent",
+            "clock": "clockComponent",
+            "music": "mediaComponent",
+            "weather": "weatherComponent",
+            "systemTray": "systemTrayComponent",
+            "privacyIndicator": "privacyIndicatorComponent",
+            "clipboard": "clipboardComponent",
+            "cpuUsage": "cpuUsageComponent",
+            "memUsage": "memUsageComponent",
+            "diskUsage": "diskUsageComponent",
+            "cpuTemp": "cpuTempComponent",
+            "gpuTemp": "gpuTempComponent",
+            "notificationButton": "notificationButtonComponent",
+            "battery": "batteryComponent",
+            "controlCenterButton": "controlCenterButtonComponent",
+            "idleInhibitor": "idleInhibitorComponent",
+            "spacer": "spacerComponent",
+            "separator": "separatorComponent",
+            "network_speed_monitor": "networkComponent",
+            "keyboard_layout_name": "keyboardLayoutNameComponent",
+            "vpn": "vpnComponent",
+            "notepadButton": "notepadButtonComponent",
+            "colorPicker": "colorPickerComponent",
+            "systemUpdate": "systemUpdateComponent"
+        }
+
+        // For built-in components, get from components property
+        const componentKey = baseMap[widgetId]
+        if (componentKey && root.components[componentKey]) {
+            return root.components[componentKey]
+        }
+
+        // For plugin components, get from PluginService
+        var parts = widgetId.split(":")
+        var pluginId = parts[0]
+        let pluginComponents = PluginService.getWidgetComponents()
+        return pluginComponents[pluginId] || null
+    }
+
+    height: parent.height
+    width: parent.width
+    anchors.centerIn: parent
+
+    Timer {
+        id: layoutTimer
+        interval: 0
+        repeat: false
+        onTriggered: root.updateLayout()
+    }
+
+    Component.onCompleted: {
+        layoutTimer.restart()
+    }
+
+    onWidthChanged: {
+        if (width > 0) {
+            layoutTimer.restart()
+        }
+    }
+
+    onHeightChanged: {
+        if (height > 0) {
+            layoutTimer.restart()
+        }
+    }
+
+    onVisibleChanged: {
+        if (visible && (isVertical ? height : width) > 0) {
+            layoutTimer.restart()
+        }
+    }
+
+    Repeater {
+        id: centerRepeater
+        model: root.widgetsModel
+
+
+        Loader {
+            property string widgetId: model.widgetId
+            property var widgetData: model
+            property int spacerSize: model.size || 20
+
+            anchors.verticalCenter: !root.isVertical ? parent.verticalCenter : undefined
+            anchors.horizontalCenter: root.isVertical ? parent.horizontalCenter : undefined
+            active: root.getWidgetVisible(model.widgetId) && (model.widgetId !== "music" || MprisController.activePlayer !== null)
+            sourceComponent: root.getWidgetComponent(model.widgetId)
+            opacity: (model.enabled !== false) ? 1 : 0
+            asynchronous: false
+
+            onLoaded: {
+                if (!item) {
+                    return
+                }
+                item.widthChanged.connect(() => layoutTimer.restart())
+                item.heightChanged.connect(() => layoutTimer.restart())
+                if (root.axis && "axis" in item) {
+                    item.axis = Qt.binding(() => root.axis)
+                }
+                if (root.axis && "isVertical" in item) {
+                    try {
+                        item.isVertical = Qt.binding(() => root.axis.isVertical)
+                    } catch (e) {
+                    }
+                }
+
+                // Inject properties for plugin widgets
+                if ("section" in item) {
+                    item.section = root.section
+                }
+                if ("parentScreen" in item) {
+                    item.parentScreen = Qt.binding(() => root.parentScreen)
+                }
+                if ("widgetThickness" in item) {
+                    item.widgetThickness = Qt.binding(() => root.widgetThickness)
+                }
+                if ("barThickness" in item) {
+                    item.barThickness = Qt.binding(() => root.barThickness)
+                }
+                if ("sectionSpacing" in item) {
+                    item.sectionSpacing = Qt.binding(() => root.spacing)
+                }
+
+                if ("isFirst" in item) {
+                    item.isFirst = Qt.binding(() => {
+                        for (var i = 0; i < centerRepeater.count; i++) {
+                            const checkItem = centerRepeater.itemAt(i)
+                            if (checkItem && checkItem.active && checkItem.item) {
+                                return checkItem.item === item
+                            }
+                        }
+                        return false
+                    })
+                }
+
+                if ("isLast" in item) {
+                    item.isLast = Qt.binding(() => {
+                        for (var i = centerRepeater.count - 1; i >= 0; i--) {
+                            const checkItem = centerRepeater.itemAt(i)
+                            if (checkItem && checkItem.active && checkItem.item) {
+                                return checkItem.item === item
+                            }
+                        }
+                        return false
+                    })
+                }
+
+                if ("isLeftBarEdge" in item) {
+                    item.isLeftBarEdge = false
+                }
+                if ("isRightBarEdge" in item) {
+                    item.isRightBarEdge = false
+                }
+                if ("isTopBarEdge" in item) {
+                    item.isTopBarEdge = false
+                }
+                if ("isBottomBarEdge" in item) {
+                    item.isBottomBarEdge = false
+                }
+
+                if (item.pluginService !== undefined) {
+                    var parts = model.widgetId.split(":")
+                    var pluginId = parts[0]
+                    var variantId = parts.length > 1 ? parts[1] : null
+
+                    if (item.pluginId !== undefined) {
+                        item.pluginId = pluginId
+                    }
+                    if (item.variantId !== undefined) {
+                        item.variantId = variantId
+                    }
+                    if (item.variantData !== undefined && variantId) {
+                        item.variantData = PluginService.getPluginVariantData(pluginId, variantId)
+                    }
+                    item.pluginService = PluginService
+                }
+
+                if (item.popoutService !== undefined) {
+                    item.popoutService = PopoutService
+                }
+
+                layoutTimer.restart()
+            }
+
+            onActiveChanged: {
+                layoutTimer.restart()
+            }
+        }
+    }
+
+    Connections {
+        target: widgetsModel
+        function onCountChanged() {
+            layoutTimer.restart()
+        }
+    }
+
+    // Listen for plugin changes and refresh components
+    Connections {
+        target: PluginService
+        function onPluginLoaded(pluginId) {
+            // Force refresh of component lookups
+            for (var i = 0; i < centerRepeater.count; i++) {
+                var item = centerRepeater.itemAt(i)
+                if (item && item.widgetId.startsWith(pluginId)) {
+                    item.sourceComponent = root.getWidgetComponent(item.widgetId)
+                }
+            }
+        }
+        function onPluginUnloaded(pluginId) {
+            // Force refresh of component lookups
+            for (var i = 0; i < centerRepeater.count; i++) {
+                var item = centerRepeater.itemAt(i)
+                if (item && item.widgetId.startsWith(pluginId)) {
+                    item.sourceComponent = root.getWidgetComponent(item.widgetId)
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/LeftSection.qml

@@ -0,0 +1,100 @@
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    property var widgetsModel: null
+    property var components: null
+    property bool noBackground: false
+    required property var axis
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property bool overrideAxisLayout: false
+    property bool forceVerticalLayout: false
+
+    readonly property bool isVertical: overrideAxisLayout ? forceVerticalLayout : (axis?.isVertical ?? false)
+
+    implicitHeight: layoutLoader.item ? (layoutLoader.item.implicitHeight || layoutLoader.item.height) : 0
+    implicitWidth: layoutLoader.item ? (layoutLoader.item.implicitWidth || layoutLoader.item.width) : 0
+
+    Loader {
+        id: layoutLoader
+        anchors.fill: parent
+        sourceComponent: root.isVertical ? columnComp : rowComp
+    }
+
+    Component {
+        id: rowComp
+        Row {
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
+            Repeater {
+                id: rowRepeater
+                model: root.widgetsModel
+                Item {
+                    readonly property real rowSpacing: parent.widgetSpacing
+                    width: widgetLoader.item ? widgetLoader.item.width : 0
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.verticalCenter: parent.verticalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: false
+                        axis: root.axis
+                        section: "left"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === rowRepeater.count - 1
+                        sectionSpacing: parent.rowSpacing
+                        isLeftBarEdge: true
+                        isRightBarEdge: false
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: columnComp
+        Column {
+            width: Math.max(parent.width, 200)
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
+            Repeater {
+                id: columnRepeater
+                model: root.widgetsModel
+                Item {
+                    readonly property real columnSpacing: parent.widgetSpacing
+                    width: parent.width
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: true
+                        axis: root.axis
+                        section: "left"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === columnRepeater.count - 1
+                        sectionSpacing: parent.columnSpacing
+                        isTopBarEdge: true
+                        isBottomBarEdge: false
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/Popouts/BatteryPopout.qml

@@ -0,0 +1,648 @@
+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
+
+    layerNamespace: "dms:battery"
+
+    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
+    triggerWidth: 70
+    positioning: ""
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    content: Component {
+        Rectangle {
+            id: batteryContent
+
+            implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            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.batteryStatus
+                                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
+                                visible: BatteryService.batteryAvailable
+                                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.top: parent.top
+
+                        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.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                        border.width: 0
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: I18n.tr("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.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                        border.width: 0
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: I18n.tr("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
+                            }
+                        }
+                    }
+                }
+
+                // Individual battery details for multiple batteries
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingS
+                    visible: !BatteryService.usePreferred && BatteryService.batteries.length > 1
+
+                    StyledText {
+                        text: I18n.tr("Individual Batteries")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceTextMedium
+                        font.weight: Font.Medium
+                    }
+
+                    Repeater {
+                        model: ScriptModel {
+                            values: BatteryService.batteries
+                        }
+
+                        delegate: StyledRect {
+                            required property var modelData
+                            required property int index
+
+                            width: parent.width
+                            height: batteryColumn.implicitHeight + Theme.spacingM * 2
+                            radius: Theme.cornerRadius
+                            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                            border.width: 0
+
+                            Column {
+                                id: batteryColumn
+                                anchors.fill: parent
+                                anchors.margins: Theme.spacingM
+                                spacing: Theme.spacingS
+
+                                // Top row: name and percentage
+                                Row {
+                                    width: parent.width
+                                    spacing: Theme.spacingM
+
+                                    Column {
+                                        spacing: Theme.spacingXS
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        width: parent.width - percentText.width - chargingIcon.width - Theme.spacingM * 2
+
+                                        StyledText {
+                                            text: modelData.model || `Battery ${index + 1}`
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            color: Theme.surfaceText
+                                            font.weight: Font.Medium
+                                            elide: Text.ElideRight
+                                            width: parent.width
+                                        }
+
+                                        StyledText {
+                                            text: modelData.nativePath
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            color: Theme.surfaceTextMedium
+                                            elide: Text.ElideMiddle
+                                            width: parent.width
+                                        }
+                                    }
+
+                                    Item {
+                                        width: 1
+                                        height: parent.height
+                                    }
+
+                                    StyledText {
+                                        id: percentText
+                                        text: `${Math.round(100 * modelData.percentage)}%`
+                                        font.pixelSize: Theme.fontSizeMedium
+                                        color: Theme.surfaceText
+                                        font.weight: Font.Bold
+                                        anchors.verticalCenter: parent.verticalCenter
+                                    }
+
+                                    DankIcon {
+                                        id: chargingIcon
+                                        name: modelData.state === UPowerDeviceState.Charging ? "bolt" : ""
+                                        size: Theme.iconSizeSmall
+                                        color: Theme.primary
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        visible: modelData.state === UPowerDeviceState.Charging
+                                    }
+                                }
+
+                                // Bottom row: Health, Capacity and Time
+                                Flow {
+                                    width: parent.width
+                                    spacing: Theme.spacingS
+
+                                    StyledRect {
+                                        width: (parent.width - Theme.spacingS * 2) / 3
+                                        height: 48
+                                        radius: Theme.cornerRadius
+                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                                        border.width: 0
+
+                                        Column {
+                                            anchors.centerIn: parent
+                                            spacing: 2
+
+                                            StyledText {
+                                                text: I18n.tr("Health")
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                color: Theme.surfaceTextMedium
+                                                font.weight: Font.Medium
+                                                anchors.horizontalCenter: parent.horizontalCenter
+                                            }
+
+                                            StyledText {
+                                                text: {
+                                                    if (!modelData.healthSupported || modelData.healthPercentage <= 0)
+                                                        return "N/A"
+                                                    return `${Math.round(modelData.healthPercentage)}%`
+                                                }
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                color: {
+                                                    if (!modelData.healthSupported || modelData.healthPercentage <= 0)
+                                                        return Theme.surfaceText
+                                                    return modelData.healthPercentage < 80 ? Theme.error : Theme.surfaceText
+                                                }
+                                                font.weight: Font.Bold
+                                                anchors.horizontalCenter: parent.horizontalCenter
+                                            }
+                                        }
+                                    }
+
+                                    StyledRect {
+                                        width: (parent.width - Theme.spacingS * 2) / 3
+                                        height: 48
+                                        radius: Theme.cornerRadius
+                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                                        border.width: 0
+
+                                        Column {
+                                            anchors.centerIn: parent
+                                            spacing: 2
+
+                                            StyledText {
+                                                text: I18n.tr("Capacity")
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                color: Theme.surfaceTextMedium
+                                                font.weight: Font.Medium
+                                                anchors.horizontalCenter: parent.horizontalCenter
+                                            }
+
+                                            StyledText {
+                                                text: modelData.energyCapacity > 0 ? `${modelData.energyCapacity.toFixed(1)}` : "N/A"
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                color: Theme.surfaceText
+                                                font.weight: Font.Bold
+                                                anchors.horizontalCenter: parent.horizontalCenter
+                                            }
+                                        }
+                                    }
+
+                                    StyledRect {
+                                        width: (parent.width - Theme.spacingS * 2) / 3
+                                        height: 48
+                                        radius: Theme.cornerRadius
+                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                                        border.width: 0
+
+                                        Column {
+                                            anchors.centerIn: parent
+                                            spacing: 2
+
+                                            StyledText {
+                                                text: modelData.state === UPowerDeviceState.Charging
+                                                                          ? I18n.tr("To Full")
+                                                                          : modelData.state === UPowerDeviceState.Discharging
+                                                                              ? I18n.tr("Left") : ""
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                color: Theme.surfaceTextMedium
+                                                font.weight: Font.Medium
+                                                anchors.horizontalCenter: parent.horizontalCenter
+                                            }
+
+                                            StyledText {
+                                                text: {
+                                                      const time = modelData.state === UPowerDeviceState.Charging
+                                                                   ? modelData.timeToFull
+                                                                   : modelData.state === UPowerDeviceState.Discharging && BatteryService.changeRate > 0
+                                                                       ? (3600 * modelData.energy) / BatteryService.changeRate : 0
+
+                                                    if (!time || time <= 0 || time > 86400)
+                                                        return "N/A"
+
+                                                    const hours = Math.floor(time / 3600)
+                                                    const minutes = Math.floor((time % 3600) / 60)
+                                                    return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`
+                                                }
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                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: I18n.tr("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
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

quickshell/Modules/DankBar/Popouts/VpnPopout.qml

@@ -0,0 +1,439 @@
+// 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
+
+    layerNamespace: "dms:vpn"
+
+    Ref {
+        service: DMSNetworkService
+    }
+
+    property bool wasVisible: false
+
+    onShouldBeVisibleChanged: {
+        if (shouldBeVisible && !wasVisible) {
+            DMSNetworkService.getState()
+        }
+        wasVisible = shouldBeVisible
+    }
+
+    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
+    triggerWidth: 70
+    positioning: ""
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    content: Component {
+        Rectangle {
+            id: content
+
+            implicitHeight: contentColumn.height + Theme.spacingL * 2
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            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: I18n.tr("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: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    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 (!DMSNetworkService.connected) {
+                                        return "Active: None";
+                                    }
+
+                                    const names = DMSNetworkService.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
+                                elide: Text.ElideRight
+                                wrapMode: Text.NoWrap
+                                Layout.fillWidth: true
+                                Layout.maximumWidth: parent.width - 140
+                            }
+
+                            // 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: DMSNetworkService.connected
+                                width: 130
+                                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                                border.width: 0
+                                border.color: Theme.outlineLight
+                                opacity: DMSNetworkService.isBusy ? 0.5 : 1.0
+
+                                Row {
+                                    anchors.centerIn: parent
+                                    spacing: Theme.spacingXS
+
+                                    DankIcon {
+                                        name: "link_off"
+                                        size: Theme.fontSizeSmall
+                                        color: Theme.surfaceText
+                                    }
+
+                                    StyledText {
+                                        text: I18n.tr("Disconnect")
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceText
+                                        font.weight: Font.Medium
+                                    }
+
+                                }
+
+                                MouseArea {
+                                    id: discAllArea
+
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
+                                    enabled: !DMSNetworkService.isBusy
+                                    onClicked: DMSNetworkService.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: DMSNetworkService.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: I18n.tr("No VPN profiles found")
+                                            font.pixelSize: Theme.fontSizeMedium
+                                            color: Theme.surfaceVariantText
+                                            anchors.horizontalCenter: parent.horizontalCenter
+                                        }
+
+                                        StyledText {
+                                            text: I18n.tr("Add a VPN in NetworkManager")
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            color: Theme.surfaceVariantText
+                                            anchors.horizontalCenter: parent.horizontalCenter
+                                        }
+
+                                    }
+
+                                }
+
+                                Repeater {
+                                    model: DMSNetworkService.profiles
+
+                                    delegate: Rectangle {
+                                        required property var modelData
+
+                                        width: parent ? parent.width : 300
+                                        height: 50
+                                        radius: Theme.cornerRadius
+                                        color: rowArea.containsMouse ? Theme.primaryHoverLight : (DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primaryPressed : Theme.surfaceLight)
+                                        border.width: DMSNetworkService.isActiveUuid(modelData.uuid) ? 2 : 1
+                                        border.color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.outlineLight
+                                        opacity: DMSNetworkService.isBusy ? 0.5 : 1.0
+
+                                        RowLayout {
+                                            anchors.left: parent.left
+                                            anchors.right: parent.right
+                                            anchors.verticalCenter: parent.verticalCenter
+                                            anchors.margins: Theme.spacingM
+                                            spacing: Theme.spacingS
+
+                                            DankIcon {
+                                                name: DMSNetworkService.isActiveUuid(modelData.uuid) ? "vpn_lock" : "vpn_key_off"
+                                                size: Theme.iconSize - 4
+                                                color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                                Layout.alignment: Qt.AlignVCenter
+                                            }
+
+                                            Column {
+                                                spacing: 2
+                                                Layout.alignment: Qt.AlignVCenter
+                                                Layout.fillWidth: true
+
+                                                StyledText {
+                                                    text: modelData.name
+                                                    font.pixelSize: Theme.fontSizeMedium
+                                                    color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                                    elide: Text.ElideRight
+                                                    wrapMode: Text.NoWrap
+                                                    width: parent.width
+                                                }
+
+                                                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: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
+                                            enabled: !DMSNetworkService.isBusy
+                                            onClicked: DMSNetworkService.toggle(modelData.uuid)
+                                        }
+
+                                    }
+
+                                }
+
+                                Item {
+                                    height: 1
+                                    width: 1
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

quickshell/Modules/DankBar/RightSection.qml

@@ -0,0 +1,102 @@
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    property var widgetsModel: null
+    property var components: null
+    property bool noBackground: false
+    required property var axis
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property bool overrideAxisLayout: false
+    property bool forceVerticalLayout: false
+
+    readonly property bool isVertical: overrideAxisLayout ? forceVerticalLayout : (axis?.isVertical ?? false)
+
+    implicitHeight: layoutLoader.item ? layoutLoader.item.implicitHeight : 0
+    implicitWidth: layoutLoader.item ? layoutLoader.item.implicitWidth : 0
+
+    Loader {
+        id: layoutLoader
+        width: parent.width
+        height: parent.height
+        sourceComponent: root.isVertical ? columnComp : rowComp
+    }
+
+    Component {
+        id: rowComp
+        Row {
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
+            anchors.right: parent ? parent.right : undefined
+            Repeater {
+                id: rowRepeater
+                model: root.widgetsModel
+                Item {
+                    readonly property real rowSpacing: parent.widgetSpacing
+                    width: widgetLoader.item ? widgetLoader.item.width : 0
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.verticalCenter: parent.verticalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: false
+                        axis: root.axis
+                        section: "right"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === rowRepeater.count - 1
+                        sectionSpacing: parent.rowSpacing
+                        isLeftBarEdge: false
+                        isRightBarEdge: true
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: columnComp
+        Column {
+            width: parent ? parent.width : 0
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
+            Repeater {
+                id: columnRepeater
+                model: root.widgetsModel
+                Item {
+                    readonly property real columnSpacing: parent.widgetSpacing
+                    width: parent.width
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: true
+                        axis: root.axis
+                        section: "right"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === columnRepeater.count - 1
+                        sectionSpacing: parent.columnSpacing
+                        isTopBarEdge: false
+                        isBottomBarEdge: true
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/DankBar/WidgetHost.qml

@@ -0,0 +1,232 @@
+import QtQuick
+import Quickshell.Services.Mpris
+import qs.Services
+
+Loader {
+    id: root
+
+    property string widgetId: ""
+    property var widgetData: null
+    property int spacerSize: 20
+    property var components: null
+    property bool isInColumn: false
+    property var axis: null
+    property string section: "center"
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property bool isFirst: false
+    property bool isLast: false
+    property real sectionSpacing: 0
+    property bool isLeftBarEdge: false
+    property bool isRightBarEdge: false
+    property bool isTopBarEdge: false
+    property bool isBottomBarEdge: false
+
+    asynchronous: false
+
+    readonly property bool orientationMatches: (axis?.isVertical ?? false) === isInColumn
+
+    active: orientationMatches &&
+            getWidgetVisible(widgetId, DgopService.dgopAvailable) &&
+            (widgetId !== "music" || MprisController.activePlayer !== null)
+    sourceComponent: getWidgetComponent(widgetId, components)
+    opacity: getWidgetEnabled(widgetData?.enabled) ? 1 : 0
+
+    signal contentItemReady(var item)
+
+    Binding {
+        target: root.item
+        when: root.item && "parentScreen" in root.item
+        property: "parentScreen"
+        value: root.parentScreen
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "section" in root.item
+        property: "section"
+        value: root.section
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "widgetThickness" in root.item
+        property: "widgetThickness"
+        value: root.widgetThickness
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "barThickness" in root.item
+        property: "barThickness"
+        value: root.barThickness
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "axis" in root.item
+        property: "axis"
+        value: root.axis
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "widgetData" in root.item
+        property: "widgetData"
+        value: root.widgetData
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isFirst" in root.item
+        property: "isFirst"
+        value: root.isFirst
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isLast" in root.item
+        property: "isLast"
+        value: root.isLast
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "sectionSpacing" in root.item
+        property: "sectionSpacing"
+        value: root.sectionSpacing
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isLeftBarEdge" in root.item
+        property: "isLeftBarEdge"
+        value: root.isLeftBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isRightBarEdge" in root.item
+        property: "isRightBarEdge"
+        value: root.isRightBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isTopBarEdge" in root.item
+        property: "isTopBarEdge"
+        value: root.isTopBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isBottomBarEdge" in root.item
+        property: "isBottomBarEdge"
+        value: root.isBottomBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
+    onLoaded: {
+        if (item) {
+            contentItemReady(item)            
+            if (axis && "isVertical" in item) {
+                try {
+                    item.isVertical = axis.isVertical
+                } catch (e) {
+                }
+            }
+
+            if (item.pluginService !== undefined) {
+                var parts = widgetId.split(":")
+                var pluginId = parts[0]
+                var variantId = parts.length > 1 ? parts[1] : null
+
+                if (item.pluginId !== undefined) {
+                    item.pluginId = pluginId
+                }
+                if (item.variantId !== undefined) {
+                    item.variantId = variantId
+                }
+                if (item.variantData !== undefined && variantId) {
+                    item.variantData = PluginService.getPluginVariantData(pluginId, variantId)
+                }
+                item.pluginService = PluginService
+            }
+
+            if (item.popoutService !== undefined) {
+                item.popoutService = PopoutService
+            }
+        }
+    }
+
+    function getWidgetComponent(widgetId, components) {
+        const componentMap = {
+            "launcherButton": components.launcherButtonComponent,
+            "workspaceSwitcher": components.workspaceSwitcherComponent,
+            "focusedWindow": components.focusedWindowComponent,
+            "runningApps": components.runningAppsComponent,
+            "clock": components.clockComponent,
+            "music": components.mediaComponent,
+            "weather": components.weatherComponent,
+            "systemTray": components.systemTrayComponent,
+            "privacyIndicator": components.privacyIndicatorComponent,
+            "clipboard": components.clipboardComponent,
+            "cpuUsage": components.cpuUsageComponent,
+            "memUsage": components.memUsageComponent,
+            "diskUsage": components.diskUsageComponent,
+            "cpuTemp": components.cpuTempComponent,
+            "gpuTemp": components.gpuTempComponent,
+            "notificationButton": components.notificationButtonComponent,
+            "battery": components.batteryComponent,
+            "controlCenterButton": components.controlCenterButtonComponent,
+            "idleInhibitor": components.idleInhibitorComponent,
+            "spacer": components.spacerComponent,
+            "separator": components.separatorComponent,
+            "network_speed_monitor": components.networkComponent,
+            "keyboard_layout_name": components.keyboardLayoutNameComponent,
+            "vpn": components.vpnComponent,
+            "notepadButton": components.notepadButtonComponent,
+            "colorPicker": components.colorPickerComponent,
+            "systemUpdate": components.systemUpdateComponent
+        }
+
+        if (componentMap[widgetId]) {
+            return componentMap[widgetId]
+        }
+
+        var parts = widgetId.split(":")
+        var pluginId = parts[0]
+
+        let pluginMap = PluginService.getWidgetComponents()
+        return pluginMap[pluginId] || null
+    }
+
+    function getWidgetVisible(widgetId, dgopAvailable) {
+        const widgetVisibility = {
+            "cpuUsage": dgopAvailable,
+            "memUsage": dgopAvailable,
+            "cpuTemp": dgopAvailable,
+            "gpuTemp": dgopAvailable,
+            "network_speed_monitor": dgopAvailable
+        }
+
+        return widgetVisibility[widgetId] ?? true
+    }
+
+    function getWidgetEnabled(enabled) {
+        return enabled !== false
+    }
+}

quickshell/Modules/DankBar/Widgets/AudioVisualization.qml

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

quickshell/Modules/DankBar/Widgets/Battery.qml

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

quickshell/Modules/DankBar/Widgets/ClipboardButton.qml

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

quickshell/Modules/DankBar/Widgets/Clock.qml

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

quickshell/Modules/DankBar/Widgets/ColorPicker.qml

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

quickshell/Modules/DankBar/Widgets/ControlCenterButton.qml

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

quickshell/Modules/DankBar/Widgets/CpuMonitor.qml

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

quickshell/Modules/DankBar/Widgets/CpuTemperature.qml

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

quickshell/Modules/DankBar/Widgets/DiskUsage.qml

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

quickshell/Modules/DankBar/Widgets/FocusedApp.qml

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

quickshell/Modules/DankBar/Widgets/GpuTemperature.qml

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

quickshell/Modules/DankBar/Widgets/IdleInhibitor.qml

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

quickshell/Modules/DankBar/Widgets/KeyboardLayoutName.qml

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

quickshell/Modules/DankBar/Widgets/LauncherButton.qml

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

quickshell/Modules/DankBar/Widgets/Media.qml

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

quickshell/Modules/DankBar/Widgets/NetworkMonitor.qml

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

quickshell/Modules/DankBar/Widgets/NotepadButton.qml

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

quickshell/Modules/DankBar/Widgets/NotificationCenterButton.qml

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

quickshell/Modules/DankBar/Widgets/PrivacyIndicator.qml

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

quickshell/Modules/DankBar/Widgets/RamMonitor.qml

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

quickshell/Modules/DankBar/Widgets/RunningApps.qml

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

quickshell/Modules/DankBar/Widgets/SystemUpdate.qml

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

quickshell/Modules/DankBar/Widgets/Vpn.qml

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

quickshell/Modules/DankBar/Widgets/Weather.qml

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

quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml

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