adding search feature to card list view (#233)

Author: digitalghost-dev

cmd/card/cardlist.go

@@ -5,9 +5,11 @@ import (
 	"fmt"
 	"io"
 	"net/http"
+	"strings"
 	"time"
 
 	"github.com/charmbracelet/bubbles/table"
+	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/digitalghost-dev/poke-cli/styling"
@@ -19,13 +21,42 @@ type CardsModel struct {
 	ImageMap          map[string]string
 	PriceMap          map[string]string
 	RegulationMarkMap map[string]string
+	AllRows           []table.Row
 	Quitting          bool
+	Search            textinput.Model
 	SelectedOption    string
 	SeriesName        string
 	Table             table.Model
+	TableStyles       table.Styles
 	ViewImage         bool
 }
 
+const (
+	activeTableSelectedBg   lipgloss.Color = "#FFCC00"
+	inactiveTableSelectedBg lipgloss.Color = "#808080"
+)
+
+func cardTableStyles(selectedBg lipgloss.Color) table.Styles {
+	s := table.DefaultStyles()
+	s.Header = s.Header.
+		BorderStyle(lipgloss.NormalBorder()).
+		BorderForeground(lipgloss.Color("#FFCC00")).
+		BorderBottom(true)
+	s.Selected = s.Selected.
+		Foreground(lipgloss.Color("#000")).
+		Background(selectedBg)
+	return s
+}
+
+func (m *CardsModel) syncTableStylesForFocus() {
+	if m.Search.Focused() {
+		m.TableStyles = cardTableStyles(inactiveTableSelectedBg)
+	} else {
+		m.TableStyles = cardTableStyles(activeTableSelectedBg)
+	}
+	m.Table.SetStyles(m.TableStyles)
+}
+
 func (m CardsModel) Init() tea.Cmd {
 	return nil
 }
@@ -36,16 +67,46 @@ func (m CardsModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch msg.String() {
-		case "esc", "ctrl+c":
+		case "ctrl+c":
 			m.Quitting = true
 			return m, tea.Quit
-		case " ":
-			m.ViewImage = true
+		case "esc":
+			// If in the search bar, exit search mode instead of quitting.
+			if m.Search.Focused() {
+				m.Search.Blur()
+				m.Table.Focus()
+				m.syncTableStylesForFocus()
+				return m, nil
+			}
+			m.Quitting = true
 			return m, tea.Quit
+		case "?":
+			if !m.Search.Focused() {
+				m.ViewImage = true
+				return m, tea.Quit
+			}
+		case "tab":
+			if m.Search.Focused() {
+				m.Search.Blur()
+				m.Table.Focus()
+			} else {
+				m.Table.Blur()
+				m.Search.Focus()
+			}
+			m.syncTableStylesForFocus()
+			return m, nil
 		}
 	}
 
-	m.Table, bubbleCmd = m.Table.Update(msg)
+	if m.Search.Focused() {
+		prev := m.Search.Value()
+		m.Search, bubbleCmd = m.Search.Update(msg)
+		if m.Search.Value() != prev {
+			m.applyFilter()
+		}
+	} else {
+		m.Table, bubbleCmd = m.Table.Update(msg)
+	}
 
 	// Keep the selected option in sync on every update
 	if row := m.Table.SelectedRow(); len(row) > 0 {
@@ -58,6 +119,28 @@ func (m CardsModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	return m, bubbleCmd
 }
 
+func (m *CardsModel) applyFilter() {
+	q := strings.TrimSpace(strings.ToLower(m.Search.Value()))
+	if q == "" {
+		m.Table.SetRows(m.AllRows)
+		m.Table.SetCursor(0)
+		return
+	}
+
+	filtered := make([]table.Row, 0, len(m.AllRows))
+	for _, r := range m.AllRows {
+		if len(r) == 0 {
+			continue
+		}
+		if strings.Contains(strings.ToLower(r[0]), q) {
+			filtered = append(filtered, r)
+		}
+	}
+
+	m.Table.SetRows(filtered)
+	m.Table.SetCursor(0)
+}
+
 func (m CardsModel) View() string {
 	if m.Quitting {
 		return "\n  Quitting card search...\n\n"
@@ -75,7 +158,8 @@ func (m CardsModel) View() string {
 		selectedCard = cardName + "\n---\n" + price + "\n---\n" + illustrator + "\n---\n" + regulationMark
 	}
 
-	leftPanel := styling.TypesTableBorder.Render(m.Table.View())
+	leftContent := lipgloss.JoinVertical(lipgloss.Left, m.Search.View(), m.Table.View())
+	leftPanel := styling.TypesTableBorder.Render(leftContent)
 
 	rightPanel := lipgloss.NewStyle().
 		Width(40).
@@ -87,9 +171,10 @@ func (m CardsModel) View() string {
 
 	screen := lipgloss.JoinHorizontal(lipgloss.Top, leftPanel, rightPanel)
 
-	return fmt.Sprintf("Highlight a card!\n%s\n%s",
+	return fmt.Sprintf(
+		"Highlight a card!\n%s\n%s",
 		screen,
-		styling.KeyMenu.Render("↑ (move up)\n↓ (move down)\nspace (view image)\nctrl+c | esc (quit)"))
+		styling.KeyMenu.Render("↑ (move up)\n↓ (move down)\n? (view image)\ntab (toggle search)\nctrl+c | esc (quit)"))
 }
 
 type cardData struct {
@@ -117,10 +202,13 @@ func CardsList(setID string) (CardsModel, error) {
 
 	// Extract card names and build table rows + price map
 	rows := make([]table.Row, len(allCards))
+	allRows := rows
+
 	priceMap := make(map[string]string)
 	imageMap := make(map[string]string)
 	illustratorMap := make(map[string]string)
 	regulationMarkMap := make(map[string]string)
+
 	for i, card := range allCards {
 		rows[i] = []string{card.NumberPlusName}
 		if card.MarketPrice != 0 {
@@ -144,29 +232,32 @@ func CardsList(setID string) (CardsModel, error) {
 		imageMap[card.NumberPlusName] = card.ImageURL
 	}
 
+	ti := textinput.New()
+	ti.Placeholder = "type name..."
+	ti.Prompt = "🔎 "
+	ti.CharLimit = 24
+	ti.Width = 30
+	ti.Blur()
+
 	t := table.New(
 		table.WithColumns([]table.Column{{Title: "Card Name", Width: 35}}),
 		table.WithRows(rows),
 		table.WithFocused(true),
-		table.WithHeight(28),
+		table.WithHeight(27),
 	)
 
-	s := table.DefaultStyles()
-	s.Header = s.Header.
-		BorderStyle(lipgloss.NormalBorder()).
-		BorderForeground(lipgloss.Color("#FFCC00")).
-		BorderBottom(true)
-	s.Selected = s.Selected.
-		Foreground(lipgloss.Color("#000")).
-		Background(lipgloss.Color("#FFCC00"))
-	t.SetStyles(s)
+	styles := cardTableStyles(activeTableSelectedBg)
+	t.SetStyles(styles)
 
 	return CardsModel{
-		IllustratorMap: illustratorMap,
-		ImageMap:       imageMap,
-		PriceMap:       priceMap,
-		RegulationMarkMap:  regulationMarkMap,
-		Table:          t,
+		AllRows:           allRows,
+		IllustratorMap:    illustratorMap,
+		ImageMap:          imageMap,
+		PriceMap:          priceMap,
+		RegulationMarkMap: regulationMarkMap,
+		Search:            ti,
+		Table:             t,
+		TableStyles:       styles,
 	}, nil
 }
 

cmd/card/cardlist_test.go

@@ -8,6 +8,7 @@ import (
 	"testing"
 
 	"github.com/charmbracelet/bubbles/table"
+	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 )
 
@@ -91,7 +92,58 @@ func TestCardsModel_Update_CtrlC(t *testing.T) {
 	}
 }
 
-func TestCardsModel_Update_SpaceBar(t *testing.T) {
+func TestCardsModel_Update_TabTogglesSearchFocusAndTableSelectedBackground(t *testing.T) {
+	rows := []table.Row{{"001/198 - Bulbasaur"}}
+	columns := []table.Column{{Title: "Card Name", Width: 35}}
+
+	tbl := table.New(
+		table.WithColumns(columns),
+		table.WithRows(rows),
+		table.WithFocused(true),
+	)
+
+	search := textinput.New()
+	search.Blur()
+
+	initialStyles := cardTableStyles(activeTableSelectedBg)
+	tbl.SetStyles(initialStyles)
+
+	model := CardsModel{
+		Search:      search,
+		Table:       tbl,
+		TableStyles: initialStyles,
+	}
+
+	// Tab into the search bar.
+	newModel, _ := model.Update(tea.KeyMsg{Type: tea.KeyTab})
+	m1 := newModel.(CardsModel)
+	if !m1.Search.Focused() {
+		t.Fatal("expected search to be focused after tab")
+	}
+
+	bg1 := m1.TableStyles.Selected.GetBackground()
+	r1, g1, b1, a1 := bg1.RGBA()
+	re, ge, be, ae := inactiveTableSelectedBg.RGBA()
+	if r1 != re || g1 != ge || b1 != be || a1 != ae {
+		t.Fatalf("expected selected background to be gray when searching; got RGBA(%d,%d,%d,%d)", r1, g1, b1, a1)
+	}
+
+	// Tab back to the table.
+	newModel2, _ := m1.Update(tea.KeyMsg{Type: tea.KeyTab})
+	m2 := newModel2.(CardsModel)
+	if m2.Search.Focused() {
+		t.Fatal("expected search to be blurred after tabbing back")
+	}
+
+	bg2 := m2.TableStyles.Selected.GetBackground()
+	r2, g2, b2, a2 := bg2.RGBA()
+	re2, ge2, be2, ae2 := activeTableSelectedBg.RGBA()
+	if r2 != re2 || g2 != ge2 || b2 != be2 || a2 != ae2 {
+		t.Fatalf("expected selected background to be yellow when table is focused; got RGBA(%d,%d,%d,%d)", r2, g2, b2, a2)
+	}
+}
+
+func TestCardsModel_Update_ViewImageKey_QuestionMark(t *testing.T) {
 	rows := []table.Row{
 		{"001/198 - Bulbasaur"},
 	}
@@ -109,17 +161,51 @@ func TestCardsModel_Update_SpaceBar(t *testing.T) {
 		ViewImage: false,
 	}
 
-	msg := tea.KeyMsg{Type: tea.KeySpace}
+	msg := tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'?'}}
 	newModel, cmd := model.Update(msg)
 
 	resultModel := newModel.(CardsModel)
 
 	if !resultModel.ViewImage {
-		t.Error("ViewImage should be set to true when SPACE is pressed")
+		t.Error("ViewImage should be set to true when '?' is pressed")
 	}
 
 	if cmd == nil {
-		t.Error("Update with SPACE should return tea.Quit command")
+		t.Error("Update with '?' should return tea.Quit command")
+	}
+}
+
+func TestCardsModel_Update_ViewImageKey_DoesNotOverrideSearch(t *testing.T) {
+	rows := []table.Row{{"001/198 - Bulbasaur"}}
+	columns := []table.Column{{Title: "Card Name", Width: 35}}
+
+	tbl := table.New(
+		table.WithColumns(columns),
+		table.WithRows(rows),
+		table.WithFocused(true),
+	)
+
+	search := textinput.New()
+	search.Focus()
+
+	model := CardsModel{
+		Search:    search,
+		Table:     tbl,
+		ViewImage: false,
+	}
+
+	msg := tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'?'}}
+	newModel, _ := model.Update(msg)
+	resultModel := newModel.(CardsModel)
+
+	if resultModel.ViewImage {
+		t.Fatal("expected ViewImage to remain false when typing '?' in the search field")
+	}
+	if resultModel.Quitting {
+		t.Fatal("expected Quitting to remain false when typing in the search field")
+	}
+	if got := resultModel.Search.Value(); got != "?" {
+		t.Fatalf("expected search input to receive '?'; got %q", got)
 	}
 }