changes:

- styling for the list component
- added and input component for the options provider

Author: yashranjan1

internal/tui/components/OptionsProvider/component.go

@@ -3,15 +3,27 @@ package optionsProvider
 import (
 	"context"
 
+	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/list"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+	"github.com/maniac-en/req/internal/tui/keybinds"
+)
+
+type focusedComp string
+
+const (
+	listComponent = "list"
+	textComponent = "text"
 )
 
 type OptionsProvider struct {
 	list           list.Model
+	input          OptionsInput
 	onSelectAction tea.Msg
 	width          int
 	height         int
+	focused        focusedComp
 }
 
 type Option struct {
@@ -38,25 +50,38 @@ func (o OptionsProvider) Update(msg tea.Msg) (OptionsProvider, tea.Cmd) {
 		o.width = msg.Width
 		o.list.SetSize(o.list.Width(), o.height)
 	case tea.KeyMsg:
-
-		o.list, cmd = o.list.Update(msg)
-		cmds = append(cmds, cmd)
-
-		switch msg.String() {
-
-		default:
+		switch o.focused {
+		case listComponent:
+			if !o.IsFiltering() {
+				switch {
+				case key.Matches(msg, keybinds.Keys.InsertItem):
+					o.list.SetSize(o.list.Width(), o.height-lipgloss.Height(o.input.View()))
+					o.input.OnFocus()
+					o.focused = textComponent
+					return o, tea.Batch(cmds...)
+				}
+			}
 		}
 
 	}
+	switch o.focused {
+	case listComponent:
+		o.list, cmd = o.list.Update(msg)
+	case textComponent:
+		o.input, cmd = o.input.Update(msg)
+	}
+	cmds = append(cmds, cmd)
 	return o, tea.Batch(cmds...)
 }
 
 func (o OptionsProvider) View() string {
+	if o.focused == textComponent {
+		return lipgloss.JoinVertical(lipgloss.Left, o.list.View(), o.input.View())
+	}
 	return o.list.View()
 }
 
-func (o OptionsProvider) OnFocus() {
-
+func (o *OptionsProvider) OnFocus() {
 }
 
 func (o OptionsProvider) OnBlur() {
@@ -67,6 +92,10 @@ func (o OptionsProvider) GetSelected() Option {
 	return o.list.SelectedItem().(Option)
 }
 
+func (o OptionsProvider) IsFiltering() bool {
+	return o.list.FilterState() == list.Filtering
+}
+
 func initList[T, U any](config *ListConfig[T, U]) list.Model {
 
 	rawItems, err := config.CrudOps.List(context.Background())
@@ -77,7 +106,7 @@ func initList[T, U any](config *ListConfig[T, U]) list.Model {
 
 	items := config.ItemMapper(rawItems)
 
-	list := list.New(items, list.NewDefaultDelegate(), 30, 30)
+	list := list.New(items, config.Delegate, 30, 30)
 
 	// list configuration
 	list.SetFilteringEnabled(config.FilteringEnabled)
@@ -93,7 +122,9 @@ func initList[T, U any](config *ListConfig[T, U]) list.Model {
 
 func NewOptionsProvider[T, U any](config *ListConfig[T, U]) OptionsProvider {
 	return OptionsProvider{
-		list: initList(config),
+		list:    initList(config),
+		focused: listComponent,
+		input:   NewOptionsInput(),
 		// onSelectAction: config.OnSelectAction,
 	}
 }

internal/tui/components/OptionsProvider/input.go

@@ -0,0 +1,58 @@
+package optionsProvider
+
+import (
+	"github.com/charmbracelet/bubbles/textinput"
+	tea "github.com/charmbracelet/bubbletea"
+)
+
+type OptionsInput struct {
+	input  textinput.Model
+	height int
+	width  int
+	editId int
+}
+
+func NewOptionsInput() OptionsInput {
+	input := textinput.New()
+	input.CharLimit = 100
+	input.Placeholder = "Add New Collection..."
+	input.Width = 22
+	return OptionsInput{
+		input:  input,
+		editId: -1,
+	}
+}
+
+func (i OptionsInput) Init() tea.Cmd {
+	return nil
+}
+
+func (i OptionsInput) Update(msg tea.Msg) (OptionsInput, tea.Cmd) {
+	var cmd tea.Cmd
+	var cmds []tea.Cmd
+
+	i.input, cmd = i.input.Update(msg)
+	cmds = append(cmds, cmd)
+
+	return i, tea.Batch(cmds...)
+}
+
+func (i OptionsInput) View() string {
+	return i.input.View()
+}
+
+func (i *OptionsInput) SetInput(text string) {
+	i.input.SetValue(text)
+}
+
+func (i *OptionsInput) OnFocus(id ...int) {
+	if len(id) > 0 {
+		i.editId = id[0]
+	}
+	i.input.Focus()
+}
+
+func (i *OptionsInput) OnBlur() {
+	i.editId = -1
+	i.input.Blur()
+}

internal/tui/styles/collections-styles.go

@@ -0,0 +1,7 @@
+package styles
+
+import "github.com/charmbracelet/lipgloss"
+
+var (
+	SelectedListStyle = lipgloss.NewStyle().Foreground(accent).PaddingLeft(1).Border(lipgloss.NormalBorder(), false, false, false, true).BorderForeground(accent)
+)

internal/tui/views/collections-view-helper.go

@@ -1,16 +1,29 @@
 package views
 
 import (
+	"github.com/charmbracelet/bubbles/list"
 	optionsProvider "github.com/maniac-en/req/internal/tui/components/OptionsProvider"
+	"github.com/maniac-en/req/internal/tui/styles"
 )
 
+func createDelegate() list.DefaultDelegate {
+	d := list.NewDefaultDelegate()
+
+	d.Styles.SelectedTitle = styles.SelectedListStyle
+	d.Styles.SelectedDesc = styles.SelectedListStyle
+
+	return d
+}
+
 func defaultListConfig[T, U any]() *optionsProvider.ListConfig[T, U] {
 	config := optionsProvider.ListConfig[T, U]{
 		ShowPagination:   false,
 		ShowStatusBar:    false,
 		ShowHelp:         false,
 		ShowTitle:        false,
 		FilteringEnabled: true,
+
+		Delegate: createDelegate(),
 	}
 	return &config
 }