First steps to get a chat list on screen :)

harbour-fernschreiber.pro

@@ -15,6 +15,7 @@ TARGET = harbour-fernschreiber
 CONFIG += sailfishapp sailfishapp_i18n
 
 SOURCES += src/harbour-fernschreiber.cpp \
+    src/chatlistmodel.cpp \
     src/tdlibreceiver.cpp \
     src/tdlibwrapper.cpp
 
@@ -72,6 +73,7 @@ INSTALLS += telegram 86.png 108.png 128.png 172.png 256.png \
             fernschreiber.desktop gui images
 
 HEADERS += \
+    src/chatlistmodel.h \
     src/tdlibreceiver.h \
     src/tdlibsecrets.h \
     src/tdlibwrapper.h

qml/components/ImageThumbnail.qml

@@ -39,7 +39,7 @@ Item {
         Connections {
             target: tdLibWrapper
             onFileUpdated: {
-                if (id === imageData.id) {
+                if (fileId === imageData.id) {
                     console.log("File updated, completed? " + fileInformation.local.is_downloading_completed);
                     imageThumbnail.imageData = fileInformation;
                     if (imageThumbnail.imageData.local.is_downloading_completed) {
@@ -65,7 +65,7 @@ Item {
         width: parent.width - Theme.paddingSmall
         height: parent.height - Theme.paddingSmall
         color: Theme.primaryColor
-        radius: parent.width / 7
+        radius: parent.width / 2
         anchors.centerIn: singleImage
         visible: false
     }

qml/pages/OverviewPage.qml

@@ -22,7 +22,8 @@ import QtMultimedia 5.0
 import Sailfish.Silica 1.0
 import Nemo.Notifications 1.0
 import WerkWolf.Fernschreiber 1.0
-
+import "../components"
+import "../js/twemoji.js" as Emoji
 
 Page {
     id: overviewPage
@@ -119,7 +120,8 @@ Page {
 
     SilicaFlickable {
         id: aboutContainer
-        contentHeight: column.height
+        contentHeight: parent.height
+        contentWidth: parent.width
         anchors.fill: parent
         visible: !overviewPage.loading
 
@@ -133,9 +135,11 @@ Page {
         Column {
             id: column
             width: parent.width
-            spacing: Theme.paddingLarge
+            height: parent.height
+            spacing: Theme.paddingMedium
 
             Row {
+                id: headerRow
                 width: parent.width
 
                 GlassItem {
@@ -155,9 +159,159 @@ Page {
                 }
             }
 
+            SilicaListView {
+
+                id: chatListView
+
+                width: parent.width
+                height: parent.height - Theme.paddingMedium - headerRow.height
+
+                clip: true
+                visible: count > 0
+
+                model: chatListModel
+                delegate: ListItem {
+
+                    id: chatListItem
+
+                    contentHeight: chatListRow.height + chatListSeparator.height + 2 * Theme.paddingMedium
+                    contentWidth: parent.width
+
+                    onClicked: {
+                        // jump to chat details here... ;)
+                        // pageStack.push(Qt.resolvedUrl("../pages/ConversationPage.qml"), { "conversationModel" : display, "myUserId": overviewPage.myUser.id_str, "configuration": overviewPage.configuration });
+                    }
+
+                    Column {
+                        id: chatListColumn
+                        width: parent.width - ( 2 * Theme.horizontalPageMargin )
+                        spacing: Theme.paddingSmall
+                        anchors {
+                            horizontalCenter: parent.horizontalCenter
+                            verticalCenter: parent.verticalCenter
+                        }
+
+                        Row {
+                            id: chatListRow
+                            width: parent.width
+                            spacing: Theme.paddingMedium
+
+                            Column {
+                                id: chatListPictureColumn
+                                width: parent.width / 6
+                                height: parent.width / 6
+                                spacing: Theme.paddingSmall
+
+                                ImageThumbnail {
+                                    id: chatListPictureThumbnail
+                                    visible: display.photo
+                                    imageData: display.photo.small
+                                    width: parent.width
+                                    height: parent.width
+                                }
+                            }
+
+                            Column {
+                                id: chatListContentColumn
+                                width: parent.width * 5 / 6 - Theme.horizontalPageMargin
+
+                                spacing: Theme.paddingSmall
+
+                                Text {
+                                    id: chatListNameText
+                                    text: Emoji.emojify(display.title, Theme.fontSizeMedium)
+                                    textFormat: Text.StyledText
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: Theme.primaryColor
+                                    elide: Text.ElideRight
+                                    width: parent.width
+                                    onTruncatedChanged: {
+                                        // There is obviously a bug in QML in truncating text with images.
+                                        // We simply remove Emojis then...
+                                        if (truncated) {
+                                            text = text.replace(/\<img [^>]+\/\>/g, "");
+                                        }
+                                    }
+                                }
+
+                                Row {
+                                    id: chatListLastMessageRow
+                                    width: parent.width
+                                    spacing: Theme.paddingMedium
+                                    Text {
+                                        id: chatListLastUserText
+                                        text: Emoji.emojify("Unknown", Theme.fontSizeExtraSmall)
+                                        font.pixelSize: Theme.fontSizeExtraSmall
+                                        color: Theme.highlightColor
+                                        textFormat: Text.StyledText
+                                        onTruncatedChanged: {
+                                            // There is obviously a bug in QML in truncating text with images.
+                                            // We simply remove Emojis then...
+                                            if (truncated) {
+                                                text = text.replace(/\<img [^>]+\/\>/g, "");
+                                            }
+                                        }
+                                    }
+                                    Text {
+                                        id: chatListLastMessageText
+                                        text: Emoji.emojify("Unknown", Theme.fontSizeExtraSmall)
+                                        font.pixelSize: Theme.fontSizeExtraSmall
+                                        color: Theme.primaryColor
+                                        width: parent.width - Theme.paddingMedium - chatListLastUserText.width
+                                        elide: Text.ElideRight
+                                        textFormat: Text.StyledText
+                                        onTruncatedChanged: {
+                                            // There is obviously a bug in QML in truncating text with images.
+                                            // We simply remove Emojis then...
+                                            if (truncated) {
+                                                text = text.replace(/\<img [^>]+\/\>/g, "");
+                                            }
+                                        }
+                                    }
+                                }
+
+                                Timer {
+                                    id: messageContactTimeUpdater
+                                    interval: 60000
+                                    running: true
+                                    repeat: true
+                                    onTriggered: {
+                                        //messageContactTimeElapsedText.text = getConversationTimeElapsed(display.messages);
+                                    }
+                                }
+
+                                Text {
+                                    id: messageContactTimeElapsedText
+                                    //text: getConversationTimeElapsed(display.messages)
+                                    text: "somewhen"
+                                    font.pixelSize: Theme.fontSizeTiny
+                                    color: Theme.primaryColor
+                                }
+                            }
+                        }
+
+                    }
+
+                    Separator {
+                        id: chatListSeparator
+
+                        anchors {
+                            top: chatListColumn.bottom
+                            topMargin: Theme.paddingMedium
+                        }
+
+                        width: parent.width
+                        color: Theme.primaryColor
+                        horizontalAlignment: Qt.AlignHCenter
+                    }
+
+                }
+
                 VerticalScrollDecorator {}
             }
 
         }
 
+    }
+
 }

src/chatlistmodel.cpp

@@ -0,0 +1,41 @@
+#include "chatlistmodel.h"
+
+ChatListModel::ChatListModel(TDLibWrapper *tdLibWrapper)
+{
+    this->tdLibWrapper = tdLibWrapper;
+    connect(this->tdLibWrapper, SIGNAL(newChatDiscovered(QString, QVariantMap)), this, SLOT(handleChatDiscovered(QString, QVariantMap)));
+}
+
+ChatListModel::~ChatListModel()
+{
+
+}
+
+int ChatListModel::rowCount(const QModelIndex &) const
+{
+    return chatList.size();
+}
+
+QVariant ChatListModel::data(const QModelIndex &index, int role) const
+{
+    if(index.isValid() && role == Qt::DisplayRole) {
+        return QVariant(chatList.value(index.row()));
+    }
+    return QVariant();
+}
+
+bool ChatListModel::insertRows(int row, int count, const QModelIndex &parent)
+{
+    qDebug() << "[ChatListModel] Inserting at " << row << ", row count: " << count;
+    beginInsertRows(parent, rowCount(QModelIndex()), rowCount(QModelIndex()) + count - 1);
+    this->chatList.append(this->chatToBeAdded);
+    endInsertRows();
+    return true;
+}
+
+void ChatListModel::handleChatDiscovered(const QString &chatId, const QVariantMap &chatInformation)
+{
+    qDebug() << "[ChatListModel] Adding new chat " << chatId;
+    this->chatToBeAdded = chatInformation;
+    insertRows(rowCount(QModelIndex()), 1);
+}

src/chatlistmodel.h

@@ -0,0 +1,28 @@
+#ifndef CHATLISTMODEL_H
+#define CHATLISTMODEL_H
+
+#include <QAbstractListModel>
+#include <QDebug>
+#include "tdlibwrapper.h"
+
+class ChatListModel : public QAbstractListModel
+{
+    Q_OBJECT
+public:
+    ChatListModel(TDLibWrapper *tdLibWrapper);
+    ~ChatListModel() override;
+
+    virtual int rowCount(const QModelIndex&) const override;
+    virtual QVariant data(const QModelIndex &index, int role) const override;
+    virtual bool insertRows(int row, int count, const QModelIndex &parent = QModelIndex()) override;
+
+public slots:
+    void handleChatDiscovered(const QString &chatId, const QVariantMap &chatInformation);
+
+private:
+    TDLibWrapper *tdLibWrapper;
+    QVariantList chatList;
+    QVariantMap chatToBeAdded;
+};
+
+#endif // CHATLISTMODEL_H

src/harbour-fernschreiber.cpp

@@ -30,6 +30,7 @@
 #include <QGuiApplication>
 
 #include "tdlibwrapper.h"
+#include "chatlistmodel.h"
 
 int main(int argc, char *argv[])
 {
@@ -38,10 +39,13 @@ int main(int argc, char *argv[])
 
     QQmlContext *context = view.data()->rootContext();
 
-    TDLibWrapper tdLibWrapper;
+    TDLibWrapper *tdLibWrapper = new TDLibWrapper(view.data());
-    context->setContextProperty("tdLibWrapper", &tdLibWrapper);
+    context->setContextProperty("tdLibWrapper", tdLibWrapper);
     qmlRegisterType<TDLibWrapper>("WerkWolf.Fernschreiber", 1, 0, "TelegramAPI");
 
+    ChatListModel chatListModel(tdLibWrapper);
+    context->setContextProperty("chatListModel", &chatListModel);
+
     view->setSource(SailfishApp::pathTo("qml/harbour-fernschreiber.qml"));
     view->show();
     return app->exec();

src/tdlibwrapper.h

@@ -79,7 +79,7 @@ signals:
     void optionUpdated(const QString &optionName, const QVariant &optionValue);
     void connectionStateChanged(const TDLibWrapper::ConnectionState &connectionState);
     void fileUpdated(const int fileId, const QVariantMap &fileInformation);
-    void newChatDiscovered(const QString chatId, const QVariantMap &chatInformation);
+    void newChatDiscovered(const QString &chatId, const QVariantMap &chatInformation);
     void unreadMessageCountUpdated(const QVariantMap &messageCountInformation);
     void unreadChatCountUpdated(const QVariantMap &chatCountInformation);