internal: bar only vertical

The bar can only be vertical
Remove box, boxlayout and anchortext
Add StyledClippingRect

18 files changed, 107 insertions, 225 deletions

diff --git a/modules/bar/Content.qml b/modules/bar/Content.qml
index 4149521..ac828f8 100644
--- a/modules/bar/Content.qml
+++ b/modules/bar/Content.qml
@@ -24,8 +24,6 @@ StyledRect {
     Item {
         id: child
 
-        readonly property bool vertical: true
-
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.right: parent.right
@@ -40,7 +38,7 @@ StyledRect {
             anchors.topMargin: Appearance.padding.large
         }
 
-        ClippingRectangle {
+        StyledClippingRect {
             id: workspaces
 
             anchors.horizontalCenter: parent.horizontalCenter
@@ -57,16 +55,6 @@ StyledRect {
                 id: workspacesInner
 
                 anchors.centerIn: parent
-
-                vertical: true
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.standard
-                }
             }
         }
 
diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml
index 17bc6a7..6ac4b89 100644
--- a/modules/bar/components/ActiveWindow.qml
+++ b/modules/bar/components/ActiveWindow.qml
@@ -9,7 +9,6 @@ import QtQuick
 Item {
     id: root
 
-    readonly property bool vertical: parent?.vertical ?? false
     property color colour: Colours.palette.m3primary
 
     implicitWidth: child.implicitWidth
@@ -18,13 +17,11 @@ Item {
     Item {
         id: child
 
-        readonly property bool vertical: root.vertical
-
         anchors.centerIn: parent
 
         clip: true
-        implicitWidth: root.vertical ? Math.max(icon.implicitWidth, text.implicitHeight) : icon.implicitWidth + text.implicitWidth + text.anchors.leftMargin
-        implicitHeight: root.vertical ? icon.implicitHeight + text.implicitWidth + text.anchors.topMargin : Math.max(icon.implicitHeight, text.implicitheight)
+        implicitWidth: Math.max(icon.implicitWidth, text.implicitHeight)
+        implicitHeight: icon.implicitHeight + text.implicitWidth + text.anchors.topMargin
 
         MaterialIcon {
             id: icon
@@ -33,13 +30,15 @@ Item {
             text: Icons.getAppCategoryIcon(Hyprland.activeClient?.wmClass, "desktop_windows")
             color: root.colour
 
-            anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
+            anchors.horizontalCenter: parent.horizontalCenter
         }
 
-        AnchorText {
+        StyledText {
             id: text
 
-            prevAnchor: icon
+            anchors.horizontalCenter: icon.horizontalCenter
+            anchors.top: icon.bottom
+            anchors.topMargin: Appearance.spacing.small
 
             text: metrics.elidedText
             font.pointSize: metrics.font.pointSize
@@ -47,13 +46,13 @@ Item {
             color: root.colour
 
             transform: Rotation {
-                angle: vertical ? 90 : 0
+                angle: 90
                 origin.x: text.implicitHeight / 2
                 origin.y: text.implicitHeight / 2
             }
 
-            width: vertical ? implicitHeight : implicitWidth
-            height: vertical ? implicitWidth : implicitHeight
+            width: implicitHeight
+            height: implicitWidth
         }
 
         TextMetrics {
@@ -63,7 +62,7 @@ Item {
             font.pointSize: Appearance.font.size.smaller
             font.family: Appearance.font.family.mono
             elide: Qt.ElideRight
-            elideWidth: root.vertical ? root.height - icon.height : root.width - icon.width
+            elideWidth: root.height - icon.height
         }
 
         Behavior on implicitWidth {
diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml
index a0fb267..ea57e2b 100644
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@@ -3,14 +3,12 @@ import "root:/services"
 import "root:/config"
 import QtQuick
 
-Item {
+Column {
     id: root
 
-    readonly property bool vertical: parent?.vertical ?? false
     property color colour: Colours.palette.m3tertiary
 
-    implicitWidth: vertical ? Math.max(icon.implicitWidth, text.implicitWidth) : icon.implicitWidth + text.implicitWidth + text.anchors.leftMargin
-    implicitHeight: vertical ? icon.implicitHeight + text.implicitHeight + text.anchors.topMargin : Math.max(icon.implicitHeight, text.implicitHeight)
+    spacing: Appearance.spacing.small
 
     MaterialIcon {
         id: icon
@@ -18,16 +16,16 @@ Item {
         text: "calendar_month"
         color: root.colour
 
-        anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
+        anchors.horizontalCenter: parent.horizontalCenter
     }
 
-    AnchorText {
+    StyledText {
         id: text
 
-        prevAnchor: icon
+        anchors.horizontalCenter: parent.horizontalCenter
 
         horizontalAlignment: StyledText.AlignHCenter
-        text: root.vertical ? Time.format("hh\nmm") : Time.format("hh:mm • dddd, dd MMMM")
+        text: Time.format("hh\nmm")
         font.pointSize: Appearance.font.size.smaller
         font.family: Appearance.font.family.mono
         color: root.colour
diff --git a/modules/bar/components/StatusIcons.qml b/modules/bar/components/StatusIcons.qml
index a6ad443..453adf0 100644
--- a/modules/bar/components/StatusIcons.qml
+++ b/modules/bar/components/StatusIcons.qml
@@ -9,12 +9,11 @@ import QtQuick
 Item {
     id: root
 
-    readonly property bool vertical: parent?.vertical ?? false
     property color colour: Colours.palette.m3secondary
 
     clip: true
-    implicitWidth: vertical ? Math.max(network.implicitWidth, bluetooth.implicitWidth, devices.implicitWidth, battery.implicitWidth) : network.implicitWidth + bluetooth.implicitWidth + bluetooth.anchors.leftMargin + (repeater.count > 0 ? devices.implicitWidth + devices.anchors.leftMargin : 0) + (battery.active ? battery.implicitWidth + battery.anchors.leftMargin : 0)
-    implicitHeight: vertical ? network.implicitHeight + bluetooth.implicitHeight + bluetooth.anchors.topMargin + (repeater.count > 0 ? devices.implicitHeight + devices.anchors.topMargin : 0) + (battery.active ? battery.implicitHeight + battery.anchors.topMargin : 0) : Math.max(network.implicitHeight, bluetooth.implicitHeight, devices.implicitHeight, battery.implicitHeight)
+    implicitWidth: Math.max(network.implicitWidth, bluetooth.implicitWidth, devices.implicitWidth, battery.implicitWidth)
+    implicitHeight: network.implicitHeight + bluetooth.implicitHeight + bluetooth.anchors.topMargin + (repeater.count > 0 ? devices.implicitHeight + devices.anchors.topMargin : 0) + (battery.active ? battery.implicitHeight + battery.anchors.topMargin : 0)
 
     MaterialIcon {
         id: network
@@ -23,31 +22,27 @@ Item {
         text: Icons.getNetworkIcon(Network.active?.strength ?? 0)
         color: root.colour
 
-        anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
+        anchors.horizontalCenter: parent.horizontalCenter
     }
 
-    AnchorText {
+    MaterialIcon {
         id: bluetooth
 
-        prevAnchor: network
+        anchors.horizontalCenter: network.horizontalCenter
+        anchors.top: network.bottom
+        anchors.topMargin: Appearance.spacing.small
 
         animate: true
         text: Bluetooth.powered ? "bluetooth" : "bluetooth_disabled"
         color: root.colour
-        font.family: Appearance.font.family.material
-        font.pointSize: Appearance.font.size.larger
     }
 
-    Box {
+    Column {
         id: devices
 
-        anchors.left: vertical ? undefined : bluetooth.right
-        anchors.leftMargin: vertical ? 0 : Appearance.padding.smaller
-        anchors.top: vertical ? bluetooth.bottom : undefined
-        anchors.topMargin: vertical ? Appearance.padding.smaller : 0
-
-        anchors.horizontalCenter: vertical ? bluetooth.horizontalCenter : undefined
-        anchors.verticalCenter: vertical ? undefined : bluetooth.verticalCenter
+        anchors.horizontalCenter: bluetooth.horizontalCenter
+        anchors.top: bluetooth.bottom
+        anchors.topMargin: Appearance.spacing.small
 
         Repeater {
             id: repeater
@@ -69,13 +64,9 @@ Item {
     Loader {
         id: battery
 
-        anchors.left: root.vertical ? undefined : repeater.count > 0 ? devices.right : bluetooth.right
-        anchors.leftMargin: root.vertical ? 0 : Appearance.padding.smaller
-        anchors.top: root.vertical ? repeater.count > 0 ? devices.bottom : bluetooth.bottom : undefined
-        anchors.topMargin: root.vertical ? Appearance.padding.smaller : 0
-
-        anchors.horizontalCenter: root.vertical ? devices.horizontalCenter : undefined
-        anchors.verticalCenter: root.vertical ? undefined : devices.verticalCenter
+        anchors.horizontalCenter: devices.horizontalCenter
+        anchors.top: repeater.count > 0 ? devices.bottom : bluetooth.bottom
+        anchors.topMargin: Appearance.spacing.small
 
         active: UPower.displayDevice.isLaptopBattery
         asynchronous: true
@@ -84,7 +75,7 @@ Item {
             text: {
                 const device = UPower.displayDevice;
                 const perc = device.percentage;
-                const charging = device.changeRate >= 0;
+                const charging = device.changeRate > 0;
                 if (perc === 1)
                     return charging ? "battery_charging_full" : "battery_full";
                 let level = Math.floor(perc * 7);
@@ -92,7 +83,7 @@ Item {
                     level--;
                 return charging ? `battery_charging_${(level + 3) * 10}` : `battery_${level}_bar`;
             }
-            color: UPower.displayDevice.percentage > 0.2 ? root.colour : Colours.palette.m3error
+            color: UPower.displayDevice.percentage > 0.2 || UPower.displayDevice.changeRate > 0 ? root.colour : Colours.palette.m3error
             fill: 1
         }
     }
diff --git a/modules/bar/components/Tray.qml b/modules/bar/components/Tray.qml
index 78efad7..fc65492 100644
--- a/modules/bar/components/Tray.qml
+++ b/modules/bar/components/Tray.qml
@@ -1,5 +1,3 @@
-import "root:/widgets"
-import "root:/services"
 import "root:/config"
 import Quickshell.Services.SystemTray
 import QtQuick
@@ -7,17 +5,28 @@ import QtQuick
 Item {
     id: root
 
-    readonly property bool vertical: parent?.vertical ?? false
-
     clip: true
     visible: width > 0 && height > 0 // To avoid warnings about being visible with no size
 
     implicitWidth: layout.implicitWidth
     implicitHeight: layout.implicitHeight
 
-    BoxLayout {
+    Column {
         id: layout
 
+        spacing: Appearance.spacing.small
+
+        add: Transition {
+            NumberAnimation {
+                properties: "scale"
+                from: 0
+                to: 1
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standardDecel
+            }
+        }
+
         Repeater {
             model: SystemTray.items
 
diff --git a/modules/bar/components/workspaces/ActiveIndicator.qml b/modules/bar/components/workspaces/ActiveIndicator.qml
index 58727dd..d55bdb8 100644
--- a/modules/bar/components/workspaces/ActiveIndicator.qml
+++ b/modules/bar/components/workspaces/ActiveIndicator.qml
@@ -4,10 +4,9 @@ import "root:/config"
 import QtQuick
 import QtQuick.Effects
 
-Rectangle {
+StyledRect {
     id: root
 
-    required property bool vertical
     required property list<Workspace> workspaces
     required property Item mask
     required property real maskWidth
@@ -15,34 +14,26 @@ Rectangle {
     required property int groupOffset
 
     readonly property Workspace currentWs: workspaces[Hyprland.activeWsId - 1 - groupOffset] ?? null
-    property real leading: (vertical ? currentWs?.y : currentWs?.x) ?? 0
-    property real trailing: (vertical ? currentWs?.y : currentWs?.x) ?? 0
+    property real leading: currentWs?.y ?? 0
+    property real trailing: currentWs?.y ?? 0
     property real currentSize: (currentWs?.size) ?? 0
     property real size: Math.abs(leading - trailing) + currentSize
     property real offset: Math.min(leading, trailing)
 
     clip: true
-    x: vertical ? 1 : offset + 1
-    y: vertical ? offset + 1 : 1
-    implicitWidth: (vertical ? BarConfig.sizes.innerHeight : size) - 2
-    implicitHeight: (vertical ? size : BarConfig.sizes.innerHeight) - 2
+    x: 1
+    y: offset + 1
+    implicitWidth: BarConfig.sizes.innerHeight - 2
+    implicitHeight: size - 2
     radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
     color: Colours.palette.m3primary
 
-    Rectangle {
+    StyledRect {
         id: base
 
         visible: false
         anchors.fill: parent
         color: Colours.palette.m3onPrimary
-
-        Behavior on color {
-            ColorAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
     }
 
     MultiEffect {
@@ -52,21 +43,12 @@ Rectangle {
         maskSpreadAtMin: 1
         maskThresholdMin: 0.5
 
-        x: root.vertical ? 0 : -parent.offset
-        y: root.vertical ? -parent.offset : 0
+        x: 0
+        y: -parent.offset
         implicitWidth: root.maskWidth
         implicitHeight: root.maskHeight
 
-        anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
-        anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
-    }
-
-    Behavior on color {
-        ColorAnimation {
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standard
-        }
+        anchors.horizontalCenter: parent.horizontalCenter
     }
 
     Behavior on leading {
diff --git a/modules/bar/components/workspaces/OccupiedBg.qml b/modules/bar/components/workspaces/OccupiedBg.qml
index 9de3d5b..4fba2f4 100644
--- a/modules/bar/components/workspaces/OccupiedBg.qml
+++ b/modules/bar/components/workspaces/OccupiedBg.qml
@@ -9,7 +9,6 @@ import QtQuick
 Item {
     id: root
 
-    required property bool vertical
     required property list<Workspace> workspaces
     required property var occupied
     required property int groupOffset
@@ -44,7 +43,7 @@ Item {
             values: root.pills.filter(p => p)
         }
 
-        Rectangle {
+        StyledRect {
             id: rect
 
             required property var modelData
@@ -57,23 +56,14 @@ Item {
 
             x: start?.x ?? 0
             y: start?.y ?? 0
-            implicitWidth: root.vertical ? BarConfig.sizes.innerHeight : end?.x + end?.width - start?.x
-            implicitHeight: root.vertical ? end?.y + end?.height - start?.y : BarConfig.sizes.innerHeight
+            implicitWidth: BarConfig.sizes.innerHeight
+            implicitHeight: end?.y + end?.height - start?.y
 
-            anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
-            anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
 
             scale: 0
             Component.onCompleted: scale = 1
 
-            Behavior on color {
-                ColorAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.standard
-                }
-            }
-
             Behavior on scale {
                 Anim {
                     easing.bezierCurve: Appearance.anim.curves.standardDecel
diff --git a/modules/bar/components/workspaces/Workspace.qml b/modules/bar/components/workspaces/Workspace.qml
index 7f4bc68..fa5fe62 100644
--- a/modules/bar/components/workspaces/Workspace.qml
+++ b/modules/bar/components/workspaces/Workspace.qml
@@ -10,20 +10,19 @@ Item {
     id: root
 
     required property int index
-    required property bool vertical
     required property var occupied
     required property int groupOffset
 
     readonly property bool isWorkspace: true // Flag for finding workspace children
     // Unanimated prop for others to use as reference
-    readonly property real size: childrenRect[vertical ? "height" : "width"] + (hasWindows ? Appearance.padding.normal : 0)
+    readonly property real size: childrenRect.height + (hasWindows ? Appearance.padding.normal : 0)
 
     readonly property int ws: groupOffset + index + 1
     readonly property bool isOccupied: occupied[ws] ?? false
     readonly property bool hasWindows: isOccupied && BarConfig.workspaces.showWindows
 
-    Layout.preferredWidth: childrenRect.width + (hasWindows && !vertical ? Appearance.padding.normal : 0)
-    Layout.preferredHeight: childrenRect.height + (hasWindows && vertical ? Appearance.padding.normal : 0)
+    Layout.preferredWidth: childrenRect.width
+    Layout.preferredHeight: size
 
     StyledText {
         id: indicator
@@ -43,16 +42,25 @@ Item {
     }
 
     Loader {
+        id: windows
+
         active: BarConfig.workspaces.showWindows
         asynchronous: true
 
-        anchors.left: root.vertical ? undefined : indicator.right
-        anchors.top: root.vertical ? indicator.bottom : undefined
-        anchors.verticalCenter: root.vertical ? undefined : indicator.verticalCenter
-        anchors.horizontalCenter: root.vertical ? indicator.horizontalCenter : undefined
+        anchors.horizontalCenter: indicator.horizontalCenter
+        anchors.top: indicator.bottom
+
+        sourceComponent: Column {
+            spacing: Appearance.spacing.small
 
-        sourceComponent: Box {
-            vertical: root.vertical
+            add: Transition {
+                Anim {
+                    properties: "scale"
+                    from: 0
+                    to: 1
+                    easing.bezierCurve: Appearance.anim.curves.standardDecel
+                }
+            }
 
             Repeater {
                 model: ScriptModel {
diff --git a/modules/bar/components/workspaces/Workspaces.qml b/modules/bar/components/workspaces/Workspaces.qml
index 164698c..86392ec 100644
--- a/modules/bar/components/workspaces/Workspaces.qml
+++ b/modules/bar/components/workspaces/Workspaces.qml
@@ -4,12 +4,11 @@ import "root:/widgets"
 import "root:/services"
 import "root:/config"
 import QtQuick
+import QtQuick.Layouts
 
 Item {
     id: root
 
-    property alias vertical: layout.vertical
-
     readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace).sort((w1, w2) => w1.ws - w2.ws)
     readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
         acc[curr.id] = curr.lastIpcObject.windows > 0;
@@ -20,7 +19,7 @@ Item {
     implicitWidth: layout.implicitWidth
     implicitHeight: layout.implicitHeight
 
-    BoxLayout {
+    ColumnLayout {
         id: layout
 
         spacing: 0
@@ -31,7 +30,6 @@ Item {
             model: BarConfig.workspaces.shown
 
             Workspace {
-                vertical: root.vertical
                 occupied: root.occupied
                 groupOffset: root.groupOffset
             }
@@ -46,7 +44,6 @@ Item {
         anchors.fill: parent
 
         sourceComponent: OccupiedBg {
-            vertical: root.vertical
             workspaces: root.workspaces
             occupied: root.occupied
             groupOffset: root.groupOffset
@@ -58,7 +55,6 @@ Item {
         asynchronous: true
 
         sourceComponent: ActiveIndicator {
-            vertical: root.vertical
             workspaces: root.workspaces
             mask: layout
             maskWidth: root.width
diff --git a/modules/dashboard/Media.qml b/modules/dashboard/Media.qml
index 745bf7a..40f32f1 100644
--- a/modules/dashboard/Media.qml
+++ b/modules/dashboard/Media.qml
@@ -98,7 +98,7 @@ Item {
         }
     }
 
-    ClippingRectangle {
+    StyledClippingRect {
         id: cover
 
         anchors.verticalCenter: parent.verticalCenter
@@ -130,14 +130,6 @@ Item {
             sourceSize.width: width
             sourceSize.height: height
         }
-
-        Behavior on color {
-            ColorAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
     }
 
     Column {
diff --git a/modules/dashboard/dash/Media.qml b/modules/dashboard/dash/Media.qml
index 075844c..777c5e8 100644
--- a/modules/dashboard/dash/Media.qml
+++ b/modules/dashboard/dash/Media.qml
@@ -87,7 +87,7 @@ Item {
         }
     }
 
-    ClippingRectangle {
+    StyledClippingRect {
         id: cover
 
         anchors.top: parent.top
@@ -118,14 +118,6 @@ Item {
             sourceSize.width: width
             sourceSize.height: height
         }
-
-        Behavior on color {
-            ColorAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
     }
 
     StyledText {
diff --git a/modules/dashboard/dash/User.qml b/modules/dashboard/dash/User.qml
index a36536f..46055e9 100644
--- a/modules/dashboard/dash/User.qml
+++ b/modules/dashboard/dash/User.qml
@@ -13,7 +13,7 @@ Row {
     padding: Appearance.padding.large
     spacing: Appearance.spacing.large
 
-    ClippingRectangle {
+    StyledClippingRect {
         implicitWidth: info.implicitHeight
         implicitHeight: info.implicitHeight
 
@@ -32,14 +32,6 @@ Row {
             anchors.fill: parent
             path: `${Paths.home}/.face`
         }
-
-        Behavior on color {
-            ColorAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
     }
 
     Column {
@@ -109,10 +101,11 @@ Row {
                 })
         }
 
-        AnchorText {
+        StyledText {
             id: text
 
-            prevAnchor: icon
+            anchors.verticalCenter: icon.verticalCenter
+            anchors.left: icon.right
             anchors.leftMargin: icon.anchors.leftMargin
             text: `:  ${line.text}`
             font.pointSize: Appearance.font.size.normal
diff --git a/widgets/AnchorText.qml b/widgets/AnchorText.qml
deleted file mode 100644
index 03514dd..0000000
--- a/widgets/AnchorText.qml
+++ /dev/null
@@ -1,17 +0,0 @@
-import "root:/config"
-import QtQuick
-
-StyledText {
-    id: root
-
-    required property Item prevAnchor
-    property bool vertical: parent.vertical ?? false
-
-    anchors.left: vertical ? undefined : prevAnchor.right
-    anchors.leftMargin: vertical ? 0 : Appearance.padding.smaller
-    anchors.top: vertical ? prevAnchor.bottom : undefined
-    anchors.topMargin: vertical ? Appearance.padding.smaller : 0
-
-    anchors.horizontalCenter: vertical ? prevAnchor.horizontalCenter : undefined
-    anchors.verticalCenter: vertical ? undefined : prevAnchor.verticalCenter
-}
diff --git a/widgets/Box.qml b/widgets/Box.qml
deleted file mode 100644
index 9c786c7..0000000
--- a/widgets/Box.qml
+++ /dev/null
@@ -1,30 +0,0 @@
-import "root:/config"
-import QtQuick
-
-Grid {
-    property bool vertical: parent.vertical ?? false // Propagate from parent
-
-    flow: vertical ? Grid.TopToBottom : Grid.LeftToRight
-    spacing: Appearance.spacing.small
-
-    onVerticalChanged: {
-        if (vertical) {
-            rows = -1;
-            columns = 1;
-        } else {
-            columns = -1;
-            rows = 1;
-        }
-    }
-
-    add: Transition {
-        NumberAnimation {
-            properties: "scale"
-            from: 0
-            to: 1
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standardDecel
-        }
-    }
-}
diff --git a/widgets/BoxLayout.qml b/widgets/BoxLayout.qml
deleted file mode 100644
index d000bda..0000000
--- a/widgets/BoxLayout.qml
+++ /dev/null
@@ -1,16 +0,0 @@
-import "root:/config"
-import QtQuick.Layouts
-
-GridLayout {
-    property bool vertical: parent.vertical ?? false // Propagate from parent
-    property bool homogenous: false
-    property int spacing: Appearance.spacing.small
-
-    flow: vertical ? GridLayout.TopToBottom : GridLayout.LeftToRight
-    uniformCellWidths: homogenous || vertical
-    uniformCellHeights: homogenous || !vertical
-    rows: vertical ? -1 : 1
-    columns: vertical ? 1 : -1
-    rowSpacing: spacing
-    columnSpacing: spacing
-}
diff --git a/widgets/StateLayer.qml b/widgets/StateLayer.qml
index 8f39341..1c8f947 100644
--- a/widgets/StateLayer.qml
+++ b/widgets/StateLayer.qml
@@ -3,7 +3,7 @@ import "root:/services"
 import "root:/config"
 import QtQuick
 
-Rectangle {
+StyledRect {
     id: root
 
     readonly property alias hovered: mouse.hovered
@@ -40,12 +40,4 @@ Rectangle {
             easing.bezierCurve: Appearance.anim.curves.standard
         }
     }
-
-    Behavior on color {
-        ColorAnimation {
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standard
-        }
-    }
 }
diff --git a/widgets/StyledClippingRect.qml b/widgets/StyledClippingRect.qml
new file mode 100644
index 0000000..477ce86
--- /dev/null
+++ b/widgets/StyledClippingRect.qml
@@ -0,0 +1,17 @@
+import "root:/config"
+import Quickshell.Widgets
+import QtQuick
+
+ClippingRectangle {
+    id: root
+
+    color: "transparent"
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}
diff --git a/widgets/StyledRect.qml b/widgets/StyledRect.qml
index 8b3ac05..108e5e0 100644
--- a/widgets/StyledRect.qml
+++ b/widgets/StyledRect.qml
@@ -4,8 +4,6 @@ import QtQuick
 Rectangle {
     id: root
 
-    property bool vertical: parent?.vertical ?? false // Convenience property for propagation to children
-
     color: "transparent"
 
     Behavior on color {