[applet] Standardize presentation on the "devices unavailable" view

Summary:
This patch makes the "devilces unavailable" page follow the general style used in other
similar views throughout Plasma and other KDE software. It also improves the wording
of various buttons and headers to make them more context-sensitive and thus more relevant
to what the user needs to do to solve the problem.

Test Plan:
{F8149680}

{F8149679}

Reviewers:
#VDG, #kde-connect

Subscribers:

plasmoid/package/contents/ui/FullRepresentation.qml

@@ -33,30 +33,35 @@ Item {
     KdeConnect.DevicesModel {
         id: allDevicesModel
     }
+    KdeConnect.DevicesModel {
+        id: pairedDevicesModel
+        displayFilter: KdeConnect.DevicesModel.Paired
+    }
 
     ColumnLayout {
-        spacing: 5
+        spacing: units.smallSpacing
         visible: devicesView.count == 0
         anchors.fill: parent
 
-        PlasmaExtras.Heading {
-            id: heading
-            Layout.fillWidth: true
-            level: 3
-            opacity: 0.6
-            text: i18n("No paired devices available")
-        }
-
         Item {
             Layout.fillHeight: true
         }
 
-        PlasmaComponents.Label {
+        PlasmaExtras.Heading {
+            id: heading
             Layout.fillWidth: true
-            Layout.bottomMargin: units.largeSpacing
+            visible: pairedDevicesModel.count >= 0
+            level: 3
+            enabled: false
+            text: pairedDevicesModel.count == 0 ? i18n("No paired devices") : i18np("Paired device is unavailable", "All paired devices are unavailable", pairedDevicesModel.count)
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+        }
 
+        PlasmaExtras.Heading {
+            Layout.fillWidth: true
             visible: allDevicesModel.count == 0
-
+            level: 3
             text: i18n("Install KDE Connect on your Android device to integrate it with Plasma!")
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
@@ -83,12 +88,9 @@ Item {
         }
 
         PlasmaComponents.Button {
-            Layout.leftMargin: units.largeSpacing
-            Layout.rightMargin: units.largeSpacing
-            Layout.topMargin: units.largeSpacing
             Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: true
+            text: pairedDevicesModel.count == 0 ? i18n("Pair a Device...") : i18n("Configure...")
-            text: i18n("KDE Connect Settings...")
+            iconName: pairedDevicesModel.count == 0 ? "list-add" : "configure"
             onClicked: KCMShell.open("kcm_kdeconnect")
             visible: KCMShell.authorize("kcm_kdeconnect.desktop").length > 0
         }
@@ -97,10 +99,6 @@ Item {
         Item {
             Layout.fillHeight: true
         }
-
-        Item {
-            height: heading.height
-        }
     }
 
     /*