feat: add placeholder top bar for the chat column

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -16,6 +16,99 @@ ColumnLayout {
     anchors.top: parent.top
     anchors.topMargin: 0
 
+    RowLayout {
+        id: chatTopBar
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+        Layout.fillWidth: true
+
+        Rectangle {
+            property string channelNameStr: "#Channel Name"
+
+            id: chatTopBarContent
+            color: "white"
+            height: 56
+            Layout.fillWidth: true
+            border.color: Theme.grey
+            border.width: 1
+
+            // TODO this should be the Identicon if it's a private chat
+            Rectangle {
+                id: channelIcon
+                width: 36
+                height: 36
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.padding
+                anchors.top: parent.top
+                anchors.topMargin: Theme.smallPadding
+                // TODO change this to be dynamic
+                color: "#FA6565"
+                radius: 50
+
+                Text {
+                    id: channelIconText
+                    color: "white"
+                    opacity: 0.7
+                    text: chatTopBarContent.channelNameStr.substring(1, 2)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.weight: Font.Bold
+                    font.pixelSize: 18
+                }
+            }
+
+            TextEdit {
+                id: channelName
+                width: 80
+                height: 20
+                text: chatTopBarContent.channelNameStr
+                anchors.left: channelIcon.right
+                anchors.leftMargin: Theme.smallPadding
+                anchors.top: parent.top
+                anchors.topMargin: Theme.smallPadding
+                font.weight: Font.Medium
+                font.pixelSize: 15
+                selectByMouse: true
+                readOnly: true
+            }
+
+            Text {
+                id: channelIdentifier
+                color: Theme.darkGrey
+                // TODO change this in case of private message
+                text: "Public chat"
+                font.pixelSize: 12
+                anchors.left: channelIcon.right
+                anchors.leftMargin: Theme.smallPadding
+                anchors.top: channelName.bottom
+                anchors.topMargin: 0
+            }
+
+            Text {
+                id: moreActionsBtn
+                text: "..."
+                font.letterSpacing: 0.5
+                font.bold: true
+                lineHeight: 1.4
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 20
+                font.pixelSize: 25
+
+                MouseArea {
+                    id: mouseArea
+                    // The negative margins are for the mouse area to be a bit more wide around the button and have more space for the click
+                    anchors.topMargin: -10
+                    anchors.bottomMargin: -10
+                    anchors.rightMargin: -15
+                    anchors.leftMargin: -15
+                    anchors.fill: parent
+                    onClicked: console.log("Options click. Will do something later...")
+                    cursorShape: Qt.PointingHandCursor
+                }
+            }
+        }
+    }
+
     RowLayout {
         id: chatContainer
         Layout.fillWidth: true