6 files changed, 220 insertions, 0 deletions
diff --git a/modules/bar/Content.qml b/modules/bar/Content.qml
index ac828f8..7d91076 100644
--- a/modules/bar/Content.qml
+++ b/modules/bar/Content.qml
@@ -12,6 +12,18 @@ StyledRect {
 
     required property ShellScreen screen
 
+    function checkPopout(y: real): var {
+        const aw = activeWindow.child
+        const awy = activeWindow.y + aw.y
+        if (y >= awy && y <= awy + aw.implicitHeight) {
+            Popouts.currentName = "activewindow"
+            Popouts.currentCenter = Qt.binding(() => activeWindow.y + aw.y + aw.implicitHeight / 2);
+            Popouts.hasCurrent = true;
+        } else {
+            Popouts.hasCurrent = false;
+        }
+    }
+
     anchors.top: parent.top
     anchors.bottom: parent.bottom
 
@@ -21,6 +33,19 @@ StyledRect {
 
     Component.onCompleted: Visibilities.bars[screen] = this
 
+    MouseArea {
+        anchors.fill: parent
+
+        hoverEnabled: true
+
+        onPositionChanged: event => root.checkPopout(event.y)
+
+        onContainsMouseChanged: {
+            if (!containsMouse)
+                Popouts.hasCurrent = false;
+        }
+    }
+
     Item {
         id: child
 
diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml
index 8195b51..6f387f4 100644
--- a/modules/bar/components/ActiveWindow.qml
+++ b/modules/bar/components/ActiveWindow.qml
@@ -10,6 +10,7 @@ Item {
     id: root
 
     property color colour: Colours.palette.m3primary
+    readonly property Item child: child
 
     implicitWidth: child.implicitWidth
     implicitHeight: child.implicitHeight
diff --git a/modules/bar/popouts/ActiveWindow.qml b/modules/bar/popouts/ActiveWindow.qml
new file mode 100644
index 0000000..06ad52c
--- /dev/null
+++ b/modules/bar/popouts/ActiveWindow.qml
@@ -0,0 +1,33 @@
+
+
+import "root:/widgets"
+import "root:/services"
+import "root:/utils"
+import "root:/config"
+import Quickshell.Wayland
+import QtQuick
+
+Item {
+    id: root
+
+    implicitWidth: child.implicitWidth
+    implicitHeight: child.implicitHeight
+
+    Column {
+        id: child
+
+        anchors.centerIn: parent
+
+        StyledText {
+            text: Hyprland.activeClient?.title ?? ""
+        }
+
+        StyledText {
+            text: Hyprland.activeClient?.wmClass ?? ""
+        }
+
+        ScreencopyView {
+            
+        }
+    }
+}
diff --git a/modules/bar/popouts/Background.qml b/modules/bar/popouts/Background.qml
new file mode 100644
index 0000000..dd76af8
--- /dev/null
+++ b/modules/bar/popouts/Background.qml
@@ -0,0 +1,63 @@
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Shapes
+
+ShapePath {
+    id: root
+
+    required property Wrapper wrapper
+    readonly property real rounding: BorderConfig.rounding
+    readonly property bool flatten: wrapper.width < rounding * 2
+    readonly property real roundingX: flatten ? wrapper.width / 2 : rounding
+
+    strokeWidth: -1
+    fillColor: BorderConfig.colour
+
+    PathArc {
+        relativeX: root.roundingX
+        relativeY: root.rounding
+        radiusX: Math.min(root.rounding, root.wrapper.width)
+        radiusY: root.rounding
+        direction: PathArc.Counterclockwise
+    }
+    PathLine {
+        relativeX: root.wrapper.width - root.roundingX * 2
+        relativeY: 0
+    }
+    PathArc {
+        relativeX: root.roundingX
+        relativeY: root.rounding
+        radiusX: Math.min(root.rounding, root.wrapper.width)
+        radiusY: root.rounding
+    }
+    PathLine {
+        relativeX: 0
+        relativeY: root.wrapper.height - root.rounding * 4
+    }
+    PathArc {
+        relativeX: -root.roundingX
+        relativeY: root.rounding
+        radiusX: Math.min(root.rounding, root.wrapper.width)
+        radiusY: root.rounding
+    }
+    PathLine {
+        relativeX: -(root.wrapper.width - root.roundingX * 2)
+        relativeY: 0
+    }
+    PathArc {
+        relativeX: -root.roundingX
+        relativeY: root.rounding
+        radiusX: Math.min(root.rounding, root.wrapper.width)
+        radiusY: root.rounding
+        direction: PathArc.Counterclockwise
+    }
+
+    Behavior on fillColor {
+        ColorAnimation {
+            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
new file mode 100644
index 0000000..be45eac
--- /dev/null
+++ b/modules/bar/popouts/Content.qml
@@ -0,0 +1,79 @@
+import "root:/services"
+import "root:/config"
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+
+Item {
+    id: root
+
+    required property ShellScreen screen
+
+    anchors.centerIn: parent
+
+    implicitWidth: Popouts.hasCurrent ? content.children.find(c => c.shouldBeActive).implicitWidth + Appearance.padding.large * 2 : 0
+    implicitHeight: Popouts.hasCurrent ? content.children.find(c => c.shouldBeActive).implicitHeight + Appearance.padding.large * 2 : 0
+    clip: true
+
+    Item {
+        id: content
+
+        anchors.fill: parent
+        anchors.margins: Appearance.padding.large
+
+        clip: true
+
+        Popout {
+            name: "activewindow"
+            sourceComponent: ActiveWindow {}
+        }
+    }
+
+    Behavior on implicitWidth {
+        Anim {
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        Anim {
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+
+    component Popout: Loader {
+        id: popout
+
+        required property string name
+        property bool shouldBeActive: Popouts.currentName === name
+
+        active: shouldBeActive
+        asynchronous: true
+
+        Behavior on active {
+            SequentialAnimation {
+                Anim {
+                    target: popout
+                    property: "opacity"
+                    from: popout.shouldBeActive ? 1 : 0
+                    to: popout.shouldBeActive ? 0 : 1
+                    duration: popout.shouldBeActive ? 0 : Appearance.anim.durations.normal
+                }
+                PropertyAction {}
+                Anim {
+                    target: popout
+                    property: "opacity"
+                    from: popout.shouldBeActive ? 0 : 1
+                    to: popout.shouldBeActive ? 1 : 0
+                    duration: popout.shouldBeActive ? Appearance.anim.durations.normal : 0
+                }
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
+}
diff --git a/modules/bar/popouts/Wrapper.qml b/modules/bar/popouts/Wrapper.qml
new file mode 100644
index 0000000..7782d90
--- /dev/null
+++ b/modules/bar/popouts/Wrapper.qml
@@ -0,0 +1,19 @@
+import "root:/services"
+import "root:/config"
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property ShellScreen screen
+
+    implicitWidth: content.implicitWidth
+    implicitHeight: content.implicitHeight + BorderConfig.rounding * 2
+
+    Content {
+        id: content
+
+        screen: root.screen
+    }
+}