fix: code review and style changes

src/app/chat/view.nim

@@ -411,11 +411,12 @@ QtObject:
     self.status.chat.join(channel, ChatType(chatTypeInt))
     self.setActiveChannel(channel)
 
-  proc chatGroupJoined(self: ChatsView) {.signal.}
+  proc chatGroupJoined(self: ChatsView, channel: string) {.signal.}
 
   proc joinGroup*(self: ChatsView) {.slot.} =
     self.status.chat.confirmJoiningGroup(self.activeChannel.id)
-    self.chatGroupJoined()
+    self.activeChannel.membershipChanged()
+    self.chatGroupJoined(self.activeChannel.id)
 
   proc messagesLoaded*(self: ChatsView) {.signal.}
 

src/app/chat/views/chat_item.nim

@@ -1,5 +1,8 @@
 import NimQml, Tables, std/wrapnils
 import ../../../status/[chat/chat, status, ens, accounts]
+from ../../../status/libstatus/types import Setting
+import ../../../status/libstatus/settings as status_settings
+
 import chat_members
 
 QtObject:
@@ -76,10 +79,17 @@ QtObject:
   QtProperty[bool] hasMentions:
     read = hasMentions
 
-  proc isMember*(self: ChatItemView, pubKey: string): bool {.slot.} =
+  proc isMember*(self: ChatItemView): bool {.slot.} =
     if self.chatItem.isNil: return false
+    let pubKey = status_settings.getSetting[string](Setting.PublicKey, "0x0")
     return self.chatItem.isMember(pubKey)
 
+  proc membershipChanged*(self: ChatItemView) {.signal.}
+
+  QtProperty[bool] isMember:
+    read = isMember
+    notify = membershipChanged
+
   proc contains*(self: ChatItemView, pubKey: string): bool {.slot.} =
     if self.chatItem.isNil: return false
     return self.chatItem.contains(pubKey)

src/app/chat/views/message_format.nim

@@ -18,12 +18,12 @@ proc renderInline(self: ChatMessageList, elem: TextItem): string =
   let value = escape_html(elem.literal.strip)
   case elem.textType:
   of "": result = value
-  of "code": result = fmt("<code>{value}</code> ")
-  of "emph": result = fmt("<em>{value}</em> ")
-  of "strong": result = fmt("<strong>{value}</strong> ")
+  of "code": result = fmt(" <code>{value}</code>")
+  of "emph": result = fmt(" <em>{value}</em>")
+  of "strong": result = fmt(" <strong>{value}</strong>")
   of "link": result = elem.destination
-  of "mention": result = fmt("<a href=\"//{value}\" class=\"mention\">{self.mention(value)}</a> ")
-  of "status-tag": result = fmt("<a href=\"#{value}\" class=\"status-tag\">#{value}</a> ")
+  of "mention": result = fmt(" <a href=\"//{value}\" class=\"mention\">{self.mention(value)}</a> ")
+  of "status-tag": result = fmt(" <a href=\"#{value}\" class=\"status-tag\">#{value}</a> ")
 
 # See render-block in status-react/src/status_im/ui/screens/chat/message/message.cljs
 proc renderBlock(self: ChatMessageList, message: Message): string =

ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml

@@ -8,25 +8,18 @@ import "../../../../shared"
 import "../../../../imports"
 
 Rectangle {
-    id: rectangle
+    id: root
     property alias textInput: txtData
     border.width: 0
     height: 52
     color: Style.current.transparent
 
-    visible: chatsModel.activeChannel.chatType !== Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.isMember(profileModel.profile.pubKey)
+    visible: chatsModel.activeChannel.chatType !== Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.isMember
 
     property bool emojiEvent: false;
     property bool paste: false;
     property bool isColonPressed: false;
 
-    Connections {
-        target: chatsModel
-        onChatGroupJoined: {
-            rectangle.visible = true;
-        } 
-    }
-
     Audio {
         id: sendMessageSound
         source: "../../../../sounds/send_message.wav"

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -110,11 +110,7 @@ Item {
     Component {
         id: fetchMoreMessagesButtonComponent
         Item {
-            visible: {
-                if(chatsModel.activeChannel.chatType !== Constants.chatTypePrivateGroupChat) return true;
-                return chatsModel.activeChannel.isMember(profileModel.profile.pubKey)
-            }
-
+            visible: chatsModel.activeChannel.chatType !== Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.isMember
             id: wrapper
             height: wrapper.visible ? fetchMoreButton.height + fetchDate.height + 3 + Style.current.smallPadding*2 : 0
             anchors.left: parent.left
@@ -173,10 +169,24 @@ Item {
         id: privateGroupHeaderComponent
         StyledText {
             wrapMode: Text.Wrap
-            text:  message
+            text:  {
+                return `<html>`+
+                `<head>`+
+                    `<style type="text/css">`+
+                    `a {`+
+                        `color: ${Style.current.textColor};`+
+                        `text-decoration: none;`+
+                    `}`+
+                    `</style>`+
+                `</head>`+
+                `<body>`+
+                    `${message}`+
+                `</body>`+
+            `</html>`;
+            }
             visible: isStatusMessage
-            font.pixelSize: 16
-            color: Style.current.darkGrey
+            font.pixelSize: 14
+            color: Style.current.secondaryText
             width:  parent.width - 120
             horizontalAlignment: Text.AlignHCenter
             anchors.horizontalCenter: parent.horizontalCenter

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml

@@ -98,7 +98,7 @@ Item {
     }
 
     Item {
-        visible: chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat && !chatsModel.activeChannel.isMember(profileModel.profile.pubKey)
+        visible: chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat && !chatsModel.activeChannel.isMember
         anchors.top: channelDescription.bottom
         anchors.topMargin: 16
         anchors.horizontalCenter: parent.horizontalCenter