feat(desktop): globe network tile with per-link IPs

1 files changed, 50 insertions, 20 deletions

diff --git a/desktop/modules/network/NetworkTile.qml b/desktop/modules/network/NetworkTile.qml
index a9e5dd0..d88ad35 100644
--- a/desktop/modules/network/NetworkTile.qml
+++ b/desktop/modules/network/NetworkTile.qml
@@ -12,38 +12,68 @@
 import QtQuick
 import "../.."
 
-// The state line under the tile label. One line per active link: the API
-// exposes no route metric, so when both wired and wifi are up the tile shows
-// both rather than guessing which one carries traffic.
+// The state line under the tile label: a green dot, the link's name, and its
+// local IP. One row per active link, because the API exposes no route metric
+// and the tile will not guess which link carries traffic.
 Column {
+    id: tile
+
     required property var net
 
     width: parent ? parent.width : implicitWidth
     spacing: 2
 
-    Text {
-        width: parent.width
-        elide: Text.ElideRight
-        visible: net.wiredUp
-        text: net.wiredName
-        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
-        color: Theme.text
+    Row {
+        visible: tile.net.wiredUp
+        width: tile.width
+        spacing: 5
+
+        Rectangle {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 7; height: 7; radius: 4
+            color: Theme.green
+        }
+
+        Text {
+            width: parent.width - 12
+            elide: Text.ElideRight
+            text: {
+                const ip = tile.net.ipFor(tile.net.wiredName);
+                return tile.net.wiredName + (ip !== "" ? "  " + ip : "");
+            }
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+            color: Theme.text
+        }
     }
 
-    Text {
-        width: parent.width
-        elide: Text.ElideRight
-        visible: net.wifiUp
-        text: net.wifiSsid
-        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
-        color: Theme.text
+    Row {
+        visible: tile.net.wifiUp
+        width: tile.width
+        spacing: 5
+
+        Rectangle {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 7; height: 7; radius: 4
+            color: Theme.green
+        }
+
+        Text {
+            width: parent.width - 12
+            elide: Text.ElideRight
+            text: {
+                const ip = tile.net.ipFor(tile.net.wifiDevice ? tile.net.wifiDevice.name : "");
+                return tile.net.wifiSsid + (ip !== "" ? "  " + ip : "");
+            }
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+            color: Theme.text
+        }
     }
 
     Text {
-        width: parent.width
+        width: tile.width
         elide: Text.ElideRight
-        visible: !net.wiredUp && !net.wifiUp
-        text: net.wifiOn ? "Disconnected" : "Off"
+        visible: !tile.net.wiredUp && !tile.net.wifiUp
+        text: tile.net.wifiOn ? "Disconnected" : "Off"
         font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
         color: Theme.subtext
     }