Redesign sticker picker, fix one sticker reload bug

qml/components/StickerPicker.qml

@@ -25,14 +25,8 @@ Item {
     id: stickerPickerOverlayItem
     anchors.fill: parent
 
-    property var recentStickers
+    property var recentStickers: stickerManager.getRecentStickers();
-    property var installedStickerSets
+    property var installedStickerSets: stickerManager.getInstalledStickerSets();
-    property int setInRemoval: -1
-
-    Component.onCompleted: {
-        recentStickers = stickerManager.getRecentStickers();
-        installedStickerSets = stickerManager.getInstalledStickerSets();
-    }
 
     Connections {
         target: tdLibWrapper
@@ -40,13 +34,15 @@ Item {
             if (request === "removeStickerSet") {
                 appNotification.show(qsTr("Sticker set successfully removed!"));
                 tdLibWrapper.getInstalledStickerSets();
-                console.log("Set in removal: " + setInRemoval);
-                if (setInRemoval > -1) {
-                    installedStickerSets.splice(setInRemoval, 1);
-                    setInRemoval = -1;
             }
         }
     }
+
+    Connections {
+        target: stickerManager
+        onStickerSetsReceived: {
+            installedStickerSets = stickerManager.getInstalledStickerSets();
+        }
     }
 
     signal stickerPicked(var stickerId)
@@ -123,20 +119,65 @@ Item {
                 model: stickerPickerOverlayItem.installedStickerSets
                 width: stickerPickerFlickable.width
                 Column {
+                    id: stickerSetColumn
+
+                    property bool isExpanded: false
+                    function toggleDisplaySet() {
+                        stickerSetColumn.isExpanded = !stickerSetColumn.isExpanded;
+                        stickerSetLoader.active = stickerSetColumn.isExpanded;
+                        if (stickerSetLoader.active) {
+                            stickerSetLoader.myStickerSet = modelData.stickers;
+                        } else {
+                            stickerSetLoader.myStickerSet = ({});
+                        }
+                    }
+
                     spacing: Theme.paddingMedium
                     width: parent.width
                     Row {
+                        id: stickerSetTitleRow
                         width: parent.width
-                        height: Math.max(removeSetButton.height, setTitleText.height) + ( 2 * Theme.paddingSmall )
+                        height: stickerSetThumbnail.height + ( 2 * Theme.paddingSmall )
+                        spacing: Theme.paddingMedium
+
+                        TDLibThumbnail {
+                            id: stickerSetThumbnail
+                            thumbnail: modelData.thumbnail
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: Theme.itemSizeMedium
+                            height: Theme.itemSizeMedium
+                            MouseArea {
+                                anchors.fill: parent
+                                onClicked: {
+                                    toggleDisplaySet();
+                                }
+                            }
+                        }
+
                         Label {
                             id: setTitleText
                             font.pixelSize: Theme.fontSizeLarge
                             font.bold: true
-                            width: parent.width - removeSetButton.width
+                            width: parent.width - removeSetButton.width - expandSetButton.width - stickerSetThumbnail.width - ( 3 * Theme.paddingMedium )
                             anchors.verticalCenter: parent.verticalCenter
                             maximumLineCount: 1
                             truncationMode: TruncationMode.Fade
                             text: modelData.title
+                            MouseArea {
+                                anchors.fill: parent
+                                onClicked: {
+                                    toggleDisplaySet();
+                                }
+                            }
+                        }
+
+                        IconButton {
+                            id: expandSetButton
+                            icon.source: stickerSetColumn.isExpanded ? "image://theme/icon-m-up" : "image://theme/icon-m-down"
+                            anchors.verticalCenter: parent.verticalCenter
+                            onClicked: {
+                                toggleDisplaySet();
+                            }
                         }
 
                         IconButton {
@@ -145,25 +186,34 @@ Item {
                             anchors.verticalCenter: parent.verticalCenter
                             onClicked: {
                                 var stickerSetId = modelData.id;
-                                setInRemoval = index;
                                 Remorse.popupAction(chatPage, qsTr("Removing sticker set"), function() {
                                     tdLibWrapper.changeStickerSet(stickerSetId, false);
                                 });
                             }
                         }
+
                     }
 
+                    Loader {
+                        id: stickerSetLoader
+                        width: parent.width
+                        active: false
+                        height: active ? Theme.itemSizeExtraLarge : 0
+
+                        property var myStickerSet
+
+                        sourceComponent: Component {
                             SilicaGridView {
                                 id: installedStickerSetGridView
                                 width: parent.width
-                        height: Theme.itemSizeExtraLarge
+                                height: parent.height
                                 cellWidth: Theme.itemSizeExtraLarge;
                                 cellHeight: Theme.itemSizeExtraLarge;
                                 visible: count > 0
                                 clip: true
                                 flow: GridView.FlowTopToBottom
 
-                        model: modelData.stickers
+                                model: stickerSetLoader.myStickerSet
                                 delegate: Item {
                                     width: installedStickerSetGridView.cellWidth
                                     height: installedStickerSetGridView.cellHeight
@@ -188,6 +238,8 @@ Item {
 
                                 HorizontalScrollDecorator {}
                             }
+                        }
+                    }
 
                 }
             }

src/stickermanager.cpp

@@ -118,8 +118,10 @@ void StickerManager::handleStickerSetsReceived(const QVariantList &stickerSets)
         if (!isInstalled && this->installedStickerSetIds.contains(newSetId)) {
             this->installedStickerSetIds.removeAll(newSetId);
         }
+        if (!this->stickerSets.contains(newSetId)) {
             this->stickerSets.insert(newSetId, newStickerSet);
         }
+    }
 
     this->installedStickerSets.clear();
     QListIterator<QVariant> stickerSetIdIterator(this->installedStickerSetIds);
@@ -133,6 +135,7 @@ void StickerManager::handleStickerSetsReceived(const QVariantList &stickerSets)
             i++;
         }
     }
+    emit stickerSetsReceived();
 }
 
 void StickerManager::handleStickerSetReceived(const QVariantMap &stickerSet)

src/stickermanager.h

@@ -42,6 +42,7 @@ public:
     Q_INVOKABLE void setNeedsReload(const bool &reloadNeeded);
 
 signals:
+    void stickerSetsReceived();
 
 private slots: