fix(help): add styled whitespace with configurable background

help/help.go

@@ -31,14 +31,16 @@ type Styles struct {
 	Ellipsis lipgloss.Style
 
 	// Styling for the short help
-	ShortKey       lipgloss.Style
-	ShortDesc      lipgloss.Style
-	ShortSeparator lipgloss.Style
+	ShortKey        lipgloss.Style
+	ShortDesc       lipgloss.Style
+	ShortSeparator  lipgloss.Style
+	ShortWhitespace lipgloss.Style
 
 	// Styling for the full help
-	FullKey       lipgloss.Style
-	FullDesc      lipgloss.Style
-	FullSeparator lipgloss.Style
+	FullKey        lipgloss.Style
+	FullDesc       lipgloss.Style
+	FullSeparator  lipgloss.Style
+	FullWhitespace lipgloss.Style
 }
 
 // Model contains the state of the help view.
@@ -78,13 +80,15 @@ func New() Model {
 		FullSeparator:  "    ",
 		Ellipsis:       "…",
 		Styles: Styles{
-			ShortKey:       keyStyle,
-			ShortDesc:      descStyle,
-			ShortSeparator: sepStyle,
-			Ellipsis:       sepStyle,
-			FullKey:        keyStyle,
-			FullDesc:       descStyle,
-			FullSeparator:  sepStyle,
+			ShortKey:        keyStyle,
+			ShortDesc:       descStyle,
+			ShortSeparator:  sepStyle,
+			ShortWhitespace: sepStyle,
+			Ellipsis:        sepStyle,
+			FullKey:         keyStyle,
+			FullDesc:        descStyle,
+			FullSeparator:   sepStyle,
+			FullWhitespace:  sepStyle,
 		},
 	}
 }
@@ -132,7 +136,8 @@ func (m Model) ShortHelpView(bindings []key.Binding) string {
 
 		// Item
 		str := sep +
-			m.Styles.ShortKey.Inline(true).Render(kb.Help().Key) + " " +
+			m.Styles.ShortKey.Inline(true).Render(kb.Help().Key) +
+			m.Styles.ShortWhitespace.Inline(true).Render(" ") +
 			m.Styles.ShortDesc.Inline(true).Render(kb.Help().Desc)
 		w := lipgloss.Width(str)
 
@@ -197,7 +202,7 @@ func (m Model) FullHelpView(groups [][]key.Binding) string {
 		col := lipgloss.JoinHorizontal(lipgloss.Top,
 			sep,
 			m.Styles.FullKey.Render(strings.Join(keys, "\n")),
-			" ",
+			m.Styles.FullWhitespace.Render(" "),
 			m.Styles.FullDesc.Render(strings.Join(descriptions, "\n")),
 		)
 		w := lipgloss.Width(col)

help/help_whitespace_test.go

@@ -0,0 +1,102 @@
+package help
+
+import (
+	"fmt"
+	"testing"
+
+	"github.com/charmbracelet/bubbles/key"
+	"github.com/charmbracelet/lipgloss"
+	"github.com/charmbracelet/x/exp/golden"
+)
+
+func TestWhitespaceStyle(t *testing.T) {
+	m := New()
+	m.FullSeparator = " | "
+
+	// Set a distinctive background color for whitespace to make it visible in tests
+	whitespaceBg := lipgloss.Color("#FF0000")
+	m.Styles.ShortWhitespace = m.Styles.ShortWhitespace.Background(whitespaceBg)
+	m.Styles.FullWhitespace = m.Styles.FullWhitespace.Background(whitespaceBg)
+
+	// Standard keys setup
+	k := key.WithKeys("x")
+	kb := [][]key.Binding{
+		{
+			key.NewBinding(k, key.WithHelp("enter", "continue")),
+		},
+		{
+			key.NewBinding(k, key.WithHelp("esc", "back")),
+			key.NewBinding(k, key.WithHelp("?", "help")),
+		},
+		{
+			key.NewBinding(k, key.WithHelp("H", "home")),
+			key.NewBinding(k, key.WithHelp("ctrl+c", "quit")),
+			key.NewBinding(k, key.WithHelp("ctrl+l", "log")),
+		},
+	}
+
+	// Test both views at different widths
+	for _, w := range []int{20, 30, 40} {
+		t.Run(fmt.Sprintf("full_help_width_%d", w), func(t *testing.T) {
+			m.Width = w
+			s := m.FullHelpView(kb)
+			golden.RequireEqual(t, []byte(s))
+		})
+
+		t.Run(fmt.Sprintf("short_help_width_%d", w), func(t *testing.T) {
+			m.Width = w
+			// Flatten the bindings for short help
+			var shortBindings []key.Binding
+			for _, group := range kb {
+				shortBindings = append(shortBindings, group...)
+			}
+			s := m.ShortHelpView(shortBindings)
+			golden.RequireEqual(t, []byte(s))
+		})
+	}
+
+	// Test with a disabled item and custom style
+	for _, tc := range []struct {
+		name     string
+		setupFn  func()
+		bindings [][]key.Binding
+	}{
+		{
+			name: "disabled_item",
+			setupFn: func() {
+				m.Width = 40
+			},
+			bindings: [][]key.Binding{{
+				key.NewBinding(k, key.WithHelp("enter", "continue")),
+				key.NewBinding(k, key.WithHelp("ctrl+c", "quit"), key.WithDisabled()),
+			}},
+		},
+		{
+			name: "custom_style",
+			setupFn: func() {
+				m.Width = 40
+				customBg := lipgloss.Color("#00FF00")
+				m.Styles.FullWhitespace = m.Styles.FullWhitespace.Background(customBg)
+				m.Styles.ShortWhitespace = m.Styles.ShortWhitespace.Background(customBg)
+			},
+			bindings: kb,
+		},
+	} {
+		t.Run(tc.name+"_full", func(t *testing.T) {
+			tc.setupFn()
+			s := m.FullHelpView(tc.bindings)
+			golden.RequireEqual(t, []byte(s))
+		})
+
+		t.Run(tc.name+"_short", func(t *testing.T) {
+			tc.setupFn()
+			// Flatten the bindings for short help
+			var shortBindings []key.Binding
+			for _, group := range tc.bindings {
+				shortBindings = append(shortBindings, group...)
+			}
+			s := m.ShortHelpView(shortBindings)
+			golden.RequireEqual(t, []byte(s))
+		})
+	}
+}

help/testdata/TestWhitespaceStyle/custom_style_full.golden

@@ -0,0 +1,3 @@
+enter continue | esc back | H      home
+                 ?   help   ctrl+c quit
+                            ctrl+l log 

help/testdata/TestWhitespaceStyle/custom_style_short.golden

@@ -0,0 +1 @@
+enter continue • esc back • ? help …

help/testdata/TestWhitespaceStyle/disabled_item_full.golden

@@ -0,0 +1 @@
+enter continue

help/testdata/TestWhitespaceStyle/disabled_item_short.golden

@@ -0,0 +1 @@
+enter continue

help/testdata/TestWhitespaceStyle/full_help_width_20.golden

@@ -0,0 +1 @@
+enter continue …

help/testdata/TestWhitespaceStyle/full_help_width_30.golden

@@ -0,0 +1,2 @@
+enter continue | esc back …
+                 ?   help  

help/testdata/TestWhitespaceStyle/full_help_width_40.golden

@@ -0,0 +1,3 @@
+enter continue | esc back | H      home
+                 ?   help   ctrl+c quit
+                            ctrl+l log 

help/testdata/TestWhitespaceStyle/short_help_width_20.golden

@@ -0,0 +1 @@
+enter continue …

help/testdata/TestWhitespaceStyle/short_help_width_30.golden

@@ -0,0 +1 @@
+enter continue • esc back …

help/testdata/TestWhitespaceStyle/short_help_width_40.golden

@@ -0,0 +1 @@
+enter continue • esc back • ? help …