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

@@ -293,12 +293,13 @@ These scopes are used for theming the editor interface:
 | `ui.statusline.select`            | Statusline mode during select mode ([only if `editor.color-modes` is enabled][editor-section]) |
 | `ui.statusline.separator`         | Separator character in statusline                                                              |
 | `ui.bufferline`                   | Style for the buffer line                                                                      |
-| `ui.bufferline.active`            | Style for the active buffer in buffer line                                                        |
+| `ui.bufferline.active`            | Style for the active buffer in buffer line                                                     |
 | `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`                | Header row area 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.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(
-                if column.hidden {
+                Row::new(self.columns.iter().map(|column| {
-                    Cell::default()
+                    if column.hidden {
-                } else {
+                        Cell::default()
-                    let style = if active_column.is_some_and(|name| Arc::ptr_eq(name, &column.name))
-                    {
-                        cx.editor.theme.get("ui.picker.header.active")
                     } else {
-                        header_style
+                        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_column_style
+                            };
 
-                    Cell::from(Span::styled(Cow::from(&*column.name), style))
+                        Cell::from(Span::styled(Cow::from(&*column.name), style))
-                }
+                    }
-            })));
+                }))
+                .style(header_style),
+            );
         }
 
         use tui::widgets::TableState;