fix(Communities): fallback to letter identicon if no image available

Prior to this commit, communities without an image would render invisible
in the navigation bar of the application. To avoid this, we're now falling
back to our StatusLetterIdenticon component, which renders the first letter
of the community name with the color of the community.

src/app/chat/views/community_item.nim

@@ -125,6 +125,11 @@ QtObject:
     read = nbMembers
     notify = nbMembersChanged
 
+  proc communityColor*(self: CommunityItemView): string {.slot.} = result = ?.self.communityItem.communityColor
+
+  QtProperty[string] communityColor:
+    read = communityColor
+
   proc chatsChanged*(self: CommunityItemView) {.signal.}
 
   proc getChats*(self: CommunityItemView): QVariant {.slot.} =

src/app/chat/views/community_list.nim

@@ -22,6 +22,7 @@ type
     CanJoin = UserRole + 14
     IsMember = UserRole + 15
     UnviewedMessagesCount = UserRole + 16
+    CommunityColor = UserRole + 17
 
 QtObject:
   type
@@ -77,6 +78,7 @@ QtObject:
           result = newQVariant(communityItem.communityImage.large)
         else:
           result = newQVariant("")
+      of CommunityRoles.CommunityColor: result = newQVariant(communityItem.communityColor)
 
   method roleNames(self: CommunityList): Table[int, string] =
     {
@@ -95,7 +97,8 @@ QtObject:
       CommunityRoles.NumMembers.int: "nbMembers",
       CommunityRoles.UnviewedMessagesCount.int: "unviewedMessagesCount",
       CommunityRoles.ThumbnailImage.int:"thumbnailImage",
-      CommunityRoles.LargeImage.int:"largeImage"
+      CommunityRoles.LargeImage.int:"largeImage",
+      CommunityRoles.CommunityColor.int:"communityColor"
     }.toTable
 
   proc setNewData*(self: CommunityList, communityList: seq[Community]) =

src/status/chat/chat.nim

@@ -111,6 +111,7 @@ type Community* = object
   isMember*: bool
   communityImage*: IdentityImage
   membershipRequests*: seq[CommunityMembershipRequest]
+  communityColor*: string
 
 proc `$`*(self: Chat): string =
   result = fmt"Chat(id:{self.id}, name:{self.name}, active:{self.isActive}, type:{self.chatType})"

src/status/signals/messages.nim

@@ -183,6 +183,7 @@ proc toCommunity*(jsonCommunity: JsonNode): Community =
     isMember: jsonCommunity{"isMember"}.getBool,
     chats: newSeq[Chat](),
     members: newSeq[string](),
+    communityColor: jsonCommunity{"color"}.getStr,
     communityImage: IdentityImage()
   )
 

ui/app/AppLayouts/Chat/CommunityComponents/CommunityList.qml

@@ -20,5 +20,7 @@ ListView {
         name: model.name
         image: model.thumbnailImage
         unviewedMessagesCount: model.unviewedMessagesCount
+        iconColor: model.communityColor
+        useLetterIdenticon: model.thumbnailImage === ""
     }
 }

ui/shared/status/StatusIconTabButton.qml

@@ -19,6 +19,8 @@ TabButton {
     property int sectionIndex: Utils.getAppSectionIndex(section)
     property bool doNotHandleClick: false
     property bool borderOnChecked: false
+    property bool useLetterIdenticon: false
+    property string name: ""
 
     onClicked: {
         if (doNotHandleClick) {
@@ -55,7 +57,8 @@ TabButton {
             active: true
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
-            sourceComponent: !!iconSource ? imageIcon : defaultIcon
+            sourceComponent: useLetterIdenticon ? letterIdenticon :
+              !!iconSource ? imageIcon : defaultIcon
         }
 
         Component {
@@ -84,6 +87,17 @@ TabButton {
                 noMouseArea: true
             }
         }
+
+        Component {
+            id: letterIdenticon
+            StatusLetterIdenticon {
+                width: 26
+                height: 26
+                letterSize: 15
+                chatName: control.name
+                color: control.iconColor
+            }
+        }
     }
     background: Rectangle {
         color: hovered || (borderOnChecked && checked) ? Style.current.secondaryBackground : "transparent"

ui/shared/status/StatusLetterIdenticon.qml

@@ -7,6 +7,7 @@ Rectangle {
 
     property string chatId
     property string chatName
+    property int letterSize: root.isCompact ? 15 : 21
 
     width: 40
     height: 40
@@ -24,9 +25,11 @@ Rectangle {
         text: (root.chatName.charAt(0) == "#" ? root.chatName.charAt(1) : root.chatName.charAt(0)).toUpperCase()
         opacity: 0.7
         font.weight: Font.Bold
-        font.pixelSize: root.isCompact ? 15 : 21
+        font.pixelSize: root.letterSize
         color: "white"
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: -1
+        anchors.bottomMargin: -2
     }
 }