Improve panes system and add battery pane

TopBar.qml

@@ -7,18 +7,22 @@ import QtQuick.Controls
 import QtQuick.Effects
 import QtQuick.Shapes
 import "." as Shell
+import "./Panes" as Panes
 
 PanelWindow {
     id: root
     anchors {
         top: true
     }
+    property var font: {family: "0xProto Nerd Font"}
+    
     implicitWidth: 1024
     implicitHeight: 200
-    WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
+    WlrLayershell.keyboardFocus: (up && !shortcut.pressed) ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
     WlrLayershell.layer: WlrLayer.Overlay
     exclusionMode: ExclusionMode.Ignore
     color: "transparent"
+    visible: false
     property bool up: false
 
     IpcHandler {
@@ -29,11 +33,35 @@ PanelWindow {
             root.up ? close() : open()
         }
     }
+
+    GlobalShortcut {
+        id: shortcut
+        name: "topbar"
+        description: "Hold to peek, tap to toggle topbar"
+        onPressed: {
+            root.open()
+        }
+        onReleased: {
+            if (!hover.hovered)
+                root.close()
+        }
+    }
+
     function open() {
-        background.index = 0
+        root.visible = true
+        background.exit.stop()
+        if (!root.up) background.height = 0
+        root.up = true
+        for (const child of background.children) {
+            child.entry.start()
+        }
         background.entry.start()
     }
     function close() {
+        background.entry.stop()
+        for (const child of background.children) {
+            child.exit.start()
+        }
         background.exit.start()
     }
 
@@ -55,9 +83,6 @@ PanelWindow {
         DefaultTransition on width { }
         DefaultTransition on height { }
         property int index: 0
-        HoverHandler { onHoveredChanged: if (!hovered) {
-            root.close()
-        }}
         onIndexChanged: {
             width = children[index].width + radius*2
             height = children[index].height
@@ -73,8 +98,8 @@ PanelWindow {
             }
         }
 
-        component Display: Item {
-            id: display
+        component Pane: Item {
+            id: pane
             anchors {
                 top: parent.top
                 horizontalCenter: parent.horizontalCenter
@@ -85,7 +110,7 @@ PanelWindow {
             property var fadeIn: SequentialAnimation {
                 PauseAnimation {duration: 200}
                 NumberAnimation {
-                    target: display
+                    target: pane
                     property: "opacity"
                     to: 1
                     duration: 300
@@ -94,23 +119,27 @@ PanelWindow {
                 onStarted: fadeOut.stop()
             }
             property var fadeOut: NumberAnimation {
-                target: display
+                target: pane
                 property: "opacity"
                 to: 0
                 duration: 300
                 onStarted: fadeIn.stop()
                 easing.type: Easing.OutQuint
             }
-            property var entry: NumberAnimation {
-                target: display
-                property: "anchors.topMargin"
-                to: 0
-                duration: 300
-                easing.type: Easing.OutQuint
-                onStarted: exit.stop()
+            property var entry: 
+            SequentialAnimation {
+                PauseAnimation {duration: 2}
+                NumberAnimation {
+                    target: pane
+                    property: "anchors.topMargin"
+                    to: 0
+                    duration: 300
+                    easing.type: Easing.OutQuint
+                    onStarted: exit.stop()
+                }
             }
             property var exit: NumberAnimation {
-                target: display
+                target: pane
                 property: "anchors.topMargin"
                 to: -height
                 duration: 300
@@ -118,33 +147,22 @@ PanelWindow {
                 onStarted: entry.stop()
             }
         }
-        Display { opacity: 1; Shell.Status {
-            anchors {
-                top: parent.top
-                horizontalCenter: parent.horizontalCenter
-            }
-        } }
-        Display { Shell.Launcher {
+        Pane { opacity: 1; Panes.Status { }}
+        Pane { Panes.Launcher {
+            id: launcher
             onShowChanged: if (show) background.index = 1; else background.index = 0
-            anchors {
-                top: parent.top
-                horizontalCenter: parent.horizontalCenter
-            }
-        } }
+        }}
+        Pane { Panes.Battery {
+        }}
 
-        property var entry: NumberAnimation {
-            target: background
-            property: "height"
-            to: background.children[background.index].height
-            duration: 300
-            easing.type: Easing.OutQuint
-            onStarted: {
-                root.implicitHeight = 200
-                background.exit.stop()
-                root.up = true
-                for (const child of background.children) {
-                    child.entry.start()
-                }
+        property var entry: SequentialAnimation {
+            PauseAnimation {duration: 2}
+            NumberAnimation {
+                target: background
+                property: "height"
+                to: background.children[background.index].height
+                duration: 300
+                easing.type: Easing.OutQuint
             }
         }
         property var exit: NumberAnimation {
@@ -153,20 +171,13 @@ PanelWindow {
             to: 0
             duration: 300
             easing.type: Easing.InQuint
-            onStarted: {
-                background.entry.stop()
-                for (const child of background.children) {
-                    child.exit.start()
-                }
-            }
             onFinished: {
-                root.implicitHeight = 1
+                root.visible = false
                 root.up = false
                 background.index = 0
+                launcher.clear()
             }
         }
+        HoverHandler {id: hover}
     }
-    HoverHandler { onHoveredChanged: if (hovered) {
-        root.open()
-    }}
 }