Right align scrollbar with track in completion popup (#2754)

- Align the scollbar to the right edge of the popup rather than at
  a margin of one.
- Add a scrollbar track and a new scope `ui.menu.scroll`.

4 files changed, 22 insertions, 7 deletions

diff --git a/book/src/themes.md b/book/src/themes.md
index 57a8d5d1..ea52835d 100644
--- a/book/src/themes.md
+++ b/book/src/themes.md
@@ -231,6 +231,7 @@ These scopes are used for theming the editor interface.
 | `ui.virtual.indent-guide` | Vertical indent width guides                   |
 | `ui.menu`                 | Code and command completion menus              |
 | `ui.menu.selected`        | Selected autocomplete item                     |
+| `ui.menu.scroll`          | `fg` sets thumb color, `bg` sets track color of scrollbar |
 | `ui.selection`            | For selections in the editing area             |
 | `ui.selection.primary`    |                                                |
 | `warning`                 | Diagnostics warning (gutter)                   |
diff --git a/helix-term/src/ui/menu.rs b/helix-term/src/ui/menu.rs
index fa56008d..0519374a 100644
--- a/helix-term/src/ui/menu.rs
+++ b/helix-term/src/ui/menu.rs
@@ -310,7 +310,7 @@ impl<T: Item + 'static> Component for Menu<T> {
         use tui::widgets::TableState;
 
         table.render_table(
-            area.clip_left(Self::LEFT_PADDING as u16),
+            area.clip_left(Self::LEFT_PADDING as u16).clip_right(1),
             surface,
             &mut TableState {
                 offset: scroll,
@@ -320,20 +320,32 @@ impl<T: Item + 'static> Component for Menu<T> {
 
         if let Some(cursor) = self.cursor {
             let offset_from_top = cursor - scroll;
-            let cell = &mut surface[(area.x, area.y + offset_from_top as u16)];
-            cell.set_style(selected);
+            let left = &mut surface[(area.left(), area.y + offset_from_top as u16)];
+            left.set_style(selected);
+            let right = &mut surface[(
+                area.right().saturating_sub(1),
+                area.y + offset_from_top as u16,
+            )];
+            right.set_style(selected);
         }
 
         let fits = len <= win_height;
 
+        let scroll_style = theme.get("ui.menu.scroll");
         for (i, _) in (scroll..(scroll + win_height).min(len)).enumerate() {
+            let cell = &mut surface[(area.x + area.width - 1, area.y + i as u16)];
+
+            if !fits {
+                // Draw scroll track
+                cell.set_symbol("▐"); // right half block
+                cell.set_fg(scroll_style.bg.unwrap_or(helix_view::theme::Color::Reset));
+            }
+
             let is_marked = i >= scroll_line && i < scroll_line + scroll_height;
 
             if !fits && is_marked {
-                let cell = &mut surface[(area.x + area.width - 2, area.y + i as u16)];
-                cell.set_symbol("▐");
-                // cell.set_style(selected);
-                // cell.set_style(if is_marked { selected } else { style });
+                // Draw scroll thumb
+                cell.set_fg(scroll_style.fg.unwrap_or(helix_view::theme::Color::Reset));
             }
         }
     }
diff --git a/runtime/themes/onedark.toml b/runtime/themes/onedark.toml
index d0cbb949..a4d05ca8 100644
--- a/runtime/themes/onedark.toml
+++ b/runtime/themes/onedark.toml
@@ -73,6 +73,7 @@ diagnostic = { modifiers = ["underlined"] }
 "ui.window" = { bg = "gray" }
 "ui.menu" = { fg = "white", bg = "gray" }
 "ui.menu.selected" = { fg = "black", bg = "blue" }
+"ui.menu.scroll" = { fg = "white", bg = "light-gray" }
 
 [palette]
 
diff --git a/theme.toml b/theme.toml
index 8e550f92..3fc694e4 100644
--- a/theme.toml
+++ b/theme.toml
@@ -69,6 +69,7 @@ label = "honey"
 
 "ui.menu" = { fg = "lavender", bg = "revolver" }
 "ui.menu.selected" = { fg = "revolver", bg = "white" }
+"ui.menu.scroll" = { fg = "lavender", bg = "comet" }
 
 diagnostic = { modifiers = ["underlined"] }
 # "diagnostic.hint" = { fg = "revolver", bg = "lilac" }