dcontent: add panes

3 files changed, 142 insertions, 40 deletions

diff --git a/modules/detachedcontent/DetachedContent.qml b/modules/detachedcontent/DetachedContent.qml
index ab4b4ef..c77a7da 100644
--- a/modules/detachedcontent/DetachedContent.qml
+++ b/modules/detachedcontent/DetachedContent.qml
@@ -6,7 +6,6 @@ import qs.config
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
-import QtQuick.Effects
 
 Item {
     id: root
@@ -33,6 +32,17 @@ Item {
             implicitWidth: navRail.implicitWidth
             color: Colours.palette.m3surfaceContainer
 
+            CustomMouseArea {
+                anchors.fill: parent
+
+                function onWheel(event: WheelEvent): void {
+                    if (event.angleDelta.y < 0)
+                        root.session.activeIndex = Math.min(root.session.activeIndex + 1, root.session.panes.length - 1);
+                    else if (event.angleDelta.y > 0)
+                        root.session.activeIndex = Math.max(root.session.activeIndex - 1, 0);
+                }
+            }
+
             NavRail {
                 id: navRail
 
@@ -40,48 +50,11 @@ Item {
             }
         }
 
-        Item {
+        Panes {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            StyledText {
-                anchors.centerIn: parent
-                text: qsTr("Work in progress")
-                color: Colours.palette.m3outline
-                font.pointSize: Appearance.font.size.extraLarge
-                font.weight: 500
-            }
-
-            StyledRect {
-                anchors.fill: parent
-                color: Colours.palette.m3surfaceContainer
-                topRightRadius: Appearance.rounding.normal
-                bottomRightRadius: Appearance.rounding.normal
-
-                layer.enabled: true
-                layer.effect: MultiEffect {
-                    maskSource: mask
-                    maskEnabled: true
-                    maskInverted: true
-                    maskThresholdMin: 0.5
-                    maskSpreadAtMin: 1
-                }
-            }
-
-            Item {
-                id: mask
-
-                anchors.fill: parent
-                layer.enabled: true
-                visible: false
-
-                Rectangle {
-                    anchors.fill: parent
-                    anchors.margins: Appearance.padding.normal
-                    anchors.leftMargin: 0
-                    radius: Appearance.rounding.small
-                }
-            }
+            session: root.session
         }
     }
 }
diff --git a/modules/detachedcontent/Panes.qml b/modules/detachedcontent/Panes.qml
new file mode 100644
index 0000000..b0c8440
--- /dev/null
+++ b/modules/detachedcontent/Panes.qml
@@ -0,0 +1,123 @@
+pragma ComponentBehavior: Bound
+
+import qs.widgets
+import qs.services
+import qs.config
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+
+ClippingRectangle {
+    id: root
+
+    required property Session session
+
+    topRightRadius: Appearance.rounding.normal
+    bottomRightRadius: Appearance.rounding.normal
+    color: "transparent"
+
+    ColumnLayout {
+        id: layout
+
+        spacing: 0
+        y: -root.session.activeIndex * root.height
+
+        Pane {
+            StyledText {
+                anchors.centerIn: parent
+                text: qsTr("Work in progress")
+                color: Colours.palette.m3outline
+                font.pointSize: Appearance.font.size.extraLarge
+                font.weight: 500
+            }
+        }
+
+        Pane {
+            StyledText {
+                anchors.centerIn: parent
+                text: qsTr("Work in progress")
+                color: Colours.palette.m3outline
+                font.pointSize: Appearance.font.size.extraLarge
+                font.weight: 500
+            }
+        }
+
+        Behavior on y {
+            NumberAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+
+    StyledRect {
+        anchors.fill: parent
+        color: Colours.palette.m3surfaceContainer
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskSource: mask
+            maskEnabled: true
+            maskInverted: true
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1
+        }
+    }
+
+    Item {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.normal
+            anchors.leftMargin: 0
+            radius: Appearance.rounding.small
+        }
+    }
+
+    component Pane: Loader {
+        id: pane
+
+        default property Item child
+
+        asynchronous: true
+        active: {
+            const ly = -layout.y;
+            const ty = layout.children.indexOf(this) * root.height;
+            return ly + root.height > ty && ly < ty + root.height;
+        }
+
+        sourceComponent: Item {
+            implicitWidth: root.width
+            implicitHeight: root.height
+
+            Item {
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.normal
+                anchors.leftMargin: 0
+
+                children: [pane.child]
+            }
+
+            StyledRect {
+                anchors.fill: parent
+                color: Colours.palette.m3surfaceContainer
+
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    maskSource: mask
+                    maskEnabled: true
+                    maskInverted: true
+                    maskThresholdMin: 0.5
+                    maskSpreadAtMin: 1
+                }
+            }
+        }
+    }
+}
diff --git a/modules/detachedcontent/Session.qml b/modules/detachedcontent/Session.qml
index a3f2de5..f86528c 100644
--- a/modules/detachedcontent/Session.qml
+++ b/modules/detachedcontent/Session.qml
@@ -1,5 +1,11 @@
 import QtQuick
 
 QtObject {
+    readonly property list<string> panes: ["network", "bluetooth"]
+
     property string active
+    property int activeIndex
+
+    onActiveChanged: activeIndex = panes.indexOf(active)
+    onActiveIndexChanged: active = panes[activeIndex]
 }