feat: augment border with controls. split controls and navigation

ui/error.go

@@ -17,10 +17,9 @@ type ErrorViewModel struct {
 
 func NewErrorViewModel(message string) ErrorViewModel {
 	return ErrorViewModel{
-		Height:   0,
-		Width:    0,
-		Message:  message,
-		controls: controls.New(" Error "),
+		Height:  0,
+		Width:   0,
+		Message: message,
 	}
 }
 
@@ -37,18 +36,34 @@ func (m ErrorViewModel) HandleMessage(msg tea.Msg) (ErrorViewModel, tea.Cmd) {
 	switch msg := msg.(type) {
 
 	case tea.WindowSizeMsg:
-		m.Width = msg.Width
-		m.Height = msg.Height
+		borderRender := style.Border.Render("")
+		m.Width = max(0, msg.Width-lipgloss.Width(borderRender))
+		m.Height = max(0, msg.Height-lipgloss.Height(borderRender))
 	}
-	m.controls, cmd = m.controls.HandleMessage(msg)
+
 	return m, cmd
 }
 
 func (m ErrorViewModel) View() string {
-	ctls := m.controls.View()
-	controlHeight := lipgloss.Height(ctls)
+	msgHeight := lipgloss.Height(m.Message)
+	msgWidth := lipgloss.Width(m.Message)
+
+	if msgWidth > m.Width/2 {
+		m.Message = m.Message[0:m.Width/2] + "..."
+		msgWidth = m.Width/2 + 3
+	}
+
 	msg := style.Red.Render(m.Message)
-	msgHeight := lipgloss.Height(msg)
-	pad := strings.Repeat("\n", max(0, (m.Height/2)-controlHeight-msgHeight))
-	return lipgloss.JoinVertical(lipgloss.Center, pad, msg, pad, ctls)
+	padT := strings.Repeat("\n", max(0, (m.Height/2)-msgHeight))
+	padL := strings.Repeat(" ", max(0, (m.Width-msgWidth)/2))
+
+	text := lipgloss.JoinHorizontal(lipgloss.Left, padL, msg)
+	render := style.ApplyBorder(m.Width, m.Height, "8").Render(lipgloss.JoinVertical(lipgloss.Center, padT, text))
+	return style.WithNavigation(
+		"( Waiting for recovery... )",
+		style.WithTitle(
+			"System Error",
+			render,
+		),
+	)
 }

ui/pages/accounts/controller.go

@@ -31,18 +31,19 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (ViewModel, tea.Cmd) {
 			return m, tea.Quit
 		}
 	case tea.WindowSizeMsg:
-		m.Width = msg.Width
-		m.Height = msg.Height
-
 		borderRender := style.Border.Render("")
-		m.table.SetWidth(max(0, msg.Width-lipgloss.Width(borderRender)))
-		m.table.SetHeight(m.Height - lipgloss.Height(borderRender) - lipgloss.Height(m.controls.View()))
-		m.table.SetColumns(m.makeColumns(msg.Width - lipgloss.Width(borderRender)))
+		borderWidth := lipgloss.Width(borderRender)
+		borderHeight := lipgloss.Height(borderRender)
+
+		m.Width = max(0, msg.Width-borderWidth)
+		m.Height = max(0, msg.Height-borderHeight)
+
+		m.table.SetWidth(m.Width)
+		m.table.SetHeight(max(0, m.Height))
+		m.table.SetColumns(m.makeColumns(m.Width))
 	}
 
 	m.table, cmd = m.table.Update(msg)
 	cmds = append(cmds, cmd)
-	m.controls, cmd = m.controls.HandleMessage(msg)
-	cmds = append(cmds, cmd)
 	return m, tea.Batch(cmds...)
 }

ui/pages/accounts/model.go

@@ -6,7 +6,6 @@ import (
 	"strconv"
 
 	"github.com/algorandfoundation/hack-tui/internal"
-	"github.com/algorandfoundation/hack-tui/ui/controls"
 	"github.com/charmbracelet/bubbles/table"
 	"github.com/charmbracelet/lipgloss"
 )
@@ -16,16 +15,18 @@ type ViewModel struct {
 	Height int
 	Data   map[string]internal.Account
 
-	table    table.Model
-	controls controls.Model
+	table      table.Model
+	navigation string
+	controls   string
 }
 
 func New(state *internal.StateModel) ViewModel {
 	m := ViewModel{
-		Width:    0,
-		Height:   0,
-		Data:     state.Accounts,
-		controls: controls.New(" (g)enerate | " + style.Green.Render("(a)ccounts") + " | (k)eys | (t)xn "),
+		Width:      0,
+		Height:     0,
+		Data:       state.Accounts,
+		controls:   "( (g)enerate )",
+		navigation: "| " + style.Green.Render("(a)ccounts") + " | (k)eys | (t)xn |",
 	}
 
 	m.table = table.New(

ui/pages/accounts/view.go

@@ -2,9 +2,18 @@ package accounts
 
 import (
 	"github.com/algorandfoundation/hack-tui/ui/style"
-	"github.com/charmbracelet/lipgloss"
 )
 
 func (m ViewModel) View() string {
-	return style.WithTitle("Accounts", lipgloss.JoinVertical(lipgloss.Center, style.ApplyBorder(m.Width-3, m.Height-4, "8").Render(m.table.View()), m.controls.View()))
+	table := style.ApplyBorder(m.Width, m.Height, "8").Render(m.table.View())
+	return style.WithNavigation(
+		m.navigation,
+		style.WithControls(
+			m.controls,
+			style.WithTitle(
+				"Accounts",
+				table,
+			),
+		),
+	)
 }

ui/pages/generate/cmds.go

@@ -0,0 +1,14 @@
+package generate
+
+import (
+	tea "github.com/charmbracelet/bubbletea"
+)
+
+type Cancel struct{}
+
+// EmitCancelGenerate cancel generation
+func EmitCancel(cg Cancel) tea.Cmd {
+	return func() tea.Msg {
+		return cg
+	}
+}

ui/pages/generate/controller.go

@@ -5,8 +5,10 @@ import (
 	"github.com/algorandfoundation/hack-tui/api"
 	"github.com/algorandfoundation/hack-tui/internal"
 	"github.com/algorandfoundation/hack-tui/ui/pages/accounts"
+	"github.com/algorandfoundation/hack-tui/ui/style"
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
 	"github.com/charmbracelet/log"
 	"strconv"
 )
@@ -25,10 +27,12 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (ViewModel, tea.Cmd) {
 
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
-		m.Width = msg.Width
-		m.Height = msg.Height
+		m.Width = msg.Width - lipgloss.Width(style.Border.Render(""))
+		m.Height = msg.Height - lipgloss.Height(style.Border.Render(""))
 	case tea.KeyMsg:
 		switch msg.String() {
+		case "ctrl+c", "esc":
+			return m, EmitCancel(Cancel{})
 		case "tab", "shift+tab", "up", "down":
 			s := msg.String()
 

ui/pages/generate/model.go

@@ -7,20 +7,24 @@ import (
 )
 
 type ViewModel struct {
-	Width      int
-	Height     int
-	Address    string
-	Inputs     []textinput.Model
+	Width   int
+	Height  int
+	Address string
+	Inputs  []textinput.Model
+
+	controls string
+
 	client     *api.ClientWithResponses
 	focusIndex int
 	cursorMode cursor.Mode
 }
 
 func New(address string, client *api.ClientWithResponses) ViewModel {
 	m := ViewModel{
-		Address: address,
-		Inputs:  make([]textinput.Model, 3),
-		client:  client,
+		Address:  address,
+		Inputs:   make([]textinput.Model, 3),
+		controls: "( ctrl+c to cancel )",
+		client:   client,
 	}
 
 	var t textinput.Model

ui/pages/generate/view.go

@@ -22,5 +22,12 @@ func (m ViewModel) View() string {
 	}
 	fmt.Fprintf(&b, "\n\n%s\n\n", *button)
 
-	return style.WithTitle("Generate", style.ApplyBorder(m.Width-3, m.Height-1, "8").Render(b.String()))
+	render := style.ApplyBorder(m.Width, m.Height, "8").Render(b.String())
+	return style.WithControls(
+		m.controls,
+		style.WithTitle(
+			"Generate",
+			render,
+		),
+	)
 }

ui/pages/keys/controller.go

@@ -37,21 +37,20 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (ViewModel, tea.Cmd) {
 		}
 
 	case tea.WindowSizeMsg:
-		m.Width = msg.Width
-		m.Height = msg.Height + 1
-
 		borderRender := style.Border.Render("")
-		tableWidth := max(0, msg.Width-lipgloss.Width(borderRender)-20)
-		m.table.SetWidth(tableWidth)
-		m.table.SetHeight(m.Height - lipgloss.Height(borderRender) - lipgloss.Height(m.controls.View()))
-		m.table.SetColumns(m.makeColumns(tableWidth))
+		borderWidth := lipgloss.Width(borderRender)
+		borderHeight := lipgloss.Height(borderRender)
+
+		m.Width = max(0, msg.Width-borderWidth)
+		m.Height = max(0, msg.Height-borderHeight)
+		m.table.SetWidth(m.Width)
+		m.table.SetHeight(m.Height)
+		m.table.SetColumns(m.makeColumns(m.Width))
 	}
 
 	var cmds []tea.Cmd
 	var cmd tea.Cmd
 	m.table, cmd = m.table.Update(msg)
 	cmds = append(cmds, cmd)
-	m.controls, cmd = m.controls.HandleMessage(msg)
-	cmds = append(cmds, cmd)
 	return m, tea.Batch(cmds...)
 }

ui/pages/keys/model.go

@@ -5,7 +5,6 @@ import (
 	"sort"
 
 	"github.com/algorandfoundation/hack-tui/api"
-	"github.com/algorandfoundation/hack-tui/ui/controls"
 	"github.com/algorandfoundation/hack-tui/ui/utils"
 	"github.com/charmbracelet/bubbles/table"
 	"github.com/charmbracelet/lipgloss"
@@ -17,8 +16,9 @@ type ViewModel struct {
 	Width   int
 	Height  int
 
-	table    table.Model
-	controls controls.Model
+	table      table.Model
+	controls   string
+	navigation string
 }
 
 func New(address string, keys *[]api.ParticipationKey) ViewModel {
@@ -28,15 +28,16 @@ func New(address string, keys *[]api.ParticipationKey) ViewModel {
 		Width:   80,
 		Height:  24,
 
-		controls: controls.New(" (g)enerate | (a)ccounts | " + style.Green.Render("(k)eys") + " | (t)xn | (d)elete "),
+		controls:   "( (g)enerate | (d)elete )",
+		navigation: "| (a)ccounts | " + style.Green.Render("(k)eys") + " | (t)xn |",
 
 		table: table.New(),
 	}
 	m.table = table.New(
 		table.WithColumns(m.makeColumns(80)),
 		table.WithRows(m.makeRows(keys)),
 		table.WithFocused(true),
-		table.WithHeight(m.Height-lipgloss.Height(m.controls.View())-1),
+		table.WithHeight(m.Height),
 		table.WithWidth(m.Width),
 	)
 
@@ -70,21 +71,23 @@ func (m ViewModel) SelectedKey() *api.ParticipationKey {
 }
 func (m ViewModel) makeColumns(width int) []table.Column {
 	// TODO: refine responsiveness
-	avgWidth := (width - lipgloss.Width(style.Border.Render("")) - 14) / 13
+	avgWidth := (width - lipgloss.Width(style.Border.Render("")) - 14) / 7
+
+	//avgWidth := 1
 	return []table.Column{
 		{Title: "ID", Width: avgWidth},
 		{Title: "Address", Width: avgWidth},
-		{Title: "SelectionParticipationKey", Width: avgWidth},
-		{Title: "VoteParticipationKey", Width: avgWidth},
-		{Title: "StateProofKey", Width: avgWidth},
+		{Title: "SelectionParticipationKey", Width: 0},
+		{Title: "VoteParticipationKey", Width: 0},
+		{Title: "StateProofKey", Width: 0},
 		{Title: "VoteFirstValid", Width: avgWidth},
 		{Title: "VoteLastValid", Width: avgWidth},
 		{Title: "VoteKeyDilution", Width: avgWidth},
-		{Title: "EffectiveLastValid", Width: avgWidth},
-		{Title: "EffectiveFirstValid", Width: avgWidth},
+		{Title: "EffectiveLastValid", Width: 0},
+		{Title: "EffectiveFirstValid", Width: 0},
 		{Title: "LastVote", Width: avgWidth},
 		{Title: "LastBlockProposal", Width: avgWidth},
-		{Title: "LastStateProof", Width: avgWidth},
+		{Title: "LastStateProof", Width: 0},
 	}
 }
 

ui/pages/keys/view.go

@@ -2,9 +2,18 @@ package keys
 
 import (
 	"github.com/algorandfoundation/hack-tui/ui/style"
-	"github.com/charmbracelet/lipgloss"
 )
 
 func (m ViewModel) View() string {
-	return style.WithTitle("Keys", lipgloss.JoinVertical(lipgloss.Center, style.ApplyBorder(m.Width-3, m.Height-5, "8").Render(m.table.View()), m.controls.View()))
+	table := style.ApplyBorder(m.Width, m.Height, "8").Render(m.table.View())
+	return style.WithNavigation(
+		m.navigation,
+		style.WithControls(
+			m.controls,
+			style.WithTitle(
+				"Keys",
+				table,
+			),
+		),
+	)
 }

ui/protocol.go

@@ -40,14 +40,6 @@ func (m ProtocolViewModel) HandleMessage(msg tea.Msg) (ProtocolViewModel, tea.Cm
 		m.TerminalWidth = msg.Width
 		m.TerminalHeight = msg.Height
 		return m, nil
-	case tea.KeyMsg:
-		switch msg.String() {
-		// The H key should hide the render
-		case "h":
-			m.IsVisible = !m.IsVisible
-		case "ctrl+c":
-			return m, tea.Quit
-		}
 	}
 	// Return the updated model to the Bubble Tea runtime for processing.
 	return m, nil

ui/protocol_test.go

@@ -42,17 +42,8 @@ func Test_ProtocolViewRender(t *testing.T) {
 		teatest.WithDuration(time.Second*3),
 	)
 
-	// Send hide key
-	tm.Send(tea.KeyMsg{
-		Type:  tea.KeyRunes,
-		Runes: []rune("h"),
-	})
-
-	// Send quit key
-	tm.Send(tea.KeyMsg{
-		Type:  tea.KeyRunes,
-		Runes: []rune("ctrl+c"),
-	})
+	// Send quit msg
+	tm.Send(tea.QuitMsg{})
 
 	tm.WaitFinished(t, teatest.WithFinalTimeout(time.Second))
 }

ui/status.go

@@ -39,15 +39,6 @@ func (m StatusViewModel) HandleMessage(msg tea.Msg) (StatusViewModel, tea.Cmd) {
 	case tea.WindowSizeMsg:
 		m.TerminalWidth = msg.Width
 		m.TerminalHeight = msg.Height
-	// Is it a key press?
-	case tea.KeyMsg:
-		switch msg.String() {
-		case "ctrl+c":
-			return m, tea.Quit
-		// always hide on H press
-		case "h":
-			m.IsVisible = !m.IsVisible
-		}
 	}
 	// Return the updated model to the Bubble Tea runtime for processing.
 	return m, nil