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/RoomScreenViewModel.swift

@@ -118,6 +118,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
         case .displayEmojiPicker(let itemID):
             guard let item = state.items.first(where: { $0.id == itemID }), item.isReactable else { return }
             callback?(.displayEmojiPicker(itemID: itemID))
+        case .reactionSummary(let itemId, let key):
+            showReactionSummary(for: itemId, selectedKey: key)
         case .retrySend(let transactionID):
             Task { await handleRetrySend(transactionID: transactionID) }
         case .cancelSend(let transactionID):
@@ -619,6 +621,17 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
             }
         }
     }
+    
+    // MARK: - Reaction summary
+    
+    private func showReactionSummary(for itemID: String, selectedKey: String) {
+        guard let timelineItem = timelineController.timelineItems.first(where: { $0.id == itemID }),
+              let eventTimelineItem = timelineItem as? EventBasedTimelineItemProtocol else {
+            return
+        }
+        
+        state.bindings.reactionSummaryInfo = .init(reactions: eventTimelineItem.properties.reactions, selectedKey: selectedKey)
+    }
 }
 
 private extension RoomProxyProtocol {