Switch to the new FormCard API for most of the user interface

launcher/ui/Pages/LoginPage.qml

@@ -6,7 +6,7 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import zone.xiv.astra 1.0
 
 Controls.Control {
@@ -51,18 +51,13 @@ Controls.Control {
 
     contentItem: ColumnLayout {
         width: parent.width
-        MobileForm.FormCard {
+
-            Layout.topMargin: Kirigami.Units.largeSpacing
+        FormCard.FormCard {
             Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
 
-                MobileForm.FormCardHeader {
+            FormCard.FormButtonDelegate {
-                    title: i18n("Current Profile")
+                text: i18n("Current Profile")
-                }
+                description: page.profile.name
-
-                MobileForm.FormButtonDelegate {
-                    text: page.profile.name
 
                 Controls.Menu {
                     id: profileMenu
@@ -88,20 +83,13 @@ Controls.Control {
                 onClicked: profileMenu.popup()
             }
         }
-        }
 
-        MobileForm.FormCard {
+        FormCard.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
 
-                MobileForm.FormCardHeader {
+            FormCard.FormButtonDelegate {
-                    title: i18n("Login")
+                text: i18n("Current Account")
-                }
+                description: page.profile.account.name
-
-                MobileForm.FormButtonDelegate {
-                    text: page.profile.account.name
 
                 leading: Kirigami.Avatar
                 {
@@ -136,20 +124,20 @@ Controls.Control {
                 onClicked: accountMenu.popup()
             }
 
-                MobileForm.FormDelegateSeparator {
+            FormCard.FormDelegateSeparator {
             }
 
-                MobileForm.FormTextFieldDelegate {
+            FormCard.FormTextFieldDelegate {
                 id: usernameField
                 label: page.profile.account.isSapphire ? i18n("Username") : i18n("Square Enix ID")
                 text: page.profile.account.name
                 enabled: false
             }
 
-                MobileForm.FormDelegateSeparator {
+            FormCard.FormDelegateSeparator {
             }
 
-                MobileForm.FormTextFieldDelegate {
+            FormCard.FormTextFieldDelegate {
                 id: passwordField
                 label: page.profile.account.isSapphire ? i18n("Password") : i18n("Square Enix Password")
                 echoMode: TextInput.Password
@@ -164,19 +152,19 @@ Controls.Control {
                 text: page.profile.account.rememberPassword ? "abcdefg" : ""
             }
 
-                MobileForm.FormDelegateSeparator {
+            FormCard.FormDelegateSeparator {
             }
 
-                MobileForm.FormTextFieldDelegate {
+            FormCard.FormTextFieldDelegate {
                 id: otpField
                 label: i18n("One-time Password")
                 visible: page.profile.account.useOTP
                 onAccepted: loginButton.clicked()
             }
 
-                MobileForm.FormDelegateSeparator {}
+            FormCard.FormDelegateSeparator {}
 
-                MobileForm.FormButtonDelegate {
+            FormCard.FormButtonDelegate {
                 id: loginButton
 
                 text: i18n("Log In")
@@ -188,11 +176,11 @@ Controls.Control {
                 }
             }
 
-                MobileForm.FormDelegateSeparator {
+            FormCard.FormDelegateSeparator {
                 visible: forgotPasswordButton.visible
             }
 
-                MobileForm.FormButtonDelegate {
+            FormCard.FormButtonDelegate {
                 id: forgotPasswordButton
 
                 text: i18n("Forgot ID or Password")
@@ -202,7 +190,6 @@ Controls.Control {
             }
         }
     }
-    }
 
     Component.onCompleted: passwordField.forceActiveFocus()
 }

launcher/ui/Pages/NewsPage.qml

@@ -6,7 +6,7 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import QtGraphicalEffects 1.0
 import zone.xiv.astra 1.0
 
@@ -83,25 +83,24 @@ Controls.Control {
             }
         }
 
-        MobileForm.FormCard {
+        FormCard.FormHeader {
-            Layout.topMargin: Kirigami.Units.largeSpacing
+            title: i18n("News")
+
+            Layout.fillWidth: true
+            maximumWidth: layout.maximumWidth
+        }
+
+        FormCard.FormCard {
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
             maximumWidth: layout.maximumWidth
             visible: LauncherCore.headline !== null
 
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
-                    title: i18n("News")
-                }
-
             Repeater {
                 model: LauncherCore.headline !== null ? LauncherCore.headline.news : undefined
 
-                    MobileForm.FormButtonDelegate {
+                FormCard.FormButtonDelegate {
                     text: modelData.title
                     description: Qt.formatDate(modelData.date)
 
@@ -116,32 +115,30 @@ Controls.Control {
                 }
             }
 
-                MobileForm.FormTextDelegate {
+            FormCard.FormTextDelegate {
                 description: i18n("No news.")
                 visible: LauncherCore.headline !== null ? LauncherCore.headline.failedToLoad : false
             }
         }
+
+        FormCard.FormHeader {
+            title: i18n("Topics")
+
+            Layout.fillWidth: true
+            maximumWidth: layout.maximumWidth
         }
 
-        MobileForm.FormCard {
+        FormCard.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
             maximumWidth: layout.maximumWidth
             visible: LauncherCore.headline !== null
 
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
-                    title: i18n("Topics")
-                }
-
             Repeater {
                 model: LauncherCore.headline !== null ? LauncherCore.headline.topics : undefined
 
-                    MobileForm.FormButtonDelegate {
+                FormCard.FormButtonDelegate {
                     text: modelData.title
                     description: Qt.formatDate(modelData.date)
 
@@ -157,12 +154,11 @@ Controls.Control {
                 }
             }
 
-                MobileForm.FormTextDelegate {
+            FormCard.FormTextDelegate {
                 description: i18n("No topics.")
                 visible: LauncherCore.headline !== null ? LauncherCore.headline.failedToLoad : false
             }
         }
-        }
 
         Item {
             Layout.fillHeight: true

launcher/ui/Settings/AccountSettings.qml

@@ -6,58 +6,67 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import zone.xiv.astra 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: page
 
     property var account
 
     title: i18n("Account Settings")
 
-    ColumnLayout {
+    FormCard.FormHeader {
-        width: parent.width
-
-        MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("General")
     }
 
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
+        FormCard.FormTextFieldDelegate {
+            id: usernameDelegate
 
-                MobileForm.FormTextFieldDelegate {
             label: i18n("Username")
             text: page.account.name
             onTextChanged: page.account.name = text
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: usernameDelegate
+            below: languageDelegate
+        }
+
+        FormCard.FormComboBoxDelegate {
+            id: languageDelegate
 
-                MobileForm.FormComboBoxDelegate {
             text: i18n("Language")
             model: ["Japanese", "English", "German", "French"]
             currentIndex: page.account.language
             onCurrentIndexChanged: page.account.language = currentIndex
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: languageDelegate
+            below: accountTypeDelegate
+        }
+
+        FormCard.FormComboBoxDelegate {
+            id: accountTypeDelegate
 
-                MobileForm.FormComboBoxDelegate {
             text: i18n("Account type")
             model: ["Square Enix", "Sapphire"]
             currentIndex: page.account.isSapphire ? 1 : 0
             onCurrentIndexChanged: page.account.isSapphire = (currentIndex === 1)
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: accountTypeDelegate
+            below: licenseField
+        }
 
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             id: licenseField
+
             text: i18n("License")
             description: i18n("If the account holds multiple licenses, choose the preferred one.")
             model: ["Windows", "Steam", "macOS"]
@@ -66,11 +75,14 @@ Kirigami.ScrollablePage {
             visible: !page.account.isSapphire
         }
 
-                MobileForm.FormDelegateSeparator {
+        FormCard.FormDelegateSeparator {
+            above: licenseField
+            below: freeTrialField
+
             visible: licenseField.visible
         }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             id: freeTrialField
             text: i18n("Free trial")
             checked: page.account.isFreeTrial
@@ -78,11 +90,14 @@ Kirigami.ScrollablePage {
             visible: !page.account.isSapphire
         }
 
-                MobileForm.FormDelegateSeparator {
+        FormCard.FormDelegateSeparator {
+            above: freeTrialField
+            below: needOTPField
+
             visible: freeTrialField.visible
         }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             id: needOTPField
 
             text: i18n("Needs a one-time password")
@@ -91,11 +106,16 @@ Kirigami.ScrollablePage {
             visible: !page.account.isSapphire
         }
 
-                MobileForm.FormDelegateSeparator {
+        FormCard.FormDelegateSeparator {
+            above: needOTPField
+            below: lobbyURLDelegate
+
             visible: needOTPField.visible
         }
 
-                MobileForm.FormTextFieldDelegate {
+        FormCard.FormTextFieldDelegate {
+            id: lobbyURLDelegate
+
             label: i18n("Lobby URL")
             text: page.account.lobbyUrl
             onTextChanged: page.account.lobbyUrl = text
@@ -103,9 +123,14 @@ Kirigami.ScrollablePage {
             placeholderText: "neolobby0X.ffxiv.com"
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: lobbyURLDelegate
+            below: lodestoneDelegate
+        }
+
+        FormCard.FormButtonDelegate {
+            id: lodestoneDelegate
 
-                MobileForm.FormButtonDelegate {
             text: i18n("Set Lodestone Character")
             description: i18n("Associate a character's avatar with this account.")
             icon.name: "actor"
@@ -127,27 +152,28 @@ Kirigami.ScrollablePage {
             onClicked: lodestoneDialog.open()
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Login")
     }
 
-                MobileForm.FormCheckDelegate {
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
+        FormCard.FormCheckDelegate {
+            id: rememberPasswordDelegate
+
             text: i18n("Remember password")
             checked: page.account.rememberPassword
             onCheckedChanged: page.account.rememberPassword = checked
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: rememberPasswordDelegate
+            below: generateOTPField
+        }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             id: generateOTPField
 
             text: i18n("Automatically generate one-time passwords")
@@ -157,11 +183,16 @@ Kirigami.ScrollablePage {
             visible: !page.account.isSapphire
         }
 
-                MobileForm.FormDelegateSeparator {
+        FormCard.FormDelegateSeparator {
+            above: generateOTPField
+            below: otpSecretDelegate
+
             visible: generateOTPField.visible
         }
 
-                MobileForm.FormButtonDelegate {
+        FormCard.FormButtonDelegate {
+            id: otpSecretDelegate
+
             text: i18n("Enter OTP Secret")
             icon.name: "list-add-symbolic"
             enabled: page.account.rememberOTP
@@ -183,15 +214,12 @@ Kirigami.ScrollablePage {
             onClicked: otpDialog.open()
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormCard {
         Layout.topMargin: Kirigami.Units.largeSpacing
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
 
-                MobileForm.FormButtonDelegate {
+        FormCard.FormButtonDelegate {
             text: i18n("Delete Account")
             description: !enabled ? i18n("Cannot delete the only account.") : ""
             icon.name: "delete"
@@ -202,6 +230,4 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
-    }
 }

launcher/ui/Settings/CompatibilityToolSetup.qml

@@ -6,35 +6,34 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import zone.xiv.astra 1.0
 
-Kirigami.Page {
+FormCard.FormCardPage {
     id: page
 
     property var installer: null
 
     title: i18n("Install Compatibility Tool")
 
-    ColumnLayout {
+    FormCard.FormHeader {
-        width: parent.width
-        MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Compatibility Tool")
     }
 
-                MobileForm.FormTextDelegate {
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
+        FormCard.FormTextDelegate {
             text: i18n("Press the button below to install the compatibility tool for Steam.")
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            below: installToolButton
+        }
+
+        FormCard.FormButtonDelegate {
+            id: installToolButton
 
-                MobileForm.FormButtonDelegate {
             text: i18n("Install Tool")
             icon.name: "install"
             onClicked: {
@@ -43,9 +42,14 @@ Kirigami.Page {
             }
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: installToolButton
+            below: removeToolButton
+        }
+
+        FormCard.FormButtonDelegate {
+            id: removeToolButton
 
-                MobileForm.FormButtonDelegate {
             text: i18n("Remove Tool")
             icon.name: "delete"
             onClicked: {
@@ -54,11 +58,8 @@ Kirigami.Page {
             }
         }
     }
-        }
-    }
 
-    Kirigami.PromptDialog {
+    property Kirigami.PromptDialog errorDialog: Kirigami.PromptDialog {
-        id: errorDialog
         title: i18n("Install error")
 
         showCloseButton: false
@@ -68,7 +69,7 @@ Kirigami.Page {
         onRejected: applicationWindow().pageStack.layers.pop()
     }
 
-    Connections {
+    data: Connections {
         enabled: page.installer !== null
         target: page.installer
 

launcher/ui/Settings/DeveloperSettings.qml

@@ -6,7 +6,7 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import zone.xiv.astra 1.0
 
 import "../Components"
@@ -16,40 +16,55 @@ Kirigami.ScrollablePage {
 
     title: i18n("Developer Settings")
 
-    ColumnLayout {
+    FormCard.FormCard {
-        width: parent.width
-
-        MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
+            id: keepPatchesDelegate
+
             text: i18n("Keep Patches")
             description: i18n("Do not delete patches after they're used. Astra will not redownload patch data, if found.")
             checked: LauncherCore.keepPatches
             onCheckedChanged: LauncherCore.keepPatches = checked
         }
 
-                MobileForm.FormTextFieldDelegate {
+        FormCard.FormDelegateSeparator {
+            above: keepPatchesDelegate
+            below: dalamudServerDelegate
+        }
+
+        FormCard.FormTextFieldDelegate {
+            id: dalamudServerDelegate
+
             label: i18n("Dalamud Distribution Server")
             text: LauncherCore.dalamudDistribServer
             onTextChanged: LauncherCore.dalamudDistribServer = text
         }
 
-                MobileForm.FormTextFieldDelegate {
+        FormCard.FormDelegateSeparator {
+            above: dalamudServerDelegate
+            below: mainServerDelegate
+        }
+
+        FormCard.FormTextFieldDelegate {
+            id: mainServerDelegate
+
             label: i18n("SE Main Server")
             text: LauncherCore.squareEnixServer
             onTextChanged: LauncherCore.squareEnixServer = text
         }
 
-                MobileForm.FormTextFieldDelegate {
+        FormCard.FormDelegateSeparator {
+            above: mainServerDelegate
+            below: loginServerDelegate
+        }
+
+        FormCard.FormTextFieldDelegate {
+            id: loginServerDelegate
+
             label: i18n("SE Login Server")
             text: LauncherCore.squareEnixLoginServer
             onTextChanged: LauncherCore.squareEnixLoginServer = text
         }
     }
-        }
-    }
 }

launcher/ui/Settings/GeneralSettings.qml

@@ -6,31 +6,28 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import zone.xiv.astra 1.0
 
-MobileForm.FormCard {
+FormCard.FormCard {
-    Layout.topMargin: Kirigami.Units.largeSpacing
+    FormCard.FormCheckDelegate {
-    Layout.fillWidth: true
+        id: closeAstraDelegate
-    contentItem: ColumnLayout {
-        spacing: 0
 
-        MobileForm.FormCardHeader {
-            title: i18n("General")
-        }
-
-        MobileForm.FormCheckDelegate {
         text: i18n("Close Astra when game is launched")
         checked: LauncherCore.closeWhenLaunched
         onCheckedChanged: LauncherCore.closeWhenLaunched = checked
     }
 
-        MobileForm.FormDelegateSeparator {}
+    FormCard.FormDelegateSeparator {
+        above: closeAstraDelegate
+        below: showNewsDelegate
+    }
+
+    FormCard.FormCheckDelegate {
+        id: showNewsDelegate
 
-        MobileForm.FormCheckDelegate {
         text: i18n("Enable and show news")
         checked: LauncherCore.showNews
         onCheckedChanged: LauncherCore.showNews = checked
     }
-    }
 }

launcher/ui/Settings/ProfileSettings.qml

@@ -6,64 +6,80 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import zone.xiv.astra 1.0
 
 import "../Components"
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: page
 
     property var profile
 
     title: i18n("Profile Settings")
 
-    ColumnLayout {
+    FormCard.FormHeader {
-        width: parent.width
-
-        MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("General")
     }
 
-                MobileForm.FormTextFieldDelegate {
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
+        FormCard.FormTextFieldDelegate {
+            id: nameDelegate
+
             label: i18n("Name")
             text: page.profile.name
             onTextChanged: page.profile.name = text
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: nameDelegate
+            below: gamePathDelegate
+        }
 
         FormFolderDelegate {
+            id: gamePathDelegate
+
             text: i18n("Game Path")
             folder: page.profile.gamePath
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: gamePathDelegate
+            below: directXDelegate
+        }
+
+        FormCard.FormComboBoxDelegate {
+            id: directXDelegate
 
-                MobileForm.FormComboBoxDelegate {
             text: i18n("DirectX Version")
             model: ["DirectX 11", "DirectX 9"]
             currentIndex: page.profile.directx9Enabled ? 1 : 0
             onCurrentIndexChanged: page.profile.directx9Enabled = (currentIndex === 1)
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: directXDelegate
+            below: encryptArgDelegate
+        }
+
+        FormCard.FormCheckDelegate {
+            id: encryptArgDelegate
 
-                MobileForm.FormCheckDelegate {
             text: i18n("Encrypt Game Arguments")
             checked: page.profile.argumentsEncrypted
             onCheckedChanged: page.profile.argumentsEncrypted = checked
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: encryptArgDelegate
+            below: enableWatchdogDelegate
+        }
+
+        FormCard.FormCheckDelegate {
+            id: enableWatchdogDelegate
 
-                MobileForm.FormCheckDelegate {
             text: i18n("Enable Watchdog")
             description: i18n("Gives real-time queue updates. X11 only.")
             checked: page.profile.watchdogEnabled
@@ -72,27 +88,25 @@ Kirigami.ScrollablePage {
             visible: false
         }
 
-                MobileForm.FormDelegateSeparator {
+        FormCard.FormDelegateSeparator {
             visible: false
         }
 
-                MobileForm.FormTextDelegate {
+        FormCard.FormTextDelegate {
             description: page.profile.expansionVersionText
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Wine")
     }
 
-                MobileForm.FormComboBoxDelegate {
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
+        FormCard.FormComboBoxDelegate {
+            id: wineTypeDelegate
+
             text: i18n("Wine Type")
             model: ["System", "Custom"]
             currentIndex: page.profile.wineType
@@ -100,50 +114,63 @@ Kirigami.ScrollablePage {
             enabled: !LauncherCore.isSteam
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: wineTypeDelegate
+            below: winePathDelegate
+        }
 
         FormFileDelegate {
+            id: winePathDelegate
+
             text: i18n("Wine Path")
             file: page.profile.winePath
             enabled: !LauncherCore.isSteam && page.profile.wineType !== Profile.System
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: winePathDelegate
+            below: winePrefixPathDelegate
+        }
 
         FormFolderDelegate {
+            id: winePrefixPathDelegate
+
             text: i18n("Wine Prefix Path")
             folder: page.profile.winePrefixPath
             enabled: !LauncherCore.isSteam
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: winePrefixPathDelegate
+        }
 
-                MobileForm.FormTextDelegate {
+        FormCard.FormTextDelegate {
             description: page.profile.wineVersionText
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Tools")
     }
 
-                MobileForm.FormCheckDelegate {
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
+        FormCard.FormCheckDelegate {
+            id: esyncDelegate
+
             text: i18n("Enable ESync")
             description: i18n("Could improve game performance, but requires a patched Wine and kernel.")
             checked: page.profile.esyncEnabled
             onCheckedChanged: page.profile.esyncEnabled = checked
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: esyncDelegate
+            below: gamemodeDelegate
+        }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
             text: i18n("Enable Gamescope")
             description: i18n("A micro-compositor that uses Wayland to create a nested session.\nIf you use fullscreen mode, it may improve input handling.")
             checked: page.profile.gamescopeEnabled
@@ -152,11 +179,11 @@ Kirigami.ScrollablePage {
             enabled: false
         }
 
-                MobileForm.FormDelegateSeparator {
+        FormCard.FormDelegateSeparator {
             visible: false
         }
 
-                MobileForm.FormButtonDelegate {
+        FormCard.FormButtonDelegate {
             text: i18n("Configure Gamescope...")
             icon.name: "configure"
             enabled: false
@@ -200,39 +227,44 @@ Kirigami.ScrollablePage {
             onClicked: gamescopeSettingsDialog.open()
         }
 
-                MobileForm.FormDelegateSeparator {
+        FormCard.FormDelegateSeparator {
             visible: false
         }
 
-                MobileForm.FormCheckDelegate {
+        FormCard.FormCheckDelegate {
+            id: gamemodeDelegate
+
             text: i18n("Enable Gamemode")
             description: i18n("A special game performance tool, that tunes your CPU scheduler among other things.")
             checked: page.profile.gamemodeEnabled
             onCheckedChanged: page.profile.gamemodeEnabled = checked
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Dalamud")
     }
 
-                MobileForm.FormCheckDelegate {
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
+        FormCard.FormCheckDelegate {
+            id: enableDalamudDelegate
+
             text: i18n("Enable Dalamud")
             description: i18n("Dalamud extends the game with useful plugins, but use at your own risk.")
             checked: page.profile.dalamudEnabled
             onCheckedChanged: page.profile.dalamudEnabled = checked
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: enableDalamudDelegate
+            below: dalamudChannelDelegate
+        }
+
+        FormCard.FormComboBoxDelegate {
+            id: dalamudChannelDelegate
 
-                MobileForm.FormComboBoxDelegate {
             text: i18n("Update Channel")
             model: ["Stable", "Staging", ".NET 5"]
             currentIndex: page.profile.dalamudChannel
@@ -240,46 +272,60 @@ Kirigami.ScrollablePage {
             enabled: page.profile.dalamudEnabled
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: dalamudChannelDelegate
+            below: dalamudInjectDelegate
+        }
+
+        FormCard.FormComboBoxDelegate {
+            id: dalamudInjectDelegate
 
-                MobileForm.FormComboBoxDelegate {
             text: i18n("Injection Method")
             description: "It shouldn't be nessecary to change this setting, unless you're running into issues injecting Dalamud."
             model: ["Entrypoint", "DLL Injection"]
             enabled: page.profile.dalamudEnabled
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: dalamudInjectDelegate
+            below: dalamudDelayDelegate
+        }
+
+        FormCard.FormSpinBoxDelegate {
+            id: dalamudDelayDelegate
 
-                MobileForm.FormSpinBoxDelegate {
             label: i18n("Injection Delay")
             enabled: page.profile.dalamudEnabled
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: dalamudDelayDelegate
+            below: dalamudOptOutDelegate
+        }
+
+        FormCard.FormCheckDelegate {
+            id: dalamudOptOutDelegate
 
-                MobileForm.FormCheckDelegate {
             text: i18n("Opt Out of Automatic Marketboard Collection")
             checked: page.profile.dalamudOptOut
             onCheckedChanged: page.profile.dalamudOptOut = checked
             enabled: page.profile.dalamudEnabled
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: dalamudOptOutDelegate
+        }
 
-                MobileForm.FormTextDelegate {
+        FormCard.FormTextDelegate {
             description: page.profile.dalamudVersionText
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormCard {
         Layout.topMargin: Kirigami.Units.largeSpacing
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
 
-                MobileForm.FormButtonDelegate {
+        FormCard.FormButtonDelegate {
             text: i18n("Delete Profile")
             description: !enabled ? i18n("Cannot delete the only profile.") : ""
             icon.name: "delete"
@@ -290,6 +336,4 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
-    }
 }

launcher/ui/Settings/SettingsPage.qml

@@ -6,33 +6,33 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import zone.xiv.astra 1.0
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: page
 
     title: i18n("Settings")
 
-    ColumnLayout {
+    FormCard.FormHeader {
-        width: parent.width
+        title: i18n("General")
+    }
 
-        GeneralSettings {}
+    GeneralSettings {
-
-        MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
+    }
-                spacing: 0
 
-                MobileForm.FormCardHeader {
+    FormCard.FormHeader {
         title: i18n("Profiles")
     }
 
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
         Repeater {
             model: LauncherCore.profileManager
 
-                    MobileForm.FormButtonDelegate {
+            FormCard.FormButtonDelegate {
                 required property var profile
 
                 text: profile.name
@@ -42,9 +42,13 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            below: addProfileButton
+        }
+
+        FormCard.FormButtonDelegate {
+            id: addProfileButton
 
-                MobileForm.FormButtonDelegate {
             text: i18n("Add Profile")
             icon.name: "list-add"
             onClicked: {
@@ -53,22 +57,18 @@ Kirigami.ScrollablePage {
             }
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Accounts")
     }
 
+    FormCard.FormCard {
+        Layout.fillWidth: true
+
         Repeater {
             model: LauncherCore.accountManager
 
-                    MobileForm.FormButtonDelegate {
+            FormCard.FormButtonDelegate {
                 required property var account
 
                 text: account.name
@@ -86,58 +86,75 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            below: addSquareEnixButton
+        }
+
+        FormCard.FormButtonDelegate {
+            id: addSquareEnixButton
 
-                MobileForm.FormButtonDelegate {
             text: i18n("Add Square Enix Account")
             icon.name: "list-add-symbolic"
             onClicked: pageStack.layers.push('qrc:/ui/Setup/AddSquareEnix.qml')
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: addSquareEnixButton
+            below: addSapphireButton
+        }
+
+        FormCard.FormButtonDelegate {
+            id: addSapphireButton
 
-                MobileForm.FormButtonDelegate {
             text: i18n("Add Sapphire Account")
             icon.name: "list-add-symbolic"
             onClicked: pageStack.layers.push('qrc:/ui/Setup/AddSapphire.qml')
         }
     }
-        }
 
-        MobileForm.FormCard {
+    FormCard.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
         Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-                Component {
-                    id: aboutPage
-                    MobileForm.AboutPage {
-                        aboutData: About
-                    }
-                }
 
-                MobileForm.FormButtonDelegate {
+        FormCard.FormButtonDelegate {
+            id: setupCompatToolButton
+
             text: i18n("Setup Compatibility Tool")
             icon.name: "install"
             onClicked: applicationWindow().pageStack.layers.push('qrc:/ui/Settings/CompatibilityToolSetup.qml')
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: setupCompatToolButton
+            below: developerSettingsButton
+        }
+
+        FormCard.FormButtonDelegate {
+            id: developerSettingsButton
 
-                MobileForm.FormButtonDelegate {
             text: i18n("Developer Settings")
             icon.name: "configure"
             onClicked: applicationWindow().pageStack.layers.push('qrc:/ui/Settings/DeveloperSettings.qml')
         }
 
-                MobileForm.FormDelegateSeparator {}
+        FormCard.FormDelegateSeparator {
+            above: developerSettingsButton
+            below: aboutButton
+        }
+
+        FormCard.FormButtonDelegate {
+            id: aboutButton
 
-                MobileForm.FormButtonDelegate {
             text: i18n("About Astra")
             icon.name: "help-about-symbolic"
+
+            Component {
+                id: aboutPage
+                FormCard.AboutPage {
+                    aboutData: About
+                }
+            }
+
             onClicked: applicationWindow().pageStack.layers.push(aboutPage)
         }
     }
-        }
-    }
 }