sidebar: refractor wifi dialog to new file, make it dynamically loaded

.config/quickshell/ii/modules/sidebarRight/SidebarRightContent.qml

@@ -20,14 +20,13 @@ Item {
     property int sidebarWidth: Appearance.sizes.sidebarWidth
     property int sidebarPadding: 12
     property string settingsQmlPath: Quickshell.shellPath("settings.qml")
-    property bool showDialog: false
+    property bool showWifiDialog: false
-    property bool dialogIsWifi: true
 
     Connections {
         target: GlobalStates
         function onSidebarRightOpenChanged() {
             if (!GlobalStates.sidebarRightOpen) {
-                root.showDialog = false
+                root.showWifiDialog = false;
             }
         }
     }
@@ -86,8 +85,8 @@ Item {
                         toggled: false
                         buttonIcon: "restart_alt"
                         onClicked: {
-                            Hyprland.dispatch("reload")
+                            Hyprland.dispatch("reload");
-                            Quickshell.reload(true)
+                            Quickshell.reload(true);
                         }
                         StyledToolTip {
                             content: Translation.tr("Reload Hyprland & Quickshell")
@@ -97,8 +96,8 @@ Item {
                         toggled: false
                         buttonIcon: "settings"
                         onClicked: {
-                            GlobalStates.sidebarRightOpen = false
+                            GlobalStates.sidebarRightOpen = false;
-                            Quickshell.execDetached(["qs", "-p", root.settingsQmlPath])
+                            Quickshell.execDetached(["qs", "-p", root.settingsQmlPath]);
                         }
                         StyledToolTip {
                             content: Translation.tr("Settings")
@@ -108,7 +107,7 @@ Item {
                         toggled: false
                         buttonIcon: "power_settings_new"
                         onClicked: {
-                            GlobalStates.sessionOpen = true
+                            GlobalStates.sessionOpen = true;
                         }
                         StyledToolTip {
                             content: Translation.tr("Session")
@@ -125,10 +124,9 @@ Item {
 
                 NetworkToggle {
                     altAction: () => {
-                        Network.enableWifi()
+                        Network.enableWifi();
-                        Network.rescanWifi()
+                        Network.rescanWifi();
-                        root.dialogIsWifi = true
+                        root.showWifiDialog = true;
-                        root.showDialog = true
                     }
                 }
                 BluetoothToggle {}
@@ -155,65 +153,21 @@ Item {
         }
     }
 
-    WindowDialog {
+    onShowWifiDialogChanged: if (showWifiDialog) wifiDialogLoader.active = true;
-        show: root.showDialog
+    Loader {
-        onDismiss: root.showDialog = false
+        id: wifiDialogLoader
-        anchors {
+        anchors.fill: parent
-            fill: parent
-        }
-        
-        WindowDialogTitle {
-            text: Translation.tr("Connect to Wi-Fi")
-        }
-        WindowDialogSeparator {
-            // TODO: add indeterminate progress bar when scanning
-        }
-        StyledListView {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            Layout.topMargin: -15
-            Layout.bottomMargin: -16
-            Layout.leftMargin: -Appearance.rounding.large
-            Layout.rightMargin: -Appearance.rounding.large
-            
-            clip: true
-            spacing: 0
-            animateAppearance: false
 
-            model: ScriptModel {
+        active: root.showWifiDialog || item.visible
-                values: [...Network.wifiNetworks].sort((a, b) => {
+        onActiveChanged: if (active) item.show = true
-                    if (a.active && !b.active) return -1;
-                    if (!a.active && b.active) return 1;
-                    return b.strength - a.strength;
-                })
-            }
-            // model: Network.wifiNetworks
-            delegate: WifiNetworkItem {
-                required property WifiAccessPoint modelData
-                wifiNetwork: modelData
-                anchors {
-                    left: parent?.left
-                    right: parent?.right
-                }
-            }
-        }
-        WindowDialogSeparator {}
-        WindowDialogButtonRow {
-            DialogButton {
-                buttonText: Translation.tr("Details")
-                onClicked: {
-                    Quickshell.execDetached(["bash", "-c", `${Network.ethernet ? Config.options.apps.networkEthernet : Config.options.apps.network}`])
-                    GlobalStates.sidebarRightOpen = false
-                }
-            }
 
-            Item {
+        sourceComponent: WifiDialog {
-                Layout.fillWidth: true
+            onDismiss: {
+                show = false
+                root.showWifiDialog = false
             }
-
+            onVisibleChanged: {
-            DialogButton {
+                if (!visible && !root.showWifiDialog) wifiDialogLoader.active = false;
-                buttonText: Translation.tr("Done")
-                onClicked: root.showDialog = false
             }
         }
     }

.config/quickshell/ii/modules/sidebarRight/wifiNetworks/WifiDialog.qml

@@ -0,0 +1,76 @@
+import qs
+import qs.services
+import qs.services.network
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import "./quickToggles/"
+import "./wifiNetworks/"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell.Io
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+WindowDialog {
+    id: root
+    
+    WindowDialogTitle {
+        text: Translation.tr("Connect to Wi-Fi")
+    }
+    // TODO: add indeterminate progress bar when scanning
+    WindowDialogSeparator {}
+    StyledListView {
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        Layout.topMargin: -15
+        Layout.bottomMargin: -16
+        Layout.leftMargin: -Appearance.rounding.large
+        Layout.rightMargin: -Appearance.rounding.large
+
+        clip: true
+        spacing: 0
+        animateAppearance: false
+
+        model: ScriptModel {
+            values: [...Network.wifiNetworks].sort((a, b) => {
+                if (a.active && !b.active)
+                    return -1;
+                if (!a.active && b.active)
+                    return 1;
+                return b.strength - a.strength;
+            })
+        }
+        // model: Network.wifiNetworks
+        delegate: WifiNetworkItem {
+            required property WifiAccessPoint modelData
+            wifiNetwork: modelData
+            anchors {
+                left: parent?.left
+                right: parent?.right
+            }
+        }
+    }
+    WindowDialogSeparator {}
+    WindowDialogButtonRow {
+        DialogButton {
+            buttonText: Translation.tr("Details")
+            onClicked: {
+                Quickshell.execDetached(["bash", "-c", `${Network.ethernet ? Config.options.apps.networkEthernet : Config.options.apps.network}`]);
+                GlobalStates.sidebarRightOpen = false;
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        DialogButton {
+            buttonText: Translation.tr("Done")
+            onClicked: root.dismiss()
+        }
+    }
+}

.config/quickshell/ii/modules/sidebarRight/wifiNetworks/WifiNetworkItem.qml

@@ -45,20 +45,21 @@ RippleButton {
             spacing: 10
             MaterialSymbol {
                 iconSize: Appearance.font.pixelSize.larger
-                text: root.wifiNetwork?.strength > 80 ? "signal_wifi_4_bar" :
+                property int strength: root.wifiNetwork?.strength ?? 0
-                    root.wifiNetwork?.strength > 60 ? "network_wifi_3_bar" :
+                text: strength > 80 ? "signal_wifi_4_bar" :
-                    root.wifiNetwork?.strength > 40 ? "network_wifi_2_bar" :
+                    strength > 60 ? "network_wifi_3_bar" :
-                    root.wifiNetwork?.strength > 20 ? "network_wifi_1_bar" :
+                    strength > 40 ? "network_wifi_2_bar" :
+                    strength > 20 ? "network_wifi_1_bar" :
                     "signal_wifi_0_bar"
                 color: Appearance.colors.colOnSurfaceVariant
             }
             StyledText {
                 Layout.fillWidth: true
-                text: root.wifiNetwork?.ssid
+                text: root.wifiNetwork?.ssid ?? Translation.tr("Unknown")
                 color: Appearance.colors.colOnSurfaceVariant
             }
             MaterialSymbol {
-                visible: root.wifiNetwork?.isSecure || root.wifiNetwork?.active
+                visible: (root.wifiNetwork?.isSecure || root.wifiNetwork?.active) ?? false
                 text: root.wifiNetwork?.active ? "check" : Network.wifiConnectTarget === root.wifiNetwork ? "settings_ethernet" : "lock"
                 iconSize: Appearance.font.pixelSize.larger
                 color: Appearance.colors.colOnSurfaceVariant
@@ -67,7 +68,7 @@ RippleButton {
 
         ColumnLayout {
             id: passwordPrompt
-            visible: root.wifiNetwork?.askingPassword
+            visible: root.wifiNetwork?.askingPassword ?? false
             Layout.topMargin: 12
 
             MaterialTextField {