[Plasmoid] Use icon for battery and connectivity status

## Summary

Use a pretty, granular icon for battery and connectivity status instead of whacking it into the device name.

## Test Plan

It looks so nice!

![image](/uploads/7e64d1339507e1dae90ee70c02327aa6/image.png)

Tested all provided icon states by hacking Battery.qml and Connectivity.qml to provide different values.

plasmoid/package/contents/ui/Battery.qml

@@ -26,6 +26,33 @@ QtObject {
     property string displayString: (available && charge > -1) ? ((charging) ? (i18n("%1% charging", charge)) : (i18n("%1%", charge))) : i18n("No info")
     property variant battery: null
 
+    /**
+     * Suggests an icon name to use for the current battery level
+     */
+    readonly property string iconName: {
+        charge < 0 ?
+          "battery-missing-symbolic" :
+        charge < 10 ?
+          charging ?
+            "battery-empty-charging-symbolic" :
+            "battery-empty-symbolic" :
+        charge < 25 ?
+          charging ?
+            "battery-caution-charging-symbolic" :
+            "battery-caution-symbolic" :
+        charge < 50 ?
+            charging ?
+              "battery-low-charging-symbolic" :
+              "battery-low-symbolic" :
+        charge < 75 ?
+          charging ?
+            "battery-good-charging-symbolic" :
+            "battery-good-symbolic" :
+        charging ?
+          "battery-full-charging-symbolic":
+          "battery-full-symbolic"
+    }
+
     onAvailableChanged: {
         if (available) {
             battery = DeviceBatteryDbusInterfaceFactory.create(device.id())

plasmoid/package/contents/ui/Connectivity.qml

@@ -15,15 +15,35 @@ QtObject {
 
     property alias device: checker.device
     readonly property alias available: checker.available
-    readonly property bool ready: connectivity && connectivity.cellularNetworkType != "Unknown" && connectivity.cellularNetworkStrength > -1
+    readonly property bool ready: connectivity
 
     readonly property PluginChecker pluginChecker: PluginChecker {
         id: checker
         pluginName: "connectivity_report"
     }
 
-    property string networkType: connectivity ? connectivity.cellularNetworkType : i18n("Unknown")
-    property int signalStrength: connectivity ? connectivity.cellularNetworkStrength : -1
+    /**
+     * Reports a string indicating the network type. Possible values:
+     * 5G
+     * LTE
+     * HSPA
+     * UMTS
+     * CDMA2000
+     * EDGE
+     * GPRS
+     * GSM
+     * CDMA
+     * iDEN
+     *
+     * The parsing from Android values into these strings is handled in the
+     * [ConnectivityReportPlugin.networkTypeToString method](https://invent.kde.org/network/kdeconnect-android/-/blob/master/src/org/kde/kdeconnect/Plugins/ConnectivityReportPlugin/ConnectivityReportPlugin.java#L82)
+     */
+    readonly property string networkType: connectivity ? connectivity.cellularNetworkType : i18n("Unknown")
+
+    /**
+     * Reports a value between 0 and 4 (inclusive) which represents the strength of the cellular connection
+     */
+    readonly property int signalStrength: connectivity ? connectivity.cellularNetworkStrength : -1
     property string displayString: {
         if (ready) {
             return `${networkType} ${signalStrength}/4`;
@@ -33,6 +53,68 @@ QtObject {
     }
     property variant connectivity: null
 
+    /**
+     * Suggests an icon name to use for the current signal level
+     *
+     * Returns names which correspond to Plasma Framework's network.svg:
+     * https://invent.kde.org/frameworks/plasma-framework/-/blob/master/src/desktoptheme/breeze/icons/network.svg
+     */
+    readonly property string iconName: {
+        // Firstly, get the name prefix which represents the signal strength
+        var signalStrengthIconName =
+            (signalStrength < 0 || !ready) ?
+                // As long as the signal strength is nonsense or the plugin reports as non-ready,
+                // show us as disconnected
+                "network-mobile-off" :
+            (signalStrength == 0) ?
+                "network-mobile-0" :
+            (signalStrength == 1) ?
+                "network-mobile-20" :
+            (signalStrength == 2) ?
+                "network-mobile-60" :
+            (signalStrength == 3) ?
+                "network-mobile-80" :
+            (signalStrength == 4) ?
+                "network-mobile-100" :
+            // Since all possible values are enumerated above, this default case should never be hit.
+            // However, I need it in order for my ternary syntax to be valid!
+            "network-mobile-available"
+
+        // If we understand the network type, append to the icon name to show the type
+        var networkTypeSuffix =
+            (networkType === "5G") ?
+                // No icon for this case!
+                "" :
+            (networkType === "LTE") ?
+                "-lte" :
+            (networkType === "HSPA") ?
+                "-hspa" :
+            (networkType === "UMTS") ?
+                "-umts" :
+            (networkType === "CDMA2000") ?
+                // GSconnect just uses the 3g icon
+                // No icon for this case!
+                "" :
+            (networkType === "EDGE") ?
+                "-edge" :
+            (networkType === "GPRS") ?
+                "-gprs" :
+            (networkType === "GSM") ?
+                // GSconnect just uses the 2g icon
+                // No icon for this case!
+                "" :
+            (networkType === "CDMA") ?
+                // GSconnect just uses the 2g icon
+                // No icon for this case!
+                "" :
+            (networkType === "iDEN") ?
+                // GSconnect just uses the 2g icon
+                // No icon for this case!
+                "" :
+                "" // We didn't recognize the network type. Don't append anything.
+        return signalStrengthIconName + networkTypeSuffix
+    }
+
     onAvailableChanged: {
         if (available) {
             connectivity = DeviceConnectivityReportDbusInterfaceFactory.create(device.id())

plasmoid/package/contents/ui/DeviceDelegate.qml

@@ -72,25 +72,57 @@ PlasmaComponents.ListItem
             PlasmaComponents.Label {
                 id: deviceName
                 elide: Text.ElideRight
-                text: {
-                    let statuses = [];
+                text: display
+                Layout.fillWidth: true
+                textFormat: Text.PlainText
+            }
 
-                    if (connectivity.available) {
-                        statuses.push(connectivity.displayString);
-                    }
+            RowLayout
+            {
+                id: connectionInformation
+                visible: connectivity.available
 
-                    if (battery.available && battery.charge > -1) {
-                        statuses.push(i18nc("Display the battery charge percentage with the label \"Battery:\" so the user knows what is being displayed", "Battery: %1", battery.displayString));
-                    }
+                // TODO: In the future, when the Connectivity Report plugin supports more than one
+                // subscription, add more signal strength icons to represent all the available
+                // connections.
 
-                    if (statuses.length > 0) {
-                        return i18n("%1 (%2)", display, statuses.join(", "));
-                    } else {
-                        return display;
-                    }
+                PlasmaCore.IconItem {
+                    id: celluarConnectionStrengthIcon
+                    source: connectivity.iconName
+                    Layout.preferredHeight: connectivityText.height
+                    Layout.preferredWidth: Layout.preferredHeight
+                    Layout.alignment: Qt.AlignCenter
+                    visible: valid
+                }
+
+                PlasmaComponents.Label {
+                    // Fallback plain-text label. Only show this if the icon doesn't work.
+                    id: connectivityText
+                    text: connectivity.displayString
+                    textFormat: Text.PlainText
+                    visible: !celluarConnectionStrengthIcon.visible
+                }
+            }
+
+            RowLayout
+            {
+                id: batteryInformation
+                visible: (battery.available && battery.charge > -1)
+
+                PlasmaCore.IconItem {
+                    id: batteryIcon
+                    source: battery.iconName
+                    // Make the icon the same size as the text so that it doesn't dominate
+                    Layout.preferredHeight: batteryPercent.height
+                    Layout.preferredWidth: Layout.preferredHeight
+                    Layout.alignment: Qt.AlignCenter
+                }
+
+                PlasmaComponents.Label {
+                    id: batteryPercent
+                    text: i18nc("Battery charge percentage", "%1%", battery.charge)
+                    textFormat: Text.PlainText
                 }
-                Layout.fillWidth: true
-                textFormat: Text.PlainText
             }
 
             PlasmaComponents3.ToolButton {