ui(chat): introduce identicons for channels and users

Closes #128

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,17 @@ 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,6 +8,7 @@ type ChatItem* = ref object
   timestamp*: int64
   unviewedMessagesCount*: int
   color*: string
+  identicon*: string
 
 proc newChatItem*(): ChatItem =
   new(result)
@@ -16,6 +17,7 @@ proc newChatItem*(): ChatItem =
   result.timestamp = 0
   result.unviewedMessagesCount = 0
   result.color = ""
+  result.identicon = ""
 
 proc findById*(self: seq[ChatItem], id: string): int =
   result = -1
@@ -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/ContactsColumn/Channel.qml

@@ -17,6 +17,7 @@ Rectangle {
     radius: 8
     // Hide the box if it is filtered out
     property bool isVisible: searchStr == "" || name.includes(searchStr)
+    property int chatTypeOneToOne: 1
     visible: isVisible ? true : false
     height: isVisible ? 64 : 0
 
@@ -30,21 +31,70 @@ Rectangle {
     }
 
     Rectangle {
-        id: contactImage
-        width: 40
-        color: Theme.darkGrey
-        anchors.left: parent.left
-        anchors.leftMargin: Theme.padding
-        anchors.top: parent.top
-        anchors.topMargin: 12
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
-        radius: 50
+      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 == chatTypeOneToOne ? 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: name
+        text: chatType == chatTypeOneToOne ? name : "#" + name
         anchors.right: contactTime.left
         anchors.rightMargin: Theme.smallPadding
         elide: Text.ElideRight