Improve panes system and add battery pane

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
+    }
 }