feat: add support for geometric centering (#856)

Introduces a configurable centering mode.
- Adds 'geometric' option.
- Retains 'index' as the default value to preserve existing behavior.

quickshell/Common/SettingsData.qml

@@ -175,6 +175,7 @@ Singleton {
     property bool keyboardLayoutNameCompactMode: false
     property bool runningAppsCurrentWorkspace: false
     property bool runningAppsGroupByApp: false
+    property string centeringMode: "index"
     property string clockDateFormat: ""
     property string lockDateFormat: ""
     property int mediaSize: 1
@@ -227,6 +228,7 @@ Singleton {
     onNotepadFontFamilyChanged: saveSettings()
     onNotepadFontSizeChanged: saveSettings()
     onNotepadShowLineNumbersChanged: saveSettings()
+    // onCenteringModeChanged: saveSettings()
     onNotepadTransparencyOverrideChanged: {
         if (notepadTransparencyOverride > 0) {
             notepadLastCustomTransparency = notepadTransparencyOverride;

quickshell/Common/settings/SettingsSpec.js

@@ -90,6 +90,7 @@ var SPEC = {
     keyboardLayoutNameCompactMode: { def: false },
     runningAppsCurrentWorkspace: { def: false },
     runningAppsGroupByApp: { def: false },
+    centeringMode: { def: "index" },
     clockDateFormat: { def: "" },
     lockDateFormat: { def: "" },
     mediaSize: { def: 1 },

quickshell/Modules/DankBar/CenterSection.qml

@@ -30,6 +30,64 @@ Item {
     property real totalSize: 0
 
     function updateLayout() {
+        if (SettingsData.centeringMode === "geometric") {
+            applyGeometricLayout();
+        } else {
+            // Default to index layout or if value is not 'geometric'
+            applyIndexLayout();
+        }
+    }
+
+    function applyGeometricLayout() {
+        if ((isVertical ? height : width) <= 0 || !visible) {
+            return;
+        }
+
+        centerWidgets = [];
+        totalWidgets = 0;
+        totalSize = 0;
+
+        for (var i = 0; i < centerRepeater.count; i++) {
+            const item = centerRepeater.itemAt(i);
+            if (item && item.active && item.item && getWidgetVisible(item.widgetId)) {
+                centerWidgets.push(item.item);
+                totalWidgets++;
+                totalSize += isVertical ? item.item.height : item.item.width;
+            }
+        }
+
+        if (totalWidgets === 0) {
+            return;
+        }
+
+        if (totalWidgets > 1) {
+            totalSize += spacing * (totalWidgets - 1);
+        }
+
+        positionWidgetsGeometric();
+    }
+
+    function positionWidgetsGeometric() {
+        const parentLength = isVertical ? height : width;
+        const parentCenter = parentLength / 2;
+
+        let currentPos = parentCenter - (totalSize / 2);
+
+        centerWidgets.forEach(widget => {
+            if (isVertical) {
+                widget.anchors.verticalCenter = undefined;
+                widget.y = currentPos;
+            } else {
+                widget.anchors.horizontalCenter = undefined;
+                widget.x = currentPos;
+            }
+
+            const widgetSize = isVertical ? widget.height : widget.width;
+            currentPos += widgetSize + spacing;
+        });
+    }
+
+    function applyIndexLayout() {
         if ((isVertical ? height : width) <= 0 || !visible) {
             return;
         }
@@ -85,10 +143,10 @@ Item {
             totalSize += spacing * (totalWidgets - 1);
         }
 
-        positionWidgets(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget);
+        positionWidgetsByIndex(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget);
     }
 
-    function positionWidgets(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget) {
+    function positionWidgetsByIndex(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget) {
         const parentCenter = (isVertical ? height : width) / 2;
         const isOddConfigured = configuredWidgets % 2 === 1;
 
@@ -508,4 +566,11 @@ Item {
             }
         }
     }
+
+    Connections {
+        target: SettingsData
+        function onCenteringModeChanged() {
+            layoutTimer.restart();
+        }
+    }
 }

quickshell/Modules/Settings/WidgetsTabSection.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import qs.Common
 import qs.Widgets
 import qs.Services
@@ -34,7 +35,7 @@ Column {
     height: implicitHeight
     spacing: Theme.spacingM
 
-    Row {
+    RowLayout {
         width: parent.width
         spacing: Theme.spacingM
 
@@ -42,7 +43,7 @@ Column {
             name: root.titleIcon
             size: Theme.iconSize
             color: Theme.primary
-            anchors.verticalCenter: parent.verticalCenter
+            Layout.alignment: Qt.AlignVCenter
         }
 
         StyledText {
@@ -50,12 +51,54 @@ Column {
             font.pixelSize: Theme.fontSizeLarge
             font.weight: Font.Medium
             color: Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
+            Layout.alignment: Qt.AlignVCenter
         }
 
         Item {
-            width: parent.width - 60
             height: 1
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            spacing: Theme.spacingXS
+            Layout.alignment: Qt.AlignVCenter
+            visible: root.sectionId === "center"
+
+            DankActionButton {
+                id: indexCenterButton
+                buttonSize: 28
+                iconName: "format_list_numbered"
+                iconSize: 16
+                iconColor: SettingsData.centeringMode === "index" ? Theme.primary : Theme.outline
+                onClicked: {
+                    console.log("Centering mode changed to: index");
+                    SettingsData.set("centeringMode", "index");
+                }
+                onEntered: {
+                    sharedTooltip.show("Index Centering", indexCenterButton, 0, 0, "bottom");
+                }
+                onExited: {
+                    sharedTooltip.hide();
+                }
+            }
+
+            DankActionButton {
+                id: geometricCenterButton
+                buttonSize: 28
+                iconName: "center_focus_weak"
+                iconSize: 16
+                iconColor: SettingsData.centeringMode === "geometric" ? Theme.primary : Theme.outline
+                onClicked: {
+                    console.log("Centering mode changed to: geometric");
+                    SettingsData.set("centeringMode", "geometric");
+                }
+                onEntered: {
+                    sharedTooltip.show("Geometric Centering", geometricCenterButton, 0, 0, "bottom");
+                }
+                onExited: {
+                    sharedTooltip.hide();
+                }
+            }
         }
     }