refactor: use anchors instead of layouts

8 files changed, 167 insertions, 39 deletions

diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index 8eccf07..35c77e0 100644
--- a/modules/bar/Bar.qml
+++ b/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.bottom: vertical
+        anchors.right: true
 
-        width: contents.implicitWidth
-        height: contents.implicitHeight
+        // Connections {
+        //     target: BarConfig
 
-        Box {
-            id: contents
+        //     function onVerticalChanged(): void {
+        //         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
-                spacing: Appearance.spacing.larger
-                padding: [0, Appearance.padding.large]
-                color: Appearance.alpha(Appearance.colours.base, false)
-                radius: Appearance.rounding.full
+        // }
+        Pills {
+            id: content
+        }
 
-                OsIcon {}
+        // Box {
+        //     id: contents
 
-                Workspaces {
-                    vertical: win.vertical
-                }
+        //     padding: [Appearance.padding.normal, Appearance.padding.large, 0, Appearance.padding.large]
 
-                Clock {
-                    vertical: win.vertical
-                }
+        //     BoxLayout {
+        //         vertical: win.vertical
+        //         spacing: Appearance.spacing.larger
+        //         padding: [0, Appearance.padding.large]
+        //         color: Appearance.alpha(Appearance.colours.base, false)
+        //         radius: Appearance.rounding.full
 
-                ActiveWindow {
-                    vertical: win.vertical
-                }
-            }
-        }
+        //         OsIcon {}
+
+        //         Workspaces {
+        //             vertical: win.vertical
+        //         }
+
+        //         Clock {
+        //             vertical: win.vertical
+        //         }
+
+        //         ActiveWindow {
+        //             vertical: win.vertical
+        //         }
+        //     }
+        // }
     }
 }
diff --git a/modules/bar/Pills.qml b/modules/bar/Pills.qml
new file mode 100644
index 0000000..5337221
--- /dev/null
+++ b/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
+            }
+        }
+    }
+}
diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml
index 596c368..24edb9e 100644
--- a/modules/bar/components/ActiveWindow.qml
+++ b/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
-        Layout.maximumWidth: root.vertical ? this.implicitHeight : this.implicitWidth
+        anchors.left: icon.right
+        anchors.leftMargin: Appearance.padding.smaller
     }
 }
diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml
index a34cc2c..49ef103 100644
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@@ -18,8 +18,8 @@ BoxLayout {
         Layout.alignment: Layout.Center
     }
 
-    Label {
-        horizontalAlignment: Label.AlignHCenter
+    StyledText {
+        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
diff --git a/modules/bar/components/OsIcon.qml b/modules/bar/components/OsIcon.qml
index 2b99de3..5f2a103 100644
--- a/modules/bar/components/OsIcon.qml
+++ b/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
diff --git a/modules/bar/components/workspaces/OccupiedBg.qml b/modules/bar/components/workspaces/OccupiedBg.qml
index 97a27a0..f6998c5 100644
--- a/modules/bar/components/workspaces/OccupiedBg.qml
+++ b/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
 
diff --git a/modules/bar/components/workspaces/Workspace.qml b/modules/bar/components/workspaces/Workspace.qml
index 4f53e73..d8d0f4d 100644
--- a/modules/bar/components/workspaces/Workspace.qml
+++ b/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
diff --git a/modules/bar/components/workspaces/Workspaces.qml b/modules/bar/components/workspaces/Workspaces.qml
index 62f22d7..26dc23a 100644
--- a/modules/bar/components/workspaces/Workspaces.qml
+++ b/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;