feat(community): enable choosing and changing community channel color

Fixes #4953

src/app/modules/main/chat_section/base_item.nim

@@ -76,6 +76,9 @@ method `isIdenticon=`*(self: var BaseItem, value: bool) {.inline base.} =
 method color*(self: BaseItem): string {.inline base.} =
   self.color
 
+method `color=`*(self: var BaseItem, value: string) {.inline base.} =
+  self.color = value
+
 method emoji*(self: BaseItem): string {.inline base.} =
   self.emoji
 

src/app/modules/main/chat_section/chat_content/module.nim

@@ -328,7 +328,7 @@ method onNotificationsUpdated*(self: Module, hasUnreadMessages: bool, notificati
   self.view.updateChatDetailsNotifications(hasUnreadMessages, notificationCount)
 
 method onChatEdited*(self: Module, chatDto: ChatDto) =
-  self.view.updateChatDetails(chatDto.name, chatDto.description, chatDto.emoji)
+  self.view.updateChatDetails(chatDto.name, chatDto.description, chatDto.emoji, chatDto.color)
   self.messagesModule.updateChatIdentifier()
 
 method onChatRenamed*(self: Module, newName: string) =

src/app/modules/main/chat_section/chat_content/view.nim

@@ -111,10 +111,11 @@ QtObject:
   proc amIChatAdmin*(self: View): bool {.slot.} =
     return self.delegate.amIChatAdmin()
 
-  proc updateChatDetails*(self: View, name, description, emoji: string) =
+  proc updateChatDetails*(self: View, name, description, emoji, color: string) =
     self.chatDetails.setName(name)
     self.chatDetails.setDescription(description)
     self.chatDetails.setEmoji(emoji)
+    self.chatDetails.setColor(color)
     self.chatDetailsChanged()
 
   proc updateChatDetailsName*(self: View, name: string) =

src/app/modules/main/chat_section/controller.nim

@@ -318,8 +318,10 @@ method createCommunityChannel*(
     name: string,
     description: string,
     emoji: string,
+    color: string,
     categoryId: string) =
-  self.communityService.createCommunityChannel(self.sectionId, name, description, emoji, categoryId)
+  self.communityService.createCommunityChannel(self.sectionId, name, description, emoji, color,
+    categoryId)
 
 method editCommunityChannel*(
     self: Controller,
@@ -327,6 +329,7 @@ method editCommunityChannel*(
     name: string,
     description: string,
     emoji: string,
+    color: string,
     categoryId: string,
     position: int) =
   self.communityService.editCommunityChannel(
@@ -335,6 +338,7 @@ method editCommunityChannel*(
     name,
     description,
     emoji,
+    color,
     categoryId,
     position)
 

src/app/modules/main/chat_section/controller_interface.nim

@@ -119,10 +119,12 @@ method acceptRequestToJoinCommunity*(self: AccessInterface, requestId: string) {
 method declineRequestToJoinCommunity*(self: AccessInterface, requestId: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
-method createCommunityChannel*(self: AccessInterface, name: string, description: string, emoji: string, categoryId: string) {.base.} =
+method createCommunityChannel*(self: AccessInterface, name: string, description: string,
+    emoji: string, color: string, categoryId: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
-method editCommunityChannel*(self: AccessInterface, channelId: string, name: string, description: string, emoji: string, categoryId: string, position: int) {.base.} =
+method editCommunityChannel*(self: AccessInterface, channelId: string, name: string,
+    description: string, emoji: string, color: string, categoryId: string, position: int) {.base.} =
   raise newException(ValueError, "No implementation available")
 
 method createCommunityCategory*(self: AccessInterface, name: string, channels: seq[string]) {.base.} =

src/app/modules/main/chat_section/model.nim

@@ -272,16 +272,17 @@ QtObject:
         self.dataChanged(index, index, @[ModelRole.Name.int])
         return
 
-  proc updateItemDetails*(self: Model, id, name, description, emoji: string) =
+  proc updateItemDetails*(self: Model, id, name, description, emoji, color: string) =
     ## This updates only first level items, it doesn't update subitems, since subitems cannot have custom icon.
     for i in 0 ..< self.items.len:
       if(self.items[i].id == id):
         self.items[i].BaseItem.name = name
         self.items[i].BaseItem.description = description
         self.items[i].BaseItem.emoji = emoji
+        self.items[i].BaseItem.color = color
         let index = self.createIndex(i, 0, nil)
         self.dataChanged(index, index,
-          @[ModelRole.Name.int, ModelRole.Description.int, ModelRole.Emoji.int])
+          @[ModelRole.Name.int, ModelRole.Description.int, ModelRole.Emoji.int, ModelRole.Color.int])
         return
 
   proc updateNotificationsForItemOrSubItemById*(self: Model, id: string, hasUnreadMessages: bool,

src/app/modules/main/chat_section/module.nim

@@ -552,7 +552,8 @@ method onCommunityChannelDeletedOrChatLeft*(self: Module, chatId: string) =
 method onCommunityChannelEdited*(self: Module, chat: ChatDto) =
   if(not self.chatContentModules.contains(chat.id)):
     return
-  self.view.chatsModel().updateItemDetails(chat.id, chat.name, chat.description, chat.emoji)
+  self.view.chatsModel().updateItemDetails(chat.id, chat.name, chat.description, chat.emoji, 
+    chat.color)
 
 method createOneToOneChat*(self: Module, communityID: string, chatId: string, ensName: string) =
   if(self.controller.isCommunity()):
@@ -694,12 +695,13 @@ method acceptRequestToJoinCommunity*(self: Module, requestId: string) =
 method declineRequestToJoinCommunity*(self: Module, requestId: string) =
   self.controller.declineRequestToJoinCommunity(requestId)
 
-method createCommunityChannel*(self: Module, name, description, emoji, categoryId: string) =
+method createCommunityChannel*(self: Module, name, description, emoji, color, categoryId: string) =
-  self.controller.createCommunityChannel(name, description, emoji, categoryId)
+  self.controller.createCommunityChannel(name, description, emoji, color, categoryId)
 
-method editCommunityChannel*(self: Module, channelId, name, description, emoji, categoryId: string,
+method editCommunityChannel*(self: Module, channelId, name, description, emoji, color,
-    position: int) =
+    categoryId: string, position: int) =
-  self.controller.editCommunityChannel(channelId, name, description, emoji, categoryId, position)
+  self.controller.editCommunityChannel(channelId, name, description, emoji, color, categoryId,
+    position)
 
 method createCommunityCategory*(self: Module, name: string, channels: seq[string]) =
   self.controller.createCommunityCategory(name, channels)

src/app/modules/main/chat_section/private_interfaces/module_view_delegate_interface.nim

@@ -94,10 +94,12 @@ method acceptRequestToJoinCommunity*(self: AccessInterface, requestId: string) {
 method declineRequestToJoinCommunity*(self: AccessInterface, requestId: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
-method createCommunityChannel*(self: AccessInterface, name: string, description: string, emoji: string, categoryId: string) {.base.} =
+method createCommunityChannel*(self: AccessInterface, name: string, description: string,
+    emoji: string, color: string, categoryId: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
-method editCommunityChannel*(self: AccessInterface, channelId, name, description, emoji, categoryId: string, position: int) {.base.} =
+method editCommunityChannel*(self: AccessInterface, channelId, name, description, emoji, color,
+    categoryId: string, position: int) {.base.} =
   raise newException(ValueError, "No implementation available")
 
 method leaveCommunity*(self: AccessInterface) {.base.} =

src/app/modules/main/chat_section/view.nim

@@ -213,9 +213,10 @@ QtObject:
       name: string,
       description: string,
       emoji: string,
+      color: string,
       categoryId: string
       ) {.slot.} =
-    self.delegate.createCommunityChannel(name, description, emoji, categoryId)
+    self.delegate.createCommunityChannel(name, description, emoji, color, categoryId)
 
   proc editCommunityChannel*(
       self: View,
@@ -223,6 +224,7 @@ QtObject:
       name: string,
       description: string,
       emoji: string,
+      color: string,
       categoryId: string,
       position: int
     ) {.slot.} =
@@ -231,6 +233,7 @@ QtObject:
       name,
       description,
       emoji,
+      color,
       categoryId,
       position
     )

src/app_service/service/community/service.nim

@@ -581,9 +581,11 @@ QtObject:
       name: string,
       description: string,
       emoji: string,
+      color: string,
       categoryId: string) =
     try:
-      let response = status_go.createCommunityChannel(communityId, name, description, emoji, categoryId)
+      let response = status_go.createCommunityChannel(communityId, name, description, emoji, color,
+        categoryId)
 
       if not response.error.isNil:
         let error = Json.decode($response.error, RpcError)
@@ -611,6 +613,7 @@ QtObject:
       name: string,
       description: string,
       emoji: string,
+      color: string,
       categoryId: string,
       position: int) =
     try:
@@ -620,6 +623,7 @@ QtObject:
         name,
         description,
         emoji,
+        color,
         categoryId,
         position)
 

src/backend/communities.nim

@@ -85,6 +85,7 @@ proc createCommunityChannel*(
     name: string,
     description: string,
     emoji: string,
+    color: string,
     categoryId: string
     ): RpcResponse[JsonNode] {.raises: [Exception].} =
   result = callPrivateRPC("createCommunityChat".prefix, %*[
@@ -96,8 +97,8 @@ proc createCommunityChannel*(
       "identity": {
         "display_name": name,
         "description": description,
-        "emoji": emoji#,
+        "emoji": emoji,
-        # "color": color#
+        "color": color
       },
       "category_id": categoryId
     }])
@@ -108,6 +109,7 @@ proc editCommunityChannel*(
     name: string,
     description: string,
     emoji: string,
+    color: string,
     categoryId: string,
     position: int
     ): RpcResponse[JsonNode] {.raises: [Exception].} =
@@ -121,8 +123,8 @@ proc editCommunityChannel*(
       "identity": {
         "display_name": name,
         "description": description,
-        "emoji": emoji#,
+        "emoji": emoji,
-        # "color": color
+        "color": color
       },
       "category_id": categoryId,
       "position": position

ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml

@@ -20,15 +20,20 @@ StatusModal {
     property string channelName: ""
     property string channelDescription: ""
     property string channelEmoji: ""
+    property string channelColor: ""
     property bool emojiPopupOpened: false
     property var emojiPopup: null
     readonly property string emojiRegexStr: 'alt="(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])"'
+    readonly property var communityColorValidator: Utils.Validate.NoEmpty
+                                                   | Utils.Validate.TextHexColor
 
     readonly property int maxChannelNameLength: 30
     readonly property int maxChannelDescLength: 140
 
-    signal createCommunityChannel(string chName, string chDescription, string chEmoji, string chCategoryId)
+    signal createCommunityChannel(string chName, string chDescription, string chEmoji,
-    signal editCommunityChannel(string chName, string chDescription, string chEmoji, string chCategoryId)
+        string chColor, string chCategoryId)
+    signal editCommunityChannel(string chName, string chDescription, string chEmoji, string chColor,
+        string chCategoryId)
 
     //% "New channel"
     header.title: qsTrId("create-channel-title")
@@ -61,7 +66,9 @@ StatusModal {
 
     function isFormValid() {
         return (scrollView.channelName.valid &&
-               scrollView.channelDescription.valid)
+                scrollView.channelDescription.valid) &&
+                Utils.validateAndReturnError(scrollView.channelColorDialog.color.toString().toUpperCase(),
+                                        communityColorValidator) === ""
     }
 
     contentItem: ScrollView {
@@ -72,6 +79,7 @@ StatusModal {
 
         property alias channelName: nameInput
         property alias channelDescription: descriptionTextArea
+        property alias channelColorDialog: colorDialog
         property alias channelEmoji: emojiText
 
         contentHeight: content.height
@@ -91,8 +99,9 @@ StatusModal {
 
             StatusInput {
                 id: nameInput
+                label: qsTr("Channel name")
                 charLimit: popup.maxChannelNameLength
-                input.placeholderText: qsTr("Channel name")
+                input.placeholderText: qsTr("Name the channel")
                 input.onTextChanged: {
                     input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
                     input.cursorPosition = input.text.length
@@ -104,9 +113,63 @@ StatusModal {
                 }]
             }
 
-            StatusModalDivider {
+            Item {
-                topPadding: 8
+                id: spacer1
-                bottomPadding: 8
+                height: 16
+                width: parent.width
+            }
+
+            StatusBaseText {
+                text: qsTr("Channel  colour")
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+                anchors.left: parent.left
+                anchors.leftMargin: 16
+            }
+
+            Item {
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: colorSelectorButton.height + 16
+                width: parent.width - 32
+
+                StatusPickerButton {
+                    id: colorSelectorButton
+
+                    property string validationError: ""
+
+                    bgColor: colorDialog.colorSelected ?
+                        colorDialog.color : Theme.palette.baseColor2
+                    // TODO adjust text color depending on the background color to make it readable
+                    // contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
+                    text: colorDialog.colorSelected ?
+                        colorDialog.color.toString().toUpperCase() :
+                        //% "Pick a color"
+                        qsTrId("pick-a-color")
+
+                    onClicked: colorDialog.open();
+                    onTextChanged: {
+                        if (colorDialog.colorSelected) {
+                            validationError = Utils.validateAndReturnError(text, communityColorValidator)
+                        }
+                    }
+
+                    ColorDialog {
+                        id: colorDialog
+                        property bool colorSelected: popup.isEdit && popup.channelColor
+                        color: popup.isEdit && popup.channelColor ? popup.channelColor :
+                            Theme.palette.primaryColor1
+                        onAccepted: colorSelected = true
+                    }
+                }
+
+                StatusBaseText {
+                    text: colorSelectorButton.validationError
+                    visible: !!text
+                    color: Theme.palette.dangerColor1
+                    anchors.top: colorSelectorButton.bottom
+                    anchors.topMargin: 4
+                    anchors.right: colorSelectorButton.right
+                }
             }
 
             StatusInput {
@@ -245,14 +308,17 @@ StatusModal {
                     emoji = found[1]
                 }
                 if (!isEdit) {
+                    //popup.contentItem.communityColor.color.toString().toUpperCase()
                     popup.createCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
                                                  Utils.filterXSS(popup.contentItem.channelDescription.input.text),
                                                  emoji,
+                                                 popup.contentItem.channelColorDialog.color.toString().toUpperCase(),
                                                  popup.categoryId)
                 } else {
                     popup.editCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
                                                  Utils.filterXSS(popup.contentItem.channelDescription.input.text),
                                                  emoji,
+                                                 popup.contentItem.channelColorDialog.color.toString().toUpperCase(),
                                                  popup.categoryId)
                 }
 

ui/app/AppLayouts/Chat/popups/community/CreateCommunityPopup.qml

@@ -21,8 +21,7 @@ StatusModal {
     property var store
     property var communitySectionModule
     property bool isEdit: false
-    // Not Refactored Yet
+    property QtObject community: null
-    property QtObject community: null //popup.store.chatsModelInst.communities.activeCommunity
     property var onSave: () => {}
     readonly property int maxCommunityNameLength: 30
     readonly property int maxCommunityDescLength: 140

ui/app/AppLayouts/Chat/stores/RootStore.qml

@@ -189,19 +189,20 @@ QtObject {
         chatCommunitySectionModule.removeUserFromCommunity(pubKey);
     }
 
-    function createCommunityChannel(channelName, channelDescription, channelEmoji, categoryId) {
+    function createCommunityChannel(channelName, channelDescription, channelEmoji, channelColor,
-        chatCommunitySectionModule.createCommunityChannel(channelName, channelDescription, channelEmoji, categoryId);
+            categoryId) {
+        chatCommunitySectionModule.createCommunityChannel(channelName, channelDescription,
+            channelEmoji, channelColor, categoryId);
     }
 
-    function editCommunityChannel(chatId, newName, newDescription, newEmoji, newCategory, channelPosition) {
+    function editCommunityChannel(chatId, newName, newDescription, newEmoji, newColor,
-        // TODO: pass the private value when private channels
+            newCategory, channelPosition) {
-        // are implemented
-        //privateSwitch.checked)
         chatCommunitySectionModule.editCommunityChannel(
                     chatId,
                     newName,
                     newDescription,
                     newEmoji,
+                    newColor,
                     newCategory,
                     channelPosition
                 )

ui/app/AppLayouts/Chat/views/ChatContentView.qml

@@ -177,6 +177,7 @@ ColumnLayout {
                 chatName = chatContentModule.chatDetails.name
                 chatDescription = chatContentModule.chatDetails.description
                 chatEmoji = chatContentModule.chatDetails.emoji
+                chatColor = chatContentModule.chatDetails.color
                 chatType = chatContentModule.chatDetails.type
                 chatMuted = chatContentModule.chatDetails.muted
                 channelPosition = chatContentModule.chatDetails.position
@@ -249,6 +250,7 @@ ColumnLayout {
                     newName,
                     newDescription,
                     newEmoji,
+                    newColor,
                     newCategory,
                     channelPosition // TODO change this to the signal once it is modifiable
                 )

ui/app/AppLayouts/Chat/views/ChatContextMenuView.qml

@@ -20,6 +20,7 @@ StatusPopupMenu {
     property string chatName: ""
     property string chatDescription: ""
     property string chatEmoji: ""
+    property string chatColor: ""
     property string chatIcon: ""
     property int chatType: -1
     property bool chatMuted: false
@@ -39,8 +40,8 @@ StatusPopupMenu {
     signal leaveChat(string chatId)
     signal leaveGroup(string chatId)
 
-    signal createCommunityChannel(string chatId, string newName, string newDescription, string newEmoji)
+    signal createCommunityChannel(string chatId, string newName, string newDescription, string newEmoji, string newColor)
-    signal editCommunityChannel(string chatId, string newName, string newDescription, string newEmoji, string newCategory)
+    signal editCommunityChannel(string chatId, string newName, string newDescription, string newEmoji, string newColor, string newCategory)
     signal fetchMoreMessages(int timeFrame)
     signal addRemoveGroupMember()
 
@@ -190,6 +191,7 @@ StatusPopupMenu {
                 channelName: root.chatName,
                 channelDescription: root.chatDescription,
                 channelEmoji: root.chatEmoji,
+                channelColor: root.chatColor,
                 categoryId: root.chatCategoryId
             });
         }
@@ -202,10 +204,11 @@ StatusPopupMenu {
             isEdit: true
             emojiPopup: root.emojiPopup
             onCreateCommunityChannel: {
-                root.createCommunityChannel(root.chatId, chName, chDescription, chEmoji);
+                root.createCommunityChannel(root.chatId, chName, chDescription, chEmoji, chColor);
             }
             onEditCommunityChannel: {
-                root.editCommunityChannel(root.chatId, chName, chDescription, chEmoji, chCategoryId);
+                root.editCommunityChannel(root.chatId, chName, chDescription, chEmoji, chColor,
+                    chCategoryId);
             }
             onClosed: {
                 destroy()

ui/app/AppLayouts/Chat/views/CommunityColumnView.qml

@@ -277,6 +277,7 @@ Item {
                     chatDescription = obj.description
 
                     chatEmoji = obj.emoji
+                    chatColor = obj.color
                     chatType = obj.type
                     chatMuted = obj.muted
                     channelPosition = obj.position
@@ -332,6 +333,7 @@ Item {
                         newName,
                         newDescription,
                         newEmoji,
+                        newColor,
                         newCategory,
                         channelPosition // TODO change this to the signal once it is modifiable
                     )
@@ -405,8 +407,10 @@ Item {
         CreateChannelPopup {
             anchors.centerIn: parent
             emojiPopup: root.emojiPopup
-            onCreateCommunityChannel: function (chName, chDescription, chEmoji, chCategoryId) {
+            onCreateCommunityChannel: function (chName, chDescription, chEmoji, chColor,
-                root.store.createCommunityChannel(chName, chDescription, chEmoji, chCategoryId)
+                    chCategoryId) {
+                root.store.createCommunityChannel(chName, chDescription, chEmoji, chColor,
+                    chCategoryId)
             }
             onClosed: {
                 destroy()

ui/app/AppLayouts/Chat/views/ContactsColumnView.qml

@@ -184,6 +184,7 @@ Item {
                     chatName = obj.name
                     chatDescription = obj.description
                     chatEmoji = obj.emoji
+                    chatColor = obj.color
                     chatType = obj.type
                     chatMuted = obj.muted
                 }