Unify look of scrolling setting page

* Add frame on desktop
* Remove frame on mobile
* Use actions.main when needed on mobile
* Don't push a new setting page on mobile

imports/NeoChat/Page/AccountsPage.qml

@@ -11,10 +11,37 @@ import org.kde.kirigami 2.15 as Kirigami
 import org.kde.neochat 1.0
 import NeoChat.Dialog 1.0
 
-Kirigami.ScrollablePage {
+Kirigami.Page {
     title: i18n("Accounts")
 
+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+
+    actions.main: Kirigami.Action {
+        text: i18n("Add an account")
+        icon.name: "list-add-user"
+        onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+        visible: !pageSettingStack.wideMode
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
+        }
+
+        Controls.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
             ListView {
+                clip: true
                 model: AccountListModel { }
                 delegate: Kirigami.SwipeListItem {
                     leftPadding: 0
@@ -56,6 +83,21 @@ Kirigami.ScrollablePage {
                     ]
                 }
             }
+        }
+
+
+        RowLayout {
+            Item {
+                Layout.fillWidth: true
+            }
+            Controls.Button {
+                visible: pageSettingStack.wideMode
+                text: i18n("Add an account")
+                icon.name: "list-add-user"
+                onClicked: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+            }
+        }
+    }
 
     Connections {
         target: Controller
@@ -73,12 +115,6 @@ Kirigami.ScrollablePage {
         }
     }
 
-    actions.main: Kirigami.Action {
-        text: i18n("Add an account")
-        iconName: "list-add-user"
-        onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
-    }
-
     Component {
         id: openFileDialog
 

imports/NeoChat/Page/DevicesPage.qml

@@ -9,13 +9,42 @@ import org.kde.kirigami 2.15 as Kirigami
 
 import org.kde.neochat 1.0
 
-Kirigami.ScrollablePage {
+Kirigami.Page {
     title: i18n("Devices")
 
+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
+        }
+
+        Controls.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+            Layout.fillWidth: true
+            Layout.fillHeight: true
             ListView {
+                clip: true
                 model: DevicesModel {
                     id: devices
                 }
+
+                Kirigami.PlaceholderMessage {
+                    visible: parent.model.count === 0 // We can assume 0 means loading since there is at least one device
+                    anchors.centerIn: parent
+                    text: i18n("Loading")
+                    Controls.BusyIndicator {
+                        running: parent.visible
+                    }
+                }
+
                 delegate: Kirigami.SwipeListItem {
                     leftPadding: 0
                     rightPadding: 0
@@ -48,6 +77,8 @@ Kirigami.ScrollablePage {
                     ]
                 }
             }
+        }
+    }
 
     Kirigami.OverlaySheet {
         id: passwordSheet

imports/NeoChat/Page/RoomListPage.qml

@@ -17,6 +17,8 @@ import NeoChat.Menu 1.0
 Kirigami.ScrollablePage {
     id: page
 
+    title: i18n("Rooms")
+
     property var enteredRoom
     property bool collapsedMode: Config.roomListPageWidth === applicationWindow().collapsedPageWidth && applicationWindow().shouldUseSidebars
 

imports/NeoChat/Page/SettingsPage.qml

@@ -36,7 +36,9 @@ Kirigami.ScrollablePage {
             topPadding: 0
             Kirigami.Theme.colorSet: Kirigami.Theme.View
             ListView {
-                Component.onCompleted: actions[0].trigger();
+                Component.onCompleted: if (pageSettingStack.wideMode) {
+                    actions[0].trigger();
+                }
                 property list<Kirigami.Action> actions: [
                     Kirigami.Action {
                         text: i18n("General")
@@ -58,6 +60,11 @@ Kirigami.ScrollablePage {
                         icon.name: "preferences-desktop-emoticons"
                         onTriggered: pageSettingStack.push("qrc:/imports/NeoChat/Settings/Emoticons.qml")
                     },
+                    Kirigami.Action {
+                        text: i18n("Devices")
+                        iconName: "network-connect"
+                        onTriggered: pageSettingStack.push("qrc:/imports/NeoChat/Page/DevicesPage.qml")
+                    },
                     Kirigami.Action {
                         text: i18n("About NeoChat")
                         icon.name: "help-about"

imports/NeoChat/Settings/Emoticons.qml

@@ -13,64 +13,42 @@ import NeoChat.Settings 1.0
 import NeoChat.Component 1.0 as Components
 import NeoChat.Dialog 1.0
 
-Kirigami.ScrollablePage {
+Kirigami.Page {
-    Component {
-        id: openFileDialog
 
-        OpenFileDialog {
+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
-            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
-        }
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+
+    ColumnLayout {
+        id: column
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
         }
 
+        QQC2.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
             ListView {
-        header: QQC2.ToolBar {
+                clip: true
-            width: parent.width
-            contentItem: RowLayout {
-                Item {
-                    Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
-                }
-                QQC2.TextField {
-                    id: emojiField
-                    placeholderText: i18n("new_emoji_name_here")
-
-                    validator: RegularExpressionValidator {
-                        regularExpression: /[a-zA-Z_0-9]*/
-                    }
-                }
-                QQC2.Button {
-                    text: i18n("Add Emoji...")
-
-                    enabled: emojiField.text != ""
-                    property var fileDialog: null
-
-                    onClicked: {
-                        if (this.fileDialog != null) {
-                            return;
-                        }
-
-                        this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
-
-                        this.fileDialog.chosen.connect((url) => {
-                            emojiModel.addEmoji(emojiField.text, url)
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.onRejected.connect(() => {
-                            rej()
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.open()
-                    }
-                }
-                Item {
-                    Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
-                }
-            }
-        }
                 model: CustomEmojiModel {
                     id: emojiModel
 
                     connection: Controller.activeConnection
                 }
+
+                Kirigami.PlaceholderMessage {
+                    anchors.centerIn: parent
+                    text: i18n("No custom inline stickers found")
+                    visible: parent.model.count === 0
+                }
+
                 delegate: Kirigami.BasicListItem {
                     id: del
 
@@ -101,4 +79,75 @@ Kirigami.ScrollablePage {
                     }
                 }
             }
+        }
+
+        Loader {
+            active: pageSettingStack.wideMode
+            sourceComponent: addEmojiComponent
+            Layout.fillWidth: true
+        }
+    }
+
+    footer: QQC2.ToolBar {
+        id: toolbar
+        width: parent.width
+        visible: !pageSettingStack.wideMode
+        height: visible ? implicitHeight : 0
+        contentItem: Loader {
+            active: !pageSettingStack.wideMode
+            sourceComponent: addEmojiComponent
+        }
+    }
+
+    Component {
+        id: openFileDialog
+
+        OpenFileDialog {
+            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
+        }
+    }
+
+    property Component addEmojiComponent: RowLayout {
+        Item {
+            Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
+        }
+
+        QQC2.TextField {
+            id: emojiField
+            placeholderText: i18n("new_emoji_name_here")
+
+            validator: RegularExpressionValidator {
+                regularExpression: /[a-zA-Z_0-9]*/
+            }
+        }
+
+        QQC2.Button {
+            text: i18n("Add Emoji...")
+
+            enabled: emojiField.text != ""
+            property var fileDialog: null
+
+            onClicked: {
+                if (this.fileDialog != null) {
+                    return;
+                }
+
+                this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
+
+                this.fileDialog.chosen.connect((url) => {
+                    emojiModel.addEmoji(emojiField.text, url)
+                    this.fileDialog = null
+                })
+                this.fileDialog.onRejected.connect(() => {
+                    rej()
+                    this.fileDialog = null
+                })
+                this.fileDialog.open()
+            }
+        }
+
+        Item {
+            Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
+        }
+    }
 }

qml/main.qml

@@ -258,12 +258,6 @@ Kirigami.ApplicationWindow {
                 shortcut: StandardKey.New
                 enabled: pageStack.layers.currentItem.title !== i18n("Start a Chat") && Controller.accountCount > 0
             },
-            Kirigami.Action {
-                text: i18n("Devices")
-                iconName: "network-connect"
-                onTriggered: pushReplaceLayer("qrc:/imports/NeoChat/Page/DevicesPage.qml")
-                enabled: pageStack.layers.currentItem.title !== i18n("Devices") && Controller.accountCount > 0
-            },
             Kirigami.Action {
                 text: i18n("Settings")
                 icon.name: "settings-configure"