components

package
v0.1.35 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Aug 9, 2026 License: Apache-2.0 Imports: 11 Imported by: 0

README

UI Components

Reusable, page-agnostic UI building blocks. Page layout/chrome (header, sidebar, footer, content area, breadcrumb) is owned by the template system under pkg/ui/template/ui, not this package — the older layout.go, sidebar.go, footer.go, main_content.go, status_bar.go, and modal.go were removed (UI-18) once the template system and the pkg/ui/dialog / pkg/ui/notify packages superseded them.

Live components

  • search_bar.go — SearchBarModel, a text-input search/filter bar with fuzzy suggestions and history.
  • fuzzy.go — FuzzyMatcher used for suggestion ranking and filtering.
  • fetch_progress_bar.go — FetchProgressBar, a determinate animated progress bar for counted batch fetches (channel-driven ProgressMsg stream).
  • loading.go — Spinner wrapper over bubbles/spinner plus CenteredLoading, the shared indeterminate loading indicator (UI-12).
  • json_content_view.go — read-only JSON content view (also see the richer editor/ subpackage).
  • sparkline.go — inline sparkline renderer for the metrics page.
  • styles.go — small shared lipgloss style helpers for the above.

Subpackages

  • form/ — shared create/edit form framework (Form, typed fields).
  • datatable/ — shared sortable/paginated table pattern.
  • editor/ — read-only viewer, editable textarea, and diff views with JSON highlighting.

Documentation

Index

Constants

This section is empty.

Variables

View Source 
var (
	Subtle    = lipgloss.AdaptiveColor{Light: "#D9DCCF", Dark: "#383838"}
	Highlight = lipgloss.AdaptiveColor{Light: "#874BFD", Dark: "#7D56F4"}
	Special   = lipgloss.AdaptiveColor{Light: "#43BF6D", Dark: "#73F59F"}
	Info      = lipgloss.AdaptiveColor{Light: "#4A90E2", Dark: "#4A90E2"}
	Warning   = lipgloss.AdaptiveColor{Light: "#F5A623", Dark: "#F5A623"}
)

Colors

View Source 
var (
	MainPanelStyle = lipgloss.NewStyle().
					BorderStyle(RoundedBorder).
					BorderForeground(Subtle).
					Padding(1, 1)

	SidebarPanelStyle = lipgloss.NewStyle().
						BorderStyle(RoundedBorder).
						BorderForeground(Subtle).
						Padding(1, 2)
)

Content panel styles

View Source 
var (
	TitleStyle = lipgloss.NewStyle().
				Bold(true).
				Foreground(lipgloss.Color("#FFFFFF")).
				Background(lipgloss.Color("#1a1a1a")).
				Padding(0, 1)

	SubtitleStyle = lipgloss.NewStyle().
					Foreground(Special).
					Bold(true).
					MarginBottom(1)

	InfoStyle = lipgloss.NewStyle().
				Foreground(Subtle).
				Italic(true)
)

Text styles

View Source 
var (
	StatusStyle = lipgloss.NewStyle().
				Foreground(lipgloss.Color("#FFFFFF")).
				Background(lipgloss.Color("#3c3c3c")).
				Padding(0, 1)

	DocStyle = lipgloss.NewStyle().
				Margin(1, 2)
)

Common styles

View Source 
var (
	TableStyle = lipgloss.NewStyle().
				BorderStyle(lipgloss.RoundedBorder()).
				BorderForeground(lipgloss.Color("240")).
				Padding(0, 1)

	SharedSidebarStyle = lipgloss.NewStyle().
						Width(30).
						BorderStyle(lipgloss.RoundedBorder()).
						BorderForeground(lipgloss.Color("240")).
						Padding(1, 2)

	SidebarTitleStyle = lipgloss.NewStyle().
						Foreground(lipgloss.Color("205")).
						Bold(true).
						Align(lipgloss.Center)

	SidebarContentStyle = lipgloss.NewStyle().
						Foreground(lipgloss.Color("250")).
						PaddingTop(1)

	SearchBarStyle = lipgloss.NewStyle().
					BorderStyle(lipgloss.RoundedBorder()).
					BorderForeground(lipgloss.Color("240")).
					Padding(0, 1)
)

Shared component styles

View Source 
var (
	FooterStyle = lipgloss.NewStyle().
		Foreground(lipgloss.Color("#FFFFFF")).
		Background(Subtle).
		Padding(0, 1)
)

Footer styles

View Source 
var (
	HeaderStyle = lipgloss.NewStyle().
		Bold(true).
		Foreground(lipgloss.Color("#FFFFFF")).
		Background(Highlight).
		Padding(0, 1).
		MarginBottom(1)
)

Header styles

View Source 
var (
	HighlightColor = lipgloss.Color("205")
)

Custom colors

View Source 
var (
	LayoutStyle = lipgloss.NewStyle().
		Padding(1, 2)
)

Main layout styles

View Source 
var (
	ResourceTypeStyle = lipgloss.NewStyle().
		Foreground(lipgloss.Color("#FFFFFF")).
		Background(Info).
		Bold(true).
		Padding(0, 1).
		MarginRight(1)
)

Resource type indicator

View Source 
var (
	RoundedBorder = lipgloss.Border{
		Top:         "",
		Bottom:      "",
		Left:        "",
		Right:       "",
		TopLeft:     "",
		TopRight:    "",
		BottomLeft:  "",
		BottomRight: "",
	}
)

Border styles

Functions

func CenteredLoading 

func CenteredLoading(frame, label string, width, height int) string

CenteredLoading renders a spinner frame and label centered in the given box. When width/height are unknown (<=0) it falls back to a simple left-aligned line.

func FormatBytesPerSec 

func FormatBytesPerSec(v float64) string

FormatBytesPerSec formats a bytes-per-second rate with IEC units. A negative value is unknown and renders as an en dash.

func FormatRate 

func FormatRate(v float64) string

FormatRate formats a plain per-second rate (e.g. messages/s). Negative is unknown.

func ListenForProgress 

func ListenForProgress(ch <-chan ProgressMsg) tea.Cmd

ListenForProgress returns a Cmd that blocks until the next ProgressMsg arrives on ch, then delivers it to the Bubble Tea Update loop. Chain this inside your Update handler to receive a continuous stream.

func NewProgressChannel 

func NewProgressChannel(total int) chan ProgressMsg

NewProgressChannel creates a properly buffered channel for progress updates.

func RenderSparkline 

func RenderSparkline(data []float64, width int) string

RenderSparkline renders a series of values as a unicode block sparkline. It keeps at most `width` (rightmost) samples. Negative values are treated as gaps ("unknown", api.RateUnknown) and rendered as spaces. A series with no known values renders as an empty string (callers show a placeholder).

Types

type ClearMsg 

type ClearMsg struct{}

ClearMsg is a message type for clear events

type FetchProgressBar 

type FetchProgressBar struct {
	// contains filtered or unexported fields
}

FetchProgressBar is a reusable, self-contained animated progress bar component for tracking counted fetch / load operations.

Typical usage: 

// 1. Embed in your model:
type Model struct { bar components.FetchProgressBar }

// 2. Start when the operation begins:
ch := components.NewProgressChannel(total)
cmds = append(cmds, model.bar.StartListening(ch, total))

// 3. Forward messages in Update:
model.bar, cmd = model.bar.Update(msg)

// 4. Render in View:
if model.bar.IsActive() { content += model.bar.View(width) }

func NewFetchProgressBar 

func NewFetchProgressBar() FetchProgressBar

NewFetchProgressBar creates a FetchProgressBar with a default gradient style.

func (FetchProgressBar) Current 

func (f FetchProgressBar) Current() int

Current returns the number of items received so far.

func (FetchProgressBar) IsActive 

func (f FetchProgressBar) IsActive() bool

IsActive returns true while an operation is in progress.

func (*FetchProgressBar) StartListening 

func (f *FetchProgressBar) StartListening(ch <-chan ProgressMsg, total int) tea.Cmd

StartListening initialises the component for a new operation, stores the progress channel and returns the initial Cmds (reset animation + first listener). Call this once when the fetch begins.

func (FetchProgressBar) Total 

func (f FetchProgressBar) Total() int

Total returns the target item count.

func (FetchProgressBar) Update 

func (f FetchProgressBar) Update(msg tea.Msg) (FetchProgressBar, tea.Cmd)

Update handles ProgressMsg (progress updates and completion) and progress.FrameMsg (spring animation ticks). Pass all incoming messages to this method from your parent component's Update.

func (FetchProgressBar) View 

func (f FetchProgressBar) View(width int) string

View renders the progress bar at the given width. Returns an empty string when the component is not active and has never run.

type FuzzyMatch 

type FuzzyMatch struct {
	Text  string
	Score int
	Index int
}

FuzzyMatch represents a fuzzy match result

type FuzzyMatcher 

type FuzzyMatcher struct {
	// contains filtered or unexported fields
}

FuzzyMatcher provides fuzzy matching functionality

func NewFuzzyMatcher 

func NewFuzzyMatcher(caseSensitive bool) *FuzzyMatcher

NewFuzzyMatcher creates a new fuzzy matcher

func (*FuzzyMatcher) GetBestMatch 

func (fm *FuzzyMatcher) GetBestMatch(query string, candidates []string) string

GetBestMatch returns the best fuzzy match from candidates

func (*FuzzyMatcher) GetMatchedStrings 

func (fm *FuzzyMatcher) GetMatchedStrings(query string, candidates []string, maxResults int) []string

GetMatchedStrings returns just the matched strings (without scores)

func (*FuzzyMatcher) Match 

func (fm *FuzzyMatcher) Match(query string, candidates []string, maxResults int) []FuzzyMatch

Match performs fuzzy matching on a list of candidates

type JSONContentConfig 

type JSONContentConfig struct {
	Width           int
	Height          int
	Title           string
	Content         string
	DisplayFormat   string // "raw", "json", "pretty"
	ShowLineNumbers bool
	Focused         bool
}

JSONContentConfig holds configuration for the JSON content viewer

type JSONContentView 

type JSONContentView struct {
	// contains filtered or unexported fields
}

JSONContentView represents a reusable JSON content viewer component

func NewJSONContentView 

func NewJSONContentView(config JSONContentConfig) *JSONContentView

NewJSONContentView creates a new JSON content viewer component

func (*JSONContentView) LineDown 

func (jcv *JSONContentView) LineDown(lines int)

LineDown moves the viewport down by the given number of lines

func (*JSONContentView) LineUp 

func (jcv *JSONContentView) LineUp(lines int)

LineUp moves the viewport up by the given number of lines

func (*JSONContentView) SetContent 

func (jcv *JSONContentView) SetContent(content string)

SetContent updates the content displayed in the viewer

func (*JSONContentView) SetDisplayFormat 

func (jcv *JSONContentView) SetDisplayFormat(format string)

SetDisplayFormat updates the display format

func (*JSONContentView) SetFocused 

func (jcv *JSONContentView) SetFocused(focused bool)

SetFocused updates the focus state

func (*JSONContentView) UpdateConfig 

func (jcv *JSONContentView) UpdateConfig(config JSONContentConfig)

UpdateConfig updates the component configuration

func (*JSONContentView) View 

func (jcv *JSONContentView) View() string

View renders the JSON content viewer

func (*JSONContentView) Viewport 

func (jcv *JSONContentView) Viewport() *viewport.Model

Viewport returns the underlying viewport for direct manipulation

type ProgressBarFrameMsg 

type ProgressBarFrameMsg = progress.FrameMsg

ProgressBarFrameMsg is a re-export of the underlying animation frame message. Callers should forward this type to FetchProgressBar.Update so the spring animation keeps running. This avoids callers importing bubbles/progress directly.

type ProgressMsg 

type ProgressMsg struct {
	Current int
	Total   int
	Done    bool
}

ProgressMsg reports progress of a counted operation. When Done is true the operation has finished; the caller may deliver the final result payload through a separate channel/message.

type ResourceSwitchMsg 

type ResourceSwitchMsg struct {
	Resource string
}

ResourceSwitchMsg is a message type for resource switching events

type SearchBarModel 

type SearchBarModel struct {
	core.BaseComponent // Embed base component for common functionality
	// contains filtered or unexported fields
}

SearchBarModel represents the search bar component

func NewSearchBar 

func NewSearchBar(options ...SearchBarOption) SearchBarModel

NewSearchBar creates a new search bar component

func (*SearchBarModel) Blur 

func (sb *SearchBarModel) Blur()

Blur removes focus from the search bar

func (*SearchBarModel) ClearError 

func (sb *SearchBarModel) ClearError()

ClearError clears the error message

func (*SearchBarModel) EnterResourceMode 

func (sb *SearchBarModel) EnterResourceMode()

EnterResourceMode enters resource switching mode

func (*SearchBarModel) EnterSearchMode 

func (sb *SearchBarModel) EnterSearchMode()

EnterSearchMode enters normal search mode

func (*SearchBarModel) Focus 

func (sb *SearchBarModel) Focus() tea.Cmd

Focus focuses the search bar

func (SearchBarModel) Focused 

func (sb SearchBarModel) Focused() bool

Focused returns whether the search bar is focused

func (*SearchBarModel) GetResourceSuggestions 

func (sb *SearchBarModel) GetResourceSuggestions() []string

GetResourceSuggestions returns all available resource suggestions

func (SearchBarModel) Init 

func (sb SearchBarModel) Init() tea.Cmd

Init initializes the search bar

func (SearchBarModel) IsResourceMode 

func (sb SearchBarModel) IsResourceMode() bool

IsResourceMode returns whether the search bar is in resource mode

func (*SearchBarModel) SetError 

func (sb *SearchBarModel) SetError(err string)

SetError sets an error message

func (*SearchBarModel) SetResultCount 

func (sb *SearchBarModel) SetResultCount(count int)

SetResultCount sets the result count

func (*SearchBarModel) SetSearchSuggestions 

func (sb *SearchBarModel) SetSearchSuggestions(suggestions []string)

SetSearchSuggestions updates the suggestions for search mode

func (*SearchBarModel) SetValue 

func (sb *SearchBarModel) SetValue(value string)

SetValue sets the value of the search bar

func (*SearchBarModel) SetWidth 

func (sb *SearchBarModel) SetWidth(width int)

SetWidth sets the width of the search bar

func (SearchBarModel) Update 

func (sb SearchBarModel) Update(msg tea.Msg) (SearchBarModel, tea.Cmd)

Update handles messages for the search bar

func (SearchBarModel) Value 

func (sb SearchBarModel) Value() string

Value returns the current value of the search bar

func (SearchBarModel) View 

func (sb SearchBarModel) View() string

View renders the search bar

type SearchBarOption 

type SearchBarOption func(*SearchBarModel)

SearchBarOption is a function that configures a SearchBarModel

func WithOnClear 

func WithOnClear(fn func() tea.Msg) SearchBarOption

WithOnClear sets the callback function for clear

func WithOnResourceSwitch 

func WithOnResourceSwitch(fn func(resource string) tea.Msg) SearchBarOption

WithOnResourceSwitch sets the callback function for resource switching

func WithOnSearch 

func WithOnSearch(fn func(query string) tea.Msg) SearchBarOption

WithOnSearch sets the callback function for search

func WithPlaceholder 

func WithPlaceholder(placeholder string) SearchBarOption

WithPlaceholder sets the placeholder text

func WithSearchMode 

func WithSearchMode(mode SearchMode) SearchBarOption

WithSearchMode sets the search mode

func WithSearchSuggestions 

func WithSearchSuggestions(suggestions []string) SearchBarOption

WithSearchSuggestions sets the suggestions for search mode

type SearchMode 

type SearchMode int

SearchMode represents different search modes 

const (
	SimpleSearch SearchMode = iota
	AdvancedSearch
	RegexSearch
	ResourceSearch
)

type SearchMsg 

type SearchMsg struct {
	Query string
	Mode  SearchMode
}

SearchMsg is a message type for search events

type Sparkline 

type Sparkline struct {
	core.BaseComponent
	// contains filtered or unexported fields
}

Sparkline is a reusable component that renders a value series as a sparkline, optionally followed by a min/max/avg summary. Styling is injected from the role-based palette (no hex literals here).

func NewSparkline 

func NewSparkline(style lipgloss.Style) *Sparkline

NewSparkline builds a Sparkline rendered in the given (role-based) style.

func (*Sparkline) SetData 

func (s *Sparkline) SetData(data []float64)

SetData replaces the series.

func (*Sparkline) SetLabel 

func (s *Sparkline) SetLabel(label string)

SetLabel sets an optional leading label.

func (*Sparkline) View 

func (s *Sparkline) View() string

View renders the sparkline at the component width, degrading to a placeholder for an empty/all-unknown series.

type Spinner 

type Spinner struct {
	// contains filtered or unexported fields
}

Spinner is a thin, reusable wrapper around bubbles/spinner that gives pages a single shared loading-indicator mechanism instead of each page hand-rolling its own spinner state. Use NewSpinner + Tick to start it, forward spinner.TickMsg to Update, and CenteredLoading (or Frame) to render.

func NewSpinner 

func NewSpinner() Spinner

NewSpinner returns a Spinner using the standard dot animation.

func (Spinner) Frame 

func (s Spinner) Frame() string

Frame returns the current animation frame.

func (Spinner) Tick 

func (s Spinner) Tick() tea.Cmd

Tick returns the command that starts (and keeps) the spinner animating.

func (Spinner) Update 

func (s Spinner) Update(msg tea.Msg) (Spinner, tea.Cmd)

Update advances the animation on a spinner.TickMsg.

Source Files

View all Source files

Directories

Path Synopsis
Package datatable provides a reusable table component wrapping github.com/charmbracelet/bubbles/table.
 Package datatable provides a reusable table component wrapping github.com/charmbracelet/bubbles/table.
Package form provides a reusable, typed form model for create/edit flows.
 Package form provides a reusable, typed form model for create/edit flows.
Package menu provides the filterable overlay list behind the two discovery surfaces the controls spec requires: the command palette (`:`) and the contextual actions menu (`a` / right-click).
 Package menu provides the filterable overlay list behind the two discovery surfaces the controls spec requires: the command palette (`:`) and the contextual actions menu (`a` / right-click).
Package tabstrip renders a tab bar whose tabs are click and hover targets.
 Package tabstrip renders a tab bar whose tabs are click and hover targets.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.