ui: introduce identicons in channel/contacts list

src/app/chat/views/channels_list.nim

@@ -29,6 +29,8 @@ type
     LastMessage = UserRole + 2
     Timestamp = UserRole + 3
     UnreadMessages = UserRole + 4
+    Identicon = UserRole + 5
+    ChatType = UserRole + 6
 
 QtObject:
   type
@@ -60,13 +62,18 @@ QtObject:
       of ChannelsRoles.Timestamp: result = newQVariant($chatItem.timestamp)
       of ChannelsRoles.LastMessage: result = newQVariant(chatItem.lastMessage)
       of ChannelsRoles.UnreadMessages: result = newQVariant(chatItem.unviewedMessagesCount)
+      of ChannelsRoles.Identicon: result = newQVariant(chatItem.identicon)
+      of ChannelsRoles.ChatType: result = newQVariant(chatItem.chatType.int)
 
   method roleNames(self: ChannelsList): Table[int, string] =
-    { 
+    {
       ChannelsRoles.Name.int:"name",
       ChannelsRoles.Timestamp.int:"timestamp",
       ChannelsRoles.LastMessage.int: "lastMessage",
-      ChannelsRoles.UnreadMessages.int: "unviewedMessagesCount"
+      ChannelsRoles.UnreadMessages.int: "unviewedMessagesCount",
+      ChannelsRoles.Identicon.int: "identicon",
+      ChannelsRoles.ChatType.int: "chatType"
+      
     }.toTable
 
   proc addChatItemToList*(self: ChannelsList, channel: ChatItem): int =

src/models/chat/chat_item.nim

@@ -8,12 +8,14 @@ type ChatItem* = ref object
   timestamp*: int64
   unviewedMessagesCount*: int
   color*: string
+  identicon*: string
 
 proc newChatItem*(): ChatItem =
   new(result)
   result.name = ""
   result.lastMessage = ""
   result.timestamp = 0
+  result.identicon = ""
   result.unviewedMessagesCount = 0
   result.color = ""
 
@@ -39,5 +41,6 @@ proc toChatItem*(chat: Chat): ChatItem =
       chatType: chat.chatType,
       lastMessage: chat.lastMessage.text,
       timestamp: chat.timestamp,
+      identicon: chat.lastMessage.identicon,
       unviewedMessagesCount: chat.unviewedMessagesCount
     )

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -40,9 +40,6 @@ StackLayout {
                     anchors.top: parent.top
                     anchors.topMargin: Theme.smallPadding
                     color: {
-                        if (!chatsModel.activeChannel) {
-                            return Theme.transparent
-                        }
                         const color = chatsModel.getChannelColor(chatsModel.activeChannel)
                         if (!color) {
                             return Theme.transparent

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -418,6 +418,114 @@ Item {
                         anchors.rightMargin: Theme.padding
                         color: Theme.blue
                         visible: unviewedMessagesCount > 0
+                        anchors.top: applicationWindow.top
+                        anchors.topMargin: 0
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.padding
+                        radius: 8
+                        // Hide the box if it is filtered out
+                        property bool isVisible: searchStr == "" || name.includes(searchStr)
+                        visible: isVisible ? true : false
+                        height: isVisible ? 64 : 0
+
+                        MouseArea {
+                            cursorShape: Qt.PointingHandCursor;
+                            anchors.fill: parent
+                            onClicked: {
+                                chatsModel.setActiveChannelByIndex(index)
+                                chatGroupsListView.currentIndex = index
+                            }
+                        }
+
+                        Rectangle {
+                          id: contactImage
+                          width: 40
+                          height: 40
+                          anchors.left: parent.left
+                          anchors.leftMargin: Theme.padding
+                          anchors.top: parent.top
+                          anchors.topMargin: 12
+                          anchors.bottom: parent.bottom
+                          anchors.bottomMargin: 12
+                          radius: 50
+
+                          Loader {
+                            sourceComponent: chatType == 1 ? imageIdenticon : letterIdenticon
+                            anchors.fill: parent
+                          }
+
+                          Component {
+                            id: letterIdenticon
+                            Rectangle {
+                              width: 40
+                              height: 40
+                              radius: 50
+                              color: {
+                                  const color = chatsModel.getChannelColor(name)
+                                  if (!color) {
+                                      return Theme.transparent
+                                  }
+                                  return color
+                              }
+
+                              Text {
+                                text: (name.charAt(0) == "#" ? name.charAt(1) : name.charAt(0)).toUpperCase()
+                                opacity: 0.7
+                                font.weight: Font.Bold
+                                font.pixelSize: 21
+                                color: "white"
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                anchors.verticalCenter: parent.verticalCenter
+                              }
+                            }
+                          }
+                        }
+
+                        Component {
+                          id: imageIdenticon
+                          Rectangle {
+                            width: 40
+                            height: 40
+                            radius: 50
+                            border.color: "#10000000"
+                            border.width: 1
+                            color: Theme.transparent
+                            Image {
+                                width: 40
+                                height: 40
+                                fillMode: Image.PreserveAspectFit
+                                source: identicon
+                            }
+                          }
+                        }
+
+                        Text {
+                            id: contactInfo
+                            text: chatType == 1 ? name : "#" + name
+                            anchors.right: contactTime.left
+                            anchors.rightMargin: Theme.smallPadding
+                            elide: Text.ElideRight
+                            font.weight: Font.Medium
+                            font.pixelSize: 15
+                            anchors.left: contactImage.right
+                            anchors.leftMargin: Theme.padding
+                            anchors.top: parent.top
+                            anchors.topMargin: Theme.smallPadding
+                            color: "black"
+                        }
+                        Text {
+                            id: lastChatMessage
+                            text: lastMessage || qsTr("No messages")
+                            anchors.right: contactNumberChatsCircle.left
+                            anchors.rightMargin: Theme.smallPadding
+                            elide: Text.ElideRight
+                            anchors.bottom: parent.bottom
+                            anchors.bottomMargin: Theme.smallPadding
+                            font.pixelSize: 15
+                            anchors.left: contactImage.right
+                            anchors.leftMargin: Theme.padding
+                            color: Theme.darkGrey
+                        }
                         Text {
                             id: contactNumberChats
                             text: unviewedMessagesCount