modules/bar/components/hyprland/Workspace.qml

@@ -1,42 +1,70 @@
-import qs.components
+pragma ComponentBehavior: Bound
+
 import qs.config
 import qs.constants
+import qs.widgets
 import QtQuick
 import Quickshell.Hyprland
 
-StyledIconButton {
+Loader {
     id: root
+    required property HyprlandWorkspace modelData
 
-    required property HyprlandWorkspace workspace
+    active: modelData.id > 0
 
-    text: Icons.triangle
+    sourceComponent: workspace
-    font.bold: true
+    property Component workspace: StyledButton {
-    font.pixelSize: 17
+        id: clickable
-    padding: 8
 
-    onClicked: root.workspace.activate()
+        onClicked: root.modelData.activate()
 
-    states: [
+        content: Text {
-        State {
+            id: icon
-            name: "focused"
+
-            when: root.workspace.focused
+            font.family: Theme.lucide.font.family
-            PropertyChanges {
+            font.pixelSize: Dimensions.workspace.iconSize
-                root {
+            font.bold: true
-                    rotation: 180
+            text: Icons.triangle
-                    color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary
+
+            color: Theme.palette.basecontent
+
+            states: [
+                State {
+                    name: "focused"
+                    when: root.modelData.focused
+                    PropertyChanges {
+                        icon {
+                            rotation: 180
+                            color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                        }
+                    }
+                },
+                State {
+                    name: "active"
+                    when: root.modelData.active
+                    PropertyChanges {
+                        icon {
+                            text: Icons.triangleDashed
+                            rotation: 180
+                            color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                        }
+                    }
                 }
-            }
+            ]
-        },
+
-        State {
+            transitions: Transition {
-            name: "active"
+                reversible: true
-            when: root.workspace.active
+                ParallelAnimation {
-            PropertyChanges {
+                    RotationAnimation {
-                root {
+                        duration: 200
-                    text: Icons.triangleDashed
+                        easing.type: Easing.InOutCubic
-                    rotation: 180
+                    }
-                    color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                    ColorAnimation {
+                        duration: 200
+                        easing.type: Easing.OutCubic
+                    }
                 }
             }
         }
-    ]
+    }
 }

modules/bar/components/hyprland/Workspaces.qml

@@ -1,5 +1,3 @@
-pragma ComponentBehavior: Bound
-
 import qs.config
 import QtQuick
 import QtQuick.Layouts
@@ -14,16 +12,6 @@ RowLayout {
 
         model: Hyprland.workspaces
 
-        Loader {
+        Workspace {}
-            id: loader
-            required property HyprlandWorkspace modelData
-
-            active: modelData.id > 0
-
-            sourceComponent: workspace
-            property Component workspace: Workspace {
-                workspace: loader.modelData
-            }
-        }
     }
 }

modules/bar/components/tray/TrayItem.qml

@@ -1,20 +1,20 @@
 pragma ComponentBehavior: Bound
 
-import qs.components
+import qs.widgets
 import QtQuick
 import Quickshell
 import Quickshell.Services.SystemTray
 import Quickshell.Widgets
 import "menu/"
 
-StyledIconButton {
+StyledButton {
     id: root
 
     property SystemTrayItem trayItem
 
     onClicked: menu.toggle()
 
-    contentItem: IconImage {
+    content: IconImage {
         id: icon
         asynchronous: true
         implicitSize: 18