components

package
v0.1.37 Latest Latest
Warning

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

 Go to latest Published: Oct 1, 2026 License: Apache-2.0 Imports: 8 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

  • 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).
  • 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 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) Tracks added in v0.1.36 

func (f FetchProgressBar) Tracks(msg ProgressMsg) bool

Tracks reports whether msg belongs to the operation this bar is tracking. A message read by ListenForProgress from another channel (a superseded operation) does not; a message built directly, with no source, always does.

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 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
	// contains filtered or unexported fields
}

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 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.