Skip to content

Add mouse support for tab switching in interactive UI #331

Description

@evgheni7

Summary

Add mouse support to allow users to click on Configuration, Provider, and Function tabs to switch between them in the interactive UI, similar to the bubblezone example.

Current Behavior

Currently, users can only switch between tabs using keyboard navigation (likely Tab key or arrow keys).

Desired Behavior

Users should be able to click directly on the tab headers (Configurations, Providers, Functions) to switch between views, providing a more intuitive user experience.

Implementation Reference

The bubblezone library provides a good example of implementing mouse zones in Bubble Tea applications:

Implementation Details

Key files to modify:

  • internal/interactive/ui/models.go - Add mouse zone support to the model
  • internal/interactive/ui/view.go - Wrap tab headers with mouse zones
  • internal/interactive/ui/update.go - Handle mouse click events for tab switching

Suggested Approach

  1. Add bubblezone as a dependency
  2. Define zones for each tab header
  3. Wrap tab text with zone.Mark() in the view
  4. Handle mouse events in the Update method to detect clicks on zones
  5. Switch active tab when a zone is clicked

Benefits

  • Improved UX: More intuitive navigation for users familiar with GUI interfaces
  • Accessibility: Provides an alternative input method beyond keyboard
  • Modern Feel: Aligns with user expectations from modern TUI applications

Testing Requirements

  • Mouse clicks on tab headers switch to the corresponding tab
  • Keyboard navigation continues to work as before
  • Visual feedback on hover (if implementing hover states)
  • Works across different terminal emulators that support mouse events

Additional Considerations

  • Ensure graceful fallback for terminals that don't support mouse events
  • Consider adding visual hover states for better user feedback
  • Maintain keyboard-first design while adding mouse as enhancement

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions