Replace in buffer adjustments (#2960)

This PR addresses feedback from @maxbrunsfeld on new replace in buffer.
It fixes:
- missing padding surrounding replace input.
- missing padding around replace buttons.
- missing `.notify` call which made the replace fields not show up
immediately sometimes.

Release Notes:
- N/A

---------

Co-authored-by: Max <max@zed.dev>

assets/keymaps/default.json

@@ -231,7 +231,14 @@
     }
   },
   {
-    "context": "BufferSearchBar > Editor",
+    "context": "BufferSearchBar && in_replace",
+    "bindings": {
+      "enter": "search::ReplaceNext",
+      "cmd-enter": "search::ReplaceAll"
+    }
+  },
+  {
+    "context": "BufferSearchBar && !in_replace > Editor",
     "bindings": {
       "up": "search::PreviousHistoryQuery",
       "down": "search::NextHistoryQuery"

crates/search/src/buffer_search.rs

@@ -101,6 +101,21 @@ impl View for BufferSearchBar {
         "BufferSearchBar"
     }
 
+    fn update_keymap_context(
+        &self,
+        keymap: &mut gpui::keymap_matcher::KeymapContext,
+        cx: &AppContext,
+    ) {
+        Self::reset_to_default_keymap_context(keymap);
+        let in_replace = self
+            .replacement_editor
+            .read_with(cx, |_, cx| cx.is_self_focused())
+            .unwrap_or(false);
+        if in_replace {
+            keymap.add_identifier("in_replace");
+        }
+    }
+
     fn focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext<Self>) {
         if cx.is_self_focused() {
             cx.focus(&self.query_editor);
@@ -868,9 +883,10 @@ impl BufferSearchBar {
             cx.propagate_action();
         }
     }
-    fn toggle_replace(&mut self, _: &ToggleReplace, _: &mut ViewContext<Self>) {
+    fn toggle_replace(&mut self, _: &ToggleReplace, cx: &mut ViewContext<Self>) {
         if let Some(_) = &self.active_searchable_item {
             self.replace_is_active = !self.replace_is_active;
+            cx.notify();
         }
     }
     fn replace_next(&mut self, _: &ReplaceNext, cx: &mut ViewContext<Self>) {

styles/src/style_tree/search.ts

@@ -36,6 +36,7 @@ export default function search(): any {
             left: 10,
             right: 4,
         },
+        margin: { right: SEARCH_ROW_SPACING }
     }
 
     const include_exclude_editor = {
@@ -201,7 +202,6 @@ export default function search(): any {
         },
         option_button_group: {
             padding: {
-                left: SEARCH_ROW_SPACING,
                 right: SEARCH_ROW_SPACING,
             },
         },
@@ -375,7 +375,11 @@ export default function search(): any {
         search_bar_row_height: 34,
         search_row_spacing: 8,
         option_button_height: 22,
-        modes_container: {},
+        modes_container: {
+            padding: {
+                right: SEARCH_ROW_SPACING,
+            }
+        },
         replace_icon: {
             icon: {
                 color: foreground(theme.highest, "disabled"),