feat: add tui pagination

Ayman Bagabas created

Change summary

go.mod                                  | 2 +-
go.sum                                  | 4 ++--
internal/tui/bubbles/git/log/bubble.go  | 7 +++++--
internal/tui/bubbles/git/refs/bubble.go | 7 +++++--
internal/tui/bubbles/git/tree/bubble.go | 7 +++++--
internal/tui/style/style.go             | 8 ++++++++
6 files changed, 26 insertions(+), 9 deletions(-)

Detailed changes

go.mod 🔗

@@ -5,7 +5,7 @@ go 1.17
 require (
 	github.com/alecthomas/chroma v0.10.0
 	github.com/caarlos0/env/v6 v6.9.1
-	github.com/charmbracelet/bubbles v0.10.3-0.20220208194203-1d489252fe50
+	github.com/charmbracelet/bubbles v0.10.4-0.20220302223835-88562515cf7b
 	github.com/charmbracelet/bubbletea v0.19.4-0.20220208181305-42cd4c31919c
 	github.com/charmbracelet/glamour v0.4.0
 	github.com/charmbracelet/lipgloss v0.4.0

go.sum 🔗

@@ -21,8 +21,8 @@ github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuP
 github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
 github.com/caarlos0/env/v6 v6.9.1 h1:zOkkjM0F6ltnQ5eBX6IPI41UP/KDGEK7rRPwGCNos8k=
 github.com/caarlos0/env/v6 v6.9.1/go.mod h1:hvp/ryKXKipEkcuYjs9mI4bBCg+UI0Yhgm5Zu0ddvwc=
-github.com/charmbracelet/bubbles v0.10.3-0.20220208194203-1d489252fe50 h1:hAsXGdqKHVoEbBlvReSfz8X605xddHMBFSxSrCaSSO4=
-github.com/charmbracelet/bubbles v0.10.3-0.20220208194203-1d489252fe50/go.mod h1:jOA+DUF1rjZm7gZHcNyIVW+YrBPALKfpGVdJu8UiJsA=
+github.com/charmbracelet/bubbles v0.10.4-0.20220302223835-88562515cf7b h1:o+LFpRn1fXtu1hDJLtBFjp7tMZ8AqwSpl84w1TnUj0Y=
+github.com/charmbracelet/bubbles v0.10.4-0.20220302223835-88562515cf7b/go.mod h1:jOA+DUF1rjZm7gZHcNyIVW+YrBPALKfpGVdJu8UiJsA=
 github.com/charmbracelet/bubbletea v0.19.3/go.mod h1:VuXF2pToRxDUHcBUcPmCRUHRvFATM4Ckb/ql1rBl3KA=
 github.com/charmbracelet/bubbletea v0.19.4-0.20220208181305-42cd4c31919c h1:hcS4xdVQwblKo8xuA5gRO/jql+yCVfnBlOwWcZrxOmA=
 github.com/charmbracelet/bubbletea v0.19.4-0.20220208181305-42cd4c31919c/go.mod h1:5nPeULOIxbAMykb3ggwhw1kruS7nP+Y4Za9yEH4J27U=

internal/tui/bubbles/git/log/bubble.go 🔗

@@ -104,7 +104,7 @@ func NewBubble(repo types.Repo, styles *style.Styles, width, widthMargin, height
 	l := list.New([]list.Item{}, itemDelegate{styles}, width-widthMargin, height-heightMargin)
 	l.SetShowFilter(false)
 	l.SetShowHelp(false)
-	l.SetShowPagination(false)
+	l.SetShowPagination(true)
 	l.SetShowStatusBar(false)
 	l.SetShowTitle(false)
 	l.SetFilteringEnabled(false)
@@ -136,7 +136,9 @@ func NewBubble(repo types.Repo, styles *style.Styles, width, widthMargin, height
 func (b *Bubble) reset() tea.Cmd {
 	b.state = logState
 	b.list.Select(0)
-	return b.updateItems()
+	cmd := b.updateItems()
+	b.SetSize(b.width, b.height)
+	return cmd
 }
 
 func (b *Bubble) updateItems() tea.Cmd {
@@ -169,6 +171,7 @@ func (b *Bubble) SetSize(width, height int) {
 	b.commitViewport.Viewport.Width = width - b.widthMargin
 	b.commitViewport.Viewport.Height = height - b.heightMargin
 	b.list.SetSize(width-b.widthMargin, height-b.heightMargin)
+	b.list.Styles.PaginationStyle = b.style.LogPaginator.Copy().Width(width - b.widthMargin)
 }
 
 func (b *Bubble) Update(msg tea.Msg) (tea.Model, tea.Cmd) {

internal/tui/bubbles/git/refs/bubble.go 🔗

@@ -80,7 +80,7 @@ func NewBubble(repo types.Repo, styles *style.Styles, width, widthMargin, height
 	l := list.NewModel([]list.Item{}, itemDelegate{styles}, width-widthMargin, height-heightMargin)
 	l.SetShowFilter(false)
 	l.SetShowHelp(false)
-	l.SetShowPagination(false)
+	l.SetShowPagination(true)
 	l.SetShowStatusBar(false)
 	l.SetShowTitle(false)
 	l.SetFilteringEnabled(false)
@@ -107,7 +107,9 @@ func (b *Bubble) SetBranch(ref *plumbing.Reference) (tea.Model, tea.Cmd) {
 }
 
 func (b *Bubble) reset() tea.Cmd {
-	return b.updateItems()
+	cmd := b.updateItems()
+	b.SetSize(b.width, b.height)
+	return cmd
 }
 
 func (b *Bubble) Init() tea.Cmd {
@@ -118,6 +120,7 @@ func (b *Bubble) SetSize(width, height int) {
 	b.width = width
 	b.height = height
 	b.list.SetSize(width-b.widthMargin, height-b.heightMargin)
+	b.list.Styles.PaginationStyle = b.style.RefPaginator.Copy().Width(width - b.widthMargin)
 }
 
 func (b *Bubble) Help() []types.HelpEntry {

internal/tui/bubbles/git/tree/bubble.go 🔗

@@ -135,7 +135,7 @@ func NewBubble(repo types.Repo, styles *style.Styles, width, widthMargin, height
 	l := list.New([]list.Item{}, itemDelegate{styles}, width-widthMargin, height-heightMargin)
 	l.SetShowFilter(false)
 	l.SetShowHelp(false)
-	l.SetShowPagination(false)
+	l.SetShowPagination(true)
 	l.SetShowStatusBar(false)
 	l.SetShowTitle(false)
 	l.SetFilteringEnabled(false)
@@ -164,7 +164,9 @@ func (b *Bubble) reset() tea.Cmd {
 	b.path = ""
 	b.state = treeState
 	b.lastSelected = make([]int, 0)
-	return b.updateItems()
+	cmd := b.updateItems()
+	b.SetSize(b.width, b.height)
+	return cmd
 }
 
 func (b *Bubble) Init() tea.Cmd {
@@ -177,6 +179,7 @@ func (b *Bubble) SetSize(width, height int) {
 	b.fileViewport.Viewport.Width = width - b.widthMargin
 	b.fileViewport.Viewport.Height = height - b.heightMargin
 	b.list.SetSize(width-b.widthMargin, height-b.heightMargin)
+	b.list.Styles.PaginationStyle = b.style.LogPaginator.Copy().Width(width - b.widthMargin)
 }
 
 func (b *Bubble) Help() []types.HelpEntry {

internal/tui/style/style.go 🔗

@@ -51,12 +51,14 @@ type Styles struct {
 	LogCommitBody     lipgloss.Style
 	LogCommitStatsAdd lipgloss.Style
 	LogCommitStatsDel lipgloss.Style
+	LogPaginator      lipgloss.Style
 
 	RefItemSelector lipgloss.Style
 	RefItemActive   lipgloss.Style
 	RefItemInactive lipgloss.Style
 	RefItemBranch   lipgloss.Style
 	RefItemTag      lipgloss.Style
+	RefPaginator    lipgloss.Style
 
 	TreeItemSelector lipgloss.Style
 	TreeItemActive   lipgloss.Style
@@ -225,6 +227,10 @@ func DefaultStyles() *Styles {
 		Foreground(lipgloss.Color("#FD5B5B")).
 		Bold(true)
 
+	s.LogPaginator = lipgloss.NewStyle().
+		Margin(0).
+		Align(lipgloss.Center)
+
 	s.RefItemSelector = s.LogItemSelector.Copy()
 
 	s.RefItemActive = s.LogItemActive.Copy()
@@ -236,6 +242,8 @@ func DefaultStyles() *Styles {
 	s.RefItemTag = lipgloss.NewStyle().
 		Foreground(lipgloss.Color("#A3A322"))
 
+	s.RefPaginator = s.LogPaginator.Copy()
+
 	s.TreeItemSelector = s.LogItemSelector.Copy()
 
 	s.TreeItemActive = s.LogItemActive.Copy()