help menu is now structured in a better way

Author: yashranjan1

internal/tui/app/model.go

@@ -24,6 +24,7 @@ type AppModel struct {
 	height      int
 	Views       map[ViewName]views.ViewInterface
 	focusedView ViewName
+	keys        []key.Binding
 	help        help.Model
 }
 
@@ -63,14 +64,18 @@ func (a AppModel) View() string {
 }
 
 func (a AppModel) Help() string {
-	appHelp := styles.AppHelpStyle.Render(" • " + a.help.View(keybinds.Keys))
-	return lipgloss.JoinHorizontal(lipgloss.Left, a.Views[a.focusedView].Help(), appHelp)
+	viewHelp := a.Views[a.focusedView].Help()
+	appHelp := append(viewHelp, a.keys...)
+	helpStruct := keybinds.Help{
+		Keys: appHelp,
+	}
+	return styles.HelpStyle.Render(a.help.View(helpStruct))
 }
 
 func (a *AppModel) AvailableHeight() int {
 	footer := a.Footer()
 	header := a.Header()
-	help := a.Views[a.focusedView].Help()
+	help := a.Help()
 	return a.height - lipgloss.Height(header) - lipgloss.Height(footer) - lipgloss.Height(help)
 }
 
@@ -96,10 +101,15 @@ func (a AppModel) Footer() string {
 }
 
 func NewAppModel(ctx *Context) AppModel {
+	appKeybinds := []key.Binding{
+		keybinds.Keys.Quit,
+	}
+
 	model := AppModel{
 		focusedView: Collections,
 		ctx:         ctx,
 		help:        help.New(),
+		keys:        appKeybinds,
 	}
 	model.Views = map[ViewName]views.ViewInterface{
 		Collections: views.NewCollectionsView(model.ctx.Collections),

internal/tui/components/Input/config.go

@@ -1,8 +1,16 @@
 package input
 
+import "github.com/charmbracelet/bubbles/key"
+
 type InputConfig struct {
 	Prompt      string
 	Placeholder string
 	CharLimit   int
 	Width       int
+	KeyMap      InputKeyMaps
+}
+
+type InputKeyMaps struct {
+	Accept key.Binding
+	Back   key.Binding
 }

internal/tui/components/Input/input.go

@@ -4,7 +4,6 @@ import (
 	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
-	"github.com/maniac-en/req/internal/tui/keybinds"
 	"github.com/maniac-en/req/internal/tui/messages"
 	"github.com/maniac-en/req/internal/tui/styles"
 )
@@ -14,6 +13,7 @@ type OptionsInput struct {
 	height int
 	width  int
 	editId int64
+	keys   InputKeyMaps
 }
 
 func NewOptionsInput(config *InputConfig) OptionsInput {
@@ -27,6 +27,7 @@ func NewOptionsInput(config *InputConfig) OptionsInput {
 	return OptionsInput{
 		input:  input,
 		editId: -1,
+		keys:   config.KeyMap,
 	}
 }
 
@@ -40,14 +41,14 @@ func (i OptionsInput) Update(msg tea.Msg) (OptionsInput, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch {
-		case key.Matches(msg, keybinds.Keys.Choose):
+		case key.Matches(msg, i.keys.Accept):
 			itemName := i.input.Value()
 			i.input.SetValue("")
 			if i.editId == -1 {
 				return i, func() tea.Msg { return messages.ItemAdded{Item: itemName} }
 			}
 			return i, func() tea.Msg { return messages.ItemEdited{Item: itemName, ItemID: i.editId} }
-		case key.Matches(msg, keybinds.Keys.Back):
+		case key.Matches(msg, i.keys.Back):
 			return i, func() tea.Msg { return messages.DeactivateView{} }
 		}
 	}
@@ -62,6 +63,13 @@ func (i OptionsInput) View() string {
 	return styles.InputStyle.Render(i.input.View())
 }
 
+func (i OptionsInput) Help() []key.Binding {
+	return []key.Binding{
+		i.keys.Accept,
+		i.keys.Back,
+	}
+}
+
 func (i *OptionsInput) SetInput(text string) {
 	i.input.SetValue(text)
 }

internal/tui/components/OptionsProvider/component.go

@@ -111,6 +111,13 @@ func (o OptionsProvider[T, U]) OnBlur() {
 }
 
 func (o OptionsProvider[T, U]) GetSelected() Option {
+	if o.IsFiltering() {
+		return Option{
+			Name:    "Filtering....",
+			ID:      -1,
+			Subtext: "",
+		}
+	}
 	return o.list.SelectedItem().(Option)
 }
 
@@ -127,6 +134,36 @@ func (o *OptionsProvider[T, U]) RefreshItems() {
 	o.list.SetItems(o.itemMapper(newItems))
 }
 
+func (o *OptionsProvider[T, U]) Help() []key.Binding {
+	var binds []key.Binding
+	switch o.focused {
+	case listComponent:
+		if o.IsFiltering() {
+			binds = []key.Binding{
+				o.keys.AcceptWhileFiltering,
+				o.keys.CancelWhileFiltering,
+				o.keys.ClearFilter,
+			}
+		} else {
+			binds = []key.Binding{
+				o.keys.CursorUp,
+				o.keys.CursorDown,
+				o.keys.NextPage,
+				o.keys.PrevPage,
+				o.keys.Filter,
+				o.keys.AddItem,
+				o.keys.EditItem,
+				o.keys.DeleteItem,
+			}
+		}
+	case textComponent:
+		binds = o.input.Help()
+	default:
+		binds = []key.Binding{}
+	}
+	return binds
+}
+
 func initList[T, U any](config *ListConfig[T, U]) list.Model {
 
 	rawItems, err := config.GetItemsFunc(context.Background())
@@ -157,6 +194,10 @@ func NewOptionsProvider[T, U any](config *ListConfig[T, U]) OptionsProvider[T, U
 		Placeholder: "Add A New Collection...",
 		Width:       22,
 		Prompt:      "",
+		KeyMap: input.InputKeyMaps{
+			Accept: config.AdditionalKeymaps.Accept,
+			Back:   config.AdditionalKeymaps.Back,
+		},
 	}
 
 	return OptionsProvider[T, U]{

internal/tui/keybinds/collections-binds.go

@@ -14,6 +14,8 @@ type ListKeyMap struct {
 	AddItem              key.Binding
 	EditItem             key.Binding
 	DeleteItem           key.Binding
+	Accept               key.Binding
+	Back                 key.Binding
 }
 
 func (c ListKeyMap) ShortHelp() []key.Binding {
@@ -39,5 +41,7 @@ func NewListKeyMap() *ListKeyMap {
 		AddItem:              Keys.InsertItem,
 		DeleteItem:           Keys.Remove,
 		EditItem:             Keys.EditItem,
+		Accept:               Keys.Choose,
+		Back:                 Keys.Back,
 	}
 }

internal/tui/keybinds/types.go

@@ -0,0 +1,22 @@
+package keybinds
+
+import (
+	"github.com/charmbracelet/bubbles/key"
+)
+
+type Help struct {
+	Keys []key.Binding
+}
+
+func (h Help) ShortHelp() []key.Binding {
+	return h.Keys
+}
+
+func (h Help) FullHelp() [][]key.Binding {
+	// TODO: Figure how you wanna show this
+	return [][]key.Binding{}
+}
+
+func (h Help) SetHelp(helpMenu []key.Binding) {
+	h.Keys = helpMenu
+}

internal/tui/views/collections-view.go

@@ -5,13 +5,13 @@ import (
 	"fmt"
 
 	"github.com/charmbracelet/bubbles/help"
+	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/list"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/maniac-en/req/internal/backend/collections"
 	optionsProvider "github.com/maniac-en/req/internal/tui/components/OptionsProvider"
 	"github.com/maniac-en/req/internal/tui/keybinds"
 	"github.com/maniac-en/req/internal/tui/messages"
-	"github.com/maniac-en/req/internal/tui/styles"
 )
 
 type CollectionsView struct {
@@ -31,8 +31,8 @@ func (c CollectionsView) Name() string {
 	return "Collections"
 }
 
-func (c CollectionsView) Help() string {
-	return styles.HelpStyle.Render(c.help.View(c.keys))
+func (c CollectionsView) Help() []key.Binding {
+	return c.list.Help()
 }
 
 func (c CollectionsView) GetFooterSegment() string {

internal/tui/views/types.go

@@ -1,13 +1,14 @@
 package views
 
 import (
+	"github.com/charmbracelet/bubbles/key"
 	tea "github.com/charmbracelet/bubbletea"
 )
 
 type ViewInterface interface {
 	Init() tea.Cmd
 	Name() string
-	Help() string
+	Help() []key.Binding
 	GetFooterSegment() string
 	Update(tea.Msg) (ViewInterface, tea.Cmd)
 	View() string