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/EmojiPickerScreen/EmojiPickerScreenCoordinator.swift

@@ -19,6 +19,7 @@ import SwiftUI
 struct EmojiPickerScreenCoordinatorParameters {
     let emojiProvider: EmojiProviderProtocol
     let itemID: TimelineItemIdentifier
+    let selectedEmojis: Set<String>
 }
 
 enum EmojiPickerScreenCoordinatorAction {
@@ -52,6 +53,6 @@ final class EmojiPickerScreenCoordinator: CoordinatorProtocol {
     }
     
     func toPresentable() -> AnyView {
-        AnyView(EmojiPickerScreen(context: viewModel.context))
+        AnyView(EmojiPickerScreen(context: viewModel.context, selectedEmojis: parameters.selectedEmojis))
     }
 }

ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreen.swift

@@ -20,6 +20,7 @@ import SwiftUI
 struct EmojiPickerScreen: View {
     @ObservedObject var context: EmojiPickerScreenViewModel.Context
     
+    var selectedEmojis = Set<String>()
     @State var searchString = ""
     @State private var isSearching = false
     
@@ -39,7 +40,10 @@ struct EmojiPickerScreen: View {
                                     context.send(viewAction: .emojiTapped(emoji: emoji))
                                 } label: {
                                     Text(emoji.value)
+                                        .padding(9.0)
                                         .font(.compound.headingXL)
+                                        .background(Circle()
+                                            .foregroundColor(emojiBackgroundColor(for: emoji.value)))
                                 }
                             }
                         } header: {
@@ -65,6 +69,14 @@ struct EmojiPickerScreen: View {
         }
     }
     
+    private func emojiBackgroundColor(for emoji: String) -> Color {
+        if selectedEmojis.contains(emoji) {
+            return .compound.bgActionPrimaryRest
+        } else {
+            return .clear
+        }
+    }
+    
     @ToolbarContentBuilder
     var toolbar: some ToolbarContent {
         ToolbarItem(placement: .cancellationAction) {
@@ -92,12 +104,12 @@ struct EmojiPickerScreen_Previews: PreviewProvider {
     static let viewModel = EmojiPickerScreenViewModel(emojiProvider: EmojiProvider())
     
     static var previews: some View {
-        EmojiPickerScreen(context: viewModel.context)
+        EmojiPickerScreen(context: viewModel.context, selectedEmojis: ["😀", "😄"])
             .previewDisplayName("Screen")
         
         Text("Timeline view")
             .sheet(isPresented: .constant(true)) {
-                EmojiPickerScreen(context: viewModel.context)
+                EmojiPickerScreen(context: viewModel.context, selectedEmojis: ["😀", "😄"])
             }
             .previewDisplayName("Sheet")
     }