dankbar: add click-through option

quickshell/Common/SettingsData.qml

@@ -495,7 +495,8 @@ Singleton {
             "shadowIntensity": 0,
             "shadowOpacity": 60,
             "shadowColorMode": "text",
-            "shadowCustomColor": "#000000"
+            "shadowCustomColor": "#000000",
+            "clickThrough": false
         }
     ]
 

quickshell/Common/settings/SettingsSpec.js

@@ -358,7 +358,8 @@ var SPEC = {
         shadowIntensity: 0,
         shadowOpacity: 60,
         shadowColorMode: "text",
-        shadowCustomColor: "#000000"
+        shadowCustomColor: "#000000",
+        clickThrough: false
     }], onChange: "updateBarConfigs" },
 
     desktopClockEnabled: { def: false },

quickshell/Modules/DankBar/CenterSection.qml

@@ -296,6 +296,9 @@ Item {
     width: parent.width
     anchors.centerIn: parent
 
+    implicitWidth: isVertical ? widgetThickness : totalSize
+    implicitHeight: isVertical ? totalSize : widgetThickness
+
     Timer {
         id: layoutTimer
         interval: 0

quickshell/Modules/DankBar/DankBarContent.qml

@@ -20,6 +20,13 @@ Item {
 
     readonly property real innerPadding: barConfig?.innerPadding ?? 4
 
+    property alias hLeftSection: hLeftSection
+    property alias hCenterSection: hCenterSection
+    property alias hRightSection: hRightSection
+    property alias vLeftSection: vLeftSection
+    property alias vCenterSection: vCenterSection
+    property alias vRightSection: vRightSection
+
     anchors.fill: parent
     anchors.leftMargin: Math.max(Theme.spacingXS, innerPadding * 0.8)
     anchors.rightMargin: Math.max(Theme.spacingXS, innerPadding * 0.8)

quickshell/Modules/DankBar/DankBarWindow.qml

@@ -500,8 +500,78 @@ PanelWindow {
         height: axis.isVertical ? parent.height : maskThickness
     }
 
+    readonly property bool clickThroughEnabled: barConfig?.clickThrough ?? false
+
+    readonly property var _leftSection: topBarContent ? (barWindow.isVertical ? topBarContent.vLeftSection : topBarContent.hLeftSection) : null
+    readonly property var _centerSection: topBarContent ? (barWindow.isVertical ? topBarContent.vCenterSection : topBarContent.hCenterSection) : null
+    readonly property var _rightSection: topBarContent ? (barWindow.isVertical ? topBarContent.vRightSection : topBarContent.hRightSection) : null
+
+    function sectionRect(section, isCenter) {
+        if (!section)
+            return {
+                "x": 0,
+                "y": 0,
+                "w": 0,
+                "h": 0
+            };
+
+        const pos = section.mapToItem(barWindow.contentItem, 0, 0);
+        const implW = section.implicitWidth || 0;
+        const implH = section.implicitHeight || 0;
+
+        const offsetX = isCenter && !barWindow.isVertical ? (section.width - implW) / 2 : 0;
+        const offsetY = !barWindow.isVertical ? (section.height - implH) / 2 : (isCenter ? (section.height - implH) / 2 : 0);
+
+        const edgePad = 2;
+        return {
+            "x": pos.x + offsetX - edgePad,
+            "y": pos.y + offsetY - edgePad,
+            "w": implW + edgePad * 2,
+            "h": implH + edgePad * 2
+        };
+    }
+
     mask: Region {
-        item: inputMask
+        item: clickThroughEnabled ? null : inputMask
+
+        Region {
+            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._leftSection, false) : {
+                "x": 0,
+                "y": 0,
+                "w": 0,
+                "h": 0
+            }
+            x: r.x
+            y: r.y
+            width: r.w
+            height: r.h
+        }
+
+        Region {
+            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._centerSection, true) : {
+                "x": 0,
+                "y": 0,
+                "w": 0,
+                "h": 0
+            }
+            x: r.x
+            y: r.y
+            width: r.w
+            height: r.h
+        }
+
+        Region {
+            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._rightSection, false) : {
+                "x": 0,
+                "y": 0,
+                "w": 0,
+                "h": 0
+            }
+            x: r.x
+            y: r.y
+            width: r.w
+            height: r.h
+        }
     }
 
     Item {

quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -731,7 +731,8 @@ Item {
     Flow {
         id: workspaceRow
 
-        anchors.centerIn: parent
+        x: isVertical ? visualBackground.x : (parent.width - implicitWidth) / 2
+        y: isVertical ? (parent.height - implicitHeight) / 2 : visualBackground.y
         spacing: Theme.spacingS
         flow: isVertical ? Flow.TopToBottom : Flow.LeftToRight
 
@@ -993,12 +994,13 @@ Item {
                     dataUpdateTimer.restart();
                 }
 
-                width: root.isVertical ? root.barThickness : visualWidth
+                width: root.isVertical ? root.widgetHeight : visualWidth
-                height: root.isVertical ? visualHeight : root.barThickness
+                height: root.isVertical ? visualHeight : root.widgetHeight
 
                 Rectangle {
                     id: focusedBorderRing
-                    anchors.centerIn: parent
+                    x: root.isVertical ? (root.widgetHeight - width) / 2 : (parent.width - width) / 2
+                    y: root.isVertical ? (parent.height - height) / 2 : (root.widgetHeight - height) / 2
                     width: {
                         const borderWidth = (SettingsData.workspaceFocusedBorderEnabled && isActive && !isPlaceholder) ? SettingsData.workspaceFocusedBorderThickness : 0;
                         return delegateRoot.visualWidth + borderWidth * 2;
@@ -1045,7 +1047,8 @@ Item {
                     id: visualContent
                     width: delegateRoot.visualWidth
                     height: delegateRoot.visualHeight
-                    anchors.centerIn: parent
+                    x: root.isVertical ? (root.widgetHeight - width) / 2 : (parent.width - width) / 2
+                    y: root.isVertical ? (parent.height - height) / 2 : (root.widgetHeight - height) / 2
                     radius: Theme.cornerRadius
                     color: isActive ? activeColor : isUrgent ? urgentColor : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.withAlpha(unfocusedColor, 0.7) : isOccupied ? occupiedColor : unfocusedColor
 

quickshell/Modules/Settings/DankBarTab.qml

@@ -373,7 +373,9 @@ Item {
 
                                         StyledText {
                                             text: {
-                                                switch (barCard.modelData.position) {
+                                                SettingsData.barConfigs;
+                                                const cfg = SettingsData.getBarConfig(barCard.modelData.id);
+                                                switch (cfg?.position ?? SettingsData.Position.Top) {
                                                 case SettingsData.Position.Top:
                                                     return I18n.tr("Top");
                                                 case SettingsData.Position.Bottom:
@@ -398,7 +400,9 @@ Item {
 
                                         StyledText {
                                             text: {
-                                                const prefs = barCard.modelData.screenPreferences || ["all"];
+                                                SettingsData.barConfigs;
+                                                const cfg = SettingsData.getBarConfig(barCard.modelData.id);
+                                                const prefs = cfg?.screenPreferences || ["all"];
                                                 if (prefs.includes("all") || (typeof prefs[0] === "string" && prefs[0] === "all"))
                                                     return I18n.tr("All displays");
                                                 return I18n.tr("%1 display(s)").replace("%1", prefs.length);
@@ -415,9 +419,11 @@ Item {
 
                                         StyledText {
                                             text: {
-                                                const left = barCard.modelData.leftWidgets?.length || 0;
+                                                SettingsData.barConfigs;
-                                                const center = barCard.modelData.centerWidgets?.length || 0;
+                                                const cfg = SettingsData.getBarConfig(barCard.modelData.id);
-                                                const right = barCard.modelData.rightWidgets?.length || 0;
+                                                const left = cfg?.leftWidgets?.length || 0;
+                                                const center = cfg?.centerWidgets?.length || 0;
+                                                const right = cfg?.rightWidgets?.length || 0;
                                                 return I18n.tr("%1 widgets").replace("%1", left + center + right);
                                             }
                                             font.pixelSize: Theme.fontSizeSmall
@@ -428,14 +434,22 @@ Item {
                                             text: "•"
                                             font.pixelSize: Theme.fontSizeSmall
                                             color: Theme.surfaceVariantText
-                                            visible: !barCard.modelData.enabled && barCard.modelData.id !== "default"
+                                            visible: {
+                                                SettingsData.barConfigs;
+                                                const cfg = SettingsData.getBarConfig(barCard.modelData.id);
+                                                return !cfg?.enabled && barCard.modelData.id !== "default";
+                                            }
                                         }
 
                                         StyledText {
                                             text: I18n.tr("Disabled")
                                             font.pixelSize: Theme.fontSizeSmall
                                             color: Theme.error
-                                            visible: !barCard.modelData.enabled && barCard.modelData.id !== "default"
+                                            visible: {
+                                                SettingsData.barConfigs;
+                                                const cfg = SettingsData.getBarConfig(barCard.modelData.id);
+                                                return !cfg?.enabled && barCard.modelData.id !== "default";
+                                            }
                                         }
                                     }
                                 }
@@ -745,6 +759,21 @@ Item {
                     }
                 }
 
+                Rectangle {
+                    width: parent.width
+                    height: 1
+                    color: Theme.outline
+                    opacity: 0.15
+                }
+
+                SettingsToggleRow {
+                    text: I18n.tr("Click Through")
+                    checked: selectedBarConfig?.clickThrough ?? false
+                    onToggled: toggled => SettingsData.updateBarConfig(selectedBarId, {
+                            clickThrough: toggled
+                        })
+                }
+
                 Rectangle {
                     width: parent.width
                     height: 1
@@ -1057,6 +1086,7 @@ Item {
             }
 
             SettingsCard {
+                id: shadowCard
                 iconName: "layers"
                 title: I18n.tr("Shadow", "bar shadow settings card")
                 visible: selectedBarConfig?.enabled
@@ -1076,7 +1106,7 @@ Item {
                 }
 
                 SettingsSliderRow {
-                    visible: parent.shadowActive
+                    visible: shadowCard.shadowActive
                     text: I18n.tr("Opacity")
                     minimum: 10
                     maximum: 100
@@ -1088,7 +1118,7 @@ Item {
                 }
 
                 Column {
-                    visible: parent.shadowActive
+                    visible: shadowCard.shadowActive
                     width: parent.width
                     spacing: Theme.spacingS
 

quickshell/Widgets/DankButtonGroup.qml

@@ -59,7 +59,6 @@ Flow {
             animationTimer.restart();
         } else {
             const oldIndex = currentIndex;
-            currentIndex = index;
             selectionChanged(index, true);
             if (oldIndex !== index && oldIndex >= 0) {
                 selectionChanged(oldIndex, false);