Knock a room - added a char counter for the message (#3570)

* added a char counter

* moved code

ElementX/Sources/Screens/JoinRoomScreen/View/JoinRoomScreen.swift

@@ -9,6 +9,7 @@ import Compound
 import SwiftUI
 
 struct JoinRoomScreen: View {
+    private let maxKnockMessageLength = 500
     @Environment(\.dynamicTypeSize) private var dynamicTypeSize
 
     @ObservedObject var context: JoinRoomScreenViewModel.Context
@@ -103,14 +104,21 @@ struct JoinRoomScreen: View {
             }
         }
     }
+
+    private var knockMessageFooterString: String {
+        guard !context.knockMessage.isEmpty else {
+            return L10n.screenJoinRoomKnockMessageDescription
+        }
+        return "\(context.knockMessage.count)/\(maxKnockMessageLength)"
+    }
 
     @ViewBuilder
     private var knockMessage: some View {
         VStack(alignment: .leading, spacing: 12) {
             HStack(spacing: 0) {
                 TextField("", text: $context.knockMessage, axis: .vertical)
                     .onChange(of: context.knockMessage) { _, newValue in
-                        context.knockMessage = String(newValue.prefix(500))
+                        context.knockMessage = String(newValue.prefix(maxKnockMessageLength))
                     }
                     .lineLimit(4, reservesSpace: true)
                     .font(.compound.bodyMD)
@@ -125,8 +133,8 @@ struct JoinRoomScreen: View {
                     .stroke(.compound.borderInteractivePrimary)
             }
 
-            Text(L10n.screenJoinRoomKnockMessageDescription)
-                .font(.compound.bodyMD)
+            Text(knockMessageFooterString)
+                .font(.compound.bodySM)
                 .foregroundStyle(.compound.textSecondary)
         }
     }