fix style

modules/bar/Bar.qml

@@ -18,10 +18,19 @@ Variants {
                         left: true
                         right: true
                 }
+                margins {
+                        top: Config.floating ? 10 : 0
+                        left: Config.floating ? 10 : 0
+                        right: Config.floating ? 10 : 0
+                }
+                color: 'transparent'
                 implicitHeight: Config.barHeight
-        color: Qt.rgba(Colors.base00.r, Colors.base00.g, Colors.base00.b, Config.opacity)
                 layer: WlrLayer.Top
-
+                Rectangle {
+                        radius: Config.floating ? Config.rounding : 0
+                        color: Qt.rgba(Colors.base00.r, Colors.base00.g, Colors.base00.b, Config.opacity)
+                        id: container
+                        anchors.fill: parent
                         RowLayout {
                                 id: leftLayout
                                 spacing: 5
@@ -66,4 +75,5 @@ Variants {
                                 }
                         }
                 }
+        }
 }

modules/corners/ScreenCorners.qml

@@ -6,189 +6,236 @@ import Quickshell.Wayland
 import qs
 import qs.settings
 
-Item {
+/**
-    Variants {
+* ScreenCorners - Shape component for rendering screen corners
+*
+* Renders concave corners at the screen edges to create a rounded screen effect.
+* Self-contained Shape component (no shadows).
+*/
+Variants {
         model: Quickshell.screens
-        delegate: WlrLayershell {
+        delegate: PanelWindow {
-            id: tlWin
+                required property ShellScreen modelData
-            required property var modelData
                 screen: modelData
-            visible: Config.rounding > 0
+                id: root
-            layer: WlrLayer.Top
                 anchors {
                         top: true
-                left: true
-            }
-//            margins.top: Config.barHeight
-            implicitWidth: Config.rounding
-            implicitHeight: Config.rounding
-            color: "transparent"
-
-            Shape {
-                anchors.fill: parent
-                preferredRendererType: Shape.CurveRenderer
-                ShapePath {
-                    fillColor: Qt.rgba(Colors.base00.r, Colors.base00.g, Colors.base00.b, Config.opacity)
-                    strokeWidth: -1
-                    startX: 0
-                    startY: 0
-                    PathLine {
-                        x: tlWin.implicitWidth
-                        y: 0
-                    }
-                    PathArc {
-                        x: 0
-                        y: tlWin.implicitHeight
-                        radiusX: tlWin.implicitWidth
-                        radiusY: tlWin.implicitHeight
-                        direction: PathArc.Counterclockwise
-                    }
-                    PathLine {
-                        x: 0
-                        y: 0
-                    }
-                }
-            }
-        }
-    }
-
-    // Top-right corners
-    Variants {
-        model: Quickshell.screens
-        delegate: WlrLayershell {
-            id: trWin
-            required property var modelData
-            screen: modelData
-            visible: Config.rounding > 0
-            exclusionMode: ExclusionMode.Ignore
-            layer: WlrLayer.Overlay
-            anchors {
-                top: true
-                right: true
-            }
-            margins.top: Config.barHeight
-            implicitWidth: Config.rounding
-            implicitHeight: Config.rounding
-            color: "transparent"
-
-            Shape {
-                anchors.fill: parent
-                preferredRendererType: Shape.CurveRenderer
-                ShapePath {
-                    fillColor: Qt.rgba(Colors.base00.r, Colors.base00.g, Colors.base00.b, Config.opacity)
-                    strokeWidth: -1
-                    startX: 0
-                    startY: 0
-                    PathLine {
-                        x: trWin.implicitWidth
-                        y: 0
-                    }
-                    PathLine {
-                        x: trWin.implicitWidth
-                        y: trWin.implicitHeight
-                    }
-                    PathArc {
-                        x: 0
-                        y: 0
-                        radiusX: trWin.implicitWidth
-                        radiusY: trWin.implicitHeight
-                        direction: PathArc.Counterclockwise
-                    }
-                    PathLine {
-                        x: 0
-                        y: 0
-                    }
-                }
-            }
-        }
-    }
-
-    // Bottom-left corners
-    Variants {
-        model: Quickshell.screens
-        delegate: WlrLayershell {
-            id: blWin
-            required property var modelData
-            screen: modelData
-            visible: Config.rounding > 0
-            exclusionMode: ExclusionMode.Ignore
-            layer: WlrLayer.Overlay
-            anchors {
                         bottom: true
                         left: true
-            }
-            implicitWidth: Config.rounding
-            implicitHeight: Config.rounding
-            color: "transparent"
-
-            Shape {
-                anchors.fill: parent
-                preferredRendererType: Shape.CurveRenderer
-                ShapePath {
-                    fillColor: Qt.rgba(Colors.base00.r, Colors.base00.g, Colors.base00.b, Config.opacity)
-                    strokeWidth: -1
-                    startX: 0
-                    startY: 0
-                    PathArc {
-                        x: blWin.implicitWidth
-                        y: blWin.implicitHeight
-                        radiusX: blWin.implicitWidth
-                        radiusY: blWin.implicitHeight
-                        direction: PathArc.Counterclockwise
-                    }
-                    PathLine {
-                        x: 0
-                        y: blWin.implicitHeight
-                    }
-                    PathLine {
-                        x: 0
-                        y: 0
-                    }
-                }
-            }
-        }
-    }
-
-    // Bottom-right corners
-    Variants {
-        model: Quickshell.screens
-        delegate: WlrLayershell {
-            id: brWin
-            required property var modelData
-            screen: modelData
-            visible: Config.rounding > 0
-            exclusionMode: ExclusionMode.Ignore
-            layer: WlrLayer.Overlay
-            anchors {
-                bottom: true
                         right: true
                 }
-            implicitWidth: Config.rounding
+                margins.top: Config.floating ? 0 : Config.barHeight
-            implicitHeight: Config.rounding
+                mask: Region {
-            color: "transparent"
+                        width: root.implicitWidth
+                        height: root.implicitHeight
+                }
+                color: 'transparent'
+                exclusionMode: ExclusionMode.Ignore
+
+                // Wrapper with layer caching to reduce GPU tessellation overhead
+                Item {
+                        id: container
+                        anchors.fill: parent
+
+                        // Cache the Shape to a texture to prevent continuous re-tessellation
+                        layer.enabled: true
 
                         Shape {
+                                id: cornersShape
+
                                 anchors.fill: parent
                                 preferredRendererType: Shape.CurveRenderer
+                                asynchronous: true
+                                enabled: false // Disable mouse input
+                                visible: Config.rounding != 0
+
                                 ShapePath {
-                    fillColor: Qt.rgba(Colors.base00.r, Colors.base00.g, Colors.base00.b, Config.opacity)
+                                        id: cornersPath
-                    strokeWidth: -1
+
-                    startX: brWin.implicitWidth
+                                        // Corner configuration
-                    startY: brWin.implicitHeight
+                                        readonly property color cornerColor: Config.floating ? "black" : Colors.base00
+                                        readonly property real cornerRadius: Config.rounding
+                                        readonly property real cornerSize: Config.rounding
+
+                                        // Determine margins based on bar position
+                                        readonly property real topMargin: 0
+                                        readonly property real bottomMargin: 0
+                                        readonly property real leftMargin: 0
+                                        readonly property real rightMargin: 0
+
+                                        // Screen dimensions
+                                        readonly property real screenWidth: cornersShape.width
+                                        readonly property real screenHeight: cornersShape.height
+
+                                        // Only show screen corners if enabled and appropriate conditions are met
+                                        readonly property bool shouldShow: Config.rounding != 0
+
+                                        // ShapePath configuration
+                                        strokeWidth: -1 // No stroke, fill only
+                                        fillColor: shouldShow ? cornerColor : "transparent"
+
+                                        // ========== PATH DEFINITION ==========
+                                        // Draws 4 separate corner squares at screen edges
+                                        // Each corner square has a concave arc on the inner diagonal
+
+                                        // ========== TOP-LEFT CORNER ==========
+                                        // Arc is at the bottom-right of this square (inner diagonal)
+                                        // Start at top-left screen corner
+                                        startX: leftMargin
+                                        startY: topMargin
+
+                                        // Top edge (moving right)
                                         PathLine {
-                        x: 0
+                                                relativeX: cornersPath.cornerSize
-                        y: brWin.implicitHeight
+                                                relativeY: 0
                                         }
+
+                                        // Right edge (moving down toward arc)
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: cornersPath.cornerSize - cornersPath.cornerRadius
+                                        }
+
+                                        // Concave arc (bottom-right corner of square, curving inward toward screen center)
                                         PathArc {
-                        x: brWin.implicitWidth
+                                                relativeX: -cornersPath.cornerRadius
-                        y: 0
+                                                relativeY: cornersPath.cornerRadius
-                        radiusX: brWin.implicitWidth
+                                                radiusX: cornersPath.cornerRadius
-                        radiusY: brWin.implicitHeight
+                                                radiusY: cornersPath.cornerRadius
                                                 direction: PathArc.Counterclockwise
                                         }
+
+                                        // Bottom edge (moving left)
                                         PathLine {
-                        x: brWin.implicitWidth
+                                                relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius)
-                        y: brWin.implicitHeight
+                                                relativeY: 0
+                                        }
+
+                                        // Left edge (moving up) - closes back to start
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: -cornersPath.cornerSize
+                                        }
+
+                                        // ========== TOP-RIGHT CORNER ==========
+                                        // Arc is at the bottom-left of this square (inner diagonal)
+                                        PathMove {
+                                                x: cornersPath.screenWidth - cornersPath.rightMargin - cornersPath.cornerSize
+                                                y: cornersPath.topMargin
+                                        }
+
+                                        // Top edge (moving right)
+                                        PathLine {
+                                                relativeX: cornersPath.cornerSize
+                                                relativeY: 0
+                                        }
+
+                                        // Right edge (moving down)
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: cornersPath.cornerSize
+                                        }
+
+                                        // Bottom edge (moving left toward arc)
+                                        PathLine {
+                                                relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius)
+                                                relativeY: 0
+                                        }
+
+                                        // Concave arc (bottom-left corner of square, curving inward toward screen center)
+                                        PathArc {
+                                                relativeX: -cornersPath.cornerRadius
+                                                relativeY: -cornersPath.cornerRadius
+                                                radiusX: cornersPath.cornerRadius
+                                                radiusY: cornersPath.cornerRadius
+                                                direction: PathArc.Counterclockwise
+                                        }
+
+                                        // Left edge (moving up) - closes back to start
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius)
+                                        }
+
+                                        // ========== BOTTOM-LEFT CORNER ==========
+                                        // Arc is at the top-right of this square (inner diagonal)
+                                        PathMove {
+                                                x: cornersPath.leftMargin
+                                                y: cornersPath.screenHeight - cornersPath.bottomMargin - cornersPath.cornerSize
+                                        }
+
+                                        // Top edge (moving right toward arc)
+                                        PathLine {
+                                                relativeX: cornersPath.cornerSize - cornersPath.cornerRadius
+                                                relativeY: 0
+                                        }
+
+                                        // Concave arc (top-right corner of square, curving inward toward screen center)
+                                        PathArc {
+                                                relativeX: cornersPath.cornerRadius
+                                                relativeY: cornersPath.cornerRadius
+                                                radiusX: cornersPath.cornerRadius
+                                                radiusY: cornersPath.cornerRadius
+                                                direction: PathArc.Counterclockwise
+                                        }
+
+                                        // Right edge (moving down)
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: cornersPath.cornerSize - cornersPath.cornerRadius
+                                        }
+
+                                        // Bottom edge (moving left)
+                                        PathLine {
+                                                relativeX: -cornersPath.cornerSize
+                                                relativeY: 0
+                                        }
+
+                                        // Left edge (moving up) - closes back to start
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: -cornersPath.cornerSize
+                                        }
+
+                                        // ========== BOTTOM-RIGHT CORNER ==========
+                                        // Arc is at the top-left of this square (inner diagonal)
+                                        // Start at bottom-right of square (different from other corners!)
+                                        PathMove {
+                                                x: cornersPath.screenWidth - cornersPath.rightMargin
+                                                y: cornersPath.screenHeight - cornersPath.bottomMargin
+                                        }
+
+                                        // Bottom edge (moving left)
+                                        PathLine {
+                                                relativeX: -cornersPath.cornerSize
+                                                relativeY: 0
+                                        }
+
+                                        // Left edge (moving up toward arc)
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius)
+                                        }
+
+                                        // Concave arc (top-left corner of square, curving inward toward screen center)
+                                        PathArc {
+                                                relativeX: cornersPath.cornerRadius
+                                                relativeY: -cornersPath.cornerRadius
+                                                radiusX: cornersPath.cornerRadius
+                                                radiusY: cornersPath.cornerRadius
+                                                direction: PathArc.Counterclockwise
+                                        }
+
+                                        // Top edge (moving right)
+                                        PathLine {
+                                                relativeX: cornersPath.cornerSize - cornersPath.cornerRadius
+                                                relativeY: 0
+                                        }
+
+                                        // Right edge (moving down) - closes back to start
+                                        PathLine {
+                                                relativeX: 0
+                                                relativeY: cornersPath.cornerSize
                                         }
                                 }
                         }

modules/ipc/Ipc.qml

@@ -33,6 +33,10 @@ IpcHandler {
         Config.opacity = newOpacity;
     }
 
+    function floating(toggle: bool) {
+        Config.floating = toggle
+    }
+
     function setWall(newWall: string) {
         if (newWall.startsWith("/")) {
             Config.wallpaper = "file://" + newWall;

modules/notifications/NotiPopup.qml

@@ -26,7 +26,7 @@ WlrLayershell {
         top: true
         right: true
     }
-    margins.top: Config.barHeight + 8
+    margins.top: Config.barHeight + 8 + (Config.floating ? 10 : 0)
     margins.right: 8
     implicitHeight: notiList.contentHeight
     implicitWidth: activeScreen.width / 6

settings/Config.qml

@@ -20,9 +20,10 @@ Singleton {
         property alias font: root.font
         property alias fontSize: root.fontSize
         property alias barHeight: root.barHeight
-        property alias roudning: root.rounding
+        property alias rounding: root.rounding
         property alias wallpaper: root.wallpaper
         property alias opacity: root.opacity
-        property string primaryMon: root.primaryMon
+        property alias primaryMon: root.primaryMon
+        property alias floating: root.floating
     }
 }

shell.qml

@@ -8,9 +8,9 @@ import qs.modules.notifications
 import qs.modules.corners
 
 ShellRoot {
+        ScreenCorners {}
         Bar {}
         Ipc {}
         Wallpaper {}
         NotiPopup {}
-    ScreenCorners {}
 }