Prettify room list a bit

qml/pages/ChatPage.qml

 import QtQuick 2.0
 import QtQuick.Layouts 1.0
+import Sailfish.Pickers 1.0
 import Sailfish.Silica 1.0
 import Sailfish.Silica.private 1.0
-import Sailfish.Pickers 1.0
 import dev.neko.spoon 1.0
 
 Page {
@@ -77,11 +77,11 @@ Page {
                     var lastIndex = maxIndex;
                     for (var child in chatView.contentItem.children) {
                         if (chatView.contentItem.children[child].isFullyVisible && chatView.contentItem.children[child].index > maxIndex)
-                        lastIndex = chatView.contentItem.children[child].index;
+                            lastIndex = chatView.contentItem.children[child].index;
 
                     }
                     if (lastIndex > maxIndex)
-                    maxIndex = lastIndex;
+                        maxIndex = lastIndex;
 
                 }
                 onMaxIndexChanged: {
@@ -91,7 +91,7 @@ Page {
                 Component.onCompleted: {
                     maxIndex = room.lastRead();
                     if (maxIndex = count - 1)
-                    atEnd = true;
+                        atEnd = true;
 
                     positionViewAtIndex(maxIndex, ListView.Contain);
                 }
@@ -209,7 +209,7 @@ Page {
                     icon.source: "image://theme/icon-m-send"
                     onClicked: {
                         if (messageText.text != "")
-                        room.sendTextMessage(messageText.text);
+                            room.sendTextMessage(messageText.text);
 
                         messageText.text = "";
                     }
@@ -246,19 +246,20 @@ Page {
 
     Component {
         id: multiImagePickerDialog
+
         MultiImagePickerDialog {
             onAccepted: {
-                var urls = []
-                var mimetypes = []
+                var urls = [];
+                var mimetypes = [];
                 for (var i = 0; i < selectedContent.count; ++i) {
-                    urls.push(selectedContent.get(i).url)
-                    mimetypes.push(selectedContent.get(i).mimeType)
+                    urls.push(selectedContent.get(i).url);
+                    mimetypes.push(selectedContent.get(i).mimeType);
                 }
-                room.sendImages(urls, mimetypes)
+                room.sendImages(urls, mimetypes);
             }
-
             onRejected: selectedFiles = ""
         }
+
     }
 
 }

qml/pages/MainView.qml

 import QtQuick 2.0
+import QtQuick.Layouts 1.0
 import Sailfish.Silica 1.0
 
 Page {
@@ -81,65 +82,69 @@ Page {
             contentHeight: mainRow.height + Theme.paddingSmall
             contentWidth: parent.width
 
-            Row {
+            RowLayout {
                 id: mainRow
 
                 anchors.left: parent.left
                 anchors.right: parent.right
-                spacing: Theme.paddingMedium
+                anchors.rightMargin: Theme.paddingMedium
+                spacing: Theme.paddingSmall
                 width: roomItem.width
 
-                Label {
-                    id: unreadMessages
-
-                    color: unreadNotifications > 0 ? Theme.highlightColor : Theme.secondaryColor
-                    width: 2 * Theme.fontSizeLarge
-                    text: unreadNotifications
-                    font.pixelSize: unreadNotifications < 100 ? Theme.fontSizeHuge : Theme.fontSizeLarge
-                    horizontalAlignment: Text.AlignRight
+                Item {
+                    width: gi.width / 2
+                    height: gi.height
 
-                    BackgroundItem {
-                        Rectangle {
-                            color: Theme.highlightBackgroundColor
-                        }
+                    GlassItem {
+                        id: gi
 
+                        anchors.right: parent.right
+                        width: Theme.itemSizeSmall
+                        height: Theme.itemSizeSmall
+                        color: Theme.highlightColor
+                        opacity: unreadNotifications > 0 ? 1 : 0
                     }
 
                 }
 
-                Column {
-                    width: mainRow.width - unreadMessages.width - roomImage.width - 3 * Theme.paddingMedium
+                Label {
+                    id: unreadMessages
+
+                    color: unreadNotifications > 0 ? Theme.highlightColor : Theme.secondaryColor
+                    width: Theme.fontSizeMedium
+                    Layout.preferredWidth: Theme.paddingMedium
+                    text: {
+                        if (unreadNotifications <= 0)
+                            return "";
+                        else if (unreadNotifications > 100)
+                            return "99+";
+                        else
+                            return unreadNotifications;
+                    }
+                    font.pixelSize: unreadNotifications < 10 ? Theme.fontSizeLarge : Theme.fontSizeSmall
+                    horizontalAlignment: Text.AlignRight
+                }
 
+                ColumnLayout {
                     Label {
                         id: roomName
 
                         text: model.roomName
                         truncationMode: TruncationMode.Fade
                         color: Theme.primaryColor
-                        font.pixelSize: Theme.fontSizeLarge
-
-                        anchors {
-                            left: parent.left
-                            right: parent.right
-                        }
-
+                        Layout.fillWidth: true
                     }
 
                     Label {
                         id: lastMessage
 
                         text: model.lastMessage
-                        color: unreadNotifications > 0 ? Theme.primaryColor : Theme.secondaryColor
+                        color: unreadNotifications > 0 ? Theme.highlightColor : Theme.secondaryColor
                         wrapMode: Text.Wrap
                         truncationMode: TruncationMode.Fade
                         maximumLineCount: 3
                         font.pixelSize: Theme.fontSizeExtraSmall
-
-                        anchors {
-                            left: parent.left
-                            right: parent.right
-                        }
-
+                        Layout.fillWidth: true
                     }
 
                 }
@@ -147,10 +152,10 @@ Page {
                 Image {
                     id: roomImage
 
-                    width: unreadMessages.width
-                    height: unreadMessages.height
-                    sourceSize.width: unreadMessages.width
-                    sourceSize.height: unreadMessages.height
+                    height: parent.height
+                    width: height
+                    sourceSize.width: height
+                    sourceSize.height: height
                     fillMode: Image.PreserveAspectFit
                     source: model.roomPicture
                     asynchronous: true

src/models/roommodel.cpp

@@ -232,9 +232,9 @@ std::string Room::name() const {
     }
     std::string heroes;
     for (const auto &m : members) {
-        if (!heroes.empty())
-            heroes += ", ";
         if (m != http::client().user_id().to_string()) {
+            if (!heroes.empty())
+                heroes += ", ";
             std::string hero_name = memberInfos.at(m).display_name;
             heroes += hero_name.empty() ? m : hero_name;
         }