feat(cortex-tui): add scrollbar support to dropdown menus (#216)

Replace simple scroll indicators (^/v) with proper visual scrollbars
in all dropdown menu components:

- AutocompletePopup: Command and mention autocomplete menus now display
  a scrollbar when items exceed the visible area
- SelectionList: Generic selection lists now use scrollbar instead of
  arrow indicators
- MentionPopup: File mention popup now has proper scrollbar support
- ScrollableDropdown: New centralized reusable dropdown component with
  scrollbar that can be used by other dropdown menus

The scrollbar improves UX by showing the current scroll position and
total content size, making it clearer when there are more items above
or below the visible area.

Co-authored-by: Droid Agent <droid@factory.ai>

Author: echobt

cortex-tui/src/widgets/autocomplete.rs

@@ -23,7 +23,9 @@ use cortex_core::style::{
 };
 use ratatui::prelude::*;
 use ratatui::symbols::border::Set as BorderSet;
-use ratatui::widgets::{Block, Borders, Clear, Widget};
+use ratatui::widgets::{
+    Block, Borders, Clear, Scrollbar, ScrollbarOrientation, ScrollbarState, StatefulWidget, Widget,
+};
 
 /// Custom rounded border set.
 const ROUNDED_BORDER: BorderSet = BorderSet {
@@ -245,6 +247,9 @@ impl Widget for AutocompletePopup<'_> {
         let inner = block.inner(popup_area);
         block.render(popup_area, buf);
 
+        // Check if we need scrollbar
+        let needs_scrollbar = self.state.items.len() > self.state.max_visible;
+
         // Render items
         let visible_items = self.state.visible_items();
         for (i, item) in visible_items.iter().enumerate() {
@@ -253,40 +258,50 @@ impl Widget for AutocompletePopup<'_> {
                 break;
             }
 
+            // Reserve space for scrollbar on the right if needed
+            let item_width = if needs_scrollbar {
+                inner.width.saturating_sub(1)
+            } else {
+                inner.width
+            };
+
             let item_area = Rect {
                 x: inner.x,
                 y,
-                width: inner.width,
+                width: item_width,
                 height: 1,
             };
 
             let is_selected = self.state.scroll_offset + i == self.state.selected;
             self.render_item(item, is_selected, item_area, buf);
         }
 
-        // Scroll indicators if needed
-        if self.state.scroll_offset > 0 {
-            // Show "more above" indicator
-            let style = Style::default().fg(TEXT_MUTED).bg(SURFACE_1);
-            if let Some(cell) = buf.cell_mut((popup_area.x + popup_area.width - 2, popup_area.y)) {
-                cell.set_char('^').set_style(style);
-            }
-        }
+        // Render scrollbar if needed
+        if needs_scrollbar {
+            // Create scrollbar state
+            // content_length = total items
+            // position = selected item for proper thumb position
+            let total_items = self.state.items.len();
+            let mut scrollbar_state =
+                ScrollbarState::new(total_items).position(self.state.selected);
+
+            // Define scrollbar area (right side of the inner content area)
+            let scrollbar_area = Rect {
+                x: inner.right().saturating_sub(1),
+                y: inner.y,
+                width: 1,
+                height: inner.height,
+            };
 
-        let max_offset = self
-            .state
-            .items
-            .len()
-            .saturating_sub(self.state.max_visible);
-        if self.state.scroll_offset < max_offset {
-            // Show "more below" indicator
-            let style = Style::default().fg(TEXT_MUTED).bg(SURFACE_1);
-            if let Some(cell) = buf.cell_mut((
-                popup_area.x + popup_area.width - 2,
-                popup_area.y + popup_area.height - 1,
-            )) {
-                cell.set_char('v').set_style(style);
-            }
+            // Render scrollbar
+            Scrollbar::new(ScrollbarOrientation::VerticalRight)
+                .begin_symbol(None)
+                .end_symbol(None)
+                .track_symbol(Some("│"))
+                .track_style(Style::default().fg(SURFACE_1))
+                .thumb_symbol("█")
+                .thumb_style(Style::default().fg(TEXT_MUTED))
+                .render(scrollbar_area, buf, &mut scrollbar_state);
         }
     }
 }

cortex-tui/src/widgets/mention_popup.rs

@@ -20,7 +20,9 @@ use cortex_core::style::{
 };
 use ratatui::prelude::*;
 use ratatui::symbols::border::Set as BorderSet;
-use ratatui::widgets::{Block, Borders, Clear, Widget};
+use ratatui::widgets::{
+    Block, Borders, Clear, Scrollbar, ScrollbarOrientation, ScrollbarState, StatefulWidget, Widget,
+};
 use std::path::Path;
 
 /// Custom rounded border set.
@@ -240,6 +242,10 @@ impl Widget for MentionPopup<'_> {
         let inner = block.inner(popup_area);
         block.render(popup_area, buf);
 
+        // Check if we need scrollbar
+        let total_results = self.state.results().len();
+        let needs_scrollbar = self.state.has_more_above() || self.state.has_more_below();
+
         // Render items
         let visible = self.state.visible_results();
         for (i, path) in visible.iter().enumerate() {
@@ -248,28 +254,42 @@ impl Widget for MentionPopup<'_> {
                 break;
             }
 
-            let item_area = Rect::new(inner.x, y, inner.width, 1);
+            // Reserve space for scrollbar on the right if needed
+            let item_width = if needs_scrollbar {
+                inner.width.saturating_sub(1)
+            } else {
+                inner.width
+            };
+
+            let item_area = Rect::new(inner.x, y, item_width, 1);
             let is_selected = i == self.state.selected_visible();
 
             self.render_item(path, i, is_selected, item_area, buf);
         }
 
-        // Scroll indicators
-        if self.state.has_more_above() {
-            let style = Style::default().fg(TEXT_MUTED);
-            if let Some(cell) = buf.cell_mut((popup_area.x + popup_area.width - 2, popup_area.y)) {
-                cell.set_char('▲').set_style(style);
-            }
-        }
-
-        if self.state.has_more_below() {
-            let style = Style::default().fg(TEXT_MUTED);
-            if let Some(cell) = buf.cell_mut((
-                popup_area.x + popup_area.width - 2,
-                popup_area.y + popup_area.height - 1,
-            )) {
-                cell.set_char('▼').set_style(style);
-            }
+        // Render scrollbar if needed
+        if needs_scrollbar {
+            // Create scrollbar state
+            let mut scrollbar_state =
+                ScrollbarState::new(total_results).position(self.state.selected());
+
+            // Define scrollbar area (right side of inner area)
+            let scrollbar_area = Rect {
+                x: inner.right().saturating_sub(1),
+                y: inner.y,
+                width: 1,
+                height: inner.height,
+            };
+
+            // Render scrollbar
+            Scrollbar::new(ScrollbarOrientation::VerticalRight)
+                .begin_symbol(None)
+                .end_symbol(None)
+                .track_symbol(Some("│"))
+                .track_style(Style::default().fg(SURFACE_1))
+                .thumb_symbol("█")
+                .thumb_style(Style::default().fg(TEXT_MUTED))
+                .render(scrollbar_area, buf, &mut scrollbar_state);
         }
     }
 }

cortex-tui/src/widgets/mod.rs

@@ -28,6 +28,7 @@ pub mod key_hints;
 pub mod mention_popup;
 pub mod model_picker;
 // pub mod provider_picker; // REMOVED (single Cortex provider)
+pub mod scrollable_dropdown;
 pub mod selection_list;
 pub mod status_indicator;
 pub mod toast;
@@ -48,6 +49,10 @@ pub use key_hints::{HintContext, KeyHints};
 pub use mention_popup::MentionPopup;
 pub use model_picker::{ModelItem, ModelPicker, ModelPickerState};
 // pub use provider_picker::{PickerFocus, ProviderItem, ProviderPicker, ProviderPickerState}; // REMOVED (single Cortex provider)
+pub use scrollable_dropdown::{
+    DropdownItem, DropdownPosition, ScrollableDropdown, ScrollbarStyle, calculate_scroll_offset,
+    select_next, select_prev,
+};
 pub use selection_list::{SelectionItem, SelectionList, SelectionResult};
 pub use status_indicator::{StatusIndicator, fmt_elapsed_compact};
 pub use toast::{Toast, ToastLevel, ToastManager, ToastPosition, ToastWidget};