refactor channel suggestion list into one component

ui/app/AppLayouts/Chat/ContactsColumn/EmptyView.qml

@@ -183,51 +183,58 @@ import "../../../../imports"
                 anchors.topMargin: Style.current.smallPadding
                 width: parent.width
 
-                Repeater {
-                    id: sectionRepeater
-                                    anchors.top: suggestionsText.bottom
-                                    anchors.topMargin: Style.current.smallPadding
-//                    id: sview
-                    model: ChannelJSON.categories
                 Item {
-                        anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
-                        anchors.topMargin: index === 0 ? 0 : Style.current.padding
-                        width: parent.width - Style.current.padding
-                        height: {
-                            return childrenRect.height
-                        }
-
-//                        height: {
-//                            var totalHeight = 0
-//                            for (let i = 0; i < channelRepeater.count; i++) {
-//                                totalHeight += channelRepeater.itemAt(i).height + Style.current.padding
-//                            }
-//                            return totalHeight
-//                        }
-
-                        Text {
-                            id: sectionTitle
-                            text: modelData.name
-                            font.bold: true
-                            font.pixelSize: 16
-                        }
-                        Flow {
-                            anchors.top: sectionTitle.bottom
-                            anchors.topMargin: Style.current.smallPadding
-                            Layout.fillHeight: true
-                            Layout.fillWidth: true
                     width: parent.width
-                            spacing: 10
+                    SuggestedChannels {
-                            Repeater {
+                        id: sectionRepeater
-                                id: channelRepeater
-                                model: modelData.channels
-                                SuggestedChannel { channel: modelData }
                     }
                 }
 
-                    }
+//                 Repeater {
+//                     id: sectionRepeater
+//                                     // anchors.top: suggestionsText.bottom
+//                                     // anchors.topMargin: Style.current.smallPadding
+// //                    id: sview
+//                     model: ChannelJSON.categories
+//                     Item {
+//                         anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
+//                         anchors.topMargin: index === 0 ? 0 : Style.current.padding
+//                         width: parent.width - Style.current.padding
+//                         height: {
+//                             return childrenRect.height
+//                         }
 
-                }
+// //                        height: {
+// //                            var totalHeight = 0
+// //                            for (let i = 0; i < channelRepeater.count; i++) {
+// //                                totalHeight += channelRepeater.itemAt(i).height + Style.current.padding
+// //                            }
+// //                            return totalHeight
+// //                        }
+
+//                         Text {
+//                             id: sectionTitle
+//                             text: modelData.name
+//                             font.bold: true
+//                             font.pixelSize: 16
+//                         }
+//                         Flow {
+//                             anchors.top: sectionTitle.bottom
+//                             anchors.topMargin: Style.current.smallPadding
+//                             Layout.fillHeight: true
+//                             Layout.fillWidth: true
+//                             width: parent.width
+//                             spacing: 10
+//                             Repeater {
+//                                 id: channelRepeater
+//                                 model: modelData.channels
+//                                 SuggestedChannel { channel: modelData }
+//                             }
+//                         }
+
+//                     }
+
+//                 }
 //            }
 }
 //            Flow {

ui/app/AppLayouts/Chat/components/PublicChatPopup.qml

@@ -71,39 +71,12 @@ ModalPopup {
             return totalHeight + Style.current.padding
         }
 
-        Repeater {
-            id: sectionRepeater
-            model: ChannelJSON.categories
         Item {
-                anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
-                anchors.topMargin: index === 0 ? 0 : Style.current.padding
-                width: parent.width - Style.current.padding
-                height: {
-                    return childrenRect.height
-                }
-
-                Text {
-                    id: sectionTitle
-                    text: modelData.name
-                    font.bold: true
-                    font.pixelSize: 16
-                }
-                Flow {
-                    anchors.top: sectionTitle.bottom
-                    anchors.topMargin: Style.current.smallPadding
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
             width: parent.width
-                    spacing: 10
+            SuggestedChannels {
-                    Repeater {
+                id: sectionRepeater
-                        model: modelData.channels
-                        SuggestedChannel { channel: modelData }
             }
         }
-
-            }
-
-        }
     }
 
     footer: Button {

ui/app/AppLayouts/Chat/components/SuggestedChannels.qml

@@ -0,0 +1,45 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import "../../../../imports"
+import "../../../../shared"
+import "../data/channelList.js" as ChannelJSON
+import "./"
+
+Repeater {
+    id: sectionRepeater
+    model: ChannelJSON.categories
+    Item {
+        anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
+        anchors.topMargin: index === 0 ? 0 : Style.current.padding
+        width: parent.width - Style.current.padding
+        height: {
+            return childrenRect.height
+        }
+
+        Text {
+            id: sectionTitle
+            text: modelData.name
+            font.bold: true
+            font.pixelSize: 16
+        }
+        Flow {
+            anchors.top: sectionTitle.bottom
+            anchors.topMargin: Style.current.smallPadding
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            width: parent.width
+            spacing: 10
+            Repeater {
+                model: modelData.channels
+                SuggestedChannel { channel: modelData }
+            }
+        }
+
+    }
+}
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/

ui/app/AppLayouts/Chat/components/qmldir

@@ -11,3 +11,4 @@ StickerMarket 1.0 StickerMarket.qml
 StickersPopup 1.0 StickersPopup.qml
 InviteFriendsPopup 1.0 InviteFriendsPopup.qml
 StickerPackIconWithIndicator 1.0 StickerPackIconWithIndicator.qml
+SuggestedChannels 1.0 SuggestedChannels.qml

ui/nim-status-client.pro

@@ -157,6 +157,7 @@ DISTFILES += \
     app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
     app/AppLayouts/Chat/components/MessageContextMenu.qml \
     app/AppLayouts/Chat/components/NicknamePopup.qml \
+    app/AppLayouts/Chat/components/SuggestedChannels.qml \
     app/AppLayouts/Chat/data/channelList.js \
     app/AppLayouts/Profile/LeftTab/Constants.js \
     app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \