bar: use swipeview

config/BarConfig.qml

@@ -1,16 +1,21 @@
 pragma Singleton
+pragma ComponentBehavior: Bound
 
 import Quickshell
 import QtQuick
 
 Singleton {
+    id: root
+
     property bool vertical: false
+    property Preset preset: presets.pills
 
     readonly property Sizes sizes: Sizes {}
     readonly property Workspaces workspaces: Workspaces {}
+    readonly property Presets presets: Presets {}
 
     component Sizes: QtObject {
-        readonly property int height: 50
+        readonly property int height: 40
         readonly property int innerHeight: 30
         readonly property int floatingGap: 10
         readonly property int floatingGapLarge: 15
@@ -21,4 +26,16 @@ Singleton {
         readonly property string style: ""
         readonly property bool occupiedBg: true
     }
+
+    component Preset: QtObject {
+        required property string name
+        required property int totalHeight
+    }
+
+    component Presets: QtObject {
+        readonly property Preset pills: Preset {
+            name: "pills"
+            totalHeight: root.sizes.height + root.sizes.floatingGap
+        }
+    }
 }

modules/bar/Bar.qml

@@ -19,8 +19,8 @@ Variants {
         namespace: "caelestia-bar"
         color: "transparent"
 
-        width: content.width
+        width: BarConfig.vertical ? BarConfig.preset.totalHeight : -1
-        height: content.height
+        height: BarConfig.vertical ? -1 : BarConfig.preset.totalHeight
 
         anchors.top: true
         anchors.left: true
@@ -42,12 +42,15 @@ Variants {
         //     }
         // }
 
-        // SwipeView {
+        SwipeView {
-        //     anchors.fill: parent
+            anchors.fill: parent
+            currentIndex: 1
 
-        // }
+            // Item {
-        Pills {
+            Pills {
-            id: content
+                id: content
+            }
+            // }
         }
 
         // Box {

modules/bar/Pills.qml

@@ -4,70 +4,67 @@ import "root:/widgets"
 import "root:/config"
 import "components"
 import "components/workspaces"
-import Quickshell
 import Quickshell.Wayland
 import QtQuick
-import QtQuick.Controls
 
 Item {
-    id: root
+    Item {
+        id: root
 
-    function get(horiz, vert) {
+        function get(horiz, vert) {
-        return BarConfig.vertical ? vert : horiz;
+            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 {
+        anchors.fill: parent
-            vertical: BarConfig.vertical
+        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)
 
-            anchors.left: root.get(osIcon.right, undefined)
+        Pill {
-            anchors.leftMargin: root.get(Appearance.padding.smaller, 0)
+            anchors.left: parent.left
-            anchors.top: root.get(undefined, osIcon.bottom)
-            anchors.topMargin: root.get(0, Appearance.padding.smaller)
 
-            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            OsIcon {
-            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+                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 {
+        Pill {
-        anchors.horizontalCenter: root.get(parent.horizontalCenter, undefined)
+            anchors.horizontalCenter: root.get(parent.horizontalCenter, undefined)
-        anchors.verticalCenter: root.get(undefined, parent.verticalCenter)
+            anchors.verticalCenter: root.get(undefined, parent.verticalCenter)
 
-        ActiveWindow {
+            ActiveWindow {
-            vertical: BarConfig.vertical
+                vertical: BarConfig.vertical
 
-            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+            }
         }
-    }
 
-    Pill {
+        Pill {
-        anchors.right: parent.right
+            anchors.right: parent.right
 
-        Clock {
+            Clock {
-            vertical: BarConfig.vertical
+                vertical: BarConfig.vertical
 
-            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+            }
         }
     }
 
@@ -78,28 +75,7 @@ Item {
         radius: Appearance.rounding.full
         padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large]
 
-        anchors.top: parent.top
+        width: BarConfig.vertical ? BarConfig.sizes.height : implicitWidth
-        anchors.bottom: parent.bottom
+        height: BarConfig.vertical ? implicitHeight : BarConfig.sizes.height
-
-        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
-            }
-        }
     }
 }