Separate different message delegates.

qml/component/ImageBubble.qml

@@ -0,0 +1,52 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.4
+
+Row {
+    id: messageRow
+
+    spacing: 6
+
+    ImageStatus {
+        id: avatar
+
+        width: height
+        height: 40
+        round: false
+        visible: !sentByMe
+        source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
+        displayText: author.displayName
+
+        MouseArea {
+            anchors.fill: parent
+
+            hoverEnabled: true
+            ToolTip.visible: containsMouse
+            ToolTip.text: author.displayName
+        }
+    }
+
+    Rectangle {
+        id: messageRect
+
+        width: messageImage.implicitWidth + 24
+        height: messageImage.implicitHeight + 24
+
+        color: sentByMe ? "lightgrey" : Material.accent
+
+        Image {
+            id: messageImage
+            anchors.centerIn: parent
+            source: "image://mxc/" + content.url
+
+            MouseArea {
+                anchors.fill: parent
+
+                hoverEnabled: true
+                propagateComposedEvents: true
+                ToolTip.visible: containsMouse
+                ToolTip.text: content.body
+            }
+        }
+    }
+}

qml/component/MessageBubble.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.4
+
+Row {
+    readonly property bool isNotice: eventType === "notice"
+
+    id: messageRow
+
+    spacing: 6
+
+    ImageStatus {
+        id: avatar
+
+        width: height
+        height: 40
+        round: false
+        visible: !sentByMe && aboveAuthor !== author
+        source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
+        displayText: author.displayName
+
+        MouseArea {
+            anchors.fill: parent
+
+            hoverEnabled: true
+            ToolTip.visible: containsMouse
+            ToolTip.text: author.displayName
+        }
+    }
+
+    Rectangle {
+        width: height
+        height: 40
+        color: "transparent"
+        visible: !sentByMe && aboveAuthor === author
+    }
+
+    Rectangle {
+        id: messageRect
+
+        width: Math.min(messageText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
+        height: messageText.implicitHeight + 24
+
+        color: isNotice ? "transparent" : sentByMe ? "lightgrey" : Material.accent
+        border.color: Material.accent
+        border.width: isNotice ? 2 : 0
+
+        Label {
+            id: messageText
+            text: display
+            color: isNotice ? "black" : sentByMe ? "black" : "white"
+            anchors.fill: parent
+            anchors.margins: 12
+            wrapMode: Label.Wrap
+            linkColor: isNotice ? Material.accent : sentByMe ? Material.accent : "white"
+            textFormat: Text.StyledText
+        }
+    }
+}

qml/component/MessageDelegate.qml

@@ -3,22 +3,17 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.4
 
 Item {
+    id: messageDelegate
+
     readonly property bool sentByMe: author === currentRoom.localUser
 
-    anchors.right: messageRow.visible && sentByMe ? parent.right : undefined
-    anchors.horizontalCenter: stateText.visible ? parent.horizontalCenter : undefined
+    width: delegateLoader.width
+    height: delegateLoader.height
 
-    width: {
-        if (messageRow.visible) return messageRow.width
-        if (stateText.visible) return stateText.width
-    }
-    height: {
-        if (messageRow.visible) return messageRow.height
-        if (stateText.visible) return stateText.height
-    }
+    anchors.right: (eventType === "message" || eventType === "image") && sentByMe ? parent.right : undefined
+    anchors.horizontalCenter: (eventType === "state" || eventType === "emote") ? parent.horizontalCenter : undefined
 
     MouseArea {
-        id: baseMouseArea
         anchors.fill: parent
 
         ToolTip.visible: pressed
@@ -26,105 +21,20 @@ Item {
         ToolTip.text: time
     }
 
-    Row {
-        id: messageRow
-        visible: eventType === "message" || eventType === "image" || eventType === "notice"
+    Loader {
+        id: delegateLoader
 
-        spacing: 6
-
-        ImageStatus {
-            id: avatar
-
-            width: height
-            height: 40
-            round: false
-            visible: !sentByMe
-            source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
-            displayText: author.displayName
-
-            MouseArea {
-                anchors.fill: parent
-
-                hoverEnabled: true
-                ToolTip.visible: containsMouse
-                ToolTip.text: author.displayName
+        source: {
+            switch (eventType) {
+            case "notice":
+            case "message":
+                return "MessageBubble.qml"
+            case "image":
+                return "ImageBubble.qml"
+            case "emote":
+            case "state":
+                return "StateBubble.qml"
             }
         }
-
-        Rectangle {
-            id: messageRect
-
-            width: {
-                if (eventType === "image") return messageImage.width + 24
-                if (eventType === "message")
-                    return Math.min(messageText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
-                if (eventType === "notice")
-                    return Math.min(noticeText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
-            }
-            height: {
-                if (eventType === "image") return messageImage.height + 24
-                if (eventType === "message") return messageText.implicitHeight + 24
-                if (eventType === "notice") return noticeText.implicitHeight + 24
-            }
-
-            color: noticeText.visible ? "transparent" : sentByMe ? "lightgrey" : Material.accent
-            border.color: Material.accent
-            border.width: noticeText.visible ? 2 : 0
-
-            Label {
-                id: messageText
-                visible: eventType === "message"
-                text: display
-                color: sentByMe ? "black" : "white"
-                anchors.fill: parent
-                anchors.margins: 12
-                wrapMode: Label.Wrap
-                textFormat: Text.RichText
-            }
-
-            Label {
-                id: noticeText
-                visible: eventType === "notice"
-                text: display
-                color: "black"
-                anchors.fill: parent
-                anchors.margins: 12
-                wrapMode: Label.Wrap
-                textFormat: Text.RichText
-            }
-
-            Image {
-                id: messageImage
-                anchors.centerIn: parent
-                visible: eventType === "image"
-                source: visible? "image://mxc/" + content.url : ""
-
-                MouseArea {
-                    anchors.fill: parent
-
-                    hoverEnabled: true
-                    propagateComposedEvents: true
-                    ToolTip.visible: containsMouse
-                    ToolTip.text: visible ? content.body : ""
-                }
-            }
-        }
-    }
-
-    Label {
-        id: stateText
-        visible: eventType === "state" || eventType === "emote"
-        width: Math.min(implicitWidth, messageListView.width)
-        height: implicitHeight
-        padding: 12
-        text: author.displayName + " " + display
-        color: eventType === "state" ? "black" : "white"
-        wrapMode: Label.Wrap
-        textFormat: Text.StyledText
-
-        background: Rectangle {
-            anchors.fill: parent
-            color: eventType === "state" ? "lightgrey" : Material.accent
-        }
     }
 }

qml/component/SideNavButton.qml

@@ -29,7 +29,7 @@ Item {
         anchors.fill: parent
 
         onClicked: {
-            if(!page && stackView.currentItem !== page) {
+            if(page && stackView.currentItem !== page) {
                 if(stackView.depth === 1) {
                     stackView.replace(page)
                 } else {

qml/component/StateBubble.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.4
+
+Rectangle {
+    readonly property bool isEmote: eventType === "emote"
+
+    id: stateRect
+
+    width: Math.min(stateText.implicitWidth + 24, messageListView.width)
+    height: stateText.implicitHeight + 24
+
+    color: isEmote ? Material.accent : "lightgrey"
+
+    Label {
+        id: stateText
+        text: "<b>" + author.displayName + "</b> " + display
+        color: isEmote ? "white" : "black"
+        anchors.fill: parent
+        anchors.margins: 12
+        wrapMode: Label.Wrap
+        textFormat: Text.StyledText
+    }
+}