qml: server list styling, group indicator per chain

electrum/gui/qml/components/ServerConfigDialog.qml

@@ -55,16 +55,37 @@ ElDialog {
 
             Frame {
                 background: PaneInsetBackground { baseColor: Material.dialogColor }
-
+                clip: true
                 verticalPadding: 0
                 horizontalPadding: 0
                 Layout.fillHeight: true
                 Layout.fillWidth: true
 
                 ListView {
+                    id: serversListView
                     anchors.fill: parent
                     model: Network.serverListModel
                     delegate: ServerDelegate {}
+
+                    section.property: 'chain'
+                    section.criteria: ViewSection.FullString
+                    section.delegate: RowLayout {
+                        width: ListView.view.width
+                        required property string section
+                        Label {
+                            text: section
+                                ? serversListView.model.chaintips > 1
+                                    ? qsTr('Connected @%1').arg(section)
+                                    : qsTr('Connected')
+                                : qsTr('Disconnected')
+                            Layout.alignment: Qt.AlignLeft
+                            Layout.topMargin: constants.paddingXSmall
+                            Layout.leftMargin: constants.paddingSmall
+                            font.pixelSize: constants.fontSizeMedium
+                            color: Material.accentColor
+                        }
+                    }
+
                 }
             }
         }

electrum/gui/qml/components/controls/ServerDelegate.qml

@@ -15,15 +15,48 @@ ItemDelegate {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: constants.paddingSmall
+            leftMargin: constants.paddingXLarge
             rightMargin: constants.paddingSmall
         }
-        columns: 2
+
+        columns: 3
+
+        // topmargin
+        Rectangle {
+            Layout.columnSpan: 3
+            Layout.preferredHeight: constants.paddingSmall
+            color: 'transparent'
+        }
+
+        Item {
+            Layout.preferredWidth: constants.iconSizeSmall
+            Layout.preferredHeight: constants.iconSizeSmall
             Label {
-            text: model.address
+                text: '❤'
+                anchors.centerIn: parent
+                visible: model.is_primary
+            }
+        }
+        Item {
+            Layout.preferredWidth: constants.iconSizeMedium
+            Layout.preferredHeight: constants.iconSizeMedium
+            Image {
+                source: '../../../icons/status_connected.png'
+                width: constants.iconSizeMedium
+                height: constants.iconSizeMedium
+                visible: model.is_connected
+            }
         }
         Label {
-            text: model.chain
+            Layout.fillWidth: true
+            text: model.address
+        }
+
+        // bottommargin
+        Rectangle {
+            Layout.columnSpan: 3
+            Layout.preferredHeight: constants.paddingSmall
+            color: 'transparent'
         }
     }
 }

electrum/gui/qml/qeserverlistmodel.py

@@ -28,17 +28,17 @@ class QEServerListModel(QAbstractListModel, QtEventListener):
         self.register_callbacks()
         self.destroyed.connect(lambda: self.unregister_callbacks())
 
-    @event_listener
+    @qt_event_listener
     def on_event_network_updated(self):
         self._logger.info(f'network updated')
         self.init_model()
 
-    @event_listener
+    @qt_event_listener
     def on_event_blockchain_updated(self):
         self._logger.info(f'blockchain updated')
         self.init_model()
 
-    @event_listener
+    @qt_event_listener
     def on_event_default_server_changed(self):
         self._logger.info(f'default server changed')
         self.init_model()
@@ -82,6 +82,8 @@ class QEServerListModel(QAbstractListModel, QtEventListener):
     def init_model(self):
         self.clear()
 
+        servers = []
+
         chains = self.get_chains()
 
         for chain_id, interfaces in chains.items():
@@ -105,7 +107,7 @@ class QEServerListModel(QAbstractListModel, QtEventListener):
                 server['height'] = i.tip
 
                 self._logger.debug(f'adding server: {repr(server)}')
-                self.servers.append(server)
+                servers.append(server)
 
         # disconnected servers
         all_servers = self.network.get_servers()
@@ -129,5 +131,9 @@ class QEServerListModel(QAbstractListModel, QtEventListener):
                 server['name'] = s.net_addr_str()
                 server['address'] = server['name']
 
-                self.servers.append(server)
+                self._logger.debug(f'adding server: {repr(server)}')
+                servers.append(server)
 
+        self.beginInsertRows(QModelIndex(), 0, len(servers) - 1)
+        self.servers = servers
+        self.endInsertRows()