dankbar: improve config reactivity

* Add middle-click close and collapse popout

* Revert ControlCenterPopout

quickshell/Common/Theme.qml

@@ -5,7 +5,6 @@ import QtCore
 import QtQuick
 import Quickshell
 import Quickshell.Io
-import Quickshell.Services.UPower
 import qs.Common
 import qs.Services
 import qs.Modules.Greetd
@@ -705,7 +704,7 @@ Singleton {
 
     function getBatteryIcon(level, isCharging, batteryAvailable) {
         if (!batteryAvailable)
-            return _getBatteryPowerProfileIcon();
+            return "battery_std";
 
         if (isCharging) {
             if (level >= 90)
@@ -740,27 +739,13 @@ Singleton {
         }
     }
 
-    function _getBatteryPowerProfileIcon() {
-        if (typeof PowerProfiles === "undefined")
-            return "balance";
-
-        switch (PowerProfiles.profile) {
-        case PowerProfile.PowerSaver:
-            return "energy_savings_leaf";
-        case PowerProfile.Performance:
-            return "rocket_launch";
-        default:
-            return "balance";
-        }
-    }
-
     function getPowerProfileIcon(profile) {
         switch (profile) {
-        case PowerProfile.PowerSaver:
+        case 0:
             return "battery_saver";
-        case PowerProfile.Balanced:
+        case 1:
             return "battery_std";
-        case PowerProfile.Performance:
+        case 2:
             return "flash_on";
         default:
             return "settings";
@@ -769,24 +754,24 @@ Singleton {
 
     function getPowerProfileLabel(profile) {
         switch (profile) {
-        case PowerProfile.PowerSaver:
+        case 0:
             return "Power Saver";
-        case PowerProfile.Balanced:
+        case 1:
             return "Balanced";
-        case PowerProfile.Performance:
+        case 2:
             return "Performance";
         default:
-            return profile.charAt(0).toUpperCase() + profile.slice(1);
+            return "Unknown";
         }
     }
 
     function getPowerProfileDescription(profile) {
         switch (profile) {
-        case PowerProfile.PowerSaver:
+        case 0:
             return "Extend battery life";
-        case PowerProfile.Balanced:
+        case 1:
             return "Balance power and performance";
-        case PowerProfile.Performance:
+        case 2:
             return "Prioritize performance";
         default:
             return "Custom power profile";

quickshell/DMSShell.qml

@@ -106,18 +106,27 @@ Item {
     Repeater {
         id: dankBarRepeater
         model: ScriptModel {
-            values: SettingsData.barConfigs
+            id: barRepeaterModel
+            values: {
+                const configs = SettingsData.barConfigs;
+                return configs.map(c => ({
+                            id: c.id,
+                            position: c.position
+                        }));
+            }
         }
 
         property var hyprlandOverviewLoaderRef: hyprlandOverviewLoader
 
         delegate: Loader {
             id: barLoader
-            active: modelData.enabled
+            required property var modelData
+            property var barConfig: SettingsData.getBarConfig(modelData.id)
+            active: barConfig?.enabled ?? false
             asynchronous: false
 
             sourceComponent: DankBar {
-                barConfig: modelData
+                barConfig: barLoader.barConfig
                 hyprlandOverviewLoader: dankBarRepeater.hyprlandOverviewLoaderRef
 
                 onColorPickerRequested: {

quickshell/Modules/DankBar/BarCanvas.qml

@@ -1,6 +1,6 @@
 import QtQuick
+import QtQuick.Shapes
 import qs.Common
-import qs.Services
 
 Item {
     id: root
@@ -19,12 +19,42 @@ Item {
     anchors.topMargin: -(gothEnabled && !axis.isVertical && axis.edge === "bottom" ? barWindow._wingR : 0)
     anchors.bottomMargin: -(gothEnabled && !axis.isVertical && axis.edge === "top" ? barWindow._wingR : 0)
 
-    readonly property real dpr: CompositorService.getScreenScale(barWindow.screen)
+    readonly property int barPos: barConfig?.position ?? 0
+    readonly property bool isTop: barPos === SettingsData.Position.Top
+    readonly property bool isBottom: barPos === SettingsData.Position.Bottom
+    readonly property bool isLeft: barPos === SettingsData.Position.Left
+    readonly property bool isRight: barPos === SettingsData.Position.Right
 
-    function requestRepaint() {
-        debounceTimer.restart();
+    readonly property real wing: gothEnabled ? barWindow._wingR : 0
+    readonly property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.cornerRadius
+
+    property string _cachedMainPath: ""
+    property string _cachedBorderFullPath: ""
+    property string _cachedBorderEdgePath: ""
+    property string _pathKey: ""
+
+    readonly property string currentPathKey: `${width}|${height}|${barPos}|${wing}|${rt}|${barBorder.inset}`
+
+    onCurrentPathKeyChanged: {
+        if (_pathKey !== currentPathKey) {
+            _pathKey = currentPathKey;
+            _cachedMainPath = generatePathForPosition();
+            _cachedBorderFullPath = generateBorderFullPath();
+            _cachedBorderEdgePath = generateBorderEdgePath();
+        }
     }
 
+    Component.onCompleted: {
+        _pathKey = currentPathKey;
+        _cachedMainPath = generatePathForPosition();
+        _cachedBorderFullPath = generateBorderFullPath();
+        _cachedBorderEdgePath = generateBorderEdgePath();
+    }
+
+    readonly property string mainPath: _cachedMainPath
+    readonly property string borderFullPath: _cachedBorderFullPath
+    readonly property string borderEdgePath: _cachedBorderEdgePath
+
     MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
@@ -44,398 +74,547 @@ Item {
         }
     }
 
-    Timer {
-        id: debounceTimer
-        interval: 50
-        repeat: false
-        onTriggered: {
-            barShape.requestPaint();
-            barTint.requestPaint();
-            barBorder.requestPaint();
-        }
-    }
-
-    Canvas {
+    Shape {
         id: barShape
         anchors.fill: parent
-        antialiasing: true
-        renderTarget: Canvas.FramebufferObject
-        renderStrategy: Canvas.Cooperative
+        preferredRendererType: Shape.CurveRenderer
 
-        readonly property real correctWidth: Theme.px(root.width, dpr)
-        readonly property real correctHeight: Theme.px(root.height, dpr)
-        canvasSize: Qt.size(correctWidth, correctHeight)
+        ShapePath {
+            fillColor: barWindow._bgColor
+            strokeColor: "transparent"
+            strokeWidth: 0
 
-        property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
-        property real rt: (barConfig?.squareCorners ?? false) ? 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();
+            PathSvg {
+                path: root.mainPath
             }
         }
-
-        Connections {
-            target: barWindow
-            function on_BgColorChanged() {
-                root.requestRepaint();
-            }
-            function onGothCornersEnabledChanged() {
-                root.requestRepaint();
-            }
-            function onWingtipsRadiusChanged() {
-                root.requestRepaint();
-            }
-        }
-
-        Connections {
-            target: Theme
-            function onIsLightModeChanged() {
-                root.requestRepaint();
-            }
-            function onSurfaceContainerChanged() {
-                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 barPos = barConfig?.position ?? 0;
-            const isTop = barPos === SettingsData.Position.Top;
-            const isBottom = barPos === SettingsData.Position.Bottom;
-            const isLeft = barPos === SettingsData.Position.Left;
-            const isRight = barPos === 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 {
+    Shape {
         id: barTint
         anchors.fill: parent
-        antialiasing: true
-        renderTarget: Canvas.FramebufferObject
-        renderStrategy: Canvas.Cooperative
+        preferredRendererType: Shape.CurveRenderer
 
-        readonly property real correctWidth: Theme.px(root.width, dpr)
-        readonly property real correctHeight: Theme.px(root.height, dpr)
-        canvasSize: Qt.size(correctWidth, correctHeight)
+        readonly property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
 
-        property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
-        property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
-        property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
+        ShapePath {
+            fillColor: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, barTint.alphaTint)
+            strokeColor: "transparent"
+            strokeWidth: 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();
+            PathSvg {
+                path: root.mainPath
             }
         }
-
-        Connections {
-            target: barWindow
-            function on_BgColorChanged() {
-                root.requestRepaint();
-            }
-            function onGothCornersEnabledChanged() {
-                root.requestRepaint();
-            }
-            function onWingtipsRadiusChanged() {
-                root.requestRepaint();
-            }
-        }
-
-        Connections {
-            target: Theme
-            function onIsLightModeChanged() {
-                root.requestRepaint();
-            }
-            function onSurfaceChanged() {
-                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 barPos = barConfig?.position ?? 0;
-            const isTop = barPos === SettingsData.Position.Top;
-            const isBottom = barPos === SettingsData.Position.Bottom;
-            const isLeft = barPos === SettingsData.Position.Left;
-            const isRight = barPos === 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 {
+    Shape {
         id: barBorder
         anchors.fill: parent
         visible: barConfig?.borderEnabled ?? false
-        renderTarget: Canvas.FramebufferObject
-        renderStrategy: Canvas.Cooperative
+        preferredRendererType: Shape.CurveRenderer
 
-        readonly property real correctWidth: Theme.px(root.width, dpr)
-        readonly property real correctHeight: Theme.px(root.height, dpr)
-        canvasSize: Qt.size(correctWidth, correctHeight)
+        readonly property real borderThickness: Math.max(1, barConfig?.borderThickness ?? 1)
+        readonly property real inset: 1
+        readonly property string borderColorKey: barConfig?.borderColor || "surfaceText"
+        readonly property color baseColor: (borderColorKey === "surfaceText") ? Theme.surfaceText : (borderColorKey === "primary") ? Theme.primary : Theme.secondary
+        readonly property color borderColor: Theme.withAlpha(baseColor, barConfig?.borderOpacity ?? 1.0)
+        readonly property bool showFullBorder: (barConfig?.spacing ?? 4) > 0
 
-        property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
-        property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
-        property bool borderEnabled: barConfig?.borderEnabled ?? false
+        ShapePath {
+            fillColor: "transparent"
+            strokeColor: barBorder.borderColor
+            strokeWidth: barBorder.borderThickness
+            joinStyle: ShapePath.RoundJoin
+            capStyle: ShapePath.FlatCap
 
-        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();
+            PathSvg {
+                path: barBorder.showFullBorder ? root.borderFullPath : root.borderEdgePath
             }
         }
-
-        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: barWindow
-            function onGothCornersEnabledChanged() {
-                root.requestRepaint();
-            }
-            function onWingtipsRadiusChanged() {
-                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 barPos = barConfig?.position ?? 0;
-            const isTop = barPos === SettingsData.Position.Top;
-            const isBottom = barPos === SettingsData.Position.Bottom;
-            const isLeft = barPos === SettingsData.Position.Left;
-            const isRight = barPos === SettingsData.Position.Right;
-
-            const spacing = barConfig?.spacing ?? 4;
-
-            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, barConfig?.borderThickness ?? 1);
-            const devThickness = Math.max(1, Math.round(Theme.px(uiThickness, dpr)));
-
-            const key = barConfig?.borderColor || "surfaceText";
-            const base = (key === "surfaceText") ? Theme.surfaceText : (key === "primary") ? Theme.primary : Theme.secondary;
-            const color = Theme.withAlpha(base, barConfig?.borderOpacity ?? 1.0);
-
-            ctx.strokeStyle = color;
-            ctx.lineWidth = devThickness * 2;
-            ctx.lineJoin = "round";
-            ctx.lineCap = "butt";
-
-            function drawFullShape() {
-                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();
-            }
-
-            drawFullShape();
-            ctx.clip();
-
-            if (spacing > 0) {
-                drawFullShape();
-            } else {
-                ctx.beginPath();
-                if (R > 0) {
-                    ctx.moveTo(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);
-                } else {
-                    ctx.moveTo(W, H - RT);
-                    ctx.arcTo(W, H, W - RT, H, RT);
-                    ctx.lineTo(RT, H);
-                    ctx.arcTo(0, H, 0, H - RT, RT);
-                }
-            }
-            ctx.stroke();
-
-            ctx.restore();
-        }
+    }
+
+    function generatePathForPosition() {
+        if (isTop)
+            return generateTopPath();
+        if (isBottom)
+            return generateBottomPath();
+        if (isLeft)
+            return generateLeftPath();
+        if (isRight)
+            return generateRightPath();
+        return generateTopPath();
+    }
+
+    function generateBorderPathForPosition() {
+        if (isTop)
+            return generateTopBorderPath();
+        if (isBottom)
+            return generateBottomBorderPath();
+        if (isLeft)
+            return generateLeftBorderPath();
+        if (isRight)
+            return generateRightBorderPath();
+        return generateTopBorderPath();
+    }
+
+    function generateTopPath() {
+        const w = width;
+        const h = height - wing;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0 || h <= 0)
+            return "";
+
+        let d = `M ${cr} 0`;
+        d += ` L ${w - cr} 0`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 1 ${w} ${cr}`;
+        if (r > 0) {
+            d += ` L ${w} ${h + r}`;
+            d += ` A ${r} ${r} 0 0 0 ${w - r} ${h}`;
+            d += ` L ${r} ${h}`;
+            d += ` A ${r} ${r} 0 0 0 0 ${h + r}`;
+        } else {
+            d += ` L ${w} ${h - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} ${h}`;
+            d += ` L ${cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
+        }
+        d += ` L 0 ${cr}`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
+        d += " Z";
+        return d;
+    }
+
+    function generateBottomPath() {
+        const w = width;
+        const h = height - wing;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0 || h <= 0)
+            return "";
+
+        let d = `M ${cr} ${height}`;
+        d += ` L ${w - cr} ${height}`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 0 ${w} ${height - cr}`;
+        if (r > 0) {
+            d += ` L ${w} 0`;
+            d += ` A ${r} ${r} 0 0 1 ${w - r} ${r}`;
+            d += ` L ${r} ${r}`;
+            d += ` A ${r} ${r} 0 0 1 0 0`;
+        } else {
+            d += ` L ${w} ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${w - cr} 0`;
+            d += ` L ${cr} 0`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
+        }
+        d += ` L 0 ${height - cr}`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${height}`;
+        d += " Z";
+        return d;
+    }
+
+    function generateLeftPath() {
+        const w = width - wing;
+        const h = height;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0 || h <= 0)
+            return "";
+
+        let d = `M 0 ${cr}`;
+        d += ` L 0 ${h - cr}`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${h}`;
+        if (r > 0) {
+            d += ` L ${w + r} ${h}`;
+            d += ` A ${r} ${r} 0 0 1 ${w} ${h - r}`;
+            d += ` L ${w} ${r}`;
+            d += ` A ${r} ${r} 0 0 1 ${w + r} 0`;
+        } else {
+            d += ` L ${w - cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${w} ${h - cr}`;
+            d += ` L ${w} ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${w - cr} 0`;
+        }
+        d += ` L ${cr} 0`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
+        d += " Z";
+        return d;
+    }
+
+    function generateRightPath() {
+        const w = width - wing;
+        const h = height;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0 || h <= 0)
+            return "";
+
+        let d = `M ${width} ${cr}`;
+        d += ` L ${width} ${h - cr}`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 1 ${width - cr} ${h}`;
+        if (r > 0) {
+            d += ` L 0 ${h}`;
+            d += ` A ${r} ${r} 0 0 0 ${r} ${h - r}`;
+            d += ` L ${r} ${r}`;
+            d += ` A ${r} ${r} 0 0 0 0 0`;
+        } else {
+            d += ` L ${cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
+            d += ` L 0 ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
+        }
+        d += ` L ${width - cr} 0`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 1 ${width} ${cr}`;
+        d += " Z";
+        return d;
+    }
+
+    function generateTopBorderPath() {
+        const w = barBorder.width;
+        const h = barBorder.height - wing;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0 || h <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M ${w} ${h + r}`;
+            d += ` A ${r} ${r} 0 0 0 ${w - r} ${h}`;
+            d += ` L ${r} ${h}`;
+            d += ` A ${r} ${r} 0 0 0 0 ${h + r}`;
+        } else {
+            d = `M ${w} ${h - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} ${h}`;
+            d += ` L ${cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
+        }
+        return d;
+    }
+
+    function generateBottomBorderPath() {
+        const w = barBorder.width;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M ${w} 0`;
+            d += ` A ${r} ${r} 0 0 1 ${w - r} ${r}`;
+            d += ` L ${r} ${r}`;
+            d += ` A ${r} ${r} 0 0 1 0 0`;
+        } else {
+            d = `M ${w} ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} 0`;
+            d += ` L ${cr} 0`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${cr}`;
+        }
+        return d;
+    }
+
+    function generateLeftBorderPath() {
+        const w = barBorder.width - wing;
+        const h = barBorder.height;
+        const r = wing;
+        const cr = rt;
+
+        if (h <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M ${w + r} ${h}`;
+            d += ` A ${r} ${r} 0 0 1 ${w} ${h - r}`;
+            d += ` L ${w} ${r}`;
+            d += ` A ${r} ${r} 0 0 1 ${w + r} 0`;
+        } else {
+            d = `M ${w - cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w} ${h - cr}`;
+            d += ` L ${w} ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} 0`;
+        }
+        return d;
+    }
+
+    function generateRightBorderPath() {
+        const h = barBorder.height;
+        const r = wing;
+        const cr = rt;
+
+        if (h <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M 0 ${h}`;
+            d += ` A ${r} ${r} 0 0 0 ${r} ${h - r}`;
+            d += ` L ${r} ${r}`;
+            d += ` A ${r} ${r} 0 0 0 0 0`;
+        } else {
+            d = `M ${cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
+            d += ` L 0 ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
+        }
+        return d;
+    }
+
+    function generateBorderFullPath() {
+        const i = barBorder.inset;
+        const r = wing;
+        const cr = rt;
+
+        if (isTop) {
+            const w = width - i * 2;
+            const h = height - wing - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${i + cr} ${i}`;
+            d += ` L ${i + w - cr} ${i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${i + w} ${i + cr}`;
+            if (r > 0) {
+                d += ` L ${i + w} ${height - i}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + w - r} ${i + h}`;
+                d += ` L ${i + r} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${height - i}`;
+            } else {
+                d += ` L ${i + w} ${i + h - cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + w - cr} ${i + h}`;
+                d += ` L ${i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i} ${i + h - cr}`;
+            }
+            d += ` L ${i} ${i + cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${i + cr} ${i}`;
+            d += " Z";
+            return d;
+        }
+
+        if (isBottom) {
+            const w = width - i * 2;
+            const h = height - wing - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${i + cr} ${height - i}`;
+            d += ` L ${i + w - cr} ${height - i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i + w} ${height - i - cr}`;
+            if (r > 0) {
+                d += ` L ${i + w} ${i}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w - r} ${i + r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${i} ${i}`;
+            } else {
+                d += ` L ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w - cr} ${i}`;
+                d += ` L ${i + cr} ${i}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i} ${i + cr}`;
+            }
+            d += ` L ${i} ${height - i - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i + cr} ${height - i}`;
+            d += " Z";
+            return d;
+        }
+
+        if (isLeft) {
+            const w = width - wing - i * 2;
+            const h = height - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${i} ${i + cr}`;
+            d += ` L ${i} ${i + h - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i + cr} ${i + h}`;
+            if (r > 0) {
+                d += ` L ${width - i} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w} ${i + h - r}`;
+                d += ` L ${i + w} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${width - i} ${i}`;
+            } else {
+                d += ` L ${i + w - cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w} ${i + h - cr}`;
+                d += ` L ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w - cr} ${i}`;
+            }
+            d += ` L ${i + cr} ${i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i} ${i + cr}`;
+            d += " Z";
+            return d;
+        }
+
+        if (isRight) {
+            const w = width - wing - i * 2;
+            const h = height - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${width - i} ${i + cr}`;
+            d += ` L ${width - i} ${i + h - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${width - i - cr} ${i + h}`;
+            if (r > 0) {
+                d += ` L ${i} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + r} ${i + h - r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${i}`;
+            } else {
+                d += ` L ${wing + i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${wing + i} ${i + h - cr}`;
+                d += ` L ${wing + i} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${wing + i + cr} ${i}`;
+            }
+            d += ` L ${width - i - cr} ${i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${width - i} ${i + cr}`;
+            d += " Z";
+            return d;
+        }
+
+        return "";
+    }
+
+    function generateBorderEdgePath() {
+        const i = barBorder.inset;
+        const r = wing;
+        const cr = rt;
+
+        if (isTop) {
+            const w = width - i * 2;
+            const h = height - wing - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i + w} ${i + h + r}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + w - r} ${i + h}`;
+                d += ` L ${i + r} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${i + h + r}`;
+            } else {
+                d = `M ${i + w} ${i + h - cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + w - cr} ${i + h}`;
+                d += ` L ${i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i} ${i + h - cr}`;
+            }
+            return d;
+        }
+
+        if (isBottom) {
+            const w = width - i * 2;
+            if (w <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i + w} ${i}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w - r} ${i + r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${i} ${i}`;
+            } else {
+                d = `M ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w - cr} ${i}`;
+                d += ` L ${i + cr} ${i}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i} ${i + cr}`;
+            }
+            return d;
+        }
+
+        if (isLeft) {
+            const w = width - wing - i * 2;
+            const h = height - i * 2;
+            if (h <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i + w + r} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w} ${i + h - r}`;
+                d += ` L ${i + w} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w + r} ${i}`;
+            } else {
+                d = `M ${i + w - cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w} ${i + h - cr}`;
+                d += ` L ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w - cr} ${i}`;
+            }
+            return d;
+        }
+
+        if (isRight) {
+            const h = height - i * 2;
+            if (h <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + r} ${i + h - r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${i}`;
+            } else {
+                d = `M ${i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i} ${i + h - cr}`;
+                d += ` L ${i} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + cr} ${i}`;
+            }
+            return d;
+        }
+
+        return "";
     }
 }

quickshell/Modules/DankBar/Widgets/RunningApps.qml

@@ -458,7 +458,7 @@ Item {
                         anchors.fill: parent
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
-                        acceptedButtons: Qt.LeftButton | Qt.RightButton
+                        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
                         onClicked: mouse => {
                             if (mouse.button === Qt.LeftButton) {
                                 if (isGrouped && windowCount > 1) {
@@ -505,6 +505,12 @@ Item {
                                         windowContextMenuLoader.item.showAt(relativeX, yPos, false, "top");
                                     }
                                 }
+                            } else if (mouse.button === Qt.MiddleButton) {
+                                if (toplevelObject) {
+                                    if (typeof toplevelObject.close === "function") {
+                                        toplevelObject.close();
+                                    }
+                                }
                             }
                         }
                         onEntered: {

quickshell/Modules/Settings/DankBarTab.qml

@@ -1570,7 +1570,7 @@ Item {
                                     position: newPos
                                 });
                                 const isVertical = newPos === SettingsData.Position.Left || newPos === SettingsData.Position.Right;
-                                if (!wasVertical && !isVertical) {
+                                if (wasVertical !== isVertical || !isVertical) {
                                     notifyHorizontalBarChange();
                                 }
                             }

quickshell/Services/CavaService.qml

@@ -30,7 +30,7 @@ Singleton {
         id: cavaProcess
 
         running: root.cavaAvailable && root.refCount > 0
-        command: ["sh", "-c", `printf '[general]\\nmode=normal\\nframerate=25\\nautosens=0\\nsensitivity=30\\nbars=6\\nlower_cutoff_freq=50\\nhigher_cutoff_freq=12000\\n[output]\\nmethod=raw\\nraw_target=/dev/stdout\\ndata_format=ascii\\nchannels=mono\\nmono_option=average\\n[smoothing]\\nnoise_reduction=35\\nintegral=90\\ngravity=95\\nignore=2\\nmonstercat=1.5' | cava -p /dev/stdin`]
+        command: ["sh", "-c", "printf '[general]\\nframerate=25\\nbars=6\\nautosens=0\\nsensitivity=30\\nlower_cutoff_freq=50\\nhigher_cutoff_freq=12000\\n[input]\\nmethod=pipewire\\nsource=auto\\nsample_rate=48000\\n[output]\\nmethod=raw\\nraw_target=/dev/stdout\\ndata_format=ascii\\nchannels=mono\\nmono_option=average\\n[smoothing]\\nnoise_reduction=35\\nintegral=90\\ngravity=95\\nignore=2\\nmonstercat=1.5' | cava -p /dev/stdin"]
 
         onRunningChanged: {
             if (!running) {