Highlight selected emoji in picker, correct add more button in menu, fix order of count label on outgoing messages (#1430)

- Highlight selected emoji in picker
- Correct add more button in menu
- Fix the order of count/key label on outgoing messages
- Fix the size padding of emoji in reactions

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

@@ -20,7 +20,6 @@ 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
@@ -41,11 +40,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
         return 8
     }
     
-    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) {
@@ -109,8 +103,8 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
             if !timelineItem.properties.reactions.isEmpty {
                 TimelineReactionsView(itemID: timelineItem.id,
                                       reactions: timelineItem.properties.reactions,
+                                      isLayoutRTL: timelineItem.isOutgoing,
                                       collapsed: context.reactionsCollapsedBinding(for: timelineItem.id))
-                    .environment(\.layoutDirection, reactionsLayoutDirection)
                     // Workaround to stop the message long press stealing the touch from the reaction buttons
                     .onTapGesture { }
             }