feat(ui): improve search bar visuals with focus indicator and green border

This commit is contained in:
James Reilly 2026-01-13 10:07:11 -06:00
commit abc50ff2d7
4 changed files with 21 additions and 6 deletions

View file

@ -140,7 +140,7 @@ func (s *AppService) BuildApp() {
headerName := AppName
if s.IsBrewfileMode() {
headerName = fmt.Sprintf("%s [Brewfile Mode]", AppName)
s.layout.GetSearch().Field().SetLabel("Search (Brewfile): ")
s.layout.GetSearch().Field().SetTitle("Search (Brewfile)")
s.inputService.EnableBrewfileMode() // Add Install All action
}
s.layout.GetHeader().Update(headerName, AppVersion, s.brewVersion)

View file

@ -20,13 +20,24 @@ func NewSearch(theme *theme.Theme) *Search {
theme: theme,
}
search.field.SetLabel(tview.Escape("Search (All): "))
search.field.SetLabelColor(theme.SearchLabelColor)
search.field.SetTitle("Search (All)")
search.field.SetTitleColor(theme.TitleColor)
search.field.SetTitleAlign(tview.AlignLeft)
search.field.SetFieldStyle(tcell.StyleDefault.Italic(true).Underline(true))
search.field.SetFieldBackgroundColor(theme.DefaultBgColor)
search.field.SetFieldTextColor(theme.DefaultTextColor)
search.field.SetBorder(true)
search.field.SetBorderColor(theme.SearchBorderColor)
search.field.SetFocusFunc(func() {
search.field.SetBorderColor(theme.SearchFocusBorderColor)
})
search.field.SetBlurFunc(func() {
search.field.SetBorderColor(theme.SearchBorderColor)
})
search.counter.SetDynamicColors(true)
search.counter.SetTextAlign(tview.AlignRight)
search.counter.SetBorderPadding(1, 0, 0, 0)
return search
}

View file

@ -71,7 +71,7 @@ func (l *Layout) setupLayout() {
// Left column with search and table
leftColumn := tview.NewFlex().SetDirection(tview.FlexRow).
AddItem(filtersArea, 2, 0, false).
AddItem(filtersArea, 3, 0, false).
AddItem(tableFrame, 0, 4, false)
// Right column with details and output

View file

@ -21,7 +21,9 @@ type Theme struct {
ModalBgColor tcell.Color
LegendColor tcell.Color
TableHeaderColor tcell.Color
SearchLabelColor tcell.Color
SearchLabelColor tcell.Color
SearchBorderColor tcell.Color
SearchFocusBorderColor tcell.Color
// tview global styles (mapped to tview.Styles)
PrimitiveBackgroundColor tcell.Color
@ -56,7 +58,9 @@ func NewTheme() *Theme {
ModalBgColor: tcell.ColorDefault,
LegendColor: tcell.ColorDefault,
TableHeaderColor: tcell.ColorBlue,
SearchLabelColor: tcell.ColorPurple,
SearchLabelColor: tcell.ColorPurple,
SearchBorderColor: tcell.ColorWhite,
SearchFocusBorderColor: tcell.ColorGreen,
// tview global styles - use terminal default colors for better compatibility
// By default, tview uses hardcoded colors (like tcell.ColorBlack) which don't