View Layout Issues With Component Design

[tencorvids]

Hi!

I have a componentized bubble tea application, where I pass all messages through the main model to all components. Each component lives in a package with its own model, view, update, init, keys, and styles.

After adding a list component with a dynamic list, that changes based on the state of another list, it breaks the entire view. I've tried many things, and I thought it was a style issue. I am struggling debugging the layout due to me thinking of it like the box-model of the web, but we don't have those tools... (maybe one day 🤔)

Main View

package tui

import "github.com/charmbracelet/lipgloss"

func (m *Model) View() string {
	return lipgloss.NewStyle().Margin(2, 2).MaxWidth(m.WindowWidth).MaxHeight(m.WindowHeight).Render(
		lipgloss.JoinHorizontal(
			lipgloss.Top,
			m.PortsComponent.View(),
			m.DevicesComponent.View(),
			m.CommandsComponent.View(),
		),
	)
}

Commenting out m.CommandsComponent.View() fixes the layout issues and missing Title from the lists.

[1] Commands component view commented out
[2] Commands component view added back in
[3] Repo link, currently working off the commands branch: https://github.com/AndrewVota/at-at/

Components

Here are the key points (I believe) of my three components, but I will leave a link to the repo if anyone has the time and is willing to help!

Ports

Style

package ports

import (
	"github.com/charmbracelet/bubbles/list"
	"github.com/charmbracelet/lipgloss"
)

type Style struct {
	Focused   BaseStyle
	Unfocused BaseStyle
}

type BaseStyle struct {
	Title        lipgloss.Style
	TitleBar     lipgloss.Style
	Selected     lipgloss.Style
	Unselected   lipgloss.Style
	ItemDelegate list.ItemDelegate
}

func DefaultStyles() Style {
	var style = Style{
		Focused: BaseStyle{
			Title:        lipgloss.NewStyle().Padding(0, 1).Foreground(lipgloss.Color("#FFFFFF")),
			TitleBar:     lipgloss.NewStyle().Width(20).Margin(0, 1, 1, 1).Background(lipgloss.Color("#64708D")),
			Selected:     lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			Unselected:   lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("241")),
			ItemDelegate: nil,
		},
		Unfocused: BaseStyle{
			Title:        lipgloss.NewStyle().Padding(0, 1).Foreground(lipgloss.Color("#FFFFFF")),
			TitleBar:     lipgloss.NewStyle().Width(20).Margin(0, 1, 1, 1).Background(lipgloss.Color("#373B41")),
			Selected:     lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			Unselected:   lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("237")),
			ItemDelegate: nil,
		},
	}

	// Define the styles for the focused item delegate
	var focusedItemDelegate = list.NewDefaultDelegate()
	focusedItemDelegate.ShowDescription = false
	focusedItemDelegate.Styles.NormalTitle = style.Focused.Unselected
	focusedItemDelegate.Styles.SelectedTitle = style.Focused.Selected

	// Define the styles for the unfocused item delegate
	var unfocusedItemDelegate = list.NewDefaultDelegate()
	unfocusedItemDelegate.ShowDescription = false
	unfocusedItemDelegate.Styles.NormalTitle = style.Unfocused.Unselected
	unfocusedItemDelegate.Styles.SelectedTitle = style.Unfocused.Selected

	// Set the item delegate for the focused and unfocused styles
	style.Focused.ItemDelegate = focusedItemDelegate
	style.Unfocused.ItemDelegate = unfocusedItemDelegate

	return style
}

View

package ports

func (m *Model) View() string {
	styles := DefaultStyles()
	m.List.SetShowHelp(false)
	m.List.Title = "Ports"

	switch m.Focused {
	case true:
		m.List.SetWidth(m.WindowWidth)
		m.List.SetHeight(m.WindowHeight)
		m.List.Styles.Title = styles.Focused.Title
		m.List.Styles.TitleBar = styles.Focused.TitleBar
		m.List.SetDelegate(styles.Focused.ItemDelegate)
		return m.List.View()

	case false:
		m.List.SetWidth(m.WindowWidth)
		m.List.SetHeight(m.WindowHeight)
		m.List.Styles.Title = styles.Unfocused.Title
		m.List.Styles.TitleBar = styles.Unfocused.TitleBar
		m.List.SetDelegate(styles.Unfocused.ItemDelegate)
		return m.List.View()
	}

	return "ports view..."
}

Devices

Style

package devices

import (
	"github.com/charmbracelet/bubbles/list"
	"github.com/charmbracelet/lipgloss"
)

type Style struct {
	Focused   BaseStyle
	Unfocused BaseStyle
}

type BaseStyle struct {
	Title                 lipgloss.Style
	TitleBar              lipgloss.Style
	Selected              lipgloss.Style
	SelectedDescription   lipgloss.Style
	Unselected            lipgloss.Style
	UnselectedDescription lipgloss.Style
	ItemDelegate          list.ItemDelegate
}

func DefaultStyles() Style {
	var style = Style{
		Focused: BaseStyle{
			Title:                 lipgloss.NewStyle().Padding(0, 1).Foreground(lipgloss.Color("#FFFFFF")),
			TitleBar:              lipgloss.NewStyle().Width(26).Margin(0, 1, 1, 1).Background(lipgloss.Color("#64708D")),
			Selected:              lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			SelectedDescription:   lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			Unselected:            lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("241")),
			UnselectedDescription: lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("241")),
			ItemDelegate:          nil,
		},
		Unfocused: BaseStyle{
			Title:                 lipgloss.NewStyle().Padding(0, 1).Foreground(lipgloss.Color("#FFFFFF")),
			TitleBar:              lipgloss.NewStyle().Width(26).Margin(0, 1, 1, 1).Background(lipgloss.Color("#373B41")),
			Selected:              lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			SelectedDescription:   lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			Unselected:            lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("237")),
			UnselectedDescription: lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("237")),
			ItemDelegate:          nil,
		},
	}

	// Define the styles for the focused item delegate
	var focusedItemDelegate = list.NewDefaultDelegate()
	focusedItemDelegate.ShowDescription = true
	focusedItemDelegate.Styles.NormalTitle = style.Focused.Unselected
	focusedItemDelegate.Styles.NormalDesc = style.Focused.UnselectedDescription
	focusedItemDelegate.Styles.SelectedTitle = style.Focused.Selected
	focusedItemDelegate.Styles.SelectedDesc = style.Focused.SelectedDescription

	// Define the styles for the unfocused item delegate
	var unfocusedItemDelegate = list.NewDefaultDelegate()
	unfocusedItemDelegate.ShowDescription = true
	unfocusedItemDelegate.Styles.NormalTitle = style.Unfocused.Unselected
	unfocusedItemDelegate.Styles.NormalDesc = style.Unfocused.UnselectedDescription
	unfocusedItemDelegate.Styles.SelectedTitle = style.Unfocused.Selected
	unfocusedItemDelegate.Styles.SelectedDesc = style.Unfocused.SelectedDescription

	// Set the item delegate for the focused and unfocused styles
	style.Focused.ItemDelegate = focusedItemDelegate
	style.Unfocused.ItemDelegate = unfocusedItemDelegate

	return style
}

View

package devices

func (m *Model) View() string {
	styles := DefaultStyles()
	m.List.SetShowHelp(false)
	m.List.Title = "Devices"

	switch m.Focused {
	case true:
		m.List.SetWidth(m.WindowWidth)
		m.List.SetHeight(m.WindowHeight)
		m.List.Styles.Title = styles.Focused.Title
		m.List.Styles.TitleBar = styles.Focused.TitleBar
		m.List.SetDelegate(styles.Focused.ItemDelegate)
		return m.List.View()

	case false:
		m.List.SetWidth(m.WindowWidth)
		m.List.SetHeight(m.WindowHeight)
		m.List.Styles.Title = styles.Unfocused.Title
		m.List.Styles.TitleBar = styles.Unfocused.TitleBar
		m.List.SetDelegate(styles.Unfocused.ItemDelegate)
		return m.List.View()
	}

	return "device component view..."
}

Commands (The Culprit...)

Style

package commands

import (
	"github.com/charmbracelet/bubbles/list"
	"github.com/charmbracelet/lipgloss"
)

type Style struct {
	Focused   BaseStyle
	Unfocused BaseStyle
}

type BaseStyle struct {
	Title                 lipgloss.Style
	TitleBar              lipgloss.Style
	Selected              lipgloss.Style
	SelectedDescription   lipgloss.Style
	Unselected            lipgloss.Style
	UnselectedDescription lipgloss.Style
	ItemDelegate          list.ItemDelegate
}

func DefaultStyles() Style {
	var style = Style{
		Focused: BaseStyle{
			Title:                 lipgloss.NewStyle().Padding(0, 1).Foreground(lipgloss.Color("#FFFFFF")),
			TitleBar:              lipgloss.NewStyle().Width(70).Margin(0, 1, 1, 1).Background(lipgloss.Color("#64708D")),
			Selected:              lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			SelectedDescription:   lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			Unselected:            lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("241")),
			UnselectedDescription: lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("241")),
			ItemDelegate:          nil,
		},
		Unfocused: BaseStyle{
			Title:                 lipgloss.NewStyle().Padding(0, 1).Foreground(lipgloss.Color("#FFFFFF")),
			TitleBar:              lipgloss.NewStyle().Width(70).Margin(0, 1, 1, 1).Background(lipgloss.Color("#373B41")),
			Selected:              lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			SelectedDescription:   lipgloss.NewStyle().PaddingLeft(3).Foreground(lipgloss.Color("#AFBEE1")),
			Unselected:            lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("237")),
			UnselectedDescription: lipgloss.NewStyle().PaddingLeft(2).Foreground(lipgloss.Color("237")),
			ItemDelegate:          nil,
		},
	}

	// Define the styles for the focused item delegate
	var focusedItemDelegate = list.NewDefaultDelegate()
	focusedItemDelegate.ShowDescription = true
	focusedItemDelegate.Styles.NormalTitle = style.Focused.Unselected
	focusedItemDelegate.Styles.NormalDesc = style.Focused.UnselectedDescription
	focusedItemDelegate.Styles.SelectedTitle = style.Focused.Selected
	focusedItemDelegate.Styles.SelectedDesc = style.Focused.SelectedDescription

	// Define the styles for the unfocused item delegate
	var unfocusedItemDelegate = list.NewDefaultDelegate()
	unfocusedItemDelegate.ShowDescription = true
	unfocusedItemDelegate.Styles.NormalTitle = style.Unfocused.Unselected
	unfocusedItemDelegate.Styles.NormalDesc = style.Unfocused.UnselectedDescription
	unfocusedItemDelegate.Styles.SelectedTitle = style.Unfocused.Selected
	unfocusedItemDelegate.Styles.SelectedDesc = style.Unfocused.SelectedDescription

	// Set the item delegate for the focused and unfocused styles
	style.Focused.ItemDelegate = focusedItemDelegate
	style.Unfocused.ItemDelegate = unfocusedItemDelegate

	return style
}

View

package commands

func (m *Model) View() string {
	styles := DefaultStyles()
	m.List.SetShowHelp(false)
	m.List.Title = "Commands"

	switch m.Focused {
	case true:
		m.List.SetWidth(m.WindowWidth)
		m.List.SetHeight(m.WindowHeight)
		m.List.Styles.Title = styles.Focused.Title
		m.List.Styles.TitleBar = styles.Focused.TitleBar
		m.List.SetDelegate(styles.Focused.ItemDelegate)
		return m.List.View()

	case false:
		m.List.SetWidth(m.WindowWidth)
		m.List.SetHeight(m.WindowHeight)
		m.List.Styles.Title = styles.Unfocused.Title
		m.List.Styles.TitleBar = styles.Unfocused.TitleBar
		m.List.SetDelegate(styles.Unfocused.ItemDelegate)
		return m.List.View()
	}

	return "commands component view..."
}

Any guidance or input is appreciated, thank you very much!

[KevM]

I do this in my navstack component for my new bubbleo library.

I've found that it was handy to manage my own window struct and send tea.WindowSizeMsg updates to the encapsulated components.

This ensures that when they are being "given the stage" that they get a tea.WindowSizeMsg sent in so they can adapt to their container. Otherwise they will not be correctly sized until the user changes the container size (thus sending a windows size msg).