Port About page to FormCard

- DevTools
- Network settings
- Push notification
- Permissions

src/models/statemodel.cpp

@@ -26,8 +26,7 @@ QVariant StateModel::data(const QModelIndex &index, int role) const
 
 int StateModel::rowCount(const QModelIndex &parent) const
 {
-    Q_UNUSED(parent);
+    return !m_room || parent.isValid() ? 0 : m_room->currentState().events().size();
-    return m_room->currentState().events().size();
 }
 
 NeoChatRoom *StateModel::room() const
@@ -37,8 +36,12 @@ NeoChatRoom *StateModel::room() const
 
 void StateModel::setRoom(NeoChatRoom *room)
 {
+    if (m_room == room) {
+        return;
+    }
     m_room = room;
     Q_EMIT roomChanged();
+
     beginResetModel();
     m_stateEvents.clear();
     m_stateEvents = m_room->currentState().events().keys();

src/qml/Component/Devtools/RoomData.qml

@@ -6,28 +6,36 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
 
-ColumnLayout {
+FormCard.FormCardPage {
-    MobileForm.FormCard {
+    id: root
-        Layout.fillWidth: true
+
-        contentItem: ColumnLayout {
+    required property var room
-            spacing: 0
+
-            MobileForm.FormComboBoxDelegate {
+    FormCard.FormCard {
+        Layout.topMargin: Kirigami.Units.gridUnit
+
+        FormCard.FormComboBoxDelegate {
+            id: roomChooser
             text: i18n("Room")
             textRole: "displayName"
-                valueRole: "id"
+            valueRole: "roomId"
             model: RoomListModel {
                 id: roomListModel
                 connection: Controller.activeConnection
             }
-                Component.onCompleted: currentIndex = indexOfValue(room.id)
             onCurrentValueChanged: room = roomListModel.roomByAliasOrId(currentValue)
+            Component.onCompleted: currentIndex = indexOfValue(room.id)
         }
-            MobileForm.FormCheckDelegate {
+
+        FormCard.FormDelegateSeparator { above: showRoomMember }
+
+        FormCard.FormCheckDelegate {
+            id: showRoomMember
             text: i18n("Show m.room.member events")
             checked: true
             onToggled: {
@@ -38,25 +46,34 @@ ColumnLayout {
                 }
             }
         }
-            MobileForm.FormCheckDelegate {
+
+        FormCard.FormDelegateSeparator { above: roomAccoutnDataVisibleCheck; below: showRoomMember }
+
+        FormCard.FormCheckDelegate {
             id: roomAccoutnDataVisibleCheck
             text: i18n("Show room account data")
             checked: false
         }
+
+        FormCard.FormDelegateSeparator { below: roomAccoutnDataVisibleCheck }
+
+        FormCard.FormTextDelegate {
+            text: i18n("Room id")
+            description: room.id
         }
     }
-    MobileForm.FormCard {
+
-        Layout.fillWidth: true
+    FormCard.FormHeader {
+        title: i18n("Room Account Data for %1", room.displayName)
         visible: roomAccoutnDataVisibleCheck.checked
-        contentItem: ColumnLayout {
-            spacing: 0
-            MobileForm.FormCardHeader {
-                title: i18n("Room Account Data for %1 - %2", room.displayName, room.id)
     }
 
+    FormCard.FormCard {
+        visible: roomAccoutnDataVisibleCheck.checked
+
         Repeater {
             model: room.accountDataEventTypes
-                delegate: MobileForm.FormTextDelegate {
+            delegate: FormCard.FormTextDelegate {
                 text: modelData
                 onClicked: applicationWindow().pageStack.pushDialogLayer("qrc:/MessageSourceSheet.qml", {
                     "sourceText": room.roomAcountDataJson(text)
@@ -67,20 +84,19 @@ ColumnLayout {
             }
         }
     }
-    }
+
-    MobileForm.FormCard {
+    FormCard.FormHeader {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        contentItem: ColumnLayout {
-            spacing: 0
-            MobileForm.FormCardHeader {
         id: stateEventListHeader
         title: i18n("Room State for %1", room.displayName)
-                subtitle: room.id
     }
+
+    FormCard.FormCard {
+        Layout.fillHeight: true
+
         QQC2.ScrollView {
             Layout.fillWidth: true
             Layout.fillHeight: true
+            Layout.maximumHeight: Kirigami.Units.gridUnit * 20
 
             // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
             QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
@@ -93,11 +109,11 @@ ColumnLayout {
                     id: stateEventFilterModel
                     sourceModel: StateModel {
                         id: stateModel
-                            room: devtoolsPage.room
+                        room: root.room
                     }
                 }
 
-                    delegate: MobileForm.FormTextDelegate {
+                delegate: FormCard.FormTextDelegate {
                     text: model.type
                     description: model.stateKey
                     onClicked: applicationWindow().pageStack.pushDialogLayer('qrc:/MessageSourceSheet.qml', {
@@ -111,4 +127,3 @@ ColumnLayout {
         }
     }
 }
-}

src/qml/Component/Devtools/ServerData.qml

@@ -6,48 +6,44 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
 
-ColumnLayout {
+FormCard.FormCardPage {
-    MobileForm.FormCard {
+    id: root
-        Layout.fillWidth: true
+
-        contentItem: ColumnLayout {
+    FormCard.FormHeader {
-            spacing: 0
-            MobileForm.FormCardHeader {
         title: i18n("Server Capabilities")
     }
-            MobileForm.FormTextDelegate {
+
+    FormCard.FormCard {
+        FormCard.FormTextDelegate {
             text: i18n("Can change password")
             description: Controller.activeConnection.canChangePassword
         }
     }
-    }
+
-    MobileForm.FormCard {
+    FormCard.FormHeader {
-        Layout.fillWidth: true
-        contentItem: ColumnLayout {
-            spacing: 0
-            MobileForm.FormCardHeader {
         title: i18n("Default Room Version")
     }
-            MobileForm.FormTextDelegate {
+
+    FormCard.FormCard {
+        FormCard.FormTextDelegate {
             text: Controller.activeConnection.defaultRoomVersion
         }
     }
-    }
+
-    MobileForm.FormCard {
+    FormCard.FormHeader {
-        Layout.fillWidth: true
-        contentItem: ColumnLayout {
-            spacing: 0
-            MobileForm.FormCardHeader {
         title: i18n("Available Room Versions")
     }
+
+    FormCard.FormCard {
         Repeater {
             model: Controller.getSupportedRoomVersions(room.connection)
 
-                delegate: MobileForm.FormTextDelegate {
+            delegate: FormCard.FormTextDelegate {
                 text: modelData.id
                 contentItem.children: QQC2.Label {
                     text: modelData.status
@@ -57,7 +53,3 @@ ColumnLayout {
         }
     }
 }
-    Item {
-        Layout.fillHeight: true
-    }
-}

src/qml/Page/DevtoolsPage.qml

@@ -2,41 +2,34 @@
 // SPDX-License-Identifier: GPL-2.0-or-later
 
 import QtQuick 2.15
-import QtQuick.Controls 2.15 as QQC2
-import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.settings 1.0 as KirigamiSettings
 
 import org.kde.neochat 1.0
 
-Kirigami.Page {
+KirigamiSettings.CategorizedSettings {
-    id: devtoolsPage
+    id: root
 
     property NeoChatRoom room
 
-    title: i18n("Developer Tools")
+    actions: [
-
+        KirigamiSettings.SettingAction {
-    leftPadding: 0
+            actionName: "roomData"
-    rightPadding: 0
+            text: i18n("Room Data")
-
+            icon.name: "datatype"
-    header: QQC2.TabBar {
+            page: "qrc:/RoomData.qml"
-        id: tabBar
+            initialProperties: {
-
+                return {
-        QQC2.TabButton {
+                    room: root.room
-            text: qsTr("Room Data")
-        }
-        QQC2.TabButton {
-            text: qsTr("Server Info")
                 }
             }
-
+        },
-    StackLayout {
+        KirigamiSettings.SettingAction {
-        id: swipeView
+            actionName: "serverData"
-        anchors.fill: parent
+            text: i18n("Server Info")
-
+            icon.name: "network-server-symbolic"
-        currentIndex: tabBar.currentIndex
+            page: "qrc:/ServerData.qml"
-
-        RoomData {}
-        ServerData {}
         }
+    ]
 }

src/qml/RoomSettings/Permissions.qml

@@ -6,42 +6,36 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.kirigamiaddons.delegates 1.0 as Delegates
 import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: root
 
     property NeoChatRoom room
 
-    title: i18nc('@title:window', 'Permissions')
+    title: i18nc("@title:window", "Permissions")
-    topPadding: 0
-    leftPadding: 0
-    rightPadding: 0
 
-    UserListModel {
+    readonly property UserListModel userListModel: UserListModel {
         id: userListModel
         room: root.room
     }
 
-    ListModel {
+    readonly property ListModel powerLevelModel: ListModel {
         id: powerLevelModel
     }
 
-    ColumnLayout {
+    FormCard.FormHeader {
-        spacing: 0
-        MobileForm.FormHeader {
-            Layout.fillWidth: true
         title: i18n("Privileged Users")
     }
-        MobileForm.FormCard {
+
+    FormCard.FormCard {
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
+
-                spacing: 0
         Repeater {
             model: KSortFilterProxyModel {
                 sourceModel: userListModel
@@ -52,7 +46,7 @@ Kirigami.ScrollablePage {
                     return powerLevelRole > 0;
                 }
             }
-                    delegate: MobileForm.FormTextDelegate {
+            delegate: FormCard.FormTextDelegate {
                 text: name
                 description: userId
                 contentItem.children: RowLayout {
@@ -64,7 +58,7 @@ Kirigami.ScrollablePage {
                     }
                     QQC2.ComboBox {
                         focusPolicy: Qt.NoFocus // provided by parent
-                                model: powerLevelModel
+                        model: root.powerLevelModel
                         textRole: "text"
                         valueRole: "powerLevel"
                         visible: room.canSendState("m.room.power_levels")
@@ -74,10 +68,10 @@ Kirigami.ScrollablePage {
                              * translated strings. Done here because the model needs to be filled
                              * before the first delegate sets it's current index.
                              */
-                                    if (powerLevelModel.count == 0) {
+                            if (root.powerLevelModel.count == 0) {
-                                        powerLevelModel.append({"text":  i18n("Member (0)"), "powerLevel": 0});
+                                root.powerLevelModel.append({"text":  i18n("Member (0)"), "powerLevel": 0});
-                                        powerLevelModel.append({"text":  i18n("Moderator (50)"), "powerLevel": 50});
+                                root.powerLevelModel.append({"text":  i18n("Moderator (50)"), "powerLevel": 50});
-                                        powerLevelModel.append({"text":  i18n("Admin (100)"), "powerLevel": 100});
+                                root.powerLevelModel.append({"text":  i18n("Admin (100)"), "powerLevel": 100});
                             }
                             currentIndex = indexOfValue(powerLevel)
                         }
@@ -88,8 +82,8 @@ Kirigami.ScrollablePage {
                 }
             }
         }
-                MobileForm.FormDelegateSeparator { below: userListSearchCard }
+        FormCard.FormDelegateSeparator { below: userListSearchCard }
-                MobileForm.AbstractFormDelegate {
+        FormCard.AbstractFormDelegate {
             id: userListSearchCard
             Layout.fillWidth: true
             visible: room.canSendState("m.room.power_levels")
@@ -234,213 +228,217 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
 
-        MobileForm.FormHeader {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
         visible: room.canSendState("m.room.power_levels")
         title: i18n("Default permissions")
     }
-        MobileForm.FormCard {
+
-            Layout.fillWidth: true
+    FormCard.FormCard {
         visible: room.canSendState("m.room.power_levels")
-            contentItem: ColumnLayout {
+
-                spacing: 0
+        FormCard.FormComboBoxDelegate {
-                MobileForm.FormComboBoxDelegate {
             text: i18n("Default user power level")
             description: i18n("This is power level for all new users when joining the room")
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.defaultUserPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.defaultUserPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormComboBoxDelegate {
             text: i18n("Default power level to set the room state")
             description: i18n("This is used for all state events that do not have their own entry here")
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.statePowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.statePowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormComboBoxDelegate {
             text: i18n("Default power level to send messages")
             description: i18n("This is used for all message events that do not have their own entry here")
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.defaultEventPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.defaultEventPowerLevel = currentValue
         }
     }
-        }
 
-        MobileForm.FormHeader {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
         visible: room.canSendState("m.room.power_levels")
         title: i18n("Basic permissions")
     }
-        MobileForm.FormCard {
+
-            Layout.fillWidth: true
+    FormCard.FormCard {
         visible: room.canSendState("m.room.power_levels")
-            contentItem: ColumnLayout {
+
-                spacing: 0
+        FormCard.FormComboBoxDelegate {
-                MobileForm.FormComboBoxDelegate {
             text: i18n("Invite users")
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.invitePowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.invitePowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormComboBoxDelegate {
             text: i18n("Kick users")
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.kickPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.kickPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormComboBoxDelegate {
             text: i18n("Ban users")
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.banPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.banPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormComboBoxDelegate {
             text: i18n("Remove message sent by other users")
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.redactPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.redactPowerLevel = currentValue
         }
     }
-        }
 
-        MobileForm.FormHeader {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
         visible: room.canSendState("m.room.power_levels")
         title: i18n("Event permissions")
     }
-        MobileForm.FormCard {
+
-            Layout.fillWidth: true
+    FormCard.FormCard {
         visible: room.canSendState("m.room.power_levels")
-            contentItem: ColumnLayout {
+
-                spacing: 0
+        FormCard.FormComboBoxDelegate {
-                MobileForm.FormComboBoxDelegate {
             text: i18n("Change user permissions")
             description: "m.room.power_levels"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.powerLevelPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.powerLevelPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Change the room name")
             description: "m.room.name"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.namePowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.namePowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Change the room avatar")
             description: "m.room.avatar"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: roo.tpowerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.avatarPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.avatarPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Change the room canonical alias")
             description: "m.room.canonical_alias"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.canonicalAliasPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.canonicalAliasPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Change the room topic")
             description: "m.room.topic"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.topicPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.topicPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Enable encryption for the room")
             description: "m.room.encryption"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.encryptionPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.encryptionPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Change the room history visibility")
             description: "m.room.history_visibility"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.historyVisibilityPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.historyVisibilityPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Set pinned events")
             description: "m.room.pinned_events"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.pinnedEventsPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.pinnedEventsPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Upgrade the room")
             description: "m.room.tombstone"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.tombstonePowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.tombstonePowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Set the room server access control list (ACL)")
             description: "m.room.server_acl"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.serverAclPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.serverAclPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             visible: room.isSpace
             text: i18n("Set the children of this space")
             description: "m.space.child"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.spaceChildPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.spaceChildPowerLevel = currentValue
         }
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             text: i18n("Set the parent space of this room")
             description: "m.space.parent"
             textRole: "text"
             valueRole: "powerLevel"
-                    model: powerLevelModel
+            model: root.powerLevelModel
             Component.onCompleted: currentIndex = indexOfValue(room.spaceChildPowerLevel)
             onCurrentValueChanged: if(room.canSendState("m.room.power_levels")) room.spaceParentPowerLevel = currentValue
         }
     }
 }
-    }
-}

src/qml/RoomSettings/PushNotification.qml

@@ -6,31 +6,24 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: root
 
     property NeoChatRoom room
 
     title: i18nc('@title:window', 'Notifications')
-    topPadding: 0
+
-    leftPadding: 0
+    FormCard.FormHeader {
-    rightPadding: 0
-    ColumnLayout {
-        spacing: 0
-        MobileForm.FormHeader {
-            Layout.fillWidth: true
         title: i18n("Room notifications setting")
     }
-        MobileForm.FormCard {
+
-            Layout.fillWidth: true
+    FormCard.FormCard {
-            contentItem: ColumnLayout {
+        FormCard.FormRadioDelegate {
-                spacing: 0
-                MobileForm.FormRadioDelegate {
             text: i18n("Follow global setting")
             checked: room.pushNotificationState === PushNotificationState.Default
             enabled: room.pushNotificationState !== PushNotificationState.Unknown
@@ -38,7 +31,7 @@ Kirigami.ScrollablePage {
                 room.pushNotificationState = PushNotificationState.Default
             }
         }
-                MobileForm.FormRadioDelegate {
+        FormCard.FormRadioDelegate {
             text: i18nc("As in 'notify for all messages'","All")
             checked: room.pushNotificationState === PushNotificationState.All
             enabled: room.pushNotificationState !== PushNotificationState.Unknown
@@ -46,7 +39,7 @@ Kirigami.ScrollablePage {
                 room.pushNotificationState = PushNotificationState.All
             }
         }
-                MobileForm.FormRadioDelegate {
+        FormCard.FormRadioDelegate {
             text: i18nc("As in 'notify when the user is mentioned or the message contains a set keyword'","@Mentions and Keywords")
             checked: room.pushNotificationState === PushNotificationState.MentionKeyword
             enabled: room.pushNotificationState !== PushNotificationState.Unknown
@@ -54,7 +47,7 @@ Kirigami.ScrollablePage {
                 room.pushNotificationState = PushNotificationState.MentionKeyword
             }
         }
-                MobileForm.FormRadioDelegate {
+        FormCard.FormRadioDelegate {
             text: i18nc("As in 'do not notify for any messages'","Off")
             checked: room.pushNotificationState === PushNotificationState.Mute
             enabled: room.pushNotificationState !== PushNotificationState.Unknown
@@ -63,17 +56,12 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
-
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Keywords")
     }
+
+    FormCard.FormCard {
         Repeater {
             model: KSortFilterProxyModel {
                 sourceModel: Controller.pushRuleModel
@@ -87,7 +75,8 @@ Kirigami.ScrollablePage {
 
             delegate: ruleDelegate
         }
-                MobileForm.AbstractFormDelegate {
+
+        FormCard.AbstractFormDelegate {
             Layout.fillWidth: true
 
             contentItem : RowLayout {
@@ -116,7 +105,6 @@ Kirigami.ScrollablePage {
                     id: addButton
 
                     text: i18n("Add keyword")
-                            Accessible.name: text
                     icon.name: "list-add"
                     display: QQC2.AbstractButton.IconOnly
                     enabled: NotificationsManager.keywordNotificationAction !== PushNotificationAction.Unknown
@@ -126,18 +114,15 @@ Kirigami.ScrollablePage {
                         keywordAddField.text = ""
                     }
 
-                            QQC2.ToolTip {
+                    QQC2.ToolTip.text: text
-                                text: addButton.text
+                    QQC2.ToolTip.visible: hovered
-                                delay: Kirigami.Units.toolTipDelay
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-                            }
-                        }
-                    }
                 }
             }
         }
     }
 
-    Component {
+    data: Component {
         id: ruleDelegate
         NotificationRuleItem {
             onDeleteRule: {

src/qml/Settings/About.qml

@@ -4,10 +4,10 @@
 
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.15 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.neochat 1.0
 
-MobileForm.AboutPage {
+FormCard.AboutPage {
     title: i18nc("@title:window", "About NeoChat")
     aboutData: About
 }

src/qml/Settings/AboutKDE.qml

@@ -1,8 +1,8 @@
 // SPDX-FileCopyrightText: 2023 Joshua Goins <josh@redstrate.com>
 // SPDX-License-Identifier: LGPL-2.0-or-later
 
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 
-MobileForm.AboutKDE {
+FormCard.AboutKDE {
     title: i18nc("@title:window", "About KDE")
 }

src/qml/Settings/AppearanceSettingsPage.qml

@@ -7,27 +7,25 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
-import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
+import org.kde.kirigamiaddons.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
+    id: root
+
     title: i18nc("@title:window", "Appearance")
-    topPadding: 0
+
-    leftPadding: 0
+    FormCard.FormHeader {
-    rightPadding: 0
-    ColumnLayout {
-        spacing: 0
-        MobileForm.FormHeader {
         Layout.fillWidth: true
         title: i18n("General theme")
     }
-        MobileForm.FormCard {
+
+    FormCard.FormCard {
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
+
-            spacing: 0
+        FormCard.AbstractFormDelegate {
-                MobileForm.AbstractFormDelegate {
             id: timelineModeSetting
             Layout.fillWidth: true
             background: Item {}
@@ -202,9 +200,9 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator { below: compactRoomListDelegate }
+        FormCard.FormDelegateSeparator { below: compactRoomListDelegate }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             id: compactRoomListDelegate
             text: i18n("Use compact room list")
             checked: Config.compactRoomList
@@ -214,7 +212,7 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator { above: compactRoomListDelegate ; below: colorSchemeDelegate.item ; visible: colorSchemeDelegate.visible }
+        FormCard.FormDelegateSeparator { above: compactRoomListDelegate ; below: colorSchemeDelegate.item ; visible: colorSchemeDelegate.visible }
 
         Loader {
             id: colorSchemeDelegate
@@ -223,14 +221,12 @@ Kirigami.ScrollablePage {
             Layout.fillWidth: true
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
+        Layout.topMargin: Kirigami.Units.largeSpacing * 2
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
+
-                spacing: 0
+        FormCard.FormCheckDelegate {
-                MobileForm.FormCheckDelegate {
             id: showFancyEffectsDelegate
             text: i18n("Show fancy effects in chat")
             checked: Config.showFancyEffects
@@ -241,9 +237,9 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator { above: showFancyEffectsDelegate ; below: hasWindowSystemDelegate }
+        FormCard.FormDelegateSeparator { above: showFancyEffectsDelegate ; below: hasWindowSystemDelegate }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             id: hasWindowSystemDelegate
             visible: Controller.hasWindowSystem
             text: i18n("Use transparent chat page")
@@ -255,9 +251,9 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator { above: hasWindowSystemDelegate; below: transparencyDelegate }
+        FormCard.FormDelegateSeparator { above: hasWindowSystemDelegate; below: transparencyDelegate }
 
-                MobileForm.AbstractFormDelegate {
+        FormCard.AbstractFormDelegate {
             id: transparencyDelegate
             Layout.fillWidth: true
             visible: Controller.hasWindowSystem && Config.blur
@@ -291,9 +287,9 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator { above: transparencyDelegate; below: showLocalMessagesOnRightDelegate; visible: transparencyDelegate.visible }
+        FormCard.FormDelegateSeparator { above: transparencyDelegate; below: showLocalMessagesOnRightDelegate; visible: transparencyDelegate.visible }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             id: showLocalMessagesOnRightDelegate
             text: i18n("Show your messages on the right")
             checked: Config.showLocalMessagesOnRight
@@ -304,9 +300,9 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator { above: showLocalMessagesOnRightDelegate; below: showLinkPreviewDelegate }
+        FormCard.FormDelegateSeparator { above: showLocalMessagesOnRightDelegate; below: showLinkPreviewDelegate }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             id: showLinkPreviewDelegate
             text: i18n("Show links preview in the chat messages")
             checked: Config.showLinkPreview
@@ -316,17 +312,16 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
 
-        MobileForm.FormHeader {
+    FormCard.FormHeader {
         Layout.fillWidth: true
         title: i18n("Show Avatar")
     }
-        MobileForm.FormCard {
+
+    FormCard.FormCard {
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
+
-                spacing: 0
+        FormCard.FormCheckDelegate {
-                MobileForm.FormCheckDelegate {
             text: i18n("In chat")
             checked: Config.showAvatarInTimeline
             onToggled: {
@@ -336,7 +331,7 @@ Kirigami.ScrollablePage {
             enabled: !Config.isShowAvatarInTimelineImmutable
         }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             text: i18n("In sidebar")
             checked: Config.showAvatarInRoomDrawer
             enabled: !Config.isShowAvatarInRoomDrawerImmutable
@@ -347,5 +342,3 @@ Kirigami.ScrollablePage {
         }
     }
 }
-    }
-}

src/qml/Settings/DeviceDelegate.qml

@@ -7,11 +7,11 @@ 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.kirigamiaddons.formcard 1.0 as FormCard
 
 import org.kde.neochat 1.0
 
-MobileForm.AbstractFormDelegate {
+FormCard.AbstractFormDelegate {
     id: deviceDelegate
 
     required property string id

src/qml/Settings/DevicesPage.qml

@@ -7,23 +7,17 @@ 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.kirigamiaddons.formcard 1.0 as FormCard
 
 import org.kde.neochat 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
+    id: root
+
     title: i18n("Devices")
 
     property alias connection: devicesModel.connection
 
-    leftPadding: 0
-    rightPadding: 0
-
-    DevicesModel {
-        id: devicesModel
-    }
-
-    ColumnLayout {
     DevicesCard {
         title: i18n("This Device")
         type: DevicesModel.This
@@ -45,7 +39,7 @@ Kirigami.ScrollablePage {
         showVerifyButton: false
     }
 
-        MobileForm.AbstractFormDelegate {
+    FormCard.AbstractFormDelegate {
         Layout.fillWidth: true
         visible: Controller.activeConnection && devicesModel.count === 0 // We can assume 0 means loading since there is at least one device
         contentItem: Kirigami.LoadingPlaceholder { }
@@ -59,28 +53,35 @@ Kirigami.ScrollablePage {
         type: Kirigami.MessageType.Information
         visible: !Controller.activeConnection
     }
-    }
 
-    Kirigami.OverlaySheet {
+    data: [
+        DevicesModel {
+            id: devicesModel
+        },
+        Kirigami.PromptDialog {
             id: passwordSheet
 
             property string deviceId
 
+            parent: applicationWindow().overlay
             title: i18n("Remove device")
-        Kirigami.FormLayout {
+            standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
-            QQC2.TextField {
+
-                id: passwordField
+            leftPadding: 0
-                Kirigami.FormData.label: i18n("Password:")
+            rightPadding: 0
-                echoMode: TextInput.Password
+            topPadding: 0
-            }
+            bottomPadding: 0
-            QQC2.Button {
+
-                text: i18n("Confirm")
+            onAccepted: {
-                onClicked: {
                 devicesModel.logout(passwordSheet.deviceId, passwordField.text)
                 passwordField.text = ""
                 passwordSheet.close()
             }
+            FormCard.FormTextFieldDelegate {
+                id: passwordField
+                label: i18n("Password:")
+                echoMode: TextInput.Password
             }
         }
-    }
+    ]
 }

src/qml/Settings/NetworkProxyPage.qml

@@ -6,29 +6,24 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 
 import org.kde.neochat 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
-    title: i18nc("@title:window", "General")
+    id: root
+
     property int currentType
     property bool proxyConfigChanged: false
 
-    topPadding: 0
+    title: i18nc("@title:window", "General")
-    leftPadding: 0
+
-    rightPadding: 0
+    FormCard.FormHeader {
-    ColumnLayout {
-        spacing: 0
-        MobileForm.FormHeader {
-            Layout.fillWidth: true
         title: i18n("Network Proxy")
     }
-        MobileForm.FormCard {
+
-            Layout.fillWidth: true
+    FormCard.FormCard {
-            contentItem: ColumnLayout {
+        FormCard.FormRadioDelegate {
-                spacing: 0
-                MobileForm.FormRadioDelegate {
             text: i18n("System Default")
             checked: currentType === 0
             enabled: !Config.isProxyTypeImmutable
@@ -36,7 +31,7 @@ Kirigami.ScrollablePage {
                 currentType = 0
             }
         }
-                MobileForm.FormRadioDelegate {
+        FormCard.FormRadioDelegate {
             text: i18n("HTTP")
             checked: currentType === 1
             enabled: !Config.isProxyTypeImmutable
@@ -44,7 +39,7 @@ Kirigami.ScrollablePage {
                 currentType = 1
             }
         }
-                MobileForm.FormRadioDelegate {
+        FormCard.FormRadioDelegate {
             text: i18n("Socks5")
             checked: currentType === 2
             enabled: !Config.isProxyTypeImmutable
@@ -53,17 +48,13 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
 
-        MobileForm.FormHeader {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
         title: i18n("Proxy Settings")
     }
-        MobileForm.FormCard {
+
-            Layout.fillWidth: true
+    FormCard.FormCard {
-            contentItem: ColumnLayout {
+        FormCard.FormTextFieldDelegate {
-                spacing: 0
-                MobileForm.FormTextFieldDelegate {
             id: hostField
             label: i18n("Host")
             text: Config.proxyHost
@@ -72,7 +63,10 @@ Kirigami.ScrollablePage {
                 proxyConfigChanged = true
             }
         }
-                MobileForm.FormSpinBoxDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormSpinBoxDelegate {
             id: portField
             label: i18n("Port")
             value: Config.proxyPort
@@ -85,7 +79,10 @@ Kirigami.ScrollablePage {
                 proxyConfigChanged = true
             }
         }
-                MobileForm.FormTextFieldDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextFieldDelegate {
             id: userField
             label: i18n("User")
             text: Config.proxyUser
@@ -94,7 +91,10 @@ Kirigami.ScrollablePage {
                 proxyConfigChanged = true
             }
         }
-                MobileForm.FormTextFieldDelegate {
+
+        FormCard.FormDelegateSeparator {}
+
+        FormCard.FormTextFieldDelegate {
             id: passwordField
             label: i18n("Password")
             text: Config.proxyPassword
@@ -105,8 +105,6 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
-    }
 
     footer: QQC2.ToolBar {
         height: visible ? implicitHeight : 0