ability to turn top bar square and adjust spacing

Common/SettingsData.qml

@@ -75,6 +75,8 @@ Singleton {
     property real cornerRadius: 12
     property bool notificationOverlayEnabled: false
     property bool topBarAutoHide: false
+    property real topBarSpacing: 4
+    property bool topBarSquareCorners: false
     property int notificationTimeoutLow: 5000
     property int notificationTimeoutNormal: 5000
     property int notificationTimeoutCritical: 0
@@ -182,6 +184,8 @@ Singleton {
                 notificationTimeoutLow = settings.notificationTimeoutLow !== undefined ? settings.notificationTimeoutLow : 5000;
                 notificationTimeoutNormal = settings.notificationTimeoutNormal !== undefined ? settings.notificationTimeoutNormal : 5000;
                 notificationTimeoutCritical = settings.notificationTimeoutCritical !== undefined ? settings.notificationTimeoutCritical : 0;
+                topBarSpacing = settings.topBarSpacing !== undefined ? settings.topBarSpacing : 4;
+                topBarSquareCorners = settings.topBarSquareCorners !== undefined ? settings.topBarSquareCorners : false;
                 applyStoredTheme();
                 detectAvailableIconThemes();
                 detectQtTools();
@@ -256,6 +260,8 @@ Singleton {
             "cornerRadius": cornerRadius,
             "notificationOverlayEnabled": notificationOverlayEnabled,
             "topBarAutoHide": topBarAutoHide,
+            "topBarSpacing": topBarSpacing,
+            "topBarSquareCorners": topBarSquareCorners,
             "notificationTimeoutLow": notificationTimeoutLow,
             "notificationTimeoutNormal": notificationTimeoutNormal,
             "notificationTimeoutCritical": notificationTimeoutCritical
@@ -723,6 +729,16 @@ Singleton {
         saveSettings();
     }
 
+    function setTopBarSpacing(spacing) {
+        topBarSpacing = spacing;
+        saveSettings();
+    }
+
+    function setTopBarSquareCorners(enabled) {
+        topBarSquareCorners = enabled;
+        saveSettings();
+    }
+
     function _shq(s) {
         return "'" + String(s).replace(/'/g, "'\\''") + "'";
     }

Modules/Settings/AppearanceTab.qml

@@ -493,6 +493,83 @@ Item {
 
             }
 
+
+            // Top Bar Spacing
+            StyledRect {
+                width: parent.width
+                height: topBarSpacingSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 1
+
+                Column {
+                    id: topBarSpacingSection
+
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "space_bar"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: "Top Bar Spacing"
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingS
+
+                        StyledText {
+                            text: "Gap Around Top Bar (0 = edge-to-edge)"
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        DankSlider {
+                            width: parent.width
+                            height: 24
+                            value: SettingsData.topBarSpacing
+                            minimum: 0
+                            maximum: 32
+                            unit: ""
+                            showValue: true
+                            onSliderValueChanged: (newValue) => {
+                                SettingsData.setTopBarSpacing(newValue);
+                            }
+                        }
+
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: "Square Corners"
+                        description: "Disable corner radius for the top bar (always square corners)"
+                        checked: SettingsData.topBarSquareCorners
+                        onToggled: (checked) => {
+                            SettingsData.setTopBarSquareCorners(checked);
+                        }
+                    }
+
+                }
+
+            }
             // Theme Color
             StyledRect {
                 width: parent.width

Modules/TopBar/TopBar.qml

@@ -24,7 +24,7 @@ PanelWindow {
     property bool reveal: !autoHide || topBarMouseArea.containsMouse
 
     screen: modelData
-    implicitHeight: Theme.barHeight - 4
+    implicitHeight: Theme.barHeight - 4 + SettingsData.topBarSpacing
     color: "transparent"
     Component.onCompleted: {
         let fonts = Qt.fontFamilies()
@@ -139,7 +139,7 @@ PanelWindow {
         right: true
     }
 
-    exclusiveZone: autoHide ? -1 : Theme.barHeight - 4
+    exclusiveZone: autoHide ? -1 : Theme.barHeight - 4 + SettingsData.topBarSpacing
 
     mask: Region {
         item: topBarMouseArea
@@ -147,7 +147,7 @@ PanelWindow {
 
     MouseArea {
         id: topBarMouseArea
-        height: root.reveal ? Theme.barHeight - 4 : 4
+        height: root.reveal ? Theme.barHeight - 4 + SettingsData.topBarSpacing : 4
         anchors {
             top: parent.top
             left: parent.left
@@ -180,15 +180,14 @@ PanelWindow {
 
             Item {
                 anchors.fill: parent
-                anchors.margins: 2
+                anchors.topMargin: SettingsData.topBarSpacing
-                anchors.topMargin: 6
                 anchors.bottomMargin: 0
-                anchors.leftMargin: 8
+                anchors.leftMargin: SettingsData.topBarSpacing
-                anchors.rightMargin: 8
+                anchors.rightMargin: SettingsData.topBarSpacing
 
                 Rectangle {
                     anchors.fill: parent
-                    radius: Theme.cornerRadius
+                    radius: SettingsData.topBarSquareCorners ? 0 : Theme.cornerRadius
                     color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
                                    Theme.surfaceContainer.b, root.backgroundTransparency)
                     layer.enabled: true