refactor: move item list -> new component

modules/nexus/common/ItemList.qml

@@ -0,0 +1,123 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Caelestia.Config
+import qs.components
+import qs.services
+
+StyledRect {
+    id: root
+
+    property bool showList
+    property string placeholderIcon
+    property string placeholderText
+    property int extraHeight
+
+    property alias model: list.model
+    property alias delegate: list.delegate
+    readonly property alias list: list
+
+    Layout.fillWidth: true
+    implicitHeight: (showList && list.count > 0 ? list.contentHeight : placeholder.implicitHeight + Tokens.padding.extraLarge * 2) + extraHeight
+    radius: Tokens.rounding.extraSmall
+    color: Colours.tPalette.m3surfaceContainer
+    clip: true
+
+    Behavior on implicitHeight {
+        Anim {}
+    }
+
+    Loader {
+        id: placeholder
+
+        anchors.centerIn: parent
+        active: opacity > 0
+        asynchronous: true
+        opacity: root.showList && list.count > 0 ? 0 : 1
+
+        sourceComponent: ColumnLayout {
+            spacing: Tokens.spacing.extraSmall
+
+            MaterialIcon {
+                Layout.alignment: Qt.AlignHCenter
+                text: root.placeholderIcon
+                color: Colours.palette.m3outline
+                font: Tokens.font.icon.large
+                animate: true
+            }
+
+            StyledText {
+                Layout.alignment: Qt.AlignHCenter
+                text: root.placeholderText
+                color: Colours.palette.m3outline
+                font: Tokens.font.body.large
+                animate: true
+            }
+        }
+
+        Behavior on opacity {
+            Anim {
+                type: Anim.DefaultEffects
+            }
+        }
+    }
+
+    ListView {
+        id: list
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        spacing: 0
+        interactive: false
+        opacity: root.showList ? 1 : 0
+
+        add: Transition {
+            Anim {
+                property: "opacity"
+                from: 0
+                to: 1
+                type: Anim.DefaultEffects
+            }
+        }
+
+        remove: Transition {
+            Anim {
+                property: "opacity"
+                to: 0
+                type: Anim.DefaultEffects
+            }
+        }
+
+        move: Transition {
+            Anim {
+                property: "opacity"
+                to: 1
+                type: Anim.DefaultEffects
+            }
+            Anim {
+                property: "y"
+            }
+        }
+
+        displaced: Transition {
+            Anim {
+                property: "opacity"
+                to: 1
+                type: Anim.DefaultEffects
+            }
+            Anim {
+                property: "y"
+            }
+        }
+
+        Behavior on opacity {
+            Anim {
+                type: Anim.DefaultEffects
+            }
+        }
+    }
+}

modules/nexus/pages/NetworkPage.qml

@@ -59,62 +59,14 @@ PageBase {
             verticalPadding: Tokens.padding.large
         }
 
-        StyledRect {
+        ItemList {
-            Layout.fillWidth: true
-            implicitHeight: (Nmcli.wifiEnabled && networkList.count > 0 ? networkList.contentHeight : noNetworksPlaceholder.implicitHeight + Tokens.padding.extraLarge * 2) + (Nmcli.scanning ? Tokens.rounding.extraSmall : 0) // Inline so it isn't affected by anim
-            radius: Tokens.rounding.extraSmall
-            color: Colours.tPalette.m3surfaceContainer
-            clip: true
-
-            Behavior on implicitHeight {
-                Anim {}
-            }
-
-            Loader {
-                id: noNetworksPlaceholder
-
-                anchors.centerIn: parent
-                active: opacity > 0
-                asynchronous: true
-                opacity: Nmcli.wifiEnabled && networkList.count > 0 ? 0 : 1
-
-                sourceComponent: ColumnLayout {
-                    spacing: Tokens.spacing.extraSmall
-
-                    MaterialIcon {
-                        Layout.alignment: Qt.AlignHCenter
-                        text: Nmcli.wifiEnabled ? "wifi_find" : "signal_wifi_off"
-                        color: Colours.palette.m3outline
-                        font: Tokens.font.icon.large
-                        animate: true
-                    }
-
-                    StyledText {
-                        Layout.alignment: Qt.AlignHCenter
-                        text: Nmcli.wifiEnabled ? qsTr("No networks found") : qsTr("Wi-Fi disabled")
-                        color: Colours.palette.m3outline
-                        font: Tokens.font.body.large
-                        animate: true
-                    }
-                }
-
-                Behavior on opacity {
-                    Anim {
-                        type: Anim.DefaultEffects
-                    }
-                }
-            }
-
-            ListView {
             id: networkList
 
-                anchors.left: parent.left
+            showList: Nmcli.wifiEnabled
-                anchors.right: parent.right
+            placeholderIcon: Nmcli.wifiEnabled ? "wifi_find" : "signal_wifi_off"
-                anchors.top: scanningIndicator.bottom
+            placeholderText: Nmcli.wifiEnabled ? qsTr("No networks found") : qsTr("Wi-Fi disabled")
-                anchors.bottom: parent.bottom
+            extraHeight: Nmcli.scanning ? Tokens.rounding.extraSmall : 0 // Inline so it isn't affected by anim
-
+            list.anchors.top: scanningIndicator.bottom
-                spacing: 0
-                interactive: false
 
             model: ScriptModel {
                 values: [...Nmcli.networks].sort((a, b) => {
@@ -126,45 +78,6 @@ PageBase {
                 })
             }
 
-                add: Transition {
-                    Anim {
-                        property: "opacity"
-                        from: 0
-                        to: 1
-                        type: Anim.DefaultEffects
-                    }
-                }
-
-                remove: Transition {
-                    Anim {
-                        property: "opacity"
-                        to: 0
-                        type: Anim.DefaultEffects
-                    }
-                }
-
-                move: Transition {
-                    Anim {
-                        property: "opacity"
-                        to: 1
-                        type: Anim.DefaultEffects
-                    }
-                    Anim {
-                        property: "y"
-                    }
-                }
-
-                displaced: Transition {
-                    Anim {
-                        property: "opacity"
-                        to: 1
-                        type: Anim.DefaultEffects
-                    }
-                    Anim {
-                        property: "y"
-                    }
-                }
-
             delegate: StateLayer {
                 id: network
 
@@ -174,8 +87,8 @@ PageBase {
 
                 disabled: currentSelected || Nmcli.connectingSsid() === modelData.ssid
 
-                    anchors.left: networkList.contentItem.left
+                anchors.left: networkList.list.contentItem.left
-                    anchors.right: networkList.contentItem.right
+                anchors.right: networkList.list.contentItem.right
                 implicitHeight: networkLayout.implicitHeight + networkLayout.anchors.margins * 2
                 radius: Tokens.rounding.extraSmall
                 anchors.fill: undefined
@@ -274,15 +187,6 @@ PageBase {
                 }
             }
 
-                opacity: Nmcli.wifiEnabled ? 1 : 0
-
-                Behavior on opacity {
-                    Anim {
-                        type: Anim.DefaultEffects
-                    }
-                }
-            }
-
             StyledProgressBar {
                 id: scanningIndicator