refactor: use anchors instead of layouts

config/BarConfig.qml

@@ -6,9 +6,18 @@ import QtQuick
 Singleton {
     property bool vertical: false
 
-    readonly property QtObject workspaces: QtObject {
+    readonly property Sizes sizes: Sizes {}
-        property int shown: 10
+    readonly property Workspaces workspaces: Workspaces {}
-        property string style: ""
+
-        property bool occupiedBg: false
+    component Sizes: QtObject {
+        readonly property int height: 50
+        readonly property int floatingGap: 10
+        readonly property int floatingGapLarge: 15
+    }
+
+    component Workspaces: QtObject {
+        readonly property int shown: 10
+        readonly property string style: ""
+        readonly property bool occupiedBg: false
     }
 }

modules/bar/Bar.qml

@@ -5,6 +5,7 @@ import "components/workspaces"
 import Quickshell
 import Quickshell.Wayland
 import QtQuick
+import QtQuick.Controls
 
 Variants {
     model: Quickshell.screens
@@ -13,46 +14,68 @@ Variants {
         id: win
 
         required property ShellScreen modelData
-        readonly property bool vertical: BarConfig.vertical
 
         screen: modelData
         namespace: "caelestia-bar"
         color: "transparent"
 
+        width: content.width
+        height: content.height
+
         anchors.top: true
         anchors.left: true
-        anchors.right: !vertical
+        anchors.right: true
-        anchors.bottom: vertical
 
-        width: contents.implicitWidth
+        // Connections {
-        height: contents.implicitHeight
+        //     target: BarConfig
 
-        Box {
+        //     function onVerticalChanged(): void {
-            id: contents
+        //         win.visible = false;
+        //         if (BarConfig.vertical) {
+        //             win.anchors.right = false;
+        //             win.anchors.bottom = true;
+        //         } else {
+        //             win.anchors.bottom = false;
+        //             win.anchors.right = true;
+        //         }
+        //         win.visible = true;
+        //     }
+        // }
 
-            padding: [Appearance.padding.normal, Appearance.padding.large, 0, Appearance.padding.large]
+        // SwipeView {
+        //     anchors.fill: parent
 
-            BoxLayout {
+        // }
-                vertical: win.vertical
+        Pills {
-                spacing: Appearance.spacing.larger
+            id: content
-                padding: [0, Appearance.padding.large]
-                color: Appearance.alpha(Appearance.colours.base, false)
-                radius: Appearance.rounding.full
-
-                OsIcon {}
-
-                Workspaces {
-                    vertical: win.vertical
-                }
-
-                Clock {
-                    vertical: win.vertical
-                }
-
-                ActiveWindow {
-                    vertical: win.vertical
-                }
-            }
         }
+
+        // Box {
+        //     id: contents
+
+        //     padding: [Appearance.padding.normal, Appearance.padding.large, 0, Appearance.padding.large]
+
+        //     BoxLayout {
+        //         vertical: win.vertical
+        //         spacing: Appearance.spacing.larger
+        //         padding: [0, Appearance.padding.large]
+        //         color: Appearance.alpha(Appearance.colours.base, false)
+        //         radius: Appearance.rounding.full
+
+        //         OsIcon {}
+
+        //         Workspaces {
+        //             vertical: win.vertical
+        //         }
+
+        //         Clock {
+        //             vertical: win.vertical
+        //         }
+
+        //         ActiveWindow {
+        //             vertical: win.vertical
+        //         }
+        //     }
+        // }
     }
 }

modules/bar/Pills.qml

@@ -0,0 +1,105 @@
+pragma ComponentBehavior: Bound
+
+import "root:/widgets"
+import "root:/config"
+import "components"
+import "components/workspaces"
+import Quickshell
+import Quickshell.Wayland
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: root
+
+    function get(horiz, vert) {
+        return BarConfig.vertical ? vert : horiz;
+    }
+
+    anchors.fill: parent
+    anchors.leftMargin: get(BarConfig.sizes.floatingGapLarge, BarConfig.sizes.floatingGap)
+    anchors.topMargin: get(BarConfig.sizes.floatingGap, BarConfig.sizes.floatingGapLarge)
+    anchors.rightMargin: get(BarConfig.sizes.floatingGapLarge, 0)
+    anchors.bottomMargin: get(0, BarConfig.sizes.floatingGapLarge)
+
+    width: get(-1, BarConfig.sizes.height + BarConfig.sizes.floatingGap)
+    height: get(BarConfig.sizes.height + BarConfig.sizes.floatingGap, -1)
+
+    Pill {
+        anchors.left: parent.left
+
+        OsIcon {
+            id: osIcon
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        }
+
+        Workspaces {
+            vertical: BarConfig.vertical
+
+            anchors.left: root.get(osIcon.right, undefined)
+            anchors.leftMargin: root.get(Appearance.padding.smaller, 0)
+            anchors.top: root.get(undefined, osIcon.bottom)
+            anchors.topMargin: root.get(0, Appearance.padding.smaller)
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        }
+    }
+
+    Pill {
+        anchors.horizontalCenter: root.get(parent.horizontalCenter, undefined)
+        anchors.verticalCenter: root.get(undefined, parent.verticalCenter)
+
+        ActiveWindow {
+            vertical: BarConfig.vertical
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        }
+    }
+
+    Pill {
+        anchors.right: parent.right
+
+        Clock {
+            vertical: BarConfig.vertical
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        }
+    }
+
+    component Pill: Box {
+        id: pill
+
+        color: Appearance.alpha(Appearance.colours.base, false)
+        radius: Appearance.rounding.full
+        padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large]
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        state: BarConfig.vertical ? "vertical" : ""
+        states: State {
+            name: "vertical"
+
+            AnchorChanges {
+                target: pill
+                anchors.top: undefined
+                anchors.bottom: undefined
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }
+        }
+
+        transitions: Transition {
+            AnchorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.emphasized
+            }
+        }
+    }
+}

modules/bar/components/ActiveWindow.qml

@@ -5,7 +5,7 @@ import "root:/config"
 import QtQuick
 import QtQuick.Layouts
 
-BoxLayout {
+Box {
     id: root
 
     readonly property color colour: Appearance.colours.pink
@@ -15,20 +15,20 @@ BoxLayout {
     clip: true
 
     MaterialIcon {
+        id: icon
+
         text: Icons.getAppCategoryIcon(Hyprland.activeClient?.class) ?? "desktop_windows"
         color: root.colour
-
-        Layout.alignment: Layout.Center
     }
 
-    Label {
+    StyledText {
         text: Hyprland.activeClient?.title ?? "Desktop"
         font.pointSize: Appearance.font.size.smaller
         font.family: Appearance.font.family.mono
         color: root.colour
         rotation: root.vertical ? 90 : 0
 
-        Layout.alignment: Layout.Center
+        anchors.left: icon.right
-        Layout.maximumWidth: root.vertical ? this.implicitHeight : this.implicitWidth
+        anchors.leftMargin: Appearance.padding.smaller
     }
 }

modules/bar/components/Clock.qml

@@ -18,8 +18,8 @@ BoxLayout {
         Layout.alignment: Layout.Center
     }
 
-    Label {
+    StyledText {
-        horizontalAlignment: Label.AlignHCenter
+        horizontalAlignment: StyledText.AlignHCenter
         text: root.vertical ? Time.format("hh\nmm") : Time.format("dd/MM/yy hh:mm")
         font.pointSize: Appearance.font.size.smaller
         font.family: Appearance.font.family.mono

modules/bar/components/OsIcon.qml

@@ -8,7 +8,7 @@ import QtQuick.Layouts
 Box {
     padding: [Appearance.padding.smaller, 0]
 
-    Label {
+    StyledText {
         text: Icons.osIcon
         font.pointSize: Appearance.font.size.smaller
         font.family: Appearance.font.family.mono

modules/bar/components/workspaces/OccupiedBg.qml

@@ -9,7 +9,7 @@ BoxLayout {
     id: root
 
     required property bool vertical
-    required property list<Label> workspaces
+    required property list<StyledText> workspaces
     required property var occupied
     required property BoxLayout layout
 

modules/bar/components/workspaces/Workspace.qml

@@ -3,7 +3,7 @@ import "root:/services"
 import "root:/config"
 import QtQuick.Layouts
 
-Label {
+StyledText {
     required property int index
     required property BoxLayout layout
     required property var occupied
@@ -11,7 +11,7 @@ Label {
 
     text: index + 1
     color: BarConfig.workspaces.occupiedBg || occupied[index + 1] ? Appearance.colours.text : Appearance.colours.subtext0
-    horizontalAlignment: Label.AlignHCenter
+    horizontalAlignment: StyledText.AlignHCenter
 
     Layout.preferredWidth: layout.homogenous && !layout.vertical ? layout.height : -1
     Layout.preferredHeight: layout.homogenous && layout.vertical ? layout.width : -1

modules/bar/components/workspaces/Workspaces.qml

@@ -16,7 +16,7 @@ Item {
     property bool occupiedBg: false
     property bool showWindows: false
 
-    readonly property list<Label> workspaces: layout.children.filter(c => c.isWorkspace)
+    readonly property list<StyledText> workspaces: layout.children.filter(c => c.isWorkspace)
     readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
         acc[curr.id] = curr.lastIpcObject.windows > 0;
         return acc;

widgets/MaterialIcon.qml

@@ -1,7 +1,7 @@
 import "root:/config"
 import QtQuick
 
-Label {
+StyledText {
     font.family: Appearance.font.family.material
     font.pointSize: Appearance.font.size.larger
 }

widgets/StyledText.qml

@@ -5,6 +5,8 @@ Text {
     id: root
 
     renderType: Text.NativeRendering
+    color: Appearance.colours.text
+    font.family: Appearance.font.family.sans
 
     Behavior on color {
         ColorAnimation {