Port the devices settings page to mobileform

As description, also note that the edit device name is now an inline element rather than an overlay.

Normal 
![image](/uploads/46008dfcaa7e29a809f5ef93d2d51b79/image.png)

Editing Name
![image](/uploads/841c70cf9ad03d7abeef62202d799a72/image.png)

src/qml/Settings/DevicesPage.qml

@@ -6,39 +6,113 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
 
 import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18n("Devices")
 
-    ListView {
+    leftPadding: 0
+    rightPadding: 0
+
+    ColumnLayout {
+        MobileForm.FormCard {
+            Layout.fillWidth: true
+
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18n("Devices")
+                }
+
+                Kirigami.LoadingPlaceholder {
+                    Layout.alignment: Qt.AlignHCenter
+                    visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
+                }
+                Repeater {
                     model: DevicesModel {
                         id: devices
                     }
 
-        anchors.fill: parent
-
                     Kirigami.LoadingPlaceholder {
                         visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
                         anchors.centerIn: parent
                     }
 
-        delegate: Kirigami.BasicListItem {
+                    delegate: MobileForm.AbstractFormDelegate {
+                        id: deviceDelegate
+
+                        property bool editDeviceName: false
+
+                        Layout.fillWidth: true
+
+                        onClicked: deviceDelegate.editDeviceName = true
+
+                        contentItem: RowLayout {
+                            spacing: Kirigami.Units.largeSpacing
+
+                            Kirigami.Icon {
+                                source: "network-connect"
+                                implicitWidth: Kirigami.Units.iconSizes.medium
+                                implicitHeight: Kirigami.Units.iconSizes.medium
+                            }
+                            ColumnLayout {
+                                id: deviceLabel
+                                Layout.fillWidth: true
+                                spacing: Kirigami.Units.smallSpacing
+                                visible: !deviceDelegate.editDeviceName
+
+                                QQC2.Label {
+                                    Layout.fillWidth: true
                                     text: model.displayName
-            subtitle: model.id
+                                    elide: Text.ElideRight
-            icon: "network-connect"
+                                    wrapMode: Text.Wrap
-            trailing: RowLayout {
+                                    maximumLineCount: 2
+                                }
+
+                                QQC2.Label {
+                                    Layout.fillWidth: true
+                                    text: model.id + ", Last activity: " +  (new Date(model.lastTimestamp)).toLocaleString(Qt.locale(), Locale.ShortFormat)
+                                    color: Kirigami.Theme.disabledTextColor
+                                    font: Kirigami.Theme.smallFont
+                                    elide: Text.ElideRight
+                                    visible: text !== ""
+                                }
+                            }
+                            Kirigami.ActionTextField {
+                                id: nameField
+                                Accessible.description: i18n("New device name")
+                                Layout.fillWidth: true
+                                Layout.preferredHeight: deviceLabel.implicitHeight
+                                visible: deviceDelegate.editDeviceName
+
+                                text: model.displayName
+
+                                rightActions: [
+                                    Kirigami.Action {
+                                        icon.name: "edit-delete-remove"
+                                        onTriggered: {
+                                            deviceDelegate.editDeviceName = false
+                                        }
+                                    },
+                                    Kirigami.Action {
+                                        icon.name: "checkmark"
+                                        visible: nameField.text != model.displayName
+                                        onTriggered: {
+                                            devices.setName(model.index, nameField.text)
+                                        }
+                                    }
+                                ]
+
+                                onAccepted: devices.setName(model.index, nameField.text)
+                            }
                             QQC2.ToolButton {
                                 display: QQC2.AbstractButton.IconOnly
                                 action: Kirigami.Action {
                                     text: i18n("Edit device name")
                                     iconName: "document-edit"
-                        onTriggered: {
+                                    onTriggered: deviceDelegate.editDeviceName = true
-                            renameSheet.index = model.index
-                            renameSheet.name = model.displayName
-                            renameSheet.open()
-                        }
                                 }
                             }
                             QQC2.ToolButton {
@@ -66,6 +140,9 @@ Kirigami.ScrollablePage {
                         }
                     }
                 }
+            }
+        }
+    }
 
     Kirigami.OverlaySheet {
         id: passwordSheet
@@ -89,26 +166,4 @@ Kirigami.ScrollablePage {
             }
         }
     }
-
-    Kirigami.OverlaySheet {
-        id: renameSheet
-        property int index
-        property string name
-
-        title: i18n("Edit device")
-        Kirigami.FormLayout {
-            QQC2.TextField {
-                id: nameField
-                Kirigami.FormData.label: i18n("Name:")
-                text: renameSheet.name
-            }
-            QQC2.Button {
-                text: i18n("Save")
-                onClicked: {
-                    devices.setName(renameSheet.index, nameField.text)
-                    renameSheet.close()
-                }
-            }
-        }
-    }
 }