[tui] Add ListComponent with multi-select and batch operations #438

nightscape · 2025-11-07T19:30:49Z

Description

Implements a reusable, interactive list widget component that provides:

Multi-item selection with visual indicators
Keyboard-driven navigation and batch operations
Trait-based customization for domain-specific items
TodoList demo application showcasing all features

This PR adds foundational Phase 1 support with fixed-height items. Future work will add Phase 2 (variable-height items
with dynamic layout).

Checklist

I have added tests that prove my fix is effective or that my feature works (410 lines of tests in
test_list_component.rs)
I have manually tested my changes and they work as intended (interactive demo at cargo run --example tui_apps,
option 4)
I have read the https://github.com/r3bl-org/r3bl-open-core/blob/main/docs/contributing_guides/PULL_REQUEST.md

What Changed

Core Implementation (tui/src/tui/list/) - ~1,850 lines

Architecture:

list_item_trait.rs - ListItem<S, AS> trait for custom item rendering/events
list_component_struct.rs - Component state (cursor, selection, viewport, batch actions)
list_component_impl.rs - Navigation logic and event routing
test_list_component.rs - Comprehensive unit tests

Key Features:

Navigation - Arrow keys, PageUp/PageDown, Home/End with viewport scrolling
Multi-select - Space bar selection with selected_ids tracking
Batch Actions - Custom key bindings for bulk operations on selected items
Type Safety - ListItemId wrapper prevents index/ID confusion

Demo Application (tui/examples/tui_apps/ex_list_component/)

TodoList example demonstrates:

Custom ListItem implementation with priority levels and completion status
Batch actions: Delete (d), Complete (c), Set High Priority (h)
Per-item actions: Toggle completion (t), Cycle priority (p)
Full TUI layout with help text and status messages

How to Test

cargo run --example tui_apps
# Select option 4: "ListComponent demo (TodoList...)"

Keybindings:

↑/↓ - Navigate items
Space - Toggle selection
t - Toggle item completion
p - Cycle item priority
d - Delete selected (batch)
c - Complete selected (batch)
h - Set high priority (batch)
q - Quit

Files Changed

12 files, 1,859 insertions
New module: tui/src/tui/list/ (4 files)
New example: tui/examples/tui_apps/ex_list_component/ (4 files)
Updated: tui/examples/tui_apps/main.rs (menu integration)

- step 8 of docs/task_remove_crossterm.md - Reorganize the entire src/core/ansi/ module for semantic clarity - Clean structure of tui/src/tui/terminal_lib_backends/direct_to_ansi/ - Formalize mod.rs standards in CLAUDE.md

…based_input_device_test.rs

…with real examples or comments

╱╲ ╱ ╲ Integration (generated) - System testing ╱────╲ ╱ ╲ Unit (generated) - Component testing ╱────────╲ ╱ ╲ Validation (hardcoded) - Acceptance testing ╱────────────╲ | Level | Purpose | Sequences | Why | |-------------|--------------------------------|-----------|-----------------------------------------| | Validation | Spec compliance & Ground truth | Hardcoded | Independent reference (VT-100 protocol) | | Unit | Component contracts | Generated | Round-trip (generator ↔ parser) | | Integration | System behavior | Generated | Real-world usage pattern | The `test_fixtures` module is shared between the unit, and integration tests only.

…readability

Complete Step 8.2.1 -> Phase 7.1.1

…ants Execution of plan in: docs/task_refactor_input_device.md

✅ Custom Slash Command /task Location: .claude/commands/task.md Valid operations (referenced as $1 argument): - create - Creates a new task file from your planning/todo list - update - Updates progress status in an existing task file - load - Loads an existing task file and resumes work Expected task file format (referenced as $2 argument): - Creates/loads files at ./task/$2.md ✅ Task File Rules task/CLAUDE.md Location: task/CLAUDE.md Enforces proper structure: [doctoc auto-generated TOC] Valid status codes: - [COMPLETE] - [WORK_IN_PROGRESS] - [BLOCKED] - [DEFERRED] Formatting requirements: - Use doctoc to auto-generate table of contents - Use prettier for markdown formatting The system is properly configured and ready to use. Both the slash command and the task file template follow the documented conventions for managing long-running tasks in this project.

…sk/ folder structure Separate the concerns by moving task workflow management files from the documentation folder to a dedicated task management structure: **File Migration Summary:** - Moved 15 completed tasks to `task/done/` - Moved 4 active tasks to `task/` - Moved 10 future tasks to `task/pending/` - Total: 30 task files reorganized **Folder Structure:** - `task/` - Currently active tasks being worked on - `task/done/` - Completed tasks with historical context - `task/pending/` - Tasks planned for future work - `task/archive/` - Historical/archived tasks (for future use) **References Updated:** - Updated 18 task file references in `todo.md` to reflect new paths - Updated 8 task file references in `done.md` to reflect new paths - Updated configuration in `.claude/commands/task.md` and `CLAUDE.md` **Preservation:** - Used `git mv` for all file moves to preserve complete commit history - All markdown links and references remain functional This reorganization aligns with the project's separation of concerns principle: - `docs/` folder: Documentation and guides - `task/` folder: Workflow management and task tracking

…rd for single file task management This commit restructures all the files in task/* to follow CLAUDE.md task management standards, ensuring consistency with the project's task documentation guidelines

…nversions from IR types - Refactor the InputDevice entirely and separate direct_to_ansi, mock, and crossterm support. - Use terminal_io/InputEvent, etc. where ever possible in the codebase. - VT100 parsing needs IR types to impl the parsing logic. Provide a clean conversion route to the canonical types from the parser. Tracking task: task/task_refactor_input_device.md

word_boundaries: - Add tui/src/core/graphemes/word_boundaries mod - Reusable word boundary checking functions - Can be used in editor as well as readline_async readline_async: - Add keybindings to readline_async: - Ctrl+D on empty line (exits) - Ctrl+D on non-empty line (deletes char) - Ctrl+W with "hello world" → "hello " - Ctrl+W with "hello-world" → "hello-" - Ctrl+Left with "hello-world|" → "hello-|world" - Ctrl+Right with "|hello-world" → "hello-|world" - Alt+B backward word - Alt+F forward word - Alt+D word deletion - Alt+Backspace word deletion - Edge cases: beginning/end of - Unicode: emoji, multi-byte chars - Add comprehensive unit tests - Add PTY isolated integration tests (that spawns the test in a pty slave and the pty master sends byte sequences for end to end testing)

terminal_raw_mode mod: - Fix terminal_raw_mode enable / disable raw mode fns - Add robust integration_tests to ensure the code works readline_async mod: - Fix bugs - Add missing features - Add comprehensive integration tests core/ansi/vt_100_terminal_input_parser/keyboard.rs: - Fix bugs - Add missing features (critical shortcut support) - Add comprehensive integration tests word_boundaries mod: - Add missing features task/task_readline_async_add_shortcuts.md: - Create task to add more shortcuts to readline_async for feature parity with readline WIP

core/ansi/vt_100_terminal_input_parser/ mod: - Remove magic strings and use constants - Don't use match statements w/ constants and use if statement instead - Fix clippy lints

nazmulidris added 30 commits October 28, 2025 10:41

[tui] Implement input handling for DirectToAnsi for Linux

befaadd

- step 8 of docs/task_remove_crossterm.md - Reorganize the entire src/core/ansi/ module for semantic clarity - Clean structure of tui/src/tui/terminal_lib_backends/direct_to_ansi/ - Formalize mod.rs standards in CLAUDE.md

WIP - keyboard.rs

0ee78a3

WIP - ground truth from stdin (mouse is 1 based)

9140a94

WIP - Rename vt_100_ansi_parser -> vt_100_pty_output_parser

a0e96d3

WIP - Update Step 8.2 remaining tasks

8becbb6

WIP - Step 8, Phase 7 - Impl DirectToAnsi InputDevice

7b3d0b9

WIP - Verify that DirectToAnsi input handling works

24fce09

WIP - Implement raw mode enable & disable in ansi mod

81c2265

WIP - Add tests for terminal_raw_mode.rs based on PTY testing in pty_…

914cdee

…based_input_device_test.rs

WIP - Add test fixture to run isolated test process with PTY

c2870ff

WIP - Refactor terminal_raw_mode.rs file into a module

4d3f0c8

WIP - get parity with crossterm 0.29.0 input handling

fbd5152

WIP - Refactor the generate_pty_test test fixture to be more ergonomic

8c76f66

WIP - Address all the ignore rustdoc test code and remove or replace …

7536f6e

…with real examples or comments

WIP - Step 8.2.1 Phase 7

490330c

WIP - Move TermPos to its rightful location

fb48b9f

WIP - Remove no-value tests

a2262e2

WIP - Replace hardcoded magic numbers with enums, const, and fns for …

b5a3009

…readability

WIP - Update task_remove_crossterm.md

4a998e6

Complete Step 8.2.1 -> Phase 7.1.1

WIP - Unify InputDevice with mock, crossterm, and direct_to_ansi vari…

c20f94a

…ants Execution of plan in: docs/task_refactor_input_device.md

WIP - Use subagents in claude

38f4941

WIP - Migrate all the existing files to the new task/CLAUDE.md standa…

9a7e6ad

…rd for single file task management This commit restructures all the files in task/* to follow CLAUDE.md task management standards, ensuring consistency with the project's task documentation guidelines

WIP - Refactor 5 PTY integration tests for readline_async

6ac37da

WIP - Add mouse example

6b4fd75

core/ansi/vt_100_terminal_input_parser/ mod: - Remove magic strings and use constants - Don't use match statements w/ constants and use if statement instead - Fix clippy lints

nazmulidris force-pushed the main branch 24 times, most recently from 787028e to 96c11e3 Compare December 7, 2025 20:44

nazmulidris force-pushed the main branch 6 times, most recently from 8eeef51 to 5be7c66 Compare December 9, 2025 20:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[tui] Add ListComponent with multi-select and batch operations #438

[tui] Add ListComponent with multi-select and batch operations #438

nightscape commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

[tui] Add ListComponent with multi-select and batch operations #438

Are you sure you want to change the base?

[tui] Add ListComponent with multi-select and batch operations #438

Conversation

nightscape commented Nov 7, 2025

Description

Checklist

What Changed

Core Implementation (tui/src/tui/list/) - ~1,850 lines

Architecture:

Key Features:

Demo Application (tui/examples/tui_apps/ex_list_component/)

How to Test

Keybindings:

Files Changed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants