Move send button out of composer's text field (#1588)

* Move send button out of composer's text field

* Update user session flow screenshots

ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift

@@ -23,6 +23,7 @@ struct ComposerToolbar: View {
     let keyCommandHandler: KeyCommandHandler
 
     @FocusState private var composerFocused: Bool
+    @ScaledMetric private var sendButtonIconSize = 16
 
     var body: some View {
         HStack(alignment: .bottom, spacing: 10) {
@@ -30,13 +31,28 @@ struct ComposerToolbar: View {
                 .padding(.bottom, 5) // centre align with the send button
             messageComposer
                 .environmentObject(context)
+            Button {
+                context.send(viewAction: .sendMessage)
+            } label: {
+                submitButtonImage
+                    .symbolVariant(.fill)
+                    .font(.compound.bodyLG)
+                    .foregroundColor(context.viewState.sendButtonDisabled ? .compound.iconDisabled : .global.white)
+                    .background {
+                        Circle()
+                            .foregroundColor(context.viewState.sendButtonDisabled ? .clear : .compound.iconAccentTertiary)
+                    }
+            }
+            .disabled(context.viewState.sendButtonDisabled)
+            .animation(.linear(duration: 0.1), value: context.viewState.sendButtonDisabled)
+            .keyboardShortcut(.return, modifiers: [.command])
+            .padding([.vertical, .trailing], 6)
         }
     }
     
     private var messageComposer: some View {
         MessageComposer(plainText: $context.composerPlainText,
                         composerView: composerView,
-                        sendingDisabled: context.viewState.sendButtonDisabled,
                         mode: context.viewState.composerMode) {
             context.send(viewAction: .sendMessage)
         } pasteAction: { provider in
@@ -68,6 +84,24 @@ struct ComposerToolbar: View {
         }
     }
 
+    private var submitButtonImage: some View {
+        // ZStack with opacity so the button size is consistent.
+        ZStack {
+            Image(systemName: "checkmark")
+                .opacity(context.viewState.composerMode.isEdit ? 1 : 0)
+                .fontWeight(.medium)
+                .accessibilityLabel(L10n.actionConfirm)
+                .accessibilityHidden(!context.viewState.composerMode.isEdit)
+            Image(asset: Asset.Images.timelineComposerSendMessage)
+                .resizable()
+                .frame(width: sendButtonIconSize, height: sendButtonIconSize)
+                .padding(EdgeInsets(top: 7, leading: 8, bottom: 7, trailing: 6))
+                .opacity(context.viewState.composerMode.isEdit ? 0 : 1)
+                .accessibilityLabel(L10n.actionSend)
+                .accessibilityHidden(context.viewState.composerMode.isEdit)
+        }
+    }
+
     private class ItemProviderHelper: WysiwygItemProviderHelper {
         func isPasteSupported(for itemProvider: NSItemProvider) -> Bool {
             itemProvider.isSupportedForPasteOrDrop

ElementX/Sources/Screens/ComposerToolbar/View/MessageComposer.swift

@@ -23,7 +23,6 @@ typealias PasteHandler = (NSItemProvider) -> Void
 struct MessageComposer: View {
     @Binding var plainText: String
     let composerView: WysiwygComposerView
-    let sendingDisabled: Bool
     let mode: RoomScreenComposerMode
     let sendAction: EnterKeyHandler
     let pasteAction: PasteHandler
@@ -33,7 +32,6 @@ struct MessageComposer: View {
     @FocusState private var focused: Bool
 
     @State private var isMultiline = false
-    @ScaledMetric private var sendButtonIconSize = 16
     
     var body: some View {
         let roundedRectangle = RoundedRectangle(cornerRadius: borderRadius)
@@ -59,26 +57,9 @@ struct MessageComposer: View {
                         .padding(.vertical, 10)
                         .focused($focused)
                 }
-                
-                Button {
-                    sendAction()
-                } label: {
-                    submitButtonImage
-                        .symbolVariant(.fill)
-                        .font(.compound.bodyLG)
-                        .foregroundColor(sendingDisabled ? .compound.iconDisabled : .global.white)
-                        .background {
-                            Circle()
-                                .foregroundColor(sendingDisabled ? .clear : .compound.iconAccentTertiary)
             }
         }
-                .disabled(sendingDisabled)
-                .animation(.linear(duration: 0.1), value: sendingDisabled)
-                .keyboardShortcut(.return, modifiers: [.command])
-                .padding([.vertical, .trailing], 6)
-            }
-        }
-        .padding(.leading, 12.0)
+        .padding([.leading, .trailing], 12.0)
         .clipped()
         .background {
             ZStack {
@@ -106,24 +87,6 @@ struct MessageComposer: View {
         }
     }
     
-    private var submitButtonImage: some View {
-        // ZStack with opacity so the button size is consistent.
-        ZStack {
-            Image(systemName: "checkmark")
-                .opacity(mode.isEdit ? 1 : 0)
-                .fontWeight(.medium)
-                .accessibilityLabel(L10n.actionConfirm)
-                .accessibilityHidden(!mode.isEdit)
-            Image(asset: Asset.Images.timelineComposerSendMessage)
-                .resizable()
-                .frame(width: sendButtonIconSize, height: sendButtonIconSize)
-                .padding(EdgeInsets(top: 7, leading: 8, bottom: 7, trailing: 6))
-                .opacity(mode.isEdit ? 0 : 1)
-                .accessibilityLabel(L10n.actionSend)
-                .accessibilityHidden(mode.isEdit)
-        }
-    }
-    
     private var borderRadius: CGFloat {
         switch mode {
         case .default:
@@ -205,7 +168,6 @@ struct MessageComposer_Previews: PreviewProvider {
 
         return MessageComposer(plainText: .constant(content),
                                composerView: composerView,
-                               sendingDisabled: sendingDisabled,
                                mode: mode,
                                sendAction: { },
                                pasteAction: { _ in },