feat: add interactive picker #468

sei40kr · 2025-12-10T18:49:00Z

Summary

This PR adds an interactive fuzzy finder picker component for branch and commit selection:

Fuzzy matching with real-time filtering
Keyboard navigation (↓/↑, Ctrl-n/p)
Select/Cancel with Enter/Esc/Ctrl-c
Visual highlighting of matched characters

Implementation Details

New picker module with fuzzy matching logic
ui/picker for rendering the picker interface
Configurable keybinds and styling via config.toml
Test coverage for core picker functionality

Test Plan

Unit tests (only for state)

🤖 Generated with Claude Code

src/default_config.toml

src/ui/picker.rs

sei40kr · 2025-12-10T18:56:46Z

Since app.rs has become quite complex, it might be a good idea to adopt ratatui's component pattern.

src/ui/picker.rs

sei40kr · 2025-12-10T19:01:40Z

src/ui/picker.rs

+        layout_span(layout, (state.prompt_text.as_ref().into(), prompt_style));
+        layout_span(layout, (" › ".into(), Style::new().cyan().dim()));
+        layout_span(layout, (state.input_state.value().into(), Style::new()));
+        layout_span(layout, (CARET.into(), Style::new()));


I want to change the caret shape to indicate that it is in input mode.

src/ui/picker.rs

sei40kr · 2025-12-11T15:11:07Z

Testing Note

This PR adds the picker component itself, but it's not integrated into any operations yet. To test the picker functionality in action, please check out #470 which converts branch operations to use this picker:

gh pr checkout 470
cargo run

Then try branch operations like:

b b - Checkout branch (uses picker)
b x - Delete branch (uses picker)

You'll be able to see the fuzzy filtering, navigation, and selection in action.

Implement an interactive fuzzy finder picker component: - Fuzzy matching with real-time filtering - Keyboard navigation (↓/↑, Ctrl-n/p) - Select with Enter, cancel with Esc/Ctrl-c - Visual highlighting of matched characters Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

altsem · 2025-12-12T08:05:08Z

I just wanted to leave some answer at least. I'm a bit busy with other things, but I think this (and the search functionality too) are nice additions to Gitu. I'll try find some time to review and test this properly soon

sei40kr · 2025-12-24T16:39:52Z

Like LayoutTree does, Picker might also need to expand its standalone snapshot tests.
Issue #470 writes snapshot tests for the branch picker, but the patterns are extremely numerous. Writing these tests for every picker would be wasteful and difficult to maintain.

- Add picker UI layout tests with snapshots - Remove duplicate picker tests from src/tests/picker.rs - Consolidate case-insensitive test into src/picker.rs - Clean up 39 unreferenced snapshot files

Add tests covering generic picker functionality needed for branch selection and similar use cases: Logic tests (src/picker.rs): - Scrolling through many items (20+) - Navigation after filtering - Custom input selection with state transitions - Navigation with custom input at end of list UI tests (src/ui/picker.rs): - Scroll display at middle position - Scroll display near end - No matches display - Filtered results with navigation All tests are organized by category (basic → edge cases) and placed next to related tests for better maintainability.

sei40kr · 2025-12-25T19:18:07Z

Like LayoutTree does, Picker might also need to expand its standalone snapshot tests. Issue #470 writes snapshot tests for the branch picker, but the patterns are extremely numerous. Writing these tests for every picker would be wasteful and difficult to maintain.

Done.

altsem · 2025-12-28T10:24:01Z

README.md

+> [!NOTE]
+> Picker keybinds will be configurable in a future release.


Might as well do this right away. shouldn't be too much extra

@altsem
done: 1a64c11

altsem · 2025-12-28T11:08:46Z

Do you think a tab/shift-tab keybinding would be a nice default in addition to ctrl-n. ctrl-p?

Add support for customizing picker keybindings through the config file. Users can now configure next, previous, done, and cancel actions under [bindings.picker] section in their config.toml.

sei40kr · 2026-01-13T16:17:40Z

@altsem

Do you think a tab/shift-tab keybinding would be a nice default in addition to ctrl-n. ctrl-p?

I think that's a good idea. Especially for users familiar with Magit, many are likely accustomed to using Tab/Shift-Tab for navigation.

…picker # Conflicts: # Cargo.toml # src/tests/snapshots/gitu__tests__non_utf8_diff.snap

altsem · 2026-01-04T15:32:21Z

src/ui/picker.rs

+    base_style: Style,
+    config: &Config,
+) {
+    let graphemes: Vec<&str> = text.graphemes(true).collect();


Don't need to collect this before iterating, saves an allocation!

altsem · 2026-01-14T19:53:22Z

README.md

+selection_line = { mods = "BOLD" }               # Selected item style
+matched = { fg = "yellow", mods = "BOLD" }  # Fuzzy-matched characters highlight
+```
+


I think this doesn't belong in the README, it's a bit too specific. There's documentation about configuration inside of default_config.toml.
Having the code comments inside of default_config.toml seems like the better approach.

altsem · 2026-01-14T19:53:34Z

.pre-commit-config.yaml

altsem · 2026-01-14T20:00:02Z

src/config.rs

    }
 }

+pub struct PickerBindings {


I realize this was indeed not as smooth to add, due to how the existing bindings always relate to a menu.
Could clean it up in the future, think this is good enough for now!

altsem · 2026-01-14T20:22:05Z

src/default_config.toml

+picker.next = ["down", "ctrl+n"]
+picker.previous = ["up", "ctrl+p"]


I believe the tab bindings would be like this.

Suggested change

picker.next = ["down", "ctrl+n"]

picker.previous = ["up", "ctrl+p"]

picker.next = ["down", "ctrl+n", "tab"]

picker.previous = ["up", "ctrl+p", "shift+tab"]

altsem

Actually, I'll just merge this to master. And make the small adjustments i commented on. I think it looks pretty good!
I suppose in the other PR, things will get more interesting when it is actually put to use!