Various tweaks (#381)

* Add the message delivery status to the plain timeline styler and display it outside of the main content

* Fix glitchy timeline scroll to bottom button

* Fixed bubbled reactions padding

* Simplified the emoji picker, double tapping a timeline item directly opens it now and added a context menu option. Linked it to rust side reaction sending

* Fix the sliding sync cold cache: treat invalidated rooms as filled

* Make splash screen view full screen

* Fix the offline indicator popping up when first setting up the network monitor

* Expose presentationDetents on the NavigationStackCoordinator and start using them for the EmojiPicker

* Fix link tint color

* Linked TimelineReactionsView reaction sending

* Remove now unused/unnecessary classes

* Add changelog

* Fix formatting issue

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

@@ -21,39 +21,49 @@ struct EmojiPickerScreen: View {
     @State var searchString = ""
     
     var body: some View {
-        VStack {
-            Text(ElementL10n.reactions)
-                .padding(.top, 20)
-            EmojiPickerSearchFieldView(searchString: $searchString)
-                .padding(.horizontal, 10)
-            ScrollView {
-                LazyVGrid(columns: [GridItem(.adaptive(minimum: 45))], spacing: 3) {
-                    ForEach(context.viewState.categories) { category in
-                        Section(header: EmojiPickerHeaderView(title: category.name)
-                            .padding(.horizontal, 13)
-                            .padding(.top, 10)) {
-                                ForEach(category.emojis) { emoji in
-                                    Text(emoji.value)
-                                        .frame(width: 45, height: 45)
-                                        .onTapGesture {
-                                            context.send(viewAction: .emojiTapped(emoji: emoji))
-                                        }
-                                }
+        ScrollView {
+            LazyVGrid(columns: [GridItem(.adaptive(minimum: 45))], spacing: 3) {
+                ForEach(context.viewState.categories) { category in
+                    Section(header: EmojiPickerHeaderView(title: category.name)
+                        .padding(.horizontal, 13)
+                        .padding(.top, 10)) {
+                            ForEach(category.emojis) { emoji in
+                                Text(emoji.value)
+                                    .frame(width: 45, height: 45)
+                                    .onTapGesture {
+                                        context.send(viewAction: .emojiTapped(emoji: emoji))
+                                    }
                             }
-                    }
+                        }
                 }
             }
         }
+        .navigationTitle(ElementL10n.reactions)
+        .navigationBarTitleDisplayMode(.inline)
+        .toolbar { toolbar }
+        .searchable(text: $searchString)
         .onChange(of: searchString) { _ in
             context.send(viewAction: .search(searchString: searchString))
         }
     }
+    
+    @ToolbarContentBuilder
+    var toolbar: some ToolbarContent {
+        ToolbarItem(placement: .cancellationAction) {
+            Button { context.send(viewAction: .dismiss) } label: {
+                Text(ElementL10n.actionCancel)
+            }
+            .accessibilityIdentifier("dismissButton")
+        }
+    }
 }
 
 // MARK: - Previews
 
 struct EmojiPickerScreen_Previews: PreviewProvider {
     static var previews: some View {
-        EmojiPickerScreen(context: EmojiPickerScreenViewModel(emojiProvider: EmojiProvider()).context)
+        NavigationStack {
+            EmojiPickerScreen(context: EmojiPickerScreenViewModel(emojiProvider: EmojiProvider()).context)
+        }
     }
 }