Idea to add more functioanlity to a tabbed view - introduce new components?

[nick-popovic]

Hi Charmbracelet Team,

Disclosure: so sorry for the essay XD ...

Thought I'd share some work I've done on the side while playing around with your Bubbletea framework.

Current State

Currently, there is no ability to use prebuilt components to handle multiple tabs that scales your code horizontally. As of now all there is is the following example of a single model that incorporates logic for tab switching: https://github.com/charmbracelet/bubbletea/tree/main/examples/tabs

Very well done btw :) and shows the basics on how to use Bubbletea but if you wanted to add more (tabs, interactions, nested models/bubbles ..etc) you're kind of stuck with figuring out how to manage different tabs and as the number of tabs increases, so does your internal code logic and there's no best practices (that I could find anyways) where this can be handled better so I build my own custom model.

Proposed Solution

In my approach, I created main 2 artifacts

• An interface called TabModel that makes the user implement Init() / Update() / View() at the tab-content-level. To make the codebase readable, each tab implements this model and is in a separate file (see my own custom model).
• A TabsModel - a custom-implemented Bubbletea model that generally shouldn't be modified and that represents the entire tabbed view (tabs + active tab view). If this was ever accepted into future versions of the bubbles repo, only the file that contains both of these artifacts inside my tabsmodel.go file would need to be imported.

Benefits

• By enabling the user to implement their own custom 'tab' by means of implementing the TabModel interface, you can easily parse out more complex tabs from each other
• The code in your main program is dead simple

Here is how you main definitions look like:

import (
	"fmt"
	"os"

	ui "main/ui-components"

	tea "github.com/charmbracelet/bubbletea"
)

// model is the top-level model for the application.
type model struct {
	tabs ui.TabsModel
}

func New() model {
	return model{tabs: *ui.NewTabsModel(
		[]ui.TabModel{
			ui.NewTab1(),
			ui.NewTab2(),
			ui.NewTab3()},
		true)}
}

Here is how your main Update() and View() looks like:

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	var (
		cmd  tea.Cmd
		cmds []tea.Cmd
	)

	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.String() {
		case "q":
			return m, tea.Quit
		case "u":
			return m, tea.ClearScreen
		}
	}

	// Update components
	_, cmd = m.tabs.Update(msg)
	cmds = append(cmds, cmd)

	return m, tea.Batch(cmds...)
}

func (m model) View() string {
	return m.tabs.View()
}

Potential Hiccups / Feedback

• I wont pretend to be a '10x Chad Developer' here - my code's probably not perfect and subject to design flaws in some use cases and maybe you can tell some of my object oriented past is coming to haunt me in how I designed this, but I welcome any sort of criticism or feedback.
• Because of this ^, I'd rather get some feedback here vs sending an arbitrary pull request to the Bubbles repo. It's not exactly a plug-and-play solution and I'm not sure what direction/vision your team has for the future you have planned. No expectations to merge btw, but if you are interested, I'd be more than happy to pitch in my 2 cents. For now, this project is just a template on my repo that I will reuse as needed on my side.

p.s. The whole reason I know about this project was because I was trying to lean Go and I stumbled upon some tutorials that @bashbunni hosted on YouTube. I know C very well and wanted to update my knowledge with something a tad bit more modern and Youtube recommended me some of her videos. Very cool project and kudos to the entire team for an amazing product !! :) ... Thanks Youtube algorithm? xD