feat: window info panel

Also disable reload popup

4 files changed, 187 insertions, 44 deletions

diff --git a/modules/bar/popouts/ActiveWindow.qml b/modules/bar/popouts/ActiveWindow.qml
index d92d436..fbad79e 100644
--- a/modules/bar/popouts/ActiveWindow.qml
+++ b/modules/bar/popouts/ActiveWindow.qml
@@ -10,6 +10,8 @@ import QtQuick.Layouts
 Item {
     id: root
 
+    required property Item wrapper
+
     implicitWidth: Hyprland.activeClient ? child.implicitWidth : -Appearance.padding.large * 2
     implicitHeight: child.implicitHeight
 
@@ -65,7 +67,7 @@ Item {
                     radius: Appearance.rounding.normal
 
                     function onClicked(): void {
-                    // TODO
+                        root.wrapper.detach("winfo");
                     }
                 }
 
diff --git a/modules/bar/popouts/Background.qml b/modules/bar/popouts/Background.qml
index c099118..d626ec1 100644
--- a/modules/bar/popouts/Background.qml
+++ b/modules/bar/popouts/Background.qml
@@ -13,15 +13,17 @@ ShapePath {
     readonly property real roundingX: flatten ? wrapper.width / 2 : rounding
     property real ibr: invertBottomRounding ? -1 : 1
 
+    property real sideRounding: startX > 0 ? -1 : 1
+
     strokeWidth: -1
     fillColor: Config.border.colour
 
     PathArc {
         relativeX: root.roundingX
-        relativeY: root.rounding
+        relativeY: root.rounding * root.sideRounding
         radiusX: Math.min(root.rounding, root.wrapper.width)
         radiusY: root.rounding
-        direction: PathArc.Counterclockwise
+        direction: root.sideRounding < 0 ? PathArc.Clockwise : PathArc.Counterclockwise
     }
     PathLine {
         relativeX: root.wrapper.width - root.roundingX * 2
@@ -50,10 +52,10 @@ ShapePath {
     }
     PathArc {
         relativeX: -root.roundingX
-        relativeY: root.rounding
+        relativeY: root.rounding * root.sideRounding
         radiusX: Math.min(root.rounding, root.wrapper.width)
         radiusY: root.rounding
-        direction: PathArc.Counterclockwise
+        direction: root.sideRounding < 0 ? PathArc.Clockwise : PathArc.Counterclockwise
     }
 
     Behavior on fillColor {
@@ -71,4 +73,12 @@ ShapePath {
             easing.bezierCurve: Appearance.anim.curves.standard
         }
     }
+
+    Behavior on sideRounding {
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
 }
diff --git a/modules/bar/popouts/Content.qml b/modules/bar/popouts/Content.qml
index 43a0a09..2c10e5f 100644
--- a/modules/bar/popouts/Content.qml
+++ b/modules/bar/popouts/Content.qml
@@ -9,15 +9,15 @@ import QtQuick
 Item {
     id: root
 
+    required property Item wrapper
     required property ShellScreen screen
-
-    property string currentName
-    property real currentCenter
-    property bool hasCurrent
+    required property string currentName
+    required property real currentCenter
+    required property bool hasCurrent
 
     anchors.centerIn: parent
 
-    implicitWidth: hasCurrent ? (content.children.find(c => c.shouldBeActive)?.implicitWidth ?? 0) + Appearance.padding.large * 2 : 0
+    implicitWidth: (content.children.find(c => c.shouldBeActive)?.implicitWidth ?? 0) + Appearance.padding.large * 2
     implicitHeight: (content.children.find(c => c.shouldBeActive)?.implicitHeight ?? 0) + Appearance.padding.large * 2
 
     Item {
@@ -26,11 +26,11 @@ Item {
         anchors.fill: parent
         anchors.margins: Appearance.padding.large
 
-        clip: true
-
         Popout {
             name: "activewindow"
-            source: "ActiveWindow.qml"
+            sourceComponent: ActiveWindow {
+                wrapper: root.wrapper
+            }
         }
 
         Popout {
@@ -85,30 +85,6 @@ Item {
         }
     }
 
-    Behavior on implicitWidth {
-        Anim {
-            easing.bezierCurve: Appearance.anim.curves.emphasized
-        }
-    }
-
-    Behavior on implicitHeight {
-        enabled: root.implicitWidth > 0
-
-        Anim {
-            easing.bezierCurve: Appearance.anim.curves.emphasized
-        }
-    }
-
-    Behavior on currentCenter {
-        enabled: root.implicitWidth > 0
-
-        NumberAnimation {
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.emphasized
-        }
-    }
-
     component Popout: Loader {
         id: popout
 
diff --git a/modules/bar/popouts/Wrapper.qml b/modules/bar/popouts/Wrapper.qml
index f304ea7..0ce17ce 100644
--- a/modules/bar/popouts/Wrapper.qml
+++ b/modules/bar/popouts/Wrapper.qml
@@ -1,6 +1,11 @@
+pragma ComponentBehavior: Bound
+
 import "root:/services"
 import "root:/config"
+import "root:/modules/windowinfo"
 import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
 import QtQuick
 
 Item {
@@ -8,18 +13,168 @@ Item {
 
     required property ShellScreen screen
 
-    property alias currentName: content.currentName
-    property alias currentCenter: content.currentCenter
-    property alias hasCurrent: content.hasCurrent
+    readonly property real nonAnimWidth: x > 0 || hasCurrent ? children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth : 0
+    readonly property real nonAnimHeight: children.find(c => c.shouldBeActive)?.implicitHeight ?? content.implicitHeight
+
+    property string currentName
+    property real currentCenter
+    property bool hasCurrent
+
+    property string detachedMode
+    readonly property bool isDetached: detachedMode.length > 0
+
+    property int animLength: Appearance.anim.durations.normal
+    property list<real> animCurve: Appearance.anim.curves.emphasized
+
+    function detach(mode: string): void {
+        animLength = Appearance.anim.durations.large;
+        detachedMode = mode;
+        focus = true;
+    }
+
+    function close(): void {
+        hasCurrent = false;
+        animCurve = Appearance.anim.curves.emphasizedAccel;
+        animLength = Appearance.anim.durations.normal;
+        detachedMode = "";
+        animCurve = Appearance.anim.curves.emphasized;
+    }
 
     visible: width > 0 && height > 0
+    clip: true
+
+    implicitWidth: nonAnimWidth
+    implicitHeight: nonAnimHeight
+
+    Keys.onEscapePressed: close()
 
-    implicitWidth: content.implicitWidth
-    implicitHeight: content.implicitHeight
+    HyprlandFocusGrab {
+        active: root.isDetached
+        windows: [QsWindow.window]
+        onCleared: root.close()
+    }
+
+    Binding {
+        when: root.isDetached
 
-    Content {
+        target: QsWindow.window
+        property: "WlrLayershell.keyboardFocus"
+        value: WlrKeyboardFocus.OnDemand
+    }
+
+    Comp {
         id: content
 
-        screen: root.screen
+        shouldBeActive: !root.detachedMode
+        asynchronous: true
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        sourceComponent: Content {
+            wrapper: root
+            screen: root.screen
+            currentName: root.currentName
+            currentCenter: root.currentCenter
+            hasCurrent: root.hasCurrent
+        }
+    }
+
+    Comp {
+        shouldBeActive: root.detachedMode === "winfo"
+        asynchronous: true
+        anchors.centerIn: parent
+
+        sourceComponent: WindowInfo {
+            screen: root.screen
+        }
+    }
+
+    Behavior on x {
+        Anim {
+            duration: root.animLength
+            easing.bezierCurve: root.animCurve
+        }
+    }
+
+    Behavior on y {
+        enabled: root.implicitWidth > 0
+
+        Anim {
+            duration: root.animLength
+            easing.bezierCurve: root.animCurve
+        }
+    }
+
+    Behavior on implicitWidth {
+        Anim {
+            duration: root.animLength
+            easing.bezierCurve: root.animCurve
+        }
+    }
+
+    Behavior on implicitHeight {
+        enabled: root.implicitWidth > 0
+
+        Anim {
+            duration: root.animLength
+            easing.bezierCurve: root.animCurve
+        }
+    }
+
+    component Comp: Loader {
+        id: comp
+
+        property bool shouldBeActive
+
+        asynchronous: true
+        active: false
+        opacity: 0
+
+        states: State {
+            name: "active"
+            when: comp.shouldBeActive
+
+            PropertyChanges {
+                comp.opacity: 1
+                comp.active: true
+            }
+        }
+
+        transitions: [
+            Transition {
+                from: ""
+                to: "active"
+
+                SequentialAnimation {
+                    PropertyAction {
+                        property: "active"
+                    }
+                    Anim {
+                        property: "opacity"
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
+            },
+            Transition {
+                from: "active"
+                to: ""
+
+                SequentialAnimation {
+                    Anim {
+                        property: "opacity"
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                    PropertyAction {
+                        property: "active"
+                    }
+                }
+            }
+        ]
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.emphasized
     }
 }