feat: hook top bar to channel name and colors

src/app/chat/view.nim

@@ -3,6 +3,7 @@ import Tables
 import views/channels_list
 import views/message_list
 import ../../models/chat
+import random
 
 QtObject:
   type
@@ -36,6 +37,15 @@ QtObject:
 
   proc activeChannel*(self: ChatsView): string {.slot.} = self.activeChannel
 
+  proc getChannelColor*(self: ChatsView, channel:string): string {.slot.} =
+    var selectedChannel: ChatItem
+    try:
+      selectedChannel = self.chats.getChannelByName(channel)
+    except:
+      return channelColors[0]
+    
+    result = selectedChannel.color
+
   proc activeChannelChanged*(self: ChatsView) {.signal.}
 
   proc setActiveChannelByIndex*(self: ChatsView, index: int) {.slot.} =
@@ -75,7 +85,9 @@ QtObject:
       result = self.chats.chats.findById(channel)
     else:
       self.model.join(channel)
-      result = self.chats.addChatItemToList(ChatItem(id: channel, name: channel))
+      randomize()
+      let randomColorIndex = rand(channelColors.len - 1)
+      result = self.chats.addChatItemToList(ChatItem(id: channel, name: channel, color: channelColors[randomColorIndex]))
 
   proc updateChat*(self: ChatsView, chat: ChatItem) =
     self.chats.updateChat(chat)

src/app/chat/views/channels_list.nim

@@ -1,8 +1,28 @@
 import NimQml
 import Tables
+import strformat
 
 import ../../../models/chat
 
+const accountColors* = [
+  "#9B832F",
+  "#D37EF4",
+  "#1D806F",
+  "#FA6565",
+  "#7CDA00",
+  "#887af9",
+  "#8B3131"
+]
+
+const channelColors* = [
+  "#fa6565",
+  "#7cda00",
+  "#887af9",
+  "#51d0f0",
+  "#FE8F59",
+  "#d37ef4"
+]
+
 type
   ChannelsRoles {.pure.} = enum
     Name = UserRole + 1,
@@ -66,6 +86,12 @@ QtObject:
     else:
       result = idx
 
+  proc getChannelByName*(self: ChannelsList, name: string): ChatItem =
+    for chat in self.chats:
+      if chat.name == name:
+        return chat
+    raise newException(OSError, fmt"No chat found with the name {name}")
+
   proc updateChat*(self: ChannelsList, channel: ChatItem) =
     let idx = self.upsertChannel(channel)
     self.chats[idx] = channel

src/models/chat/chat_item.nim

@@ -7,6 +7,7 @@ type ChatItem* = ref object
   lastMessage*: string
   timestamp*: int64
   unviewedMessagesCount*: int
+  color*: string
 
 proc newChatItem*(): ChatItem =
   new(result)
@@ -14,6 +15,7 @@ proc newChatItem*(): ChatItem =
   result.lastMessage = ""
   result.timestamp = 0
   result.unviewedMessagesCount = 0
+  result.color = ""
 
 proc findById*(self: seq[ChatItem], id: string): int =
   result = -1

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -22,7 +22,7 @@ ColumnLayout {
         Layout.fillWidth: true
 
         Rectangle {
-            property string channelNameStr: "#Channel Name"
+            property string channelNameStr: "#" + chatsModel.activeChannel
 
             id: chatTopBarContent
             color: "white"
@@ -40,15 +40,23 @@ ColumnLayout {
                 anchors.leftMargin: Theme.padding
                 anchors.top: parent.top
                 anchors.topMargin: Theme.smallPadding
-                // TODO change this to be dynamic
-                color: "#FA6565"
+                color: {
+                    if (!chatsModel.activeChannel) {
+                        return Theme.transparent
+                    }
+                    const color = chatsModel.getChannelColor(chatsModel.activeChannel)
+                    if (!color) {
+                        return Theme.transparent
+                    }
+                    return color
+                }
                 radius: 50
 
                 Text {
                     id: channelIconText
                     color: "white"
                     opacity: 0.7
-                    text: chatTopBarContent.channelNameStr.substring(1, 2)
+                    text: chatTopBarContent.channelNameStr.substring(1, 2).toUpperCase()
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
                     font.weight: Font.Bold