things

Panes/Battery.qml

@@ -7,9 +7,10 @@ Column {
         top: parent.top
         horizontalCenter: parent.horizontalCenter
     }
-    width: childrenRect.width
+    width: Math.max(childrenRect.width, 300)
     height: childrenRect.height
     anchors.topMargin: 6
+    TapHandler {onTapped: console.log(width)}
     Rectangle {
         radius: 12
         height: 40
@@ -19,11 +20,11 @@ Column {
         color: "#181818"
         Rectangle {
             color: "white"
-            width: parent.width/3 - anchors.margins
+            width: (parent.width - anchors.margins * 2)/3
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.margins: 4
-            x: PowerProfiles.profile * (width + anchors.margins) + anchors.margins
+            x: PowerProfiles.profile * width + anchors.margins
             Behavior on x {NumberAnimation {duration: 300; easing.type: Easing.OutQuint}}
             radius: 8
         }
@@ -32,6 +33,7 @@ Column {
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
             anchors.right: parent.right
+            anchors.margins: 4
             component Profile: Rectangle {
                 id: profile
                 color: "transparent"

Panes/Launcher.qml

@@ -51,9 +51,6 @@ Item {
             cursorDelegate: Item {}
             onCursorPositionChanged: cursorPosition = text.length
             Keys.onPressed: (event) => { switch (event.key) {
-                case Qt.Key_Escape:
-                    background.index = 0;
-                    break;
                 case Qt.Key_Return:
                     list.currentItem.execute();
                     root.close();

Panes/NotificationCenter.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Shapes
 import Quickshell
 import Quickshell.Widgets
 import Quickshell.Services.Mpris
@@ -42,17 +43,33 @@ Item {
             }
             ListView {
                 anchors.fill: parent
+                anchors.leftMargin: 4
+                anchors.rightMargin: anchors.leftMargin
                 clip: true
                 spacing: 4
+                interactive: background.index === 3
+
+                add: Transition {NumberAnimation {
+                    property: "opacity"
+                    from: 0
+                    to: 1
+                    duration: 150
+                }}
+                remove: Transition {NumberAnimation {
+                    property: "opacity"
+                    from: 1
+                    to: 0
+                    duration: 150
+                }}
+                displaced: Transition {NumberAnimation {
+                    property: "y"
+                    duration: 300
+                }}
+
                 header: Item {height: 4; width: 1}
                 model: Array.from(notifServer.trackedNotifications.values)
                 delegate: Widgets.Notification {
                     color: "#222"
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: 4
-                    }
                 }
             }
         }
@@ -64,6 +81,8 @@ Item {
             Column {
                 anchors.centerIn: parent
                 spacing: 2
+                opacity: !Mpris.players.values.length
+                Behavior on opacity {NumberAnimation {duration: 150}}
                 Image {
                     anchors.horizontalCenter: parent.horizontalCenter
                     source: Quickshell.shellPath("assets/player-symbolic.svg")
@@ -81,12 +100,47 @@ Item {
             Column {
                 anchors.centerIn: parent
                 opacity: Mpris.players.values.length
-                ClippingRectangle {
+                Behavior on opacity {NumberAnimation {duration: 150}}
-                    color: "transparent"
+                Shape {
+                    anchors.horizontalCenter: parent.horizontalCenter
                     width: 180
                     height: 180
+                    preferredRendererType: Shape.CurveRenderer
+                    ShapePath {
+                        capStyle: ShapePath.RoundCap
+                        strokeColor: "#444"
+                        fillColor: "transparent"
+                        strokeWidth: 4
+                        PathAngleArc {
+                            moveToStart: true
+                            radiusX: 90 - 6
+                            radiusY: 90 - 6
+                            centerX: 90
+                            centerY: 90
+                            startAngle: 90 + 20
+                            sweepAngle: 360 - 40
+                        }
+                    }
+                    ShapePath {
+                        capStyle: ShapePath.RoundCap
+                        strokeColor: "white"
+                        fillColor: "transparent"
+                        strokeWidth: 4
+                        PathAngleArc {
+                            moveToStart: true
+                            radiusX: 90 - 6
+                            radiusY: 90 - 6
+                            centerX: 90
+                            centerY: 90
+                            startAngle: 90 + 20
+                            sweepAngle: (player.modelData?.position/player.modelData.length) * (360 - 40)
+                        }
+                    }
+                    ClippingRectangle {
+                        color: "transparent"
                         radius: height/2
-                    anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.fill: parent
+                        anchors.margins: 12
                         Image {
                             anchors.fill: parent
                             source: player.modelData?.trackArtUrl ?? source
@@ -94,11 +148,14 @@ Item {
                         NumberAnimation on rotation {
                             id: spin
                             paused: !player.modelData?.isPlaying || !root.up || background.index !== 3
-                        duration: 30000
+                            duration: 60000
                             loops: Animation.Infinite
                             from: 0
                             to: 360
                         }
+                        layer.enabled: true
+                        layer.smooth: true
+                    }
                 }
                 Item {width: 1; height: 10}
                 Text {
@@ -147,6 +204,10 @@ Item {
                         clicked: player.modelData?.next
                     }
                 }
+                FrameAnimation {
+                    running: background.index === 3
+                    onTriggered: player.modelData.positionChanged()
+                }
             }
         }
     }

Panes/Notifications.qml

@@ -17,6 +17,7 @@ Item {
             background.index = 4
             notifPopup.modelData = notif
             root.open()
+            timeout.restart()
         }
     }
     Widgets.Notification {
@@ -25,4 +26,10 @@ Item {
         modelData: notifServer.trackedNotifications.values[0] ?? undefined
         color: "transparent"
     }
+    Timer {
+        id: timeout
+        running: false
+        interval: 3000
+        onTriggered: root.close()
+    }
 }

Widgets/Battery.qml

@@ -46,7 +46,7 @@ Item {
             }
         }
         Text {
-            id: content
+            visible: UPower.displayDevice.type === UPowerDeviceType.Battery
             anchors.verticalCenter: parent.verticalCenter
             x: 10
             color: "white"