Reaction summary and flow layout for reactions (#1158)

* Add reaction summary view

* Add avatars and display names and flowlayout for reactions

- Add avatars to summary view
- Add display names to summary view
- Add flow layout to reaction buttons as per designs(long press on  scolling buttons is difficult to achieve so prioritised this).

* Add and use SwiftUI-Flow for reaction layout.

* Correct Swift-Flow inclusion via xcodegen

* Remove own FlowLayout implementation and Fix unit tests

* Improve naming and correct spacing on summary view as per design.

* Fix safe area insets on summary view bottom sheet

* Scroll to selected reaction in the case that it is offscreen when the sheet is displayed.

* Add more reactions to UITests to ensure the new flow layout is displayed(wraps on to second line).

* Fix snapshot image.

* Address review comments.

* Use onLongPressGesture for reactions also to fix double actions bug and for consistency.

* Respect RTL languages.

* Fix unit test.

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift

@@ -20,6 +20,7 @@ import SwiftUI
 struct TimelineItemBubbledStylerView<Content: View>: View {
     @EnvironmentObject private var context: RoomScreenViewModel.Context
     @Environment(\.timelineGroupStyle) private var timelineGroupStyle
+    @Environment(\.layoutDirection) var layoutDirection: LayoutDirection
     
     let timelineItem: EventBasedTimelineItemProtocol
     @ViewBuilder let content: () -> Content
@@ -31,7 +32,12 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
 
     private var isTextItem: Bool { timelineItem is TextBasedRoomTimelineItem }
     private var isEncryptedOneToOneRoom: Bool { context.viewState.isEncryptedOneToOneRoom }
-
+    
+    var reactionsLayoutDirection: LayoutDirection {
+        guard timelineItem.isOutgoing else { return layoutDirection }
+        return layoutDirection == .leftToRight ? .rightToLeft : .leftToRight
+    }
+    
     var body: some View {
         ZStack(alignment: .trailingFirstTextBaseline) {
             VStack(alignment: alignment, spacing: -12) {
@@ -92,10 +98,12 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                 .accessibilityElement(children: .combine)
             
             if !timelineItem.properties.reactions.isEmpty {
-                TimelineReactionsView(reactions: timelineItem.properties.reactions,
-                                      alignment: alignment) { key in
+                TimelineReactionsView(reactions: timelineItem.properties.reactions) { key in
                     context.send(viewAction: .toggleReaction(key: key, eventID: timelineItem.id))
+                } showReactionSummary: { key in
+                    context.send(viewAction: .reactionSummary(itemID: timelineItem.id, key: key))
                 }
+                .environment(\.layoutDirection, reactionsLayoutDirection)
                 // Workaround to stop the message long press stealing the touch from the reaction buttons
                 .onTapGesture { }
             }