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/Services/Timeline/Fixtures/RoomTimelineItemFixtures.swift

@@ -34,7 +34,7 @@ enum RoomTimelineItemFixtures {
                              sender: .init(id: "", displayName: "Helena"),
                              content: .init(body: "Let’s get lunch soon! New salad place opened up 🥗. When are y’all free? 🤗"),
                              properties: RoomTimelineItemProperties(reactions: [
-                                 AggregatedReaction(key: "🙌", count: 1, isHighlighted: true)
+                                 AggregatedReaction(accountOwnerID: "me", key: "🙌", senders: ["me"])
                              ])),
         TextRoomTimelineItem(id: UUID().uuidString,
                              timestamp: "10:11 AM",
@@ -43,8 +43,8 @@ enum RoomTimelineItemFixtures {
                              sender: .init(id: "", displayName: "Helena"),
                              content: .init(body: "I can be around on Wednesday. How about some 🌮 instead? Like https://www.tortilla.co.uk/"),
                              properties: RoomTimelineItemProperties(reactions: [
-                                 AggregatedReaction(key: "🙏", count: 1, isHighlighted: false),
-                                 AggregatedReaction(key: "🙌", count: 2, isHighlighted: true)
+                                 AggregatedReaction(accountOwnerID: "me", key: "🙏", senders: ["helena"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "🙌", senders: ["me", "helena", "jacob"])
                              ])),
         SeparatorRoomTimelineItem(id: "Today", text: "Today"),
         TextRoomTimelineItem(id: UUID().uuidString,
@@ -67,8 +67,15 @@ enum RoomTimelineItemFixtures {
                              sender: .init(id: "", displayName: "Bob"),
                              content: .init(body: "New home office set up!"),
                              properties: RoomTimelineItemProperties(reactions: [
-                                 AggregatedReaction(key: "🙏", count: 1, isHighlighted: false),
-                                 AggregatedReaction(key: "😁", count: 3, isHighlighted: false)
+                                 AggregatedReaction(accountOwnerID: "me", key: "🙏", senders: ["helena"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "🙌", senders: ["me", "helena", "jacob", "bob", "alice", "charlie", "dan", "erin"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "👌", senders: ["helena"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "🥳", senders: ["bob"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "🍾", senders: ["charlie"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "🎈", senders: ["helena"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "👏", senders: ["helena"]),
+                                 AggregatedReaction(accountOwnerID: "me", key: "🎉", senders: ["helena"])
+                                 
                              ],
                              orderedReadReceipts: [ReadReceipt(userID: "alice", formattedTimestamp: nil),
                                                    ReadReceipt(userID: "bob", formattedTimestamp: nil),

ElementX/Sources/Services/Timeline/TimelineItemContent/AggregratedReaction.swift

@@ -18,10 +18,22 @@ import Foundation
 
 /// Represents all reactions of the same type for a single event.
 struct AggregatedReaction: Hashable {
+    /// The id of the account owner
+    let accountOwnerID: String
     /// The reaction that was sent.
     let key: String
-    /// The number of times this reactions was sent.
-    let count: Int
-    /// Whether to highlight the reaction, indicating that the current user sent this reaction.
-    let isHighlighted: Bool
+    /// The user ids of those who sent the reactions
+    let senders: [String]
+}
+
+extension AggregatedReaction {
+    /// The number of times this reactions was sent.
+    var count: Int {
+        senders.count
+    }
+    
+    /// Whether to highlight the reaction, indicating that the current user sent this reaction.
+    var isHighlighted: Bool {
+        senders.contains(where: { $0 == accountOwnerID })
+    }
 }

ElementX/Sources/Services/Timeline/TimelineItems/RoomTimelineItemFactory.swift

@@ -322,8 +322,9 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
     
     private func aggregateReactions(_ reactions: [Reaction]) -> [AggregatedReaction] {
         reactions.map { reaction in
-            let isHighlighted = reaction.senders.contains(where: { $0 == userID })
-            return AggregatedReaction(key: reaction.key, count: Int(reaction.count), isHighlighted: isHighlighted)
+            AggregatedReaction(accountOwnerID: userID, key: reaction.key, senders: reaction.senders)
+        }.sorted { a, b in
+            a.count > b.count
         }
     }