Improve panes system and add battery pane

Widgets/Battery.qml

@@ -0,0 +1,60 @@
+import Quickshell.Services.UPower
+import Quickshell.Widgets
+import QtQuick
+import Quickshell
+import "." as Widgets
+
+Item {
+    anchors {
+        top: parent.top
+        bottom: parent.bottom
+    }
+    width: children[1].width + 20
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: 4
+        color: hover.hovered ? "#11ffffff" : "#00ffffff" 
+        radius: 8
+        bottomLeftRadius: 12
+    }
+    Row {
+        anchors {
+            verticalCenter: parent.verticalCenter
+        }
+        x: 8
+        spacing: 4
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 20
+            height: width
+            sourceSize { width: width; height: height }
+            source: {
+                if (UPower.displayDevice.state === UPowerDeviceState.Charging)
+                    return Quickshell.shellPath("assets/battery-charging-symbolic.svg")
+                switch (PowerProfiles.profile) {
+                    case PowerProfile.PowerSaver:
+                        return Quickshell.shellPath("assets/power-saver-symbolic.svg")
+                        break;
+                    case PowerProfile.Balanced:
+                        return Quickshell.shellPath("assets/balanced-symbolic.svg")
+                        break;
+                    case PowerProfile.Performance:
+                        return Quickshell.shellPath("assets/performance-symbolic.svg")
+                        break;
+                }
+                return Quickshell.shellPath("assets/battery-performance-symbolic.svg")
+            }
+        }
+        Text {
+            id: content
+            anchors.verticalCenter: parent.verticalCenter
+            x: 10
+            color: "white"
+            text: `${Math.round(UPower.displayDevice.percentage * 100)}% · ${Math.round(UPower.displayDevice.changeRate)}W`
+        }
+    }
+    HoverHandler {id: hover}
+    TapHandler {onTapped: {
+        background.index = 2
+    }}
+}

Widgets/Workspaces.qml

@@ -1,36 +1,60 @@
 import QtQuick
 import QtQuick.Shapes
+import Quickshell.Widgets
 import Quickshell.Hyprland
+import Quickshell
 
-Row { 
-    Repeater {
-        model: 9
-        delegate: Shape {
-            height: 14
-            width: 24
-            property var workspace: Hyprland.workspaces.values.find(ws => ws.id === modelData+1)
-            preferredRendererType: Shape.CurveRenderer
-            anchors.verticalCenter: parent.verticalCenter
-            ShapePath {
-                strokeWidth: workspace ? 7 : 4
-                Behavior on strokeWidth {NumberAnimation {
-                    duration: 150
-                }}
-                strokeColor: "white"
-                fillColor: "transparent"
-                PathAngleArc {
-                    moveToStart: true
-                    centerX: width/2
-                    centerY: height/2
-                    startAngle: 0
-                    sweepAngle: 360
-                    radiusX: workspace ? 3.5 : 5
-                    Behavior on radiusX {NumberAnimation {
-                        duration: 150
-                    }}
-                    radiusY: radiusX
+Item {
+    width: children[0].width
+    Row {
+        id: workspaceRow
+        height: parent.height
+        anchors.centerIn: parent
+        spacing: 4
+        Repeater {
+            model: 9
+            delegate: Item {
+                height: parent.height
+                width: 24
+                property var workspace: Hyprland.workspaces.values.find(ws => ws.id === modelData+1)
+                property var icon: {
+                    const appId = workspace?.toplevels.values[0]?.wayland?.appId
+                    return DesktopEntries.applications.values.find(
+                        app => app.startupClass === appId || app.id === appId
+                    )?.icon;
+                }
+                Rectangle {
+                    color: "transparent"
+                    width: workspace?.toplevels.values.length ? (icon ? 0 : 16) : 4
+                    height: width
+                    anchors.centerIn: parent
+                    radius: width/2
+                    border.color: "white"
+                    border.width: workspace?.toplevels.values.length ? (icon ? width/2 : width/4) : width/2
+                    Behavior on width {NumberAnimation {duration: 300; easing.type: Easing.OutQuint}}
+                }
+                Image {
+                    width: workspace?.toplevels.values.length && icon ? 24 : 0
+                    Behavior on width {NumberAnimation {duration: 300; easing.type: Easing.InOutQuint}}
+                    height: width
+                    anchors.centerIn: parent
+                    anchors.verticalCenterOffset: 0
+                    source: icon ? Quickshell.iconPath(icon) : source
+                    sourceSize.width: width
+                    sourceSize.height: height
                 }
             }
         }
     }
+    Rectangle {
+        x: (Hyprland.focusedWorkspace.id-1) * (workspaceRow.children[0].width + workspaceRow.spacing) + 2
+        y: 2
+        Behavior on x {NumberAnimation {
+            duration: 300
+            easing.type: Easing.OutCubic
+        }}
+        width: 20
+        height: 4
+        radius: height/2
+    }
 }