convert to widgets

modules/Shortcuts.qml

@@ -1,5 +1,5 @@
+import qs.widgets
 import Quickshell
-import "../widget/"
 
 Scope {
     id: root

modules/bar/components/Caffeine.qml

@@ -1,14 +1,12 @@
+import qs.config
+import qs.constants
+import qs.styled
+import qs.widgets
 import Quickshell.Io
-import "../../../config/"
-import "../../../constants/"
-import "../../../styled/"
 
-Clickable {
+StyledButton {
     id: clickable
 
-    implicitWidth: text.width
-    implicitHeight: Dimensions.caffeine.height
-
     border.color: process.running ? Theme.palette.secondary : 'transparent'
     border.width: 2
 
@@ -21,7 +19,7 @@ Clickable {
         }
     }
 
-    StyledText {
+    content: StyledText {
         id: text
 
         font.family: Theme.lucide.font.family
@@ -30,12 +28,6 @@ Clickable {
         text: Icons.coffee
 
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-
-        anchors.verticalCenter: parent.verticalCenter
-        topPadding: Dimensions.caffeine.verticalPadding
-        bottomPadding: Dimensions.caffeine.verticalPadding
-        leftPadding: Dimensions.caffeine.horizontalPadding
-        rightPadding: Dimensions.caffeine.horizontalPadding
     }
 
     Process {

modules/bar/components/Clock.qml

@@ -1,18 +1,10 @@
+import qs.config
+import qs.widgets
 import Quickshell
-import "../../../styled/"
-import "../../../config/"
 
 StyledLabel {
-    implicitWidth: childrenRect.width
-    implicitHeight: Dimensions.clock.height
-
     StyledText {
         id: text
-        anchors.verticalCenter: parent.verticalCenter
-        topPadding: Dimensions.clock.verticalPadding
-        bottomPadding: Dimensions.clock.verticalPadding
-        leftPadding: Dimensions.clock.horizontalPadding
-        rightPadding: Dimensions.clock.horizontalPadding
 
         font.pixelSize: Dimensions.clock.fontSize
 

modules/bar/components/Cpu.qml

@@ -1,29 +1,25 @@
+import qs.config
+import qs.constants
+import qs.services
+import qs.utils
+import qs.widgets
 import QtQuick
-import Quickshell
+import QtQuick.Layouts
-import "../../../config/"
-import "../../../constants/"
-import "../../../services/"
-import "../../../styled/"
-import "../../../utils/"
 
-Clickable {
+StyledButton {
     id: root
 
     property bool showTemp: false
 
-    implicitWidth: row.width
-    implicitHeight: Dimensions.cpu.height
-
-    Ref {
-        service: SystemInfo
-    }
-
     onClicked: {
-        root.showTemp = !root.showTemp;
+        showTemp = !showTemp;
     }
 
-    Row {
+    content: RowLayout {
         id: row
+        Ref {
+            service: SystemInfo
+        }
         StyledText {
             id: icon
 
@@ -32,26 +28,20 @@ Clickable {
             font.bold: true
             text: Icons.cpu
 
-            anchors.verticalCenter: parent.verticalCenter
+            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-            topPadding: Dimensions.cpu.verticalPadding
-            bottomPadding: Dimensions.cpu.verticalPadding
-            leftPadding: Dimensions.cpu.horizontalPadding
         }
 
         StyledText {
             id: text
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.cpu.verticalPadding
-            bottomPadding: Dimensions.cpu.verticalPadding
-            rightPadding: Dimensions.cpu.horizontalPadding
 
             font.pixelSize: Dimensions.cpu.fontSize
-
             text: ` ${(SystemInfo.cpuPerc * 100).toFixed()}%`
 
+            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+
             states: [
                 State {
-                    name: "temp"
+                    name: "showTemp"
                     when: root.showTemp
                     PropertyChanges {
                         text {

modules/bar/components/bluetooth/DeviceList.qml

@@ -26,19 +26,14 @@ ColumnLayout {
                     topPadding: 8
                     bottomPadding: 8
                     leftPadding: 8
-                    text: device.modelData.deviceName
-                }
-                StyledText {
-                    font.family: Theme.lucide.font.family
-                    font.pixelSize: 10
-                    font.bold: true
-                    text: device.modelData.connected ? Icons.bluetoothConnected : Icons.bluetooth
-
-                    topPadding: 8
-                    bottomPadding: 8
                     rightPadding: 8
-
+                    text: device.modelData.deviceName
                     color: device.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: 200
+                        }
+                    }
                 }
             }
         }

widgets/StyledButton.qml

@@ -0,0 +1,32 @@
+import qs.config
+import QtQuick
+import Quickshell.Widgets
+
+WrapperMouseArea {
+    id: root
+    required property Component content
+    property alias padding: rectangle.margin
+    property alias color: rectangle.color
+    property alias border: rectangle.border
+    property alias radius: rectangle.radius
+
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+
+    WrapperRectangle {
+        id: rectangle
+        margin: 8
+        radius: 8
+        color: root.containsMouse && root.hoverEnabled ? Theme.palette.primary : Theme.palette.base100
+        Behavior on color {
+            ColorAnimation {
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+        }
+        Loader {
+            active: true
+            sourceComponent: content
+        }
+    }
+}

widgets/StyledLabel.qml

@@ -0,0 +1,17 @@
+import qs.config
+import QtQuick
+import Quickshell.Widgets
+
+WrapperRectangle {
+    id: root
+    required property Component content
+    margin: 8
+    radius: 8
+    color: Theme.palette.base100
+    Behavior on color {
+        ColorAnimation {
+            duration: 200
+            easing.type: Easing.InOutQuad
+        }
+    }
+}

widgets/StyledText.qml

@@ -0,0 +1,7 @@
+import qs.config
+import QtQuick
+
+Text {
+    color: Theme.palette.basecontent
+    font.family: Theme.fontFamily
+}