use help bubble

README.md

@@ -87,7 +87,7 @@ pywal `colors.json` file which is usually located at `~/.cache/wal/colors.json`.
 Here are the things that I've not yet implemented, contributions and suggestions are very welcome!
 
 - [X] A main category where all the feeds are aggregated
-- [ ] Moving the help to the bubbletea `help` bubble
+- [X] Moving the help to the bubbletea `help` bubble
 
 ## 💁 Credit where credit is due
 

internal/model/browser/browser.go

@@ -378,14 +378,7 @@ func (m Model) deleteItem(msg backend.DeleteItemMessage) (tea.Model, tea.Cmd) {
 
 // showHelp() shows the help menu at the bottom of the screen
 func (m Model) showHelp() (tea.Model, tea.Cmd) {
-	// Create the help menu
-	message := "Help: [ctrl+w] Close tab, [Tab] Cycle tabs, "
-	for _, keyBind := range m.tabs[m.activeTab].Help() {
-		message += fmt.Sprintf("[%s] %s, ", keyBind.Key, keyBind.Description)
-	}
-
-	// Set the message
-	m.message = message[:len(message)-2]
+	m.message = m.tabs[m.activeTab].ShowHelp()
 	return m, nil
 }
 

internal/model/tab/category/category.go

@@ -5,7 +5,10 @@ import (
 	"github.com/TypicalAM/goread/internal/colorscheme"
 	"github.com/TypicalAM/goread/internal/model/simplelist"
 	"github.com/TypicalAM/goread/internal/model/tab"
+	"github.com/charmbracelet/bubbles/help"
+	"github.com/charmbracelet/bubbles/key"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
 )
 
 // Model contains the state of this tab
@@ -16,20 +19,73 @@ type Model struct {
 	title  string
 	loaded bool
 	list   simplelist.Model
+	keymap keymap
+	help   help.Model
 
 	// reader is a function which returns a tea.Cmd which will be executed
 	// when the tab is initialized
 	reader func(string) tea.Cmd
 }
 
+type keymap struct {
+	CloseTab  key.Binding
+	CycleTabs key.Binding
+	Enter     key.Binding
+	New       key.Binding
+	Edit      key.Binding
+	Delete    key.Binding
+}
+
+func (k keymap) ShortHelp() []key.Binding {
+	return []key.Binding{
+		k.CloseTab, k.CycleTabs, k.Enter, k.New, k.Edit, k.Delete,
+	}
+}
+
+func (k keymap) FullHelp() [][]key.Binding {
+	return [][]key.Binding{
+		{k.CloseTab, k.CycleTabs, k.Enter, k.New, k.Edit, k.Delete},
+	}
+}
+
 // New creates a new category tab with sensible defaults
 func New(colors colorscheme.Colorscheme, width, height int, title string, reader func(string) tea.Cmd) Model {
+	help := help.New()
+	help.Styles.ShortDesc = lipgloss.NewStyle().Foreground(colors.Text)
+
 	return Model{
 		colors: colors,
 		width:  width,
 		height: height,
 		title:  title,
 		reader: reader,
+		help:   help,
+		keymap: keymap{
+			CloseTab: key.NewBinding(
+				key.WithKeys("ctrl+w"),
+				key.WithHelp("ctrl+w", "Close tab"),
+			),
+			CycleTabs: key.NewBinding(
+				key.WithKeys("tab"),
+				key.WithHelp("tab", "Cycle tabs"),
+			),
+			Enter: key.NewBinding(
+				key.WithKeys("enter"),
+				key.WithHelp("enter", "Open"),
+			),
+			New: key.NewBinding(
+				key.WithKeys("ctrl+n"),
+				key.WithHelp("ctrl+n", "New"),
+			),
+			Edit: key.NewBinding(
+				key.WithKeys("ctrl+e"),
+				key.WithHelp("ctrl+e", "Edit"),
+			),
+			Delete: key.NewBinding(
+				key.WithKeys("ctrl+d"),
+				key.WithHelp("ctrl+d", "Delete"),
+			),
+		},
 	}
 }
 
@@ -43,16 +99,6 @@ func (m Model) Type() tab.Type {
 	return tab.Category
 }
 
-// Help returns the help for the tab
-func (m Model) Help() tab.Help {
-	return tab.Help{
-		tab.KeyBind{Key: "enter", Description: "Open"},
-		tab.KeyBind{Key: "ctrl+n", Description: "New"},
-		tab.KeyBind{Key: "ctrl+e", Description: "Edit"},
-		tab.KeyBind{Key: "ctrl+d", Description: "Delete"},
-	}
-}
-
 // SetWidth sets the width of the tab
 func (m Model) SetWidth(width int) tab.Tab {
 	m.width = width
@@ -65,6 +111,10 @@ func (m Model) SetHeight(height int) tab.Tab {
 	return m
 }
 
+func (m Model) ShowHelp() string {
+	return m.help.View(m.keymap)
+}
+
 // Init initializes the tab
 func (m Model) Init() tea.Cmd {
 	return m.reader(m.title)

internal/model/tab/feed/feed.go

@@ -7,6 +7,8 @@ import (
 	"github.com/TypicalAM/goread/internal/colorscheme"
 	"github.com/TypicalAM/goread/internal/model/simplelist"
 	"github.com/TypicalAM/goread/internal/model/tab"
+	"github.com/charmbracelet/bubbles/help"
+	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/list"
 	"github.com/charmbracelet/bubbles/spinner"
 	"github.com/charmbracelet/bubbles/viewport"
@@ -28,19 +30,43 @@ type Model struct {
 	isViewportOpen  bool
 	viewport        viewport.Model
 	viewportFocused bool
+	keymap          keymap
+	help            help.Model
 
 	// reader is a function which returns a tea.Cmd which will be executed
 	// when the tab is initialized
 	reader func(string) tea.Cmd
 }
 
+type keymap struct {
+	CloseTab    key.Binding
+	CycleTabs   key.Binding
+	Open        key.Binding
+	ToggleFocus key.Binding
+	Refresh     key.Binding
+}
+
+func (k keymap) ShortHelp() []key.Binding {
+	return []key.Binding{
+		k.CloseTab, k.CycleTabs, k.Open, k.ToggleFocus, k.Refresh,
+	}
+}
+
+func (k keymap) FullHelp() [][]key.Binding {
+	return [][]key.Binding{
+		{k.CloseTab, k.CycleTabs, k.Open, k.ToggleFocus, k.Refresh},
+	}
+}
+
 // New creates a new feed tab with sensible defaults
 func New(colors colorscheme.Colorscheme, width, height int, title string, reader func(string) tea.Cmd) Model {
 	// Create a spinner for loading the data
 	spin := spinner.New()
 	spin.Spinner = spinner.Points
 	spin.Style = lipgloss.NewStyle().Foreground(colors.Color1)
 
+	help := help.New()
+	help.Styles.ShortDesc = lipgloss.NewStyle().Foreground(colors.Text)
 	// Create the model
 	return Model{
 		colors:         colors,
@@ -50,6 +76,29 @@ func New(colors colorscheme.Colorscheme, width, height int, title string, reader
 		loadingSpinner: spin,
 		title:          title,
 		reader:         reader,
+		help:           help,
+		keymap: keymap{
+			CloseTab: key.NewBinding(
+				key.WithKeys("ctrl+w"),
+				key.WithHelp("ctrl+w", "Close tab"),
+			),
+			CycleTabs: key.NewBinding(
+				key.WithKeys("tab"),
+				key.WithHelp("tab", "Cycle tabs"),
+			),
+			Open: key.NewBinding(
+				key.WithKeys("enter"),
+				key.WithHelp("enter", "Open"),
+			),
+			ToggleFocus: key.NewBinding(
+				key.WithKeys("left", "right"),
+				key.WithHelp("left/right", "Toggle focus"),
+			),
+			Refresh: key.NewBinding(
+				key.WithKeys("r"),
+				key.WithHelp("r", "Refresh"),
+			),
+		},
 	}
 }
 
@@ -63,15 +112,6 @@ func (m Model) Type() tab.Type {
 	return tab.Feed
 }
 
-// Help returns the help for the tab
-func (m Model) Help() tab.Help {
-	return tab.Help{
-		tab.KeyBind{Key: "enter", Description: "Open"},
-		tab.KeyBind{Key: "left/right", Description: "Toggle focus"},
-		tab.KeyBind{Key: "r", Description: "Refresh"},
-	}
-}
-
 // SetWidth sets the width of the tab
 func (m Model) SetWidth(width int) tab.Tab {
 	m.width = width
@@ -84,6 +124,10 @@ func (m Model) SetHeight(height int) tab.Tab {
 	return m
 }
 
+func (m Model) ShowHelp() string {
+	return m.help.View(m.keymap)
+}
+
 // Init initializes the tab
 func (m Model) Init() tea.Cmd {
 	return tea.Batch(m.reader(m.title), m.loadingSpinner.Tick)

internal/model/tab/tab.go

@@ -18,9 +18,9 @@ type Tab interface {
 	// general fields
 	Title() string
 	Type() Type
-	Help() Help
 	SetWidth(int) Tab
 	SetHeight(int) Tab
+	ShowHelp() string
 
 	// bubbletea methods
 	Init() tea.Cmd
@@ -44,14 +44,3 @@ type NewTabMessage struct {
 	Title string
 	Type  Type
 }
-
-// Help is a struct containing the keys and their descriptions
-// for a given tab
-type Help []KeyBind
-
-// KeyBind is a struct containing the description of a tab
-// and the keys that are used to interact with it
-type KeyBind struct {
-	Key         string
-	Description string
-}

internal/model/tab/welcome/welcome.go

@@ -5,7 +5,10 @@ import (
 	"github.com/TypicalAM/goread/internal/colorscheme"
 	"github.com/TypicalAM/goread/internal/model/simplelist"
 	"github.com/TypicalAM/goread/internal/model/tab"
+	"github.com/charmbracelet/bubbles/help"
+	"github.com/charmbracelet/bubbles/key"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
 )
 
 // Model contains the state of this tab
@@ -16,20 +19,73 @@ type Model struct {
 	title  string
 	loaded bool
 	list   simplelist.Model
+	keymap keymap
+	help   help.Model
 
 	// reader is a function which returns a tea.Cmd which will be executed
 	// when the tab is initialized
 	reader func() tea.Cmd
 }
 
+type keymap struct {
+	CloseTab  key.Binding
+	CycleTabs key.Binding
+	Enter     key.Binding
+	New       key.Binding
+	Edit      key.Binding
+	Delete    key.Binding
+}
+
+func (k keymap) ShortHelp() []key.Binding {
+	return []key.Binding{
+		k.CloseTab, k.CycleTabs, k.Enter, k.New, k.Edit, k.Delete,
+	}
+}
+
+func (k keymap) FullHelp() [][]key.Binding {
+	return [][]key.Binding{
+		{k.CloseTab, k.CycleTabs, k.Enter, k.New, k.Edit, k.Delete},
+	}
+}
+
 // New creates a new welcome tab with sensible defaults
 func New(colors colorscheme.Colorscheme, width, height int, title string, reader func() tea.Cmd) Model {
+	help := help.New()
+	help.Styles.ShortDesc = lipgloss.NewStyle().Foreground(colors.Text)
+
 	return Model{
 		colors: colors,
 		width:  width,
 		height: height,
 		title:  title,
 		reader: reader,
+		help:   help,
+		keymap: keymap{
+			CloseTab: key.NewBinding(
+				key.WithKeys("ctrl+w"),
+				key.WithHelp("ctrl+w", "Close tab"),
+			),
+			CycleTabs: key.NewBinding(
+				key.WithKeys("tab"),
+				key.WithHelp("tab", "Cycle tabs"),
+			),
+			Enter: key.NewBinding(
+				key.WithKeys("enter"),
+				key.WithHelp("enter", "Open"),
+			),
+			New: key.NewBinding(
+				key.WithKeys("ctrl+n"),
+				key.WithHelp("ctrl+n", "New"),
+			),
+			Edit: key.NewBinding(
+				key.WithKeys("ctrl+e"),
+				key.WithHelp("ctrl+e", "Edit"),
+			),
+			Delete: key.NewBinding(
+				key.WithKeys("ctrl+d"),
+				key.WithHelp("ctrl+d", "Delete"),
+			),
+		},
 	}
 }
 
@@ -43,16 +99,6 @@ func (m Model) Type() tab.Type {
 	return tab.Welcome
 }
 
-// Help returns the help for the tab
-func (m Model) Help() tab.Help {
-	return tab.Help{
-		tab.KeyBind{Key: "enter", Description: "Open"},
-		tab.KeyBind{Key: "ctrl+n", Description: "New"},
-		tab.KeyBind{Key: "ctrl+e", Description: "Edit"},
-		tab.KeyBind{Key: "ctrl+d", Description: "Delete"},
-	}
-}
-
 // SetWidth sets the width of the tab
 func (m Model) SetWidth(width int) tab.Tab {
 	m.width = width
@@ -65,6 +111,10 @@ func (m Model) SetHeight(height int) tab.Tab {
 	return m
 }
 
+func (m Model) ShowHelp() string {
+	return m.help.View(m.keymap)
+}
+
 // Init initializes the tab
 func (m Model) Init() tea.Cmd {
 	return m.reader()