rounding decorations

.config/hypr/hyprland/rules.conf

@@ -69,8 +69,6 @@ layerrule = noanim, anyrun
 layerrule = noanim, indicator.*
 layerrule = noanim, osk
 layerrule = noanim, hyprpicker
-layerrule = blur, shell:*
-layerrule = ignorealpha 0.6, shell:*
 
 layerrule = noanim, noanim
 layerrule = blur, gtk-layer-shell
@@ -105,3 +103,7 @@ layerrule = blur, indicator.*
 layerrule = ignorealpha 0.6, indicator.*
 layerrule = blur, osk[0-9]*
 layerrule = ignorealpha 0.6, osk[0-9]*
+
+# Quickshell
+layerrule = animation fade, quickshell:screenCorners
+

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

@@ -8,8 +8,8 @@ import Quickshell
 Scope {
     id: bar
 
-    readonly property int barHeight: 40
+    readonly property int barHeight: Appearance.sizes.barHeight
-    readonly property int sideCenterModuleWidth: 360
+    readonly property int barCenterSideModuleWidth: Appearance.sizes.barCenterSideModuleWidth
 
     Variants {
         model: Quickshell.screens
@@ -20,9 +20,26 @@ Scope {
             property var modelData
 
             screen: modelData
-            height: barHeight
+            height: barHeight + Appearance.rounding.screenRounding
-            color: Appearance.colors.colLayer0
+            exclusiveZone: barHeight
+            mask: Region {
+                item: barContent
+            }
+            color: "transparent"
 
+            anchors {
+                top: true
+                left: true
+                right: true
+            }
+
+            Rectangle {
+                id: barContent
+                anchors.right: parent.right
+                anchors.left: parent.left
+                anchors.top: parent.top
+                color: Appearance.colors.colLayer0
+                height: barHeight
                 // Left section
                 RowLayout {
                     anchors.left: parent.left
@@ -51,7 +68,7 @@ Scope {
                     spacing: 8
 
                     RowLayout {
-                    Layout.preferredWidth: sideCenterModuleWidth
+                        Layout.preferredWidth: barCenterSideModuleWidth
                         spacing: 4
                         Layout.fillHeight: true
                         implicitWidth: 350
@@ -77,7 +94,7 @@ Scope {
                     }
 
                     RowLayout {
-                    Layout.preferredWidth: sideCenterModuleWidth
+                        Layout.preferredWidth: barCenterSideModuleWidth
                         Layout.fillHeight: true
                         spacing: 4
 
@@ -126,11 +143,29 @@ Scope {
                     }
 
                 }
+            }
 
-            anchors {
+            // Round decorators
-                top: true
+            Item {
-                left: true
+                anchors.left: parent.left
-                right: true
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                height: Appearance.rounding.screenRounding
+
+                RoundCorner {
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    size: Appearance.rounding.screenRounding
+                    corner: cornerEnum.topLeft
+                    color: Appearance.colors.colLayer0
+                }
+                RoundCorner {
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+                    size: Appearance.rounding.screenRounding
+                    corner: cornerEnum.topRight
+                    color: Appearance.colors.colLayer0
+                }
             }
 
         }

.config/quickshell/modules/bar/Resources.qml

@@ -28,14 +28,14 @@ Rectangle {
         Resource {
             iconName: "swap_horiz"
             percentage: ResourceUsage.swapUsedPercentage
-            shown: ConfigOptions.bar.resources.alwaysShowSwap || (MprisController.activePlayer == null)
+            shown: ConfigOptions.bar.resources.alwaysShowSwap || (MprisController.activePlayer?.trackTitle == null)
             Layout.leftMargin: shown ? 4 : 0
         }
 
         Resource {
             iconName: "settings_slow_motion"
             percentage: ResourceUsage.cpuUsage
-            shown: ConfigOptions.bar.resources.alwaysShowCpu || (MprisController.activePlayer == null)
+            shown: ConfigOptions.bar.resources.alwaysShowCpu || !(MprisController.activePlayer?.trackTitle?.length > 0)
             Layout.leftMargin: shown ? 4 : 0
         }
 

.config/quickshell/modules/bar/SysTrayItem.qml

@@ -21,11 +21,9 @@ MouseArea {
             item.activate();
             break;
         case Qt.RightButton:
-            if (item.hasMenu) {
+            if (item.hasMenu)
                 menu.open();
-            }
+
-        default:
-            console.log("Buttonevent unhandled");
         }
     }
 

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

@@ -8,6 +8,7 @@ Singleton {
     property QtObject colors
     property QtObject rounding
     property QtObject font
+    property QtObject sizes
 
     function mix(color1, color2, percentage) {
         var c1 = Qt.color(color1);
@@ -152,4 +153,12 @@ Singleton {
         }
     }
 
+    sizes: QtObject {
+        property int barHeight: 40
+        property int barCenterSideModuleWidth: 360
+        property int sidebarWidth: 450
+        property int hyprlandGapsOut: 5
+        property int elevationMargin: 7
+    }
+
 }

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

@@ -0,0 +1,64 @@
+import QtQuick 2.9
+
+Item {
+    id: root
+
+    property int size: 25
+    property color color: "#000000"
+
+    property QtObject cornerEnum: QtObject {
+        property int topLeft: 0
+        property int topRight: 1
+        property int bottomLeft: 2
+        property int bottomRight: 3
+    }
+
+    property int corner: cornerEnum.topLeft // Default to TopLeft
+
+    width: size
+    height: size
+
+    Canvas {
+        id: canvas
+
+        anchors.fill: parent
+        antialiasing: true
+        
+        onPaint: {
+            var ctx = getContext("2d");
+            var r = root.size;
+
+            ctx.beginPath();
+            switch (root.corner) {
+                case cornerEnum.topLeft:
+                    ctx.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
+                    ctx.lineTo(0, 0);
+                    break;
+                case cornerEnum.topRight:
+                    ctx.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI);
+                    ctx.lineTo(r, 0);
+                    break;
+                case cornerEnum.bottomLeft:
+                    ctx.arc(r, 0, r, Math.PI / 2, Math.PI);
+                    ctx.lineTo(0, r);
+                    break;
+                case cornerEnum.bottomRight:
+                    ctx.arc(0, 0, r, 0, Math.PI / 2);
+                    ctx.lineTo(r, r);
+                    break;
+            }
+            ctx.closePath();
+            ctx.fillStyle = root.color;
+            ctx.fill();
+        }
+    }
+
+    Behavior on size {
+        NumberAnimation {
+            duration: root.animationDuration
+            easing.type: Easing.OutCubic
+        }
+
+    }
+
+}

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

@@ -0,0 +1,66 @@
+import "../common"
+import "../common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+
+Scope {
+    id: screenCorners
+    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+
+    Variants {
+        model: Quickshell.screens
+
+        PanelWindow {
+            id: barRoot
+            visible: !activeWindow?.fullscreen
+
+            property var modelData
+
+            screen: modelData
+            exclusionMode: ExclusionMode.Ignore
+            mask: Region {
+                item: null
+            }
+            WlrLayershell.namespace: "quickshell:screenCorners"
+            color: "transparent"
+
+            anchors {
+                top: true
+                left: true
+                right: true
+                bottom: true
+            }
+
+            RoundCorner {
+                anchors.top: parent.top
+                anchors.left: parent.left
+                size: Appearance.rounding.screenRounding
+                corner: cornerEnum.topLeft
+            }
+            RoundCorner {
+                anchors.top: parent.top
+                anchors.right: parent.right
+                size: Appearance.rounding.screenRounding
+                corner: cornerEnum.topRight
+            }
+            RoundCorner {
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                size: Appearance.rounding.screenRounding
+                corner: cornerEnum.bottomLeft
+            }
+            RoundCorner {
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+                size: Appearance.rounding.screenRounding
+                corner: cornerEnum.bottomRight
+            }
+
+        }
+
+    }
+
+}

.config/quickshell/modules/sidebarRight/SidebarRight.qml

@@ -0,0 +1,46 @@
+import "../common"
+import "../common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+
+Scope {
+    id: bar
+
+    readonly property int sidebarWidth: Appearance.sizes.sidebarWidth
+
+    Variants {
+        model: Quickshell.screens
+
+        PanelWindow {
+            id: barRoot
+
+            property var modelData
+
+            screen: modelData
+            exclusiveZone: 0
+            width: sidebarWidth
+            color: "transparent"
+
+            anchors {
+                top: true
+                right: true
+                bottom: true
+            }
+
+            // Background
+            Rectangle {
+                id: sidebarRightBackground
+                anchors.centerIn: parent
+                width: parent.width - Appearance.sizes.hyprlandGapsOut * 2
+                height: parent.height - Appearance.sizes.hyprlandGapsOut * 2
+                color: Appearance.colors.colLayer0
+                radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
+            }
+
+        }
+
+    }
+
+}

.config/quickshell/shell.qml

@@ -1,16 +1,20 @@
 //@ pragma UseQApplication
 
+import "./modules/bar/"
+import "./modules/sidebarRight/"
+import "./modules/screenCorners/"
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Quickshell
-import "./modules/bar"
-
 import QtQuick.Window
+import Quickshell
 
 ShellRoot {
     Bar {
     }
 
-
+    // SidebarRight {
+    // }
+    ScreenCorners {
+    }
 }