Add theme keys for the picker header area (#11343)

* feat: pertty header

* 更新 themes.md

Co-authored-by: Michael Davis <mcarsondavis@gmail.com>

---------

Co-authored-by: Michael Davis <mcarsondavis@gmail.com>

book/src/themes.md

@@ -297,8 +297,9 @@ These scopes are used for theming the editor interface:
 | `ui.bufferline.background`        | Style for bufferline background                                                                |
 | `ui.popup`                        | Documentation popups (e.g. Space + k)                                                          |
 | `ui.popup.info`                   | Prompt for multiple key options                                                                |
-| `ui.picker.header`                | Column names in pickers with multiple columns                                                  |
-| `ui.picker.header.active`         | The column name in pickers with multiple columns where the cursor is entering into.            |
+| `ui.picker.header`                | Header row area in pickers with multiple columns                                              |
+| `ui.picker.header.column`         | Column names in pickers with multiple columns                                                  |
+| `ui.picker.header.column.active`  | The column name in pickers with multiple columns where the cursor is entering into.            |
 | `ui.window`                       | Borderlines separating splits                                                                  |
 | `ui.help`                         | Description box for commands                                                                   |
 | `ui.text`                         | Default text style, command prompts, popup text, etc.                                          |

helix-term/src/ui/picker.rs

@@ -799,21 +799,25 @@ impl<T: 'static + Send + Sync, D: 'static + Send + Sync> Picker<T, D> {
         if self.columns.len() > 1 {
             let active_column = self.query.active_column(self.prompt.position());
             let header_style = cx.editor.theme.get("ui.picker.header");
+            let header_column_style = cx.editor.theme.get("ui.picker.header.column");
 
-            table = table.header(Row::new(self.columns.iter().map(|column| {
+            table = table.header(
+                Row::new(self.columns.iter().map(|column| {
                     if column.hidden {
                         Cell::default()
                     } else {
-                    let style = if active_column.is_some_and(|name| Arc::ptr_eq(name, &column.name))
-                    {
-                        cx.editor.theme.get("ui.picker.header.active")
+                        let style =
+                            if active_column.is_some_and(|name| Arc::ptr_eq(name, &column.name)) {
+                                cx.editor.theme.get("ui.picker.header.column.active")
                             } else {
-                        header_style
+                                header_column_style
                             };
 
                         Cell::from(Span::styled(Cow::from(&*column.name), style))
                     }
-            })));
+                }))
+                .style(header_style),
+            );
         }
 
         use tui::widgets::TableState;