Knocked Preview implementation (#3426)

* JoinRoomScreen ui for knocking

* code improvement

* updated previews

* added knocked state with tests

* send knock request

* Apply suggestions from code review

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

* pr comments

* update tests

* new API

* knock implementation and cancel knock

* update strings

* added a knocked cell in the home screen

* design update

* updated SDK

* simplified the invite case code

* pr comments

* updated previews

* added message as reason

* updated strings

* fixing tests

---------

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

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

@@ -14,7 +14,7 @@ struct JoinRoomScreen: View {
     @ObservedObject var context: JoinRoomScreenViewModel.Context
     
     var body: some View {
-        FullscreenDialog(topPadding: 80, background: .bloom) {
+        FullscreenDialog(topPadding: context.viewState.mode == .knocked ? 151 : 35, background: .bloom) {
             if context.viewState.mode == .loading {
                 EmptyView()
             } else {
@@ -27,13 +27,15 @@ struct JoinRoomScreen: View {
         .background()
         .backgroundStyle(.compound.bgCanvasDefault)
         .navigationBarTitleDisplayMode(.inline)
+        .toolbar { toolbar }
     }
     
     @ViewBuilder
     var mainContent: some View {
-        if context.viewState.mode == .knocked {
+        switch context.viewState.mode {
+        case .knocked:
             knockedView
-        } else {
+        default:
             defaultView
         }
     }
@@ -54,7 +56,7 @@ struct JoinRoomScreen: View {
                 
                 if let subtitle = context.viewState.subtitle {
                     Text(subtitle)
-                        .font(.compound.bodyMD)
+                        .font(.compound.bodyLG)
                         .foregroundStyle(.compound.textSecondary)
                         .multilineTextAlignment(.center)
                 }
@@ -101,7 +103,7 @@ struct JoinRoomScreen: View {
             }
         }
     }
-    
+        
     @ViewBuilder
     private var knockMessage: some View {
         VStack(alignment: .leading, spacing: 12) {
@@ -158,6 +160,17 @@ struct JoinRoomScreen: View {
         Button(L10n.actionAccept) { context.send(viewAction: .acceptInvite) }
             .buttonStyle(.compound(.primary))
     }
+    
+    @ToolbarContentBuilder
+    private var toolbar: some ToolbarContent {
+        if context.viewState.mode == .knocked {
+            ToolbarItem(placement: .principal) {
+                RoomHeaderView(roomName: context.viewState.title,
+                               roomAvatar: context.viewState.avatar,
+                               mediaProvider: context.mediaProvider)
+            }
+        }
+    }
 }
 
 // MARK: - Previews
@@ -221,10 +234,17 @@ struct JoinRoomScreen_Previews: PreviewProvider, TestablePreview {
         if mode == .unknown {
             clientProxy.roomPreviewForIdentifierViaReturnValue = .failure(.sdkError(ClientProxyMockError.generic))
         } else {
-            if mode == .knocked {
+            switch mode {
+            case .knocked:
                 clientProxy.roomForIdentifierClosure = { _ in
-                    .knocked(KnockedRoomProxyMock(.init()))
+                    .knocked(KnockedRoomProxyMock(.init(avatarURL: URL.homeDirectory)))
                 }
+            case .invited:
+                clientProxy.roomForIdentifierClosure = { _ in
+                    .invited(InvitedRoomProxyMock(.init(avatarURL: URL.homeDirectory)))
+                }
+            default:
+                break
             }
             clientProxy.roomPreviewForIdentifierViaReturnValue = .success(.init(roomID: "1",
                                                                                 name: "The Three-Body Problem - 三体",