dankbar: enhance widget click targets

- Fitt's law stuff, whole height on horiz, whole width in vertical
- Probably missed stuff or breaks stuff, pretty big refactor

DMSShellIPC.qml

@@ -374,4 +374,15 @@ Item {
 
         target: "hypr"
     }
+
+    IpcHandler {
+        function wallpaper(): string {
+            if (root.dankBarLoader.item && root.dankBarLoader.item.triggerWallpaperBrowserOnFocusedScreen()) {
+                return "SUCCESS: Toggled wallpaper browser"
+            }
+            return "ERROR: Failed to toggle wallpaper browser"
+        }
+
+        target: "dankdash"
+    }
 }

Modules/DankBar/DankBar.qml

@@ -546,9 +546,9 @@ Item {
                                 anchors.fill: parent
                                 anchors.leftMargin: !barWindow.isVertical ? Math.max(Theme.spacingXS, SettingsData.dankBarInnerPadding * 0.8) : SettingsData.dankBarInnerPadding / 2
                                 anchors.rightMargin: !barWindow.isVertical ? Math.max(Theme.spacingXS, SettingsData.dankBarInnerPadding * 0.8) : SettingsData.dankBarInnerPadding / 2
-                                anchors.topMargin: !barWindow.isVertical ? SettingsData.dankBarInnerPadding / 2 : Math.max(Theme.spacingXS, SettingsData.dankBarInnerPadding * 0.8)
+                                anchors.topMargin: !barWindow.isVertical ? 0 : Math.max(Theme.spacingXS, SettingsData.dankBarInnerPadding * 0.8)
-                                anchors.bottomMargin: !barWindow.isVertical ? SettingsData.dankBarInnerPadding / 2 : Math.max(Theme.spacingXS, SettingsData.dankBarInnerPadding * 0.8)
+                                anchors.bottomMargin: !barWindow.isVertical ? 0 : Math.max(Theme.spacingXS, SettingsData.dankBarInnerPadding * 0.8)
-                                clip: true
+                                clip: false
 
                                 property int componentMapRevision: 0
 
@@ -801,6 +801,7 @@ Item {
                                     ClipboardButton {
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent)
                                         parentScreen: barWindow.screen
                                         onClicked: {
@@ -817,7 +818,7 @@ Item {
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
                                         section: topBarContent.getWidgetSection(parent)
-                                        popupTarget: appDrawerLoader.item
+                                        popoutTarget: appDrawerLoader.item
                                         parentScreen: barWindow.screen
                                         hyprlandOverviewLoader: root.hyprlandOverviewLoader
                                         onClicked: {
@@ -831,8 +832,11 @@ Item {
                                     id: workspaceSwitcherComponent
 
                                     WorkspaceSwitcher {
+                                        axis: barWindow.axis
                                         screenName: barWindow.screenName
                                         widgetHeight: barWindow.widgetThickness
+                                        barThickness: barWindow.effectiveBarThickness
+                                        parentScreen: barWindow.screen
                                         hyprlandOverviewLoader: root.hyprlandOverviewLoader
                                     }
                                 }
@@ -841,8 +845,10 @@ Item {
                                     id: focusedWindowComponent
 
                                     FocusedApp {
+                                        axis: barWindow.axis
                                         availableWidth: topBarContent.leftToMediaGap
                                         widgetThickness: barWindow.widgetThickness
+                                        barThickness: barWindow.effectiveBarThickness
                                         parentScreen: barWindow.screen
                                     }
                                 }
@@ -862,11 +868,12 @@ Item {
                                     id: clockComponent
 
                                     Clock {
+                                        axis: barWindow.axis
                                         compactMode: topBarContent.overlapping
                                         barThickness: barWindow.effectiveBarThickness
                                         widgetThickness: barWindow.widgetThickness
                                         section: topBarContent.getWidgetSection(parent) || "center"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             dankDashPopoutLoader.active = true
                                             return dankDashPopoutLoader.item
                                         }
@@ -896,11 +903,12 @@ Item {
                                     id: mediaComponent
 
                                     Media {
+                                        axis: barWindow.axis
                                         compactMode: topBarContent.spacingTight || topBarContent.overlapping
                                         barThickness: barWindow.effectiveBarThickness
                                         widgetThickness: barWindow.widgetThickness
                                         section: topBarContent.getWidgetSection(parent) || "center"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             dankDashPopoutLoader.active = true
                                             return dankDashPopoutLoader.item
                                         }
@@ -919,10 +927,11 @@ Item {
                                     id: weatherComponent
 
                                     Weather {
+                                        axis: barWindow.axis
                                         barThickness: barWindow.effectiveBarThickness
                                         widgetThickness: barWindow.widgetThickness
                                         section: topBarContent.getWidgetSection(parent) || "center"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             dankDashPopoutLoader.active = true
                                             return dankDashPopoutLoader.item
                                         }
@@ -965,8 +974,9 @@ Item {
                                     CpuMonitor {
                                         barThickness: barWindow.effectiveBarThickness
                                         widgetThickness: barWindow.widgetThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             processListPopoutLoader.active = true
                                             return processListPopoutLoader.item
                                         }
@@ -985,8 +995,9 @@ Item {
                                     RamMonitor {
                                         barThickness: barWindow.effectiveBarThickness
                                         widgetThickness: barWindow.widgetThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             processListPopoutLoader.active = true
                                             return processListPopoutLoader.item
                                         }
@@ -1015,8 +1026,9 @@ Item {
                                     CpuTemperature {
                                         barThickness: barWindow.effectiveBarThickness
                                         widgetThickness: barWindow.widgetThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             processListPopoutLoader.active = true
                                             return processListPopoutLoader.item
                                         }
@@ -1035,8 +1047,9 @@ Item {
                                     GpuTemperature {
                                         barThickness: barWindow.effectiveBarThickness
                                         widgetThickness: barWindow.widgetThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             processListPopoutLoader.active = true
                                             return processListPopoutLoader.item
                                         }
@@ -1063,8 +1076,9 @@ Item {
                                         isActive: notificationCenterLoader.item ? notificationCenterLoader.item.shouldBeVisible : false
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             notificationCenterLoader.active = true
                                             return notificationCenterLoader.item
                                         }
@@ -1083,8 +1097,9 @@ Item {
                                         batteryPopupVisible: batteryPopoutLoader.item ? batteryPopoutLoader.item.shouldBeVisible : false
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             batteryPopoutLoader.active = true
                                             return batteryPopoutLoader.item
                                         }
@@ -1102,8 +1117,9 @@ Item {
                                     Vpn {
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             vpnPopoutLoader.active = true
                                             return vpnPopoutLoader.item
                                         }
@@ -1122,8 +1138,9 @@ Item {
                                         isActive: controlCenterLoader.item ? controlCenterLoader.item.shouldBeVisible : false
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             controlCenterLoader.active = true
                                             return controlCenterLoader.item
                                         }
@@ -1217,9 +1234,9 @@ Item {
                                     id: notepadButtonComponent
 
                                     NotepadButton {
-                                        isVertical: barWindow.isVertical
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
                                         parentScreen: barWindow.screen
                                     }
@@ -1246,8 +1263,9 @@ Item {
                                         isActive: systemUpdateLoader.item ? systemUpdateLoader.item.shouldBeVisible : false
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
+                                        axis: barWindow.axis
                                         section: topBarContent.getWidgetSection(parent) || "right"
-                                        popupTarget: {
+                                        popoutTarget: {
                                             systemUpdateLoader.active = true
                                             return systemUpdateLoader.item
                                         }
@@ -1265,15 +1283,4 @@ Item {
             }
         }
     }
-
-    IpcHandler {
-        target: "dankdash"
-
-        function wallpaper(): string {
-            if (root.triggerWallpaperBrowserOnFocusedScreen()) {
-                return "SUCCESS: Toggled wallpaper browser"
-            }
-            return "ERROR: Failed to toggle wallpaper browser"
-        }
-    }
 }

Modules/DankBar/Widgets/Battery.qml

@@ -1,46 +1,34 @@
 import QtQuick
 import Quickshell.Services.UPower
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: battery
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool batteryPopupVisible: false
-    property string section: "right"
+    property var popoutTarget: null
-    property var popupTarget: null
-    property var parentScreen: null
-    property real widgetThickness: 30
-    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     signal toggleBatteryPopup()
 
-    width: isVertical ? widgetThickness : (batteryContent.implicitWidth + horizontalPadding * 2)
-    height: isVertical ? (batteryColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = batteryArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
     visible: true
 
+    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.isVertical
+                visible: battery.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 1
 
                 DankIcon {
                     name: BatteryService.getBatteryIcon()
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(battery.barThickness)
                     color: {
                         if (!BatteryService.batteryAvailable) {
                             return Theme.surfaceText
@@ -61,7 +49,7 @@ Rectangle {
 
                 StyledText {
                     text: BatteryService.batteryLevel.toString()
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(battery.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -71,13 +59,13 @@ Rectangle {
 
             Row {
                 id: batteryContent
-        visible: !battery.isVertical
+                visible: !battery.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: SettingsData.dankBarNoBackground ? 1 : 2
 
                 DankIcon {
                     name: BatteryService.getBatteryIcon()
-            size: Theme.barIconSize(barThickness, -4)
+                    size: Theme.barIconSize(battery.barThickness, -4)
                     color: {
                         if (!BatteryService.batteryAvailable) {
                             return Theme.surfaceText;
@@ -98,27 +86,27 @@ Rectangle {
 
                 StyledText {
                     text: `${BatteryService.batteryLevel}%`
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(battery.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
                     visible: BatteryService.batteryAvailable
                 }
-
+            }
+        }
     }
 
     MouseArea {
-        id: batteryArea
-
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
         onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
+                const globalPos = battery.visualContent.mapToGlobal(0, 0)
                 const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, battery.visualWidth)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
             }
             toggleBatteryPopup();
         }

Modules/DankBar/Widgets/ClipboardButton.qml

@@ -1,57 +1,25 @@
 import QtQuick
 import qs.Common
+import qs.Modules.Plugins
 import qs.Widgets
 
-Item {
+BasePill {
     id: root
 
     property bool isActive: false
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property string section: "right"
     property var clipboardHistoryModal: null
-    property var parentScreen: null
-    property real widgetThickness: 30
-    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    signal clicked()
+    content: Component {
-
+        Item {
-    width: widgetThickness
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
-    height: widgetThickness
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-
-    MouseArea {
-        id: clipboardArea
-
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton
-        onPressed: {
-            root.clicked()
-        }
-    }
-
-    Rectangle {
-        id: clipboardContent
-
-        anchors.fill: parent
-        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-        color: {
-            if (SettingsData.dankBarNoBackground) {
-                return "transparent"
-            }
-
-            const baseColor = clipboardArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
-            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
-        }
 
             DankIcon {
-            anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
-            anchors.verticalCenter: parent.verticalCenter
                 name: "content_paste"
-            size: Theme.barIconSize(barThickness)
+                size: Theme.barIconSize(root.barThickness)
                 color: Theme.surfaceText
             }
         }
     }
+}

Modules/DankBar/Widgets/Clock.qml

@@ -1,38 +1,23 @@
 import QtQuick
 import Quickshell
 import qs.Common
+import qs.Modules.Plugins
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool compactMode: false
-    property string section: "center"
-    property var popupTarget: null
-    property var parentScreen: null
-    property real barThickness: 48
-    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
-
     signal clockClicked
 
-    width: isVertical ? widgetThickness : (clockRow.implicitWidth + horizontalPadding * 2)
+    content: Component {
-    height: isVertical ? (clockColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
+        Item {
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : clockRow.implicitWidth
-    color: {
+            implicitHeight: root.isVerticalOrientation ? clockColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = clockMouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
             Column {
                 id: clockColumn
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: -2
 
@@ -50,7 +35,7 @@ Rectangle {
                                 return String(display).padStart(2, '0').charAt(0)
                             }
                         }
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
                         font.weight: Font.Normal
                         width: 9
@@ -67,7 +52,7 @@ Rectangle {
                                 return String(display).padStart(2, '0').charAt(1)
                             }
                         }
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
                         font.weight: Font.Normal
                         width: 9
@@ -81,7 +66,7 @@ Rectangle {
 
                     StyledText {
                         text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(0)
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
                         font.weight: Font.Normal
                         width: 9
@@ -90,7 +75,7 @@ Rectangle {
 
                     StyledText {
                         text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(1)
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
                         font.weight: Font.Normal
                         width: 9
@@ -105,7 +90,7 @@ Rectangle {
 
                     StyledText {
                         text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(0)
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
                         font.weight: Font.Normal
                         width: 9
@@ -114,7 +99,7 @@ Rectangle {
 
                     StyledText {
                         text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(1)
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
                         font.weight: Font.Normal
                         width: 9
@@ -147,7 +132,7 @@ Rectangle {
                             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(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
                         font.weight: Font.Light
                         width: 9
@@ -162,7 +147,7 @@ Rectangle {
                             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(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
                         font.weight: Font.Light
                         width: 9
@@ -182,7 +167,7 @@ Rectangle {
                             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(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
                         font.weight: Font.Light
                         width: 9
@@ -197,7 +182,7 @@ Rectangle {
                             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(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
                         font.weight: Font.Light
                         width: 9
@@ -208,8 +193,7 @@ Rectangle {
 
             Row {
                 id: clockRow
-
+                visible: !root.isVerticalOrientation
-        visible: !root.isVertical
                 anchors.centerIn: parent
                 spacing: Theme.spacingS
 
@@ -217,7 +201,7 @@ Rectangle {
                     text: {
                         return systemClock?.date?.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat())
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
                 }
@@ -238,7 +222,7 @@ Rectangle {
 
                         return systemClock?.date?.toLocaleDateString(Qt.locale(), "ddd d")
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
                     visible: !SettingsData.clockCompactMode
@@ -249,22 +233,22 @@ Rectangle {
                 id: systemClock
                 precision: SystemClock.Seconds
             }
+        }
+    }
 
     MouseArea {
         id: clockMouseArea
-
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
+            if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
                 const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen
+                const currentScreen = root.parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, width)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+                root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
             }
             root.clockClicked()
         }
     }
-
 }

Modules/DankBar/Widgets/ColorPicker.qml

@@ -1,54 +1,36 @@
 import QtQuick
 import qs.Common
+import qs.Modules.Plugins
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool isActive: false
-    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 ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    signal clicked()
+    signal colorPickerRequested()
 
-    width: isVertical ? widgetThickness : (colorPickerIcon.width + horizontalPadding * 2)
+    content: Component {
-    height: isVertical ? (colorPickerIcon.height + horizontalPadding * 2) : widgetThickness
+        Item {
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
-    color: {
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = colorPickerArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
             DankIcon {
-        id: colorPickerIcon
-
                 anchors.centerIn: parent
                 name: "palette"
-        size: Theme.barIconSize(barThickness, -4)
+                size: Theme.barIconSize(root.barThickness, -4)
-        color: colorPickerArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+                color: root.isActive ? Theme.primary : Theme.surfaceText
+            }
+        }
     }
 
     MouseArea {
-        id: colorPickerArea
+        z: 1
-
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onPressed: {
-            root.colorPickerRequested();
+            root.colorPickerRequested()
         }
     }
-
-    signal colorPickerRequested()
-
 }

Modules/DankBar/Widgets/ControlCenterButton.qml

@@ -1,42 +1,27 @@
 import QtQuick
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool isActive: false
-    property string section: "right"
+    property var popoutTarget: null
-    property var popupTarget: null
-    property var parentScreen: null
     property var widgetData: null
     property bool showNetworkIcon: SettingsData.controlCenterShowNetworkIcon
     property bool showBluetoothIcon: SettingsData.controlCenterShowBluetoothIcon
     property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
-    property real widgetThickness: 30
-    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    signal clicked()
+    content: Component {
-
+        Item {
-    width: isVertical ? widgetThickness : (controlIndicators.implicitWidth + horizontalPadding * 2)
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : controlIndicators.implicitWidth
-    height: isVertical ? (controlColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
+            implicitHeight: root.isVerticalOrientation ? controlColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = controlCenterArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
             Column {
                 id: controlColumn
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: Theme.spacingXS
 
@@ -52,7 +37,7 @@ Rectangle {
 
                         return NetworkService.wifiSignalIcon
                     }
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (NetworkService.wifiToggling) {
                             return Theme.primary
@@ -66,7 +51,7 @@ Rectangle {
 
                 DankIcon {
                     name: "bluetooth"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: BluetoothService.connected ? Theme.primary : Theme.outlineButton
                     anchors.horizontalCenter: parent.horizontalCenter
                     visible: root.showBluetoothIcon && BluetoothService.available && BluetoothService.enabled
@@ -94,7 +79,7 @@ Rectangle {
                             }
                             return "volume_up"
                         }
-                size: Theme.barIconSize(barThickness)
+                        size: Theme.barIconSize(root.barThickness)
                         color: Theme.surfaceText
                         anchors.centerIn: parent
                     }
@@ -123,8 +108,8 @@ Rectangle {
 
                 DankIcon {
                     name: "settings"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
-            color: controlCenterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+                    color: root.isActive ? Theme.primary : Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
                     visible: !root.showNetworkIcon && !root.showBluetoothIcon && !root.showAudioIcon
                 }
@@ -132,7 +117,7 @@ Rectangle {
 
             Row {
                 id: controlIndicators
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: Theme.spacingXS
 
@@ -150,7 +135,7 @@ Rectangle {
 
                         return NetworkService.wifiSignalIcon;
                     }
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (NetworkService.wifiToggling) {
                             return Theme.primary;
@@ -160,15 +145,13 @@ Rectangle {
                     }
                     anchors.verticalCenter: parent.verticalCenter
                     visible: root.showNetworkIcon && NetworkService.networkAvailable
-
-
                 }
 
                 DankIcon {
                     id: bluetoothIcon
 
                     name: "bluetooth"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: BluetoothService.connected ? Theme.primary : Theme.outlineButton
                     anchors.verticalCenter: parent.verticalCenter
                     visible: root.showBluetoothIcon && BluetoothService.available && BluetoothService.enabled
@@ -196,7 +179,7 @@ Rectangle {
                             }
                             return "volume_up";
                         }
-                size: Theme.barIconSize(barThickness)
+                        size: Theme.barIconSize(root.barThickness)
                         color: Theme.surfaceText
                         anchors.centerIn: parent
                     }
@@ -223,44 +206,40 @@ Rectangle {
                             wheelEvent.accepted = true;
                         }
                     }
-
                 }
 
                 DankIcon {
                     name: "mic"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: Theme.primary
                     anchors.verticalCenter: parent.verticalCenter
-            visible: false // TODO: Add mic detection
+                    visible: false
                 }
 
-        // Fallback settings icon when all other icons are hidden
                 DankIcon {
                     name: "settings"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
-            color: controlCenterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+                    color: root.isActive ? Theme.primary : Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
                     visible: !root.showNetworkIcon && !root.showBluetoothIcon && !root.showAudioIcon
                 }
-
+            }
+        }
     }
 
     MouseArea {
-        id: controlCenterArea
-
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
         onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
                 const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
             }
-            root.clicked();
+            root.clicked()
         }
     }
-
-
 }

Modules/DankBar/Widgets/CpuMonitor.qml

@@ -1,37 +1,20 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
-    property string section: "right"
+    property var popoutTarget: null
-    property var popupTarget: null
-    property var parentScreen: null
-    property real barThickness: 48
-    property real widgetThickness: 30
     property var widgetData: null
     property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    width: isVertical ? widgetThickness : (cpuContent.implicitWidth + horizontalPadding * 2)
-    height: isVertical ? (cpuColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = cpuArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
     Component.onCompleted: {
         DgopService.addRef(["cpu"]);
     }
@@ -39,36 +22,20 @@ Rectangle {
         DgopService.removeRef(["cpu"]);
     }
 
-    MouseArea {
+    content: Component {
-        id: cpuArea
+        Item {
-
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : cpuContent.implicitWidth
-        anchors.fill: parent
+            implicitHeight: root.isVerticalOrientation ? cpuColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-            }
-            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
-            }
-
-        }
-    }
 
             Column {
                 id: cpuColumn
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 1
 
                 DankIcon {
                     name: "memory"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (DgopService.cpuUsage > 80) {
                             return Theme.tempDanger;
@@ -91,7 +58,7 @@ Rectangle {
 
                         return DgopService.cpuUsage.toFixed(0);
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -100,13 +67,13 @@ Rectangle {
 
             Row {
                 id: cpuContent
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 3
 
                 DankIcon {
                     name: "memory"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (DgopService.cpuUsage > 80) {
                             return Theme.tempDanger;
@@ -129,7 +96,7 @@ Rectangle {
 
                         return DgopService.cpuUsage.toFixed(0) + "%";
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
@@ -138,7 +105,7 @@ Rectangle {
 
                     StyledTextMetrics {
                         id: cpuBaseline
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         font.weight: Font.Medium
                         text: "100%"
                     }
@@ -152,7 +119,26 @@ Rectangle {
                         }
                     }
                 }
-
+            }
+        }
     }
 
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        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();
+            }
+        }
+    }
 }

Modules/DankBar/Widgets/CpuTemperature.qml

@@ -1,37 +1,20 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
-    property string section: "right"
+    property var popoutTarget: null
-    property var popupTarget: null
-    property var parentScreen: null
-    property real barThickness: 48
-    property real widgetThickness: 30
     property var widgetData: null
     property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    width: isVertical ? widgetThickness : (cpuTempContent.implicitWidth + horizontalPadding * 2)
-    height: isVertical ? (cpuTempColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = cpuTempArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
     Component.onCompleted: {
         DgopService.addRef(["cpu"]);
     }
@@ -39,36 +22,20 @@ Rectangle {
         DgopService.removeRef(["cpu"]);
     }
 
-    MouseArea {
+    content: Component {
-        id: cpuTempArea
+        Item {
-
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : cpuTempContent.implicitWidth
-        anchors.fill: parent
+            implicitHeight: root.isVerticalOrientation ? cpuTempColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-            }
-            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
-            }
-
-        }
-    }
 
             Column {
                 id: cpuTempColumn
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 1
 
                 DankIcon {
                     name: "device_thermostat"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (DgopService.cpuTemperature > 85) {
                             return Theme.tempDanger;
@@ -91,7 +58,7 @@ Rectangle {
 
                         return Math.round(DgopService.cpuTemperature).toString();
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -100,13 +67,13 @@ Rectangle {
 
             Row {
                 id: cpuTempContent
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 3
 
                 DankIcon {
                     name: "device_thermostat"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (DgopService.cpuTemperature > 85) {
                             return Theme.tempDanger;
@@ -129,7 +96,7 @@ Rectangle {
 
                         return Math.round(DgopService.cpuTemperature) + "°";
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
@@ -138,7 +105,7 @@ Rectangle {
 
                     StyledTextMetrics {
                         id: tempBaseline
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         font.weight: Font.Medium
                         text: "100°"
                     }
@@ -152,8 +119,26 @@ Rectangle {
                         }
                     }
                 }
-
+            }
+        }
     }
 
-
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        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();
+            }
+        }
+    }
 }

Modules/DankBar/Widgets/DiskUsage.qml

@@ -1,44 +1,35 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property var widgetData: null
-    property var parentScreen: null
-    property real widgetThickness: 30
-    property real barThickness: 48
     property string mountPath: (widgetData && widgetData.mountPath !== undefined) ? widgetData.mountPath : "/"
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     property var selectedMount: {
         if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
             return null
         }
 
-        // Force re-evaluation when mountPath changes
         const currentMountPath = root.mountPath || "/"
 
-        // First try to find exact match
         for (let i = 0; i < DgopService.diskMounts.length; i++) {
             if (DgopService.diskMounts[i].mount === currentMountPath) {
                 return DgopService.diskMounts[i]
             }
         }
 
-        // Fallback to root
         for (let i = 0; i < DgopService.diskMounts.length; i++) {
             if (DgopService.diskMounts[i].mount === "/") {
                 return DgopService.diskMounts[i]
             }
         }
 
-        // Last resort - first mount
         return DgopService.diskMounts[0] || null
     }
 
@@ -50,17 +41,6 @@ Rectangle {
         return parseFloat(percentStr) || 0
     }
 
-    width: isVertical ? widgetThickness : (diskContent.implicitWidth + horizontalPadding * 2)
-    height: isVertical ? (diskColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent"
-        }
-
-        const baseColor = Theme.widgetBaseBackgroundColor
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
-    }
     Component.onCompleted: {
         DgopService.addRef(["diskmounts"])
     }
@@ -70,7 +50,6 @@ Rectangle {
 
     Connections {
         function onWidgetDataChanged() {
-            // Force property re-evaluation by triggering change detection
             root.mountPath = Qt.binding(() => {
                 return (root.widgetData && root.widgetData.mountPath !== undefined) ? root.widgetData.mountPath : "/"
             })
@@ -82,21 +61,18 @@ Rectangle {
 
                 const currentMountPath = root.mountPath || "/"
 
-                // First try to find exact match
                 for (let i = 0; i < DgopService.diskMounts.length; i++) {
                     if (DgopService.diskMounts[i].mount === currentMountPath) {
                         return DgopService.diskMounts[i]
                     }
                 }
 
-                // Fallback to root
                 for (let i = 0; i < DgopService.diskMounts.length; i++) {
                     if (DgopService.diskMounts[i].mount === "/") {
                         return DgopService.diskMounts[i]
                     }
                 }
 
-                // Last resort - first mount
                 return DgopService.diskMounts[0] || null
             })
         }
@@ -104,6 +80,116 @@ Rectangle {
         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)
+                    font.weight: Font.Medium
+                    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)
+                    font.weight: Font.Medium
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+                }
+
+                StyledText {
+                    text: {
+                        if (root.diskUsagePercent === undefined || root.diskUsagePercent === null || root.diskUsagePercent === 0) {
+                            return "--%"
+                        }
+                        return root.diskUsagePercent.toFixed(0) + "%"
+                    }
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
+                    font.weight: Font.Medium
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideNone
+
+                    StyledTextMetrics {
+                        id: diskBaseline
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
+                        font.weight: Font.Medium
+                        text: "100%"
+                    }
+
+                    width: Math.max(diskBaseline.width, paintedWidth)
+
+                    Behavior on width {
+                        NumberAnimation {
+                            duration: 120
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     Loader {
         id: tooltipLoader
         active: false
@@ -111,11 +197,11 @@ Rectangle {
     }
 
     MouseArea {
-        id: diskArea
+        z: 1
         anchors.fill: parent
-        hoverEnabled: root.isVertical
+        hoverEnabled: root.isVerticalOrientation
         onEntered: {
-            if (root.isVertical && root.selectedMount) {
+            if (root.isVerticalOrientation && root.selectedMount) {
                 tooltipLoader.active = true
                 if (tooltipLoader.item) {
                     const globalPos = mapToGlobal(width / 2, height / 2)
@@ -136,107 +222,4 @@ Rectangle {
             tooltipLoader.active = false
         }
     }
-
-    Column {
-        id: diskColumn
-        visible: root.isVertical
-        anchors.centerIn: parent
-        spacing: 1
-
-        DankIcon {
-            name: "storage"
-            size: Theme.barIconSize(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(barThickness)
-            font.weight: Font.Medium
-            color: Theme.surfaceText
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-    }
-
-    Row {
-        id: diskContent
-        visible: !root.isVertical
-        anchors.centerIn: parent
-        spacing: 3
-
-        DankIcon {
-            name: "storage"
-            size: Theme.barIconSize(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(barThickness)
-            font.weight: Font.Medium
-            color: Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-            horizontalAlignment: Text.AlignLeft
-            elide: Text.ElideNone
-        }
-
-        StyledText {
-            text: {
-                if (root.diskUsagePercent === undefined || root.diskUsagePercent === null || root.diskUsagePercent === 0) {
-                    return "--%"
-                }
-                return root.diskUsagePercent.toFixed(0) + "%"
-            }
-            font.pixelSize: Theme.barTextSize(barThickness)
-            font.weight: Font.Medium
-            color: Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-            horizontalAlignment: Text.AlignLeft
-            elide: Text.ElideNone
-
-            StyledTextMetrics {
-                id: diskBaseline
-                font.pixelSize: Theme.barTextSize(barThickness)
-                font.weight: Font.Medium
-                text: "100%"
-            }
-
-            width: Math.max(diskBaseline.width, paintedWidth)
-
-            Behavior on width {
-                NumberAnimation {
-                    duration: 120
-                    easing.type: Easing.OutCubic
-                }
-            }
-        }
-    }
 }

Modules/DankBar/Widgets/FocusedApp.qml

@@ -4,21 +4,15 @@ import Quickshell.Wayland
 import Quickshell.Widgets
 import Quickshell.Hyprland
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property var parentScreen
     property bool compactMode: SettingsData.focusedWindowCompactMode
     property int availableWidth: 400
-    property real widgetThickness: 30
-    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
-    readonly property int baseWidth: contentRow.implicitWidth + horizontalPadding * 2
     readonly property int maxNormalWidth: 456
     readonly property int maxCompactWidth: 288
     readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
@@ -93,30 +87,25 @@ Rectangle {
         return activeWindow && activeWindow.title
     }
 
-    width: !hasWindowsOnCurrentWorkspace ? 0 : (isVertical ? widgetThickness : (compactMode ? Math.min(baseWidth, maxCompactWidth) : Math.min(baseWidth, maxNormalWidth)))
-    height: !hasWindowsOnCurrentWorkspace ? 0 : (isVertical ? widgetThickness : widgetThickness)
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (!activeWindow || !activeWindow.title) {
-            return "transparent";
-        }
-
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
-    clip: true
     visible: hasWindowsOnCurrentWorkspace
 
+    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: true
+
             IconImage {
                 id: appIcon
                 anchors.centerIn: parent
                 width: 18
                 height: 18
-        visible: root.isVertical && activeWindow && status === Image.Ready
+                visible: root.isVerticalOrientation && activeWindow && status === Image.Ready
                 source: {
                     if (!activeWindow || !activeWindow.appId) return ""
                     const moddedId = Paths.moddedAppId(activeWindow.appId)
@@ -134,7 +123,7 @@ Rectangle {
                 name: "sports_esports"
                 color: Theme.surfaceText
                 visible: {
-            if (!root.isVertical || !activeWindow || !activeWindow.appId) return false
+                    if (!root.isVerticalOrientation || !activeWindow || !activeWindow.appId) return false
                     const moddedId = Paths.moddedAppId(activeWindow.appId)
                     return moddedId.toLowerCase().includes("steam_app")
                 }
@@ -143,7 +132,7 @@ Rectangle {
             Text {
                 anchors.centerIn: parent
                 visible: {
-            if (!root.isVertical || !activeWindow || !activeWindow.appId) return false
+                    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")
@@ -162,14 +151,12 @@ Rectangle {
 
             Row {
                 id: contentRow
-
                 anchors.centerIn: parent
                 spacing: Theme.spacingS
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
 
                 StyledText {
                     id: appText
-
                     text: {
                         if (!activeWindow || !activeWindow.appId) {
                             return "";
@@ -178,7 +165,7 @@ Rectangle {
                         const desktopEntry = DesktopEntries.heuristicLookup(activeWindow.appId);
                         return desktopEntry && desktopEntry.name ? desktopEntry.name : activeWindow.appId;
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
@@ -190,7 +177,7 @@ Rectangle {
 
                 StyledText {
                     text: "•"
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     color: Theme.outlineButton
                     anchors.verticalCenter: parent.verticalCenter
                     visible: !compactMode && appText.text && titleText.text
@@ -198,7 +185,6 @@ Rectangle {
 
                 StyledText {
                     id: titleText
-
                     text: {
                         const title = activeWindow && activeWindow.title ? activeWindow.title : "";
                         const appName = appText.text;
@@ -216,7 +202,7 @@ Rectangle {
 
                         return title;
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
@@ -225,16 +211,17 @@ Rectangle {
                     width: Math.min(implicitWidth, compactMode ? 280 : 250)
                     visible: text.length > 0
                 }
-
+            }
+        }
     }
 
     MouseArea {
         id: mouseArea
-
         anchors.fill: parent
-        hoverEnabled: root.isVertical
+        hoverEnabled: root.isVerticalOrientation
+        acceptedButtons: Qt.NoButton
         onEntered: {
-            if (root.isVertical && activeWindow && activeWindow.appId && root.parentScreen) {
+            if (root.isVerticalOrientation && activeWindow && activeWindow.appId && root.parentScreen) {
                 tooltipLoader.active = true
                 if (tooltipLoader.item) {
                     const globalPos = mapToGlobal(width / 2, height / 2)
@@ -266,14 +253,4 @@ Rectangle {
         active: false
         sourceComponent: DankTooltip {}
     }
-
-
-    Behavior on width {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
-
 }

Modules/DankBar/Widgets/GpuTemperature.qml

@@ -1,26 +1,20 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
-    property string section: "right"
+    property var popoutTarget: null
-    property var popupTarget: null
-    property var parentScreen: null
     property var widgetData: null
-    property real barThickness: 48
-    property real widgetThickness: 30
     property int selectedGpuIndex: (widgetData && widgetData.selectedGpuIndex !== undefined) ? widgetData.selectedGpuIndex : 0
     property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
     property real displayTemp: {
         if (!DgopService.availableGpus || DgopService.availableGpus.length === 0) {
             return 0;
@@ -34,7 +28,6 @@ Rectangle {
     }
 
     function updateWidgetPciId(pciId) {
-        // Find and update this widget's pciId in the settings
         const sections = ["left", "center", "right"];
         for (let s = 0; s < sections.length; s++) {
             const sectionId = sections[s];
@@ -68,17 +61,6 @@ Rectangle {
         }
     }
 
-    width: isVertical ? widgetThickness : (gpuTempContent.implicitWidth + horizontalPadding * 2)
-    height: isVertical ? (gpuTempColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = gpuArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
     Component.onCompleted: {
         DgopService.addRef(["gpu"]);
         if (widgetData && widgetData.pciId) {
@@ -92,12 +74,10 @@ Rectangle {
         if (widgetData && widgetData.pciId) {
             DgopService.removeGpuPciId(widgetData.pciId);
         }
-
     }
 
     Connections {
         function onWidgetDataChanged() {
-            // Force property re-evaluation by triggering change detection
             root.selectedGpuIndex = Qt.binding(() => {
                 return (root.widgetData && root.widgetData.selectedGpuIndex !== undefined) ? root.widgetData.selectedGpuIndex : 0;
             });
@@ -106,36 +86,20 @@ Rectangle {
         target: SettingsData
     }
 
-    MouseArea {
+    content: Component {
-        id: gpuArea
+        Item {
-
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : gpuTempContent.implicitWidth
-        anchors.fill: parent
+            implicitHeight: root.isVerticalOrientation ? gpuTempColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-            }
-            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
-            }
-
-        }
-    }
 
             Column {
                 id: gpuTempColumn
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 1
 
                 DankIcon {
                     name: "auto_awesome_mosaic"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (root.displayTemp > 80) {
                             return Theme.tempDanger;
@@ -158,7 +122,7 @@ Rectangle {
 
                         return Math.round(root.displayTemp).toString();
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -167,13 +131,13 @@ Rectangle {
 
             Row {
                 id: gpuTempContent
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 3
 
                 DankIcon {
                     name: "auto_awesome_mosaic"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (root.displayTemp > 80) {
                             return Theme.tempDanger;
@@ -196,7 +160,7 @@ Rectangle {
 
                         return Math.round(root.displayTemp) + "°";
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
@@ -205,7 +169,7 @@ Rectangle {
 
                     StyledTextMetrics {
                         id: gpuTempBaseline
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         font.weight: Font.Medium
                         text: "100°"
                     }
@@ -219,7 +183,27 @@ Rectangle {
                         }
                     }
                 }
+            }
+        }
+    }
 
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        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 {
@@ -231,13 +215,10 @@ Rectangle {
             if (DgopService.availableGpus && DgopService.availableGpus.length > 0) {
                 const firstGpu = DgopService.availableGpus[0];
                 if (firstGpu && firstGpu.pciId) {
-                    // Save the first GPU's PCI ID to this widget's settings
                     updateWidgetPciId(firstGpu.pciId);
                     DgopService.addGpuPciId(firstGpu.pciId);
                 }
             }
         }
     }
-
-
 }

Modules/DankBar/Widgets/IdleInhibitor.qml

@@ -2,51 +2,34 @@ import QtQuick
 import QtQuick.Controls
 import Quickshell
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
+    content: Component {
-    property var axis: null
+        Item {
-    property string section: "right"
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
-    property var popupTarget: null
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-    property var parentScreen: null
-    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
-
-    width: isVertical ? widgetThickness : (idleIcon.width + horizontalPadding * 2)
-    height: isVertical ? (idleIcon.height + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
             DankIcon {
-        id: idleIcon
-
                 anchors.centerIn: parent
                 name: SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
-        size: Theme.barIconSize(barThickness, -4)
+                size: Theme.barIconSize(root.barThickness, -4)
                 color: Theme.surfaceText
             }
+        }
+    }
 
     MouseArea {
-        id: mouseArea
+        z: 1
-
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onClicked: {
-            SessionService.toggleIdleInhibit();
+            SessionService.toggleIdleInhibit()
         }
     }
-
-
 }

Modules/DankBar/Widgets/KeyboardLayoutName.qml

@@ -3,36 +3,69 @@ import QtQuick.Controls
 import Quickshell
 import Quickshell.Io
 import qs.Common
+import qs.Modules.Plugins
 import qs.Modules.ProcessList
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property real widgetThickness: 30
-    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
     property string currentLayout: ""
     property string hyprlandKeyboard: ""
 
-    width: isVertical ? widgetThickness : (contentRow.implicitWidth + horizontalPadding * 2)
+    content: Component {
-    height: isVertical ? (contentColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
+        Item {
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : contentRow.implicitWidth
-    color: {
+            implicitHeight: root.isVerticalOrientation ? contentColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-        if (SettingsData.dankBarNoBackground) {
+
-            return "transparent";
+            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
                 }
 
-        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+                StyledText {
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+                    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)
+                    font.weight: Font.Medium
+                    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 {
-        id: mouseArea
+        z: 1
-
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
@@ -51,53 +84,6 @@ Rectangle {
         }
     }
 
-    Column {
-        id: contentColumn
-
-        anchors.centerIn: parent
-        spacing: 1
-        visible: root.isVertical
-
-        DankIcon {
-            name: "keyboard"
-            size: Theme.barIconSize(barThickness)
-            color: Theme.surfaceText
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        StyledText {
-            text: {
-                if (!currentLayout) return ""
-                const parts = currentLayout.split(" ")
-                if (parts.length > 0) {
-                    return parts[0].substring(0, 2).toUpperCase()
-                }
-                return currentLayout.substring(0, 2).toUpperCase()
-            }
-            font.pixelSize: Theme.barTextSize(barThickness)
-            font.weight: Font.Medium
-            color: Theme.surfaceText
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-    }
-
-    Row {
-        id: contentRow
-
-        anchors.centerIn: parent
-        spacing: Theme.spacingS
-        visible: !root.isVertical
-
-        StyledText {
-            text: currentLayout
-            font.pixelSize: Theme.barTextSize(barThickness)
-            color: Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-    }
-
-
     Timer {
         id: updateTimer
         interval: 1000

Modules/DankBar/Widgets/LauncherButton.qml

@@ -3,82 +3,34 @@ import QtQuick.Effects
 import Quickshell
 import Quickshell.Widgets
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Item {
+BasePill {
     id: root
 
     property bool isActive: false
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property string section: "left"
-    property var popupTarget: null
-    property var parentScreen: null
-    property real widgetThickness: 30
-    property real barThickness: 48
     property var hyprlandOverviewLoader: null
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    signal clicked()
+    content: Component {
-
+        Item {
-    width: widgetThickness
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
-    height: widgetThickness
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-
-    MouseArea {
-        id: launcherArea
-
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onPressed: function (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
-                }
-                return
-            }
-
-            root.clicked();
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
-                const currentScreen = parentScreen || Screen;
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width);
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen);
-            }
-        }
-    }
-
-    Rectangle {
-        id: launcherContent
-
-        anchors.fill: parent
-        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-        color: {
-            if (SettingsData.dankBarNoBackground) {
-                return "transparent";
-            }
-
-            const baseColor = launcherArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-        }
 
             DankIcon {
                 visible: SettingsData.launcherLogoMode === "apps"
                 anchors.centerIn: parent
                 name: "apps"
-            size: Theme.barIconSize(barThickness, -4)
+                size: Theme.barIconSize(root.barThickness, -4)
                 color: Theme.surfaceText
             }
 
             SystemLogo {
                 visible: SettingsData.launcherLogoMode === "os"
                 anchors.centerIn: parent
-            width: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
-            height: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
                 colorOverride: Theme.effectiveLogoColor
                 brightnessOverride: SettingsData.launcherLogoBrightness
                 contrastOverride: SettingsData.launcherLogoContrast
@@ -87,8 +39,8 @@ Item {
             IconImage {
                 visible: SettingsData.launcherLogoMode === "compositor"
                 anchors.centerIn: parent
-            width: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
-            height: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
                 smooth: true
                 asynchronous: true
                 source: {
@@ -112,8 +64,8 @@ Item {
             IconImage {
                 visible: SettingsData.launcherLogoMode === "custom" && SettingsData.launcherLogoCustomPath !== ""
                 anchors.centerIn: parent
-            width: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
-            height: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
                 smooth: true
                 asynchronous: true
                 source: SettingsData.launcherLogoCustomPath ? "file://" + SettingsData.launcherLogoCustomPath.replace("file://", "") : ""
@@ -128,3 +80,19 @@ Item {
             }
         }
     }
+
+    MouseArea {
+        id: customMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.RightButton
+        onPressed: function (mouse){
+            if (CompositorService.isNiri) {
+                NiriService.toggleOverview()
+            } else if (root.hyprlandOverviewLoader?.item) {
+                root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
+            }
+        }
+    }
+}

Modules/DankBar/Widgets/Media.qml

@@ -1,125 +1,101 @@
 import QtQuick
 import Quickshell.Services.Mpris
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     readonly property MprisPlayer activePlayer: MprisController.activePlayer
     readonly property bool playerAvailable: activePlayer !== null
     property bool compactMode: false
     readonly property int textWidth: {
         switch (SettingsData.mediaSize) {
         case 0:
-            return 0; // No text in small mode
+            return 0;
         case 2:
-            return 180; // Large text area
+            return 180;
         default:
-            return 120; // Medium text area
+            return 120;
         }
     }
     readonly property int currentContentWidth: {
-        if (isVertical) {
+        if (isVerticalOrientation) {
-            return widgetThickness;
+            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) + horizontalPadding * 2;
+        return contentWidth + (textWidth > 0 ? textWidth + Theme.spacingXS : 0);
     }
     readonly property int currentContentHeight: {
-        if (!isVertical) {
+        if (!isVerticalOrientation) {
-            return widgetThickness;
+            return widgetThickness - horizontalPadding * 2;
         }
         const audioVizHeight = 20;
         const playButtonHeight = 24;
-        return audioVizHeight + Theme.spacingXS + playButtonHeight + horizontalPadding * 2;
+        return audioVizHeight + Theme.spacingXS + playButtonHeight;
-    }
-    property string section: "center"
-    property var popupTarget: null
-    property var parentScreen: null
-    property real barThickness: 48
-    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
-
-    signal clicked()
-
-    width: currentContentWidth
-    height: currentContentHeight
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
     }
 
-        const baseColor = Theme.widgetBaseBackgroundColor;
+    content: Component {
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+        Item {
-    }
+            implicitWidth: root.playerAvailable ? root.currentContentWidth : 0
+            implicitHeight: root.playerAvailable ? root.currentContentHeight : 0
+            opacity: root.playerAvailable ? 1 : 0
+
             states: [
                 State {
                     name: "shown"
-            when: playerAvailable
+                    when: root.playerAvailable
-
                     PropertyChanges {
-                target: root
+                        target: parent
                         opacity: 1
-                width: currentContentWidth
+                        implicitWidth: root.currentContentWidth
-                height: currentContentHeight
+                        implicitHeight: root.currentContentHeight
                     }
-
                 },
                 State {
                     name: "hidden"
-            when: !playerAvailable
+                    when: !root.playerAvailable
-
                     PropertyChanges {
-                target: root
+                        target: parent
                         opacity: 0
-                width: isVertical ? widgetThickness : 0
+                        implicitWidth: 0
-                height: isVertical ? 0 : widgetThickness
+                        implicitHeight: 0
                     }
-
                 }
             ]
             transitions: [
                 Transition {
                     from: "shown"
                     to: "hidden"
-
                     SequentialAnimation {
                         PauseAnimation {
                             duration: 500
                         }
-
                         NumberAnimation {
-                    properties: isVertical ? "opacity,height" : "opacity,width"
+                            properties: "opacity,implicitWidth,implicitHeight"
                             duration: Theme.shortDuration
                             easing.type: Theme.standardEasing
                         }
-
                     }
-
                 },
                 Transition {
                     from: "hidden"
                     to: "shown"
-
                     NumberAnimation {
-                properties: isVertical ? "opacity,height" : "opacity,width"
+                        properties: "opacity,implicitWidth,implicitHeight"
                         duration: Theme.shortDuration
                         easing.type: Theme.standardEasing
                     }
-
                 }
             ]
 
             Column {
                 id: verticalLayout
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: Theme.spacingXS
 
@@ -130,11 +106,11 @@ Rectangle {
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
                         onClicked: {
-                    if (root.popupTarget && root.popupTarget.setTriggerPosition) {
+                            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.popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
+                                root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
                             }
                             root.clicked()
                         }
@@ -178,14 +154,12 @@ Rectangle {
 
             Row {
                 id: mediaRow
-
+                visible: !root.isVerticalOrientation
-        visible: !root.isVertical
                 anchors.centerIn: parent
                 spacing: Theme.spacingXS
 
                 Row {
                     id: mediaInfo
-
                     spacing: Theme.spacingXS
 
                     AudioVisualization {
@@ -194,7 +168,6 @@ Rectangle {
 
                     Rectangle {
                         id: textContainer
-
                         property string displayText: {
                             if (!activePlayer || !activePlayer.trackTitle) {
                                 return "";
@@ -223,13 +196,12 @@ Rectangle {
 
                         StyledText {
                             id: mediaText
-
                             property bool needsScrolling: implicitWidth > textContainer.width
                             property real scrollOffset: 0
 
                             anchors.verticalCenter: parent.verticalCenter
                             text: textContainer.displayText
-                    font.pixelSize: Theme.barTextSize(barThickness)
+                            font.pixelSize: Theme.barTextSize(root.barThickness)
                             color: Theme.surfaceText
                             font.weight: Font.Medium
                             wrapMode: Text.NoWrap
@@ -241,7 +213,6 @@ Rectangle {
 
                             SequentialAnimation {
                                 id: scrollAnimation
-
                                 running: mediaText.needsScrolling && textContainer.visible
                                 loops: Animation.Infinite
 
@@ -269,9 +240,7 @@ Rectangle {
                                     duration: Math.max(1000, (mediaText.implicitWidth - textContainer.width + 5) * 60)
                                     easing.type: Easing.Linear
                                 }
-
                             }
-
                         }
 
                         MouseArea {
@@ -279,18 +248,16 @@ Rectangle {
                             enabled: root.playerAvailable
                             cursorShape: Qt.PointingHandCursor
                             onPressed: {
-                        if (root.popupTarget && root.popupTarget.setTriggerPosition) {
+                                if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
                                     const globalPos = mapToGlobal(0, 0)
                                     const currentScreen = root.parentScreen || Screen
-                            const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.width)
+                                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.width)
-                            root.popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
+                                    root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
                                 }
                                 root.clicked()
                             }
                         }
-
                     }
-
                 }
 
                 Row {
@@ -315,7 +282,6 @@ Rectangle {
 
                         MouseArea {
                             id: prevArea
-
                             anchors.fill: parent
                             enabled: root.playerAvailable
                             hoverEnabled: true
@@ -326,7 +292,6 @@ Rectangle {
                                 }
                             }
                         }
-
                     }
 
                     Rectangle {
@@ -355,7 +320,6 @@ Rectangle {
                                 }
                             }
                         }
-
                     }
 
                     Rectangle {
@@ -376,7 +340,6 @@ Rectangle {
 
                         MouseArea {
                             id: nextArea
-
                             anchors.fill: parent
                             enabled: root.playerAvailable
                             hoverEnabled: true
@@ -387,26 +350,9 @@ Rectangle {
                                 }
                             }
                         }
-
-            }
-
-        }
-
-    }
-
-
-    Behavior on width {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
                     }
                 }
-
-    Behavior on height {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
             }
         }
-
+    }
 }

Modules/DankBar/Widgets/NetworkMonitor.qml

@@ -1,70 +1,47 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Modules.Plugins
 import qs.Modules.ProcessList
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property int availableWidth: 400
-    readonly property int baseWidth: contentRow.implicitWidth + Theme.spacingS * 2
-    readonly property int maxNormalWidth: 456
-    property real widgetThickness: 30
-    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
-
     function formatNetworkSpeed(bytesPerSec) {
         if (bytesPerSec < 1024) {
-            return bytesPerSec.toFixed(0) + " B/s";
+            return bytesPerSec.toFixed(0) + " B/s"
         } else if (bytesPerSec < 1024 * 1024) {
-            return (bytesPerSec / 1024).toFixed(1) + " KB/s";
+            return (bytesPerSec / 1024).toFixed(1) + " KB/s"
         } else if (bytesPerSec < 1024 * 1024 * 1024) {
-            return (bytesPerSec / (1024 * 1024)).toFixed(1) + " MB/s";
+            return (bytesPerSec / (1024 * 1024)).toFixed(1) + " MB/s"
         } else {
-            return (bytesPerSec / (1024 * 1024 * 1024)).toFixed(1) + " GB/s";
+            return (bytesPerSec / (1024 * 1024 * 1024)).toFixed(1) + " GB/s"
         }
     }
 
-    width: isVertical ? widgetThickness : (contentRow.implicitWidth + horizontalPadding * 2)
-    height: isVertical ? (contentColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = networkArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
     Component.onCompleted: {
-        DgopService.addRef(["network"]);
+        DgopService.addRef(["network"])
     }
     Component.onDestruction: {
-        DgopService.removeRef(["network"]);
+        DgopService.removeRef(["network"])
     }
 
-    MouseArea {
+    content: Component {
-        id: networkArea
+        Item {
-
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : contentRow.implicitWidth
-        anchors.fill: parent
+            implicitHeight: root.isVerticalOrientation ? contentColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-    }
 
             Column {
                 id: contentColumn
-
                 anchors.centerIn: parent
                 spacing: 2
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
 
                 DankIcon {
                     name: "network_check"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -76,7 +53,7 @@ Rectangle {
                         if (rate < 1024 * 1024) return (rate / 1024).toFixed(0) + "K"
                         return (rate / (1024 * 1024)).toFixed(0) + "M"
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.info
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -89,7 +66,7 @@ Rectangle {
                         if (rate < 1024 * 1024) return (rate / 1024).toFixed(0) + "K"
                         return (rate / (1024 * 1024)).toFixed(0) + "M"
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.error
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -98,14 +75,13 @@ Rectangle {
 
             Row {
                 id: contentRow
-
                 anchors.centerIn: parent
                 spacing: Theme.spacingS
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
 
                 DankIcon {
                     name: "network_check"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
                 }
@@ -116,13 +92,13 @@ Rectangle {
 
                     StyledText {
                         text: "↓"
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.info
                     }
 
                     StyledText {
-                text: DgopService.networkRxRate > 0 ? formatNetworkSpeed(DgopService.networkRxRate) : "0 B/s"
+                        text: DgopService.networkRxRate > 0 ? root.formatNetworkSpeed(DgopService.networkRxRate) : "0 B/s"
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         font.weight: Font.Medium
                         color: Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
@@ -132,7 +108,7 @@ Rectangle {
 
                         StyledTextMetrics {
                             id: rxBaseline
-                    font.pixelSize: Theme.barTextSize(barThickness)
+                            font.pixelSize: Theme.barTextSize(root.barThickness)
                             font.weight: Font.Medium
                             text: "88.8 MB/s"
                         }
@@ -146,7 +122,6 @@ Rectangle {
                             }
                         }
                     }
-
                 }
 
                 Row {
@@ -155,13 +130,13 @@ Rectangle {
 
                     StyledText {
                         text: "↑"
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.error
                     }
 
                     StyledText {
-                text: DgopService.networkTxRate > 0 ? formatNetworkSpeed(DgopService.networkTxRate) : "0 B/s"
+                        text: DgopService.networkTxRate > 0 ? root.formatNetworkSpeed(DgopService.networkTxRate) : "0 B/s"
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         font.weight: Font.Medium
                         color: Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
@@ -171,7 +146,7 @@ Rectangle {
 
                         StyledTextMetrics {
                             id: txBaseline
-                    font.pixelSize: Theme.barTextSize(barThickness)
+                            font.pixelSize: Theme.barTextSize(root.barThickness)
                             font.weight: Font.Medium
                             text: "88.8 MB/s"
                         }
@@ -185,10 +160,8 @@ Rectangle {
                             }
                         }
                     }
-
                 }
-
             }
-
+        }
-
+    }
 }

Modules/DankBar/Widgets/NotepadButton.qml

@@ -1,22 +1,13 @@
 import QtQuick
 import Quickshell.Hyprland
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property string section: "right"
-    property var parentScreen: null
-    property real widgetThickness: 30
-    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
-
-    signal clicked()
-
     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 : ""
@@ -43,25 +34,18 @@ Rectangle {
     readonly property var notepadInstance: resolveNotepadInstance()
     readonly property bool isActive: notepadInstance?.isVisible ?? false
 
-    width: isVertical ? widgetThickness : (notepadIcon.width + horizontalPadding * 2)
+    content: Component {
-    height: isVertical ? (notepadIcon.height + horizontalPadding * 2) : widgetThickness
+        Item {
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
-    color: {
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = notepadArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
             DankIcon {
                 id: notepadIcon
 
                 anchors.centerIn: parent
                 name: "assignment"
-        size: Theme.barIconSize(barThickness, -4)
+                size: Theme.barIconSize(root.barThickness, -4)
-        color: notepadArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+                color: root.isActive ? Theme.primary : Theme.surfaceText
             }
 
             Rectangle {
@@ -76,21 +60,17 @@ Rectangle {
                 visible: NotepadStorageService.tabs && NotepadStorageService.tabs.length > 0
                 opacity: 0.8
             }
+        }
+    }
 
     MouseArea {
-        id: notepadArea
-
         anchors.fill: parent
-        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton
-        cursorShape: Qt.PointingHandCursor
         onPressed: {
             const inst = root.notepadInstance
             if (inst) {
                 inst.toggle()
             }
-            root.clicked()
         }
     }
-
-
 }

Modules/DankBar/Widgets/NotificationCenterButton.qml

@@ -1,64 +1,24 @@
 import QtQuick
 import qs.Common
+import qs.Modules.Plugins
 import qs.Widgets
 
-Item {
+BasePill {
     id: root
 
     property bool hasUnread: false
     property bool isActive: false
-    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 ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    signal clicked()
+    content: Component {
-
+        Item {
-    width: widgetThickness
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
-    height: widgetThickness
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-
-    MouseArea {
-        id: notificationArea
-
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton
-        onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-            }
-            root.clicked()
-        }
-    }
-
-    Rectangle {
-        id: notificationContent
-
-        anchors.fill: parent
-        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-        color: {
-            if (SettingsData.dankBarNoBackground) {
-                return "transparent"
-            }
-
-            const baseColor = notificationArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
-            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
-        }
 
             DankIcon {
-            anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
-            anchors.verticalCenter: parent.verticalCenter
                 name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
-            size: Theme.barIconSize(barThickness, -4)
+                size: Theme.barIconSize(root.barThickness, -4)
-            color: SessionData.doNotDisturb ? Theme.error : (notificationArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText)
+                color: SessionData.doNotDisturb ? Theme.error : (root.isActive ? Theme.primary : Theme.surfaceText)
             }
 
             Rectangle {
@@ -74,3 +34,4 @@ Item {
             }
         }
     }
+}

Modules/DankBar/Widgets/PrivacyIndicator.qml

@@ -4,7 +4,7 @@ import qs.Common
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+Item {
     id: root
 
     property bool isVertical: axis?.isVertical ?? false
@@ -19,26 +19,167 @@ Rectangle {
     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 ? widgetThickness : (hasActivePrivacy ? (contentWidth + horizontalPadding * 2) : 0)
+    width: isVertical ? barThickness : visualWidth
-    height: isVertical ? (hasActivePrivacy ? (contentHeight + horizontalPadding * 2) : 0) : (hasActivePrivacy ? widgetThickness : 0)
+    height: isVertical ? visualHeight : barThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     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 "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);
+            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 {
-        // Privacy indicator click handler
-
         id: privacyArea
-
+        z: -1
         anchors.fill: parent
         hoverEnabled: hasActivePrivacy
         enabled: hasActivePrivacy
@@ -47,151 +188,8 @@ Rectangle {
         }
     }
 
-    Column {
-        anchors.centerIn: parent
-        spacing: Theme.spacingXS
-        visible: root.isVertical && 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 && 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
-            }
-
-        }
-
-    }
-
     Rectangle {
         id: tooltip
-
         width: tooltipText.contentWidth + Theme.spacingM * 2
         height: tooltipText.contentHeight + Theme.spacingS * 2
         radius: Theme.cornerRadius
@@ -206,7 +204,6 @@ Rectangle {
 
         StyledText {
             id: tooltipText
-
             anchors.centerIn: parent
             text: PrivacyService.getPrivacySummary()
             font.pixelSize: Theme.barTextSize(barThickness)
@@ -232,9 +229,7 @@ Rectangle {
                 duration: Theme.shortDuration
                 easing.type: Theme.standardEasing
             }
-
         }
-
     }
 
     Behavior on width {
@@ -244,7 +239,6 @@ Rectangle {
             duration: Theme.mediumDuration
             easing.type: Theme.emphasizedEasing
         }
-
     }
 
     Behavior on height {
@@ -254,7 +248,5 @@ Rectangle {
             duration: Theme.mediumDuration
             easing.type: Theme.emphasizedEasing
         }
-
     }
-
 }

Modules/DankBar/Widgets/RamMonitor.qml

@@ -1,37 +1,19 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
-    property string section: "right"
+    property var popoutTarget: null
-    property var popupTarget: null
-    property var parentScreen: null
-    property real barThickness: 48
-    property real widgetThickness: 30
     property var widgetData: null
     property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
-
-    width: isVertical ? widgetThickness : (ramContent.implicitWidth + horizontalPadding * 2)
-    height: isVertical ? (ramColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = ramArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
     Component.onCompleted: {
         DgopService.addRef(["memory"]);
@@ -40,36 +22,20 @@ Rectangle {
         DgopService.removeRef(["memory"]);
     }
 
-    MouseArea {
+    content: Component {
-        id: ramArea
+        Item {
-
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : ramContent.implicitWidth
-        anchors.fill: parent
+            implicitHeight: root.isVerticalOrientation ? ramColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-            }
-            DgopService.setSortBy("memory");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
-            }
-
-        }
-    }
 
             Column {
                 id: ramColumn
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 1
 
                 DankIcon {
                     name: "developer_board"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (DgopService.memoryUsage > 90) {
                             return Theme.tempDanger;
@@ -92,7 +58,7 @@ Rectangle {
 
                         return DgopService.memoryUsage.toFixed(0);
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -101,13 +67,13 @@ Rectangle {
 
             Row {
                 id: ramContent
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 3
 
                 DankIcon {
                     name: "developer_board"
-            size: Theme.barIconSize(barThickness)
+                    size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (DgopService.memoryUsage > 90) {
                             return Theme.tempDanger;
@@ -130,7 +96,7 @@ Rectangle {
 
                         return DgopService.memoryUsage.toFixed(0) + "%";
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
@@ -139,7 +105,7 @@ Rectangle {
 
                     StyledTextMetrics {
                         id: ramBaseline
-                font.pixelSize: Theme.barTextSize(barThickness)
+                        font.pixelSize: Theme.barTextSize(root.barThickness)
                         font.weight: Font.Medium
                         text: "100%"
                     }
@@ -153,7 +119,26 @@ Rectangle {
                         }
                     }
                 }
-
+            }
+        }
     }
 
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        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();
+            }
+        }
+    }
 }

Modules/DankBar/Widgets/RunningApps.qml

@@ -7,7 +7,7 @@ import qs.Common
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+Item {
     id: root
 
     property bool isVertical: axis?.isVertical ?? false
@@ -66,10 +66,16 @@ Rectangle {
         }
     }
 
-    width: isVertical ? widgetThickness : calculatedSize
+    width: isVertical ? barThickness : calculatedSize
-    height: isVertical ? calculatedSize : widgetThickness
+    height: isVertical ? calculatedSize : barThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     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) {
@@ -83,6 +89,7 @@ Rectangle {
             const baseColor = Theme.widgetBaseBackgroundColor;
             return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
         }
+    }
 
     MouseArea {
         anchors.fill: parent
@@ -210,12 +217,16 @@ Rectangle {
                     }
                     return appName + (windowTitle ? " • " + windowTitle : "")
                 }
+                readonly property real visualWidth: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
 
-                width: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
+                width: visualWidth
-                height: 24
+                height: root.barThickness
 
                 Rectangle {
-                    anchors.fill: parent
+                    id: visualContent
+                    width: delegateItem.visualWidth
+                    height: 24
+                    anchors.centerIn: parent
                     radius: Theme.cornerRadius
                     color: {
                         if (isFocused) {
@@ -237,8 +248,6 @@ Rectangle {
                         }
                     }
 
-                }
-
                 // App icon
                 IconImage {
                     id: iconImg
@@ -334,10 +343,10 @@ Rectangle {
                     elide: Text.ElideRight
                     maximumLineCount: 1
                 }
+                }
 
                 MouseArea {
                     id: mouseArea
-
                     anchors.fill: parent
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
@@ -442,12 +451,16 @@ Rectangle {
                     }
                     return appName + (windowTitle ? " • " + windowTitle : "")
                 }
+                readonly property real visualWidth: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
 
-                width: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
+                width: root.barThickness
                 height: 24
 
                 Rectangle {
-                    anchors.fill: parent
+                    id: visualContent
+                    width: delegateItem.visualWidth
+                    height: 24
+                    anchors.centerIn: parent
                     radius: Theme.cornerRadius
                     color: {
                         if (isFocused) {
@@ -469,8 +482,6 @@ Rectangle {
                         }
                     }
 
-                }
-
                 IconImage {
                     id: iconImg
                     anchors.left: parent.left
@@ -563,10 +574,10 @@ Rectangle {
                     elide: Text.ElideRight
                     maximumLineCount: 1
                 }
+                }
 
                 MouseArea {
                     id: mouseArea
-
                     anchors.fill: parent
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor

Modules/DankBar/Widgets/SystemTrayBar.qml

@@ -7,7 +7,7 @@ import Quickshell.Widgets
 import qs.Common
 import qs.Widgets
 
-Rectangle {
+Item {
     id: root
 
     property bool isVertical: axis?.isVertical ?? false
@@ -15,6 +15,7 @@ Rectangle {
     property var parentWindow: null
     property var parentScreen: null
     property real widgetThickness: 30
+    property real barThickness: 48
     property bool isAtBottom: false
     readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
     readonly property var hiddenTrayIds: {
@@ -31,9 +32,18 @@ Rectangle {
         })
     }
     readonly property int calculatedSize: visibleTrayItems.length > 0 ? visibleTrayItems.length * 24 + horizontalPadding * 2 : 0
+    readonly property real visualWidth: isVertical ? widgetThickness : calculatedSize
+    readonly property real visualHeight: isVertical ? calculatedSize : widgetThickness
 
-    width: isVertical ? widgetThickness : calculatedSize
+    width: isVertical ? barThickness : visualWidth
-    height: isVertical ? calculatedSize : widgetThickness
+    height: isVertical ? visualHeight : barThickness
+    visible: visibleTrayItems.length > 0
+
+    Rectangle {
+        id: visualBackground
+        width: root.visualWidth
+        height: root.visualHeight
+        anchors.centerIn: parent
         radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
         color: {
             if (visibleTrayItems.length === 0) {
@@ -47,7 +57,7 @@ Rectangle {
             const baseColor = Theme.widgetBaseBackgroundColor;
             return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
         }
-    visible: visibleTrayItems.length > 0
+    }
 
     Loader {
         id: layoutLoader
@@ -64,6 +74,7 @@ Rectangle {
                 model: root.visibleTrayItems
 
                 delegate: Item {
+                    id: delegateRoot
                     property var trayItem: modelData
                     property string iconSource: {
                         let icon = trayItem && trayItem.icon;
@@ -94,25 +105,26 @@ Rectangle {
                     }
 
                     width: 24
-                height: 24
+                    height: root.barThickness
 
                     Rectangle {
-                    anchors.fill: parent
+                        id: visualContent
+                        width: 24
+                        height: 24
+                        anchors.centerIn: parent
                         radius: Theme.cornerRadius
                         color: trayItemArea.containsMouse ? Theme.primaryHover : "transparent"
 
-
-                }
-
                         IconImage {
                             anchors.centerIn: parent
                             width: 16
                             height: 16
-                    source: parent.iconSource
+                            source: delegateRoot.iconSource
                             asynchronous: true
                             smooth: true
                             mipmap: true
                         }
+                    }
 
                     MouseArea {
                         id: trayItemArea
@@ -122,22 +134,20 @@ Rectangle {
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
                         onClicked: (mouse) => {
-                        if (!trayItem) {
+                            if (!delegateRoot.trayItem) {
                                 return;
                             }
 
-                        if (mouse.button === Qt.LeftButton && !trayItem.onlyMenu) {
+                            if (mouse.button === Qt.LeftButton && !delegateRoot.trayItem.onlyMenu) {
-                            trayItem.activate();
+                                delegateRoot.trayItem.activate();
                                 return ;
                             }
-                        if (trayItem.hasMenu) {
+                            if (delegateRoot.trayItem.hasMenu) {
-                            root.showForTrayItem(trayItem, parent, parentScreen, root.isAtBottom, root.isVertical, root.axis);
+                                root.showForTrayItem(delegateRoot.trayItem, visualContent, parentScreen, root.isAtBottom, root.isVertical, root.axis);
                             }
                         }
                     }
-
                 }
-
             }
         }
     }
@@ -151,6 +161,7 @@ Rectangle {
                 model: root.visibleTrayItems
 
                 delegate: Item {
+                    id: delegateRoot
                     property var trayItem: modelData
                     property string iconSource: {
                         let icon = trayItem && trayItem.icon;
@@ -180,24 +191,27 @@ Rectangle {
                         return "";
                     }
 
-                width: 24
+                    width: root.barThickness
                     height: 24
 
                     Rectangle {
-                    anchors.fill: parent
+                        id: visualContent
+                        width: 24
+                        height: 24
+                        anchors.centerIn: parent
                         radius: Theme.cornerRadius
                         color: trayItemArea.containsMouse ? Theme.primaryHover : "transparent"
-                }
 
                         IconImage {
                             anchors.centerIn: parent
                             width: 16
                             height: 16
-                    source: parent.iconSource
+                            source: delegateRoot.iconSource
                             asynchronous: true
                             smooth: true
                             mipmap: true
                         }
+                    }
 
                     MouseArea {
                         id: trayItemArea
@@ -207,22 +221,20 @@ Rectangle {
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
                         onClicked: (mouse) => {
-                        if (!trayItem) {
+                            if (!delegateRoot.trayItem) {
                                 return;
                             }
 
-                        if (mouse.button === Qt.LeftButton && !trayItem.onlyMenu) {
+                            if (mouse.button === Qt.LeftButton && !delegateRoot.trayItem.onlyMenu) {
-                            trayItem.activate();
+                                delegateRoot.trayItem.activate();
                                 return ;
                             }
-                        if (trayItem.hasMenu) {
+                            if (delegateRoot.trayItem.hasMenu) {
-                            root.showForTrayItem(trayItem, parent, parentScreen, root.isAtBottom, root.isVertical, root.axis);
+                                root.showForTrayItem(delegateRoot.trayItem, visualContent, parentScreen, root.isAtBottom, root.isVertical, root.axis);
                             }
                         }
                     }
-
                 }
-
             }
         }
     }

Modules/DankBar/Widgets/SystemUpdate.qml

@@ -1,57 +1,40 @@
 import QtQuick
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
     property bool isActive: false
-    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 ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
     readonly property bool hasUpdates: SystemUpdateService.updateCount > 0
     readonly property bool isChecking: SystemUpdateService.isChecking
 
-    signal clicked()
-
     Ref {
         service: SystemUpdateService
     }
 
-    width: isVertical ? widgetThickness : (updaterIcon.width + horizontalPadding * 2)
+    content: Component {
-    height: isVertical ? widgetThickness : widgetThickness
+        Item {
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+            implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : updaterIcon.implicitWidth
-    color: {
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = updaterArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
             DankIcon {
                 id: statusIcon
-
                 anchors.centerIn: parent
-        visible: root.isVertical
+                visible: root.isVerticalOrientation
                 name: {
-            if (isChecking) return "refresh";
+                    if (root.isChecking) return "refresh"
-            if (SystemUpdateService.hasError) return "error";
+                    if (SystemUpdateService.hasError) return "error"
-            if (hasUpdates) return "system_update_alt";
+                    if (root.hasUpdates) return "system_update_alt"
-            return "check_circle";
+                    return "check_circle"
                 }
-        size: Theme.barIconSize(barThickness, -4)
+                size: Theme.barIconSize(root.barThickness, -4)
                 color: {
-            if (SystemUpdateService.hasError) return Theme.error;
+                    if (SystemUpdateService.hasError) return Theme.error
-            if (hasUpdates) return Theme.primary;
+                    if (root.hasUpdates) return Theme.primary
-            return (updaterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText);
+                    return root.isActive ? Theme.primary : Theme.surfaceText
                 }
 
                 RotationAnimation {
@@ -61,7 +44,7 @@ Rectangle {
                     from: 0
                     to: 360
                     duration: 1000
-            running: isChecking
+                    running: root.isChecking
                     loops: Animation.Infinite
 
                     onRunningChanged: {
@@ -81,31 +64,29 @@ Rectangle {
                 anchors.top: parent.top
                 anchors.rightMargin: SettingsData.dankBarNoBackground ? 0 : 6
                 anchors.topMargin: SettingsData.dankBarNoBackground ? 0 : 6
-        visible: root.isVertical && root.hasUpdates && !root.isChecking
+                visible: root.isVerticalOrientation && root.hasUpdates && !root.isChecking
             }
 
             Row {
                 id: updaterIcon
-
                 anchors.centerIn: parent
                 spacing: Theme.spacingXS
-        visible: !root.isVertical
+                visible: !root.isVerticalOrientation
 
                 DankIcon {
                     id: statusIconHorizontal
-
                     anchors.verticalCenter: parent.verticalCenter
                     name: {
-                if (isChecking) return "refresh";
+                        if (root.isChecking) return "refresh"
-                if (SystemUpdateService.hasError) return "error";
+                        if (SystemUpdateService.hasError) return "error"
-                if (hasUpdates) return "system_update_alt";
+                        if (root.hasUpdates) return "system_update_alt"
-                return "check_circle";
+                        return "check_circle"
                     }
-            size: Theme.barIconSize(barThickness, -4)
+                    size: Theme.barIconSize(root.barThickness, -4)
                     color: {
-                if (SystemUpdateService.hasError) return Theme.error;
+                        if (SystemUpdateService.hasError) return Theme.error
-                if (hasUpdates) return Theme.primary;
+                        if (root.hasUpdates) return Theme.primary
-                return (updaterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText);
+                        return root.isActive ? Theme.primary : Theme.surfaceText
                     }
 
                     RotationAnimation {
@@ -115,7 +96,7 @@ Rectangle {
                         from: 0
                         to: 360
                         duration: 1000
-                running: isChecking
+                        running: root.isChecking
                         loops: Animation.Infinite
 
                         onRunningChanged: {
@@ -128,31 +109,30 @@ Rectangle {
 
                 StyledText {
                     id: countText
-
                     anchors.verticalCenter: parent.verticalCenter
                     text: SystemUpdateService.updateCount.toString()
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     font.weight: Font.Medium
                     color: Theme.surfaceText
-            visible: hasUpdates && !isChecking
+                    visible: root.hasUpdates && !root.isChecking
+                }
+            }
         }
     }
 
     MouseArea {
-        id: updaterArea
+        z: 1
-
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
                 const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
             }
-            root.clicked();
+            root.clicked()
         }
     }
-
 }

Modules/DankBar/Widgets/Vpn.qml

@@ -1,47 +1,36 @@
 import QtQuick
 import Quickshell
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
     Ref {
         service: VpnService
     }
 
-    property bool isVertical: axis?.isVertical ?? false
+    property var popoutTarget: null
-    property var axis: null
-    property int widgetThickness: 28
-    property int barThickness: 32
-    property string section: "right"
-    property var popupTarget: null
-    property var parentScreen: null
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     signal toggleVpnPopup()
 
-    width: isVertical ? widgetThickness : (Theme.iconSize + horizontalPadding * 2)
+    content: Component {
-    height: isVertical ? (Theme.iconSize + horizontalPadding * 2) : widgetThickness
+        Item {
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
-    color: {
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = clickArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
             DankIcon {
                 id: icon
 
                 name: VpnService.isBusy ? "sync" : (VpnService.connected ? "vpn_lock" : "vpn_key_off")
-        size: Theme.barIconSize(barThickness, -4)
+                size: Theme.barIconSize(root.barThickness, -4)
                 color: VpnService.connected ? Theme.primary : Theme.surfaceText
                 anchors.centerIn: parent
             }
+        }
+    }
 
     Loader {
         id: tooltipLoader
@@ -55,17 +44,18 @@ Rectangle {
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
         onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
                 const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
             }
             root.toggleVpnPopup();
         }
         onEntered: {
-            if (root.parentScreen && !(popupTarget && popupTarget.shouldBeVisible)) {
+            if (root.parentScreen && !(popoutTarget && popoutTarget.shouldBeVisible)) {
                 tooltipLoader.active = true
                 if (tooltipLoader.item) {
                     let tooltipText = ""
@@ -80,7 +70,7 @@ Rectangle {
                         }
                     }
 
-                    if (root.isVertical) {
+                    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
@@ -103,5 +93,4 @@ Rectangle {
             tooltipLoader.active = false
         }
     }
-
 }

Modules/DankBar/Widgets/Weather.qml

@@ -1,48 +1,36 @@
 import QtQuick
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+BasePill {
     id: root
 
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property string section: "center"
-    property var popupTarget: null
-    property var parentScreen: null
-    property real barThickness: 48
-    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
-
-    signal clicked()
-
     visible: SettingsData.weatherEnabled
-    width: isVertical ? widgetThickness : (visible ? Math.min(100, weatherRow.implicitWidth + horizontalPadding * 2) : 0)
-    height: isVertical ? (weatherColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-    color: {
-        if (SettingsData.dankBarNoBackground) {
-            return "transparent";
-        }
-
-        const baseColor = weatherArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-    }
 
     Ref {
         service: WeatherService
     }
 
+    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.isVertical
+                visible: root.isVerticalOrientation
                 anchors.centerIn: parent
                 spacing: 1
 
                 DankIcon {
                     name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
-            size: Theme.barIconSize(barThickness, -6)
+                    size: Theme.barIconSize(root.barThickness, -6)
                     color: Theme.primary
                     anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -55,7 +43,7 @@ Rectangle {
                         }
                         return temp;
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -63,14 +51,13 @@ Rectangle {
 
             Row {
                 id: weatherRow
-
+                visible: !root.isVerticalOrientation
-        visible: !root.isVertical
                 anchors.centerIn: parent
                 spacing: Theme.spacingXS
 
                 DankIcon {
                     name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
-            size: Theme.barIconSize(barThickness, -6)
+                    size: Theme.barIconSize(root.barThickness, -6)
                     color: Theme.primary
                     anchors.verticalCenter: parent.verticalCenter
                 }
@@ -84,37 +71,11 @@ Rectangle {
 
                         return temp + "°" + (SettingsData.useFahrenheit ? "F" : "C");
                     }
-            font.pixelSize: Theme.barTextSize(barThickness)
+                    font.pixelSize: Theme.barTextSize(root.barThickness)
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
                 }
-
-    }
-
-    MouseArea {
-        id: weatherArea
-
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onPressed: {
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-            }
-            root.clicked();
             }
         }
-
-
-    Behavior on width {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
     }
-
-    }
-
 }

Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -7,7 +7,7 @@ import qs.Common
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+Item {
     id: root
 
     property bool isVertical: axis?.isVertical ?? false
@@ -16,6 +16,7 @@ Rectangle {
     property real widgetHeight: 30
     property real barThickness: 48
     property var hyprlandOverviewLoader: null
+    property var parentScreen: null
     readonly property var sortedToplevels: {
         return CompositorService.filterCurrentWorkspace(CompositorService.sortedToplevels, parentScreen?.name);
     }
@@ -201,9 +202,9 @@ Rectangle {
         return currentMonitor.activeWorkspace?.id ?? 1
     }
 
-    readonly property real padding: isVertical
+    readonly property real padding: Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
-        ? Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real visualWidth: isVertical ? widgetHeight : (workspaceRow.implicitWidth + padding * 2)
-        : (widgetHeight - workspaceRow.implicitHeight) / 2
+    readonly property real visualHeight: isVertical ? (workspaceRow.implicitHeight + padding * 2) : widgetHeight
 
     function getRealWorkspaces() {
         return root.workspaceList.filter(ws => {
@@ -232,8 +233,15 @@ Rectangle {
         }
     }
 
-    width: isVertical ? widgetHeight : (workspaceRow.implicitWidth + padding * 2)
+    width: isVertical ? barThickness : visualWidth
-    height: isVertical ? (workspaceRow.implicitHeight + padding * 2) : widgetHeight
+    height: isVertical ? visualHeight : barThickness
+    visible: CompositorService.isNiri || CompositorService.isHyprland
+
+    Rectangle {
+        id: visualBackground
+        width: root.visualWidth
+        height: root.visualHeight
+        anchors.centerIn: parent
         radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
         color: {
             if (SettingsData.dankBarNoBackground)
@@ -241,7 +249,7 @@ Rectangle {
             const baseColor = Theme.widgetBaseBackgroundColor
             return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
         }
-    visible: CompositorService.isNiri || CompositorService.isHyprland
+    }
 
     MouseArea {
         anchors.fill: parent
@@ -357,7 +365,7 @@ Rectangle {
         Repeater {
             model: root.workspaceList
 
-            Rectangle {
+            Item {
                 id: delegateRoot
 
                 property bool isActive: {
@@ -389,6 +397,33 @@ Rectangle {
                 property bool loadedHasIcon: false
                 property var loadedIcons: []
 
+                readonly property real visualWidth: {
+                    if (root.isVertical) {
+                        return SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5
+                    } else {
+                        if (SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
+                            const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons)
+                            const iconsWidth = numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0)
+                            const baseWidth = isActive ? root.widgetHeight * 0.9 + Theme.spacingXS : root.widgetHeight * 0.7
+                            return baseWidth + iconsWidth
+                        }
+                        return isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7
+                    }
+                }
+                readonly property real visualHeight: {
+                    if (root.isVertical) {
+                        if (SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
+                            const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons)
+                            const iconsHeight = numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0)
+                            const baseHeight = isActive ? root.widgetHeight * 0.9 + Theme.spacingXS : root.widgetHeight * 0.7
+                            return baseHeight + iconsHeight
+                        }
+                        return isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7
+                    } else {
+                        return SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5
+                    }
+                }
+
                 Timer {
                     id: dataUpdateTimer
                     interval: 50
@@ -430,32 +465,14 @@ Rectangle {
                     dataUpdateTimer.restart()
                 }
 
-                width: {
+                width: root.isVertical ? root.barThickness : visualWidth
-                    if (root.isVertical) {
+                height: root.isVertical ? visualHeight : root.barThickness
-                        return SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5;
+
-                    } else {
+                Rectangle {
-                        if (SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
+                    id: visualContent
-                            const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons);
+                    width: delegateRoot.visualWidth
-                            const iconsWidth = numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0);
+                    height: delegateRoot.visualHeight
-                            const baseWidth = isActive ? root.widgetHeight * 0.9 + Theme.spacingXS : root.widgetHeight * 0.7;
+                    anchors.centerIn: parent
-                            return baseWidth + iconsWidth;
-                        }
-                        return isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7;
-                    }
-                }
-                height: {
-                    if (root.isVertical) {
-                        if (SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
-                            const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons);
-                            const iconsHeight = numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0);
-                            const baseHeight = isActive ? root.widgetHeight * 0.9 + Theme.spacingXS : root.widgetHeight * 0.7;
-                            return baseHeight + iconsHeight;
-                        }
-                        return isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7;
-                    } else {
-                        return SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5;
-                    }
-                }
                     radius: Theme.cornerRadius
                     color: isActive ? Theme.primary : isUrgent ? Theme.error : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha
 
@@ -492,26 +509,6 @@ Rectangle {
                         }
                     }
 
-                MouseArea {
-                    id: mouseArea
-
-                    anchors.fill: parent
-                    hoverEnabled: !isPlaceholder
-                    cursorShape: isPlaceholder ? Qt.ArrowCursor : Qt.PointingHandCursor
-                    enabled: !isPlaceholder
-                    onClicked: {
-                        if (isPlaceholder) {
-                            return
-                        }
-
-                        if (CompositorService.isNiri) {
-                            NiriService.switchToWorkspace(modelData - 1)
-                        } else if (CompositorService.isHyprland && modelData?.id) {
-                            Hyprland.dispatch(`workspace ${modelData.id}`)
-                        }
-                    }
-                }
-
                     Loader {
                         id: appIconsLoader
                         anchors.fill: parent
@@ -716,8 +713,27 @@ Rectangle {
                         }
                     }
                 }
+                }
+
+                MouseArea {
+                    id: mouseArea
+                    anchors.fill: parent
+                    hoverEnabled: !isPlaceholder
+                    cursorShape: isPlaceholder ? Qt.ArrowCursor : Qt.PointingHandCursor
+                    enabled: !isPlaceholder
+                    onClicked: {
+                        if (isPlaceholder) {
+                            return
+                        }
+
+                        if (CompositorService.isNiri) {
+                            NiriService.switchToWorkspace(modelData - 1)
+                        } else if (CompositorService.isHyprland && modelData?.id) {
+                            Hyprland.dispatch(`workspace ${modelData.id}`)
+                        }
+                    }
+                }
 
-                // --- LOGIC / TRIGGERS ---
                 Component.onCompleted: updateAllData()
 
                 Connections {

Modules/Plugins/BasePill.qml

@@ -3,7 +3,7 @@ import qs.Common
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+Item {
     id: root
 
     property var axis: null
@@ -12,15 +12,23 @@ Rectangle {
     property var parentScreen: null
     property real widgetThickness: 30
     property real barThickness: 48
-    property bool isVerticalOrientation: false
     property alias content: contentLoader.sourceComponent
-
+    property bool isVerticalOrientation: axis?.isVertical ?? false
     readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+    readonly property real visualWidth: isVerticalOrientation ? widgetThickness : (contentLoader.item ? (contentLoader.item.implicitWidth + horizontalPadding * 2) : 0)
+    readonly property real visualHeight: isVerticalOrientation ? (contentLoader.item ? (contentLoader.item.implicitHeight + horizontalPadding * 2) : 0) : widgetThickness
+    readonly property alias visualContent: visualContent
 
     signal clicked()
 
-    width: isVerticalOrientation ? widgetThickness : contentLoader.item ? (contentLoader.item.implicitWidth + horizontalPadding * 2) : 0
+    width: isVerticalOrientation ? barThickness : visualWidth
-    height: isVerticalOrientation ? (contentLoader.item ? (contentLoader.item.implicitHeight + horizontalPadding * 2) : 0) : widgetThickness
+    height: isVerticalOrientation ? visualHeight : barThickness
+
+    Rectangle {
+        id: visualContent
+        width: root.visualWidth
+        height: root.visualHeight
+        anchors.centerIn: parent
         radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
         color: {
             if (SettingsData.dankBarNoBackground) {
@@ -36,20 +44,22 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
             anchors.horizontalCenter: parent.horizontalCenter
         }
+    }
 
     MouseArea {
         id: mouseArea
+        z: -1
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
-        onPressed: {
+        onClicked: {
+            root.clicked()
             if (popoutTarget && popoutTarget.setTriggerPosition) {
                 const globalPos = mapToGlobal(0, 0)
                 const currentScreen = parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
                 popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
             }
-            root.clicked()
         }
     }
 }