accessibility: widen click targets to bar edge

Modules/DankBar/CenterSection.qml

@@ -398,8 +398,47 @@ Item {
                 if ("barThickness" in item) {
                     item.barThickness = Qt.binding(() => root.barThickness)
                 }
+                if ("sectionSpacing" in item) {
+                    item.sectionSpacing = Qt.binding(() => root.spacing)
+                }
+
+                if ("isFirst" in item) {
+                    item.isFirst = Qt.binding(() => {
+                        for (var i = 0; i < centerRepeater.count; i++) {
+                            const checkItem = centerRepeater.itemAt(i)
+                            if (checkItem && checkItem.active && checkItem.item) {
+                                return checkItem.item === item
+                            }
+                        }
+                        return false
+                    })
+                }
+
+                if ("isLast" in item) {
+                    item.isLast = Qt.binding(() => {
+                        for (var i = centerRepeater.count - 1; i >= 0; i--) {
+                            const checkItem = centerRepeater.itemAt(i)
+                            if (checkItem && checkItem.active && checkItem.item) {
+                                return checkItem.item === item
+                            }
+                        }
+                        return false
+                    })
+                }
+
+                if ("isLeftBarEdge" in item) {
+                    item.isLeftBarEdge = false
+                }
+                if ("isRightBarEdge" in item) {
+                    item.isRightBarEdge = false
+                }
+                if ("isTopBarEdge" in item) {
+                    item.isTopBarEdge = false
+                }
+                if ("isBottomBarEdge" in item) {
+                    item.isBottomBarEdge = false
+                }
 
-                // Inject PluginService for plugin widgets
                 if (item.pluginService !== undefined) {
                     var parts = model.widgetId.split(":")
                     var pluginId = parts[0]

Modules/DankBar/DankBar.qml

@@ -832,6 +832,7 @@ Item {
                                     id: launcherButtonComponent
 
                                     LauncherButton {
+                                        id: launcherButton
                                         isActive: false
                                         widgetThickness: barWindow.widgetThickness
                                         barThickness: barWindow.effectiveBarThickness
@@ -841,6 +842,12 @@ Item {
                                         hyprlandOverviewLoader: root.hyprlandOverviewLoader
                                         onClicked: {
                                             appDrawerLoader.active = true
+                                            if (appDrawerLoader.item && appDrawerLoader.item.setTriggerPosition) {
+                                                const globalPos = launcherButton.visualContent.mapToGlobal(0, 0)
+                                                const currentScreen = barWindow.screen
+                                                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barWindow.effectiveBarThickness, launcherButton.visualWidth)
+                                                appDrawerLoader.item.setTriggerPosition(pos.x, pos.y, pos.width, launcherButton.section, currentScreen)
+                                            }
                                             appDrawerLoader.item?.toggle()
                                         }
                                     }

Modules/DankBar/LeftSection.qml

@@ -28,10 +28,13 @@ Item {
     Component {
         id: rowComp
         Row {
-            spacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
             Repeater {
+                id: rowRepeater
                 model: root.widgetsModel
                 Item {
+                    readonly property real rowSpacing: parent.widgetSpacing
                     width: widgetLoader.item ? widgetLoader.item.width : 0
                     height: widgetLoader.item ? widgetLoader.item.height : 0
                     WidgetHost {
@@ -47,6 +50,11 @@ Item {
                         parentScreen: root.parentScreen
                         widgetThickness: root.widgetThickness
                         barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === rowRepeater.count - 1
+                        sectionSpacing: parent.rowSpacing
+                        isLeftBarEdge: true
+                        isRightBarEdge: false
                     }
                 }
             }
@@ -57,10 +65,13 @@ Item {
         id: columnComp
         Column {
             width: Math.max(parent.width, 200)
-            spacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
             Repeater {
+                id: columnRepeater
                 model: root.widgetsModel
                 Item {
+                    readonly property real columnSpacing: parent.widgetSpacing
                     width: parent.width
                     height: widgetLoader.item ? widgetLoader.item.height : 0
                     WidgetHost {
@@ -76,6 +87,11 @@ Item {
                         parentScreen: root.parentScreen
                         widgetThickness: root.widgetThickness
                         barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === columnRepeater.count - 1
+                        sectionSpacing: parent.columnSpacing
+                        isTopBarEdge: true
+                        isBottomBarEdge: false
                     }
                 }
             }

Modules/DankBar/RightSection.qml

@@ -29,11 +29,14 @@ Item {
     Component {
         id: rowComp
         Row {
-            spacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
             anchors.right: parent ? parent.right : undefined
             Repeater {
+                id: rowRepeater
                 model: root.widgetsModel
                 Item {
+                    readonly property real rowSpacing: parent.widgetSpacing
                     width: widgetLoader.item ? widgetLoader.item.width : 0
                     height: widgetLoader.item ? widgetLoader.item.height : 0
                     WidgetHost {
@@ -49,6 +52,11 @@ Item {
                         parentScreen: root.parentScreen
                         widgetThickness: root.widgetThickness
                         barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === rowRepeater.count - 1
+                        sectionSpacing: parent.rowSpacing
+                        isLeftBarEdge: false
+                        isRightBarEdge: true
                     }
                 }
             }
@@ -59,10 +67,13 @@ Item {
         id: columnComp
         Column {
             width: parent ? parent.width : 0
-            spacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            spacing: widgetSpacing
             Repeater {
+                id: columnRepeater
                 model: root.widgetsModel
                 Item {
+                    readonly property real columnSpacing: parent.widgetSpacing
                     width: parent.width
                     height: widgetLoader.item ? widgetLoader.item.height : 0
                     WidgetHost {
@@ -78,6 +89,11 @@ Item {
                         parentScreen: root.parentScreen
                         widgetThickness: root.widgetThickness
                         barThickness: root.barThickness
+                        isFirst: model.index === 0
+                        isLast: model.index === columnRepeater.count - 1
+                        sectionSpacing: parent.columnSpacing
+                        isTopBarEdge: false
+                        isBottomBarEdge: true
                     }
                 }
             }

Modules/DankBar/WidgetHost.qml

@@ -15,6 +15,13 @@ Loader {
     property var parentScreen: null
     property real widgetThickness: 30
     property real barThickness: 48
+    property bool isFirst: false
+    property bool isLast: false
+    property real sectionSpacing: 0
+    property bool isLeftBarEdge: false
+    property bool isRightBarEdge: false
+    property bool isTopBarEdge: false
+    property bool isBottomBarEdge: false
 
     asynchronous: false
 
@@ -76,6 +83,62 @@ Loader {
         restoreMode: Binding.RestoreNone
     }
 
+    Binding {
+        target: root.item
+        when: root.item && "isFirst" in root.item
+        property: "isFirst"
+        value: root.isFirst
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isLast" in root.item
+        property: "isLast"
+        value: root.isLast
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "sectionSpacing" in root.item
+        property: "sectionSpacing"
+        value: root.sectionSpacing
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isLeftBarEdge" in root.item
+        property: "isLeftBarEdge"
+        value: root.isLeftBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isRightBarEdge" in root.item
+        property: "isRightBarEdge"
+        value: root.isRightBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isTopBarEdge" in root.item
+        property: "isTopBarEdge"
+        value: root.isTopBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "isBottomBarEdge" in root.item
+        property: "isBottomBarEdge"
+        value: root.isBottomBarEdge
+        restoreMode: Binding.RestoreNone
+    }
+
     onLoaded: {
         if (item) {
             contentItemReady(item)            

Modules/DankBar/Widgets/Battery.qml

@@ -97,7 +97,10 @@ BasePill {
     }
 
     MouseArea {
-        anchors.fill: parent
+        x: -battery.leftMargin
+        y: -battery.topMargin
+        width: battery.width + battery.leftMargin + battery.rightMargin
+        height: battery.height + battery.topMargin + battery.bottomMargin
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton
@@ -108,7 +111,7 @@ BasePill {
                 const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, battery.visualWidth)
                 popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
             }
-            toggleBatteryPopup();
+            toggleBatteryPopup()
         }
     }
 }

Modules/DankBar/Widgets/Clock.qml

@@ -237,15 +237,17 @@ BasePill {
     }
 
     MouseArea {
-        id: clockMouseArea
+        x: -root.leftMargin
-        anchors.fill: parent
+        y: -root.topMargin
+        width: root.width + root.leftMargin + root.rightMargin
+        height: root.height + root.topMargin + root.bottomMargin
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0)
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
                 const currentScreen = root.parentScreen || Screen
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, width)
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.visualWidth)
                 root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
             }
             root.clockClicked()

Modules/DankBar/Widgets/ControlCenterButton.qml

@@ -228,7 +228,10 @@ BasePill {
     }
 
     MouseArea {
-        anchors.fill: parent
+        x: -root.leftMargin
+        y: -root.topMargin
+        width: root.width + root.leftMargin + root.rightMargin
+        height: root.height + root.topMargin + root.bottomMargin
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton

Modules/Plugins/BasePill.qml

@@ -14,10 +14,23 @@ Item {
     property real barThickness: 48
     property alias content: contentLoader.sourceComponent
     property bool isVerticalOrientation: axis?.isVertical ?? false
+    property bool isFirst: false
+    property bool isLast: false
+    property real sectionSpacing: 0
+    property bool isLeftBarEdge: false
+    property bool isRightBarEdge: false
+    property bool isTopBarEdge: false
+    property bool isBottomBarEdge: false
     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
+    readonly property real barEdgeExtension: 1000
+    readonly property real gapExtension: sectionSpacing
+    readonly property real leftMargin: !isVerticalOrientation ? (isLeftBarEdge && isFirst ? barEdgeExtension : (isFirst ? gapExtension : gapExtension / 2)) : 0
+    readonly property real rightMargin: !isVerticalOrientation ? (isRightBarEdge && isLast ? barEdgeExtension : (isLast ? gapExtension : gapExtension / 2)) : 0
+    readonly property real topMargin: isVerticalOrientation ? (isTopBarEdge && isFirst ? barEdgeExtension : (isFirst ? gapExtension : gapExtension / 2)) : 0
+    readonly property real bottomMargin: isVerticalOrientation ? (isBottomBarEdge && isLast ? barEdgeExtension : (isLast ? gapExtension : gapExtension / 2)) : 0
 
     signal clicked()
 
@@ -49,17 +62,21 @@ Item {
     MouseArea {
         id: mouseArea
         z: -1
-        anchors.fill: parent
+        x: -root.leftMargin
+        y: -root.topMargin
+        width: root.width + root.leftMargin + root.rightMargin
+        height: root.height + root.topMargin + root.bottomMargin
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
-        onClicked: {
+        acceptedButtons: Qt.LeftButton
-            root.clicked()
+        onPressed: {
             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, root.visualWidth)
                 popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
             }
+            root.clicked()
         }
     }
 }