Merge lp:~kai-mast/friends-app/new-postview into lp:friends-app

[Kai Mast]

This branch moves the post/conversation view to a new page. The reason for this is that the current details view get very cluttered if there are a lot of comments. Also, in the future this can be used to view images in high resolution (which I would like to work on after this branch has been merged).

I also adds the "reply all" button as requested. The code has been refactored, so this seems like a big merge but it it actually isn't that big.

Finally, I kept the amount of clicks needed to comment or view a post the same. So while this introduces a new view, the ease of use should stay the same.

[lp:~kai-mast/friends-app/new-postview]

122. By Kai Mast on 2013-12-11

Fixed jumping to Top

123. By Kai Mast on 2013-12-11

Fixed jumping to Top

[Ken VanDine (ken-vandine)]

I've been looking forward to seeing this branch since I saw your post on G+, great work!

Looks pretty good, I did notice one typo. In Feed.qml you have an alias "servie". It doesn't appear to be used, if it isn't just remove it. If it is used, fix the typo. Also there are some places where you have commented out code, just remove those lines. Code comments are great, but I'd rather remove the commented out code.

review: Needs Fixing

[Robert Bruce Park (robru)]

When I look at the new detail page, the contents are visible through the Tabs header.

review: Needs Fixing

[Robert Bruce Park (robru)]

Looks like you need to add 'flickable: content' to the Page object in ConversationPage.qml.

[Kai Mast (kai-mast)]

Thanks for the tip. I thought that was a bug in the toolkit :D

[Ken VanDine (ken-vandine)]

A couple more notes:

* Your merge includes adding a untitled directory which doesn't look intentional.
* The text in the return to feed button should be translatable, add a i18n.tr().
* When the ConverstationPage gets loaded, it scrolls which cuts off the top of the content. Not sure why, but please look into that.

review: Needs Fixing

[Kai Mast (kai-mast)]

Okay I will do all that later. I also have the problem that on the post view the protocol icons are not shown (which makes it really hard to figure out which social network you are posting to). But I also have this problem on trunk... Not sure where this comes from.

[lp:~kai-mast/friends-app/new-postview]

124. By Kai Mast on 2013-12-11

many fixes to the reply area

125. By Kai Mast on 2013-12-11

fix url clicking in conversation view

126. By Kai Mast on 2013-12-11

removed unneeded folder

127. By Kai Mast on 2013-12-11

Many small fixes

128. By Kai Mast on 2013-12-11

Cleanups of the Flickable

[Kai Mast (kai-mast)]

Okay. I think I fixed everything except for the scrolling problem. Is there some SDK guru who can look at this? It really goes beyond my knowledge of the toolkit. Even setting content.contentY manually doesn't seem to work. I tried different anchors of the flickable towards the page (the documentation suggests fill), but that didn't change anything. I also tried increasing the height of the flickable content but that also didn't change anything.

The service property was used for some time to feed can only display specific services. I kept it, because there is a request for custom feeds and I may implement them some day (most of the functionality is already in place, one only needs to add a GUI to create and remove them).

[Ken VanDine (ken-vandine)]

In trying to fix the scrolling issue, I went a little overboard... see my proposal to merge into your's https://code.launchpad.net/~ken-vandine/friends-app/new-postview/+merge/198810

[lp:~kai-mast/friends-app/new-postview]

129. By Kai Mast on 2013-12-12

Merged changes by Ken

[Kai Mast (kai-mast)]

I just reviewed the branch again and everything looks fine now.

However, Ken changes aligned the reply area in the postview to the width of the text and not the width of the whole page. Was this on prupose? In my opinion, the reply area is a bit too small now.

[Ken VanDine (ken-vandine)]

Sorry, that was not intentional

[lp:~kai-mast/friends-app/new-postview]

130. By Kai Mast on 2013-12-13

First attempt to fix layout

131. By Kai Mast on 2013-12-13

Nicer layout of the reply area

[Kai Mast (kai-mast)]

It looks fine now in my opinion. I also made the reply area a little bigger as there is now space (maybe we should make its size dynamic depending on its content in the future).

Please review again and merge if you are happy with it.

[lp:~kai-mast/friends-app/new-postview]

132. By Kai Mast on 2014-01-07

Made header hideable again

[Kai Mast (kai-mast)]

Just discovered that the header did not hide anymore when flicking the content. This bug is already occuring in trunk so I guess it was introduced by my Tabs branch.
To fix this, I made the Feed item a Page and set flickable: listView. Now, the header hides again.

But the content below the header is still clipped, which seems to be this bug: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1250067

@Ken: would be nice if you could review it again :)

[lp:~kai-mast/friends-app/new-postview]

133. By Kai Mast on 2014-01-08

Restore order of update banner

134. By Kai Mast on 2014-01-08

Fix a warning

135. By Kai Mast on 2014-01-08

* Only show refresh bar when pulling downwards
* Restore toolbar

136. By Kai Mast on 2014-01-08

Remove unseen count; never worked for me

[Robert Bruce Park (robru)]

What's the status of this one, Kai? I see some new commits. You ready for a review?

[lp:~kai-mast/friends-app/new-postview]

137. By Kai Mast on 2014-01-15

Fixed clipping error

[Kai Mast (kai-mast)]

I just fixed the clipping problem. The header now hides again when scrolling downwards.

So this is ready to be merged.

[Robert Bruce Park (robru)]

Ok, took a look at this finally, sorry for the delay ;-)

Found some problems though. On the actual postview, there's a margin problem that I find quite ugly -- screenshot attached. Basically the replies should have a larger left margin than the parent, so that they look "set in" from the parent. What I'm seeing instead is zero margin, which is really ugly.

There's also a scrolling problem -- for messages where there are too many replies to fit on the screen, the whole thing just snaps to the top of the message. I can drag the window up to reveal more replies, but if I let go of the screen it just snaps back, so it's impossible to see all the replies.

review: Needs Fixing

[Robert Bruce Park (robru)]

Sorry, here is the screenshot: http://imgur.com/RWLkqsp

Also the timestamps should be aligned, but as you can see the children have a different alignment than the parent.

[Kai Mast (kai-mast)]

Okay I think I screwed this up with my last commit. Thanks for spotting it. Will take a look at it tomorrow.

[Kai Mast (kai-mast)]

@Rob: Did you have the problem that the qml files aren't copied into the build folder? Not sure if I broke something locally or on the branch.

[lp:~kai-mast/friends-app/new-postview]

138. By Kai Mast on 2014-01-16

Fixed scrolling conversation view

[Kai Mast (kai-mast)]

I think I resolved everything. Please check again :)

[Robert Bruce Park (robru)]

Sorry for the delay in reviewing, been a bit busy with other projects!

It looks really good now! The scrolling and margin errors I previously mentioned are fixed. There is however one new issue that I didn't notice before: The top Tab header is overlapping the page content poorly. I remember seeing this issue before a long time ago, but this time it's affecting the main timeline view:

http://imgur.com/u6IEdxu

I confirmed that this is happening only in your branch, trunk does not exhibit this behavior. In trunk the header is always visible and always opaque, but in your branch the header scrolls away with the page content fine, but then when you scroll it back into view, the feed is visible behind it.

review: Needs Fixing

[Kai Mast (kai-mast)]

Oh sorry I forgot to mention this. I am not sure what I am doing wrong there. The issue is described in a bug ( https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1201094 ) but I did everthing described there to fix it: I set the flickable correctly and the ListView still has clip: true.

I have the feeling this is some UI toolkit bug. Maybe it is currently not possible to have a flickable that is not directly the child of the Page.

[Robert Bruce Park (robru)]

Unfortunately my experience with QML is limited, and Ken is wayyy busier than I am so he can't look at this probably any time soon.

What confuses me is that you have at least one working flickable and one that doesn't. Surely you can compare them and see what's different about them, and make the broken one look more like the working one? Can you experiment with it a little bit further? Can you make the flickable be a direct child of the page somehow? (ie, is it possible to just have one flickable child and then change the content it displays, rather than trying to re-parent the flickable object to the page). Does that make sense?

These changes are looking really good, I'm excited to merge them, but I don't want to regress on this flickable bug since we already fixed it in friends-app back in July according to that bug you linked.

[Kai Mast (kai-mast)]

well the difference is that one uses Tabs and one doesn't. I simplified the code here: http://pastebin.com/ithdANaQ
What I don't understand is that the flickable is handled correctly (the header hides) but the content is not clipped even though I set "clip: true".
I'll ask some of the QML/SDK "gurus". Maybe they can help.

For now, we could also set "flickable: null", so the behaviour would be the same as on trunk.

Keep in mind that this is just the first change. With the images branch (that is already mostly finished except for some convergence stuff) this will even look nicer ;)

[Ken VanDine (ken-vandine)]

I just noticed the Tab usage doesn't include a page. The Tab expects the Page to be set to "page", not just declared there. So I think what's happening here is the flickable isn't properly trickling up the stack.

Something like this:

Tabs {
  Tab {
    page: Feed {
    }
}

[lp:~kai-mast/friends-app/new-postview]

139. By Kai Mast on 2014-01-23

Fixed clipping

[Kai Mast (kai-mast)]

You were right Ken!

So the Feed is a page now and we push the Tabs directly on the PageStack (was wrapped in a Page before). This resolved the clipping issue.

One small problem is left: When you jump to the top the header reappears and you are not completely at the top. There is no way to fix this right now. We need a way to reveal the header first and then jump to the top which is not possible right now.

But I think it looks really good now and is mergeable.

[Robert Bruce Park (robru)]

Ok, this is looking really good to me now. I can't find anything wrong with it. Thanks!

review: Approve

=== modified file 'friends-app.pro'
--- friends-app.pro	2013-04-08 14:56:46 +0000
+++ friends-app.pro	2014-01-23 12:09:15 +0000
@@ -24,3 +24,5 @@
 INSTALLS += accounts
 
 SUBDIRS += src qml po tests
+
+
 
=== added file 'qml/AvatarImage.qml'
--- qml/AvatarImage.qml	1970-01-01 00:00:00 +0000
+++ qml/AvatarImage.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,29 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+UbuntuShape {
+    id: avatarImage
+    height: units.dp(48)
+    width: units.dp(48)
+
+    // We can only specify top margin, as this is displayed in a Row element
+    anchors {
+        topMargin: units.gu(1)
+        top: parent.top
+    }
+
+    image: Image {
+        source: Qt.resolvedUrl(avatar)
+        asynchronous: true
+        smooth: true
+        fillMode: Image.PreserveAspectCrop
+        sourceSize.width: units.dp(48)
+    }
+
+    MouseArea {
+        anchors.fill: avatarImage
+        onClicked: {
+            Qt.openUrlExternally(url);
+        }
+    }
+}
 
=== renamed file 'qml/StatusUpdateTileDetails.qml' => 'qml/ConversationDetails.qml'
--- qml/StatusUpdateTileDetails.qml	2013-08-20 15:17:54 +0000
+++ qml/ConversationDetails.qml	2014-01-23 12:09:15 +0000
@@ -22,7 +22,11 @@
 
 Item {
     id: details
-    height: visible ? childrenRect.height + units.gu(1) : 0
+    height: childrenRect.height + units.gu(1)
+
+    function isMicroblogging() {
+        return (service === "twitter") || (service === "identica")
+    }
 
     FriendsDispatcher {
         id: friends
@@ -41,12 +45,18 @@
 
     Item {
         id: pictureWrapper
-        anchors.right: parent.right
+
+        anchors {
+            right: parent.right
+            top: parent.top
+        }
+
         width: parent.width - units.gu(8)
         height: childrenRect.height
 
         Image {
             id: pictureImage
+            anchors.fill: parent
             visible: linkPicture.length > 0 && status == Image.Ready
             source: Qt.resolvedUrl(linkPicture)
             asynchronous: true
@@ -73,9 +83,9 @@
         anchors.top: pictureWrapper.bottom
         source: {
             return "http://open.mapquestapi.com/staticmap/v4/getmap?size=" +
-                Math.round(Math.min(parent.width * 0.8, units.gu(20))) + "," +
-                Math.round(Math.min(parent.width * 0.8, units.gu(20))) +
-                "&zoom=12&center=" + latitude + "," + longitude
+                    Math.round(Math.min(parent.width * 0.8, units.gu(20))) + "," +
+                    Math.round(Math.min(parent.width * 0.8, units.gu(20))) +
+                    "&zoom=12&center=" + latitude + "," + longitude
 
         }
         visible: location.length > 0
@@ -84,7 +94,6 @@
     ThreadView {
         id: threadView
         width: parent.width
-        height: childrenRect.height
 
         anchors {
             top: mapimage.bottom
@@ -94,117 +103,46 @@
     }
 
     Item {
-        id: entry
-        property var lastCursorPosition
-        height: childrenRect.height
+        id: bottom
         anchors {
+            left: parent.left
+            right: parent.right
             top: threadView.bottom
-            left: parent.left
-            right: parent.right
-            topMargin: units.gu(2)
         }
 
-        TextArea {
-            id: entryArea
+        height: childrenRect.height
+
+        ReplyArea {
+            id: replyArea
+
             anchors {
+                top: parent.top
                 left: parent.left
-                leftMargin: units.gu(2)
-                right: sendButton.left
-                rightMargin: units.gu(1)
-                bottomMargin: units.gu(1.5)
-            }
-            // send message if return was pressed
-            Keys.onReturnPressed: sendButton.clicked(null)
-            Keys.onEscapePressed: text = ""
-            height: units.gu(4)
-            placeholderText: i18n.tr("Reply")
-            autoSize: true
-            maximumLineCount: 0
-            color: text.length < 140 ? "gray" : "red"
-            textFormat: TextEdit.PlainText
-            contentWidth: width - units.gu(5)
-            onActiveFocusChanged: {
-                if (activeFocus) {
-                    if (service == "twitter" || service == "identica") {
-                        if (entryArea.text.search("@"+senderNick) == -1) {
-                            entryArea.text = "@"+senderNick+" ";
-                            cursorPosition = text.length;
-                        }
-                    }
-                }
-            }
-
-            onTextChanged: {
-                var enteredText = text.substring(entry.lastCursorPosition, cursorPosition);
-                if (enteredText.substring(0,4) == "http") {
-                    var shortUrl = friends.urlShorten(enteredText);
-                    if (shortUrl.length > 4) {
-                        text = text.replace (enteredText, shortUrl);
-                        cursorPosition = text.length;
-                    }
-                }
-                entry.lastCursorPosition = cursorPosition;
-            }
-
-            Item {
-                id: counter
-                anchors {
-                    right: entryArea.right
-                    top: entryArea.top
-                    rightMargin: units.gu(1)
-                }
-                height: units.gu(4)
-                width: childrenRect.width
-                visible: entryArea.text.length > 0 ? true : false
-                Text {
-                    text: 140 - entryArea.text.length
-                    font.bold: true
-                    opacity: 0.3
-                }
-            }
-            Button {
-                id: clearButton
-                anchors {
-                    right: entryArea.right
-                    bottom: entryArea.bottom
-                    rightMargin: units.gu(1)
-                }
-                width: units.gu(2)
-                height: units.gu(2)
-                visible: entryArea.text.length > 0 ? true : false
-                iconSource: "images/clear-search.png"
-                color: "transparent"
-                opacity: 0.3
-                onClicked: {
-                    entryArea.text = "";
-                }
+                right: parent.right
+                topMargin: units.gu(2)
             }
         }
 
+        // Back button (much faster than using the toolbar)
+        // At the bottom so it doesn't steal any space (content is flickable)
         Button {
-            id: sendButton
+            id: returnButton
+
             anchors {
+                top: replyArea.bottom
+                left: parent.left
                 right: parent.right
-                rightMargin: units.gu(1)
-                bottom: entryArea.bottom
+                margins: units.gu(5)
             }
-            width: units.gu(9)
-            height: units.gu(4)
-            text: i18n.tr("Send")
-            color: main.headerColor
+
+            text: i18n.tr("Return to feed")
+
+            height: units.gu(6)
+
             onClicked: {
-                console.log ("Reply to " + messageId + " from " + accountId + ": " + entryArea.text);
-                sendSpinner.visible = true
-                friends.sendReplyAsync(accountId, messageId, entryArea.text);
+                conversationPage.close()
             }
         }
-
-        ActivityIndicator {
-            id: sendSpinner
-            anchors.centerIn: entryArea
-            visible: false
-            running: visible
-        }
     }
 
     Component {
 
=== added file 'qml/ConversationPage.qml'
--- qml/ConversationPage.qml	1970-01-01 00:00:00 +0000
+++ qml/ConversationPage.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,111 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Page {
+    title: i18n.tr("Conversation")
+    id: conversationPage
+
+    flickable: content
+
+    function setContent(tile) {
+        this.tile = tile
+
+        //Assign all values of the tile to the conversation page
+        //This way we can have one page for all tiles
+        liked = tile.liked
+        likeCount = tile.likeCount
+        fromMe = tile.fromMe
+        service = tile.service
+        linkUrl = tile.linkUrl
+        linkName = tile.linkName
+        linkDescription = tile.linkDescription
+        avatar = tile.avatar
+        message = tile.message
+        timeString = tile.timeString
+        location = tile.location
+        sender = tile.sender
+        linkPicture = tile.linkPicture
+        latitude = tile.latitude
+        longitude = tile.longitude
+        messageId = tile.messageId
+        stream = tile.stream
+        senderNick = tile.senderNick
+        url = tile.url
+    }
+
+    //Forward properties from StatusUpdateTile
+    property bool liked
+    property int likeCount
+    property bool fromMe
+    property string service
+    property string linkUrl
+    property string linkName
+    property string linkDescription
+    property variant avatar
+    property string message
+    property variant tile
+    property string timeString
+    property string location
+    property string sender
+    property string linkPicture
+    property int latitude
+    property int longitude
+    property string messageId
+    property string stream
+    property string senderNick
+    property string url
+
+    function close() {
+        main.closeConversation();
+    }
+
+    Flickable {
+        id: content
+
+        anchors {
+            fill: parent
+            margins: units.gu(2)
+        }
+
+        contentHeight: column.height
+
+        flickableDirection: Flickable.VerticalFlick
+        boundsBehavior: Flickable.DragOverBounds
+
+        // Looks much nicer on broad displays
+        width: Math.min(parent.width, units.gu(80))
+
+        Column {
+            id: column
+
+            width: parent.width
+            height: childrenRect.height
+
+            Row {
+                width: parent.width
+                spacing: units.gu(1)
+
+                AvatarImage {
+                    id: avatarImage
+                }
+
+                StatusUpdateContent {
+                    id: statusUpdateContent
+
+                    width: parent.width - avatarImage.width
+                    showDetails: true
+                }
+            }
+
+            ConversationDetails {
+                width: parent.width
+
+                id: details
+            }
+        }
+
+    }
+    Keys.onEscapePressed: {
+        conversationPage.close()
+    }
+}
 
=== added file 'qml/EntryField.qml'
--- qml/EntryField.qml	1970-01-01 00:00:00 +0000
+++ qml/EntryField.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,119 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Item {
+    id: entryField
+
+    onVisibleChanged: {
+        if(visible)
+            entryArea.forceActiveFocus()
+    }
+
+    property var lastCursorPosition
+    anchors.fill: parent
+
+    function setText(text) {
+        entryArea.text = text + " "
+        entryArea.cursorPosition = text.length + 1
+    }
+
+    TextArea {
+        id: entryArea
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            leftMargin: units.gu(1)
+            right: sendButton.left
+            rightMargin: units.gu(1)
+        }
+
+        // send message if return was pressed
+        Keys.onReturnPressed: sendButton.clicked(null)
+        Keys.onEscapePressed: text = ""
+        height: units.gu(4)
+        placeholderText: i18n.tr("Reply")
+        autoSize: true
+        maximumLineCount: 0
+        color: text.length < 140 ? "gray" : "red"
+        textFormat: TextEdit.PlainText
+        contentWidth: width - units.gu(5)
+
+        onTextChanged: {
+            var enteredText = text.substring(entryField.lastCursorPosition, cursorPosition);
+            if (enteredText.substring(0,4) == "http") {
+                var shortUrl = friends.urlShorten(enteredText);
+                if (shortUrl.length > 4) {
+                    text = text.replace (enteredText, shortUrl);
+                    cursorPosition = text.length;
+                }
+            }
+            entryField.lastCursorPosition = cursorPosition;
+        }
+
+        Item {
+            id: counter
+            anchors {
+                right: entryArea.right
+                top: entryArea.top
+                rightMargin: units.gu(1)
+            }
+            height: units.gu(4)
+            width: childrenRect.width
+
+            visible: (isMicroblogging() && entryArea.text.length > 0) ? true : false
+            Text {
+                text: 140 - entryArea.text.length
+                font.bold: true
+                opacity: 0.3
+            }
+        }
+    }
+
+    Button {
+        id: sendButton
+
+        anchors {
+            right: parent.right
+            rightMargin: units.gu(1)
+            top: parent.top
+        }
+
+        width: units.gu(9)
+        height: units.gu(4)
+        text: i18n.tr("Send")
+        color: main.headerColor
+        onClicked: {
+            console.log ("Reply to " + messageId + " from " + accountId + ": " + entryArea.text);
+            sendSpinner.visible = true
+            friends.sendReplyAsync(accountId, messageId, entryArea.text);
+        }
+    }
+    Button {
+        id: clearButton
+
+        anchors {
+            right: parent.right
+            top: sendButton.bottom
+            rightMargin: units.gu(1)
+            topMargin: units.gu(1)
+        }
+
+        height: sendButton.height
+        width: sendButton.width
+        iconSource: "images/clear-search.png"
+        color: main.headerColor
+
+        onClicked: {
+            entryArea.text = ""
+            entryField.visible = false
+        }
+    }
+
+    ActivityIndicator {
+        id: sendSpinner
+        anchors.centerIn: entryArea
+        visible: false
+        running: visible
+    }
+}
 
=== added file 'qml/FavoriteIcon.qml'
--- qml/FavoriteIcon.qml	1970-01-01 00:00:00 +0000
+++ qml/FavoriteIcon.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,50 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Row {
+    id: favorite
+
+    height: favoriteIcon.height + units.gu(1)
+    anchors {
+        left: parent.left
+        right: parent.right
+        bottomMargin: units.gu(1)
+    }
+    spacing: units.dp(3)
+
+    Image {
+        id: favoriteIcon
+        width: units.gu(3)
+        height: units.gu(3)
+        opacity: liked ? 1.0 : 0.1
+
+        source: "images/favorite.png"
+        asynchronous: true
+        MouseArea {
+            anchors.fill: favoriteIcon
+            onClicked: {
+                favoriteSpinner.visible = true;
+                if (liked) {
+                    friends.unlikeAsync(accountId, messageId);
+                }
+                else {
+                    friends.likeAsync(accountId, messageId);
+                }
+            }
+        }
+        ActivityIndicator {
+            id: favoriteSpinner
+            anchors.centerIn: parent
+            width: parent.width
+            visible: false
+            running: visible
+        }
+    }
+
+    Label {
+        id: likesLabel
+        text: (likeCount > 0) ? likeCount + " " + likesString : ""
+        fontSize: "small"
+        color: Theme.palette.normal.baseText
+    }
+}
 
=== modified file 'qml/Feed.qml'
--- qml/Feed.qml	2013-11-03 10:35:46 +0000
+++ qml/Feed.qml	2014-01-23 12:09:15 +0000
@@ -21,9 +21,15 @@
 import Ubuntu.Components.ListItems 0.1 as ListItem
 import Friends 0.2
 
-Tab {
+Page {
+    anchors.fill: parent
+    clip: true
+
+    property alias flickable: listView
+
     property alias stream: streamModel.stream
-    property int unseen: 0
+    property alias service: streamModel.service
+
     property string search
 
     /* Jump to the bottom of the view and set the currentIndex */
@@ -38,12 +44,8 @@
         listView.currentIndex = 0;
     }
 
-    onUnseenChanged: {
-        updatesText.text = unseen == 1 ? (unseen + i18n.tr(" new update")) : (unseen + i18n.tr(" new updates"));
-    }
-
     Component.onCompleted: {
-        listView.focus = true;
+        listView.focus = true
     }
 
     Timer {
@@ -57,18 +59,12 @@
         id: statusDelegate
 
         ListItem.Empty {
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
             height: content.height
 
             StatusUpdateTile {
                 id: content
                 height: childrenRect.height
-                ListView.onAdd: SequentialAnimation {
-                    ScriptAction { script: {unseen++; console.log(column_0[0][0] + " " + column_0[0][1] + " " + column_0[0][2]) }}
-                }
+
                 Connections {
                     target: updateTimestampsTimer
                     onTriggered: {
@@ -84,23 +80,12 @@
         objectName: "streamModel"
     }
 
-    onStreamChanged: {
-        console.log("stream changed to " + stream);
-        streamModel.stream = stream;
-    }
-
-    onSearchChanged: {
-        console.log ("onSearchChanged");
-    }
-
     RefreshBar {
         id: refreshBar
 
-        anchors.top: parent.top
-        anchors.topMargin: units.gu(1)
+        opacity: visible ? 1.0 : 0.0
+        visible: listView.dragging && listView.onTop
 
-        opacity: 0
-        visible: opacity > 0 ? true : false
         Behavior on opacity {
             NumberAnimation { duration: 200; }
         }
@@ -109,13 +94,13 @@
     ListView {
         id: listView
         objectName: "listView"
-        height: parent.height - toolbar.height - units.gu(2)
-        width: parent.width
+
         anchors {
-            top: updatesBanner.bottom
-            topMargin: units.gu(1)
             fill: parent
         }
+
+        property bool onTop : listView.contentY <= -main.header.height
+
         opacity: 1
         spacing: units.gu(1)
         model: streamModel
@@ -128,6 +113,7 @@
 
         preferredHighlightBegin: 0
         preferredHighlightEnd: preferredHighlightBegin
+
         /* We need highlightRangeMode for keyboard navigation,
          * but it forces the page header to stay hidden
          * https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1201936
@@ -141,81 +127,37 @@
             }
         }
 
-        /* Ensure we collapse details when scrolling */
-        onFlickStarted: {
-            if (listView.currentItem.state != "List")
-                listView.currentItem.state = "List";
-        }
-
         /* Expand details on enter */
         Keys.onReturnPressed: {
-            if (listView.currentItem.state != "Details")
-            listView.currentItem.state = "Details";
-        }
-
-        /* Collapse details on escape */
-        Keys.onEscapePressed: {
-            if (listView.currentItem.state != "List")
-                listView.currentItem.state = "List";
+            listView.currentItem.showConversation()
         }
 
         /* Handle home and end nav */
         Keys.onPressed: {
-            if (event.key == Qt.Key_Home) {
+            if (event.key === Qt.Key_Home) {
                 jumpToTop();
             }
-            else if (event.key == Qt.Key_End) {
+            else if (event.key === Qt.Key_End) {
                 jumpToBottom();
             }
         }
-
-        onDragStarted: {
-            if (listView.atYBeginning)
-                refreshBar.opacity = 1.0;
-        }
-        onDragEnded: {
-            refreshBar.opacity = 0
-            if (refreshBar.refreshed) {
-                console.log ("Refreshed");
-                friends.refresh ();
-            }
-        }
-    }
-
-    Item {
-        id: updatesBanner
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        visible: unseen > 0
-        height: visible ? units.gu(3) : 0
-        Text {
-            id: updatesText
-            anchors {
-                centerIn: parent
-                bottom: parent.bottom
-            }
-            text: ""
-            font.family: "Ubuntu"
-            font.bold: true
-            font.pointSize: 12
-            color: Theme.palette.normal.baseText
-        }
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                unseen = 0;
-                updatesText.text = "";
-                updatesBanner.visible = false;
-                jumpToTop();
-            }
-        }
     }
 
     Scrollbar {
         flickableItem: listView
         align: Qt.AlignTrailing
     }
+
+
+    tools: ToolbarItems {
+        ToolbarButton {
+            action: topAction
+        }
+        ToolbarButton {
+            action: refreshAction
+        }
+        ToolbarButton {
+            action: postAction
+        }
+    }
 }
 
=== added file 'qml/FeedTab.qml'
--- qml/FeedTab.qml	1970-01-01 00:00:00 +0000
+++ qml/FeedTab.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,23 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Tab {
+    clip: true
+
+    //property alias flickable: feed.flickable
+
+    property string stream
+
+    function jumpToTop() {
+        feed.jumpToTop()
+    }
+
+    page: feed
+
+    Feed {
+        anchors.fill: parent
+
+        id: feed
+        stream: parent.stream
+    }
+}
 
=== added file 'qml/FeedTabs.qml'
--- qml/FeedTabs.qml	1970-01-01 00:00:00 +0000
+++ qml/FeedTabs.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,25 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Tabs {
+    id: feedTabs
+    clip: true
+
+    function jumpToTop() {
+        feedTabs.selectedTab.jumpToTop()
+    }
+
+    FeedTab {
+        id: timeline
+
+        title: i18n.tr("Timeline")
+        stream: "" //all
+    }
+
+    FeedTab {
+        id: mentions
+
+        title: i18n.tr("Mentions")
+        stream: "mentions"
+    }
+}
 
=== added file 'qml/LinkDescription.qml'
--- qml/LinkDescription.qml	1970-01-01 00:00:00 +0000
+++ qml/LinkDescription.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,20 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+// Show the description link of a status update (if any)
+// Should only be used by StatusUpdateContent
+Label {
+    id: linkDesc
+
+    anchors {
+        right: parent.right
+        left: parent.left
+    }
+
+    text: linkDescription
+    elide: Text.ElideRight
+    visible: linkDescription.length > 0
+    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+    textFormat: Text.StyledText
+    onLinkActivated: Qt.openUrlExternally(link)
+}
 
=== added file 'qml/LinkItem.qml'
--- qml/LinkItem.qml	1970-01-01 00:00:00 +0000
+++ qml/LinkItem.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,24 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+// Show link of a status update (if any)
+// Should only be used by StatusUpdateContent
+UbuntuShape {
+    height: linkNameShape.height + units.gu(1)
+    width: linkNameShape.width + units.gu(2)
+    visible: linkName.length > 0
+    Label {
+        id: linkNameShape
+        anchors.centerIn: parent
+        text: linkName
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (linkUrl.length > 0)
+                Qt.openUrlExternally(linkUrl);
+
+        }
+    }
+}
 
=== added file 'qml/LocationItem.qml'
--- qml/LocationItem.qml	1970-01-01 00:00:00 +0000
+++ qml/LocationItem.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,25 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+// Show location information of a status update (if any)
+// Should only be used by StatusUpdateContent
+UbuntuShape {
+    height: locationName.height + units.gu(1)
+    width: locationName.width + units.gu(2)
+    visible: location.length > 0
+    Label {
+        id: locationName
+        anchors.centerIn: parent
+        text: location
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (url.length > 0)
+            {
+                Qt.openUrlExternally(url);
+            }
+        }
+    }
+}
 
=== modified file 'qml/Post.qml'
--- qml/Post.qml	2013-12-12 18:08:32 +0000
+++ qml/Post.qml	2014-01-23 12:09:15 +0000
@@ -236,7 +236,21 @@
                     ListItem.Standard {
                         text: displayName
                         opacity: sw.checked ? 1.0 : 0.3
+<<<<<<< TREE
                         iconName: accountIcon
+=======
+
+                        Component.onCompleted: {
+                            //this fixes height if no icon can be found
+                            if(icon) {
+                                height = icon.height
+                            }
+                        }
+
+                        //Show no icon if none is available
+                        iconSource: iconName.length > 0 ? "image://gicon/"+iconName : ""
+
+>>>>>>> MERGE-SOURCE
                         control: CheckBox {
                             id: sw
                             checked: sendEnabled
 
=== modified file 'qml/RefreshBar.qml'
--- qml/RefreshBar.qml	2013-08-05 17:39:52 +0000
+++ qml/RefreshBar.qml	2014-01-23 12:09:15 +0000
@@ -21,6 +21,9 @@
 Item {
     height: units.gu(4)
     anchors {
+        topMargin: main.header.height + units.gu(1) // show it below the header
+
+        top: parent.top
         left: parent.left
         right: parent.right
     }
 
=== added file 'qml/RepeatIcon.qml'
--- qml/RepeatIcon.qml	1970-01-01 00:00:00 +0000
+++ qml/RepeatIcon.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,43 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Item {
+    id: repeatIcon
+
+    anchors {
+        right: parent.right
+        bottom: parent.bottom
+        rightMargin: units.gu(2)
+        bottomMargin: units.gu(1)
+    }
+
+    height: fromMe ? 0 : childrenRect.height
+
+    // FIXME: Use features API instead
+    visible: showDetails &&
+             (service == "twitter" || service == "identica") && !fromMe && stream !== "private"
+
+    Image {
+        id: repeatIconImage
+        width: units.gu(3)
+        height: units.gu(3)
+        source: "images/share.png"
+        asynchronous: true
+        visible: retweetSpinner.visble ? false : true
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                console.log ("Retweeting " + messageId + " from " + accountId);
+                retweetSpinner.visible = true
+                friends.retweetAsync(accountId, messageId);
+            }
+        }
+        ActivityIndicator {
+            id: retweetSpinner
+            anchors.centerIn: parent
+            //width: parent.width
+            visible: false
+            running: visible
+        }
+    }
+}
 
=== added file 'qml/ReplyArea.qml'
--- qml/ReplyArea.qml	1970-01-01 00:00:00 +0000
+++ qml/ReplyArea.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,77 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+// This element shows either the reply/reply all buttons
+// Or a field to compose the reply
+Item {
+    id: replyArea
+    height: units.gu(4)
+
+    Button {
+        id: replyButton
+        visible: !entryField.visible
+        width: units.gu(10)
+
+        anchors {
+            leftMargin: units.gu(5)
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        text: isMicroblogging() ? i18n.tr("Reply"): i18n.tr("Comment")
+
+        property var lastCursorPosition
+        height: childrenRect.height
+
+        onClicked : {
+            entryField.visible = true
+
+            if(isMicroblogging())
+                entryField.setText("@"+senderNick)
+        }
+    }
+
+    Button {
+        id: replyAllButton
+
+        // Only show if we are using micrblogging.
+        visible: !entryField.visible && isMicroblogging()
+        width: replyButton.width
+
+        anchors {
+            left: replyButton.right
+            leftMargin: units.gu(1)
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        text: i18n.tr("Reply All")
+
+        property var lastCursorPosition
+        height: childrenRect.height
+
+        onClicked : {
+            entryField.visible = true
+
+            if(isMicroblogging()) {
+                var text = "@"+senderNick;
+
+                var nicks = message.match(/[@][\w]+/g);
+
+                if (nicks !== null) {
+                    for(var i = 0; i < nicks.length; ++i) {
+                        text += " " + nicks[i];
+                    }
+                }
+
+                entryField.setText(text)
+            }
+        }
+    }
+
+    EntryField {
+        id: entryField
+        visible: false
+    }
+}
 
=== added file 'qml/SenderAndTimeItem.qml'
--- qml/SenderAndTimeItem.qml	1970-01-01 00:00:00 +0000
+++ qml/SenderAndTimeItem.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,36 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+// Shows sender and time of a status update
+// Should only be used by StatusUpdateContent
+Item {
+    anchors {
+        left: parent.left
+        right: parent.right
+        rightMargin: units.gu(1)
+    }
+    height: childrenRect.height
+
+    Label {
+        text: sender
+        fontSize: "medium"
+        font.bold: true
+
+        anchors {
+            left: parent.left
+            right: time.left
+        }
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+    }
+
+    Label {
+        id: time
+        anchors {
+            right: parent.right
+        }
+
+        text: timeString
+        fontSize: "small"
+        color: Theme.palette.normal.baseText
+    }
+}
 
=== added file 'qml/StatusUpdateContent.qml'
--- qml/StatusUpdateContent.qml	1970-01-01 00:00:00 +0000
+++ qml/StatusUpdateContent.qml	2014-01-23 12:09:15 +0000
@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Column {
+    property bool showDetails: false
+    spacing: units.gu(1)
+    anchors.margins: units.gu(1)
+
+    SenderAndTimeItem {
+    }
+
+    Label {
+        id: messageText
+        anchors {
+            right: parent.right
+            left: parent.left
+        }
+        text: message
+
+        elide: Text.ElideRight
+        visible: message.length > 0 && message != linkDescription
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        textFormat: Text.StyledText
+        linkColor: Theme.palette.normal.baseText
+        onLinkActivated: Qt.openUrlExternally(link)
+    }
+
+    LocationItem {
+    }
+
+    LinkItem {
+    }
+
+    LinkDescription {
+    }
+
+    FavoriteIcon {
+        id: favorite
+    }
+
+    RepeatIcon {
+        id: repeatIcon
+    }
+}
 
=== modified file 'qml/StatusUpdateTile.qml'
--- qml/StatusUpdateTile.qml	2013-08-28 19:04:36 +0000
+++ qml/StatusUpdateTile.qml	2014-01-23 12:09:15 +0000
@@ -25,9 +25,32 @@
     id: tile
     anchors {
         left: parent.left
-        right: parent.right        
-    }
-    property real detailsOpacity : 0
+        right: parent.right
+    }
+
+    //Forward properties
+    property bool liked : liked
+    property bool fromMe: fromMe
+    property string message: model.message
+    property string service: model.service
+    property string linkUrl: model.linkUrl
+    property string linkName: model.linkName
+    property string linkDescription: model.linkDescription
+    property string avatar: model.avatar
+    property string location: model.location
+    property string sender: model.sender
+    property string linkPicture: model.linkPicture
+    property int latitude: model.latitude
+    property int longitude: model.longitude
+    property string messageId: model.messageId
+    property string stream: model.stream
+    property string senderNick: model.senderNick
+    property string url: model.url
+
+    function showConversation() {
+        main.addConversation(tile)
+    }
+
     property string timeString: friendsUtils.createTimeString(timestamp)
     property int likeCount: likes > 0 ? likes : liked ? 1 : 0
     property string likesString: likeCount > 1 ? i18n.tr("people liked this") : i18n.tr("person liked this")
@@ -42,8 +65,10 @@
         anchors {
             right: parent.right
             left: parent.left
+            leftMargin: units.gu(1)
         }
-        height: status_update_content.height + detailsWrapper.height
+
+        height: childrenRect.height + units.gu(1)
 
         FriendsUtils {
             id: friendsUtils
@@ -61,46 +86,24 @@
             }
             onUnlikeComplete: {
                 favoriteSpinner.visible = false;
-                 if (success) {
-                     console.log ("Like succeeded");
-                 } else {
-                     console.log ("UnLike failed: " + errorMessage);
-                 }
-             }
+                if (success) {
+                    console.log ("Like succeeded");
+                } else {
+                    console.log ("UnLike failed: " + errorMessage);
+                }
+            }
             onRetweetComplete: {
                 retweetSpinner.visible = false;
                 if (success) {
-                     console.log ("Retweet completed successfully");
+                    console.log ("Retweet completed successfully");
                 } else {
-                     console.log ("Retweet failed: " + errorMessage);
+                    console.log ("Retweet failed: " + errorMessage);
                 }
-             }
+            }
         }
 
-        UbuntuShape {
+        AvatarImage {
             id: avatarImage
-            height: units.dp(48)
-            width: units.dp(48)
-            anchors {
-                left: parent.left
-                top: parent.top
-                leftMargin: units.gu(1)
-                topMargin: units.gu(1)
-            }
-            image: Image {
-                source: Qt.resolvedUrl(avatar)
-                asynchronous: true
-                smooth: true
-                fillMode: Image.PreserveAspectCrop
-                sourceSize.width: units.dp(48)
-            }
-
-            MouseArea {
-                anchors.fill: avatarImage
-                onClicked: {
-                    Qt.openUrlExternally(url);
-                }
-            }
         }
 
         Image {
@@ -113,7 +116,7 @@
             }
             source: "images/private.png"
             asynchronous: true
-            visible: stream == "private"
+            visible: stream === "private"
         }
 
         Image {
@@ -126,14 +129,14 @@
             }
             source: "images/replies.png"
             asynchronous: true
-            visible: stream == "mentions"
+            visible: stream === "mentions"
         }
 
         Image {
             id: serviceIcon
             anchors {
                 left: parent.left
-                bottom: status_update_content.bottom
+                bottom: statusUpdateContent.bottom
                 topMargin: units.gu(1)
                 leftMargin: units.gu(1)
                 bottomMargin: units.gu(1)
@@ -145,269 +148,20 @@
             smooth: true
         }
 
-        Item {
-            id: status_update_content
+        StatusUpdateContent {
+            id: statusUpdateContent
             anchors {
                 left: avatarImage.right
                 right: parent.right
                 top: parent.top
-                topMargin: units.gu(1)
-                leftMargin: units.gu(1)
-                bottomMargin: units.gu(1)
-                rightMargin: units.gu(1)
-            }
-            height: childrenRect.height
-
-            MouseArea {
-                anchors.fill: status_update_content
-                onClicked: {
-                    if (tile.state != 'Details') {
-                        tile.state = 'Details';
-                    } else {
-                        tile.state = 'List';
-                    }
-                }
-            }
-
-            Column {
-                spacing: units.gu(1)
-                anchors {
-                    left: parent.left;
-                    right: parent.right
-                    bottomMargin: units.gu(2)
-                }
-                Item {
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        rightMargin: units.gu(1)
-                    }
-                    height: childrenRect.height
-                    Label {
-                        text: sender
-                        fontSize: "medium"
-                        font.bold: true
-                        anchors {
-                            left: parent.left
-                            right: time.left
-                        }
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    }
-                    Label {
-                        id: time
-                        anchors {
-                            right: parent.right
-                        }
-
-                        text: timeString
-                        fontSize: "small"
-                        color: Theme.palette.normal.baseText
-                    }
-                }
-
-                Label {
-                    id: messageText
-                    anchors {
-                        right: parent.right
-                        left: parent.left
-                    }
-                    text: message
-                    maximumLineCount: tile.state != 'Details' ? 10 : 0
-                    elide: Text.ElideRight
-                    visible: message.length > 0 && message != linkDescription
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    textFormat: Text.StyledText
-                    linkColor: Theme.palette.normal.baseText
-                    onLinkActivated: Qt.openUrlExternally(link)
-                }
-                UbuntuShape {
-                    height: locationName.height + units.gu(1)
-                    width: locationName.width + units.gu(2)
-                    visible: location.length > 0
-                    Label {
-                        id: locationName
-                        anchors.centerIn: parent
-                        text: location
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            if (url.length > 0)
-                            {
-                                Qt.openUrlExternally(url);
-                            }
-                        }
-                    }
-                }
-                UbuntuShape {
-                    height: linkNameShape.height + units.gu(1)
-                    width: linkNameShape.width + units.gu(2)
-                    visible: linkName.length > 0
-                    Label {
-                        id: linkNameShape
-                        anchors.centerIn: parent
-                        text: linkName
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            if (linkUrl.length > 0)
-                                Qt.openUrlExternally(linkUrl);
-
-                        }
-                    }
-                }
-                Label {
-                    id: linkDesc
-                    anchors {
-                        right: parent.right
-                        left: parent.left
-                    }
-                    text: linkDescription
-                    maximumLineCount: tile.state != 'Details' ? 10 : 0
-                    elide: Text.ElideRight
-                    visible: linkDescription.length > 0
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    //width: parent.width - units.gu(3)
-                    textFormat: Text.StyledText
-                    onLinkActivated: Qt.openUrlExternally(link)
-                }
-
-                Row {
-                    id: favorite
-                    height: favoriteIcon.height + units.gu(1)
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        bottomMargin: units.gu(1)
-                    }
-                    spacing: units.dp(3)
-                    Image {
-                        id: favoriteIcon
-                        width: units.gu(3)
-                        height: units.gu(3)
-                        opacity: liked ? 1.0 : 0.1
-
-                        source: "images/favorite.png"
-                        asynchronous: true
-                        MouseArea {
-                            anchors.fill: favoriteIcon
-                            onClicked: {
-                                favoriteSpinner.visible = true;
-                                if (liked) {
-                                    friends.unlikeAsync(accountId, messageId);
-                                }
-                                else {
-                                    friends.likeAsync(accountId, messageId);
-                                }
-                            }
-                        }
-                        ActivityIndicator {
-                            id: favoriteSpinner
-                            anchors.centerIn: parent
-                            width: parent.width
-                            visible: false
-                            running: visible
-                        }
-                    }
-                    Label {
-                        id: likesLabel
-                        text: (likeCount > 0) ? likeCount + " " + likesString : ""
-                        fontSize: "small"
-                        color: Theme.palette.normal.baseText
-                    }
-                }
-
-                Item {
-                    id: repeatIcon
-                    anchors {
-                        right: parent.right
-                        bottom: parent.bottom
-                        rightMargin: units.gu(2)
-                        bottomMargin: units.gu(1)
-                    }
-
-                    opacity: detailsOpacity
-                    height: fromMe ? 0 : childrenRect.height
-                    // FIXME: Use features API instead
-                    visible: (service == "twitter" || service == "identica") && !fromMe && stream != "private"
-                    Image {
-                        id: repeatIconImage
-                        width: units.gu(3)
-                        height: units.gu(3)
-                        source: "images/share.png"
-                        asynchronous: true
-                        visible: retweetSpinner.visble ? false : true
-                        MouseArea {
-                            anchors.fill: parent
-                            onClicked: {
-                                console.log ("Retweeting " + messageId + " from " + accountId);
-                                retweetSpinner.visible = true
-                                friends.retweetAsync(accountId, messageId);
-                            }
-                        }
-                        ActivityIndicator {
-                            id: retweetSpinner
-                            anchors.centerIn: parent
-                            //width: parent.width
-                            visible: false
-                            running: visible
-                        }
-                    }
-                }
-
-            }
-        }
-
-        Item {
-            id: detailsWrapper
-            height: detailsLoader.height + units.gu(1)
-            opacity: detailsOpacity
-            visible:  detailsOpacity > 0
-            anchors {
-                top: status_update_content.bottom
-                left: parent.left
-                right: parent.right
-            }
-
-            Loader {
-                id: detailsLoader
-                anchors {
-                    right: parent.right
-                    left: parent.left
-                }
-                visible: true
-            }
-
-            onVisibleChanged: {
-                if (visible && detailsLoader.state != Loader.Ready) {
-                    detailsLoader.source = "StatusUpdateTileDetails.qml";
-                }
-            }
-        }
-    }
-
-    states: [State {
-                name: "Details"
-                PropertyChanges { target: tile; detailsOpacity: 1; x: 0 }
-                StateChangeScript {
-                    script: {
-                        listView.positionViewAtIndex(listView.indexAt(tile.x, tile.y), ListView.Contain);
-                    }
-                }
-
-            },
-            State {
-                name: "List"
-                PropertyChanges { target: tile; detailsOpacity: 0; x: 0 }
-            }]
-
-
-    transitions: Transition {
-        NumberAnimation {
-            duration: 300; properties: "detailsOpacity,x,height,width"
+            }
+        }
+
+        MouseArea {
+            anchors.fill: statusUpdateContent
+            onClicked: {
+                showConversation();
+            }
         }
     }
 }
 
=== modified file 'qml/ThreadView.qml'
--- qml/ThreadView.qml	2013-08-20 15:17:54 +0000
+++ qml/ThreadView.qml	2014-01-23 12:09:15 +0000
@@ -3,9 +3,15 @@
 import Friends 0.2
 
 Item {
-    height: threadListView.height + pictureImage.height
+    id: threadView
+
+    height: threadListView.height
+
     width: parent.width
+
     anchors {
+        left: parent.left
+        right: parent.right
         bottomMargin: units.gu(2)
     }
 
@@ -14,102 +20,49 @@
         stream: "reply_to/"+messageId
     }
 
-
     FriendsUtils {
         id: friendsUtils
     }
 
     Column {
         id: threadListView
+        anchors {
+            left: parent.left
+            right: parent.right
+        }
+
         width: parent.width
+        height: childrenRect.height
+
         Repeater {
+            id: repeater
             width: parent.width
             model: streamModel
             delegate: Item {
                 id: threadItem
-                width: parent.width - units.gu(8)
+
                 anchors {
                     right: parent.right
-                    leftMargin: units.gu(8)
-                    rightMargin: units.gu(2)
+                    left: parent.left
+
+                    leftMargin: units.gu(4)
                     bottomMargin: units.gu(2)
                 }
-                height: status_update_content.height
-
-                UbuntuShape {
+
+                height: childrenRect.height
+
+                AvatarImage {
                     id: avatarImage
-                    radius: "small"
-                    height: units.dp(32)
-                    width: units.dp(32)
-                    anchors {
-                        left: parent.left
-                        top: parent.top
-                        leftMargin: units.gu(1)
-                        topMargin: units.gu(1)
-                    }
-                    image: Image {
-                        source: Qt.resolvedUrl(avatar)
-                        asynchronous: true
-                        fillMode: Image.PreserveAspectFit
-                    }
                 }
 
-                Item {
-                    id: status_update_content
+                StatusUpdateContent {
                     anchors {
                         left: avatarImage.right
                         right: parent.right
                         top: parent.top
-                        topMargin: units.gu(1)
-                        leftMargin: units.gu(1)
-                        bottomMargin: units.gu(1)
-                        rightMargin: units.gu(1)
-                    }
-                    width: parent.width - avatarImage.width
-                    height: childrenRect.height + units.gu(1)
-
-                    Column {
-                        width: parent.width
-                        spacing: 0
-                        anchors {
-                            left: parent.left;
-                            right: parent.right
-                            bottomMargin: units.gu(2)
-                        }
-                        Label {
-                            text: sender
-                            fontSize: "small"
-                            font.bold: true
-                            width: parent.width
-                        }
-                        Label {
-                            id: messageText
-                            text: message
-                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                            width: parent.width - units.gu(3)
-                            fontSize: "small"
-                            onLinkActivated: {
-                                console.log(link + " link activated");
-                                Qt.openUrlExternally(link);
-                            }
-                        }
-                    }
-                    Row {
-                        anchors.right: parent.right
-                        anchors.rightMargin: units.gu(1)
-                        anchors.top: parent.top
-                        spacing: units.gu(1)
-
-                        Text {
-                            id: time
-                            text: friendsUtils.createTimeString(timestamp)
-                            font.family: "Ubuntu"
-                            font.pointSize: 8
-                            color: Theme.palette.normal.baseText
-                        }
                     }
                 }
-            }
+           }
         }
     }
 }
 
=== modified file 'qml/friends-app.qml'
--- qml/friends-app.qml	2013-12-11 21:06:40 +0000
+++ qml/friends-app.qml	2014-01-23 12:09:15 +0000
@@ -19,9 +19,24 @@
 import Ubuntu.Components 0.1
 import Ubuntu.Unity.Action 1.0 as UnityActions
 import Ubuntu.OnlineAccounts 0.1
+import Ubuntu.Layouts 0.1
 import Friends 0.2
 
 MainView {
+    function addConversation(tile) {
+        conversationPage.setContent(tile)
+
+        pageStack.push(conversationPage)
+    }
+
+    function closeConversation() {
+        pageStack.pop()
+    }
+
+    function refresh() {
+        friends.refresh()
+    }
+
     id: main
     applicationName: "friends-app"
     // objectName for functional testing purposes (autopilot-qt5)
@@ -34,6 +49,8 @@
     backgroundColor: "#273d66"
     headerColor: "#395996"
 
+    property bool loaded: false
+
     property bool isPortrait: (height > width)
     property bool loaded: false
 
@@ -57,7 +74,7 @@
         id: topAction
         text: i18n.tr("Top")
         iconSource: ("images/go-top.png")
-        onTriggered: feedTabs.selectedTab.jumpToTop()
+        onTriggered: feedTabs.jumpToTop()
     }
 
     actions: [topAction, refreshAction, postAction]
@@ -87,12 +104,12 @@
         id: pageStack
 
         Component.onCompleted: {
-            console.log ("accounts.count: "+accounts.count);
-            pageStack.push(mainPage);
+            console.log ("accounts.count: "+accounts.count)
+
             if (accounts.count < 1)
-                pageStack.push(noAccountsPage);
-
-            loaded = true
+                pageStack.push(noAccountsPage)
+            else
+                pageStack.push(feedTabs)
         }
 
         Page {
@@ -126,47 +143,16 @@
             }
         }
 
-        Page {
-            id: mainPage
+        FeedTabs {
             visible: false
-
-            Tabs {
-                id: feedTabs
-
-                Feed {
-                    id: timeline
-                    title: i18n.tr("Timeline")
-
-                    stream: "" //all
-                }
-
-                Feed {
-                    id: mentions
-                    title: i18n.tr("Mentions")
-
-                    stream: "mentions"
-                }
-
-                /* The stream filter doesn't seem to work yet
-                TimeLine {
-                    id: privateMessages
-                    title: i18n.tr("Private")
-
-                    stream: "private"
-                }*/
-            }
-
-            tools: ToolbarItems {
-                ToolbarButton {
-                    action: topAction
-                }
-                ToolbarButton {
-                    action: refreshAction
-                }
-                ToolbarButton {
-                    action: postAction
-                }
-            }
+            id: feedTabs
+        }
+
+        // Pages cannot be nested so we have to work around this restriction
+        // See this bug for some infos: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1256420
+        ConversationPage {
+             visible: false
+             id: conversationPage
         }
     }
 }
 
=== modified file 'qml/qml.pro'
--- qml/qml.pro	2013-03-30 18:20:11 +0000
+++ qml/qml.pro	2014-01-23 12:09:15 +0000
@@ -13,5 +13,4 @@
 INSTALLS = install_resources
 
 OTHER_FILES += \
-    ThreadView.qml \
-    RefreshBar.qml
+    FeedTabs.qml