Move QML files to src/qml and don't use internal qml modules

src/CMakeLists.txt

@@ -44,7 +44,7 @@ add_library(neochat STATIC
 
 add_executable(neochat-app
     main.cpp
-    ../res.qrc
+    res.qrc
 )
 
 target_include_directories(neochat-app PRIVATE ${CMAKE_BINARY_DIR})
@@ -76,11 +76,11 @@ if(NOT ANDROID)
 endif()
 
 if (NOT ANDROID AND NOT WIN32 AND NOT APPLE)
-    target_sources(neochat-app PRIVATE ../res_desktop.qrc)
+    target_sources(neochat-app PRIVATE res_desktop.qrc)
     target_compile_definitions(neochat PUBLIC -DHAVE_RUNNER)
     target_sources(neochat PRIVATE runner.cpp)
 else()
-    target_sources(neochat-app PRIVATE ../res_android.qrc)
+    target_sources(neochat-app PRIVATE res_android.qrc)
 endif()
 
 target_include_directories(neochat PRIVATE ${CMAKE_BINARY_DIR})

src/main.cpp

@@ -251,11 +251,10 @@ int main(int argc, char *argv[])
 
     Controller::instance().setAboutData(about);
 
-    engine.addImportPath("qrc:/imports");
     engine.addImageProvider(QLatin1String("mxc"), new MatrixImageProvider);
     engine.addImageProvider(QLatin1String("blurhash"), new BlurhashImageProvider);
 
-    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
     if (engine.rootObjects().isEmpty()) {
         return -1;
     }

src/qml/Component/ChatBox/AttachmentPane.qml

@@ -0,0 +1,197 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+// SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Loader {
+    id: attachmentPaneLoader
+
+    readonly property var attachmentMimetype: FileType.mimeTypeForUrl(attachmentPaneLoader.attachmentPath)
+    readonly property bool hasImage: attachmentMimetype.valid && FileType.supportedImageFormats.includes(attachmentMimetype.preferredSuffix)
+    readonly property string attachmentPath: currentRoom.chatBoxAttachmentPath
+    readonly property string baseFileName: attachmentPath.substring(attachmentPath.lastIndexOf('/') + 1, attachmentPath.length)
+
+    active: visible
+    sourceComponent: Component {
+        Pane {
+            id: attachmentPane
+            Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+            contentItem: Item {
+                property real spacing: attachmentPane.spacing > 0 ? attachmentPane.spacing : toolBar.spacing
+                implicitWidth: Math.max(image.implicitWidth, imageBusyIndicator.implicitWidth, fileInfoLayout.implicitWidth, toolBar.implicitWidth)
+                implicitHeight: Math.max(
+                    (hasImage ? Math.max(image.preferredHeight, imageBusyIndicator.implicitHeight) + spacing : 0)
+                        + fileInfoLayout.implicitHeight,
+                    toolBar.implicitHeight
+                )
+
+                Image {
+                    id: image
+                    property real preferredHeight: Math.min(implicitHeight, Kirigami.Units.gridUnit * 8)
+                    height: preferredHeight
+                    anchors {
+                        horizontalCenter: parent.horizontalCenter
+                        bottom: fileInfoLayout.top
+                        bottomMargin: parent.spacing
+                    }
+                    width: Math.min(implicitWidth, attachmentPane.availableWidth)
+                    asynchronous: true
+                    cache: false // Cache is not needed. Images will rarely be shown repeatedly.
+                    smooth: height === preferredHeight && parent.height === parent.implicitHeight // Don't smooth until height animation stops
+                    source: hasImage ? attachmentPaneLoader.attachmentPath : ""
+                    visible: hasImage
+                    fillMode: Image.PreserveAspectFit
+
+                    onSourceChanged: {
+                        // Reset source size height, which affect implicitHeight
+                        sourceSize.height = -1
+                    }
+
+                    onSourceSizeChanged: {
+                        if (implicitHeight > Kirigami.Units.gridUnit * 8) {
+                            // This can save a lot of RAM when loading large images.
+                            // It also improves visual quality for large images.
+                            sourceSize.height = Kirigami.Units.gridUnit * 8
+                        }
+                    }
+
+                    Behavior on height {
+                        NumberAnimation {
+                            property: "height"
+                            duration: Kirigami.Units.shortDuration
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+
+                BusyIndicator {
+                    id: imageBusyIndicator
+                    anchors {
+                        horizontalCenter: parent.horizontalCenter
+                        top: parent.top
+                        bottom: fileInfoLayout.top
+                        bottomMargin: parent.spacing
+                    }
+                    visible: running
+                    running: image.visible && image.progress < 1
+                }
+
+                RowLayout {
+                    id: fileInfoLayout
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: undefined
+                    anchors.bottom: parent.bottom
+                    spacing: parent.spacing
+
+                    Kirigami.Icon {
+                        id: mimetypeIcon
+                        implicitHeight: Kirigami.Units.fontMetrics.roundedIconSize(fileLabel.implicitHeight)
+                        implicitWidth: implicitHeight
+                        source: attachmentMimetype.iconName
+                    }
+
+                    Label {
+                        id: fileLabel
+                        text: baseFileName
+                    }
+
+                    states: State {
+                        when: !hasImage
+                        AnchorChanges {
+                            target: fileInfoLayout
+                            anchors.bottom: undefined
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+                }
+
+                // Using a toolbar to get a button spacing consistent with what the QQC2 style normally has
+                // Also has some accessibility info
+                ToolBar {
+                    id: toolBar
+                    width: parent.width
+                    anchors.top: parent.top
+
+                    leftPadding: 0
+                    rightPadding: 0
+                    topPadding: 0
+                    bottomPadding: 0
+
+                    Kirigami.Theme.inherit: true
+                    Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+                    contentItem: RowLayout {
+                        spacing: parent.spacing
+                        Label {
+                            Layout.leftMargin: -attachmentPane.leftPadding
+                            Layout.topMargin: -attachmentPane.topPadding
+                            leftPadding: cancelAttachmentButton.leftPadding + 1 + attachmentPane.leftPadding
+                            rightPadding: cancelAttachmentButton.rightPadding + 1
+                            topPadding: cancelAttachmentButton.topPadding + attachmentPane.topPadding
+                            bottomPadding: cancelAttachmentButton.bottomPadding
+                            text: i18n("Attachment:")
+                            horizontalAlignment: Text.AlignLeft
+                            verticalAlignment: Text.AlignVCenter
+                            background: Kirigami.ShadowedRectangle {
+                                property real cornerRadius: cancelAttachmentButton.background.hasOwnProperty("radius") ?
+                                    Math.min(cancelAttachmentButton.background.radius, height/2) : 0
+                                corners.bottomLeftRadius: toolBar.mirrored ? cornerRadius : 0
+                                corners.bottomRightRadius: toolBar.mirrored ? 0 : cornerRadius
+                                color: Kirigami.Theme.backgroundColor
+                                opacity: 0.75
+                            }
+                        }
+                        Item {
+                            Layout.fillWidth: true
+                        }
+                        ToolButton {
+                            id: editImageButton
+                            visible: hasImage
+                            icon.name: "document-edit"
+                            text: i18n("Edit")
+                            display: AbstractButton.IconOnly
+
+                            Component {
+                                id: imageEditorPage
+                                ImageEditorPage {
+                                    imagePath: attachmentPaneLoader.attachmentPath
+                                }
+                            }
+                            onClicked: {
+                                let imageEditor = applicationWindow().pageStack.layers.push(imageEditorPage);
+                                imageEditor.newPathChanged.connect(function(newPath) {
+                                    applicationWindow().pageStack.layers.pop();
+                                    attachmentPaneLoader.attachmentPath = newPath;
+                                });
+                            }
+                            ToolTip.text: text
+                            ToolTip.visible: hovered
+                        }
+                        ToolButton {
+                            id: cancelAttachmentButton
+                            icon.name: "dialog-close"
+                            text: i18n("Cancel sending Image")
+                            display: AbstractButton.IconOnly
+                            onClicked: currentRoom.chatBoxAttachmentPath = "";
+                            ToolTip.text: text
+                            ToolTip.visible: hovered
+                        }
+                    }
+                    background: null
+                }
+            }
+
+            background: Rectangle {
+                color: Kirigami.Theme.backgroundColor
+            }
+        }
+    }
+}

src/qml/Component/ChatBox/ChatBar.qml

@@ -0,0 +1,274 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+// SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+
+import org.kde.kirigami 2.18 as Kirigami
+import org.kde.neochat 1.0
+
+ToolBar {
+    id: chatBar
+    property alias inputFieldText: inputField.text
+    property alias textField: inputField
+    property alias emojiPaneOpened: emojiButton.checked
+
+    signal closeAllTriggered()
+    signal inputFieldForceActiveFocusTriggered()
+    signal messageSent()
+
+    onInputFieldForceActiveFocusTriggered: {
+        inputField.forceActiveFocus();
+        // set the cursor to the end of the text
+        inputField.cursorPosition = inputField.length;
+    }
+
+    position: ToolBar.Footer
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+    // Using a custom background because some styles like Material
+    // or Fusion might have ugly colors for a TextArea placed inside
+    // of a toolbar. ToolBar is otherwise the closest QQC2 component
+    // to what we want because of the padding and spacing values.
+    background: Rectangle {
+        color: Kirigami.Theme.backgroundColor
+    }
+
+    contentItem: RowLayout {
+        spacing: chatBar.spacing
+
+        ScrollView {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.minimumHeight: inputField.implicitHeight
+            // lineSpacing is height+leading, so subtract leading once since leading only exists between lines.
+            Layout.maximumHeight: fontMetrics.lineSpacing * 8 - fontMetrics.leading
+                                + inputField.topPadding + inputField.bottomPadding
+
+            // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+            FontMetrics {
+                id: fontMetrics
+                font: inputField.font
+            }
+
+            TextArea {
+                id: inputField
+                focus: true
+                /* Some QQC2 styles will have their own predefined backgrounds for TextAreas.
+                * Make sure there is no background since we are using the ToolBar background.
+                *
+                * This could cause a problem if the QQC2 style was designed around TextArea
+                * background colors being very different from the QPalette::Base color.
+                * Luckily, none of the Qt QQC2 styles do that and neither do KDE's QQC2 styles.
+                */
+                background: MouseArea {
+                    acceptedButtons: Qt.NoButton
+                    cursorShape: Qt.IBeamCursor
+                    z: 1
+                }
+
+                leftPadding: mirrored ? 0 : Kirigami.Units.largeSpacing
+                rightPadding: !mirrored ? 0 : Kirigami.Units.largeSpacing
+                topPadding: 0
+                bottomPadding: 0
+
+                placeholderText: readOnly ? i18n("This room is encrypted. Sending encrypted messages is not yet supported.") : currentRoom.chatBoxEditId.length > 0 ? i18n("Edit Message") : currentRoom.usesEncryption ? i18n("Send an encrypted message…") : i18n("Send a message…")
+                verticalAlignment: TextEdit.AlignVCenter
+                horizontalAlignment: TextEdit.AlignLeft
+                wrapMode: Text.Wrap
+                readOnly: currentRoom.usesEncryption && !Controller.encryptionSupported
+
+                Kirigami.Theme.colorSet: Kirigami.Theme.View
+                Kirigami.Theme.inherit: false
+
+                color: Kirigami.Theme.textColor
+                selectionColor: Kirigami.Theme.highlightColor
+                selectedTextColor: Kirigami.Theme.highlightedTextColor
+                hoverEnabled: !Kirigami.Settings.tabletMode
+
+                selectByMouse: !Kirigami.Settings.tabletMode
+
+                Keys.onEnterPressed: {
+                    if (completionMenu.visible) {
+                        completionMenu.complete()
+                    } else if (event.modifiers & Qt.ShiftModifier) {
+                        inputField.insert(cursorPosition, "\n")
+                    } else {
+                        chatBar.postMessage();
+                    }
+                }
+                Keys.onReturnPressed: {
+                    if (completionMenu.visible) {
+                        completionMenu.complete()
+                    } else if (event.modifiers & Qt.ShiftModifier) {
+                        inputField.insert(cursorPosition, "\n")
+                    } else {
+                        chatBar.postMessage();
+                    }
+                }
+
+                Keys.onTabPressed: {
+                    if (completionMenu.visible) {
+                        completionMenu.complete()
+                    }
+                }
+
+                Keys.onPressed: {
+                    if (event.key === Qt.Key_V && event.modifiers & Qt.ControlModifier) {
+                        chatBar.pasteImage();
+                    } else if (event.key === Qt.Key_Up && event.modifiers & Qt.ControlModifier) {
+                        let replyEvent = messageEventModel.getLatestMessageFromIndex(0)
+                        if (replyEvent && replyEvent["event_id"]) {
+                            currentRoom.chatBoxReplyId = replyEvent["event_id"]
+                        }
+                    } else if (event.key === Qt.Key_Up && inputField.text.length === 0) {
+                        let editEvent = messageEventModel.getLastLocalUserMessageEventId()
+                        if (editEvent) {
+                            currentRoom.chatBoxEditId = editEvent["event_id"]
+                        }
+                    } else if (event.key === Qt.Key_Up && completionMenu.visible) {
+                        completionMenu.decrementIndex()
+                    } else if (event.key === Qt.Key_Down && completionMenu.visible) {
+                        completionMenu.incrementIndex()
+                    }
+                }
+
+                Timer {
+                    id: repeatTimer
+                    interval: 5000
+                }
+
+                onTextChanged: {
+                    if (!repeatTimer.running && Config.typingNotifications) {
+                        currentRoom.sendTypingNotification(true)
+                    }
+                    repeatTimer.start()
+
+                    currentRoom.chatBoxText = text
+                }
+            }
+        }
+
+        Item {
+            visible: currentRoom.chatBoxReplyId.length === 0 && (currentRoom.chatBoxAttachmentPath.length === 0 || uploadingBusySpinner.running)
+            implicitWidth: uploadButton.implicitWidth
+            implicitHeight: uploadButton.implicitHeight
+            ToolButton {
+                id: uploadButton
+                anchors.fill: parent
+                // Matrix does not allow sending attachments in replies
+                visible: currentRoom.chatBoxReplyId.length === 0  && currentRoom.chatBoxAttachmentPath.length === 0 && !uploadingBusySpinner.running
+                icon.name: "mail-attachment"
+                text: i18n("Attach an image or file")
+                display: AbstractButton.IconOnly
+
+                onClicked: {
+                    if (Clipboard.hasImage) {
+                        attachDialog.open()
+                    } else {
+                        var fileDialog = openFileDialog.createObject(ApplicationWindow.overlay)
+                        fileDialog.chosen.connect((path) => {
+                            if (!path) {
+                                return;
+                            }
+                            currentRoom.chatBoxAttachmentPath = path;
+                        })
+                        fileDialog.open()
+                    }
+                }
+
+                ToolTip.text: text
+                ToolTip.visible: hovered
+            }
+            BusyIndicator {
+                id: uploadingBusySpinner
+                anchors.fill: parent
+                visible: running
+                running: currentRoom && currentRoom.hasFileUploading
+            }
+        }
+
+        ToolButton {
+            id: emojiButton
+            icon.name: "preferences-desktop-emoticons"
+            text: i18n("Add an Emoji")
+            display: AbstractButton.IconOnly
+            checkable: true
+
+            ToolTip.text: text
+            ToolTip.visible: hovered
+        }
+
+        ToolButton {
+            id: sendButton
+            icon.name: "document-send"
+            text: i18n("Send message")
+            display: AbstractButton.IconOnly
+
+            onClicked: {
+                chatBar.postMessage()
+            }
+
+            ToolTip.text: text
+            ToolTip.visible: hovered
+        }
+    }
+
+    CompletionMenu {
+        id: completionMenu
+        height: implicitHeight
+        y: -height - 5
+        z: 1
+        chatDocumentHandler: documentHandler
+        Behavior on height {
+            NumberAnimation {
+                property: "height"
+                duration: Kirigami.Units.shortDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+    }
+
+    Connections {
+        target: currentRoom
+        function onChatBoxEditIdChanged() {
+            chatBar.inputFieldText = currentRoom.chatBoxEditMessage
+        }
+    }
+
+    ChatDocumentHandler {
+        id: documentHandler
+        document: inputField.textDocument
+        cursorPosition: inputField.cursorPosition
+        selectionStart: inputField.selectionStart
+        selectionEnd: inputField.selectionEnd
+        Component.onCompleted: {
+            RoomManager.chatDocumentHandler = documentHandler;
+        }
+    }
+
+
+    function pasteImage() {
+        let localPath = Clipboard.saveImage();
+        if (localPath.length === 0) {
+            return;
+        }
+        currentRoom.chatBoxAttachmentPath = localPath
+    }
+
+    function postMessage() {
+        actionsHandler.handleMessage();
+
+        currentRoom.markAllMessagesAsRead();
+        inputField.clear();
+        currentRoom.chatBoxReplyId = "";
+        currentRoom.chatBoxEditId = "";
+        messageSent()
+    }
+}

src/qml/Component/ChatBox/ChatBox.qml

@@ -0,0 +1,145 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+// SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+// 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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+ColumnLayout {
+    id: chatBox
+
+    property alias inputFieldText: chatBar.inputFieldText
+
+    signal messageSent()
+
+    spacing: 0
+
+    Kirigami.Separator {
+        id: connectionPaneSeparator
+        visible: connectionPane.visible
+        Layout.fillWidth: true
+    }
+
+    QQC2.Pane {
+        id: connectionPane
+        padding: fontMetrics.lineSpacing * 0.25
+        FontMetrics {
+            id: fontMetrics
+            font: networkLabel.font
+        }
+        spacing: 0
+        Kirigami.Theme.colorSet: Kirigami.Theme.View
+        background: Rectangle {
+            color: Kirigami.Theme.backgroundColor
+        }
+        visible: !Controller.isOnline
+        Layout.fillWidth: true
+        QQC2.Label {
+            id: networkLabel
+            text: i18n("NeoChat is offline. Please check your network connection.")
+        }
+    }
+
+    Kirigami.Separator {
+        id: emojiPickerLoaderSeparator
+        visible: emojiPickerLoader.visible
+        Layout.fillWidth: true
+        height: visible ? implicitHeight : 0
+    }
+
+    Loader {
+        id: emojiPickerLoader
+        active: visible
+        visible: chatBar.emojiPaneOpened
+        Layout.fillWidth: true
+        sourceComponent: QQC2.Pane {
+            topPadding: 0
+            bottomPadding: 0
+            rightPadding: 0
+            leftPadding: 0
+            Kirigami.Theme.colorSet: Kirigami.Theme.View
+            contentItem: EmojiPicker {
+                textArea: chatBar.textField
+                onChosen: addText(emoji)
+            }
+        }
+
+    }
+
+    Kirigami.Separator {
+        id: replySeparator
+        visible: replyPane.visible
+        Layout.fillWidth: true
+    }
+
+    ReplyPane {
+        id: replyPane
+        visible: currentRoom.chatBoxReplyId.length > 0 || currentRoom.chatBoxEditId.length > 0
+        Layout.fillWidth: true
+
+        onReplyCancelled: {
+            chatBox.focusInputField()
+        }
+    }
+
+    Kirigami.Separator {
+        id: attachmentSeparator
+        visible: attachmentPane.visible
+        Layout.fillWidth: true
+    }
+
+    AttachmentPane {
+        id: attachmentPane
+        visible: currentRoom.chatBoxAttachmentPath.length > 0
+        Layout.fillWidth: true
+    }
+
+    Kirigami.Separator {
+        id: chatBarSeparator
+        visible: chatBar.visible
+
+        Layout.fillWidth: true
+    }
+
+    ChatBar {
+        id: chatBar
+        visible: currentRoom.canSendEvent("m.room.message")
+
+        Layout.fillWidth: true
+
+        onCloseAllTriggered: closeAll()
+        onMessageSent: {
+            closeAll()
+            chatBox.messageSent();
+        }
+
+        Behavior on implicitHeight {
+            NumberAnimation {
+                property: "implicitHeight"
+                duration: Kirigami.Units.shortDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+    }
+
+    function addText(text) {
+        chatBox.inputFieldText = inputFieldText + text
+    }
+
+    function insertText(str) {
+        chatBox.inputFieldText = inputFieldText.substr(0, inputField.cursorPosition) + str + inputFieldText.substr(inputField.cursorPosition)
+    }
+
+    function focusInputField() {
+        chatBar.inputFieldForceActiveFocusTriggered()
+    }
+
+    function closeAll() {
+        // TODO clear();
+        chatBar.emojiPaneOpened = false;
+    }
+}

src/qml/Component/ChatBox/CompletionMenu.qml

@@ -0,0 +1,74 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+// SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import Qt.labs.qmlmodels 1.0
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Popup {
+    id: completionMenu
+    width: parent.width
+
+    visible: completions.count > 0
+
+    RoomListModel {
+        id: roomListModel
+        connection: Controller.activeConnection
+    }
+
+    required property var chatDocumentHandler
+    Component.onCompleted: {
+        chatDocumentHandler.completionModel.roomListModel = roomListModel;
+    }
+
+    function incrementIndex() {
+        completions.incrementCurrentIndex()
+    }
+
+    function decrementIndex() {
+        completions.decrementCurrentIndex()
+    }
+
+    function complete() {
+        completionMenu.chatDocumentHandler.complete(completions.currentIndex)
+    }
+
+    leftPadding: 0
+    rightPadding: 0
+    topPadding: 0
+    bottomPadding: 0
+    implicitHeight: Math.min(completions.contentHeight, Kirigami.Units.gridUnit * 10)
+
+    contentItem: ListView {
+        id: completions
+
+        anchors.fill: parent
+        model: completionMenu.chatDocumentHandler.completionModel
+        currentIndex: 0
+        keyNavigationWraps: true
+        highlightMoveDuration: 100
+        delegate: Kirigami.BasicListItem {
+            text: model.text
+            subtitle: model.subtitle ?? ""
+            leading: RowLayout {
+                Kirigami.Avatar {
+                    visible: model.icon !== "invalid"
+                    Layout.preferredWidth: height
+                    Layout.fillHeight: true
+                    source: model.icon === "invalid" ? "" : ("image://mxc/" + model.icon)
+                    name: model.text
+                }
+            }
+            onClicked: completionMenu.chatDocumentHandler.complete(model.index)
+        }
+    }
+    background: Rectangle {
+        color: Kirigami.Theme.backgroundColor
+    }
+}

src/qml/Component/ChatBox/ReplyPane.qml

@@ -0,0 +1,117 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+// SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import org.kde.kirigami 2.14 as Kirigami
+
+import org.kde.neochat 1.0
+
+Loader {
+    id: replyPane
+    property NeoChatUser user: currentRoom.chatBoxReplyUser ?? currentRoom.chatBoxEditUser
+
+    signal replyCancelled()
+
+    active: visible
+    sourceComponent: Pane {
+        id: replyPane
+
+        Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+        spacing: leftPadding
+
+        contentItem: RowLayout {
+            Layout.fillWidth: true
+            spacing: replyPane.spacing
+
+            FontMetrics {
+                id: fontMetrics
+                font: textArea.font
+            }
+
+            Kirigami.Avatar {
+                id: avatar
+                Layout.alignment: textContentLayout.height > avatar.height ? Qt.AlignHCenter | Qt.AlignTop : Qt.AlignCenter
+                Layout.preferredWidth: Layout.preferredHeight
+                Layout.preferredHeight: fontMetrics.lineSpacing * 2 - fontMetrics.leading
+                source: user ? "image://mxc/" + currentRoom.getUser(user.id).avatarMediaId : ""
+                name: user ? user.displayName : ""
+                color: user ? user.color : "transparent"
+                visible: Boolean(user)
+            }
+
+            ColumnLayout {
+                id: textContentLayout
+                Layout.alignment: Qt.AlignCenter
+                Layout.fillWidth: true
+                spacing: fontMetrics.leading
+                Label {
+                    Layout.fillWidth: true
+                    textFormat: Text.StyledText
+                    elide: Text.ElideRight
+                    text: {
+                        let heading = "<b>%1</b>"
+                        let userName = user ? "<font color=\""+ user.color +"\">" + currentRoom.htmlSafeMemberName(user.id) + "</font>" : ""
+                        if (currentRoom.chatBoxEditId.length > 0) {
+                            heading = heading.arg(i18n("Editing message:")) + "<br/>"
+                        } else {
+                            heading = heading.arg(i18n("Replying to %1:", userName))
+                        }
+
+                        return heading
+                    }
+                }
+                //TODO edit user mentions
+                ScrollView {
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                    Layout.fillWidth: true
+                    Layout.maximumHeight: fontMetrics.lineSpacing * 8 - fontMetrics.leading
+
+                    // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+                    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+                    TextArea {
+                        id: textArea
+                        leftPadding: 0
+                        rightPadding: 0
+                        topPadding: 0
+                        bottomPadding: 0
+                        text: "<style> a{color:" + Kirigami.Theme.linkColor + ";}.user-pill{}</style>" + (currentRoom.chatBoxEditId.length > 0 ? currentRoom.chatBoxEditMessage : currentRoom.chatBoxReplyMessage)
+                        selectByMouse: true
+                        selectByKeyboard: true
+                        readOnly: true
+                        wrapMode: Label.Wrap
+                        textFormat: TextEdit.RichText
+                        background: Item {}
+                        HoverHandler {
+                            cursorShape: textArea.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
+                        }
+                    }
+                }
+            }
+
+            ToolButton {
+                display: AbstractButton.IconOnly
+                action: Kirigami.Action {
+                    text: i18nc("@action:button", "Cancel reply")
+                    icon.name: "dialog-close"
+                    onTriggered: {
+                        currentRoom.chatBoxReplyId = "";
+                        currentRoom.chatBoxEditId = "";
+                    }
+                    shortcut: "Escape"
+                }
+                ToolTip.text: text
+                ToolTip.visible: hovered
+            }
+        }
+
+        background: Rectangle {
+            color: Kirigami.Theme.backgroundColor
+        }
+    }
+}

src/qml/Component/Emoji/EmojiPicker.qml

@@ -0,0 +1,162 @@
+// SPDX-FileCopyrightText: 2018-2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+ColumnLayout {
+    id: _picker
+
+    property string emojiCategory: "history"
+    property var textArea
+    readonly property var emojiModel: EmojiModel
+
+    signal chosen(string emoji)
+
+    spacing: 0
+
+    ScrollView {
+        Layout.fillWidth: true
+        Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + ScrollBar.horizontal.height + 2 // for the focus line
+        ScrollBar.horizontal.height: ScrollBar.horizontal.visible ? ScrollBar.horizontal.implicitHeight : 0
+
+        ListView {
+            clip: true
+            orientation: ListView.Horizontal
+
+            model: ListModel {
+                ListElement { label: "custom"; category: "custom" }
+                ListElement { label: "⌛️"; category: "history" }
+                ListElement { label: "😏"; category: "people" }
+                ListElement { label: "🌲"; category: "nature" }
+                ListElement { label: "🍛"; category: "food"}
+                ListElement { label: "🚁"; category: "activity" }
+                ListElement { label: "🚅"; category: "travel" }
+                ListElement { label: "💡"; category: "objects" }
+                ListElement { label: "🔣"; category: "symbols" }
+                ListElement { label: "🏁"; category: "flags" }
+            }
+
+            delegate: ItemDelegate {
+                id: del
+
+                required property string label
+                required property string category
+
+                width: contentItem.Layout.preferredWidth
+                height: Kirigami.Units.gridUnit * 2
+
+                contentItem: Kirigami.Heading {
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    level: del.label === "custom" ? 4 : 1
+
+                    Layout.preferredWidth: del.label === "custom" ? implicitWidth + Kirigami.Units.largeSpacing : Kirigami.Units.gridUnit * 2
+
+                    font.family: del.label === "custom" ? Kirigami.Theme.defaultFont.family : 'emoji'
+                    text: del.label === "custom" ? i18n("Custom") : del.label
+                }
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+
+                    width: parent.width
+                    height: 2
+
+                    visible: emojiCategory === category
+
+                    color: Kirigami.Theme.focusColor
+                }
+
+                onClicked: emojiCategory = category
+            }
+        }
+    }
+
+    Kirigami.Separator {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 1
+    }
+
+    ScrollView {
+        Layout.fillWidth: true
+        Layout.preferredHeight: Kirigami.Units.gridUnit * 8
+        Layout.fillHeight: true
+
+        GridView {
+            cellWidth: Kirigami.Units.gridUnit * 2
+            cellHeight: Kirigami.Units.gridUnit * 2
+
+            clip: true
+
+            model: {
+                switch (emojiCategory) {
+                case "custom":
+                    return CustomEmojiModel
+                case "history":
+                    return emojiModel.history
+                case "people":
+                    return emojiModel.people
+                case "nature":
+                    return emojiModel.nature
+                case "food":
+                    return emojiModel.food
+                case "activity":
+                    return emojiModel.activity
+                case "travel":
+                    return emojiModel.travel
+                case "objects":
+                    return emojiModel.objects
+                case "symbols":
+                    return emojiModel.symbols
+                case "flags":
+                    return emojiModel.flags
+                }
+                return null
+            }
+
+            delegate: ItemDelegate {
+                width: Kirigami.Units.gridUnit * 2
+                height: Kirigami.Units.gridUnit * 2
+
+                contentItem: Kirigami.Heading {
+                    level: 1
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    font.family: 'emoji'
+                    text: modelData.isCustom ? "" : modelData.unicode
+                }
+
+                Image {
+                    visible: modelData.isCustom
+                    source: visible ? modelData.unicode : ""
+                    anchors.fill: parent
+                    anchors.margins: 2
+
+                    sourceSize.width: width
+                    sourceSize.height: height
+
+                    Rectangle {
+                        anchors.fill: parent
+                        visible: parent.status === Image.Loading
+                        radius: height/2
+                        gradient: ShimmerGradient { }
+                    }
+                }
+
+                onClicked: {
+                    if (modelData.isCustom) {
+                        chosen(modelData.shortname)
+                    } else {
+                        chosen(modelData.unicode)
+                    }
+                    emojiModel.emojiUsed(modelData)
+                }
+            }
+        }
+    }
+}

src/qml/Component/FancyEffectsContainer.qml

@@ -0,0 +1,296 @@
+// SPDX-FileCopyrightText: 2021 Alexey Andreyev <aa13q@ya.ru>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+import QtQuick.Particles 2.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+Item {
+    id: item
+    property bool enabled: false
+    property int effectInterval: Kirigami.Units.veryLongDuration*10;
+    property color darkSnowColor: "grey"
+    property bool isThemeDark: Kirigami.Theme.backgroundColor.hslLightness <= darkSnowColor.hslLightness
+
+    function showConfettiEffect() {
+        confettiTimer.start()
+    }
+
+    function showSnowEffect() {
+        snowTimer.start()
+    }
+
+    function showFireworksEffect() {
+        fireworksTimer.start()
+    }
+
+    // Confetti
+
+    Timer {
+        id: confettiTimer
+        interval: item.effectInterval;
+        running: false;
+        repeat: false;
+        triggeredOnStart: true;
+        onTriggered: {
+            if (item.enabled) {
+                confettiSystem.running = !confettiSystem.running
+            }
+        }
+    }
+
+    ParticleSystem {
+        id: confettiSystem
+        anchors.fill: parent
+
+        running: false
+        onRunningChanged: {
+            if (running) {
+                opacity = 1
+            } else {
+                opacity = 0
+            }
+        }
+
+        Behavior on opacity {
+            SequentialAnimation {
+                NumberAnimation { duration: Kirigami.Units.longDuration }
+            }
+        }
+
+        ImageParticle {
+            source: "qrc:/confetti.png"
+            entryEffect: ImageParticle.Scale
+            rotationVariation: 360
+            rotationVelocity: 90
+            color: Qt.hsla(Math.random(), 0.5, 0.6, 1)
+            colorVariation: 1
+        }
+
+        Emitter {
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+
+            sizeVariation: Kirigami.Units.iconSizes.small/2
+            lifeSpan: Kirigami.Units.veryLongDuration*10
+            size: Kirigami.Units.iconSizes.small
+
+            velocity: AngleDirection {
+                angle: 90
+                angleVariation: 42
+                magnitude: 500
+            }
+        }
+    }
+
+    // Snow
+
+    Timer {
+        id: snowTimer
+        interval: item.effectInterval;
+        running: false;
+        repeat: false;
+        triggeredOnStart: true;
+        onTriggered: {
+            if (item.enabled) {
+                snowSystem.running = !snowSystem.running
+            }
+        }
+    }
+
+    ParticleSystem {
+        id: snowSystem
+        anchors.fill: parent
+
+        running: false
+        onRunningChanged: {
+            if (running) {
+                opacity = 1
+            } else {
+                opacity = 0
+            }
+        }
+
+        Behavior on opacity {
+            SequentialAnimation {
+                NumberAnimation { duration: Kirigami.Units.longDuration }
+            }
+        }
+
+        ItemParticle {
+            delegate: Rectangle {
+                width: 10
+                height: width
+                radius: width
+                color: item.isThemeDark ? "white" : darkSnowColor
+                scale: Math.random()
+                opacity: Math.random()
+            }
+        }
+
+        Emitter {
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+
+            sizeVariation: Kirigami.Units.iconSizes.medium
+            lifeSpan: Kirigami.Units.veryLongDuration*10
+            size: Kirigami.Units.iconSizes.large
+            emitRate: 42
+
+            velocity: AngleDirection {
+                angle: 90
+                angleVariation: 10
+                magnitude: 300
+            }
+        }
+    }
+
+    // Fireworks
+
+    Timer {
+        id: fireworksTimer
+        interval: item.effectInterval;
+        running: false;
+        repeat: false;
+        triggeredOnStart: true;
+        onTriggered: {
+            if (item.enabled) {
+                fireworksInternalTimer.running = !fireworksInternalTimer.running
+            }
+        }
+    }
+
+    Timer {
+        id: fireworksInternalTimer
+        interval: 300
+        triggeredOnStart: true
+        running: false
+        repeat: true
+        onTriggered: {
+            var x = Math.random() * parent.width
+            var y = Math.random() * parent.height
+            customEmit(x, y)
+            customEmit(x, y)
+            customEmit(x, y)
+        }
+    }
+
+    ParticleSystem {
+        id: fireworksSystem
+        anchors.fill: parent
+        running: fireworksInternalTimer.running
+        onRunningChanged: {
+            if (running) {
+                opacity = 1
+            } else {
+                opacity = 0
+            }
+        }
+
+        Behavior on opacity {
+            SequentialAnimation {
+                NumberAnimation { duration: Kirigami.Units.longDuration }
+            }
+        }
+    }
+
+    ImageParticle {
+        id: fireworksParticleA
+        system: fireworksSystem
+        source: "qrc:/glowdot.png"
+        alphaVariation: item.isThemeDark ? 0.1 : 0.1
+        alpha: item.isThemeDark ? 0.5 : 1
+        groups: ["a"]
+        opacity: fireworksSystem.opacity
+        entryEffect: ImageParticle.Scale
+        rotationVariation: 360
+    }
+
+    ImageParticle {
+        system: fireworksSystem
+        source: "qrc:/glowdot.png"
+        color: item.isThemeDark ? "white" : "gold"
+        alphaVariation: item.isThemeDark ? 0.1 : 0.1
+        alpha: item.isThemeDark ? 0.5 : 1
+        groups: ["light"]
+        opacity: fireworksSystem.opacity
+        entryEffect: ImageParticle.Scale
+        rotationVariation: 360
+    }
+
+    ImageParticle {
+        id: fireworksParticleB
+        system: fireworksSystem
+        source: "qrc:/glowdot.png"
+        alphaVariation: item.isThemeDark ? 0.1 : 0.1
+        alpha: item.isThemeDark ? 0.5 : 1
+        groups: ["b"]
+        opacity: fireworksSystem.opacity
+        entryEffect: ImageParticle.Scale
+        rotationVariation: 360
+    }
+
+    Component {
+        id: emitterComp
+        Emitter {
+            id: container
+            property int life: 23
+            property real targetX: 0
+            property real targetY: 0
+            width: 1
+            height: 1
+            system: fireworksSystem
+            size: 16
+            endSize: 8
+            sizeVariation: 5
+            Timer {
+                interval: life
+                running: true
+                onTriggered: {
+                    container.destroy();
+                    var randomHue = Math.random()
+                    var lightness = item.isThemeDark ? 0.8 : 0.7
+                    fireworksParticleA.color = Qt.hsla(randomHue, 0.8, lightness, 1)
+                    fireworksParticleB.color = Qt.hsla(1-randomHue, 0.8, lightness, 1)
+                }
+            }
+            velocity: AngleDirection {angleVariation:360; magnitude: 200}
+        }
+    }
+
+    function customEmit(x,y) {
+        var currentSize = Math.round(Math.random() * 200) + 40
+        var currentLifeSpan = Math.round(Math.random() * 1000) + 100
+        for (var i=0; i<8; i++) {
+            var obj = emitterComp.createObject(parent);
+            obj.x = x
+            obj.y = y
+            obj.targetX = Math.random() * currentSize - currentSize/2 + obj.x
+            obj.targetY = Math.random() * currentSize - currentSize/2 + obj.y
+            obj.life = Math.round(Math.random() * 23) + 150
+            obj.emitRate = Math.round(Math.random() * 32) + 5
+            obj.lifeSpan = currentLifeSpan
+            const group = Math.round(Math.random() * 3);
+            switch (group) {
+                case 0:
+                    obj.group = "light";
+                    break;
+                case 1:
+                    obj.group = "a";
+                    break;
+                case 2:
+                    obj.group = "b";
+                    break;
+            }
+        }
+    }
+}

src/qml/Component/FullScreenImage.qml

@@ -0,0 +1,308 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+Popup {
+    id: root
+
+    property alias source: image.source
+    property string filename
+    property string blurhash: ""
+    property int imageWidth: -1
+    property int imageHeight: -1
+    property var modelData
+
+    parent: Overlay.overlay
+    closePolicy: Popup.CloseOnEscape
+    width: parent.width
+    height: parent.height
+    modal: true
+    padding: 0
+    background: null
+
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: Kirigami.Units.largeSpacing
+
+        Control {
+            Layout.fillWidth: true
+
+            contentItem: RowLayout {
+                spacing: Kirigami.Units.largeSpacing
+
+                Kirigami.Avatar {
+                    id: avatar
+
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.medium
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.medium
+
+                    name: modelData.author.name ?? modelData.author.displayName
+                    source: modelData.author.avatarMediaId ? ("image://mxc/" + modelData.author.avatarMediaId) : ""
+                    color: modelData.author.color
+                }
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 0
+
+                    Label {
+                        id: nameLabel
+
+                        text: modelData.author.displayName
+                        textFormat: Text.PlainText
+                        font.weight: Font.Bold
+                        color: author.color
+                    }
+                    Label {
+                        id: timeLabel
+
+                        text: time.toLocaleString(Qt.locale(), Locale.ShortFormat)
+                    }
+                }
+                Label {
+                    id: imageLabel
+                    Layout.fillWidth: true
+                    Layout.leftMargin: Kirigami.Units.largeSpacing
+
+                    text: modelData.display
+                    font.weight: Font.Bold
+                    elide: Text.ElideRight
+                }
+                ToolButton {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                    text: i18n("Zoom in")
+                    Accessible.name: text
+                    icon.name: "zoom-in"
+                    display: AbstractButton.IconOnly
+                    onClicked: {
+                        image.scaleFactor = image.scaleFactor + 0.25
+                        if (image.scaleFactor > 3) {
+                            image.scaleFactor = 3
+                        }
+                    }
+
+                    ToolTip.text: text
+                    ToolTip.delay: Kirigami.Units.toolTipDelay
+                    ToolTip.visible: hovered
+                }
+                ToolButton {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                    text: i18n("Zoom out")
+                    Accessible.name: text
+                    icon.name: "zoom-out"
+                    display: AbstractButton.IconOnly
+                    onClicked: {
+                        image.scaleFactor = image.scaleFactor - 0.25
+                        if (image.scaleFactor < 0.25) {
+                            image.scaleFactor = 0.25
+                        }
+                    }
+
+                    ToolTip.text: text
+                    ToolTip.delay: Kirigami.Units.toolTipDelay
+                    ToolTip.visible: hovered
+                }
+                ToolButton {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                    text: i18n("Rotate left")
+                    Accessible.name: text
+                    icon.name: "image-rotate-left-symbolic"
+                    display: AbstractButton.IconOnly
+                    onClicked: image.rotationAngle = image.rotationAngle - 90
+
+                    ToolTip.text: text
+                    ToolTip.delay: Kirigami.Units.toolTipDelay
+                    ToolTip.visible: hovered
+                }
+                ToolButton {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                    text: i18n("Rotate right")
+                    Accessible.name: text
+                    icon.name: "image-rotate-right-symbolic"
+                    display: AbstractButton.IconOnly
+                    onClicked: image.rotationAngle = image.rotationAngle + 90
+
+                    ToolTip.text: text
+                    ToolTip.delay: Kirigami.Units.toolTipDelay
+                    ToolTip.visible: hovered
+                }
+                ToolButton {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                    text: i18n("Save as")
+                    Accessible.name: text
+                    icon.name: "document-save"
+                    display: AbstractButton.IconOnly
+                    onClicked: {
+                        var dialog = saveAsDialog.createObject(ApplicationWindow.overlay)
+                        dialog.open()
+                        dialog.currentFile = dialog.folder + "/" + currentRoom.fileNameToDownload(eventId)
+                    }
+
+                    ToolTip.text: text
+                    ToolTip.delay: Kirigami.Units.toolTipDelay
+                    ToolTip.visible: hovered
+                }
+                ToolButton {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                    text: i18n("Close")
+                    Accessible.name: text
+                    icon.name: "dialog-close"
+                    display: AbstractButton.IconOnly
+                    onClicked: {
+                        root.close()
+                    }
+
+                    ToolTip.text: text
+                    ToolTip.delay: Kirigami.Units.toolTipDelay
+                    ToolTip.visible: hovered
+                }
+            }
+
+            background: Rectangle {
+                color: Kirigami.Theme.alternateBackgroundColor
+            }
+
+            Kirigami.Separator {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+                height: 1
+            }
+        }
+
+        BusyIndicator {
+            Layout.fillWidth: true
+            visible: image.status !== Image.Ready && root.blurhash === ""
+            running: visible
+        }
+        // Provides container to fill the space that isn't taken up by the top controls and clips the image when zooming makes it larger than the available area.
+        Item {
+            id: imageContainer
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.leftMargin: Kirigami.Units.largeSpacing
+            Layout.rightMargin: Kirigami.Units.largeSpacing
+            Layout.bottomMargin: Kirigami.Units.largeSpacing
+            clip: true
+
+            Image {
+                id: image
+
+                property var scaleFactor: 1
+                property int rotationAngle: 0
+                property var rotationInsensitiveWidth: Math.min(root.imageWidth > 0 ? root.imageWidth : sourceSize.width, imageContainer.width - Kirigami.Units.largeSpacing * 2)
+                property var rotationInsensitiveHeight: Math.min(root.imageHeight > 0 ? root.imageHeight : sourceSize.height, imageContainer.height - Kirigami.Units.largeSpacing * 2)
+
+                anchors.centerIn: parent
+                width: rotationAngle % 180 === 0 ? rotationInsensitiveWidth : rotationInsensitiveHeight
+                height: rotationAngle % 180 === 0 ? rotationInsensitiveHeight : rotationInsensitiveWidth
+                fillMode: Image.PreserveAspectFit
+                clip: true
+
+                Behavior on width {
+                    NumberAnimation {duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic}
+                }
+                Behavior on height {
+                    NumberAnimation {duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic}
+                }
+
+                Image {
+                    anchors.centerIn: parent
+                    width: image.width
+                    height: image.height
+                    source: root.blurhash !== "" ? ("image://blurhash/" + root.blurhash) : ""
+                    visible: root.blurhash !== "" && parent.status !== Image.Ready
+                }
+
+                transform: [
+                    Rotation {
+                        origin.x: image.width / 2
+                        origin.y: image.height / 2
+                        angle: image.rotationAngle
+
+                        Behavior on angle {
+                            RotationAnimation {duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic}
+                        }
+                    },
+                    Scale {
+                        origin.x: image.width / 2
+                        origin.y: image.height / 2
+                        xScale: image.scaleFactor
+                        yScale: image.scaleFactor
+
+                        Behavior on xScale {
+                            NumberAnimation {duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic}
+                        }
+                        Behavior on yScale {
+                            NumberAnimation {duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic}
+                        }
+                    }
+                ]
+
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton
+                    onClicked: {
+                        const contextMenu = fileDelegateContextMenu.createObject(parent, {
+                            author: modelData.author,
+                            message: modelData.message,
+                            eventId: modelData.eventId,
+                            source: modelData.source,
+                            file: root.parent,
+                            mimeType: modelData.mimeType,
+                            progressInfo: modelData.progressInfo,
+                            plainMessage: modelData.message,
+                        });
+                        contextMenu.closeFullscreen.connect(root.close)
+                        contextMenu.open();
+                    }
+                }
+            }
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton
+                onClicked: {
+                    root.close()
+                }
+            }
+        }
+    }
+
+    Component {
+        id: saveAsDialog
+        FileDialog {
+            fileMode: FileDialog.SaveFile
+            folder: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
+            onAccepted: {
+                if (!currentFile) {
+                    return;
+                }
+                currentRoom.downloadFile(eventId, currentFile)
+            }
+        }
+    }
+
+    onClosed: {
+        image.scaleFactor = 1
+        image.rotationAngle = 0
+    }
+}

src/qml/Component/Login/Homeserver.qml

@@ -0,0 +1,61 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// 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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+LoginStep {
+    id: root
+
+    readonly property var homeserver: customHomeserver.visible ? customHomeserver.text : serverCombo.currentText
+    property bool loading: false
+
+    title: i18nc("@title", "Select a Homeserver")
+
+    action: Kirigami.Action {
+        enabled: LoginHelper.homeserverReachable && !customHomeserver.visible || customHomeserver.acceptableInput
+        onTriggered: {
+            // TODO
+            console.log("register todo")
+        }
+    }
+
+    onHomeserverChanged: {
+        LoginHelper.testHomeserver("@user:" + homeserver)
+    }
+
+    Kirigami.FormLayout {
+        Component.onCompleted: Controller.testHomeserver(homeserver)
+
+        QQC2.ComboBox {
+            id: serverCombo
+
+            Kirigami.FormData.label: i18n("Homeserver:")
+            model: ["matrix.org", "kde.org", "tchncs.de", i18n("Other...")]
+        }
+
+        QQC2.TextField {
+            id: customHomeserver
+
+            Kirigami.FormData.label: i18n("Url:")
+            visible: serverCombo.currentIndex === 3
+            onTextChanged: {
+                Controller.testHomeserver(text)
+            }
+            validator: RegularExpressionValidator {
+                regularExpression: /([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9]+(:[0-9]+)?/
+            }
+        }
+
+        QQC2.Button {
+            id: continueButton
+            text: i18nc("@action:button", "Continue")
+            action: root.action
+        }
+    }
+}

src/qml/Component/Login/Loading.qml

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.PlaceholderMessage {
+    property var showContinueButton: false
+    property var showBackButton: false
+    property string title: i18n("Loading…")
+
+    anchors.centerIn: parent
+
+    QQC2.Label {
+        text: i18n("Please wait. This might take a little while.")
+    }
+
+    QQC2.BusyIndicator {
+        Layout.alignment: Qt.AlignHCenter
+        running: false
+    }
+}

src/qml/Component/Login/Login.qml

@@ -0,0 +1,64 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// 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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+LoginStep {
+    id: login
+
+    showContinueButton: true
+    showBackButton: false
+
+    title: i18nc("@title", "Login")
+    message: i18n("Enter your Matrix ID")
+
+    Component.onCompleted: {
+        LoginHelper.matrixId = ""
+    }
+
+    Kirigami.FormLayout {
+        QQC2.TextField {
+            id: matrixIdField
+            Kirigami.FormData.label: i18n("Matrix ID:")
+            placeholderText: "@user:matrix.org"
+            onTextChanged: {
+                if(acceptableInput) {
+                    LoginHelper.matrixId = text
+                }
+            }
+
+            Component.onCompleted: {
+                matrixIdField.forceActiveFocus()
+            }
+
+            Keys.onReturnPressed: {
+                login.action.trigger()
+            }
+
+            validator: RegularExpressionValidator {
+                regularExpression: /^\@?[a-zA-Z0-9\._=\-/]+\:[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]+)*(\:[0-9]+)?$/
+            }
+        }
+    }
+
+    action: Kirigami.Action {
+        text: LoginHelper.testing && matrixIdField.acceptableInput ? i18n("Loading…") : i18nc("@action:button", "Continue")
+        onTriggered: {
+            if (LoginHelper.supportsSso && LoginHelper.supportsPassword) {
+                processed("qrc:/LoginMethod.qml");
+            } else if (LoginHelper.supportsPassword) {
+                processed("qrc:/Password.qml");
+            } else {
+                processed("qrc:/Sso.qml");
+            }
+        }
+        enabled: LoginHelper.homeserverReachable
+    }
+}

src/qml/Component/Login/LoginMethod.qml

@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+LoginStep {
+    id: loginMethod
+
+    title: i18n("Login Methods")
+
+    Layout.alignment: Qt.AlignHCenter
+
+    Controls.Button {
+        Layout.alignment: Qt.AlignHCenter
+        text: i18n("Login with password")
+        Layout.preferredWidth: Kirigami.Units.gridUnit * 12
+        onClicked: processed("qrc:/Password.qml")
+    }
+
+    Controls.Button {
+        Layout.alignment: Qt.AlignHCenter
+        text: i18n("Login with single sign-on")
+        Layout.preferredWidth: Kirigami.Units.gridUnit * 12
+        onClicked: processed("qrc:/Sso.qml")
+    }
+}

src/qml/Component/Login/LoginRegister.qml

@@ -0,0 +1,30 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+LoginStep {
+    id: loginRegister
+
+    Layout.alignment: Qt.AlignHCenter
+
+    Controls.Button {
+        Layout.alignment: Qt.AlignHCenter
+        text: i18n("Login")
+        Layout.preferredWidth: Kirigami.Units.gridUnit * 12
+        onClicked: processed("qrc:/Login.qml")
+    }
+
+    Controls.Button {
+        Layout.alignment: Qt.AlignHCenter
+        text: i18n("Register")
+        Layout.preferredWidth: Kirigami.Units.gridUnit * 12
+        onClicked: processed("qrc:/Homeserver.qml")
+    }
+}

src/qml/Component/Login/LoginStep.qml

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+/// Step for the login/registration flow
+ColumnLayout {
+
+    property string title: i18n("Welcome")
+    property string message: i18n("Welcome")
+    property bool showContinueButton: false
+    property bool showBackButton: false
+    property bool acceptable: false
+    property string previousUrl: ""
+
+    /// Process this module, this is called by the continue button.
+    /// Should call \sa processed when it finish successfully.
+    property Action action: null
+
+    /// Called when switching to the next step.
+    signal processed(url nextUrl)
+
+    signal showMessage(string message)
+
+}

src/qml/Component/Login/Password.qml

@@ -0,0 +1,51 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// 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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+LoginStep {
+    id: password
+
+    title: i18nc("@title", "Password")
+    message: i18n("Enter your password")
+    showContinueButton: true
+    showBackButton: true
+    previousUrl: LoginHelper.isLoggingIn ? "" : LoginHelper.supportsSso ? "qrc:/LoginMethod.qml" : "qrc:/Login.qml"
+
+    action: Kirigami.Action {
+        text: i18nc("@action:button", "Login")
+        enabled: passwordField.text.length > 0 && !LoginHelper.isLoggingIn
+        onTriggered: {
+            LoginHelper.login();
+        }
+    }
+
+    Connections {
+        target: LoginHelper
+        function onConnected() {
+            processed("qrc:/Loading.qml")
+        }
+    }
+
+    Kirigami.FormLayout {
+        Kirigami.PasswordField {
+            id: passwordField
+            onTextChanged: LoginHelper.password = text
+            enabled: !LoginHelper.isLoggingIn
+
+            Component.onCompleted: {
+                passwordField.forceActiveFocus()
+            }
+
+            Keys.onReturnPressed: {
+                password.action.trigger()
+            }
+        }
+    }
+}

src/qml/Component/Login/Sso.qml

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// 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.12 as Kirigami
+
+import org.kde.neochat 1.0
+
+LoginStep {
+    id: root
+
+    title: i18nc("@title", "Login")
+    message: i18n("Login with single sign-on")
+
+    Kirigami.FormLayout {
+        Connections {
+            target: LoginHelper
+            function onSsoUrlChanged() {
+                UrlHelper.openUrl(LoginHelper.ssoUrl)
+            }
+            function onConnected() {
+                processed("qrc:/Loading.qml")
+            }
+        }
+        RowLayout {
+            QQC2.Button {
+                text: i18nc("@action:button", "Back")
+
+                onClicked: {
+                    module.source = "qrc:/Login.qml"
+                }
+            }
+            QQC2.Button {
+                text: i18n("Login")
+                onClicked: {
+                    LoginHelper.loginWithSso()
+                    root.showMessage(i18n("Complete the authentication steps in your browser"))
+                }
+                Component.onCompleted: forceActiveFocus()
+                Keys.onReturnPressed: clicked()
+            }
+        }
+    }
+}

src/qml/Component/QuickSwitcher.qml

@@ -0,0 +1,108 @@
+// SPDX-FileCopyrightText: 2021 Carson Black <uhhadd@gmail.com>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.10
+import QtQuick.Controls 2.12 as QQC2
+import org.kde.kirigami 2.14 as Kirigami
+import org.kde.kitemmodels 1.0
+import org.kde.neochat 1.0
+
+QQC2.Popup {
+    id: _popup
+
+    Shortcut {
+        sequence: "Ctrl+K"
+        enabled: !Kirigami.Settings.hasPlatformMenuBar
+        onActivated: _popup.open()
+    }
+
+    onVisibleChanged: {
+        if (!visible) {
+            return
+        }
+        quickSearch.forceActiveFocus()
+        quickSearch.text = ""
+    }
+
+    anchors.centerIn: QQC2.Overlay.overlay
+    background: Kirigami.Card {}
+    height: 2 * Math.round(implicitHeight / 2)
+    padding: Kirigami.Units.largeSpacing * 2
+
+    contentItem: ColumnLayout {
+        spacing: Kirigami.Units.largeSpacing * 2
+
+        Kirigami.SearchField {
+            id: quickSearch
+
+            // TODO: get this broken property removed/disabled by default in Kirigami,
+            // we used to be able to expect that the text field wouldn't attempt to
+            // perform a mini-DDOS attack using signals.
+            autoAccept: false
+
+            Layout.preferredWidth: Kirigami.Units.gridUnit * 21 // 3 * 7 = 21, roughly 7 avatars on screen
+            Keys.onLeftPressed: cView.decrementCurrentIndex()
+            Keys.onRightPressed: cView.incrementCurrentIndex()
+            onAccepted: {
+                const item = cView.itemAtIndex(cView.currentIndex)
+
+                RoomManager.enterRoom(item.currentRoom)
+
+                _popup.close()
+            }
+        }
+        ListView {
+            id: cView
+
+            orientation: Qt.Horizontal
+            spacing: Kirigami.Units.largeSpacing
+
+            model: SortFilterRoomListModel {
+                id: sortFilterRoomListModel
+                sourceModel: RoomListModel {
+                    id: roomListModel
+                    connection: Controller.activeConnection
+                }
+                filterText: quickSearch.text
+                roomSortOrder: SortFilterRoomListModel.LastActivity
+            }
+
+            Layout.preferredHeight: Kirigami.Units.gridUnit * 3
+            Layout.fillWidth: true
+
+            delegate: Kirigami.Avatar {
+                id: del
+
+                implicitHeight: Kirigami.Units.gridUnit * 3
+                implicitWidth: Kirigami.Units.gridUnit * 3
+
+                required property string avatar
+                required property var currentRoom
+                required property int index
+
+                // When an item is hovered set the currentIndex of listview to it so that it is highlighted
+                onHoveredChanged: {
+                    if (!hovered) {
+                        return
+                    }
+                    cView.currentIndex = index
+                }
+
+                actions.main: Kirigami.Action {
+                    id: enterRoomAction
+                    onTriggered: {
+                        RoomManager.enterRoom(currentRoom);
+
+                        _popup.close()
+                    }
+                }
+
+                source: avatar != "" ? "image://mxc/" + avatar : ""
+            }
+        }
+    }
+
+    modal: true
+    focus: true
+}

src/qml/Component/ShimmerGradient.qml

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2021 Carson Black <uhhadd@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
+
+// Not to be confused with the Shimmer project.
+// I like their gradiented GTK themes though.
+
+import QtQuick 2.15
+import org.kde.kirigami 2.15 as Kirigami
+
+Gradient {
+    id: gradient
+
+    orientation: Gradient.Horizontal
+
+    property color color: Kirigami.Theme.textColor
+    property color translucent: Qt.rgba(color.r, color.g, color.b, 0.2)
+    property color bright: Qt.rgba(color.r, color.g, color.b, 0.3)
+    property real pos: 0.5
+    property real offset: 0.6
+
+    property SequentialAnimation ani: SequentialAnimation {
+        running: true
+        loops: Animation.Infinite
+        NumberAnimation {
+            from: -2.0
+            to: 2.0
+            duration: 700
+            target: gradient
+            properties: "pos"
+        }
+        PauseAnimation {
+            duration: 300
+        }
+    }
+
+    GradientStop { position: gradient.pos-gradient.offset; color: gradient.translucent }
+    GradientStop { position: gradient.pos; color: gradient.bright }
+    GradientStop { position: gradient.pos+gradient.offset; color: gradient.translucent }
+}

src/qml/Component/Timeline/AudioDelegate.qml

@@ -0,0 +1,127 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtMultimedia 5.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: audioDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+
+    onOpenContextMenu: openFileContext(model, audioDelegate)
+
+    readonly property bool downloaded: model.progressInfo && model.progressInfo.completed
+    onDownloadedChanged: audio.play()
+
+    hoverComponent: hoverActions
+    innerObject: ColumnLayout {
+        Layout.maximumWidth: audioDelegate.contentMaxWidth
+
+        Audio {
+            id: audio
+            source: model.progressInfo.localPath
+            autoLoad: false
+        }
+
+        states: [
+            State {
+                name: "notDownloaded"
+                when: !model.progressInfo.completed && !model.progressInfo.active
+
+                PropertyChanges {
+                    target: playButton
+                    icon.name: "media-playback-start"
+                    onClicked: currentRoom.downloadFile(model.eventId)
+                }
+            },
+            State {
+                name: "downloading"
+                when: model.progressInfo.active && !model.progressInfo.completed
+                PropertyChanges {
+                    target: downloadBar
+                    visible: true
+                }
+                PropertyChanges {
+                    target: playButton
+                    icon.name: "media-playback-stop"
+                    onClicked: {
+                        currentRoom.cancelFileTransfer(model.eventId)
+                    }
+                }
+            },
+            State {
+                name: "paused"
+                when: model.progressInfo.completed && (audio.playbackState === Audio.StoppedState || audio.playbackState === Audio.PausedState)
+                PropertyChanges {
+                    target: playButton
+                    icon.name: "media-playback-start"
+                    onClicked: {
+                        audio.play()
+                    }
+                }
+            },
+            State {
+                name: "playing"
+                when: model.progressInfo.completed && audio.playbackState === Audio.PlayingState
+
+                PropertyChanges {
+                    target: playButton
+
+                    icon.name: "media-playback-pause"
+
+                    onClicked: audio.pause()
+                }
+            }
+        ]
+
+        RowLayout {
+            ToolButton {
+                id: playButton
+            }
+            Label {
+                text: model.display
+                wrapMode: Text.Wrap
+                Layout.fillWidth: true
+            }
+        }
+        ProgressBar {
+            id: downloadBar
+            visible: false
+            Layout.fillWidth: true
+            from: 0
+            to: model.content.info.size
+            value: model.progressInfo.progress
+        }
+        RowLayout {
+            visible: audio.hasAudio
+
+            Slider {
+                Layout.fillWidth: true
+                from: 0
+                to: audio.duration
+                value: audio.position
+                onMoved: audio.seek(value)
+            }
+
+            Label {
+                visible: audioDelegate.contentMaxWidth > Kirigami.Units.gridUnit * 12
+
+                text: Controller.formatDuration(audio.position) + "/" + Controller.formatDuration(audio.duration)
+            }
+        }
+        Label {
+            Layout.alignment: Qt.AlignRight
+            Layout.rightMargin: Kirigami.Units.smallSpacing
+            visible: audio.hasAudio && audioDelegate.contentMaxWidth < Kirigami.Units.gridUnit * 12
+
+            text: Controller.formatDuration(audio.position) + "/" + Controller.formatDuration(audio.duration)
+        }
+    }
+}

src/qml/Component/Timeline/EncryptedDelegate.qml

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: encryptedDelegate
+
+    innerObject: TextEdit {
+        text: i18n("This message is encrypted and the sender has not shared the key with this device.")
+        color: Kirigami.Theme.disabledTextColor
+        selectedTextColor: Kirigami.Theme.highlightedTextColor
+        selectionColor: Kirigami.Theme.highlightColor
+        font.pointSize: Kirigami.Theme.defaultFont.pointSize
+        selectByMouse: !Kirigami.Settings.isMobile
+        readOnly: true
+        wrapMode: Text.WordWrap
+        textFormat: Text.RichText
+        Layout.maximumWidth: encryptedDelegate.contentMaxWidth
+        Layout.leftMargin: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing : 0
+    }
+}

src/qml/Component/Timeline/EventDelegate.qml

@@ -0,0 +1,77 @@
+// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.qmlmodels 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+DelegateChooser {
+    role: "eventType"
+
+    DelegateChoice {
+        roleValue: "state"
+        delegate: StateDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "emote"
+        delegate: MessageDelegate {
+            isEmote: true
+        }
+    }
+
+    DelegateChoice {
+        roleValue: "message"
+        delegate: MessageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "notice"
+        delegate: MessageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "image"
+        delegate: ImageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "sticker"
+        delegate: ImageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "audio"
+        delegate: AudioDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "video"
+        delegate: VideoDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "file"
+        delegate: FileDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "encrypted"
+        delegate: EncryptedDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "readMarker"
+        delegate: ReadMarkerDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "other"
+        delegate: Item {}
+    }
+}

src/qml/Component/Timeline/FileDelegate.qml

@@ -0,0 +1,134 @@
+// SPDX-FileCopyrightText: 2018-2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: fileDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    onOpenContextMenu: openFileContext(model, fileDelegate)
+
+    readonly property bool downloaded: progressInfo && progressInfo.completed
+
+    function saveFileAs() {
+        const dialog = fileDialog.createObject(QQC2.ApplicationWindow.overlay)
+        dialog.open()
+        dialog.currentFile = dialog.folder + "/" + currentRoom.fileNameToDownload(eventId)
+    }
+
+    function openSavedFile() {
+        if (UrlHelper.openUrl(progressInfo.localPath)) return;
+        if (UrlHelper.openUrl(progressInfo.localDir)) return;
+    }
+
+    innerObject: RowLayout {
+
+        Layout.fillWidth: true
+        Layout.maximumWidth: fileDelegate.contentMaxWidth
+        Layout.margins: Kirigami.Units.largeSpacing
+
+        spacing: Kirigami.Units.largeSpacing
+
+        states: [
+            State {
+                name: "downloaded"
+                when: progressInfo.completed
+
+                PropertyChanges {
+                    target: downloadButton
+
+                    icon.name: "document-open"
+
+                    QQC2.ToolTip.text: i18nc("tooltip for a button on a message; offers ability to open its downloaded file with an appropriate application", "Open File")
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+
+                    onClicked: openSavedFile()
+                }
+            },
+            State {
+                name: "downloading"
+                when: progressInfo.active
+
+                PropertyChanges {
+                    target: sizeLabel
+                    text: i18nc("file download progress", "%1 / %2", Controller.formatByteSize(progressInfo.progress), Controller.formatByteSize(progressInfo.total))
+                }
+                PropertyChanges {
+                    target: downloadButton
+                    icon.name: "media-playback-stop"
+
+                    QQC2.ToolTip.text: i18nc("tooltip for a button on a message; stops downloading the message's file", "Stop Download")
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                    onClicked: currentRoom.cancelFileTransfer(eventId)
+                }
+            },
+            State {
+                name: "raw"
+                when: true
+
+                PropertyChanges {
+                    target: downloadButton
+
+                    onClicked: fileDelegate.saveFileAs()
+                }
+            }
+        ]
+
+        Kirigami.Icon {
+            id: ikon
+            source: model.fileMimetypeIcon
+            fallback: "unknown"
+        }
+        ColumnLayout {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+
+            spacing: 0
+
+            QQC2.Label {
+                text: model.display
+                wrapMode: Text.Wrap
+
+                Layout.fillWidth: true
+            }
+            QQC2.Label {
+                id: sizeLabel
+
+                text: Controller.formatByteSize(content.info ? content.info.size : 0)
+                opacity: 0.7
+
+                Layout.fillWidth: true
+            }
+        }
+
+        QQC2.Button {
+            id: downloadButton
+            icon.name: "download"
+
+            QQC2.ToolTip.text: i18nc("tooltip for a button on a message; offers ability to download its file", "Download")
+            QQC2.ToolTip.visible: hovered
+        }
+
+        Component {
+            id: fileDialog
+
+            FileDialog {
+                fileMode: FileDialog.SaveFile
+                folder: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
+                onAccepted: {
+                    currentRoom.downloadFile(eventId, file)
+                }
+            }
+        }
+    }
+}

src/qml/Component/Timeline/ImageDelegate.qml

@@ -0,0 +1,120 @@
+// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: imageDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    onOpenContextMenu: openFileContext(model, imageDelegate)
+
+    property var content: model.content
+    readonly property bool isAnimated: contentType === "image/gif"
+
+    property bool openOnFinished: false
+    readonly property bool downloaded: progressInfo && progressInfo.completed
+
+    readonly property bool isThumbnail: !(content.info.thumbnail_info == null || content.thumbnailMediaId == null)
+    //    readonly property var info: isThumbnail ? content.info.thumbnail_info : content.info
+    readonly property var info: content.info
+    readonly property string mediaId: isThumbnail ? content.thumbnailMediaId : content.mediaId
+
+    innerObject: Image {
+        id: img
+
+        Layout.maximumWidth: imageDelegate.contentMaxWidth
+        Layout.maximumHeight: imageDelegate.contentMaxWidth / sourceSize.width * sourceSize.height
+        Layout.preferredWidth: imageDelegate.info.w > 0 ? imageDelegate.info.w : sourceSize.width
+        Layout.preferredHeight: imageDelegate.info.h > 0 ? imageDelegate.info.h : sourceSize.height
+        source: model.mediaUrl
+
+        Image {
+            anchors.fill: parent
+            source: content.info["xyz.amorgan.blurhash"] ? ("image://blurhash/" + content.info["xyz.amorgan.blurhash"]) : ""
+            visible: parent.status !== Image.Ready
+        }
+
+        fillMode: Image.PreserveAspectFit
+
+        ToolTip.text: model.display
+        ToolTip.visible: hoverHandler.hovered
+        ToolTip.delay: Kirigami.Units.toolTipDelay
+
+        HoverHandler {
+            id: hoverHandler
+        }
+
+        Rectangle {
+            anchors.fill: parent
+
+            visible: progressInfo.active && !downloaded
+
+            color: "#BB000000"
+
+            ProgressBar {
+                anchors.centerIn: parent
+
+                width: parent.width * 0.8
+
+                from: 0
+                to: progressInfo.total
+                value: progressInfo.progress
+            }
+        }
+
+        Component {
+            id: fileDialog
+
+            FileDialog {
+                fileMode: FileDialog.SaveFile
+                folder: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
+                onAccepted: {
+                    currentRoom.downloadFile(eventId, file)
+                }
+            }
+        }
+
+        TapHandler {
+            acceptedButtons: Qt.LeftButton
+            onLongPressed: openFileContext(model, parent)
+            onTapped: {
+                img.ToolTip.hide()
+                fullScreenImage.open()
+            }
+        }
+
+        FullScreenImage {
+            id: fullScreenImage
+            filename: eventId
+            source: mediaUrl
+            blurhash: model.content.info["xyz.amorgan.blurhash"]
+            imageWidth: content.info.w
+            imageHeight: content.info.h
+            modelData: model
+        }
+
+        function downloadAndOpen() {
+            if (downloaded) {
+                openSavedFile()
+            } else {
+                openOnFinished = true
+                currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_").replace("/", "_").replace("+", "_") + currentRoom.fileNameToDownload(eventId))
+            }
+        }
+
+        function openSavedFile() {
+            if (UrlHelper.openUrl(progressInfo.localPath)) return;
+            if (UrlHelper.openUrl(progressInfo.localDir)) return;
+        }
+    }
+}

src/qml/Component/Timeline/LinkPreviewDelegate.qml

@@ -0,0 +1,77 @@
+// SPDX-FileCopyrightText: 2022 Bharadwaj Raju <bharadwaj.raju777@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-or-later OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+RowLayout {
+    id: row
+    readonly property var customEmojiLinksRegex: /data-mx-emoticon=""  src="(\bhttps?:\/\/[^\s\<\>\"\']*[^\s\<\>\"\'])/g
+    readonly property var customEmojiLinks: {
+        let links = [];
+        // we need all this because QML JS doesn't support String.matchAll introduced in ECMAScript 2020
+        let match = customEmojiLinksRegex.exec(model.display);
+        while (match !== null) {
+            links.push(match[1])
+            match = customEmojiLinksRegex.exec(model.display);
+        }
+        return links;
+    }
+    property var links: model.display.match(/(\bhttps?:\/\/[^\s\<\>\"\']*[^\s\<\>\"\'])/g)
+        // don't show previews for room links or user mentions or custom emojis
+        .filter(link => !(
+            link.includes("https://matrix.to") || (customEmojiLinks && customEmojiLinks.includes(link))
+        ))
+        // remove ending fullstops and commas
+        .map(link => (link.length && [".", ","].includes(link[link.length-1])) ? link.substring(0, link.length-1) : link)
+    LinkPreviewer {
+        id: lp
+        url: links[0]
+    }
+    visible: lp.loaded && lp.title
+    Rectangle {
+        Layout.fillHeight: true
+        width: Kirigami.Units.smallSpacing
+        visible: lp.loaded && lp.title
+        color: Kirigami.Theme.highlightColor
+    }
+    Image {
+        visible: lp.imageSource
+        Layout.maximumHeight: Kirigami.Units.gridUnit * 5
+        Layout.maximumWidth: Kirigami.Units.gridUnit * 5
+        source: lp.imageSource.replace("mxc://", "image://mxc/")
+        fillMode: Image.PreserveAspectFit
+    }
+    ColumnLayout {
+        id: column
+        spacing: Kirigami.Units.smallSpacing
+        Kirigami.Heading {
+            Layout.maximumWidth: messageDelegate.bubbleMaxWidth
+            Layout.fillWidth: true
+            level: 4
+            wrapMode: Text.Wrap
+            textFormat: Text.RichText
+            text: "<style>
+a {
+    text-decoration: none;
+}
+</style>
+            <a href=\"" + links[0] + "\">" + lp.title.replace("&ndash;", "—") + "</a>"
+            visible: lp.loaded
+            onLinkActivated: RoomManager.openResource(link)
+        }
+        Label {
+            text: lp.description
+            Layout.maximumWidth: messageDelegate.bubbleMaxWidth
+            Layout.fillWidth: true
+            wrapMode: Text.Wrap
+            visible: lp.loaded && lp.description
+        }
+    }
+}
+

src/qml/Component/Timeline/MessageDelegate.qml

@@ -0,0 +1,40 @@
+// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.qmlmodels 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: messageDelegate
+
+    property bool isEmote: false
+    onOpenContextMenu: openMessageContext(model, label.selectedText, Controller.plainText(label.textDocument))
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    innerObject: ColumnLayout {
+        Layout.maximumWidth: messageDelegate.contentMaxWidth
+        RichLabel {
+            id: label
+            Layout.fillWidth: true
+            isEmote: messageDelegate.isEmote
+        }
+        Loader {
+            id: linkPreviewLoader
+            Layout.fillWidth: true
+            height: active ? item.implicitHeight : 0
+            active: !currentRoom.usesEncryption && model.display && model.display.includes("http")
+            visible: Config.showLinkPreview && active
+            sourceComponent: LinkPreviewDelegate {
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+}

src/qml/Component/Timeline/MimeComponent.qml

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+RowLayout {
+    property alias mimeIconSource: icon.source
+    property alias label: nameLabel.text
+    property alias subLabel: subLabel.text
+
+    spacing: Kirigami.Units.largeSpacing
+
+    Kirigami.Icon {
+        id: icon
+
+        fallback: "unknown"
+    }
+    ColumnLayout {
+        Layout.alignment: Qt.AlignVCenter
+        Layout.fillWidth: true
+
+        spacing: 0
+
+        QQC2.Label {
+            id: nameLabel
+
+            Layout.fillWidth: true
+            Layout.alignment: subLabel.visible ? Qt.AlignLeft | Qt.AlignBottom : Qt.AlignLeft | Qt.AlignVCenter
+
+            elide: Text.ElideRight
+        }
+        QQC2.Label {
+            id: subLabel
+
+            Layout.fillWidth: true
+
+            elide: Text.ElideRight
+            visible: text.length > 0
+            opacity: 0.7
+        }
+    }
+}

src/qml/Component/Timeline/ReactionDelegate.qml

@@ -0,0 +1,69 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+Flow {
+    spacing: Kirigami.Units.largeSpacing
+    Repeater {
+        model: reaction ?? null
+
+        delegate: AbstractButton {
+            width: Math.max(implicitWidth, height)
+
+            contentItem: Label {
+                horizontalAlignment: Text.AlignHCenter
+                text: modelData.reaction + " " + modelData.count
+            }
+
+            padding: Kirigami.Units.smallSpacing
+
+            background: Kirigami.ShadowedRectangle {
+                color: checked ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                radius: height / 2
+                shadow.size: Kirigami.Units.smallSpacing
+                shadow.color: !model.isHighlighted ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                border.width: 1
+            }
+
+
+            checkable: true
+
+            checked: modelData.hasLocalUser
+
+            onToggled: currentRoom.toggleReaction(eventId, modelData.reaction)
+
+            hoverEnabled: true
+
+            ToolTip.visible: hovered
+            ToolTip.text: {
+                var text = "";
+
+                for (var i = 0; i < modelData.authors.length && i < 3; i++) {
+                    if (i !== 0) {
+                        if (i < modelData.authors.length - 1) {
+                            text += ", "
+                        } else {
+                            text += i18nc("Separate the usernames of users", " and ")
+                        }
+                    }
+                    text += modelData.authors[i].displayName
+                }
+                if (modelData.authors.length > 3) {
+                    text += i18ncp("%1 is the number of other users", " and %1 other", " and %1 others", modelData.authors.length - 3)
+                }
+
+                text = i18ncp("%2 is the users who reacted and %3 the emoji that was given", "%2 reacted with %3", "%2 reacted with %3", modelData.authors.length, text, modelData.reaction)
+
+                return text
+            }
+        }
+    }
+}
+

src/qml/Component/Timeline/ReadMarkerDelegate.qml

@@ -0,0 +1,116 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.qmlmodels 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+QQC2.ItemDelegate {
+    id: readMarkerDelegate
+    padding: Kirigami.Units.largeSpacing
+    topInset: Kirigami.Units.largeSpacing
+    topPadding: Kirigami.Units.largeSpacing * 2
+
+    // extraWidth defines how the delegate can grow after the listView gets very wide
+    readonly property int extraWidth: messageListView.width >= Kirigami.Units.gridUnit * 46 ? Math.min((messageListView.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width - Kirigami.Units.largeSpacing * 2 : Math.min(messageListView.width - Kirigami.Units.largeSpacing * 2, Kirigami.Units.gridUnit * 40 + extraWidth)
+
+    width: delegateMaxWidth
+    anchors.leftMargin: Kirigami.Units.largeSpacing
+    anchors.rightMargin: Kirigami.Units.largeSpacing
+
+    state: Config.compactLayout ? "alignLeft" : "alignCenter"
+    // Align left when in compact mode and center when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: readMarkerDelegate
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCenter"
+            AnchorChanges {
+                target: readMarkerDelegate
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation {
+                duration: Kirigami.Units.longDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+    ]
+
+    contentItem: QQC2.Label {
+        text: i18nc("Relative time since the room was last read", "Last read: %1", time)
+    }
+
+    background: Kirigami.ShadowedRectangle {
+        color: Kirigami.Theme.backgroundColor
+        opacity: 0.6
+        radius: Kirigami.Units.smallSpacing
+        shadow.size: Kirigami.Units.smallSpacing
+        shadow.color: Qt.rgba(0.0, 0.0, 0.0, 0.10)
+        border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+        border.width: 1
+    }
+
+    Timer {
+        id: makeMeDisapearTimer
+        interval: Kirigami.Units.humanMoment * 2
+        onTriggered: if (QQC2.ApplicationWindow.window.visibility !== QQC2.ApplicationWindow.Hidden) {
+            currentRoom.markAllMessagesAsRead();
+        }
+    }
+
+    ListView.onPooled: makeMeDisapearTimer.stop()
+
+    ListView.onAdd: {
+        const view = ListView.view;
+        if (view.atYEnd) {
+            makeMeDisapearTimer.start()
+        }
+    }
+
+    // When the read marker is visible and we are at the end of the list,
+    // start the makeMeDisapearTimer
+    Connections {
+        target: ListView.view
+        function onAtYEndChanged() {
+            makeMeDisapearTimer.start();
+        }
+    }
+
+
+    ListView.onRemove: {
+        const view = ListView.view;
+
+        if (view.atYEnd) {
+            // easy case just mark everything as read
+            if (QQC2.ApplicationWindow.window.visibility !== QQC2.ApplicationWindow.Hidden) {
+                currentRoom.markAllMessagesAsRead();
+            }
+            return;
+        }
+
+        // mark the last visible index
+        const lastVisibleIdx = lastVisibleIndex();
+
+        if (lastVisibleIdx < index) {
+            currentRoom.readMarkerEventId = sortedMessageEventModel.data(sortedMessageEventModel.index(lastVisibleIdx, 0), MessageEventModel.EventIdRole)
+        }
+    }
+}

src/qml/Component/Timeline/ReplyComponent.qml

@@ -0,0 +1,127 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Item {
+    id: replyComponent
+
+    signal replyClicked()
+
+    property var name
+    property alias avatar: replyAvatar.source
+    property var color
+
+    implicitWidth: mainLayout.implicitWidth
+    implicitHeight: mainLayout.implicitHeight
+
+    GridLayout {
+        id: mainLayout
+
+        anchors.fill: parent
+
+        rows: 2
+        columns: 3
+        rowSpacing: Kirigami.Units.smallSpacing
+        columnSpacing: Kirigami.Units.largeSpacing
+
+        Rectangle {
+            id: verticalBorder
+
+            Layout.fillHeight: true
+            Layout.rowSpan: 2
+
+            implicitWidth: Kirigami.Units.smallSpacing
+            color: replyComponent.color
+        }
+        Kirigami.Avatar {
+            id: replyAvatar
+
+            implicitWidth: Kirigami.Units.iconSizes.small
+            implicitHeight: Kirigami.Units.iconSizes.small
+
+            name: replyComponent.name || ""
+            color: replyComponent.color
+        }
+        QQC2.Label {
+            Layout.fillWidth: true
+
+            color: replyComponent.color
+            text: replyComponent.name
+            elide: Text.ElideRight
+        }
+        Loader {
+            id: loader
+
+            Layout.fillWidth: true
+            Layout.columnSpan: 2
+
+            sourceComponent: {
+                switch (reply.type) {
+                    case "image":
+                    case "sticker":
+                        return imageComponent;
+                    case "message":
+                    case "notice":
+                        return textComponent;
+                    case "file":
+                    case "video":
+                    case "audio":
+                        return mimeComponent;
+                    case "encrypted":
+                        return encryptedComponent;
+                    default:
+                        return textComponent;
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            replyComponent.replyClicked()
+        }
+    }
+
+    Component {
+        id: textComponent
+        RichLabel {
+            textMessage: reply.display
+            textFormat: Text.RichText
+        }
+    }
+    Component {
+        id: imageComponent
+        Image {
+            id: image
+            readonly property var content: reply.content
+            readonly property bool isThumbnail: !(content.info.thumbnail_info == null || content.thumbnailMediaId == null)
+            readonly property var info: content.info
+            readonly property string mediaId: isThumbnail ? content.thumbnailMediaId : content.mediaId
+            source: "image://mxc/" + mediaId
+        }
+    }
+    Component {
+        id: mimeComponent
+        MimeComponent {
+            mimeIconSource: reply.content.info.mimetype.replace("/", "-")
+            label: reply.display
+            subLabel: reply.type === "file" ? Controller.formatByteSize(reply.content.info ? reply.content.info.size : 0) : Controller.formatDuration(reply.content.info.duration)
+        }
+    }
+    Component {
+        id: encryptedComponent
+        RichLabel {
+            textMessage: i18n("This message is encrypted and the sender has not shared the key with this device.")
+            textFormat: Text.RichText
+        }
+    }
+}

src/qml/Component/Timeline/RichLabel.qml

@@ -0,0 +1,118 @@
+// SPDX-FileCopyrightText: 2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.neochat 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+TextEdit {
+    id: contentLabel
+
+    readonly property var isEmoji: /^(<span style='.*'>)?(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+(<\/span>)?$/
+    readonly property var hasSpoiler: /data-mx-spoiler/g
+
+    property bool isEmote: false
+
+    /* Turn all links which aren't already in <a> tags into <a> hyperlinks */
+    readonly property var customEmojiLinksRegex: /data-mx-emoticon=""  src="(\bhttps?:\/\/[^\s\<\>\"\']*[^\s\<\>\"\'])/g
+    readonly property var customEmojiLinks: {
+        let links = [];
+        // we need all this because QML JS doesn't support String.matchAll introduced in ECMAScript 2020
+        let match = customEmojiLinksRegex.exec(model.display);
+        while (match !== null) {
+            links.push(match[1])
+            match = customEmojiLinksRegex.exec(model.display);
+        }
+        return links;
+    }
+    readonly property var linkRegex: /(href=["'])?(\b(https?):\/\/[^\s\<\>\"\'\\]+)/g
+    property string textMessage: model.display.includes("http")
+        ? model.display.replace(linkRegex, function() {
+            if (customEmojiLinks && customEmojiLinks.includes(arguments[0])) {
+                return arguments[0];
+            }
+            if (arguments[1]) {
+                return arguments[0];
+            }
+            const l = arguments[2];
+            if ([".", ","].includes(l[l.length-1])) {
+                const link = l.substring(0, l.length-1);
+                const leftover = l[l.length-1];
+                return `<a href="${link}">${link}</a>${leftover}`;
+            }
+            return `<a href="${l}">${l}</a>`;
+        })
+        : model.display
+    property bool spoilerRevealed: !hasSpoiler.test(textMessage)
+
+    ListView.onReused: Qt.binding(() => !hasSpoiler.test(textMessage))
+
+    persistentSelection: true
+
+    // Work around QTBUG 93281
+    Component.onCompleted: if (text.includes("<img")) {
+        Controller.forceRefreshTextDocument(contentLabel.textDocument, contentLabel)
+    }
+
+    text: "<style>
+table {
+    width:100%;
+    border-width: 1px;
+    border-collapse: collapse;
+    border-style: solid;
+}
+table th,
+table td {
+    border: 1px solid black;
+    padding: 3px;
+}
+pre {
+    white-space: pre-wrap
+}
+a{
+    color: " + Kirigami.Theme.linkColor + ";
+    text-decoration: none;
+}
+" + (!spoilerRevealed ? "
+[data-mx-spoiler] a {
+    color: transparent;
+    background: " + Kirigami.Theme.textColor + ";
+}
+[data-mx-spoiler] {
+    color: transparent;
+    background: " + Kirigami.Theme.textColor + ";
+}
+" : "") + "
+</style>" + (isEmote ? "* <a href='https://matrix.to/#/" + author.id + "' style='color: " + author.color + "'>" + author.displayName + "</a> " : "") + textMessage + (isEdited ? (" <span style=\"color: " + Kirigami.Theme.disabledTextColor + "\">" + "<span style='font-size: " + Kirigami.Theme.defaultFont.pixelSize +"px'>" + i18n(" (edited)") + "</span>") : "")
+
+    color: Kirigami.Theme.textColor
+    selectedTextColor: Kirigami.Theme.highlightedTextColor
+    selectionColor: Kirigami.Theme.highlightColor
+    font.pointSize: model.reply === undefined && isEmoji.test(model.display) ? Kirigami.Theme.defaultFont.pointSize * 4 : Kirigami.Theme.defaultFont.pointSize
+    selectByMouse: !Kirigami.Settings.isMobile
+    readOnly: true
+    wrapMode: Text.Wrap
+    textFormat: Text.RichText
+
+    onLinkActivated: {
+        spoilerRevealed = true
+        RoomManager.openResource(link)
+    }
+    onHoveredLinkChanged: if (hoveredLink.length > 0 && hoveredLink !== "1") {
+        applicationWindow().hoverLinkIndicator.text = hoveredLink;
+    } else {
+        applicationWindow().hoverLinkIndicator.text = "";
+    }
+
+    HoverHandler {
+        cursorShape: (parent.hoveredLink || !spoilerRevealed) ? Qt.PointingHandCursor : Qt.IBeamCursor
+    }
+
+    TapHandler {
+        enabled: !parent.hoveredLink && !spoilerRevealed
+        onTapped: spoilerRevealed = true
+    }
+}

src/qml/Component/Timeline/SectionDelegate.qml

@@ -0,0 +1,17 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+Kirigami.Heading {
+    level: 4
+    text: model.showSection ? section : ""
+    color: Kirigami.Theme.disabledTextColor
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+    topPadding: Kirigami.Units.largeSpacing * 2
+    bottomPadding: Kirigami.Units.smallSpacing
+}

src/qml/Component/Timeline/StateDelegate.qml

@@ -0,0 +1,101 @@
+// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Control {
+    id: stateDelegate
+    // extraWidth defines how the delegate can grow after the listView gets very wide
+    readonly property int extraWidth: messageListView.width >= Kirigami.Units.gridUnit * 46 ? Math.min((messageListView.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width: Math.min(messageListView.width, Kirigami.Units.gridUnit * 40 + extraWidth)
+
+    width: delegateMaxWidth
+//     anchors.leftMargin: Kirigami.Units.largeSpacing
+//     anchors.rightMargin: Kirigami.Units.largeSpacing
+
+    state: Config.compactLayout ? "alignLeft" : "alignCenter"
+    // Align left when in compact mode and center when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: stateDelegate
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCenter"
+            AnchorChanges {
+                target: stateDelegate
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+        }
+    ]
+
+    height: sectionDelegate.height + rowLayout.height
+    SectionDelegate {
+        id: sectionDelegate
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        visible: model.showSection
+        height: visible ? implicitHeight : 0
+    }
+
+    RowLayout {
+        id: rowLayout
+        height: label.contentHeight
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: Kirigami.Units.gridUnit * 1.5 + Kirigami.Units.smallSpacing + (Config.compactLayout ? Kirigami.Units.largeSpacing * 1.25 : 0)
+        anchors.rightMargin: Kirigami.Units.largeSpacing
+
+        Kirigami.Avatar {
+            id: icon
+            Layout.preferredWidth: Kirigami.Units.iconSizes.small
+            Layout.preferredHeight: Kirigami.Units.iconSizes.small
+            Layout.alignment: Qt.AlignTop
+
+            name: model.displayNameForInitials
+            source: author.avatarMediaId ? ("image://mxc/" + author.avatarMediaId) : ""
+            color: author.color
+
+            Component {
+                id: userDetailDialog
+
+                UserDetailDialog {}
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
+            }
+        }
+
+        Label {
+            id: label
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+            Layout.preferredHeight: icon.height
+            wrapMode: Text.WordWrap
+            textFormat: Text.RichText
+            text: `<style>a {text-decoration: none;}</style><a href="https://matrix.to/#/${author.id}" style="color: ${author.color}">${model.authorDisplayName}</a> ${aggregateDisplay}`
+            onLinkActivated: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
+        }
+    }
+}

src/qml/Component/Timeline/TimelineContainer.qml

@@ -0,0 +1,325 @@
+// SPDX-FileCopyrightText: 2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+QQC2.ItemDelegate {
+    id: timelineContainer
+    default property alias innerObject : column.children
+    // readonly property bool failed: marks == EventStatus.SendingFailed
+
+    property bool isEmote: false
+    property bool cardBackground: true
+    property bool isHighlighted: model.isHighlighted || isTemporaryHighlighted
+    property bool isTemporaryHighlighted: false
+
+    onIsTemporaryHighlightedChanged: if (isTemporaryHighlighted) temporaryHighlightTimer.start()
+
+    Timer {
+        id: temporaryHighlightTimer
+
+        interval: 1500
+        onTriggered: isTemporaryHighlighted = false
+    }
+
+    signal openContextMenu
+
+    // The bubble and delegate widths are allowed to grow once the ListView gets beyond a certain size
+    // extraWidth defines this as the excess after a certain ListView width, capped to a max value
+    readonly property int extraWidth: messageListView.width >= Kirigami.Units.gridUnit * 46 ? Math.min((messageListView.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0
+    readonly property int bubbleMaxWidth: Kirigami.Units.gridUnit * 20 + extraWidth * 0.5
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width : Math.min(messageListView.width, Kirigami.Units.gridUnit * 40 + extraWidth)
+    readonly property int contentMaxWidth: Config.compactLayout ? width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) - Kirigami.Units.largeSpacing * 4 : Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 6, bubbleMaxWidth)
+
+    property bool showUserMessageOnRight: Config.showLocalMessagesOnRight &&
+        model.author.isLocalUser && !Config.compactLayout
+
+    signal openExternally()
+    signal replyClicked(string eventID)
+
+    Component.onCompleted: {
+        if (model.isReply && model.reply === undefined) {
+            messageEventModel.loadReply(sortedMessageEventModel.mapToSource(sortedMessageEventModel.index(model.index, 0)))
+        }
+    }
+
+    topPadding: 0
+    bottomPadding: 0
+    topInset: showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)
+    leftInset: Kirigami.Units.smallSpacing
+    rightInset: Kirigami.Units.smallSpacing
+    width: delegateMaxWidth
+    height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + (showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing))
+    background: Rectangle {
+        visible: timelineContainer.hovered
+        color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
+        radius: Kirigami.Units.smallSpacing
+    }
+
+    property Item hoverComponent
+
+    // show hover actions
+    onHoveredChanged: {
+        if (hovered && !Kirigami.Settings.isMobile) {
+            updateHoverComponent();
+        }
+    }
+
+    // updates the global hover component to point to this delegate, and update its position
+    function updateHoverComponent() {
+        if (hoverComponent) {
+            hoverComponent.delegate = timelineContainer
+            hoverComponent.bubble = bubble
+            hoverComponent.updateFunction = updateHoverComponent;
+            hoverComponent.event = model
+        }
+    }
+
+    state: Config.compactLayout ? "alignLeft" : "alignCenter"
+    // Align left when in compact mode and center when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: timelineContainer
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCenter"
+            AnchorChanges {
+                target: timelineContainer
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+        }
+    ]
+
+    SectionDelegate {
+        id: sectionDelegate
+        width: parent.width
+        anchors.left: avatar.left
+        anchors.leftMargin: Kirigami.Units.smallSpacing
+        visible: model.showSection
+        height: visible ? implicitHeight : 0
+    }
+
+    Kirigami.Avatar {
+        id: avatar
+        width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing * 2 : 0
+        height: width
+        padding: Kirigami.Units.smallSpacing
+        topInset: Kirigami.Units.smallSpacing
+        bottomInset: Kirigami.Units.smallSpacing
+        leftInset: Kirigami.Units.smallSpacing
+        rightInset: Kirigami.Units.smallSpacing
+        sourceSize.width: width
+        sourceSize.height: width
+        anchors {
+            top: sectionDelegate.bottom
+            topMargin: model.showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)
+            left: parent.left
+            leftMargin: Kirigami.Units.smallSpacing
+        }
+
+        visible: model.showAuthor &&
+            Config.showAvatarInTimeline &&
+            (Config.compactLayout || !showUserMessageOnRight)
+        name: model.displayNameForInitials
+        source: visible && model.author.avatarMediaId ? ("image://mxc/" + model.author.avatarMediaId) : ""
+        color: model.author.color
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                    room: currentRoom,
+                    user: author.object,
+                    displayName: author.displayName,
+                    avatarMediaId: author.avatarMediaId,
+                    avatarUrl: author.avatarUrl
+                }).open();
+            }
+            cursorShape: Qt.PointingHandCursor
+        }
+    }
+
+    QQC2.Control {
+        id: bubble
+        topPadding: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : Kirigami.Units.largeSpacing
+        bottomPadding: Config.compactLayout ? Kirigami.Units.mediumSpacing / 2 : Kirigami.Units.largeSpacing
+        leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+        rightPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+        hoverEnabled: true
+
+        anchors {
+            top: avatar.top
+            leftMargin: Kirigami.Units.smallSpacing
+            rightMargin: showUserMessageOnRight ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
+        }
+        // HACK: anchoring didn't reset anchors.right when switching from parent.right to undefined reliably
+        width: Config.compactLayout ? timelineContainer.width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) + Kirigami.Units.largeSpacing * 2 : implicitWidth
+
+        state: showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft"
+        // states for anchor animations on window resize
+        // as setting anchors to undefined did not work reliably
+        states: [
+            State {
+                name: "userMessageOnRight"
+                AnchorChanges {
+                    target: bubble
+                    anchors.left: undefined
+                    anchors.right: parent.right
+                }
+            },
+            State {
+                name: "userMessageOnLeft"
+                AnchorChanges {
+                    target: bubble
+                    anchors.left: avatar.right
+                    anchors.right: undefined
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+            }
+        ]
+
+        contentItem: ColumnLayout {
+            id: column
+            spacing: Kirigami.Units.smallSpacing
+            RowLayout {
+                id: rowLayout
+
+                spacing: Kirigami.Units.smallSpacing
+                visible: model.showAuthor && !isEmote
+
+                QQC2.Label {
+                    id: nameLabel
+
+                    Layout.maximumWidth: contentMaxWidth - timeLabel.implicitWidth - rowLayout.spacing
+
+                    text: visible ? author.displayName : ""
+                    textFormat: Text.PlainText
+                    font.weight: Font.Bold
+                    color: author.color
+                    elide: Text.ElideRight
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                                room: currentRoom,
+                                user: author.object,
+                                displayName: author.displayName,
+                                avatarMediaId: author.avatarMediaId,
+                                avatarUrl: author.avatarUrl
+                            }).open();
+                        }
+                    }
+                }
+                QQC2.Label {
+                    id: timeLabel
+
+                    text: visible ? time.toLocaleTimeString(Qt.locale(), Locale.ShortFormat) : ""
+                    color: Kirigami.Theme.disabledTextColor
+                    QQC2.ToolTip.visible: hoverHandler.hovered
+                    QQC2.ToolTip.text: time.toLocaleString(Qt.locale(), Locale.LongFormat)
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+
+                    HoverHandler {
+                        id: hoverHandler
+                    }
+                }
+            }
+            Loader {
+                id: replyLoader
+
+                Layout.maximumWidth: contentMaxWidth
+
+                active: model.reply !== undefined
+                visible: active
+
+                sourceComponent: ReplyComponent {
+                    name: currentRoom.htmlSafeMemberName(reply.author.id)
+                    avatar: reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : ""
+                    color: reply.author.color
+                }
+
+                Connections {
+                    target: replyLoader.item
+                    function onReplyClicked() {
+                        replyClicked(reply.eventId)
+                    }
+                }
+            }
+        }
+
+        background: Item {
+            Kirigami.ShadowedRectangle {
+                id: bubbleBackground
+                visible: cardBackground && !Config.compactLayout
+                anchors.fill: parent
+                color: {
+                    if (model.author.isLocalUser) {
+                        return Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
+                    } else if (timelineContainer.isHighlighted) {
+                        return Kirigami.Theme.positiveBackgroundColor
+                    } else {
+                        return Kirigami.Theme.backgroundColor
+                    }
+                }
+                radius: Kirigami.Units.smallSpacing
+                shadow.size: Kirigami.Units.smallSpacing
+                shadow.color: timelineContainer.isHighlighted ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                border.width: 1
+
+                Behavior on color {
+                    ColorAnimation {target: bubbleBackground; duration: Kirigami.Units.veryLongDuration; easing.type: Easing.InOutCubic}
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: loader
+        anchors {
+            left: bubble.left
+            right: parent.right
+            top: bubble.bottom
+            topMargin: active && Config.compactLayout ? 0 : Kirigami.Units.smallSpacing
+        }
+        height: active ? item.implicitHeight : 0
+        //Layout.bottomMargin: readMarker ? Kirigami.Units.smallSpacing : 0
+        active: eventType !== "state" && eventType !== "notice" && reaction != undefined && reaction.length > 0
+        visible: active
+        sourceComponent: ReactionDelegate { }
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: timelineContainer.openContextMenu()
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.LeftButton
+        onLongPressed: timelineContainer.openContextMenu()
+    }
+}

src/qml/Component/Timeline/VideoDelegate.qml

@@ -0,0 +1,138 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtMultimedia 5.15
+import Qt.labs.platform 1.1 as Platform
+
+import org.kde.kirigami 2.13 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: videoDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    property bool playOnFinished: false
+    readonly property bool downloaded: progressInfo && progressInfo.completed
+
+    property bool supportStreaming: true
+    readonly property int maxWidth: 1000 // TODO messageListView.width
+
+    onOpenContextMenu: openFileContext(model, vid)
+
+    onDownloadedChanged: {
+        if (downloaded) {
+            vid.source = progressInfo.localPath
+        }
+
+        if (downloaded && playOnFinished) {
+            playSavedFile()
+            playOnFinished = false
+        }
+    }
+
+    innerObject: Video {
+        id: vid
+
+        Layout.maximumWidth: videoDelegate.contentMaxWidth
+        Layout.fillWidth: true
+        Layout.maximumHeight: Kirigami.Units.gridUnit * 15
+        Layout.minimumHeight: Kirigami.Units.gridUnit * 5
+
+        Layout.preferredWidth: (model.content.info.w === undefined || model.content.info.w > videoDelegate.maxWidth) ? videoDelegate.maxWidth : content.info.w
+        Layout.preferredHeight: model.content.info.w === undefined ? (videoDelegate.maxWidth * 3 / 4) : (model.content.info.w > videoDelegate.maxWidth ? (model.content.info.h / model.content.info.w * videoDelegate.maxWidth) : model.content.info.h)
+
+        loops: MediaPlayer.Infinite
+
+        fillMode: VideoOutput.PreserveAspectFit
+
+        onDurationChanged: {
+            if (!duration) {
+                vid.supportStreaming = false;
+            }
+        }
+
+        onErrorChanged: {
+            if (error != MediaPlayer.NoError) {
+                vid.supportStreaming = false;
+            }
+        }
+
+        Image {
+            anchors.fill: parent
+
+            visible: vid.playbackState == MediaPlayer.StoppedState || vid.error != MediaPlayer.NoError
+
+            source: model.content.thumbnailMediaId ? "image://mxc/" + model.content.thumbnailMediaId : ""
+
+            fillMode: Image.PreserveAspectFit
+        }
+
+        Label {
+            anchors.centerIn: parent
+
+            visible: vid.playbackState == MediaPlayer.StoppedState || vid.error != MediaPlayer.NoError
+            color: "white"
+            text: i18n("Video")
+            font.pixelSize: 16
+
+            padding: 8
+
+            background: Rectangle {
+                radius: Kirigami.Units.smallSpacing
+                color: "black"
+                opacity: 0.3
+            }
+        }
+
+        Rectangle {
+            anchors.fill: parent
+
+            visible: progressInfo.active && !videoDelegate.downloaded
+
+            color: "#BB000000"
+
+            ProgressBar {
+                anchors.centerIn: parent
+
+                width: parent.width * 0.8
+
+                from: 0
+                to: progressInfo.total
+                value: progressInfo.progress
+            }
+        }
+
+        TapHandler {
+            acceptedButtons: Qt.LeftButton
+            onTapped: if (vid.supportStreaming || progressInfo.completed) {
+                if (vid.playbackState == MediaPlayer.PlayingState) {
+                    vid.pause()
+                } else {
+                    vid.play()
+                }
+            } else {
+                videoDelegate.downloadAndPlay()
+            }
+        }
+    }
+
+    function downloadAndPlay() {
+        if (vid.downloaded) {
+            playSavedFile()
+        } else {
+            playOnFinished = true
+            currentRoom.downloadFile(eventId, Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_").replace("/", "_").replace("+", "_") + currentRoom.fileNameToDownload(eventId))
+        }
+    }
+
+    function playSavedFile() {
+        vid.stop()
+        vid.play()
+    }
+}

src/qml/Component/TypingPane.qml

@@ -0,0 +1,107 @@
+/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+ * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+ * SPDX-FileCopyrightText: 2021 Srevin Saju <srevinsaju@sugarlabs.org>
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import org.kde.kirigami 2.14 as Kirigami
+import org.kde.neochat 1.0
+
+Loader {
+    id: root
+    property string labelText: ""
+
+    active: visible
+    sourceComponent: Pane {
+        id: typingPane
+
+        leftPadding: Kirigami.Units.largeSpacing
+        rightPadding: Kirigami.Units.largeSpacing
+        topPadding: Kirigami.Units.smallSpacing
+        bottomPadding: Kirigami.Units.smallSpacing
+        spacing: Kirigami.Units.largeSpacing
+
+        FontMetrics {
+            id: fontMetrics
+        }
+
+        contentItem: RowLayout {
+            spacing: typingPane.spacing
+            Row {
+                id: dotRow
+                property int duration: 400
+                spacing: Kirigami.Units.smallSpacing
+                Repeater {
+                    model: 3
+                    delegate: Rectangle {
+                        id: dot
+                        color: Kirigami.Theme.textColor
+                        radius: height/2
+                        implicitWidth: fontMetrics.xHeight
+                        implicitHeight: fontMetrics.xHeight
+                        // rotating 45 degrees makes the dots look a bit smoother when scaled up
+                        rotation: 45
+                        opacity: 0.5
+                        scale: 1
+                        // FIXME: Sometimes the animation timings for each
+                        // dot drift slightly reletative to each other.
+                        // Not everyone can see this, but I'm pretty sure it's there.
+                        SequentialAnimation {
+                            running: true
+                            PauseAnimation { duration: dotRow.duration * index / 2 }
+                            SequentialAnimation {
+                                loops: Animation.Infinite
+                                ParallelAnimation {
+                                    // Animators unfortunately sync up instead of being
+                                    // staggered, so I'm using NumberAnimations instead.
+                                    NumberAnimation {
+                                        target: dot; property: "scale";
+                                        from: 1; to: 1.33
+                                        duration: dotRow.duration
+                                    }
+                                    NumberAnimation {
+                                        target: dot; property: "opacity"
+                                        from: 0.5; to: 1
+                                        duration: dotRow.duration
+                                    }
+                                }
+                                ParallelAnimation {
+                                    NumberAnimation {
+                                        target: dot; property: "scale"
+                                        from: 1.33; to: 1
+                                        duration: dotRow.duration
+                                    }
+                                    NumberAnimation {
+                                        target: dot; property: "opacity"
+                                        from: 1; to: 0.5
+                                        duration: dotRow.duration
+                                    }
+                                }
+                                PauseAnimation { duration: dotRow.duration }
+                            }
+                        }
+                    }
+                }
+            }
+            Label {
+                id: typingLabel
+                elide: Text.ElideRight
+                text: root.labelText
+                textFormat: Text.PlainText
+            }
+        }
+
+        leftInset: !mirrored ? 0 : -background.radius
+        rightInset: mirrored ? 0 : -background.radius
+        bottomInset: -background.radius
+        background: Rectangle {
+            radius: 3
+            color: Kirigami.Theme.backgroundColor
+            border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
+            border.width: 1
+        }
+    }
+}

src/qml/Dialog/CreateRoomDialog.qml

@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.OverlaySheet {
+    id: root
+
+    parent: applicationWindow().overlay
+
+    title: i18n("Create a Room")
+
+    contentItem: Kirigami.FormLayout {
+        TextField {
+            id: roomNameField
+            Kirigami.FormData.label: i18n("Room Name")
+            onAccepted: roomTopicField.forceActiveFocus();
+        }
+
+        TextField {
+            id: roomTopicField
+            Kirigami.FormData.label: i18n("Room Topic")
+            onAccepted: okButton.forceActiveFocus();
+        }
+
+        Button {
+            id: okButton
+
+            text: i18nc("@action:button", "Ok")
+            onClicked: {
+                Controller.createRoom(roomNameField.text, roomTopicField.text);
+                root.close();
+                root.destroy();
+            }
+        }
+    }
+}

src/qml/Dialog/EmojiDialog.qml

@@ -0,0 +1,37 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: LGPL-2.1-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+QQC2.Popup {
+    id: root
+
+    signal react(string emoji)
+
+    modal: true
+    focus: true
+    closePolicy: QQC2.Popup.CloseOnEscape | QQC2.Popup.CloseOnPressOutsideParent
+    margins: 0
+    padding: 1
+    implicitWidth: Kirigami.Units.gridUnit * 16
+    implicitHeight: Kirigami.Units.gridUnit * 20
+
+    background: Rectangle {
+        Kirigami.Theme.inherit: false
+        Kirigami.Theme.colorSet: Kirigami.Theme.View
+        color: Kirigami.Theme.backgroundColor
+        border.width: 1
+        border.color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor,
+                                                              Kirigami.Theme.textColor,
+                                                              0.15)
+    }
+
+    contentItem: EmojiPicker {
+        onChosen: react(emoji)
+    }
+}

src/qml/Dialog/KeyVerification/EmojiItem.qml

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQml 2.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.neochat 1.0
+
+Column {
+    id: emojiItem
+
+    property string emoji
+    property string description
+
+    QQC2.Label {
+        id: emojiLabel
+        x: 0
+        y: 0
+        width: parent.width
+        height: parent.height * 0.75
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+
+        text: emojiItem.emoji
+        font.family: "emoji"
+        font.pointSize: Kirigami.Theme.defaultFont.pointSize * 4
+    }
+    QQC2.Label {
+        x: 0
+        y: parent.height * 0.75
+        width: parent.width
+        height: parent.height * 0.25
+        text: emojiItem.description
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+    }
+}

src/qml/Dialog/KeyVerification/EmojiRow.qml

@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQml 2.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.neochat 1.0
+
+Row {
+    id: emojiRow
+
+    property alias model: repeater.model
+    anchors.horizontalCenter: parent.horizontalCenter
+    Repeater {
+        id: repeater
+        delegate: EmojiItem {
+            emoji: modelData.emoji
+            description: modelData.description
+            width: emojiRow.height
+            height: width
+        }
+    }
+}

src/qml/Dialog/KeyVerification/EmojiSas.qml

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQml 2.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.neochat 1.0
+
+Column {
+    id: emojiSas
+
+    required property var model
+
+    signal accept()
+    signal reject()
+
+    visible: dialog.session.state === KeyVerificationSession.WAITINGFORVERIFICATION
+    anchors.centerIn: parent
+    spacing: Kirigami.Units.largeSpacing
+    QQC2.Label {
+        text: i18n("Confirm the emoji below are displayed on both devices, in the same order.")
+    }
+    EmojiRow {
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: Kirigami.Units.gridUnit * 4
+        model: emojiSas.model.slice(0, 4)
+    }
+    EmojiRow {
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: Kirigami.Units.gridUnit * 4
+        model: emojiSas.model.slice(4, 7)
+    }
+    Row {
+        anchors.horizontalCenter: parent.horizontalCenter
+        QQC2.Button {
+            anchors.bottom: parent.bottom
+            text: i18n("They match")
+            icon.name: "dialog-ok"
+            onClicked: emojiSas.accept()
+        }
+        QQC2.Button {
+            anchors.bottom: parent.bottom
+            text: i18n("They don't match")
+            icon.name: "dialog-cancel"
+            onClicked:  emojiSas.reject()
+        }
+    }
+}

src/qml/Dialog/KeyVerification/KeyVerificationDialog.qml

@@ -0,0 +1,86 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// 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 QtQml 2.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.neochat 1.0
+
+Kirigami.Page {
+    id: dialog
+    title: i18n("Session Verification")
+
+    required property var session
+
+    Item {
+        anchors.fill: parent
+        VerificationCanceled {
+            visible: dialog.session.state === KeyVerificationSession.CANCELED
+            anchors.centerIn: parent
+            reason: dialog.session.error
+        }
+        EmojiSas {
+            anchors.centerIn: parent
+            visible: dialog.session.state === KeyVerificationSession.WAITINGFORVERIFICATION
+            model: dialog.session.sasEmojis
+            onReject: dialog.session.cancelVerification(KeyVerificationSession.MISMATCHED_SAS)
+            onAccept: dialog.session.sendMac()
+        }
+        Message {
+            visible: dialog.session.state === KeyVerificationSession.WAITINGFORREADY
+            anchors.centerIn: parent
+            icon: "security-medium-symbolic"
+            text: i18n("Waiting for device to accept verification.")
+        }
+        Message {
+            visible: dialog.session.state === KeyVerificationSession.INCOMING
+            anchors.centerIn: parent
+            icon: "security-medium-symbolic"
+            text: i18n("Incoming key verification request from device **%1**", dialog.session.remoteDeviceId)
+        }
+        Message {
+            visible: dialog.session.state === KeyVerificationSession.WAITINGFORMAC
+            anchors.centerIn: parent
+            icon: "security-medium-symbolic"
+            text: i18n("Waiting for other party to verify.")
+        }
+        Kirigami.BasicListItem {
+            id: emojiVerification
+            text: "Emoji Verification"
+            visible: dialog.session.state === KeyVerificationSession.READY
+            subtitle: i18n("Compare a set of emoji on both devices")
+            onClicked: {
+                dialog.session.sendStartSas()
+            }
+        }
+        Message {
+            visible: dialog.session.state === KeyVerificationSession.DONE
+            anchors.centerIn: parent
+            text: i18n("Successfully verified device **%1**", dialog.session.remoteDeviceId)
+            icon: "security-high"
+        }
+    }
+
+    footer: QQC2.ToolBar {
+        visible: dialog.session.state === KeyVerificationSession.INCOMING
+        QQC2.DialogButtonBox {
+            anchors.fill: parent
+            Item { Layout.fillWidth: true }
+            QQC2.Button {
+                text: i18n("Accept")
+                icon.name: "dialog-ok"
+                onClicked: dialog.session.sendReady()
+                QQC2.DialogButtonBox.buttonRole: QQC2.DialogButtonBox.AcceptRole
+            }
+            QQC2.Button {
+                text: i18n("Decline")
+                icon.name: "dialog-cancel"
+                onClicked: dialog.session.cancelVerification("m.user", "Declined")
+                QQC2.DialogButtonBox.buttonRole: QQC2.DialogButtonBox.CancelRole
+            }
+        }
+    }
+}

src/qml/Dialog/KeyVerification/Message.qml

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQml 2.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.neochat 1.0
+
+Column {
+    id: message
+    required property string icon
+    required property string text
+
+    anchors.centerIn: parent
+    Kirigami.Icon {
+        width: Kirigami.Units.iconSizes.enormous
+        height: width
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: message.icon
+    }
+    QQC2.Label {
+        text: message.text
+        textFormat: Text.MarkdownText
+    }
+}

src/qml/Dialog/KeyVerification/VerificationCanceled.qml

@@ -0,0 +1,70 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQml 2.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.neochat 1.0
+
+Message {
+    id: verificationCanceled
+
+    required property int reason
+
+    anchors.centerIn: parent
+    icon: "security-low"
+    text: {
+        switch(verificationCanceled.reason) {
+            case KeyVerificationSession.NONE:
+                return i18n("The session verification was canceled for unknown reason.");
+            case KeyVerificationSession.TIMEOUT:
+                return i18n("The session verification timed out.");
+            case KeyVerificationSession.REMOTE_TIMEOUT:
+                return i18n("The session verification timed out for remote party.");
+            case KeyVerificationSession.USER:
+                return i18n("You canceled the session verification.");
+            case KeyVerificationSession.REMOTE_USER:
+                return i18n("The remote party canceled the session verification.");
+            case KeyVerificationSession.UNEXPECTED_MESSAGE:
+                return i18n("The session verification was canceled because we received an unexpected message.");
+            case KeyVerificationSession.REMOTE_UNEXPECTED_MESSAGE:
+                return i18n("The remote party canceled the session verification because it received an unexpected message.");
+            case KeyVerificationSession.UNKNOWN_TRANSACTION:
+                return i18n("The session verification was canceled because it received a message for an unknown session.");
+            case KeyVerificationSession.REMOTE_UNKNOWN_TRANSACTION:
+                return i18n("The remote party canceled the session verification because it received a message for an unknown session.");
+            case KeyVerificationSession.UNKNOWN_METHOD:
+                return i18n("The session verification was canceled because NeoChat is unable to handle this verification method.");
+            case KeyVerificationSession.REMOTE_UNKNOWN_METHOD:
+                return i18n("The remote party canceled the session verification because it is unable to handle this verification method.");
+            case KeyVerificationSession.KEY_MISMATCH:
+                return i18n("The session verification was canceled because the keys are incorrect.");
+            case KeyVerificationSession.REMOTE_KEY_MISMATCH:
+                return i18n("The remote party canceled the session verification because the keys are incorrect.");
+            case KeyVerificationSession.USER_MISMATCH:
+                return i18n("The session verification was canceled because it verifies an unexpected user.");
+            case KeyVerificationSession.REMOTE_USER_MISMATCH:
+                return i18n("The remote party canceled the session verification because it verifies an unexpected user.");
+            case KeyVerificationSession.INVALID_MESSAGE:
+                return i18n("The session verification was canceled because we received an invalid message.");
+            case KeyVerificationSession.REMOTE_INVALID_MESSAGE:
+                return i18n("The remote party canceled the session verification because it received an invalid message.");
+            case KeyVerificationSession.SESSION_ACCEPTED:
+                return i18n("The session was accepted on a different device"); //TODO this should not be visible
+            case KeyVerificationSession.REMOTE_SESSION_ACCEPTED:
+                return i18n("The session was accepted on a different device"); //TODO neither should this
+            case KeyVerificationSession.MISMATCHED_COMMITMENT:
+                return i18n("The session verification was canceled because of a mismatched key.");
+            case KeyVerificationSession.REMOTE_MISMATCHED_COMMITMENT:
+                return i18n("The remote party canceled the session verification because of a mismatched key.");
+            case KeyVerificationSession.MISMATCHED_SAS:
+                return i18n("The session verification was canceled because the keys do not match.");
+            case KeyVerificationSession.REMOTE_MISMATCHED_SAS:
+                return i18n("The remote party canceled the session verification because the keys do not match.");
+            default:
+                return i18n("The session verification was canceled due to an unknown error.");
+        }
+    }
+}

src/qml/Dialog/OpenFileDialog.qml

@@ -0,0 +1,15 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import Qt.labs.platform 1.1
+
+FileDialog {
+    signal chosen(string path)
+
+    id: root
+
+    title: i18n("Please choose a file")
+
+    onAccepted: chosen(file)
+}

src/qml/Dialog/UserDetailDialog.qml

@@ -0,0 +1,175 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.OverlaySheet {
+    id: root
+
+    signal closed()
+
+    property var room
+    property var user
+
+    property string displayName: user.displayName
+    property string avatarMediaId: user.avatarMediaId
+    property string avatarUrl: user.avatarUrl
+
+    parent: applicationWindow().overlay
+
+    leftPadding: 0
+    rightPadding: 0
+    topPadding: 0
+
+    title: i18nc("@title:menu Account detail dialog", "Account detail")
+
+    contentItem: ColumnLayout {
+        spacing: 0
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.leftMargin: Kirigami.Units.largeSpacing
+            Layout.rightMargin: Kirigami.Units.largeSpacing
+            Layout.topMargin: Kirigami.Units.smallSpacing
+            Layout.bottomMargin: Kirigami.Units.smallSpacing
+            spacing: Kirigami.Units.largeSpacing
+
+            Kirigami.Avatar {
+                Layout.preferredWidth: Kirigami.Units.iconSizes.huge
+                Layout.preferredHeight: Kirigami.Units.iconSizes.huge
+
+                name: displayName
+                source: avatarMediaId ? ("image://mxc/" + avatarMediaId) : ""
+                color: user.color
+
+                MouseArea {
+                    anchors.fill: parent
+
+                    onClicked: {
+                        if (avatarMediaId) {
+                            fullScreenImage.createObject(parent, {filename: displayName, source: room.urlToMxcUrl(avatarUrl)}).showFullScreen()
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+
+                Kirigami.Heading {
+                    level: 1
+                    Layout.fillWidth: true
+                    font.bold: true
+
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                    text: room.htmlSafeMemberName(user.id)
+                }
+
+                QQC2.Label {
+                    Layout.fillWidth: true
+
+                    text: i18n("Online")
+                    color: Kirigami.Theme.disabledTextColor
+                }
+                Kirigami.Heading {
+                    level: 5
+                    text: user.id
+                }
+            }
+        }
+
+        QQC2.MenuSeparator {}
+
+        Kirigami.BasicListItem {
+            visible: user !== room.localUser
+            action: Kirigami.Action {
+                text: room.connection.isIgnored(user) ? i18n("Unignore this user") : i18n("Ignore this user")
+                icon.name: "im-invisible-user"
+                onTriggered: {
+                    root.close()
+                    room.connection.isIgnored(user) ? room.connection.removeFromIgnoredUsers(user) : room.connection.addToIgnoredUsers(user)
+                }
+            }
+        }
+        Kirigami.BasicListItem {
+            visible: user !== room.localUser && room.canSendState("kick") && room.containsUser(user.id)
+
+            action: Kirigami.Action {
+                text: i18n("Kick this user")
+                icon.name: "im-kick-user"
+                onTriggered: {
+                    room.kickMember(user.id)
+                    root.close()
+                }
+            }
+        }
+        Kirigami.BasicListItem {
+            visible: user !== room.localUser && room.canSendState("ban") && !room.isUserBanned(user.id)
+
+            action: Kirigami.Action {
+                text: i18n("Ban this user")
+                icon.name: "im-ban-user"
+                icon.color: Kirigami.Theme.negativeTextColor
+                onTriggered: {
+                    room.ban(user.id)
+                    root.close()
+                }
+            }
+        }
+        Kirigami.BasicListItem {
+            visible: user !== room.localUser && room.canSendState("ban") && room.isUserBanned(user.id)
+
+            action: Kirigami.Action {
+                text: i18n("Unban this user")
+                icon.name: "im-irc"
+                icon.color: Kirigami.Theme.negativeTextColor
+                onTriggered: {
+                    room.unban(user.id)
+                    root.close()
+                }
+            }
+        }
+        Kirigami.BasicListItem {
+            visible: user === room.localUser || room.canSendState("redact")
+
+            action: Kirigami.Action {
+                text: i18n("Delete recent messages by this user")
+                icon.name: "delete"
+                icon.color: Kirigami.Theme.negativeTextColor
+                onTriggered: {
+                    room.deleteMessagesByUser(user.id)
+                }
+            }
+        }
+        Kirigami.BasicListItem {
+            visible: user !== room.localUser
+            action: Kirigami.Action {
+                text: i18n("Open a private chat")
+                icon.name: "document-send"
+                onTriggered: {
+                    Controller.openOrCreateDirectChat(user);
+                    root.close()
+                }
+            }
+        }
+        Component {
+            id: fullScreenImage
+
+            FullScreenImage {}
+        }
+    }
+
+    onSheetOpenChanged: {
+        if (!sheetOpen) {
+            closed()
+        }
+    }
+}
+

src/qml/Menu/EditMenu.qml

@@ -0,0 +1,90 @@
+// SPDX-FileCopyrightText: 2021 Carson Black <uhhadd@gmail.com>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import Qt.labs.platform 1.1 as Labs
+import QtQuick 2.15
+import QtQuick.Controls 2.12 as QQC2
+import QtQuick.Layouts 1.10
+import org.kde.kirigami 2.15 as Kirigami
+
+Labs.Menu {
+    id: editMenu
+
+    required property Item field
+
+    Labs.MenuItem {
+        enabled: editMenu.field !== null && editMenu.field.canUndo
+        text: i18nc("text editing menu action", "Undo")
+        shortcut: StandardKey.Undo
+        onTriggered: {
+            editMenu.field.undo()
+            editMenu.close()
+        }
+    }
+
+    Labs.MenuItem {
+        enabled: editMenu.field !== null && editMenu.field.canRedo
+        text: i18nc("text editing menu action", "Redo")
+        shortcut: StandardKey.Redo
+        onTriggered: {
+            editMenu.field.undo()
+            editMenu.close()
+        }
+    }
+
+    Labs.MenuSeparator {
+    }
+
+    Labs.MenuItem {
+        enabled: editMenu.field !== null && editMenu.field.selectedText
+        text: i18nc("text editing menu action", "Cut")
+        shortcut: StandardKey.Cut
+        onTriggered: {
+            editMenu.field.cut()
+            editMenu.close()
+        }
+    }
+
+    Labs.MenuItem {
+        enabled: editMenu.field !== null && editMenu.field.selectedText
+        text: i18nc("text editing menu action", "Copy")
+        shortcut: StandardKey.Copy
+        onTriggered: {
+            editMenu.field.copy()
+            editMenu.close()
+        }
+    }
+
+    Labs.MenuItem {
+        enabled: editMenu.field !== null && editMenu.field.canPaste
+        text: i18nc("text editing menu action", "Paste")
+        shortcut: StandardKey.Paste
+        onTriggered: {
+            editMenu.field.paste()
+            editMenu.close()
+        }
+    }
+
+    Labs.MenuItem {
+        enabled: editMenu.field !== null && editMenu.field.selectedText !== ""
+        text: i18nc("text editing menu action", "Delete")
+        shortcut: ""
+        onTriggered: {
+            editMenu.field.remove(editMenu.field.selectionStart, editMenu.field.selectionEnd)
+            editMenu.close()
+        }
+    }
+
+    Labs.MenuSeparator {
+    }
+
+    Labs.MenuItem {
+        enabled: editMenu.field !== null
+        text: i18nc("text editing menu action", "Select All")
+        shortcut: StandardKey.SelectAll
+        onTriggered: {
+            editMenu.field.selectAll()
+            editMenu.close()
+        }
+    }
+}

src/qml/Menu/GlobalMenu.qml

@@ -0,0 +1,94 @@
+// SPDX-FileCopyrightText: 2021 Carson Black <uhhadd@gmail.com>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import Qt.labs.platform 1.1 as Labs
+
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.12 as QQC2
+import QtQuick.Layouts 1.10
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Labs.MenuBar {
+    Labs.Menu {
+        title: i18nc("menu", "NeoChat")
+
+        // TODO: make about page its own thing so we can go to it instead of settings where it's currently at
+        // Labs.MenuItem {
+        //     text: i18nc("menu", "About NeoChat")
+        // }
+        Labs.MenuItem {
+            enabled: pageStack.layers.currentItem.title !== i18n("Configure NeoChat...")
+            text: i18nc("menu", "Configure NeoChat...")
+
+            shortcut: StandardKey.Preferences
+            onTriggered: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {}, {
+                title: i18n("Configure")
+            })
+        }
+        Labs.MenuItem {
+            text: i18nc("menu", "Quit NeoChat")
+
+            shortcut: StandardKey.Quit
+            onTriggered: Qt.quit()
+        }
+    }
+    Labs.Menu {
+        title: i18nc("menu", "File")
+
+        Labs.MenuItem {
+            text: i18nc("menu", "New Private Chat…")
+            enabled: pageStack.layers.currentItem.title !== i18n("Start a Chat") && Controller.accountCount > 0
+            onTriggered: pushReplaceLayer("qrc:/StartChatPage.qml", {connection: Controller.activeConnection})
+        }
+        Labs.MenuItem {
+            text: i18nc("menu", "New Group…")
+            enabled: pageStack.layers.currentItem.title !== i18n("Start a Chat") && Controller.accountCount > 0
+            shortcut: StandardKey.New
+            onTriggered: {
+                const dialog = createRoomDialog.createObject(root.overlay)
+                dialog.open()
+            }
+        }
+        Labs.MenuItem {
+            text: i18nc("menu", "Browse Chats…")
+            onTriggered: pushReplaceLayer("qrc:/JoinRoomPage.qml", {connection: Controller.activeConnection})
+        }
+    }
+    EditMenu {
+        title: i18nc("menu", "Edit")
+        field: (root.activeFocusItem instanceof TextEdit || root.activeFocusItem instanceof TextInput) ? root.activeFocusItem : null
+    }
+    Labs.Menu {
+        title: i18nc("menu", "View")
+
+        Labs.MenuItem {
+            text: i18nc("menu item that opens a UI element called the 'Quick Switcher', which offers a fast keyboard-based interface for switching in between chats.", "Open Quick Switcher")
+            shortcut: "Ctrl+K"
+            onTriggered: quickView.item.open()
+        }
+    }
+    Labs.Menu {
+        title: i18nc("menu", "Window")
+
+        // Labs.MenuItem {
+        //     text: settings.userWantsSidebars ? i18nc("menu", "Hide Sidebar") : i18nc("menu", "Show Sidebar")
+        //     onTriggered: settings.userWantsSidebars = !settings.userWantsSidebars
+        // }
+        Labs.MenuItem {
+            text: root.visibility === Window.FullScreen ? i18nc("menu", "Exit Full Screen") : i18nc("menu", "Enter Full Screen")
+            onTriggered: root.visibility === Window.FullScreen ? root.showNormal() : root.showFullScreen()
+        }
+    }
+    // TODO: offline help system (https://invent.kde.org/network/neochat/-/issues/411)
+    Labs.Menu {
+        title: i18nc("menu", "Help")
+
+        Labs.MenuItem {
+            text: i18nc("menu", "Matrix FAQ")
+            onTriggered: UrlHelper.openUrl("https://matrix.org/faq/")
+        }
+    }
+}

src/qml/Menu/RoomListContextMenu.qml

@@ -0,0 +1,209 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.19 as Kirigami
+
+import org.kde.neochat 1.0
+
+/**
+ * Context menu when clicking on a room in the room list
+ */
+Loader {
+    id: root
+    property var room
+    signal closed()
+
+    Component {
+        id: regularMenu
+        Menu {
+            MenuItem {
+                id: newWindow
+                text: i18n("Open in New Window")
+                onTriggered: RoomManager.openWindow(room);
+                visible: !Kirigami.Settings.isMobile
+            }
+
+            MenuSeparator {
+                visible: newWindow.visible
+            }
+
+            MenuItem {
+                text: room.isFavourite ? i18n("Remove from Favourites") : i18n("Add to Favourites")
+                onTriggered: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0)
+            }
+
+            MenuItem {
+                text: room.isLowPriority ? i18n("Reprioritize") : i18n("Deprioritize")
+                onTriggered: room.isLowPriority ? room.removeTag("m.lowpriority") : room.addTag("m.lowpriority", 1.0)
+            }
+
+            MenuItem {
+                text: i18n("Mark as Read")
+                onTriggered: room.markAllMessagesAsRead()
+            }
+
+            MenuItem {
+                text: i18nc("@action:inmenu", "Copy Address to Clipboard")
+                onTriggered: if (room.canonicalAlias.length === 0) {
+                    Clipboard.saveText(room.id)
+                } else {
+                    Clipboard.saveText(room.canonicalAlias)
+                }
+            }
+
+            Menu {
+                title: i18n("Notification State")
+
+                MenuItem {
+                    text: i18n("Follow Global Setting")
+                    checkable: true
+                    autoExclusive: true
+                    checked: room.pushNotificationState === PushNotificationState.Default
+                    enabled: room.pushNotificationState != PushNotificationState.Unknown
+                    onTriggered: {
+                        room.pushNotificationState = PushNotificationState.Default
+                    }
+                }
+                MenuItem {
+                    text: i18nc("As in 'notify for all messages'","All")
+                    checkable: true
+                    autoExclusive: true
+                    checked: room.pushNotificationState === PushNotificationState.All
+                    enabled: room.pushNotificationState != PushNotificationState.Unknown
+                    onTriggered: {
+                        room.pushNotificationState = PushNotificationState.All
+                    }
+                }
+                MenuItem {
+                    text: i18nc("As in 'notify when the user is mentioned or the message contains a set keyword'","@Mentions and Keywords")
+                    checkable: true
+                    autoExclusive: true
+                    checked: room.pushNotificationState === PushNotificationState.MentionKeyword
+                    enabled: room.pushNotificationState != PushNotificationState.Unknown
+                    onTriggered: {
+                        room.pushNotificationState = PushNotificationState.MentionKeyword
+                    }
+                }
+                MenuItem {
+                    text: i18nc("As in 'do not notify for any messages'","Off")
+                    checkable: true
+                    autoExclusive: true
+                    checked: room.pushNotificationState === PushNotificationState.Mute
+                    enabled: room.pushNotificationState != PushNotificationState.Unknown
+                    onTriggered: {
+                        room.pushNotificationState = PushNotificationState.Mute
+                    }
+                }
+            }
+
+            MenuItem {
+                text: i18n("Room Settings")
+                onTriggered: ApplicationWindow.window.pageStack.pushDialogLayer('qrc:/Categories.qml', {room: room})
+            }
+
+            MenuSeparator {}
+
+            MenuItem {
+                text: i18n("Leave Room")
+                onTriggered: RoomManager.leaveRoom(room)
+            }
+
+            onClosed: {
+                root.closed()
+                destroy()
+            }
+        }
+    }
+
+    Component {
+        id: mobileMenu
+
+        Kirigami.OverlayDrawer {
+            id: drawer
+            height: popupContent.implicitHeight
+            edge: Qt.BottomEdge
+            padding: 0
+            leftPadding: 0
+            rightPadding: 0
+            bottomPadding: 0
+            topPadding: 0
+
+            parent: applicationWindow().overlay
+
+            ColumnLayout {
+                id: popupContent
+                width: parent.width
+                spacing: 0
+                RowLayout {
+                    id: headerLayout
+                    Layout.fillWidth: true
+                    Layout.margins: Kirigami.Units.largeSpacing
+                    spacing: Kirigami.Units.largeSpacing
+                    Kirigami.Avatar {
+                        id: avatar
+                        source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : ""
+                        Layout.preferredWidth: Kirigami.Units.gridUnit * 3
+                        Layout.preferredHeight: Kirigami.Units.gridUnit * 3
+                        Layout.alignment: Qt.AlignTop
+                    }
+                    Kirigami.Heading {
+                        level: 5
+                        Layout.fillWidth: true
+                        text: room.displayName
+                        wrapMode: Text.WordWrap
+                    }
+                    ToolButton {
+                        checked: room.isFavourite
+                        checkable: true
+                        icon.name: 'favorite'
+                        Accessible.name: room.isFavourite ? i18n("Remove from Favourites") : i18n("Add to Favourites")
+                        onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0)
+                    }
+
+                    ToolButton {
+                        icon.name: 'settings-configure'
+                        onClicked: ApplicationWindow.window.pageStack.pushDialogLayer('qrc:/Categories.qml', {room: room})
+                    }
+                }
+
+                Kirigami.BasicListItem {
+                    text: room.isLowPriority ? i18n("Reprioritize") : i18n("Deprioritize")
+                    onClicked: room.isLowPriority ? room.removeTag("m.lowpriority") : room.addTag("m.lowpriority", 1.0)
+                    implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0
+                }
+
+                Kirigami.BasicListItem {
+                    text: i18n("Mark as Read")
+                    onClicked: room.markAllMessagesAsRead()
+                    implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0
+                }
+                Kirigami.BasicListItem {
+                    text: i18n("Leave Room")
+                    onClicked: RoomManager.leaveRoom(room)
+                    implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0
+                }
+            }
+            onClosed: root.closed()
+        }
+    }
+
+    asynchronous: true
+    sourceComponent: Kirigami.Settings.isMobile ? mobileMenu : regularMenu
+
+    function open() {
+        active = true;
+    }
+
+    onStatusChanged: if (status == Loader.Ready) {
+        if (Kirigami.Settings.isMobile) {
+            item.open();
+        } else {
+            item.popup();
+        }
+    }
+}

src/qml/Menu/ShareAction.qml

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
+
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.15 as Controls
+import org.kde.kirigami 2.14 as Kirigami
+
+/**
+ * Action that allows an user to share data with other apps and service
+ * installed on their computer. The goal of this high level API is to
+ * adapte itself for each platform and adopt the native component.
+ *
+ * TODO add Android support
+ */
+Kirigami.Action {
+    id: shareAction
+    iconName: "emblem-shared-symbolic"
+    text: i18n("Share")
+    tooltip: i18n("Share the selected media")
+
+    property var doBeforeSharing: () => {}
+    visible: false
+
+    /**
+     * This property holds the input data for purpose.
+     *
+     * @code{.qml}
+     * Purpose.ShareAction {
+     *     inputData: {
+     *         'urls': ['file://home/notroot/Pictures/mypicture.png'],
+     *         'mimeType': ['image/png']
+     *     }
+     * }
+     * @endcode
+     */
+    property var inputData: ({})
+
+    property Instantiator _instantiator: Instantiator {
+        Component.onCompleted: {
+            const purposeModel = Qt.createQmlObject('import org.kde.purpose 1.0 as Purpose;
+Purpose.PurposeAlternativesModel {
+    pluginType: "Export"
+}', shareAction._instantiator);
+            purposeModel.inputData = Qt.binding(function() {
+                return shareAction.inputData;
+            });
+            _instantiator.model = purposeModel;
+            shareAction.visible = true;
+        }
+
+        delegate: Kirigami.Action {
+            property int index
+            text: model.display
+            icon.name: model.iconName
+            onTriggered: {
+                doBeforeSharing();
+                applicationWindow().pageStack.pushDialogLayer('qrc:/ShareDialog.qml', {
+                    title: shareAction.tooltip,
+                    index: index,
+                    model: shareAction._instantiator.model
+                })
+            }
+        }
+        onObjectAdded: {
+            object.index = index;
+            shareAction.children.push(object)
+        }
+        onObjectRemoved: shareAction.children = Array.from(shareAction.children).filter(obj => obj.pluginId !== object.pluginId)
+    }
+}

src/qml/Menu/ShareActionAndroid.qml

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
+
+import org.kde.kirigami 2.14 as Kirigami
+
+Kirigami.Action {
+    property var inputData: ({})
+    property var doBeforeSharing: () => {}
+    visible: false
+}

src/qml/Menu/ShareDialog.qml

@@ -0,0 +1,69 @@
+/*
+ * SPDX-FileCopyrightText: 2017 Atul Sharma <atulsharma406@gmail.com>
+ * SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+ *
+ * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
+ */
+
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.15 as Controls
+import org.kde.purpose 1.0 as Purpose
+import org.kde.notification 1.0
+import org.kde.kirigami 2.14 as Kirigami
+
+Kirigami.Page {
+    id: window
+
+    leftPadding: 0
+    rightPadding: 0
+    topPadding: 0
+    bottomPadding: 0
+
+    property alias index: jobView.index
+    property alias model: jobView.model
+
+    Controls.Action {
+        shortcut: 'Escape'
+        onTriggered: window.closeDialog()
+    }
+
+    Notification {
+        id: sharingFailed
+        eventId: "sharingFailed"
+        text: i18n("Sharing failed")
+        urgency: Notification.NormalUrgency
+    }
+
+    Notification {
+        id: sharingSuccess
+        eventId: "sharingSuccess"
+        flags: Notification.Persistent
+    }
+
+    Component.onCompleted: jobView.start()
+
+    contentItem: Purpose.JobView {
+        id: jobView
+        onStateChanged: {
+            if (state === Purpose.PurposeJobController.Finished) {
+                if (jobView.job.output.url !== "") {
+                    // Show share url
+                    // TODO no needed anymore in purpose > 5.90
+                    sharingSuccess.text = i18n("Shared url for image is <a href='%1'>%1</a>", jobView.output.url);
+                    sharingSuccess.sendEvent();
+                    Clipboard.saveText(jobView.output.url);
+                }
+                window.closeDialog()
+            } else if (state === Purpose.PurposeJobController.Error) {
+                // Show failure notification
+                sharingFailed.sendEvent();
+
+                window.closeDialog()
+            } else if (state === Purpose.PurposeJobController.Cancelled) {
+                // Do nothing
+                window.closeDialog()
+            }
+        }
+    }
+}

src/qml/Menu/Timeline/FileDelegateContextMenu.qml

@@ -0,0 +1,125 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+MessageDelegateContextMenu {
+    id: root
+
+    signal closeFullscreen
+
+    required property var file
+    required property var progressInfo
+    required property string mimeType
+
+    property list<Kirigami.Action> actions: [
+        Kirigami.Action {
+            text: i18n("Open Externally")
+            icon.name: "document-open"
+            onTriggered: {
+                if (file.downloaded) {
+                    if (!UrlHelper.openUrl(progressInfo.localPath)) {
+                        UrlHelper.openUrl(progressInfo.localDir);
+                    }
+                } else {
+                    file.onDownloadedChanged.connect(function() {
+                        if (!UrlHelper.openUrl(progressInfo.localPath)) {
+                            UrlHelper.openUrl(progressInfo.localDir);
+                        }
+                    });
+                    currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_").replace("/", "_").replace("+", "_") + currentRoom.fileNameToDownload(eventId))
+                }
+            }
+        },
+        Kirigami.Action {
+            text: i18n("Save As")
+            icon.name: "document-save"
+            onTriggered: {
+                var dialog = saveAsDialog.createObject(ApplicationWindow.overlay)
+                dialog.open()
+                dialog.currentFile = dialog.folder + "/" + currentRoom.fileNameToDownload(eventId)
+            }
+        },
+        Kirigami.Action {
+            text: i18n("Reply")
+            icon.name: "mail-replied-symbolic"
+            onTriggered: {
+                currentRoom.chatBoxReplyId = eventId
+                currentRoom.chatBoxEditId = ""
+                root.closeFullscreen()
+            }
+        },
+        Kirigami.Action {
+            visible: author.id === currentRoom.localUser.id || currentRoom.canSendState("redact")
+            text: i18n("Remove")
+            icon.name: "edit-delete-remove"
+            icon.color: "red"
+            onTriggered: {
+                currentRoom.redactEvent(eventId);
+                root.closeFullscreen()
+            }
+        },
+        Kirigami.Action {
+            text: i18nc("@action:button 'Report' as in 'Report this event to the administrators'", "Report")
+            icon.name: "dialog-warning-symbolic"
+            visible: author.id !== currentRoom.localUser.id
+            onTriggered: applicationWindow().pageStack.pushDialogLayer("qrc:/ReportSheet.qml", {room: currentRoom, eventId: eventId}, {
+                title: i18nc("@title", "Report Message"),
+                width: Kirigami.Units.gridUnit * 25
+            })
+        },
+        Kirigami.Action {
+            text: i18n("View Source")
+            icon.name: "code-context"
+            onTriggered: {
+                applicationWindow().pageStack.pushDialogLayer('qrc:/MessageSourceSheet.qml', {
+                    sourceText: root.source
+                }, {
+                    title: i18n("Message Source"),
+                    width: Kirigami.Units.gridUnit * 25
+                });
+                root.closeFullscreen()
+            }
+        }
+    ]
+
+    property list<Kirigami.Action> nestedActions: [
+        ShareAction {
+            id: shareAction
+            inputData: {
+                'urls': [],
+                'mimeType': [mimeType]
+            }
+            property string filename: StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_").replace("/", "_").replace("+", "_") + currentRoom.fileNameToDownload(eventId);
+
+            doBeforeSharing: () => {
+                currentRoom.downloadFile(eventId, filename)
+            }
+            Component.onCompleted: {
+                shareAction.inputData = {
+                    urls: [filename],
+                    mimeType: [mimeType]
+                };
+            }
+        }
+    ]
+    Component {
+        id: saveAsDialog
+        FileDialog {
+            fileMode: FileDialog.SaveFile
+            folder: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
+            onAccepted: {
+                if (!currentFile) {
+                    return;
+                }
+                currentRoom.downloadFile(eventId, currentFile)
+            }
+        }
+    }
+}

src/qml/Menu/Timeline/MessageDelegateContextMenu.qml

@@ -0,0 +1,324 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Loader {
+    id: loadRoot
+
+    required property var author
+    required property string message
+    required property string eventId
+    property string eventType: ""
+    property string formattedBody: ""
+    required property string source
+    property string selectedText: ""
+    required property string plainMessage
+
+    property list<Kirigami.Action> nestedActions
+
+    property list<Kirigami.Action> actions: [
+        Kirigami.Action {
+            text: i18n("Edit")
+            icon.name: "document-edit"
+            onTriggered: {
+                currentRoom.chatBoxEditId = eventId;
+                currentRoom.chatBoxReplyId = "";
+            }
+            visible: eventType.length > 0 && author.id === Controller.activeConnection.localUserId && (eventType === "emote" || eventType === "message")
+        },
+        Kirigami.Action {
+            text: i18n("Reply")
+            icon.name: "mail-replied-symbolic"
+            onTriggered: {
+                currentRoom.chatBoxReplyId = eventId;
+                currentRoom.chatBoxEditId = "";
+            }
+        },
+        Kirigami.Action {
+            visible: author.id === currentRoom.localUser.id || currentRoom.canSendState("redact")
+            text: i18n("Remove")
+            icon.name: "edit-delete-remove"
+            icon.color: "red"
+            onTriggered: currentRoom.redactEvent(eventId);
+        },
+        Kirigami.Action {
+            text: i18n("Copy")
+            icon.name: "edit-copy"
+            onTriggered: Clipboard.saveText(loadRoot.selectedText === "" ? loadRoot.plainMessage : loadRoot.selectedText)
+        },
+        Kirigami.Action {
+            text: i18nc("@action:button 'Report' as in 'Report this event to the administrators'", "Report")
+            icon.name: "dialog-warning-symbolic"
+            visible: author.id !== currentRoom.localUser.id
+            onTriggered: applicationWindow().pageStack.pushDialogLayer("qrc:/ReportSheet.qml", {room: currentRoom, eventId: eventId}, {
+                title: i18nc("@title", "Report Message"),
+                width: Kirigami.Units.gridUnit * 25
+            })
+        },
+        Kirigami.Action {
+            text: i18n("View Source")
+            icon.name: "code-context"
+            onTriggered: {
+                applicationWindow().pageStack.pushDialogLayer('qrc:/MessageSourceSheet.qml', {
+                    sourceText: loadRoot.source
+                }, {
+                    title: i18n("Message Source"),
+                    width: Kirigami.Units.gridUnit * 25
+                });
+            }
+        }
+    ]
+
+    Component {
+        id: regularMenu
+
+        QQC2.Menu {
+            id: menu
+            Instantiator {
+                model: loadRoot.nestedActions
+                delegate: QQC2.Menu {
+                    id: menuItem
+                    visible: modelData.visible
+                    title: modelData.text
+
+                    Instantiator {
+                        model: modelData.children
+                        delegate: QQC2.MenuItem {
+                            text: modelData.text
+                            icon.name: modelData.icon.name
+                            onTriggered: modelData.trigger()
+                        }
+                        onObjectAdded: {
+                            menuItem.insertItem(0, object)
+                        }
+                    }
+                }
+                onObjectAdded: {
+                    object.visible = false;
+                    menu.addMenu(object)
+                }
+            }
+
+            Repeater {
+                model: loadRoot.actions
+                QQC2.MenuItem {
+                    id: menuItem
+                    visible: modelData.visible
+                    action: modelData
+                    onClicked: loadRoot.item.close();
+                }
+            }
+            QQC2.Menu {
+                id: webshortcutmenu
+                title: i18n("Search for '%1'", webshortcutmodel.trunkatedSearchText)
+                property bool isVisible: webshortcutmodel.enabled
+                Component.onCompleted: {
+                    webshortcutmenu.parent.visible = isVisible
+                }
+                onIsVisibleChanged: webshortcutmenu.parent.visible = isVisible
+                Instantiator {
+                    model: WebShortcutModel {
+                        id: webshortcutmodel
+                        selectedText: loadRoot.selectedText ? loadRoot.selectedText : loadRoot.plainMessage
+                        onOpenUrl: RoomManager.visitNonMatrix(url)
+                    }
+                    delegate: QQC2.MenuItem {
+                        text: model.display
+                        icon.name: model.decoration
+                        onTriggered: webshortcutmodel.trigger(model.edit)
+                    }
+                    onObjectAdded: webshortcutmenu.insertItem(0, object)
+                }
+                QQC2.MenuSeparator {}
+                QQC2.MenuItem {
+                    text: i18n("Configure Web Shortcuts...")
+                    icon.name: "configure"
+                    onTriggered: webshortcutmodel.configureWebShortcuts()
+                }
+            }
+        }
+    }
+    Component {
+        id: mobileMenu
+
+        Kirigami.OverlayDrawer {
+            id: drawer
+            height: stackView.implicitHeight
+            edge: Qt.BottomEdge
+            padding: 0
+            leftPadding: 0
+            rightPadding: 0
+            bottomPadding: 0
+            topPadding: 0
+
+            parent: applicationWindow().overlay
+
+            QQC2.StackView {
+                id: stackView
+                width: parent.width
+                implicitHeight: currentItem.implicitHeight
+
+                Component {
+                    id: nestedActionsComponent
+                    ColumnLayout {
+                        id: actionLayout
+                        property string title: ""
+                        property list<Kirigami.Action> actions
+                        width: parent.width
+                        spacing: 0
+                        RowLayout {
+                            QQC2.ToolButton {
+                                icon.name: 'draw-arrow-back'
+                                onClicked: stackView.pop()
+                            }
+                            Kirigami.Heading {
+                                level: 3
+                                Layout.fillWidth: true
+                                text: actionLayout.title
+                                wrapMode: Text.WordWrap
+                            }
+                        }
+                        Repeater {
+                            id: listViewAction
+                            model: actionLayout.actions
+
+                            Kirigami.BasicListItem {
+                                icon: modelData.icon.name
+                                iconColor: modelData.icon.color ?? undefined
+                                enabled: modelData.enabled
+                                visible: modelData.visible
+                                text: modelData.text
+                                onClicked: {
+                                    modelData.triggered()
+                                    loadRoot.item.close();
+                                }
+                                implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0
+                            }
+                        }
+                    }
+                }
+                initialItem: ColumnLayout {
+                    id: popupContent
+                    width: parent.width
+                    spacing: 0
+                    RowLayout {
+                        id: headerLayout
+                        Layout.fillWidth: true
+                        Layout.margins: Kirigami.Units.largeSpacing
+                        spacing: Kirigami.Units.largeSpacing
+                        Kirigami.Avatar {
+                            id: avatar
+                            source: author.avatarMediaId ? ("image://mxc/" + author.avatarMediaId) : ""
+                            Layout.preferredWidth: Kirigami.Units.gridUnit * 3
+                            Layout.preferredHeight: Kirigami.Units.gridUnit * 3
+                            Layout.alignment: Qt.AlignTop
+                        }
+                        ColumnLayout {
+                            Layout.fillWidth: true
+                            Kirigami.Heading {
+                                level: 3
+                                Layout.fillWidth: true
+                                text: currentRoom.htmlSafeMemberName(author.id)
+                                wrapMode: Text.WordWrap
+                            }
+                            QQC2.Label {
+                                text: message
+                                Layout.fillWidth: true
+                                wrapMode: Text.WordWrap
+
+                                onLinkActivated: RoomManager.openResource(link);
+                            }
+                        }
+                    }
+                    Kirigami.Separator {
+                        Layout.fillWidth: true
+                    }
+                    RowLayout {
+                        spacing: 0
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: Kirigami.Units.gridUnit * 2.5
+                        Repeater {
+                            model: ["👍", "👎️", "😄", "🎉", "🚀", "👀"]
+                            delegate: QQC2.ItemDelegate {
+                                Layout.fillWidth: true
+                                Layout.fillHeight: true
+
+                                contentItem: Kirigami.Heading {
+                                    horizontalAlignment: Text.AlignHCenter
+                                    verticalAlignment: Text.AlignVCenter
+
+                                    font.family: "emoji"
+                                    text: modelData
+                                }
+
+                                onClicked: {
+                                    currentRoom.toggleReaction(eventId, modelData);
+                                    loadRoot.item.close();
+                                }
+                            }
+                        }
+                    }
+                    Kirigami.Separator {
+                        Layout.fillWidth: true
+                    }
+                    Repeater {
+                        id: listViewAction
+                        model: loadRoot.actions
+
+                        Kirigami.BasicListItem {
+                            icon: modelData.icon.name
+                            iconColor: modelData.icon.color ?? undefined
+                            enabled: modelData.enabled
+                            visible: modelData.visible
+                            text: modelData.text
+                            onClicked: {
+                                modelData.triggered()
+                                loadRoot.item.close();
+                            }
+                            implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0
+                        }
+                    }
+
+                    Repeater {
+                        model: loadRoot.nestedActions
+
+                        Kirigami.BasicListItem {
+                            action: modelData
+                            visible: modelData.visible
+                            implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0
+                            onClicked: {
+                                stackView.push(nestedActionsComponent, {
+                                    title: modelData.text,
+                                    actions: modelData.children
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    asynchronous: true
+    sourceComponent: Kirigami.Settings.isMobile ? mobileMenu : regularMenu
+
+    function open() {
+        active = true;
+    }
+
+    onStatusChanged: if (status == Loader.Ready) {
+        if (Kirigami.Settings.isMobile) {
+            item.open();
+        } else {
+            item.popup();
+        }
+    }
+}
+

src/qml/Menu/Timeline/MessageSourceSheet.qml

@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import org.kde.syntaxhighlighting 1.0
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.neochat 1.0
+
+Kirigami.Page {
+    property string sourceText
+
+    topPadding: 0
+    leftPadding: 0
+    rightPadding: 0
+    bottomPadding: 0
+
+    title: i18n("Message Source")
+
+    ScrollView {
+        anchors.fill: parent
+        contentWidth: availableWidth
+
+        // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+        TextArea {
+            id: sourceTextArea
+            text: sourceText
+            readOnly: true
+            textFormat: TextEdit.PlainText
+            wrapMode: Text.WordWrap
+            background: Rectangle {
+                Kirigami.Theme.colorSet: Kirigami.Theme.View
+                Kirigami.Theme.inherit: false
+                color: Kirigami.Theme.backgroundColor
+            }
+
+            SyntaxHighlighter {
+                textEdit: sourceTextArea
+                definition: "JSON"
+                repository: Repository
+            }
+        }
+    }
+}
+

src/qml/Menu/Timeline/ReportSheet.qml

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// 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
+
+Kirigami.Page {
+    id: reportSheet
+
+    property var room
+    property string eventId
+
+    title: i18n("Report Message")
+
+    QQC2.TextArea {
+        id: reason
+        placeholderText: i18n("Reason for reporting this message")
+        anchors.fill: parent
+        wrapMode: TextEdit.Wrap
+    }
+
+    footer: QQC2.ToolBar {
+        QQC2.DialogButtonBox {
+            anchors.fill: parent
+            Item {
+                Layout.fillWidth: true
+            }
+            QQC2.Button {
+                text: i18nc("@action:button 'Report' as in 'Report this event to the administrators'", "Report")
+                icon.name: "dialog-warning-symbolic"
+                QQC2.DialogButtonBox.buttonRole: QQC2.DialogButtonBox.AcceptRole
+                onClicked: {
+                    reportSheet.room.reportEvent(eventId, reason.text)
+                    reportSheet.closeDialog()
+                }
+            }
+            QQC2.Button {
+                text: i18nc("@action", "Cancel")
+                QQC2.DialogButtonBox.buttonRole: QQC2.DialogButtonBox.RejectRole
+                onClicked: reportSheet.closeDialog()
+            }
+        }
+    }
+}

src/qml/Page/ImageEditorPage.qml

@@ -0,0 +1,179 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: BSD-2-Clause
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1 as Platform
+
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kquickimageeditor 1.0 as KQuickImageEditor
+
+Kirigami.Page {
+    id: rootEditorView
+
+    property bool resizing: false;
+    required property string imagePath
+
+    signal newPathChanged(string newPath);
+
+    title: i18n("Edit")
+    leftPadding: 0
+    rightPadding: 0
+    topPadding: 0
+    bottomPadding: 0
+
+    function crop() {
+        const ratioX = editImage.paintedWidth / editImage.nativeWidth;
+        const ratioY = editImage.paintedHeight / editImage.nativeHeight;
+        rootEditorView.resizing = false
+        imageDoc.crop(selectionTool.selectionX / ratioX, selectionTool.selectionY / ratioY, selectionTool.selectionWidth / ratioX, selectionTool.selectionHeight / ratioY);
+    }
+
+    actions {
+        left: Kirigami.Action {
+            id: undoAction
+            text: i18nc("@action:button Undo modification", "Undo")
+            iconName: "edit-undo"
+            onTriggered: imageDoc.undo();
+            visible: imageDoc.edited
+        }
+        main: Kirigami.Action {
+            id: okAction
+            text: i18nc("@action:button Accept image modification", "Accept")
+            iconName: "dialog-ok"
+            onTriggered: {
+                let newPath = Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/" + (new Date()).getTime() + "." + imagePath.split('.').pop();
+                if (imageDoc.saveAs(newPath)) {;
+                    newPathChanged(newPath);
+                } else {
+                    msg.type = Kirigami.MessageType.Error
+                    msg.text = i18n("Unable to save file. Check if you have the correct permission to edit the cache directory.")
+                    msg.visible = true;
+                }
+            }
+        }
+    }
+
+
+
+    KQuickImageEditor.ImageItem {
+        id: editImage
+        // Assigning this to the contentItem and setting the padding causes weird positioning issues
+        anchors.fill: parent
+        anchors.margins: Kirigami.Units.gridUnit
+        fillMode: KQuickImageEditor.ImageItem.PreserveAspectFit
+        image: imageDoc.image
+
+        Shortcut {
+            sequence: StandardKey.Undo
+            onActivated: undoAction.trigger();
+        }
+
+        Shortcut {
+            sequences: [StandardKey.Save, "Enter"]
+            onActivated: saveAction.trigger();
+        }
+
+        Shortcut {
+            sequence: StandardKey.SaveAs
+            onActivated: saveAsAction.trigger();
+        }
+
+        KQuickImageEditor.ImageDocument {
+            id: imageDoc
+            path: rootEditorView.imagePath
+        }
+
+        KQuickImageEditor.SelectionTool {
+            id: selectionTool
+            visible: rootEditorView.resizing
+            width: editImage.paintedWidth
+            height: editImage.paintedHeight
+            x: editImage.horizontalPadding
+            y: editImage.verticalPadding
+            KQuickImageEditor.CropBackground {
+                anchors.fill: parent
+                z: -1
+                insideX: selectionTool.selectionX
+                insideY: selectionTool.selectionY
+                insideWidth: selectionTool.selectionWidth
+                insideHeight: selectionTool.selectionHeight
+            }
+            Connections {
+                target: selectionTool.selectionArea
+                function onDoubleClicked() {
+                    rootEditorView.crop()
+                }
+            }
+        }
+        onImageChanged: {
+            selectionTool.selectionX = 0
+            selectionTool.selectionY = 0
+            selectionTool.selectionWidth = Qt.binding(() => selectionTool.width)
+            selectionTool.selectionHeight = Qt.binding(() => selectionTool.height)
+        }
+    }
+
+    header: QQC2.ToolBar {
+        contentItem: Kirigami.ActionToolBar {
+            id: actionToolBar
+            display: QQC2.Button.TextBesideIcon
+            actions: [
+                Kirigami.Action {
+                    iconName: rootEditorView.resizing ? "dialog-cancel" : "transform-crop"
+                    text: rootEditorView.resizing ? i18n("Cancel") : i18nc("@action:button Crop an image", "Crop");
+                    onTriggered: {
+                        resizeRectangle.width = editImage.paintedWidth
+                        resizeRectangle.height = editImage.paintedHeight
+                        resizeRectangle.x = editImage.horizontalPadding
+                        resizeRectangle.y = editImage.verticalPadding
+                        resizeRectangle.insideX = 100
+                        resizeRectangle.insideY = 100
+                        resizeRectangle.insideWidth = 100
+                        resizeRectangle.insideHeight = 100
+
+                        rootEditorView.resizing = !rootEditorView.resizing;
+                    }
+                },
+                Kirigami.Action {
+                    iconName: "dialog-ok"
+                    visible: rootEditorView.resizing
+                    text: i18nc("@action:button Crop an image", "Crop");
+                    onTriggered: rootEditorView.crop();
+                },
+                Kirigami.Action {
+                    iconName: "object-rotate-left"
+                    text: i18nc("@action:button Rotate an image to the left", "Rotate left");
+                    onTriggered: imageDoc.rotate(-90);
+                    visible: !rootEditorView.resizing
+                },
+                Kirigami.Action {
+                    iconName: "object-rotate-right"
+                    text: i18nc("@action:button Rotate an image to the right", "Rotate right");
+                    onTriggered: imageDoc.rotate(90);
+                    visible: !rootEditorView.resizing
+                },
+                Kirigami.Action {
+                    iconName: "object-flip-vertical"
+                    text: i18nc("@action:button Mirror an image vertically", "Flip");
+                    onTriggered: imageDoc.mirror(false, true);
+                    visible: !rootEditorView.resizing
+                },
+                Kirigami.Action {
+                    iconName: "object-flip-horizontal"
+                    text: i18nc("@action:button Mirror an image horizontally", "Mirror");
+                    onTriggered: imageDoc.mirror(true, false);
+                    visible: !rootEditorView.resizing
+                }
+            ]
+        }
+    }
+
+    footer: Kirigami.InlineMessage {
+        id: msg
+        type: Kirigami.MessageType.Error
+        showCloseButton: true
+        visible: false
+    }
+}

src/qml/Page/InviteUserPage.qml

@@ -0,0 +1,131 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+
+    property var room
+
+    title: i18n("Invite a User")
+
+    actions {
+        main: Kirigami.Action {
+            icon.name: "dialog-close"
+            text: i18nc("@action", "Cancel")
+            onTriggered: applicationWindow().pageStack.layers.pop()
+        }
+    }
+    header: RowLayout {
+        Layout.fillWidth: true
+        Layout.margins: Kirigami.Units.largeSpacing
+
+        Kirigami.SearchField {
+            id: identifierField
+            property bool isUserID: text.match(/@(.+):(.+)/g)
+            Layout.fillWidth: true
+
+            placeholderText: i18n("Find a user...")
+            onAccepted: userDictListModel.search()
+        }
+
+        Button {
+            visible: identifierField.isUserID
+
+            text: i18n("Add")
+            highlighted: true
+
+            onClicked: {
+                room.inviteToRoom(identifierField.text)
+            }
+        }
+    }
+
+    ListView {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        id: userDictListView
+
+        clip: true
+
+        model: UserDirectoryListModel {
+            id: userDictListModel
+
+            connection: root.room.connection
+            keyword: identifierField.text
+        }
+
+        Kirigami.PlaceholderMessage {
+            anchors.centerIn: parent
+
+            visible: userDictListView.count < 1
+
+            text: i18n("No users available")
+        }
+
+        delegate: Kirigami.AbstractListItem {
+            id: delegate
+            property bool inRoom: room && room.containsUser(userID)
+
+            topPadding: Kirigami.Units.largeSpacing
+            bottomPadding: Kirigami.Units.largeSpacing
+
+            contentItem: RowLayout {
+                Kirigami.Avatar {
+                    Layout.preferredWidth: height
+                    Layout.fillHeight: true
+
+                    source: avatar ? ("image://mxc/" + avatar) : ""
+                    name: name
+                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    spacing: 0
+
+                    Kirigami.Heading {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        level: 3
+
+                        text: name
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+
+                    Label {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        text: userID
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+                }
+
+                ToolButton {
+                    visible: !inRoom
+                    icon.name: "document-send"
+                    text: i18n("Send invitation")
+
+                    onClicked: {
+                        room.inviteToRoom(userID);
+                        applicationWindow().pageStack.layers.pop();
+                    }
+                }
+            }
+        }
+    }
+}

src/qml/Page/JoinRoomPage.qml

@@ -0,0 +1,161 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+    property var connection
+
+    property alias keyword: identifierField.text
+    property string server
+
+    title: i18n("Explore Rooms")
+
+    Component.onCompleted: identifierField.forceActiveFocus()
+
+    header: Control {
+        padding: Kirigami.Units.largeSpacing
+        contentItem: RowLayout {
+            Kirigami.SearchField {
+                id: identifierField
+                property bool isRoomAlias: text.match(/#(.+):(.+)/g)
+                property var room: isRoomAlias ? connection.roomByAlias(text) : null
+                property bool isJoined: room != null
+
+                Layout.fillWidth: true
+
+                placeholderText: i18n("Find a room...")
+            }
+
+            Button {
+                id: joinButton
+
+                visible: identifierField.isRoomAlias
+
+                text: identifierField.isJoined ? i18n("View") : i18n("Join")
+                highlighted: true
+
+                onClicked: {
+                    if (!identifierField.isJoined) {
+                        Controller.joinRoom(identifierField.text);
+                        // When joining the room, the room will be opened
+                    }
+                    applicationWindow().pageStack.layers.pop();
+                }
+            }
+
+            ComboBox {
+                Layout.maximumWidth: 120
+
+                id: serverField
+
+                editable: currentIndex == 1
+
+                model: [i18n("Local"), i18n("Global"), "matrix.org"]
+
+                onCurrentIndexChanged: {
+                    if (currentIndex == 0) {
+                        server = ""
+                    } else if (currentIndex == 2) {
+                        server = "matrix.org"
+                    }
+                }
+
+                Keys.onReturnPressed: {
+                    if (currentIndex == 1) {
+                        server = editText
+                    }
+                }
+            }
+        }
+    }
+
+    ListView {
+        id: publicRoomsListView
+        clip: true
+        model: PublicRoomListModel {
+            id: publicRoomListModel
+
+            connection: root.connection
+            server: root.server
+            keyword: root.keyword
+        }
+
+        onContentYChanged: {
+            if(publicRoomListModel.hasMore && contentHeight - contentY < publicRoomsListView.height + 200)
+                publicRoomListModel.next();
+        }
+        delegate: Kirigami.AbstractListItem {
+            property bool justJoined: false
+            width: publicRoomsListView.width
+            onClicked: {
+                if (!isJoined) {
+                    Controller.joinRoom(roomID)
+                    justJoined = true;
+                } else {
+                    RoomManager.enterRoom(connection.room(roomID))
+                }
+                applicationWindow().pageStack.layers.pop();
+            }
+            contentItem: RowLayout {
+                Kirigami.Avatar {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                    source: model.avatar ? ("image://mxc/" + model.avatar) : ""
+                    name: name
+                }
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    RowLayout {
+                        Layout.fillWidth: true
+                        Kirigami.Heading {
+                            Layout.fillWidth: true
+                            level: 4
+                            text: name
+                            font.bold: true
+                            textFormat: Text.PlainText
+                            elide: Text.ElideRight
+                            wrapMode: Text.NoWrap
+                        }
+                        Label {
+                            visible: isJoined || justJoined
+                            text: i18n("Joined")
+                            color: Kirigami.Theme.linkColor
+                        }
+                    }
+                    Label {
+                        Layout.fillWidth: true
+                        visible: text
+                        text: topic ? topic.replace(/(\r\n\t|\n|\r\t)/gm," ") : ""
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+                    RowLayout {
+                        Layout.fillWidth: true
+                        Kirigami.Icon {
+                            source: "user"
+                            color: Kirigami.Theme.disabledTextColor
+                            implicitHeight: Kirigami.Units.iconSizes.small
+                            implicitWidth: Kirigami.Units.iconSizes.small
+                        }
+                        Label {
+                            text: memberCount + " " + (alias ?? roomID)
+                            color: Kirigami.Theme.disabledTextColor
+                            elide: Text.ElideRight
+                            Layout.fillWidth: true
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/qml/Page/LoadingPage.qml

@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.12 as QQC2
+import org.kde.kirigami 2.19 as Kirigami
+
+Kirigami.Page {
+    Kirigami.LoadingPlaceholder {
+        id: loadingIndicator
+        anchors.centerIn: parent
+    }
+}

src/qml/Page/RoomListPage.qml

@@ -0,0 +1,385 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import QtQml.Models 2.15
+
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kitemmodels 1.0
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+
+    header: ColumnLayout {
+        visible: !page.collapsedMode
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        spacing: 0
+
+        ListView {
+            id: spaceList
+            property string activeSpaceId: ''
+
+            orientation: Qt.Horizontal
+            spacing: Kirigami.Units.largeSpacing
+            clip:true
+            visible: spaceList.count > 0
+
+            Layout.preferredHeight: Kirigami.Units.gridUnit * 3
+            Layout.fillWidth: true
+
+            model: SortFilterSpaceListModel {
+                id: sortFilterSpaceListModel
+                sourceModel: RoomListModel {
+                    id: spaceListModel
+                    connection: Controller.activeConnection
+                }
+            }
+
+            header: QQC2.Control {
+                contentItem: QQC2.RoundButton {
+                    id: homeButton
+                    flat: true
+                    padding: Kirigami.Units.gridUnit / 2
+                    icon.name: "home"
+                    text: i18nc("@action:button", "Show All Rooms")
+                    display: QQC2.AbstractButton.IconOnly
+
+                    onClicked: {
+                        sortFilterRoomListModel.activeSpaceId = "";
+                        spaceList.activeSpaceId = '';
+                        listView.positionViewAtIndex(0, ListView.Beginning);
+                    }
+
+                    QQC2.ToolTip {
+                        text: homeButton.text
+                    }
+                }
+            }
+
+            delegate: QQC2.Control {
+                required property string avatar
+                required property var currentRoom
+                required property int index
+                required property string id
+                implicitWidth: ListView.view.headerItem.implicitWidth
+                implicitHeight: ListView.view.headerItem.implicitHeight
+
+                contentItem: Kirigami.Avatar {
+                    actions.main: Kirigami.Action {
+                        onTriggered: {
+                            spaceList.activeSpaceId = id;
+                            sortFilterRoomListModel.activeSpaceId = id;
+                        }
+                    }
+
+                    name: currentRoom.displayName
+
+                    QQC2.ToolTip {
+                        text: currentRoom.displayName
+                    }
+
+                    source: avatar !== "" ? "image://mxc/" + avatar : ""
+                }
+            }
+        }
+        Kirigami.Separator {
+            Layout.fillWidth: true
+        }
+    }
+    id: page
+
+    title: i18n("Rooms")
+
+    property var enteredRoom
+    property bool collapsedMode: Config.roomListPageWidth === applicationWindow().collapsedPageWidth && applicationWindow().shouldUseSidebars
+
+    verticalScrollBarPolicy: collapsedMode ? QQC2.ScrollBar.AlwaysOff : QQC2.ScrollBar.AsNeeded
+
+    onCollapsedModeChanged: if (collapsedMode) {
+        sortFilterRoomListModel.filterText = "";
+    }
+
+    Connections {
+        target: RoomManager
+        function onCurrentRoomChanged() {
+            itemSelection.setCurrentIndex(roomListModel.index(roomListModel.indexForRoom(RoomManager.currentRoom), 0), ItemSelectionModel.SelectCurrent)
+        }
+    }
+
+    function goToNextRoom() {
+        do {
+            listView.incrementCurrentIndex();
+        } while (!listView.currentItem.visible && listView.currentIndex === listView.count)
+        listView.currentItem.action.trigger();
+    }
+
+    function goToPreviousRoom() {
+        do {
+            listView.decrementCurrentIndex();
+        } while (!listView.currentItem.visible && listView.currentIndex !== 0)
+        listView.currentItem.action.trigger();
+    }
+
+    titleDelegate: collapsedMode ? empty : searchField
+
+    Component {
+        id: empty
+        Item {}
+    }
+
+    Component {
+        id: searchField
+        Kirigami.SearchField {
+            Layout.topMargin: Kirigami.Units.smallSpacing
+            Layout.bottomMargin: Kirigami.Units.smallSpacing
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            onTextChanged: sortFilterRoomListModel.filterText = text
+            KeyNavigation.tab: listView
+        }
+    }
+
+    ListView {
+        id: listView
+
+        activeFocusOnTab: true
+        clip: accountList.count > 1
+
+        header: QQC2.ItemDelegate {
+            visible: page.collapsedMode
+            action: Kirigami.Action {
+                id: enterRoomAction
+                onTriggered: quickView.item.open();
+            }
+            topPadding: Kirigami.Units.largeSpacing
+            leftPadding: Kirigami.Units.largeSpacing
+            rightPadding: Kirigami.Units.largeSpacing
+            bottomPadding: Kirigami.Units.largeSpacing
+            width: visible ? page.width : 0
+            height: visible ? Kirigami.Units.gridUnit * 2 : 0
+
+            Kirigami.Icon {
+                anchors.centerIn: parent
+                width: 22
+                height: 22
+                source: "search"
+            }
+            Kirigami.Separator {
+                width: parent.width
+                anchors.bottom: parent.bottom
+            }
+        }
+
+        Layout.fillWidth: true
+
+        Kirigami.PlaceholderMessage {
+            anchors.centerIn: parent
+            width: parent.width - (Kirigami.Units.largeSpacing * 4)
+            visible: listView.count == 0
+            text: sortFilterRoomListModel.filterText.length > 0 ? i18n("No rooms found") : i18n("Join some rooms to get started")
+            helpfulAction: Kirigami.Action {
+                icon.name: sortFilterRoomListModel.filterText.length > 0 ? "search" : "list-add"
+                text: sortFilterRoomListModel.filterText.length > 0 ? i18n("Search in room directory") : i18n("Explore rooms")
+                onTriggered: pageStack.layers.push("qrc:/JoinRoomPage.qml", {
+                    connection: Controller.activeConnection,
+                    keyword: sortFilterRoomListModel.filterText
+                })
+            }
+        }
+
+
+        ItemSelectionModel {
+            id: itemSelection
+            model: roomListModel
+            onCurrentChanged: {
+                listView.currentIndex = sortFilterRoomListModel.mapFromSource(current).row
+            }
+        }
+
+        model: SortFilterRoomListModel {
+            id: sortFilterRoomListModel
+            sourceModel: RoomListModel {
+                id: roomListModel
+                connection: Controller.activeConnection
+            }
+            roomSortOrder: Config.mergeRoomList ? SortFilterRoomListModel.LastActivity : SortFilterRoomListModel.Categories
+            onLayoutChanged: {
+                listView.currentIndex = sortFilterRoomListModel.mapFromSource(itemSelection.currentIndex).row
+            }
+        }
+
+        section.property: sortFilterRoomListModel.filterText.length === 0 && !Config.mergeRoomList ? "category" : null
+        section.delegate: Kirigami.ListSectionHeader {
+            id: sectionHeader
+            height: implicitHeight
+            action: Kirigami.Action {
+                onTriggered: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
+            }
+            contentItem: RowLayout {
+                implicitHeight: categoryName.implicitHeight
+                Kirigami.Heading {
+                    id: categoryName
+                    level: 3
+                    text: roomListModel.categoryName(section)
+                    Layout.fillWidth: true
+                    elide: Text.ElideRight
+                    visible: !page.collapsedMode
+                }
+                Kirigami.Icon {
+                    source: page.collapsedMode ? roomListModel.categoryIconName(section) : (roomListModel.categoryVisible(section) ? "go-up" : "go-down")
+                    implicitHeight: Kirigami.Units.iconSizes.small
+                    implicitWidth: Kirigami.Units.iconSizes.small
+                    Layout.alignment: Qt.AlignHCenter
+                }
+            }
+        }
+
+        reuseItems: true
+        currentIndex: -1 // we don't want any room highlighted by default
+
+        delegate: page.collapsedMode ? collapsedModeListComponent : normalModeListComponent
+
+        Component {
+            id: collapsedModeListComponent
+
+            QQC2.ItemDelegate {
+                action: Kirigami.Action {
+                    id: enterRoomAction
+                    onTriggered: {
+                        RoomManager.enterRoom(currentRoom);
+                    }
+                }
+                Keys.onEnterPressed: enterRoomAction.trigger()
+                Keys.onReturnPressed: enterRoomAction.trigger()
+                topPadding: Kirigami.Units.largeSpacing
+                leftPadding: Kirigami.Units.largeSpacing
+                rightPadding: Kirigami.Units.largeSpacing
+                bottomPadding: Kirigami.Units.largeSpacing
+                width: ListView.view.width
+                height: ListView.view.width
+
+                contentItem: Kirigami.Avatar {
+                    source: avatar ? "image://mxc/" + avatar : ""
+                    name: model.name || i18n("No Name")
+                    sourceSize.width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2
+                    sourceSize.height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2
+                }
+
+                QQC2.ToolTip {
+                    enabled: text.length !== 0
+                    text: name ?? ""
+                }
+            }
+        }
+
+        Component {
+            id: roomListContextMenu
+            RoomListContextMenu {}
+        }
+
+        Component {
+            id: normalModeListComponent
+            Kirigami.BasicListItem {
+                id: roomListItem
+                visible: model.categoryVisible || sortFilterRoomListModel.filterText.length > 0 || Config.mergeRoomList
+                topPadding: Kirigami.Units.largeSpacing
+                bottomPadding: Kirigami.Units.largeSpacing
+                highlighted: listView.currentIndex === index
+                focus: true
+                icon: undefined
+                action: Kirigami.Action {
+                    id: enterRoomAction
+                    onTriggered: {
+                        RoomManager.enterRoom(currentRoom);
+                    }
+                }
+                Keys.onEnterPressed: enterRoomAction.trigger()
+                Keys.onReturnPressed: enterRoomAction.trigger()
+                bold: unreadCount > 0
+                label: name ?? ""
+                labelItem.textFormat: Text.PlainText
+                subtitle: subtitleText
+                subtitleItem.textFormat: Text.PlainText
+                onPressAndHold: {
+                    createRoomListContextMenu()
+                }
+                TapHandler {
+                    acceptedButtons: Qt.RightButton
+                    acceptedDevices: PointerDevice.Mouse
+                    onTapped: createRoomListContextMenu()
+                }
+
+                leading: Kirigami.Avatar {
+                    source: avatar ? "image://mxc/" + avatar : ""
+                    name: model.name || i18n("No Name")
+                    implicitWidth: visible ? height : 0
+                    visible: Config.showAvatarInTimeline
+                    sourceSize.width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2
+                    sourceSize.height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2
+                }
+
+                trailing: RowLayout {
+                    QQC2.Label {
+                        text: notificationCount > 0 ? notificationCount : "●"
+                        visible: unreadCount > 0
+                        padding: Kirigami.Units.smallSpacing
+                        color: Kirigami.Theme.textColor
+                        Layout.minimumWidth: height
+                        horizontalAlignment: Text.AlignHCenter
+                        background: Rectangle {
+                            visible: notificationCount > 0
+                            Kirigami.Theme.colorSet: Kirigami.Theme.Button
+                            color: highlightCount > 0 ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.disabledTextColor
+                            opacity: highlightCount > 0 ? 1 : 0.3
+                            radius: height / 2
+                        }
+                    }
+                    QQC2.Button {
+                        id: configButton
+                        visible: roomListItem.hovered
+                        Accessible.name: i18n("Configure room")
+
+                        action: Kirigami.Action {
+                            id: optionAction
+                            icon.name: "configure"
+                            onTriggered: {
+                                createRoomListContextMenu()
+                            }
+                        }
+                    }
+                }
+
+                function createRoomListContextMenu() {
+                    const menu = roomListContextMenu.createObject(page, {room: currentRoom})
+                    configButton.visible = true
+                    configButton.down = true
+                    menu.closed.connect(function() {
+                        configButton.down = undefined
+                        configButton.visible = Qt.binding(function() { return roomListItem.hovered || Kirigami.Settings.isMobile })
+                    })
+                    menu.open()
+                }
+            }
+        }
+    }
+
+    footer: QQC2.ToolBar {
+        visible: AccountRegistry.accountCount > 1 && !collapsedMode
+        height: visible ? implicitHeight : 0
+
+        contentItem: QQC2.ComboBox {
+            id: accountList
+
+            model: AccountRegistry
+            textRole: "userId"
+            valueRole: "connection"
+            onActivated: Controller.activeConnection = currentValue
+            Component.onCompleted: currentIndex = indexOfValue(Controller.activeConnection)
+        }
+    }
+}

src/qml/Page/RoomPage.qml

@@ -0,0 +1,647 @@
+// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1 as Platform
+import Qt.labs.qmlmodels 1.0
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kitemmodels 1.0
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: page
+
+    /// It's not readonly because of the seperate window view.
+    property var currentRoom: RoomManager.currentRoom
+    property bool loading: page.currentRoom === null || (messageListView.count === 0 && !page.currentRoom.allHistoryLoaded && !page.currentRoom.isInvite)
+    /// Used to determine if scrolling to the bottom should mark the message as unread
+    property bool hasScrolledUpBefore: false;
+
+    /// Disable cancel shortcut. Used by the seperate window since it provide its own
+    /// cancel implementation.
+    property bool disableCancelShortcut: false
+
+    title: currentRoom.displayName
+
+    KeyNavigation.left: pageStack.get(0)
+
+    Connections {
+        target: RoomManager
+        function onCurrentRoomChanged() {
+            if(!RoomManager.currentRoom) {
+                if(pageStack.lastItem == page) {
+                    pageStack.pop()
+                }
+            } else if (page.currentRoom.isInvite) {
+                page.currentRoom.clearInvitationNotification();
+            }
+        }
+    }
+
+    signal switchRoomUp()
+    signal switchRoomDown()
+
+    onCurrentRoomChanged: {
+        hasScrolledUpBefore = false;
+    }
+
+    Connections {
+        target: messageEventModel
+        function onRowsInserted() {
+            markReadIfVisibleTimer.restart()
+        }
+    }
+
+    Timer {
+        id: markReadIfVisibleTimer
+        interval: 1000
+        onTriggered: {
+            if (loading || !currentRoom.readMarkerLoaded || !applicationWindow().active) {
+                restart()
+            } else {
+                markReadIfVisible()
+            }
+        }
+    }
+
+    ActionsHandler {
+        id: actionsHandler
+        room: page.currentRoom
+    }
+
+    Shortcut {
+        sequence: StandardKey.Cancel
+        onActivated: applicationWindow().pageStack.get(0).forceActiveFocus()
+        enabled: !page.disableCancelShortcut
+    }
+
+    Connections {
+        target: Controller.activeConnection
+        function onJoinedRoom(room, invited) {
+            if(page.currentRoom.id === invited.id) {
+                RoomManager.enterRoom(room);
+            }
+        }
+    }
+
+    Connections {
+        target: currentRoom
+        function onShowMessage(messageType, message) {
+            page.header.contentItem.text = message;
+            page.header.contentItem.type = messageType === ActionsHandler.Error ? Kirigami.MessageType.Error : messageType === ActionsHandler.Positive ? Kirigami.MessageType.Positive : Kirigami.MessageType.Information;
+            page.header.visible = true;
+        }
+    }
+
+    header: QQC2.Control {
+        height: visible ? implicitHeight : 0
+        visible: false
+        padding: Kirigami.Units.smallSpacing
+        contentItem: Kirigami.InlineMessage {
+            showCloseButton: true
+            visible: true
+        }
+    }
+
+    Kirigami.PlaceholderMessage {
+        id: invitation
+
+        visible: currentRoom && currentRoom.isInvite
+        anchors.centerIn: parent
+        text: i18n("Accept this invitation?")
+        RowLayout {
+            QQC2.Button {
+                Layout.alignment : Qt.AlignHCenter
+                text: i18n("Reject")
+
+                onClicked: RoomManager.leaveRoom(page.currentRoom);
+            }
+
+            QQC2.Button {
+                Layout.alignment : Qt.AlignHCenter
+                text: i18n("Accept")
+
+                onClicked: {
+                    currentRoom.acceptInvitation();
+                }
+            }
+        }
+    }
+
+    Kirigami.LoadingPlaceholder {
+        id: loadingIndicator
+        anchors.centerIn: parent
+        visible: loading
+    }
+
+    focus: true
+
+    Keys.onTabPressed: {
+        if (event.modifiers & Qt.ControlModifier) {
+            switchRoomDown();
+        }
+    }
+
+    Keys.onBacktabPressed: {
+        if (event.modifiers & Qt.ControlModifier) {
+            switchRoomUp();
+        }
+    }
+
+    Keys.onPressed: {
+        if (event.key === Qt.Key_PageDown && (event.modifiers & Qt.ControlModifier)) {
+            switchRoomDown();
+        } else if (event.key === Qt.Key_PageUp && (event.modifiers & Qt.ControlModifier)) {
+            switchRoomUp();
+        } else if (!(event.modifiers & Qt.ControlModifier) && event.key < Qt.Key_Escape) {
+            event.accepted = true;
+            chatBox.addText(event.text);
+            chatBox.focusInputField();
+            return;
+        }
+    }
+
+    // hover actions on a delegate, activated in TimelineContainer.qml
+    Connections {
+        target: page.flickable
+        enabled: hoverActions.visible
+        function onContentYChanged() {
+            hoverActions.updateFunction();
+        }
+    }
+
+    CollapseStateProxyModel {
+        id: collapseStateProxyModel
+        sourceModel: sortedMessageEventModel
+    }
+
+    ListView {
+        id: messageListView
+        visible: !invitation.visible
+
+        readonly property int largestVisibleIndex: count > 0 ? indexAt(contentX + (width / 2), contentY + height - 1) : -1
+        readonly property bool isLoaded: page.width * page.height > 10
+
+        spacing: 0
+
+        verticalLayoutDirection: ListView.BottomToTop
+        highlightMoveDuration: 500
+
+        model: !isLoaded ? undefined : collapseStateProxyModel
+
+        MessageEventModel {
+            id: messageEventModel
+
+            room: currentRoom
+        }
+
+        Timer {
+            interval: 1000
+            running: messageListView.atYBeginning
+            triggeredOnStart: true
+            onTriggered: {
+                if (messageListView.atYBeginning && messageEventModel.canFetchMore(messageEventModel.index(0, 0))) {
+                    messageEventModel.fetchMore(messageEventModel.index(0, 0));
+                }
+            }
+            repeat: true
+        }
+
+        // HACK: The view should do this automatically but doesn't.
+        onAtYBeginningChanged: if (atYBeginning && messageEventModel.canFetchMore(messageEventModel.index(0, 0))) {
+            messageEventModel.fetchMore(messageEventModel.index(0, 0));
+        }
+
+        onAtYEndChanged: if (atYEnd && hasScrolledUpBefore) {
+            if (QQC2.ApplicationWindow.window && (QQC2.ApplicationWindow.window.visibility !== QQC2.ApplicationWindow.Hidden)) {
+                currentRoom.markAllMessagesAsRead();
+            }
+            hasScrolledUpBefore = false;
+        } else if (!atYEnd) {
+            hasScrolledUpBefore = true;
+        }
+
+        QQC2.Popup {
+            anchors.centerIn: parent
+
+            id: attachDialog
+
+            padding: 16
+
+            contentItem: RowLayout {
+                QQC2.ToolButton {
+                    Layout.preferredWidth: 160
+                    Layout.fillHeight: true
+
+                    icon.name: 'mail-attachment'
+
+                    text: i18n("Choose local file")
+
+                    onClicked: {
+                        attachDialog.close()
+
+                        var fileDialog = openFileDialog.createObject(QQC2.ApplicationWindow.overlay)
+
+                        fileDialog.chosen.connect(function(path) {
+                            if (!path) {
+                                return;
+                            }
+                            currentRoom.chatBoxAttachmentPath = path;
+                        })
+
+                        fileDialog.open()
+                    }
+                }
+
+                Kirigami.Separator {}
+
+                QQC2.ToolButton {
+                    Layout.preferredWidth: 160
+                    Layout.fillHeight: true
+
+                    padding: 16
+
+                    icon.name: 'insert-image'
+                    text: i18n("Clipboard image")
+                    onClicked: {
+                        const localPath = Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/screenshots/" + (new Date()).getTime() + ".png"
+                        if (!Clipboard.saveImage(localPath)) {
+                            return;
+                        }
+                        currentRoom.chatBoxAttachmentPath = localPath;
+                        attachDialog.close();
+                    }
+                }
+            }
+        }
+
+        Component {
+            id: openFileDialog
+
+            OpenFileDialog {}
+        }
+
+
+        MessageFilterModel {
+            id: sortedMessageEventModel
+
+            sourceModel: messageEventModel
+        }
+
+        delegate: EventDelegate {}
+
+        QQC2.RoundButton {
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: Kirigami.Units.largeSpacing
+            anchors.rightMargin: Kirigami.Units.largeSpacing
+            implicitWidth: Kirigami.Units.gridUnit * 2
+            implicitHeight: Kirigami.Units.gridUnit * 2
+
+            id: goReadMarkerFab
+
+            visible: currentRoom && currentRoom.hasUnreadMessages && currentRoom.readMarkerLoaded
+            action: Kirigami.Action {
+                onTriggered: {
+                    messageListView.goToEvent(currentRoom.readMarkerEventId)
+                }
+                icon.name: "go-up"
+            }
+
+            QQC2.ToolTip {
+                text: i18n("Jump to first unread message")
+            }
+        }
+        QQC2.RoundButton {
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: Kirigami.Units.largeSpacing + messageListView.headerItem.height
+            anchors.rightMargin: Kirigami.Units.largeSpacing
+            implicitWidth: Kirigami.Units.gridUnit * 2
+            implicitHeight: Kirigami.Units.gridUnit * 2
+
+            id: goMarkAsReadFab
+
+            visible: !messageListView.atYEnd
+            action: Kirigami.Action {
+                onTriggered: {
+                    goToLastMessage();
+                    currentRoom.markAllMessagesAsRead();
+                }
+                icon.name: "go-down"
+            }
+
+            QQC2.ToolTip {
+                text: i18n("Jump to latest message")
+            }
+        }
+
+        Component.onCompleted: {
+            positionViewAtBeginning();
+        }
+
+        DropArea {
+            id: dropAreaFile
+            anchors.fill: parent
+            onDropped: currentRoom.chatBoxAttachmentPath = drop.urls[0];
+        }
+
+        QQC2.Pane {
+            visible: dropAreaFile.containsDrag
+            anchors {
+                fill: parent
+                margins: Kirigami.Units.gridUnit
+            }
+
+            Kirigami.PlaceholderMessage {
+                anchors.centerIn: parent
+                width: parent.width - (Kirigami.Units.largeSpacing * 4)
+                text: i18n("Drag items here to share them")
+            }
+        }
+
+        Component {
+            id: messageDelegateContextMenu
+
+            MessageDelegateContextMenu {}
+        }
+
+        Component {
+            id: fileDelegateContextMenu
+
+            FileDelegateContextMenu {}
+        }
+
+        Component {
+            id: fullScreenImage
+
+            FullScreenImage {}
+        }
+
+        Component {
+            id: userDetailDialog
+
+            UserDetailDialog {}
+        }
+
+        header: TypingPane {
+            id: typingPane
+            visible: !loadingIndicator.visible && currentRoom && currentRoom.usersTyping.length > 0
+            labelText: visible ? i18ncp(
+                "Message displayed when some users are typing", "%2 is typing", "%2 are typing",
+                currentRoom.usersTyping.length,
+                currentRoom.usersTyping.map(user => user.displayName).join(", ")
+            ) : ""
+            anchors.left: parent.left
+            height: visible ? implicitHeight : 0
+            Behavior on height {
+                NumberAnimation {
+                    property: "height"
+                    duration: Kirigami.Units.shortDuration
+                    easing.type: Easing.OutCubic
+                }
+            }
+            z: 2
+        }
+        headerPositioning: ListView.OverlayHeader
+
+        function goToEvent(eventID) {
+            const index = eventToIndex(eventID)
+            messageListView.positionViewAtIndex(index, ListView.Center)
+            itemAtIndex(index).isTemporaryHighlighted = true
+        }
+
+        Item {
+            id: hoverActions
+            property var event: null
+            property bool userMsg: event && event.author.id === Controller.activeConnection.localUserId
+            property bool showEdit: event && (userMsg && (event.eventType === "emote" || event.eventType === "message"))
+            property var delegate: null
+            property var bubble: null
+            property var hovered: bubble && bubble.hovered
+            property var visibleDelayed: (hovered || hoverHandler.hovered) && !Kirigami.Settings.isMobile
+            onVisibleDelayedChanged: if (visibleDelayed) {
+                visible = true;
+            } else {
+                // HACK: delay disapearing by 200ms, otherwise this can create some glitches
+                // See https://invent.kde.org/network/neochat/-/issues/333
+                hoverActionsTimer.restart();
+            }
+            Timer {
+                id: hoverActionsTimer
+                interval: 200
+                onTriggered: hoverActions.visible = hoverActions.visibleDelayed;
+            }
+
+            property int childOffset: userMsg && Config.showLocalMessagesOnRight && !Config.compactLayout ? (bubble ? bubble.width : 0) - childWidth : Math.max((bubble ? bubble.width : 0) - childWidth, 0)
+            x: delegate && bubble ? (delegate.x + bubble.x + Kirigami.Units.largeSpacing + childOffset - (Config.compactLayout ? Kirigami.Units.gridUnit * 3 + (delegate.width >= Kirigami.Units.gridUnit * 20 ? Kirigami.Units.gridUnit * 2 : 0 ): 0) - (userMsg && !Config.compactLayout ? Kirigami.Units.gridUnit : 0)) : 0
+            y: bubble ? bubble.mapToItem(parent, 0, 0).y - hoverActions.childHeight + Kirigami.Units.smallSpacing: 0;
+
+            visible: false
+
+            property var updateFunction
+
+            property alias childWidth: hoverActionsRow.width
+            property alias childHeight: hoverActionsRow.height
+
+            RowLayout {
+                id: hoverActionsRow
+                z: 4
+                spacing: 0
+                HoverHandler {
+                    id: hoverHandler
+                    margin: Kirigami.Units.smallSpacing
+                }
+                Kirigami.Icon {
+                    source: "security-high"
+                    width: height
+                    height: parent.height
+                    visible: hoverActions.event.verified
+                    HoverHandler {
+                        id: hover
+                    }
+                    QQC2.ToolTip.text: i18n("This message was sent from a verified device")
+                    QQC2.ToolTip.visible: hover.hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                }
+
+                QQC2.Button {
+                    QQC2.ToolTip.text: i18n("React")
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                    icon.name: "preferences-desktop-emoticons"
+                    onClicked: emojiDialog.open();
+                    EmojiDialog {
+                        id: emojiDialog
+                        onReact: {
+                            page.currentRoom.toggleReaction(hoverActions.event.eventId, emoji);
+                            chatBox.focusInputField();
+                        }
+                    }
+                }
+                QQC2.Button {
+                    QQC2.ToolTip.text: i18n("Edit")
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                    visible: hoverActions.showEdit
+                    icon.name: "document-edit"
+                    onClicked: {
+                        currentRoom.chatBoxEditId = hoverActions.event.eventId;
+                        currentRoom.chatBoxReplyId = "";
+                        chatBox.focusInputField();
+                    }
+                }
+                QQC2.Button {
+                    QQC2.ToolTip.text: i18n("Reply")
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                    icon.name: "mail-replied-symbolic"
+                    onClicked: {
+                        currentRoom.chatBoxReplyId = hoverActions.event.eventId;
+                        currentRoom.chatBoxEditId = "";
+                        chatBox.focusInputField();
+                    }
+                }
+            }
+        }
+    }
+
+
+    footer: ChatBox {
+        id: chatBox
+        visible: !invitation.visible && !(messageListView.count === 0 && !currentRoom.allHistoryLoaded)
+        width: parent.width
+        onMessageSent: {
+            if (!messageListView.atYEnd) {
+                goToLastMessage();
+            }
+        }
+    }
+
+    background: FancyEffectsContainer {
+        id: fancyEffectsContainer
+        z: 100
+
+        enabled: Config.showFancyEffects
+
+        function processFancyEffectsReason(fancyEffect) {
+            if (fancyEffect === "snowflake") {
+                fancyEffectsContainer.showSnowEffect()
+            }
+            if (fancyEffect === "fireworks") {
+                fancyEffectsContainer.showFireworksEffect()
+            }
+            if (fancyEffect === "confetti") {
+                fancyEffectsContainer.showConfettiEffect()
+            }
+        }
+
+        Connections {
+            enabled: Config.showFancyEffects
+            target: messageEventModel
+            function onFancyEffectsReasonFound(fancyEffect) {
+                fancyEffectsContainer.processFancyEffectsReason(fancyEffect)
+            }
+        }
+
+        Connections {
+            enabled: Config.showFancyEffects
+            target: actionsHandler
+            function onShowEffect(fancyEffect) {
+                fancyEffectsContainer.processFancyEffectsReason(fancyEffect)
+            }
+        }
+    }
+
+
+    function warning(title, message) {
+        page.header.contentItem.text = `${title}<br />${message}`;
+        page.header.contentItem.type =  Kirigami.MessageType.Warning;
+        page.header.visible = true;
+    }
+
+    function showUserDetail(user) {
+        userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+            room: currentRoom,
+            user: user,
+        }).open();
+    }
+
+    function goToLastMessage() {
+        currentRoom.markAllMessagesAsRead()
+        // scroll to the very end, i.e to messageListView.YEnd
+        messageListView.positionViewAtIndex(0, ListView.End)
+    }
+
+    function eventToIndex(eventID) {
+        const index = messageEventModel.eventIDToIndex(eventID)
+        if (index === -1)
+            return -1
+        return sortedMessageEventModel.mapFromSource(messageEventModel.index(index, 0)).row
+    }
+
+    function firstVisibleIndex() {
+        let center = messageListView.x + messageListView.width / 2;
+        let index = -1
+        let i = 0
+        while(index === -1 && i < 100) {
+            index = messageListView.indexAt(center, messageListView.y + messageListView.contentY + i);
+            i++;
+        }
+        return index
+    }
+
+    function lastVisibleIndex() {
+        let center = messageListView.x + messageListView.width / 2;
+        let index = -1
+        let i = 0
+        while(index === -1 && i < 100) {
+            index = messageListView.indexAt(center, messageListView.y + messageListView.contentY + messageListView.height - i);
+            i++
+        }
+        return index;
+    }
+
+    // Mark all messages as read if all unread messages are visible to the user
+    function markReadIfVisible() {
+        let readMarkerRow = eventToIndex(currentRoom.readMarkerEventId)
+        if (readMarkerRow > 0 && readMarkerRow < firstVisibleIndex()) {
+            currentRoom.markAllMessagesAsRead()
+        }
+    }
+
+    /// Open message context dialog for file and videos
+    function openFileContext(event, file) {
+        const contextMenu = fileDelegateContextMenu.createObject(page, {
+            author: event.author,
+            message: event.message,
+            eventId: event.eventId,
+            source: event.source,
+            file: file,
+            mimeType: event.mimeType,
+            progressInfo: event.progressInfo,
+            plainMessage: event.message,
+        });
+        contextMenu.open();
+    }
+
+    /// Open context menu for normal message
+    function openMessageContext(event, selectedText, plainMessage) {
+        const contextMenu = messageDelegateContextMenu.createObject(page, {
+            selectedText: selectedText,
+            author: event.author,
+            message: event.display,
+            eventId: event.eventId,
+            formattedBody: event.formattedBody,
+            source: event.source,
+            eventType: event.eventType,
+            plainMessage: plainMessage,
+        });
+        contextMenu.open();
+    }
+}

src/qml/Page/RoomWindow.qml

@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+Kirigami.ApplicationWindow {
+    id: window
+    required property var currentRoom
+    minimumWidth: Kirigami.Units.gridUnit * 10
+    minimumHeight: Kirigami.Units.gridUnit * 15
+
+    Shortcut {
+        sequence: StandardKey.Cancel
+        onActivated: window.close()
+    }
+    pageStack.initialPage: RoomPage {
+        visible: true
+        currentRoom: window.currentRoom
+        disableCancelShortcut: true
+    }
+}

src/qml/Page/StartChatPage.qml

@@ -0,0 +1,137 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+
+    property var connection
+
+    title: i18n("Start a Chat")
+
+    header: Control {
+        padding: Kirigami.Units.largeSpacing
+        contentItem: RowLayout {
+            Kirigami.SearchField {
+                id: identifierField
+
+                property bool isUserID: text.match(/@(.+):(.+)/g)
+
+                Layout.fillWidth: true
+
+                placeholderText: i18n("Find a user...")
+
+                onAccepted: userDictListModel.search()
+            }
+
+            Button {
+                visible: identifierField.isUserID
+
+                text: i18n("Chat")
+                highlighted: true
+
+                onClicked: {
+                    connection.requestDirectChat(identifierField.text);
+                    applicationWindow().pageStack.layers.pop();
+                }
+            }
+        }
+    }
+
+    ListView {
+        id: userDictListView
+
+        clip: true
+
+        spacing: Kirigami.Units.smallSpacing
+
+        model: UserDirectoryListModel {
+            id: userDictListModel
+
+            connection: root.connection
+            keyword: identifierField.text
+        }
+
+        delegate: Kirigami.AbstractListItem {
+            width: userDictListView.width
+            contentItem: RowLayout {
+                spacing: Kirigami.Units.largeSpacing
+
+                Kirigami.Avatar {
+                    Layout.preferredWidth: height
+                    Layout.fillHeight: true
+
+                    source: avatar
+                    name: name
+                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    spacing: 0
+
+                    Kirigami.Heading {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        text: name
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+
+                    Label {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        text: userID
+                        color: Kirigami.Theme.disabledColor
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                    }
+                }
+
+                Button {
+                    id: joinChatButton
+                    Layout.alignment: Qt.AlignRight
+                    visible: directChats && directChats.length > 0
+
+                    icon.name: "document-send"
+                    onClicked: {
+                        connection.requestDirectChat(userID);
+                        applicationWindow().pageStack.layers.pop();
+                    }
+                }
+
+                Button {
+                    Layout.alignment: Qt.AlignRight
+                    icon.name: "irc-join-channel"
+                    // We wants to make sure an user can't start more than one
+                    // chat with someone.
+                    visible: !joinChatButton.visible
+
+                    onClicked: {
+                        connection.requestDirectChat(userID);
+                        applicationWindow().pageStack.layers.pop();
+                    }
+                }
+            }
+        }
+
+        Kirigami.PlaceholderMessage {
+            anchors.centerIn: parent
+            visible: userDictListView.count < 1
+            text: i18n("No users available")
+        }
+    }
+}

src/qml/Page/WelcomePage.qml

@@ -0,0 +1,103 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: welcomePage
+
+    property alias currentStep: module.item
+
+    title: module.item.title ?? i18n("Welcome")
+
+    header: Controls.Control {
+        contentItem: Kirigami.InlineMessage {
+            id: headerMessage
+            type: Kirigami.MessageType.Error
+            showCloseButton: true
+            visible: false
+        }
+    }
+
+    Component.onCompleted: LoginHelper.init()
+
+    Connections {
+        target: LoginHelper
+        function onErrorOccured(message) {
+            headerMessage.text = message;
+            headerMessage.visible = true;
+            headerMessage.type = Kirigami.MessageType.Error;
+        }
+    }
+
+    Connections {
+        target: Controller
+        function onInitiated() {
+            pageStack.layers.pop();
+        }
+    }
+
+    ColumnLayout {
+        Kirigami.Icon {
+            source: "org.kde.neochat"
+            Layout.fillWidth: true
+            Layout.preferredHeight: Kirigami.Units.gridUnit * 16
+        }
+        Controls.Label {
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignHCenter
+            font.pixelSize: 25
+            text: module.item.message ?? module.item.title ?? i18n("Welcome to Matrix")
+        }
+
+        Loader {
+            id: module
+            Layout.alignment: Qt.AlignHCenter
+            source: "qrc:/Login.qml"
+            onSourceChanged: {
+                headerMessage.visible = false
+                headerMessage.text = ""
+            }
+        }
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+
+            Controls.Button {
+                text: i18nc("@action:button", "Back")
+
+                enabled: welcomePage.currentStep.previousUrl !== ""
+                visible: welcomePage.currentStep.showBackButton
+                Layout.alignment: Qt.AlignHCenter
+                onClicked: {
+                    module.source = welcomePage.currentStep.previousUrl
+                }
+            }
+
+            Controls.Button {
+                id: continueButton
+                enabled: welcomePage.currentStep.acceptable
+                visible: welcomePage.currentStep.showContinueButton
+                action: welcomePage.currentStep.action
+            }
+        }
+
+        Connections {
+            target: currentStep
+
+            function onProcessed(nextUrl) {
+                module.source = nextUrl;
+            }
+            function onShowMessage(message) {
+                headerMessage.text = message;
+                headerMessage.visible = true;
+                headerMessage.type = Kirigami.MessageType.Information;
+            }
+        }
+    }
+}

src/qml/Panel/RoomDrawer.qml

@@ -0,0 +1,336 @@
+// SPDX-FileCopyrightText: 2018-2019 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kitemmodels 1.0
+
+import org.kde.neochat 1.0
+
+Kirigami.OverlayDrawer {
+    id: roomDrawer
+    readonly property var room: RoomManager.currentRoom
+
+    width: actualWidth
+
+    readonly property int minWidth: Kirigami.Units.gridUnit * 15
+    readonly property int maxWidth: Kirigami.Units.gridUnit * 25
+    readonly property int defaultWidth: Kirigami.Units.gridUnit * 20
+    property int actualWidth: {
+        if (Config.roomDrawerWidth === -1) {
+            return Kirigami.Units.gridUnit * 20;
+        } else {
+            return Config.roomDrawerWidth
+        }
+    }
+
+    MouseArea {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.right: undefined
+        width: 2
+        z: 500
+        cursorShape: !Kirigami.Settings.isMobile ? Qt.SplitHCursor : undefined
+        enabled: true
+        visible: true
+        onPressed: _lastX = mapToGlobal(mouseX, mouseY).x
+        onReleased: {
+            Config.roomDrawerWidth = roomDrawer.actualWidth;
+            Config.save();
+        }
+        property real _lastX: -1
+
+        onPositionChanged: {
+            if (_lastX === -1) {
+                return;
+            }
+            if (Qt.application.layoutDirection === Qt.RightToLeft) {
+                roomDrawer.actualWidth = Math.min(roomDrawer.maxWidth, Math.max(roomDrawer.minWidth, Config.roomDrawerWidth - _lastX + mapToGlobal(mouseX, mouseY).x))
+            } else {
+                roomDrawer.actualWidth = Math.min(roomDrawer.maxWidth, Math.max(roomDrawer.minWidth, Config.roomDrawerWidth + _lastX - mapToGlobal(mouseX, mouseY).x))
+            }
+        }
+    }
+    enabled: true
+
+    edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
+
+    // If modal has been changed and the drawer is closed automatically then dim on popup open will have been switched off in main.qml so switch it back on after the animation completes.
+    // This is to avoid dim being active for a split second when the drawer is switched to modal which looks terrible.
+    onAnimatingChanged: if (dim === false) dim = undefined
+
+    topPadding: 0
+    leftPadding: 0
+    rightPadding: 0
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+    contentItem: Loader {
+        id: loader
+        active: roomDrawer.drawerOpen
+        sourceComponent: ColumnLayout {
+            id: columnLayout
+            property alias userSearchText: userListSearchField.text
+            property alias highlightedUser: userListView.currentIndex
+            spacing: 0
+
+            Kirigami.AbstractApplicationHeader {
+                Layout.fillWidth: true
+                topPadding: Kirigami.Units.smallSpacing / 2;
+                bottomPadding: Kirigami.Units.smallSpacing / 2;
+                rightPadding: Kirigami.Units.largeSpacing
+                leftPadding: Kirigami.Units.largeSpacing
+
+                RowLayout {
+                    anchors.fill: parent
+                    spacing: Kirigami.Units.smallSpacing
+
+                    Kirigami.Heading {
+                        Layout.fillWidth: true
+                        text: i18n("Room information")
+                        level: 1
+                    }
+                    ToolButton {
+                        id: inviteButton
+
+                        Layout.alignment: Qt.AlignRight
+                        icon.name: "list-add-user"
+                        text: i18n("Invite user to room")
+                        display: AbstractButton.IconOnly
+
+                        onClicked: {
+                            applicationWindow().pageStack.layers.push("qrc:/InviteUserPage.qml", {room: room})
+                            roomDrawer.close();
+                        }
+
+                        ToolTip {
+                            text: inviteButton.text
+                        }
+                    }
+                    ToolButton {
+                        id: favouriteButton
+
+                        Layout.alignment: Qt.AlignRight
+                        icon.name: room && room.isFavourite ? "rating" : "rating-unrated"
+                        checkable: true
+                        checked: room && room.isFavourite
+                        text: room && room.isFavourite ? i18n("Remove room from favorites") : i18n("Make room favorite")
+                        display: AbstractButton.IconOnly
+
+                        onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0)
+
+                        ToolTip {
+                            text: favouriteButton.text
+                        }
+                    }
+                    ToolButton {
+                        id: settingsButton
+
+                        Layout.alignment: Qt.AlignRight
+                        icon.name: 'settings-configure'
+                        text: i18n("Room settings")
+                        display: AbstractButton.IconOnly
+
+                        onClicked: ApplicationWindow.window.pageStack.pushDialogLayer('qrc:/Categories.qml', {room: room})
+
+                        ToolTip {
+                            text: settingsButton.text
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.margins: Kirigami.Units.largeSpacing
+                spacing: Kirigami.Units.largeSpacing
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.leftMargin: Kirigami.Units.smallSpacing
+                    spacing: Kirigami.Units.largeSpacing
+
+                    Kirigami.Avatar {
+                        Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5
+                        Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5
+
+                        name: room ? room.name : i18n("No name")
+                        source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
+                    }
+
+                    ColumnLayout {
+                        Layout.fillWidth: true
+                        Layout.alignment: Qt.AlignVCenter
+                        spacing: 0
+
+                        Kirigami.Heading {
+                            Layout.fillWidth: true
+                            level: 1
+                            type: Kirigami.Heading.Type.Primary
+                            wrapMode: Label.Wrap
+                            text: room ? room.displayName : i18n("No name")
+                            textFormat: Text.PlainText
+                        }
+                        TextEdit {
+                            Layout.fillWidth: true
+                            textFormat: TextEdit.PlainText
+                            wrapMode: Text.WordWrap
+                            selectByMouse: true
+                            color: Kirigami.Theme.textColor
+                            selectedTextColor: Kirigami.Theme.highlightedTextColor
+                            selectionColor: Kirigami.Theme.highlightColor
+                            readOnly: true
+                            text: room && room.canonicalAlias ? room.canonicalAlias : i18n("No Canonical Alias")
+                        }
+                    }
+                }
+
+                TextEdit {
+                    Layout.fillWidth: true
+                    text: room && room.topic ? room.topic.replace(replaceLinks, "<a href=\"$1\">$1</a>") : i18n("No Topic")
+                    readonly property var replaceLinks: /(https:\/\/[^ ]*)/
+                    textFormat: TextEdit.MarkdownText
+                    wrapMode: Text.WordWrap
+                    selectByMouse: true
+                    color: Kirigami.Theme.textColor
+                    selectedTextColor: Kirigami.Theme.highlightedTextColor
+                    selectionColor: Kirigami.Theme.highlightColor
+                    onLinkActivated: UrlHelper.openUrl(link)
+                    readOnly: true
+                    MouseArea {
+                        anchors.fill: parent
+                        acceptedButtons: Qt.NoButton
+                        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
+                    }
+                }
+            }
+
+            Kirigami.ListSectionHeader {
+                label: i18n("Members")
+                activeFocusOnTab: false
+
+                Label {
+                    Layout.alignment: Qt.AlignRight
+                    text: room ? i18np("%1 Member", "%1 Members", room.joinedCount) : i18n("No Member Count")
+                }
+            }
+
+            Control {
+                Layout.fillWidth: true
+
+                // Note need to set padding individually to guarantee it will always work
+                // see note - https://doc.qt.io/qt-6/qml-qtquick-controls2-control.html#padding-prop
+                topPadding: Kirigami.Units.smallSpacing
+                bottomPadding: Kirigami.Units.smallSpacing
+                rightPadding: Kirigami.Units.largeSpacing
+                leftPadding: Kirigami.Units.largeSpacing
+
+                background: Rectangle {
+                    color: Kirigami.Theme.backgroundColor
+                    Kirigami.Theme.inherit: false
+                    Kirigami.Theme.colorSet: Kirigami.Theme.Window
+                }
+                contentItem: Kirigami.SearchField {
+                    id: userListSearchField
+
+                    onAccepted: sortedMessageEventModel.filterString = text;
+                }
+            }
+
+            ScrollView {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+                ListView {
+                    id: userListView
+                    clip: true
+                    activeFocusOnTab: true
+
+                    model: KSortFilterProxyModel {
+                        id: sortedMessageEventModel
+
+                        sourceModel: UserListModel {
+                            room: roomDrawer.room
+                        }
+
+                        sortRole: "perm"
+                        filterRole: "name"
+                        filterCaseSensitivity: Qt.CaseInsensitive
+                    }
+
+                    delegate: Kirigami.BasicListItem {
+                        id: userListItem
+
+                        implicitHeight: Kirigami.Units.gridUnit * 2
+                        leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+
+                        label: name
+
+                        onClicked: {
+                            const popup = userDetailDialog.createObject(ApplicationWindow.overlay, {room: room, user: user, displayName: name, avatarMediaId: avatar})
+                            popup.closed.connect(function() {
+                                userListItem.highlighted = false
+                            })
+                            if (roomDrawer.modal) {
+                                roomDrawer.close()
+                            }
+                            popup.open()
+                        }
+
+                        leading: Kirigami.Avatar {
+                            implicitWidth: height
+                            sourceSize.height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
+                            sourceSize.width: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
+                            source: avatar ? ("image://mxc/" + avatar) : ""
+                            name: model.userId
+                        }
+
+                        trailing: Label {
+                            visible: perm != UserType.Member
+
+                            text: {
+                                switch (perm) {
+                                    case UserType.Owner:
+                                        return i18n("Owner");
+                                    case UserType.Admin:
+                                        return i18n("Admin");
+                                    case UserType.Moderator:
+                                        return i18n("Mod");
+                                    case UserType.Muted:
+                                        return i18n("Muted");
+                                    default:
+                                        return "";
+                                }
+                            }
+                            color: Kirigami.Theme.disabledTextColor
+                            textFormat: Text.PlainText
+                            wrapMode: Text.NoWrap
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    onRoomChanged: {
+        if (loader.active) {
+            loader.item.userSearchText = ""
+            loader.item.highlightedUser = -1
+        }
+        if (room == null) {
+            close()
+        }
+    }
+
+    Component {
+        id: userDetailDialog
+
+        UserDetailDialog {}
+    }
+}

src/qml/RoomSettings/Categories.qml

@@ -0,0 +1,45 @@
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carlschwan@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import QtQuick 2.15
+import org.kde.kirigami 2.18 as Kirigami
+import QtQuick.Layouts 1.15
+
+Kirigami.CategorizedSettings {
+    id: root
+    property var room
+
+    objectName: "settingsPage"
+    actions: [
+        Kirigami.SettingAction {
+            text: i18n("General")
+            icon.name: "settings-configure"
+            page: Qt.resolvedUrl("General.qml")
+            initialProperties: {
+                return {
+                    room: root.room
+                }
+            }
+        },
+        Kirigami.SettingAction {
+            text: i18n("Security")
+            icon.name: "security-low"
+            page: Qt.resolvedUrl("Security.qml")
+            initialProperties: {
+                return {
+                    room: root.room
+                }
+            }
+        },
+        Kirigami.SettingAction {
+            text: i18n("Notifications")
+            icon.name: "notifications"
+            page: Qt.resolvedUrl("PushNotification.qml")
+            initialProperties: {
+                return {
+                    room: root.room
+                }
+            }
+        }
+    ]
+}

src/qml/RoomSettings/General.qml

@@ -0,0 +1,200 @@
+// SPDX-FileCopyrightText: 2019-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+
+    property var room
+
+    readonly property bool canChangeAvatar: room.canSendState("m.room.avatar")
+    readonly property bool canChangeName: room.canSendState("m.room.name")
+    readonly property bool canChangeTopic: room.canSendState("m.room.topic")
+    readonly property bool canChangeCanonicalAlias: room.canSendState("m.room.canonical_alias")
+
+    title: i18n("General")
+
+    ColumnLayout {
+        Kirigami.FormLayout {
+            Layout.fillWidth: true
+
+            Kirigami.Avatar {
+                Layout.bottomMargin: Kirigami.Units.largeSpacing
+
+                name: room.name
+                source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : ""
+
+                RoundButton {
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    height: Kirigami.Units.gridUnits
+                    width: Kirigami.Units.gridUnits
+                    icon.name: 'cloud-upload'
+                    Accessible.name: i18n("Update avatar")
+                    enabled: canChangeAvatar
+                    onClicked: {
+                        const fileDialog = openFileDialog.createObject(ApplicationWindow.overlay)
+
+                        fileDialog.chosen.connect(function(path) {
+                            if (!path) return
+
+                            room.changeAvatar(path)
+                        })
+
+                        fileDialog.open()
+                    }
+                }
+            }
+            TextField {
+                id: roomNameField
+                text: room.name
+                Kirigami.FormData.label: i18n("Room Name:")
+                enabled: canChangeName
+            }
+
+            TextArea {
+                id: roomTopicField
+                Layout.fillWidth: true
+                text: room.topic
+                Kirigami.FormData.label: i18n("Room topic:")
+                enabled: canChangeTopic
+            }
+
+
+            Kirigami.Separator {
+                Layout.fillWidth: true
+                visible: canonicalAliasComboBox.visible || altAlias.visible
+            }
+
+            ComboBox {
+                id: canonicalAliasComboBox
+                visible: room.aliases && room.aliases.length
+                Kirigami.FormData.label: i18n("Canonical Alias:")
+                popup.z: 999; // HACK This is an absolute hack, but combos inside OverlaySheets have their popups show up underneath, because of fun z ordering stuff
+
+                enabled: canChangeCanonicalAlias
+
+                model: room.aliases
+
+                currentIndex: room.aliases.indexOf(room.canonicalAlias)
+                onCurrentIndexChanged: {
+                    if (room.canonicalAlias != room.aliases[currentIndex]) {
+                        room.setCanonicalAlias(room.aliases[currentIndex])
+                    }
+                }
+            }
+
+            RowLayout {
+                id: altAlias
+                Kirigami.FormData.label: i18n("Other Aliases:")
+                Layout.fillWidth: true
+
+                visible: room.altAliases && room.altAliases.length
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+
+                    spacing: 0
+
+                    Repeater {
+                        model: room.altAliases
+
+                        delegate: RowLayout {
+                            Layout.maximumWidth: parent.width
+
+                            Label {
+                                text: modelData
+                            }
+
+                            ToolButton {
+                                icon.name: ""
+                                onClicked: room.removeLocalAlias(modelData)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Kirigami.Separator {
+            Layout.fillWidth: true
+            visible: next.visible || prev.visible 
+        }
+
+        Control {
+            id: next
+            Layout.fillWidth: true
+
+            visible: room.predecessorId && room.connection.room(room.predecessorId)
+
+            padding: Kirigami.Units.largeSpacing
+
+            contentItem: Kirigami.InlineMessage {
+                text: i18n("This room continues another conversation.")
+                actions: Kirigami.Action {
+                    text: i18n("See older messages...")
+                    onTriggered: {
+                        roomListForm.enteredRoom = Controller.activeConnection.room(room.predecessorId)
+                        root.close()
+                    }
+                }
+            }
+        }
+
+        Control {
+            id: prev
+            Layout.fillWidth: true
+
+            visible: room.successorId && room.connection.room(room.successorId)
+
+            padding: Kirigami.Units.largeSpacing
+
+            contentItem: Kirigami.InlineMessage {
+                text: i18n("This room has been replaced.")
+                actions: Kirigami.Action {
+                    text: i18n("See new room...")
+                    onTriggered: {
+                        roomListForm.enteredRoom = Controller.activeConnection.room(room.successorId)
+                        root.close()
+                    }
+                }
+            }
+        }
+
+        Component {
+            id: openFileDialog
+
+            OpenFileDialog {}
+        }
+    }
+
+    footer: ToolBar {
+        contentItem: RowLayout {
+            Item {
+                Layout.fillWidth: true
+            }
+            Button {
+                Layout.alignment: Qt.AlignRight
+                enabled: room.name !== roomNameField.text || room.topic !== roomTopicField.text
+                text: i18n("Apply")
+                onClicked: {
+                    if (room.name != roomNameField.text) {
+                        room.setName(roomNameField.text)
+                    }
+
+                    if (room.topic != roomTopicField.text) {
+                        room.setTopic(roomTopicField.text)
+                    }
+                }
+            }
+        }
+    }
+}
+

src/qml/RoomSettings/PushNotification.qml

@@ -0,0 +1,57 @@
+// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
+// 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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+
+    property var room
+
+    title: i18nc('@title:window', 'Notifications')
+
+    ColumnLayout {
+        Kirigami.FormLayout {
+            Layout.fillWidth: true
+
+            QQC2.RadioButton {
+                text: i18n("Follow global setting")
+                Kirigami.FormData.label: i18n("Room notifications setting:")
+                checked: room.pushNotificationState === PushNotificationState.Default
+                enabled: room.pushNotificationState != PushNotificationState.Unknown
+                onToggled: {
+                    room.pushNotificationState = PushNotificationState.Default
+                }
+            }
+            QQC2.RadioButton {
+                text: i18nc("As in 'notify for all messages'","All")
+                checked: room.pushNotificationState === PushNotificationState.All
+                enabled: room.pushNotificationState != PushNotificationState.Unknown
+                onToggled: {
+                    room.pushNotificationState = PushNotificationState.All
+                }
+            }
+            QQC2.RadioButton {
+                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
+                onToggled: {
+                    room.pushNotificationState = PushNotificationState.MentionKeyword
+                }
+            }
+            QQC2.RadioButton {
+                text: i18nc("As in 'do not notify for any messages'","Off")
+                checked: room.pushNotificationState === PushNotificationState.Mute
+                enabled: room.pushNotificationState != PushNotificationState.Unknown
+                onToggled: {
+                    room.pushNotificationState = PushNotificationState.Mute
+                }
+            }
+        }
+    }
+}

src/qml/RoomSettings/Security.qml

@@ -0,0 +1,67 @@
+// SPDX-FileCopyrightText: 2019-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+
+    property var room
+
+    title: i18n("Security")
+
+    ColumnLayout {
+        Kirigami.FormLayout {
+            Layout.fillWidth: true
+
+            RadioButton {
+                text: i18nc("@option:check", "Private (invite only)")
+                Kirigami.FormData.label: i18nc("@option:check", "Access:")
+                checked: room.joinRule === "invite"
+                enabled: false
+            }
+            Label {
+                text: i18n("Only invited people can join.")
+                font: Kirigami.Theme.smallFont
+            }
+            RadioButton {
+                text: i18nc("@option:check", "Space members")
+                checked: room.joinRule === "restricted"
+                enabled: false
+            }
+            Label {
+                text: i18n("Anyone in a space can find and join.")
+                font: Kirigami.Theme.smallFont
+            }
+            RadioButton {
+                text: i18nc("@option:check", "Public")
+                checked: room.joinRule === "public"
+                enabled: false
+            }
+            Label {
+                text: i18nc("@option:check", "Anyone can find and join.") + room.joinRule
+                font: Kirigami.Theme.smallFont
+            }
+        }
+    }
+
+    footer: ToolBar {
+        contentItem: RowLayout {
+            Item {
+                Layout.fillWidth: true
+            }
+            Button {
+                Layout.alignment: Qt.AlignRight
+                enabled: false
+                text: i18n("Apply")
+            }
+        }
+    }
+}
+

src/qml/Settings/About.qml

@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.AboutPage {
+    title: i18nc("@title:window", "About NeoChat")
+    aboutData: Controller.aboutData
+}

src/qml/Settings/AccountEditorPage.qml

@@ -0,0 +1,136 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+    title: i18n("Edit Account")
+    property var connection
+
+    ColumnLayout {
+        Kirigami.FormLayout {
+            RowLayout {
+                Kirigami.Avatar {
+                    id: avatar
+                    source: root.connection && root.connection.localUser.avatarMediaId ? ("image://mxc/" + root.connection.localUser.avatarMediaId) : ""
+
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        property var fileDialog: null;
+                        onClicked: {
+                            if (fileDialog != null) {
+                                return;
+                            }
+
+                            fileDialog = openFileDialog.createObject(Controls.ApplicationWindow.Overlay)
+
+                            fileDialog.chosen.connect(function(receivedSource) {
+                                mouseArea.fileDialog = null;
+                                if (!receivedSource) {
+                                    return;
+                                }
+                                parent.source = receivedSource;
+                            });
+                            fileDialog.onRejected.connect(function() {
+                                mouseArea.fileDialog = null;
+                            });
+                            fileDialog.open();
+                        }
+                    }
+                }
+                Controls.Button {
+                    visible: avatar.source.toString().length !== 0
+                    icon.name: "edit-clear"
+
+                    onClicked: avatar.source = ""
+                }
+                Kirigami.FormData.label: i18n("Avatar:")
+            }
+            Controls.TextField {
+                id: name
+                text: root.connection ? root.connection.localUser.displayName : ""
+                Kirigami.FormData.label: i18n("Name:")
+            }
+            Controls.TextField {
+                id: accountLabel
+                text: root.connection ? root.connection.localUser.accountLabel : ""
+                Kirigami.FormData.label: i18n("Label:")
+            }
+            Controls.TextField {
+                id: currentPassword
+                Kirigami.FormData.label: i18n("Current Password:")
+                enabled: roto.connection !== undefined && root.connection.canChangePassword !== false
+                echoMode: TextInput.Password
+            }
+            Controls.TextField {
+                id: newPassword
+                Kirigami.FormData.label: i18n("New Password:")
+                enabled: root.connection !== undefined && root.connection.canChangePassword !== false
+                echoMode: TextInput.Password
+
+            }
+            Controls.TextField {
+                id: confirmPassword
+                Kirigami.FormData.label: i18n("Confirm new Password:")
+                enabled: root.connection !== undefined && root.connection.canChangePassword !== false
+                echoMode: TextInput.Password
+            }
+        }
+    }
+
+    footer: RowLayout {
+        Item {
+            Layout.fillWidth: true
+        }
+
+        Controls.Button {
+            text: i18n("Save")
+            Layout.bottomMargin: Kirigami.Units.smallSpacing
+            Layout.topMargin: Kirigami.Units.smallSpacing
+            onClicked: {
+                if (!Controller.setAvatar(root.connection, avatar.source)) {
+                    showPassiveNotification("The Avatar could not be set");
+                }
+                if (root.connection.localUser.displayName !== name.text) {
+                    root.connection.localUser.rename(name.text);
+                }
+                if (root.connection.localUser.accountLabel !== accountLabel.text) {
+                    root.connection.localUser.setAccountLabel(accountLabel.text);
+                }
+                if(currentPassword.text !== "" && newPassword.text !== "" && confirmPassword.text !== "") {
+                    if(newPassword.text === confirmPassword.text) {
+                        Controller.changePassword(root.connection, currentPassword.text, newPassword.text);
+                    } else {
+                        showPassiveNotification(i18n("Passwords do not match"));
+                        return;
+                    }
+                }
+                root.closeDialog();
+            }
+        }
+        Controls.Button {
+            text: i18n("Cancel")
+            Layout.rightMargin: Kirigami.Units.smallSpacing
+            Layout.bottomMargin: Kirigami.Units.smallSpacing
+            Layout.topMargin: Kirigami.Units.smallSpacing
+            onClicked: root.closeDialog();
+        }
+    }
+    Component {
+        id: openFileDialog
+
+        OpenFileDialog {
+            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
+        }
+    }
+}

src/qml/Settings/AccountsPage.qml

@@ -0,0 +1,104 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    title: i18n("Accounts")
+
+    actions.main: Kirigami.Action {
+        text: i18n("Add an account")
+        icon.name: "list-add-user"
+        onTriggered: pageStack.layers.push("qrc:/WelcomePage.qml")
+        visible: !pageSettingStack.wideMode
+    }
+
+    ListView {
+        model: AccountRegistry
+        anchors.fill: parent
+        delegate: Kirigami.BasicListItem {
+            text: model.connection.localUser.displayName
+            labelItem.textFormat: Text.PlainText
+            subtitle: model.connection.localUserId
+            icon: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : "im-user"
+
+            onClicked: {
+                Controller.activeConnection = model.connection;
+                pageStack.layers.pop();
+            }
+
+            trailing: RowLayout {
+                Controls.ToolButton {
+                    display: Controls.AbstractButton.IconOnly
+                    Controls.ToolTip {
+                        text: parent.action.text
+                    }
+                    action: Kirigami.Action {
+                        text: i18n("Edit this account")
+                        iconName: "document-edit"
+                        onTriggered: pageSettingStack.pushDialogLayer(Qt.resolvedUrl('./AccountEditorPage.qml'), {
+                            connection: model.connection
+                        }, {
+                            title: i18n("Account editor")
+                        });
+                    }
+                }
+                Controls.ToolButton {
+                    display: Controls.AbstractButton.IconOnly
+                    Controls.ToolTip {
+                        text: parent.action.text
+                    }
+                    action: Kirigami.Action {
+                        text: i18n("Logout")
+                        iconName: "im-kick-user"
+                        onTriggered: {
+                            Controller.logout(model.connection, true);
+                            if (Controller.accountCount === 1) {
+                                pageStack.layers.pop();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    footer: Controls.ToolBar {
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
+        Kirigami.ActionToolBar {
+            alignment: Qt.AlignRight
+            rightPadding: Kirigami.Units.smallSpacing
+            width: parent.width
+            flat: false
+            actions: Kirigami.Action {
+                text: i18n("Add an account")
+                icon.name: "list-add-user"
+                onTriggered: pageStack.layers.push("qrc:/WelcomePage.qml")
+            }
+        }
+    }
+
+    Connections {
+        target: Controller
+        function onConnectionAdded() {
+            if (pageStack.layers.depth > 2)
+                pageStack.layers.pop()
+        }
+        function onPasswordStatus(status) {
+            if (status === Controller.Success) {
+                showPassiveNotification(i18n("Password changed successfully"));
+            } else if (status === Controller.Wrong) {
+                showPassiveNotification(i18n("Wrong password entered"));
+            } else {
+                showPassiveNotification(i18n("Unknown problem while trying to change password"));
+            }
+        }
+    }
+}

src/qml/Settings/AppearanceSettingsPage.qml

@@ -0,0 +1,264 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+// 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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    title: i18nc("@title:window", "Appearance")
+    ColumnLayout {
+        RowLayout {
+            Layout.alignment: Qt.AlignCenter
+            spacing: Kirigami.Units.gridUnit * 2
+            QQC2.ButtonGroup { id: themeGroup }
+            ThemeRadioButton {
+                innerObject: [
+                    RowLayout {
+                        Layout.fillWidth: true
+                        Kirigami.Avatar {
+                            color: "#4a5bcc"
+                            Layout.alignment: Qt.AlignTop
+                            visible: Config.showAvatarInTimeline
+                            Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
+                            Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
+                        }
+                        QQC2.Control {
+                            Layout.fillWidth: true
+                            contentItem: ColumnLayout {
+                                QQC2.Label {
+                                    Layout.fillWidth: true
+                                    font.weight: Font.Bold
+                                    font.pixelSize: 7
+                                    text: "Paul Müller"
+                                    color: "#4a5bcc"
+                                    wrapMode: Text.Wrap
+                                }
+                                QQC2.Label {
+                                    Layout.fillWidth: true
+                                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis porta mauris, quis finibus sem suscipit tincidunt."
+                                    wrapMode: Text.Wrap
+                                    font.pixelSize: 7
+                                }
+                            }
+                            background: Kirigami.ShadowedRectangle {
+                                color: Kirigami.Theme.backgroundColor
+                                radius: Kirigami.Units.smallSpacing
+                                shadow.size: Kirigami.Units.smallSpacing
+                                shadow.color: Qt.rgba(0.0, 0.0, 0.0, 0.10)
+                                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                                border.width: 1
+                            }
+                        }
+                    },
+                    RowLayout {
+                        Layout.fillWidth: true
+                        Kirigami.Avatar {
+                            color: "#9f244b"
+                            Layout.alignment: Qt.AlignTop
+                            visible: Config.showAvatarInTimeline
+                            Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
+                            Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
+                        }
+                        QQC2.Control {
+                            Layout.fillWidth: true
+                            contentItem: ColumnLayout {
+                                QQC2.Label {
+                                    Layout.fillWidth: true
+                                    font.weight: Font.Bold
+                                    font.pixelSize: 7
+                                    text: "Jean Paul"
+                                    color: "#9f244b"
+                                    wrapMode: Text.Wrap
+                                }
+                                QQC2.Label {
+                                    Layout.fillWidth: true
+                                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis porta , quis sem suscipit tincidunt."
+                                    wrapMode: Text.Wrap
+                                    font.pixelSize: 7
+                                }
+                            }
+                            background: Kirigami.ShadowedRectangle {
+                                color: Kirigami.Theme.backgroundColor
+                                radius: Kirigami.Units.smallSpacing
+                                shadow.size: Kirigami.Units.smallSpacing
+                                shadow.color: Qt.rgba(0.0, 0.0, 0.0, 0.10)
+                                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                                border.width: 1
+                            }
+                        }
+                    }
+                ]
+
+                text: i18n("Bubbles")
+                checked: !Config.compactLayout
+                QQC2.ButtonGroup.group: themeGroup
+                enabled: !Config.isCompactLayoutImmutable
+
+                onToggled: {
+                    Config.compactLayout = !checked;
+                    Config.save();
+                }
+            }
+            ThemeRadioButton {
+                innerObject: [
+                    RowLayout {
+                        Layout.fillWidth: true
+                        Kirigami.Avatar {
+                            color: "#4a5bcc"
+                            Layout.alignment: Qt.AlignTop
+                            visible: Config.showAvatarInTimeline
+                            Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
+                            Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
+                        }
+                        ColumnLayout {
+                            Layout.fillWidth: true
+                            QQC2.Label {
+                                Layout.fillWidth: true
+                                font.weight: Font.Bold
+                                font.pixelSize: 7
+                                text: "Paul Müller"
+                                color: "#4a5bcc"
+                                wrapMode: Text.Wrap
+                            }
+                            QQC2.Label {
+                                Layout.fillWidth: true
+                                text: "Lorem ipsum dolor sit amet, consectetur elit. Vivamus facilisis porta mauris, finibus sem suscipit tincidunt."
+                                wrapMode: Text.Wrap
+                                font.pixelSize: 7
+                            }
+                        }
+                    },
+                    RowLayout {
+                        Layout.fillWidth: true
+                        Kirigami.Avatar {
+                            color: "#9f244b"
+                            Layout.alignment: Qt.AlignTop
+                            visible: Config.showAvatarInTimeline
+                            Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
+                            Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
+                        }
+                        ColumnLayout {
+                            Layout.fillWidth: true
+                            QQC2.Label {
+                                Layout.fillWidth: true
+                                font.weight: Font.Bold
+                                font.pixelSize: 7
+                                text: "Jean Paul"
+                                color: "#9f244b"
+                                wrapMode: Text.Wrap
+                            }
+                            QQC2.Label {
+                                Layout.fillWidth: true
+                                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis porta mauris, quis finibus sem suscipit tincidunt."
+                                wrapMode: Text.Wrap
+                                font.pixelSize: 7
+                            }
+                        }
+                    }
+                ]
+                text: i18n("Compact")
+                checked: Config.compactLayout
+                QQC2.ButtonGroup.group: themeGroup
+                enabled: !Config.isCompactLayoutImmutable
+
+                onToggled: {
+                    Config.compactLayout = checked;
+                    Config.save();
+                }
+            }
+        }
+        Kirigami.FormLayout {
+            Layout.maximumWidth: parent.width
+            QQC2.CheckBox {
+                Kirigami.FormData.label: i18n("Show Avatar:")
+                text: i18n("In Chat")
+                checked: Config.showAvatarInTimeline
+                onToggled: {
+                    Config.showAvatarInTimeline = checked
+                    Config.save()
+                }
+                enabled: !Config.isShowAvatarInTimelineImmutable
+            }
+            QQC2.CheckBox {
+                text: i18n("In Sidebar")
+                checked: Config.showAvatarInRoomDrawer
+                enabled: !Config.isShowAvatarInRoomDrawerImmutable
+                onToggled: {
+                    Config.showAvatarInRoomDrawer = checked
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Show Fancy Effects")
+                checked: Config.showFancyEffects
+                enabled: !Config.isShowFancyEffectsImmutable
+                onToggled: {
+                    Config.showFancyEffects = checked;
+                    Config.save();
+                }
+            }
+            Loader {
+                visible: item !== null
+                Kirigami.FormData.label: item ? i18n("Theme:") : ""
+                source: "qrc:/ColorScheme.qml"
+            }
+            QQC2.CheckBox {
+                visible: Controller.hasWindowSystem
+                text: i18n("Use transparent chat page")
+                enabled: !Config.compactLayout && !Config.isBlurImmutable
+                checked: Config.blur
+                onToggled: {
+                    Config.blur = checked;
+                    Config.save();
+                }
+            }
+            RowLayout {
+                visible: Controller.hasWindowSystem && Config.blur
+                enabled: !Config.isTransparancyImmutable
+                Kirigami.FormData.label: i18n("Transparency:")
+                QQC2.Slider {
+                    enabled: !Config.compactLayout && Config.blur
+                    from: 0
+                    to: 1
+                    stepSize: 0.05
+                    value: Config.transparency
+                    onMoved: {
+                        Config.transparency = value;
+                        Config.save();
+                    }
+
+                    HoverHandler { id: sliderHover }
+                    QQC2.ToolTip.visible: sliderHover.hovered && !enabled
+                    QQC2.ToolTip.text: i18n("Only enabled if the transparent chat page is enabled.")
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                }
+                QQC2.Label {
+                    text: Math.round(Config.transparency * 100) + "%"
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Show your messages on the right")
+                checked: Config.showLocalMessagesOnRight
+                enabled: !Config.isShowLocalMessagesOnRightImmutable && !Config.compactLayout
+                onToggled: {
+                    Config.showLocalMessagesOnRight = checked
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Show links preview in the chat messages")
+                checked: Config.showLinkPreview
+                onToggled: {
+                    Config.showLinkPreview = checked
+                    Config.save()
+                }
+            }
+        }
+    }
+}

src/qml/Settings/ColorScheme.qml

@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carlschwan@kde.org>
+// SPDX-License-Identifier: LGPL-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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+QQC2.ComboBox {
+    textRole: "display"
+    model: ColorSchemer.model
+    Component.onCompleted: currentIndex = ColorSchemer.indexForScheme(Config.colorScheme);
+    onActivated: {
+        ColorSchemer.apply(currentIndex);
+        Config.colorScheme = ColorSchemer.nameForIndex(currentIndex);
+        Config.save();
+    }
+}

src/qml/Settings/DevicesPage.qml

@@ -0,0 +1,114 @@
+// SPDX-FileCopyrightText: Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.19 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    title: i18n("Devices")
+
+    ListView {
+        model: DevicesModel {
+            id: devices
+        }
+
+        anchors.fill: parent
+
+        Kirigami.LoadingPlaceholder {
+            visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
+            anchors.centerIn: parent
+        }
+
+        delegate: Kirigami.BasicListItem {
+            text: model.displayName
+            subtitle: model.id
+            icon: "network-connect"
+            trailing: RowLayout {
+                Controls.ToolButton {
+                    display: Controls.AbstractButton.IconOnly
+                    action: Kirigami.Action {
+                        text: i18n("Edit device name")
+                        iconName: "document-edit"
+                        onTriggered: {
+                            renameSheet.index = model.index
+                            renameSheet.name = model.displayName
+                            renameSheet.open()
+                        }
+                    }
+                }
+                Controls.ToolButton {
+                    display: Controls.AbstractButton.IconOnly
+                    visible: Controller.encryptionSupported
+                    action: Kirigami.Action {
+                        text: i18n("Verify device")
+                        iconName: "security-low-symbolic"
+                        onTriggered: {
+                            devices.connection.startKeyVerificationSession(model.id)
+                        }
+                    }
+                }
+                Controls.ToolButton {
+                    display: Controls.AbstractButton.IconOnly
+                    action: Kirigami.Action {
+                        text: i18n("Logout device")
+                        iconName: "edit-delete-remove"
+                        onTriggered: {
+                            passwordSheet.index = index
+                            passwordSheet.open()
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Kirigami.OverlaySheet {
+        id: passwordSheet
+
+        property var index
+
+        title: i18n("Remove device")
+        Kirigami.FormLayout {
+            Controls.TextField {
+                id: passwordField
+                Kirigami.FormData.label: i18n("Password:")
+                echoMode: TextInput.Password
+            }
+            Controls.Button {
+                text: i18n("Confirm")
+                onClicked: {
+                    devices.logout(passwordSheet.index, passwordField.text)
+                    passwordField.text = ""
+                    passwordSheet.close()
+                }
+            }
+        }
+    }
+
+    Kirigami.OverlaySheet {
+        id: renameSheet
+        property int index
+        property string name
+
+        title: i18n("Edit device")
+        Kirigami.FormLayout {
+            Controls.TextField {
+                id: nameField
+                Kirigami.FormData.label: i18n("Name:")
+                text: renameSheet.name
+            }
+            Controls.Button {
+                text: i18n("Save")
+                onClicked: {
+                    devices.setName(renameSheet.index, nameField.text)
+                    renameSheet.close()
+                }
+            }
+        }
+    }
+}

src/qml/Settings/Emoticons.qml

@@ -0,0 +1,115 @@
+// SPDX-FileCopyrightText: 2021 Carson Black <uhhadd@gmail.com>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    title: i18nc("@title:window", "Custom Emojis")
+
+    ListView {
+        anchors.fill: parent
+
+        model: CustomEmojiModel
+
+        Kirigami.PlaceholderMessage {
+            anchors.centerIn: parent
+            text: i18n("No custom inline stickers found")
+            visible: parent.model.count === 0
+        }
+
+        delegate: Kirigami.BasicListItem {
+            id: del
+
+            required property string name
+            required property url imageURL
+
+            text: name
+            reserveSpaceForSubtitle: true
+
+            leading: Image {
+                width: height
+                sourceSize.width: width
+                sourceSize.height: height
+                source: imageURL
+
+                Rectangle {
+                    anchors.fill: parent
+                    visible: parent.status === Image.Loading
+                    radius: height/2
+                    gradient: ShimmerGradient { }
+                }
+            }
+
+            trailing: QQC2.ToolButton {
+                width: height
+                icon.name: "delete"
+                onClicked: emojiModel.removeEmoji(del.name)
+            }
+        }
+    }
+
+    footer: QQC2.ToolBar {
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
+        Kirigami.ActionToolBar {
+            id: emojiCreator
+            alignment: Qt.AlignRight
+            rightPadding: Kirigami.Units.smallSpacing
+            width: parent.width
+            flat: false
+            property string name
+            actions: [
+                Kirigami.Action {
+                    displayComponent: QQC2.TextField {
+                        id: emojiField
+                        placeholderText: i18n("new_emoji_name_here")
+
+                        validator: RegularExpressionValidator {
+                            regularExpression: /[a-zA-Z_0-9]*/
+                        }
+                        onTextChanged: emojiCreator.name = text
+                    }
+                },
+                Kirigami.Action {
+                    text: i18n("Add Emoji...")
+
+                    enabled: emojiCreator.name.length > 0
+                    property var fileDialog: null
+                    icon.name: 'list-add'
+
+                    onTriggered: {
+                        if (this.fileDialog !== null) {
+                            return;
+                        }
+
+                        this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
+
+                        this.fileDialog.chosen.connect((url) => {
+                            CustomEmojiModel.addEmoji(emojiCreator.name, url)
+                            this.fileDialog = null
+                        })
+                        this.fileDialog.onRejected.connect(() => {
+                            this.fileDialog = null
+                        })
+                        this.fileDialog.open()
+                    }
+                }
+            ]
+        }
+    }
+
+    Component {
+        id: openFileDialog
+
+        OpenFileDialog {
+            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
+        }
+    }
+}

src/qml/Settings/GeneralSettingsPage.qml

@@ -0,0 +1,136 @@
+// SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
+// 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.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    title: i18nc("@title:window", "General")
+    ColumnLayout {
+        Kirigami.FormLayout {
+            Layout.fillWidth: true
+            QQC2.CheckBox {
+                Kirigami.FormData.label: i18n("General settings:")
+                text: i18n("Close to system tray")
+                checked: Config.systemTray
+                visible: Controller.supportSystemTray
+                enabled: !Config.isSystemTrayImmutable
+                onToggled: {
+                    Config.systemTray = checked
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Minimize to system tray on startup")
+                checked: Config.minimizeToSystemTrayOnStartup
+                visible: Controller.supportSystemTray && !Kirigami.Settings.isMobile
+                enabled: Config.systemTray && !Config.isMinimizeToSystemTrayOnStartupImmutable
+                onToggled: {
+                    Config.minimizeToSystemTrayOnStartup = checked
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                // TODO: When there are enough notification and timeline event
+                // settings, make 2 separate groups with FormData labels.
+                Kirigami.FormData.label: i18n("Notifications and events:")
+                text: i18n("Show notifications")
+                checked: Config.showNotifications
+                enabled: !Config.isShowNotificationsImmutable
+                onToggled: {
+                    Config.showNotifications = checked
+                    Config.save()
+                    NotificationsManager.globalNotificationsEnabled = checked
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Show leave and join events")
+                checked: Config.showLeaveJoinEvent
+                enabled: !Config.isShowLeaveJoinEventImmutable
+                onToggled: {
+                    Config.showLeaveJoinEvent = checked
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Show name change events")
+                checked: Config.showRename
+                enabled: !Config.isShowRenameImmutable
+                onToggled: {
+                    Config.showRename = checked
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Show avatar update events")
+                checked: Config.showAvatarUpdate
+                enabled: !Config.isShowAvatarUpdateImmutable
+                onToggled: {
+                    Config.showAvatarUpdate = checked
+                    Config.save()
+                }
+            }
+            QQC2.RadioButton {
+                Kirigami.FormData.label: i18n("Rooms and private chats:")
+                text: i18n("Separated")
+                checked: !Config.mergeRoomList
+                enabled: !Config.isMergeRoomListImmutable
+                onToggled: {
+                    Config.mergeRoomList = false
+                    Config.save()
+                }
+            }
+            QQC2.RadioButton {
+                text: i18n("Intermixed")
+                checked: Config.mergeRoomList
+                enabled: !Config.isMergeRoomListImmutable
+                onToggled: {
+                    Config.mergeRoomList = true
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                id: quickEditCheckbox
+                Layout.maximumWidth: parent.width
+                text: i18n("Use s/text/replacement syntax to edit your last message")
+                checked: Config.allowQuickEdit
+                enabled: !Config.isAllowQuickEditImmutable
+                onToggled: {
+                    Config.allowQuickEdit = checked
+                    Config.save()
+                }
+
+                // TODO KF5.97 remove this line
+                Component.onCompleted: this.contentItem.wrap = QQC2.Label.Wrap
+            }
+            QQC2.CheckBox {
+                text: i18n("Send Typing Notifications")
+                checked: Config.typingNotifications
+                enabled: !Config.isTypingNotificationsImmutable
+                onToggled: {
+                    Config.typingNotifications = checked
+                    Config.save()
+                }
+            }
+            QQC2.CheckBox {
+                text: i18n("Automatically hide/unhide the room information when resizing the window")
+                Layout.maximumWidth: parent.width
+                checked: Config.autoRoomInfoDrawer
+                enabled: !Config.isAutoRoomInfoDrawerImmutable
+                onToggled: {
+                    Config.autoRoomInfoDrawer = checked
+                    Config.save()
+                }
+
+                // TODO KF5.97 remove this line
+                Component.onCompleted: this.contentItem.wrap = QQC2.Label.Wrap
+            }
+        }
+    }
+}

src/qml/Settings/SettingsPage.qml

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carlschwan@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import QtQuick 2.15
+import org.kde.kirigami 2.18 as Kirigami
+import QtQuick.Layouts 1.15
+
+Kirigami.CategorizedSettings {
+    objectName: "settingsPage"
+    actions: [
+        Kirigami.SettingAction {
+            text: i18n("General")
+            icon.name: "org.kde.neochat"
+            page: Qt.resolvedUrl("GeneralSettingsPage.qml")
+        },
+        Kirigami.SettingAction {
+            text: i18n("Appearance")
+            icon.name: "preferences-desktop-theme-global"
+            page: Qt.resolvedUrl("AppearanceSettingsPage.qml")
+        },
+        Kirigami.SettingAction {
+            text: i18n("Accounts")
+            icon.name: "preferences-system-users"
+            page: Qt.resolvedUrl("AccountsPage.qml")
+        },
+        Kirigami.SettingAction {
+            text: i18n("Custom Emojis")
+            icon.name: "preferences-desktop-emoticons"
+            page: Qt.resolvedUrl("Emoticons.qml")
+        },
+        Kirigami.SettingAction {
+            text: i18n("Spell Checking")
+            iconName: "tools-check-spelling"
+            page: Qt.resolvedUrl("SonnetConfigPage.qml")
+        },
+        Kirigami.SettingAction {
+            text: i18n("Devices")
+            iconName: "network-connect"
+            page: Qt.resolvedUrl("DevicesPage.qml")
+        },
+        Kirigami.SettingAction {
+            text: i18n("About NeoChat")
+            icon.name: "help-about"
+            page: Qt.resolvedUrl("About.qml")
+        }
+    ]
+}

src/qml/Settings/SonnetConfigPage.qml

@@ -0,0 +1,344 @@
+// SPDX-FileCopyrightText: 2021 Carl Schwan <carlschwan@kde.org>
+// SPDX-License-Identifier: LGPL-2.1-or-later
+
+import QtQml 2.15
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.sonnet 1.0 as Sonnet
+
+Kirigami.Page {
+    id: page
+
+    /**
+     * This property holds whether the setting on that page are automatically
+     * applied or whether the user can apply then manually. By default, false.
+     */
+    property bool instantApply: false
+
+    /**
+     * This property holds whether the ListViews inside the page should get
+     * extra padding and a background. By default, use the Kirigami.ApplicationWindow
+     * wideMode value.
+     */
+    property bool wideMode: QQC2.ApplicationWindow.window.wideMode ?? QQC2.ApplicationWindow.window.width > Kirigami.Units.gridUnit * 40
+
+    /**
+     * Signal emmited when the user decide to discard it's change and close the
+     * setting page.
+     *
+     * For example when using the ConfigPage inside Kirigami PageRow:
+     *
+     * \code
+     * Sonnet.ConfigPage {
+     *      onClose: applicationWindow().pageStack.pop();
+     * }
+     * \endcode
+     */
+    signal close()
+
+    function onBackRequested(event) {
+        if (settings.modified) {
+            applyDialog.open();
+            event.accepted = true;
+        }
+        if (dialog) {
+            dialog.close();
+        }
+    }
+    title: i18nc("@window:title", "Spellchecking")
+
+    QQC2.Dialog {
+        id: applyDialog
+        title: qsTr("Apply Settings")
+        contentItem: QQC2.Label {
+            text: qsTr("The settings of the current module have changed.<br /> Do you want to apply the changes or discard them?")
+        }
+        standardButtons: QQC2.Dialog.Ok | QQC2.Dialog.Cancel | QQC2.Dialog.Discard
+
+        onAccepted: {
+            settings.save();
+            applyDialog.close();
+            page.close();
+        }
+        onDiscarded: {
+            applyDialog.close();
+            page.close();
+        }
+        onRejected: applyDialog.close();
+    }
+
+    onWideModeChanged: scroll.background.visible = wideMode;
+
+    leftPadding: wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: wideMode ? Kirigami.Units.gridUnit : 0
+
+    property var dialog: null
+
+    Sonnet.Settings {
+        id: settings
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        Kirigami.FormLayout {
+            Layout.fillWidth: true
+            Layout.leftMargin: wideMode ? 0 : Kirigami.Units.largeSpacing
+            Layout.rightMargin: wideMode ? 0 : Kirigami.Units.largeSpacing
+
+            QQC2.ComboBox {
+                Kirigami.FormData.label: i18n("Selected default language:")
+                model: settings.dictionaryModel
+                textRole: "display"
+                valueRole: "languageCode"
+                Component.onCompleted: currentIndex = indexOfValue(settings.defaultLanguage);
+                onActivated: {
+                    settings.defaultLanguage = currentValue;
+                }
+            }
+
+            QQC2.Button {
+                text: i18n("Open Personal Dictionary")
+                onClicked: if (!dialog) {
+                    if (Kirigami.Settings.isMobile) {
+                        dialog = mobileSheet.createObject(page, {settings: settings});
+                        dialog.open();
+                    } else {
+                        dialog = desktopSheet.createObject(page, {settings: settings})
+                        dialog.show();
+                    }
+                } else {
+                    if (Kirigami.Settings.isMobile) {
+                        dialog.open();
+                    } else {
+                        dialog.show();
+                    }
+                }
+            }
+
+            QQC2.CheckBox {
+                Kirigami.FormData.label: i18n("Options:")
+                checked: settings.checkerEnabledByDefault
+                text: i18n("Enable automatic spell checking")
+                onCheckedChanged: {
+                    settings.checkerEnabledByDefault = checked;
+                    if (instantApply) {
+                        settings.save();
+                    }
+                }
+            }
+
+            QQC2.CheckBox {
+                checked: settings.skipUppercase
+                text: i18n("Ignore uppercase words")
+                onCheckedChanged: {
+                    settings.skipUppercase = checked;
+                    if (instantApply) {
+                        settings.save();
+                    }
+                }
+            }
+
+            QQC2.CheckBox {
+                checked: settings.skipRunTogether
+                text: i18n("Ignore hyphenated words")
+                onCheckedChanged: {
+                    settings.skipRunTogether = checked;
+                    if (instantApply) {
+                        settings.save();
+                    }
+                }
+            }
+
+            QQC2.CheckBox {
+                id: autodetectLanguageCheckbox
+                checked: settings.autodetectLanguage
+                text: i18n("Detect language automatically")
+                onCheckedChanged: {
+                    settings.autodetectLanguage = checked;
+                    if (instantApply) {
+                        settings.save();
+                    }
+                }
+            }
+        }
+
+        Kirigami.Heading {
+            level: 2
+            text: i18n("Spell checking languages")
+            wrapMode: Text.WordWrap
+            Layout.fillWidth: true
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.leftMargin: wideMode ? 0 : Kirigami.Units.largeSpacing
+            Layout.rightMargin: wideMode ? 0 : Kirigami.Units.largeSpacing
+        }
+        QQC2.Label {
+            text: i18n("%1 will provide spell checking and suggestions for the languages listed here when autodetection is enabled.", Qt.application.displayName)
+            wrapMode: Text.WordWrap
+            Layout.fillWidth: true
+            Layout.leftMargin: wideMode ? 0 : Kirigami.Units.largeSpacing
+            Layout.rightMargin: wideMode ? 0 : Kirigami.Units.largeSpacing
+        }
+
+        QQC2.ScrollView {
+            id: scroll
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            enabled: autodetectLanguageCheckbox.checked
+            Component.onCompleted: background.visible = wideMode
+
+            // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+            QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+
+            ListView {
+                clip: true
+                model: settings.dictionaryModel
+                delegate: Kirigami.CheckableListItem {
+                    label: model.display
+                    action: Kirigami.Action {
+                        onTriggered: model.checked = checked
+                    }
+                    checked: model.checked
+                    trailing: Kirigami.Icon {
+                        source: "favorite"
+                        visible: model.isDefault
+                        HoverHandler {
+                            id: hover
+                        }
+                        QQC2.ToolTip {
+                            visible: hover.hovered
+                            text: qsTr("Default Language")
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    component SheetHeader : RowLayout {
+        QQC2.TextField {
+            id: dictionaryField
+            Layout.fillWidth: true
+            placeholderText: i18n("Add a new word to your personal dictionary…")
+        }
+        QQC2.Button {
+            text: i18nc("@action:button", "Add word")
+            icon.name: "list-add"
+            enabled: dictionaryField.text.length > 0
+            onClicked: {
+                add(dictionaryField.text);
+                dictionaryField.clear();
+                if (instantApply) {
+                    settings.save();
+                }
+            }
+            Layout.rightMargin: Kirigami.Units.largeSpacing
+        }
+    }
+
+    Component {
+        id: desktopSheet
+        QQC2.ApplicationWindow {
+            id: window
+            required property Sonnet.Settings settings
+            title: i18n("Spell checking dictionary")
+            width: Kirigami.Units.gridUnit * 20
+            height: Kirigami.Units.gridUnit * 20
+            flags: Qt.Dialog | Qt.WindowCloseButtonHint
+            header: Kirigami.AbstractApplicationHeader {
+                leftPadding: Kirigami.Units.smallSpacing
+                rightPadding: Kirigami.Units.smallSpacing
+                contentItem: SheetHeader {
+                    anchors.fill: parent
+                }
+            }
+            QQC2.ScrollView {
+                anchors.fill: parent
+
+                // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+                QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+
+                ListView {
+                    model: settings.currentIgnoreList
+                    delegate: Kirigami.BasicListItem {
+                        label: model.modelData
+                        trailing: QQC2.ToolButton {
+                            icon.name: "delete"
+                            onClicked: {
+                                remove(modelData)
+                                if (instantApply) {
+                                    settings.save();
+                                }
+                            }
+                            QQC2.ToolTip {
+                                text: i18n("Delete word")
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: mobileSheet
+        Kirigami.OverlaySheet {
+            required property Sonnet.Settings settings
+            id: dictionarySheet
+
+            header: SheetHeader {}
+
+            ListView {
+                implicitWidth: Kirigami.Units.gridUnit * 15
+                model: settings.currentIgnoreList
+                delegate: Kirigami.BasicListItem {
+                    label: model.modelData
+                    trailing: QQC2.ToolButton {
+                        icon.name: "delete"
+                        onClicked: {
+                            remove(modelData)
+                            if (instantApply) {
+                                settings.save();
+                            }
+                        }
+                        QQC2.ToolTip {
+                            text: i18n("Delete word")
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    footer: QQC2.ToolBar {
+        visible: !instantApply
+        height: visible ? implicitHeight : 0
+        contentItem: RowLayout {
+            Item {
+                Layout.fillWidth: true
+            }
+
+            QQC2.Button  {
+                text: i18n("Apply")
+                enabled: settings.modified
+                onClicked: settings.save();
+            }
+        }
+    }
+
+    function add(word) {
+        const dictionary = settings.currentIgnoreList;
+        dictionary.push(word);
+        settings.currentIgnoreList = dictionary;
+    }
+
+    function remove(word) {
+        settings.currentIgnoreList = settings.currentIgnoreList.filter(function (value, _, _) {
+            return value !== word;
+        });
+    }
+}

src/qml/Settings/ThemeRadioButton.qml

@@ -0,0 +1,65 @@
+// Copyright 2021 Marco Martin <mart@kde.org>
+// Copyright 2018 Furkan Tokac <furkantokac34@gmail.com>
+// Copyright 2019 Nate Graham <nate@kde.org>
+// 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.15 as Kirigami
+
+QQC2.RadioButton {
+    id: delegate
+
+    implicitWidth: contentItem.implicitWidth
+    implicitHeight: contentItem.implicitHeight
+
+    property alias innerObject: contentLayout.children
+
+    contentItem: ColumnLayout {
+        Kirigami.ShadowedRectangle {
+            implicitWidth: implicitHeight * 1.6
+            implicitHeight: Kirigami.Units.gridUnit * 6
+            radius: Kirigami.Units.smallSpacing
+            Kirigami.Theme.inherit: false
+            Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+            shadow.xOffset: 0
+            shadow.yOffset: 2
+            shadow.size: 10
+            shadow.color: Qt.rgba(0, 0, 0, 0.3)
+
+            color: {
+                if (delegate.checked) {
+                    return Kirigami.Theme.highlightColor;
+                } else if (delegate.hovered) {
+                    // Match appearance of hovered list items
+                    return Qt.rgba(Kirigami.Theme.highlightColor.r,
+                                Kirigami.Theme.highlightColor.g,
+                                Kirigami.Theme.highlightColor.b,
+                                0.5);
+                } else {
+                    return Kirigami.Theme.backgroundColor;
+                }
+            }
+            ColumnLayout {
+                id: contentLayout
+                anchors.fill: parent
+                anchors.margins: Kirigami.Units.smallSpacing
+                clip: true
+            }
+        }
+
+        QQC2.Label {
+            id: label
+            Layout.fillWidth: true
+            text: delegate.text
+            horizontalAlignment: Text.AlignHCenter
+        }
+    }
+
+    indicator: Item {}
+    background: Item {}
+}
+
+

src/qml/main.qml

@@ -0,0 +1,475 @@
+// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Kirigami.ApplicationWindow {
+    id: root
+
+    property int columnWidth: Kirigami.Units.gridUnit * 13
+
+    minimumWidth: Kirigami.Units.gridUnit * 15
+    minimumHeight: Kirigami.Units.gridUnit * 15
+
+    visible: false // Will be overridden in Component.onCompleted
+    wideScreen: width > columnWidth * 5
+
+    pageStack.initialPage: LoadingPage {}
+    pageStack.globalToolBar.canContainHandles: true
+
+    property bool roomListLoaded: false
+
+    property RoomPage roomPage
+
+    Connections {
+        target: root.quitAction
+        function onTriggered() {
+            Qt.quit()
+        }
+    }
+
+    Loader {
+        active: Kirigami.Settings.hasPlatformMenuBar && !Kirigami.Settings.isMobile
+        source: Qt.resolvedUrl("qrc:/GlobalMenu.qml")
+    }
+
+    // This timer allows to batch update the window size change to reduce
+    // the io load and also work around the fact that x/y/width/height are
+    // changed when loading the page and overwrite the saved geometry from
+    // the previous session.
+    Timer {
+        id: saveWindowGeometryTimer
+        interval: 1000
+        onTriggered: Controller.saveWindowGeometry()
+    }
+
+    Connections {
+        id: saveWindowGeometryConnections
+        enabled: false // Disable on startup to avoid writing wrong values if the window is hidden
+        target: root
+
+        function onClosing() { Controller.saveWindowGeometry(); }
+        function onWidthChanged() { saveWindowGeometryTimer.restart(); }
+        function onHeightChanged() { saveWindowGeometryTimer.restart(); }
+        function onXChanged() { saveWindowGeometryTimer.restart(); }
+        function onYChanged() { saveWindowGeometryTimer.restart(); }
+    }
+
+
+    Loader {
+        id: quickView
+        active: !Kirigami.Settings.isMobile
+        sourceComponent: QuickSwitcher { }
+    }
+
+    Connections {
+        target: RoomManager
+
+        function onPushRoom(room, event) {
+            root.roomPage = pageStack.push("qrc:/RoomPage.qml");
+            root.roomPage.forceActiveFocus();
+            if (event.length > 0) {
+                roomPage.goToEvent(event);
+            }
+        }
+
+        function onReplaceRoom(room, event) {
+            const roomItem = pageStack.get(pageStack.depth - 1);
+            pageStack.currentIndex = pageStack.depth - 1;
+            root.roomPage.forceActiveFocus();
+            if (event.length > 0) {
+                roomItem.goToEvent(event);
+            }
+        }
+
+        function goToEvent(event) {
+            if (event.length > 0) {
+                roomItem.goToEvent(event);
+            }
+            roomItem.forceActiveFocus();
+        }
+
+        function onPushWelcomePage() {
+            // TODO
+        }
+
+        function onOpenRoomInNewWindow(room) {
+            const secondayWindow = roomWindow.createObject(applicationWindow(), {currentRoom: room});
+            secondayWiroomWindowndow.width = root.width - pageStack.get(0).width;
+            secondayWindow.show();
+        }
+
+        function onShowUserDetail(user) {
+            const roomItem = pageStack.get(pageStack.depth - 1);
+            roomItem.showUserDetail(user);
+        }
+
+        function onAskDirectChatConfirmation(user) {
+            askDirectChatConfirmationComponent.createObject(QQC2.ApplicationWindow.overlay, {
+                user: user,
+            }).open();
+        }
+
+        function onWarning(title, message) {
+            if (RoomManager.currentRoom) {
+                const roomItem = pageStack.get(pageStack.depth - 1);
+                roomItem.warning(title, message);
+            } else {
+                showPassiveNotification(i18n("Warning: %1", message));
+            }
+        }
+    }
+
+    function pushReplaceLayer(page, args) {
+        if (pageStack.layers.depth === 2) {
+            pageStack.layers.replace(page, args);
+        } else {
+            pageStack.layers.push(page, args);
+        }
+    }
+
+    contextDrawer: RoomDrawer {
+        id: contextDrawer
+
+        // This is a memory for all user initiated actions on the drawer, i.e. clicking the button
+        // It is used to ensure that user choice is remembered when changing pages and expanding and contracting the window width
+        property bool drawerUserState: Config.autoRoomInfoDrawer
+
+        // Connect to the onClicked function of the RoomDrawer handle button
+        Connections {
+            target: contextDrawer.handle.children[0]
+            function onClicked() {
+                contextDrawer.drawerUserState = contextDrawer.drawerOpen
+            }
+        }
+
+        modal: !root.wideScreen || !enabled
+        onEnabledChanged: drawerOpen = enabled && !modal
+        onModalChanged: {
+            if (Config.autoRoomInfoDrawer) {
+                drawerOpen = !modal && drawerUserState
+                dim = false
+            }
+        }
+        enabled: RoomManager.hasOpenRoom && pageStack.layers.depth < 2 && pageStack.depth < 3
+        handleVisible: enabled && pageStack.layers.depth < 2 && pageStack.depth < 3 && (root.wideScreen || pageStack.currentIndex > 0)
+    }
+
+    readonly property int defaultPageWidth: Kirigami.Units.gridUnit * 17
+    readonly property int minPageWidth: Kirigami.Units.gridUnit * 10
+    readonly property int collapsedPageWidth: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3
+    readonly property bool shouldUseSidebars: RoomManager.hasOpenRoom && (Config.roomListPageWidth > minPageWidth ? root.width >= Kirigami.Units.gridUnit * 35 : root.width > Kirigami.Units.gridUnit * 27) && roomListLoaded
+    readonly property int pageWidth: {
+        if (Config.roomListPageWidth === -1) {
+            return defaultPageWidth;
+        } else if (Config.roomListPageWidth < minPageWidth) {
+            return collapsedPageWidth;
+        } else {
+            return Config.roomListPageWidth;
+        }
+    }
+
+    pageStack.defaultColumnWidth: pageWidth
+    pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar
+    pageStack.globalToolBar.showNavigationButtons: pageStack.currentIndex > 0 ? Kirigami.ApplicationHeaderStyle.ShowBackButton : 0
+    pageStack.columnView.columnResizeMode: shouldUseSidebars ? Kirigami.ColumnView.FixedColumns : Kirigami.ColumnView.SingleColumn
+
+    MouseArea {
+        visible: root.pageStack.wideMode
+        z: 500
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        x: root.pageStack.defaultColumnWidth - (width / 2)
+        width: 2
+
+        property int _lastX: -1
+        enabled: !Kirigami.Settings.isMobile
+
+        cursorShape: !Kirigami.Settings.isMobile ? Qt.SplitHCursor : undefined
+
+        onPressed: _lastX = mouseX
+        onReleased: Config.save();
+
+        onPositionChanged: {
+            if (_lastX == -1) {
+                return;
+            }
+
+            if (mouse.x > _lastX) {
+                // we moved to the right
+                if (Config.roomListPageWidth === root.collapsedPageWidth && root.pageWidth + (mouse.x - _lastX) >= root.minPageWidth) {
+                    // Here we get back directly to a more wide mode.
+                    Config.roomListPageWidth = root.minPageWidth;
+                    if (root.width < Kirigami.Units.gridUnit * 35) {
+                        root.width = Kirigami.Units.gridUnit * 35;
+                    }
+                } else if (Config.roomListPageWidth !== root.collapsedPageWidth) {
+                    // Increase page width
+                    Config.roomListPageWidth = Math.min(root.defaultPageWidth, root.pageWidth + (mouse.x - _lastX));
+                }
+            } else if (mouse.x < _lastX) {
+                const tmpWidth = root.pageWidth - (_lastX - mouse.x);
+
+                if (tmpWidth < root.minPageWidth) {
+                    Config.roomListPageWidth = root.collapsedPageWidth;
+                } else {
+                    Config.roomListPageWidth = tmpWidth;
+                }
+            }
+        }
+    }
+
+
+    globalDrawer: Kirigami.GlobalDrawer {
+        property bool hasLayer
+        contentItem.implicitWidth: columnWidth
+        isMenu: true
+        actions: [
+            Kirigami.Action {
+                text: i18n("Explore rooms")
+                icon.name: "compass"
+                onTriggered: pushReplaceLayer("qrc:/JoinRoomPage.qml", {connection: Controller.activeConnection})
+                enabled: pageStack.layers.currentItem.title !== i18n("Explore Rooms") && Controller.accountCount > 0
+            },
+            Kirigami.Action {
+                text: i18n("Start a Chat")
+                icon.name: "irc-join-channel"
+                onTriggered: pushReplaceLayer("qrc:/StartChatPage.qml", {connection: Controller.activeConnection})
+                enabled: pageStack.layers.currentItem.title !== i18n("Start a Chat") && Controller.accountCount > 0
+            },
+            Kirigami.Action {
+                text: i18n("Create a Room")
+                icon.name: "irc-join-channel"
+                onTriggered: {
+                    let dialog = createRoomDialog.createObject(root.overlay);
+                    dialog.open();
+                }
+                shortcut: StandardKey.New
+                enabled: pageStack.layers.currentItem.title !== i18n("Start a Chat") && Controller.accountCount > 0
+            },
+            Kirigami.Action {
+                text: i18n("Configure NeoChat...")
+                icon.name: "settings-configure"
+                onTriggered: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {}, {
+                    title: i18n("Configure")
+                })
+                enabled: pageStack.layers.currentItem.title !== i18n("Configure NeoChat...")
+                shortcut: StandardKey.Preferences
+            },
+            Kirigami.Action {
+                text: i18n("Logout")
+                icon.name: "list-remove-user"
+                enabled: Controller.accountCount > 0
+                onTriggered: Controller.logout(Controller.activeConnection, true)
+            },
+            Kirigami.Action {
+                text: i18n("Quit")
+                icon.name: "gtk-quit"
+                shortcut: StandardKey.Quit
+                onTriggered: Qt.quit()
+            }
+        ]
+    }
+
+    Component.onCompleted: {
+        Controller.setBlur(pageStack, Config.blur && !Config.compactLayout);
+        if (Config.minimizeToSystemTrayOnStartup && !Kirigami.Settings.isMobile && Controller.supportSystemTray && Config.systemTray) {
+            restoreWindowGeometryConnections.enabled = true; // To restore window size and position
+        } else {
+            visible = true;
+            saveWindowGeometryConnections.enabled = true;
+        }
+    }
+    Connections {
+        target: Config
+        function onBlurChanged() {
+            Controller.setBlur(pageStack, Config.blur && !Config.compactLayout);
+        }
+        function onCompactLayoutChanged() {
+            Controller.setBlur(pageStack, Config.blur && !Config.compactLayout);
+        }
+    }
+
+    // blur effect
+    color: Config.blur && !Config.compactLayout ? "transparent" : Kirigami.Theme.backgroundColor
+    
+    // we need to apply the translucency effect separately on top of the color
+    background: Rectangle {
+        color: Config.blur && !Config.compactLayout ? Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 1 - Config.transparency) : "transparent"
+    }
+    
+    Component {
+        id: roomListComponent
+        RoomListPage {
+            id: roomList
+
+            Connections {
+                target: root.roomPage
+                function onSwitchRoomUp() {
+                    roomList.goToPreviousRoom();
+                }
+                function onSwitchRoomDown() {
+                    roomList.goToNextRoom();
+                }
+            }
+        }
+    }
+
+    Connections {
+        target: AccountRegistry
+        function onRowsRemoved() {
+            if (AccountRegistry.rowCount() === 0) {
+                RoomManager.reset();
+                pageStack.clear();
+                roomListLoaded = false;
+                pageStack.push("qrc:/WelcomePage.qml");
+            }
+        }
+    }
+
+    Connections {
+        target: Controller
+
+        function onInitiated() {
+            if (Controller.accountCount === 0) {
+                pageStack.replace("qrc:/WelcomePage.qml", {});
+            } else if (!roomListLoaded) {
+                pageStack.replace(roomListComponent, {
+                    activeConnection: Controller.activeConnection
+                });
+                roomListLoaded = true;
+                RoomManager.loadInitialRoom();
+            }
+        }
+
+        function onGlobalErrorOccured(error, detail) {
+            showPassiveNotification(i18n("%1: %2", error, detail));
+        }
+
+        function onUserConsentRequired(url) {
+            consentSheet.url = url
+            consentSheet.open()
+        }
+    }
+
+    Connections {
+        id: restoreWindowGeometryConnections
+        enabled: false
+        target: root
+
+        function onVisibleChanged() {
+            if (!visible) {
+                return;
+            }
+            Controller.restoreWindowGeometry(root);
+            restoreWindowGeometryConnections.enabled = false; // Only restore window geometry for the first time
+            saveWindowGeometryConnections.enabled = true;
+        }
+    }
+
+    Component {
+        id: keyVerificationDialogComponent
+        KeyVerificationDialog { }
+    }
+
+    Connections {
+        target: Controller.activeConnection
+        function onDirectChatAvailable(directChat) {
+            RoomManager.enterRoom(Controller.activeConnection.room(directChat.id));
+        }
+        function onNewKeyVerificationSession(session) {
+            applicationWindow().pageStack.pushDialogLayer(keyVerificationDialogComponent, {
+                session: session,
+            }, {
+                title: i18nc("@title:window", "Session Verification")
+            });
+        }
+    }
+
+    Kirigami.OverlaySheet {
+        id: consentSheet
+
+        property string url: ""
+
+        title: i18n("User consent")
+
+        QQC2.Label {
+            id: label
+
+            text: i18n("Your homeserver requires you to agree to its terms and conditions before being able to use it. Please click the button below to read them.")
+            wrapMode: Text.WordWrap
+            width: parent.width
+        }
+        footer: QQC2.Button {
+            text: i18n("Open")
+            onClicked: UrlHelper.openUrl(consentSheet.url)
+        }
+    }
+
+    Component {
+        id: createRoomDialog
+
+        CreateRoomDialog {}
+    }
+
+    Component {
+        id: roomWindow
+        RoomWindow {}
+    }
+
+    Component {
+        id: userDialog
+        UserDetailDialog {}
+    }
+
+    Component {
+        id: askDirectChatConfirmationComponent
+
+        Kirigami.OverlaySheet {
+            id: askDirectChatConfirmation
+            required property var user;
+
+            parent: QQC2.ApplicationWindow.overlay
+            title: i18n("Start a chat")
+            contentItem: QQC2.Label {
+                text: i18n("Do you want to start a chat with %1?", user.displayName)
+                wrapMode: Text.WordWrap
+            }
+            footer: QQC2.DialogButtonBox {
+                standardButtons: QQC2.DialogButtonBox.Ok | QQC2.DialogButtonBox.Cancel
+                onAccepted: {
+                    user.requestDirectChat();
+                    askDirectChatConfirmation.close();
+                }
+                onRejected: askDirectChatConfirmation.close();
+            }
+        }
+    }
+
+    property Item hoverLinkIndicator: QQC2.Control {
+        parent: overlay.parent 
+        property string text
+        opacity: linkText.text.length > 0 ? 1 : 0
+
+        z: 20
+        x: 0
+        y: parent.height - implicitHeight
+        contentItem: QQC2.Label {
+            id: linkText
+            text: parent.text.startsWith("https://matrix.to/") ? "" : parent.text
+        }
+        Kirigami.Theme.colorSet: Kirigami.Theme.View
+        background: Rectangle {
+             color: Kirigami.Theme.backgroundColor
+        }
+    }
+}

src/res.qrc

@@ -0,0 +1,86 @@
+<RCC>
+    <qresource prefix="/">
+        <file alias="icons/org.kde.neochat.svg">../org.kde.neochat.svg</file>
+        <file alias="icons/org.kde.neochat.tray.svg">../org.kde.neochat.tray.svg</file>
+        <file alias="main.qml">qml/main.qml</file>
+        <file alias="LoadingPage.qml">qml/Page/LoadingPage.qml</file>
+        <file alias="RoomListPage.qml">qml/Page/RoomListPage.qml</file>
+        <file alias="RoomPage.qml">qml/Page/RoomPage.qml</file>
+        <file alias="RoomWindow.qml">qml/Page/RoomWindow.qml</file>
+        <file alias="JoinRoomPage.qml">qml/Page/JoinRoomPage.qml</file>
+        <file alias="InviteUserPage.qml">qml/Page/InviteUserPage.qml</file>
+        <file alias="StartChatPage.qml">qml/Page/StartChatPage.qml</file>
+        <file alias="ImageEditorPage.qml">qml/Page/ImageEditorPage.qml</file>
+        <file alias="WelcomePage.qml">qml/Page/WelcomePage.qml</file>
+        <file alias="General.qml">qml/RoomSettings/General.qml</file>
+        <file alias="Security.qml">qml/RoomSettings/Security.qml</file>
+        <file alias="PushNotification.qml">qml/RoomSettings/PushNotification.qml</file>
+        <file alias="Categories.qml">qml/RoomSettings/Categories.qml</file>
+        <file alias="FullScreenImage.qml">qml/Component/FullScreenImage.qml</file>
+        <file alias="FancyEffectsContainer.qml">qml/Component/FancyEffectsContainer.qml</file>
+        <file alias="TypingPane.qml">qml/Component/TypingPane.qml</file>
+        <file alias="ShimmerGradient.qml">qml/Component/ShimmerGradient.qml</file>
+        <file alias="QuickSwitcher.qml">qml/Component/QuickSwitcher.qml</file>
+        <file alias="ChatBox.qml">qml/Component/ChatBox/ChatBox.qml</file>
+        <file alias="ChatBar.qml">qml/Component/ChatBox/ChatBar.qml</file>
+        <file alias="AttachmentPane.qml">qml/Component/ChatBox/AttachmentPane.qml</file>
+        <file alias="ReplyPane.qml">qml/Component/ChatBox/ReplyPane.qml</file>
+        <file alias="CompletionMenu.qml">qml/Component/ChatBox/CompletionMenu.qml</file>
+        <file alias="EmojiPicker.qml">qml/Component/Emoji/EmojiPicker.qml</file>
+        <file alias="ReplyComponent.qml">qml/Component/Timeline/ReplyComponent.qml</file>
+        <file alias="StateDelegate.qml">qml/Component/Timeline/StateDelegate.qml</file>
+        <file alias="RichLabel.qml">qml/Component/Timeline/RichLabel.qml</file>
+        <file alias="TimelineContainer.qml">qml/Component/Timeline/TimelineContainer.qml</file>
+        <file alias="SectionDelegate.qml">qml/Component/Timeline/SectionDelegate.qml</file>
+        <file alias="VideoDelegate.qml">qml/Component/Timeline/VideoDelegate.qml</file>
+        <file alias="ReactionDelegate.qml">qml/Component/Timeline/ReactionDelegate.qml</file>
+        <file alias="LinkPreviewDelegate.qml">qml/Component/Timeline/LinkPreviewDelegate.qml</file>
+        <file alias="AudioDelegate.qml">qml/Component/Timeline/AudioDelegate.qml</file>
+        <file alias="FileDelegate.qml">qml/Component/Timeline/FileDelegate.qml</file>
+        <file alias="ImageDelegate.qml">qml/Component/Timeline/ImageDelegate.qml</file>
+        <file alias="EncryptedDelegate.qml">qml/Component/Timeline/EncryptedDelegate.qml</file>
+        <file alias="EventDelegate.qml">qml/Component/Timeline/EventDelegate.qml</file>
+        <file alias="MessageDelegate.qml">qml/Component/Timeline/MessageDelegate.qml</file>
+        <file alias="ReadMarkerDelegate.qml">qml/Component/Timeline/ReadMarkerDelegate.qml</file>
+        <file alias="MimeComponent.qml">qml/Component/Timeline/MimeComponent.qml</file>
+        <file alias="LoginStep.qml">qml/Component/Login/LoginStep.qml</file>
+        <file alias="Login.qml">qml/Component/Login/Login.qml</file>
+        <file alias="Password.qml">qml/Component/Login/Password.qml</file>
+        <file alias="LoginRegister.qml">qml/Component/Login/LoginRegister.qml</file>
+        <file alias="Loading.qml">qml/Component/Login/Loading.qml</file>
+        <file alias="Homeserver.qml">qml/Component/Login/Homeserver.qml</file>
+        <file alias="LoginMethod.qml">qml/Component/Login/LoginMethod.qml</file>
+        <file alias="Sso.qml">qml/Component/Login/Sso.qml</file>
+        <file alias="RoomDrawer.qml">qml/Panel/RoomDrawer.qml</file>
+        <file alias="UserDetailDialog.qml">qml/Dialog/UserDetailDialog.qml</file>
+        <file alias="CreateRoomDialog.qml">qml/Dialog/CreateRoomDialog.qml</file>
+        <file alias="EmojiDialog.qml">qml/Dialog/EmojiDialog.qml</file>
+        <file alias="OpenFileDialog.qml">qml/Dialog/OpenFileDialog.qml</file>
+        <file alias="KeyVerificationDialog.qml">qml/Dialog/KeyVerification/KeyVerificationDialog.qml</file>
+        <file alias="Message.qml">qml/Dialog/KeyVerification/Message.qml</file>
+        <file alias="EmojiItem.qml">qml/Dialog/KeyVerification/EmojiItem.qml</file>
+        <file alias="EmojiRow.qml">qml/Dialog/KeyVerification/EmojiRow.qml</file>
+        <file alias="EmojiSas.qml">qml/Dialog/KeyVerification/EmojiSas.qml</file>
+        <file alias="VerificationCanceled.qml">qml/Dialog/KeyVerification/VerificationCanceled.qml</file>
+        <file alias="GlobalMenu.qml">qml/Menu/GlobalMenu.qml</file>
+        <file alias="EditMenu.qml">qml/Menu/EditMenu.qml</file>
+        <file alias="MessageDelegateContextMenu.qml">qml/Menu/Timeline/MessageDelegateContextMenu.qml</file>
+        <file alias="FileDelegateContextMenu.qml">qml/Menu/Timeline/FileDelegateContextMenu.qml</file>
+        <file alias="MessageSourceSheet.qml">qml/Menu/Timeline/MessageSourceSheet.qml</file>
+        <file alias="ReportSheet.qml">qml/Menu/Timeline/ReportSheet.qml</file>
+        <file alias="RoomListContextMenu.qml">qml/Menu/RoomListContextMenu.qml</file>
+        <file alias="glowdot.png">qml/Component/glowdot.png</file>
+        <file alias="confetti.png">qml/Component/confetti.png</file>
+        <file alias="SettingsPage.qml">qml/Settings/SettingsPage.qml</file>
+        <file alias="ThemeRadioButton.qml">qml/Settings/ThemeRadioButton.qml</file>
+        <file alias="ColorScheme.qml">qml/Settings/ColorScheme.qml</file>
+        <file alias="GeneralSettingsPage.qml">qml/Settings/GeneralSettingsPage.qml</file>
+        <file alias="Emoticons.qml">qml/Settings/Emoticons.qml</file>
+        <file alias="AppearanceSettingsPage.qml">qml/Settings/AppearanceSettingsPage.qml</file>
+        <file alias="AccountsPage.qml">qml/Settings/AccountsPage.qml</file>
+        <file alias="AccountEditorPage.qml">qml/Settings/AccountEditorPage.qml</file>
+        <file alias="DevicesPage.qml">qml/Settings/DevicesPage.qml</file>
+        <file alias="About.qml">qml/Settings/About.qml</file>
+        <file alias="SonnetConfigPage.qml">qml/Settings/SonnetConfigPage.qml</file>
+    </qresource>
+</RCC>

src/res_android.qrc

@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/">
+        <file alias="ShareAction.qml">qml/Menu/ShareActionAndroid.qml</file>
+    </qresource>
+</RCC>

src/res_desktop.qrc

@@ -0,0 +1,6 @@
+<RCC>
+    <qresource prefix="/">
+        <file alias="ShareAction.qml">qml/Menu/ShareAction.qml</file>
+        <file alias="ShareDialog.qml">qml/Menu/ShareDialog.qml</file>
+    </qresource>
+</RCC>