bar: fix bottom mode, add corner style config

.config/quickshell/modules/bar/Bar.qml

@@ -15,13 +15,12 @@ import Quickshell.Services.UPower
 Scope {
     id: bar
 
-    readonly property int barHeight: Appearance.sizes.barHeight
     readonly property int osdHideMouseMoveThreshold: 20
     property bool showBarBackground: ConfigOptions.bar.showBackground
 
     component VerticalBarSeparator: Rectangle {
-        Layout.topMargin: barHeight / 3
+        Layout.topMargin: Appearance.sizes.baseBarHeight / 3
-        Layout.bottomMargin: barHeight / 3
+        Layout.bottomMargin: Appearance.sizes.baseBarHeight / 3
         Layout.fillHeight: true
         implicitWidth: 1
         color: Appearance.colors.colOutlineVariant
@@ -38,9 +37,9 @@ Scope {
 
         PanelWindow { // Bar window
             id: barRoot
+            required property ShellScreen modelData
             screen: modelData
 
-            property ShellScreen modelData
             property var brightnessMonitor: Brightness.getMonitorForScreen(modelData)
             property real useShortenedForm: (Appearance.sizes.barHellaShortenScreenWidthThreshold >= screen.width) ? 2 :
                 (Appearance.sizes.barShortenScreenWidthThreshold >= screen.width) ? 1 : 0
@@ -50,8 +49,8 @@ Scope {
                     Appearance.sizes.barCenterSideModuleWidth
 
             WlrLayershell.namespace: "quickshell:bar"
-            implicitHeight: barHeight + Appearance.rounding.screenRounding
+            implicitHeight: Appearance.sizes.barHeight + Appearance.rounding.screenRounding
-            exclusiveZone: showBarBackground ? barHeight : (barHeight - 4)
+            exclusiveZone: Appearance.sizes.baseBarHeight + (ConfigOptions.bar.cornerStyle === 1 ? Appearance.sizes.hyprlandGapsOut : 0)
             mask: Region {
                 item: barContent
             }
@@ -64,21 +63,46 @@ Scope {
                 right: true
             }
 
-            Rectangle { // Bar background
+            Item { // Bar content region
                 id: barContent
                 anchors {
                     right: parent.right
                     left: parent.left
-                    top: !ConfigOptions.bar.bottom ? parent.top : undefined
+                    top: parent.top
-                    bottom: ConfigOptions.bar.bottom ? parent.bottom : undefined
+                    bottom: undefined
+                }
+                implicitHeight: Appearance.sizes.barHeight
+                height: Appearance.sizes.barHeight
+
+                states: State {
+                    name: "bottom"
+                    when: ConfigOptions.bar.bottom
+                    AnchorChanges {
+                        target: barContent
+                        anchors {
+                            right: parent.right
+                            left: parent.left
+                            top: undefined
+                            bottom: parent.bottom
+                        }
+                    }
+                }
+                
+                // Background
+                Rectangle {
+                    anchors {
+                        fill: parent
+                        margins: ConfigOptions.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0 // idk why but +1 is needed
+                    }
+                    color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+                    radius: ConfigOptions.bar.cornerStyle === 1 ? Appearance.rounding.windowRounding : 0
                 }
-                color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
-                height: barHeight
                 
                 MouseArea { // Left side | scroll to change brightness
                     id: barLeftSideMouseArea
                     anchors.left: parent.left
-                    implicitHeight: barHeight
+                    implicitHeight: Appearance.sizes.baseBarHeight
+                    height: Appearance.sizes.barHeight
                     width: (barRoot.width - middleSection.width) / 2
                     property bool hovered: false
                     property real lastScrollX: 0
@@ -279,7 +303,8 @@ Scope {
                     id: barRightSideMouseArea
 
                     anchors.right: parent.right
-                    implicitHeight: barHeight
+                    implicitHeight: Appearance.sizes.baseBarHeight
+                    height: Appearance.sizes.barHeight
                     width: (barRoot.width - middleSection.width) / 2
 
                     property bool hovered: false
@@ -354,10 +379,14 @@ Scope {
                     
                             RippleButton { // Right sidebar button
                                 id: rightSidebarButton
-                                Layout.margins: 4
+
+                                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                                 Layout.rightMargin: Appearance.rounding.screenRounding
-                                Layout.fillHeight: true
+                                Layout.fillWidth: false
-                                implicitWidth: indicatorsRowLayout.implicitWidth + 10*2
+
+                                implicitWidth: indicatorsRowLayout.implicitWidth + 10 * 2
+                                implicitHeight: indicatorsRowLayout.implicitHeight + 5 * 2
+
                                 buttonRadius: Appearance.rounding.full
                                 colBackground: barRightSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
                                 colBackgroundHover: Appearance.colors.colLayer1Hover
@@ -447,32 +476,68 @@ Scope {
             }
 
             // Round decorators
-            Item {
+            Loader {
+                id: roundDecorators
                 anchors {
                     left: parent.left
                     right: parent.right
-                    // top: barContent.bottom
-                    top: ConfigOptions.bar.bottom ? undefined : barContent.bottom
-                    bottom: ConfigOptions.bar.bottom ? barContent.top : undefined
                 }
+                y: Appearance.sizes.barHeight
+                width: parent.width
                 height: Appearance.rounding.screenRounding
-                visible: showBarBackground
+                active: showBarBackground && ConfigOptions.bar.cornerStyle === 0 // Hug
 
-                RoundCorner {
+                states: State {
-                    anchors.top: parent.top
+                    name: "bottom"
-                    anchors.left: parent.left
+                    when: ConfigOptions.bar.bottom
-                    size: Appearance.rounding.screenRounding
+                    PropertyChanges {
-                    corner: ConfigOptions.bar.bottom ? cornerEnum.bottomLeft : cornerEnum.topLeft
+                        roundDecorators.y: 0
-                    color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+                    }
-                    opacity: 1.0 - Appearance.transparency
                 }
-                RoundCorner {
+
-                    anchors.top: parent.top
+                sourceComponent: Item {
-                    anchors.right: parent.right
+                    implicitHeight: Appearance.rounding.screenRounding
-                    size: Appearance.rounding.screenRounding
+                    RoundCorner {
-                    corner: ConfigOptions.bar.bottom ? cornerEnum.bottomRight : cornerEnum.topRight
+                        id: leftCorner
-                    color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+                        anchors {
-                    opacity: 1.0 - Appearance.transparency
+                            top: parent.top
+                            bottom: parent.bottom
+                            left: parent.left
+                        }
+
+                        size: Appearance.rounding.screenRounding
+                        color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+                        opacity: 1.0 - Appearance.transparency
+
+                        corner: RoundCorner.CornerEnum.TopLeft
+                        states: State {
+                            name: "bottom"
+                            when: ConfigOptions.bar.bottom
+                            PropertyChanges {
+                                leftCorner.corner: RoundCorner.CornerEnum.BottomLeft
+                            }
+                        }
+                    }
+                    RoundCorner {
+                        id: rightCorner
+                        anchors {
+                            right: parent.right
+                            top: !ConfigOptions.bar.bottom ? parent.top : undefined
+                            bottom: ConfigOptions.bar.bottom ? parent.bottom : undefined
+                        }
+                        size: Appearance.rounding.screenRounding
+                        color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+                        opacity: 1.0 - Appearance.transparency
+
+                        corner: RoundCorner.CornerEnum.TopRight
+                        states: State {
+                            name: "bottom"
+                            when: ConfigOptions.bar.bottom
+                            PropertyChanges {
+                                rightCorner.corner: RoundCorner.CornerEnum.BottomRight
+                            }
+                        }
+                    }
                 }
             }
 

.config/quickshell/modules/bar/BarGroup.qml

@@ -7,7 +7,8 @@ import QtQuick.Layouts
 Item {
     id: root
     property real padding: 5
-    implicitHeight: 40
+    implicitHeight: Appearance.sizes.baseBarHeight
+    height: Appearance.sizes.barHeight
     implicitWidth: rowLayout.implicitWidth + padding * 2
     default property alias items: rowLayout.children
 

.config/quickshell/modules/bar/Media.qml

@@ -17,7 +17,7 @@ Item {
 
     Layout.fillHeight: true
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
-    implicitHeight: 40
+    implicitHeight: Appearance.sizes.barHeight
 
     Timer {
         running: activePlayer?.playbackState == MprisPlaybackState.Playing

.config/quickshell/modules/bar/Workspaces.qml

@@ -48,7 +48,7 @@ Item {
     }
 
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
-    implicitHeight: 40
+    implicitHeight: Appearance.sizes.barHeight
 
     // Scroll to switch workspaces
     WheelHandler {
@@ -78,7 +78,7 @@ Item {
 
         spacing: 0
         anchors.fill: parent
-        implicitHeight: 40
+        implicitHeight: Appearance.sizes.barHeight
 
         Repeater {
             model: ConfigOptions.bar.workspaces.shown
@@ -157,7 +157,7 @@ Item {
 
         spacing: 0
         anchors.fill: parent
-        implicitHeight: 40
+        implicitHeight: Appearance.sizes.barHeight
 
         Repeater {
             model: ConfigOptions.bar.workspaces.shown

.config/quickshell/modules/common/Appearance.qml

@@ -288,7 +288,9 @@ Singleton {
     }
 
     sizes: QtObject {
-        property real barHeight: 40
+        property real baseBarHeight: 40
+        property real barHeight: ConfigOptions.bar.cornerStyle === 1 ? 
+            (baseBarHeight + Appearance.sizes.hyprlandGapsOut * 2) : baseBarHeight
         property real barCenterSideModuleWidth: ConfigOptions?.bar.verbose ? 360 : 140
         property real barCenterSideModuleWidthShortened: 280
         property real barCenterSideModuleWidthHellaShortened: 190

.config/quickshell/modules/common/ConfigOptions.qml

@@ -47,6 +47,7 @@ Singleton {
 
     property QtObject bar: QtObject {
         property bool bottom: false // Instead of top
+        property int cornerStyle: 0 // 0: Hug | 1: Float | 2: Plain rectangle
         property bool borderless: false // true for no grouping of items
         property string topLeftIcon: "spark" // Options: distro, spark
         property bool showBackground: true

.config/quickshell/modules/common/widgets/RoundCorner.qml

@@ -3,24 +3,21 @@ import QtQuick 2.9
 Item {
     id: root
 
+    enum CornerEnum { TopLeft, TopRight, BottomLeft, BottomRight }
+    property var corner: RoundCorner.CornerEnum.TopLeft // Default to TopLeft
+
     property int size: 25
     property color color: "#000000"
 
     onColorChanged: {
         canvas.requestPaint();
     }
-
+    onCornerChanged: {
-    property QtObject cornerEnum: QtObject {
+        canvas.requestPaint();
-        property int topLeft: 0
-        property int topRight: 1
-        property int bottomLeft: 2
-        property int bottomRight: 3
     }
 
-    property int corner: cornerEnum.topLeft // Default to TopLeft
+    implicitWidth: size
-
+    implicitHeight: size
-    width: size
-    height: size
 
     Canvas {
         id: canvas
@@ -31,22 +28,22 @@ Item {
         onPaint: {
             var ctx = getContext("2d");
             var r = root.size;
-
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.beginPath();
             switch (root.corner) {
-                case cornerEnum.topLeft:
+                case RoundCorner.CornerEnum.TopLeft:
                     ctx.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
                     ctx.lineTo(0, 0);
                     break;
-                case cornerEnum.topRight:
+                case RoundCorner.CornerEnum.TopRight:
                     ctx.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI);
                     ctx.lineTo(r, 0);
                     break;
-                case cornerEnum.bottomLeft:
+                case RoundCorner.CornerEnum.BottomLeft:
                     ctx.arc(r, 0, r, Math.PI / 2, Math.PI);
                     ctx.lineTo(0, r);
                     break;
-                case cornerEnum.bottomRight:
+                case RoundCorner.CornerEnum.BottomRight:
                     ctx.arc(0, 0, r, 0, Math.PI / 2);
                     ctx.lineTo(r, r);
                     break;

.config/quickshell/modules/screenCorners/ScreenCorners.qml

@@ -56,28 +56,28 @@ Scope {
                 anchors.top: parent.top
                 anchors.left: parent.left
                 size: Appearance.rounding.screenRounding
-                corner: cornerEnum.topLeft
+                corner: RoundCorner.CornerEnum.TopLeft
             }
             RoundCorner {
                 id: topRightCorner
                 anchors.top: parent.top
                 anchors.right: parent.right
                 size: Appearance.rounding.screenRounding
-                corner: cornerEnum.topRight
+                corner: RoundCorner.CornerEnum.TopRight
             }
             RoundCorner {
                 id: bottomLeftCorner
                 anchors.bottom: parent.bottom
                 anchors.left: parent.left
                 size: Appearance.rounding.screenRounding
-                corner: cornerEnum.bottomLeft
+                corner: RoundCorner.CornerEnum.BottomLeft
             }
             RoundCorner {
                 id: bottomRightCorner
                 anchors.bottom: parent.bottom
                 anchors.right: parent.right
                 size: Appearance.rounding.screenRounding
-                corner: cornerEnum.bottomRight
+                corner: RoundCorner.CornerEnum.BottomRight
             }
 
         }