feat: add help menu toggle

Signed-off-by: Ayush <mail@ayuch.dev>

Author: bakayu

internal/tui/keys.go

@@ -5,8 +5,9 @@ import "github.com/charmbracelet/bubbles/key"
 // KeyMap defines the keybindings for the application.
 type KeyMap struct {
 	// miscellaneous keybindings
-	Quit key.Binding
-	Help key.Binding
+	Quit       key.Binding
+	Escape     key.Binding
+	ToggleHelp key.Binding
 
 	// keybindings for changing theme
 	SwitchTheme key.Binding
@@ -30,22 +31,20 @@ type KeyMap struct {
 // help for all keybindings
 func (k KeyMap) FullHelp() [][]key.Binding {
 	return [][]key.Binding{
-		// Navigation Help
-		{k.FocusNext, k.FocusPrev, k.FocusZero, k.FocusOne},
-		{k.FocusTwo, k.FocusThree, k.FocusFour, k.FocusFive},
-
-		// FilesPanel help
-		{k.StageItem},
-		{k.StageAll},
-
-		// Misc commands help
-		{k.SwitchTheme, k.Help, k.Quit},
+		// Navigation
+		{k.FocusNext, k.FocusPrev},
+		// Panel Focus
+		{k.FocusZero, k.FocusOne, k.FocusTwo, k.FocusThree, k.FocusFour, k.FocusFive},
+		// File Actions
+		{k.StageItem, k.StageAll},
+		// Misc Actions
+		{k.SwitchTheme, k.ToggleHelp, k.Quit},
 	}
 }
 
 // ShortHelp returns a slice of key.Binding containing help for default keybindings
 func (k KeyMap) ShortHelp() []key.Binding {
-	return []key.Binding{k.FocusNext, k.Help, k.Quit}
+	return []key.Binding{k.FocusNext, k.ToggleHelp, k.Escape, k.Quit}
 }
 
 // FilesPanelHelp returns a slice of key.Binding containing help for keybindings related to Files Panel
@@ -62,7 +61,11 @@ func DefaultKeyMap() KeyMap {
 			key.WithKeys("q", "ctrl+c"),
 			key.WithHelp("q", "quit"),
 		),
-		Help: key.NewBinding(
+		Escape: key.NewBinding(
+			key.WithKeys("escape"),
+			key.WithHelp("esc", "cancel"),
+		),
+		ToggleHelp: key.NewBinding(
 			key.WithKeys("?"),
 			key.WithHelp("?", "toggle help"),
 		),

internal/tui/model.go

@@ -3,6 +3,7 @@ package tui
 import (
 	"github.com/charmbracelet/bubbles/help"
 	"github.com/charmbracelet/bubbles/key"
+	"github.com/charmbracelet/bubbles/viewport"
 	tea "github.com/charmbracelet/bubbletea"
 )
 
@@ -15,6 +16,8 @@ type Model struct {
 	themeIndex   int
 	focusedPanel Panel
 	help         help.Model
+	helpViewport viewport.Model
+	helpContent  string
 	showHelp     bool
 }
 
@@ -26,6 +29,7 @@ func initialModel() Model {
 		themeIndex:   0,
 		focusedPanel: MainPanel,
 		help:         help.New(),
+		helpViewport: viewport.New(0, 0),
 		showHelp:     false,
 	}
 }

internal/tui/model_test.go

@@ -140,7 +140,7 @@ func TestModel_contextualHelp(t *testing.T) {
 		{
 			name:         "Files Panel Help",
 			focusedPanel: FilesPanel,
-			expectedKeys: []key.Binding{keys.StageItem, keys.StageAll, keys.FocusNext, keys.Help, keys.Quit},
+			expectedKeys: []key.Binding{keys.StageItem, keys.StageAll, keys.FocusNext, keys.ToggleHelp, keys.Escape, keys.Quit},
 		},
 	}
 
@@ -156,6 +156,47 @@ func TestModel_contextualHelp(t *testing.T) {
 	}
 }
 
+func TestModel_HelpToggle(t *testing.T) {
+	t.Run("toggles help when '?' is pressed", func(t *testing.T) {
+		m := initialModel()
+		helpKey := key.NewBinding(key.WithKeys("?"))
+
+		msg := tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune("?")}
+		updatedModel, _ := m.Update(msg)
+		m = updatedModel.(Model)
+
+		if !m.showHelp {
+			t.Errorf("showHelp should be true after pressing '%s', but got %t", helpKey.Keys()[0], m.showHelp)
+		}
+	})
+
+	t.Run("closes help window if open and '?' is pressed", func(t *testing.T) {
+		m := initialModel()
+		helpKey := key.NewBinding(key.WithKeys("?"))
+		m.showHelp = true
+
+		msg := tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune("?")}
+		updatedModel, _ := m.Update(msg)
+		m = updatedModel.(Model)
+
+		if m.showHelp {
+			t.Errorf("showHelp should be false after pressing '%s', but got %t", helpKey.Keys()[0], m.showHelp)
+		}
+	})
+
+	t.Run("does not quit the app when 'q' is pressed while help window is open", func(t *testing.T) {
+		m := initialModel()
+		m.showHelp = true
+
+		msg := tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune("q")}
+		_, cmd := m.Update(msg)
+
+		if cmd != nil {
+			t.Errorf("Update should not return a quit command when closing the help view, but it did")
+		}
+	})
+}
+
 // assertPanel is a helper to compare focused panels.
 func assertPanel(t testing.TB, got, want Panel) {
 	if got != want {

internal/tui/theme.go

@@ -9,6 +9,7 @@ type Theme struct {
 	ActiveTitle   lipgloss.Style
 	InactiveTitle lipgloss.Style
 	NormalText    lipgloss.Style
+	HelpTitle     lipgloss.Style
 }
 
 // Themes holds all the available themes.
@@ -28,6 +29,9 @@ var Themes = map[string]Theme{
 			Foreground(lipgloss.Color("#cad3f5")), // Text
 		NormalText: lipgloss.NewStyle().
 			Foreground(lipgloss.Color("#cad3f5")), // Text
+		HelpTitle: lipgloss.NewStyle().
+			Foreground(lipgloss.Color("#f5c2e7")).
+			Bold(true),
 	},
 	"Dracula": {
 		ActivePanel: lipgloss.NewStyle().

internal/tui/update.go

@@ -3,34 +3,79 @@ package tui
 import (
 	"github.com/charmbracelet/bubbles/key"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
 )
 
+// keys is a package-level variable that holds the application's keybindings.
 var keys = DefaultKeyMap()
 
-// Update handles all incoming messages and updates the model accordingly.
+// Update is the central message handler for the application. It's called by the
+// Bubble Tea runtime when a message is received. It's responsible for updating
+// the model's state based on the message and returning any commands to execute.
 func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmd tea.Cmd
+	var cmds []tea.Cmd
+
 	switch msg := msg.(type) {
-	// tea.WindowSizeMsg is sent when the terminal window is resized.
+	// Handle terminal window resize events.
 	case tea.WindowSizeMsg:
 		m.width = msg.Width
 		m.height = msg.Height
 		m.help.Width = msg.Width
+		// Recalculate the dimensions of the help viewport.
+		m.helpViewport.Width = int(float64(m.width) * 0.5)
+		m.helpViewport.Height = int(float64(m.height) * 0.75)
 
-	// tea.KeyMsg is sent when a key is pressed.
+	// Handle keyboard input.
 	case tea.KeyMsg:
+		// If the help view is currently visible, handle its specific keybindings.
+		if m.showHelp {
+			// Allow the viewport to handle scrolling with arrow keys.
+			m.helpViewport, cmd = m.helpViewport.Update(msg)
+			cmds = append(cmds, cmd)
+
+			// Check for keys that close the help view.
+			switch {
+			case key.Matches(msg, keys.Quit), key.Matches(msg, keys.ToggleHelp), key.Matches(msg, keys.Escape):
+				m.showHelp = false
+			}
+			return m, tea.Batch(cmds...)
+		}
+
+		// Handle keybindings for the main application view.
 		switch {
 		case key.Matches(msg, keys.Quit):
 			return m, tea.Quit
 
+		case key.Matches(msg, keys.ToggleHelp):
+			m.showHelp = true
+			// Generate and style the help content when the view is opened.
+			m.helpContent = m.generateHelpContent()
+			m.helpViewport.SetContent(m.helpContent)
+			m.helpViewport.Style = lipgloss.NewStyle().
+				Border(lipgloss.RoundedBorder()).
+				BorderForeground(m.theme.ActivePanel.GetBorderTopForeground()).
+				Padding(1, 2)
+			m.helpViewport.GotoTop()
+
 		case key.Matches(msg, keys.SwitchTheme):
 			m.nextTheme()
+			// Regenerate help content to apply new theme colors.
+			m.helpContent = m.generateHelpContent()
+			m.helpViewport.SetContent(m.helpContent)
+			m.helpViewport.Style = lipgloss.NewStyle().
+				Border(lipgloss.RoundedBorder()).
+				BorderForeground(m.theme.ActivePanel.GetBorderTopForeground()).
+				Padding(1, 2)
 
+		// Handle panel focus navigation.
 		case key.Matches(msg, keys.FocusNext):
 			m.nextPanel()
 
 		case key.Matches(msg, keys.FocusPrev):
 			m.prevPanel()
 
+		// Handle direct panel focus via number keys.
 		case key.Matches(msg, keys.FocusZero):
 			m.focusedPanel = MainPanel
 
@@ -51,7 +96,8 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 		// Return the updated model to the Bubble Tea runtime.
 		return m, nil
-
 	}
-	return m, nil
+
+	// Batch and return any commands that were generated.
+	return m, tea.Batch(cmds...)
 }