fix: responsiveness with qr code, remove controls

Author: PhearZero

ui/controls/controller.go

@@ -1,18 +1,16 @@
 package ui
 
 import (
-	"github.com/algorandfoundation/hack-tui/ui/controls"
 	"github.com/algorandfoundation/hack-tui/ui/style"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 	"strings"
 )
 
 type ErrorViewModel struct {
-	Height   int
-	Width    int
-	controls controls.Model
-	Message  string
+	Height  int
+	Width   int
+	Message string
 }
 
 func NewErrorViewModel(message string) ErrorViewModel {

ui/controls/controls_test.go

@@ -3,12 +3,13 @@ package transaction
 import (
 	"encoding/base64"
 	"fmt"
+	"github.com/algorandfoundation/hack-tui/ui/style"
+	"github.com/charmbracelet/lipgloss"
 
 	"github.com/algorand/go-algorand-sdk/v2/types"
 	"github.com/algorandfoundation/algourl/encoder"
 	"github.com/algorandfoundation/hack-tui/api"
 	tea "github.com/charmbracelet/bubbletea"
-	"github.com/charmbracelet/lipgloss"
 )
 
 func (m ViewModel) Init() tea.Cmd {
@@ -34,10 +35,10 @@ func (m *ViewModel) UpdateTxnURLAndQRCode() error {
 	case "Not Participating": // This status means the account can never participate in consensus
 		m.urlTxn = ""
 		m.asciiQR = ""
-		m.hint = fmt.Sprintf("%s is NotParticipating. Cannot register key.", m.Data.Address)
+		m.hint = fmt.Sprintf("%s is NotParticipating. Cannot register key.", m.FormatedAddress())
 		return nil
 	}
-
+	m.IsOnline = isOnline
 	fee := uint64(1000)
 
 	kr := &encoder.AUrlTxn{}
@@ -69,7 +70,7 @@ func (m *ViewModel) UpdateTxnURLAndQRCode() error {
 			},
 		}
 
-		m.hint = fmt.Sprintf("Scan this QR code to take %s Online.", m.Data.Address)
+		m.hint = fmt.Sprintf("Scan this QR code to take %s Online.", m.FormatedAddress())
 
 	} else {
 
@@ -81,7 +82,7 @@ func (m *ViewModel) UpdateTxnURLAndQRCode() error {
 				Fee:    &fee,
 			}}
 
-		m.hint = fmt.Sprintf("Scan this QR code to take %s Offline.", m.Data.Address)
+		m.hint = fmt.Sprintf("Scan this QR code to take %s Offline.", m.FormatedAddress())
 	}
 
 	qrCode, err := kr.ProduceQRCode()
@@ -100,7 +101,6 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (ViewModel, tea.Cmd) {
 	var cmd tea.Cmd
 	switch msg := msg.(type) {
 	// When the participation key updates, set the models data
-
 	case *api.ParticipationKey:
 		m.Data = *msg
 
@@ -111,13 +111,9 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (ViewModel, tea.Cmd) {
 
 	// Handle View Size changes
 	case tea.WindowSizeMsg:
-		if msg.Width != 0 && msg.Height != 0 {
-			m.Width = msg.Width
-			m.Height = max(0, msg.Height-lipgloss.Height(m.controls.View())-3)
-		}
+		borderRender := style.Border.Render("")
+		m.Width = max(0, msg.Width-lipgloss.Width(borderRender))
+		m.Height = max(0, msg.Height-lipgloss.Height(borderRender))
 	}
-
-	// Pass messages to controls
-	m.controls, cmd = m.controls.HandleMessage(msg)
 	return m, cmd
 }

ui/controls/model.go

@@ -1,14 +1,12 @@
 package transaction
 
 import (
+	"fmt"
 	"github.com/algorandfoundation/hack-tui/api"
 	"github.com/algorandfoundation/hack-tui/internal"
-	"github.com/algorandfoundation/hack-tui/ui/controls"
-	"github.com/charmbracelet/lipgloss"
+	"github.com/algorandfoundation/hack-tui/ui/style"
 )
 
-var green = lipgloss.NewStyle().Foreground(lipgloss.Color("10"))
-
 type ViewModel struct {
 	// Width is the last known horizontal lines
 	Width int
@@ -19,21 +17,29 @@ type ViewModel struct {
 	Data api.ParticipationKey
 
 	// Pointer to the State
-	State *internal.StateModel
+	State    *internal.StateModel
+	IsOnline bool
 
 	// Components
-	controls controls.Model
+	controls   string
+	navigation string
 
 	// QR Code, URL and hint text
 	asciiQR string
 	urlTxn  string
 	hint    string
 }
 
+func (m ViewModel) FormatedAddress() string {
+	return fmt.Sprintf("%s...%s", m.Data.Address[0:4], m.Data.Address[len(m.Data.Address)-4:])
+}
+
 // New creates and instance of the ViewModel with a default controls.Model
 func New(state *internal.StateModel) ViewModel {
 	return ViewModel{
-		State:    state,
-		controls: controls.New(" (a)ccounts | (k)eys | " + green.Render("(t)xn") + " | shift+tab: back "),
+		State:      state,
+		IsOnline:   false,
+		navigation: "| (a)ccounts | (k)eys | " + style.Green.Render("(t)xn") + " |",
+		controls:   "( shift+tab: back )",
 	}
 }

ui/controls/style.go

@@ -7,43 +7,56 @@ import (
 )
 
 func (m ViewModel) View() string {
-	qrRender := lipgloss.JoinVertical(
-		lipgloss.Center,
-		style.Yellow.Render(m.hint),
-		"",
-		qrStyle.Render(m.asciiQR),
-		urlStyle.Render(m.urlTxn),
-	)
+	qrCode := qrStyle.Render(m.asciiQR)
+	qrWidth := lipgloss.Width(qrCode)
+	qrHeight := lipgloss.Height(qrCode)
+	title := ""
+	if m.IsOnline {
+		title = "Online Transaction"
+	} else {
+		title = "Offline Transaction"
+	}
 
-	if m.asciiQR == "" || m.urlTxn == "" {
-		return lipgloss.JoinVertical(
-			lipgloss.Center,
-			"No QR Code or TxnURL available",
-			"\n",
-			m.controls.View())
+	url := ""
+	if lipgloss.Width(m.urlTxn) > qrWidth {
+		url = m.urlTxn[:(qrWidth-3)] + "..."
+	} else {
+		url = m.urlTxn
 	}
 
-	if lipgloss.Height(qrRender) > m.Height {
-		padHeight := max(0, m.Height-lipgloss.Height(m.controls.View())-1)
-		padHString := strings.Repeat("\n", padHeight/2)
+	var render string
+	if qrWidth > m.Width || qrHeight+2 > m.Height {
 		text := style.Red.Render("QR Code too large to display... Please adjust terminal dimensions or font.")
+		padHeight := max(0, m.Height-lipgloss.Height(text))
+		padHString := strings.Repeat("\n", padHeight/2)
 		padWidth := max(0, m.Width-lipgloss.Width(text))
 		padWString := strings.Repeat(" ", padWidth/2)
-		return lipgloss.JoinVertical(
+		paddedStr := lipgloss.JoinVertical(
 			lipgloss.Left,
 			padHString,
 			lipgloss.JoinHorizontal(lipgloss.Left, padWString, style.Red.Render("QR Code too large to display... Please adjust terminal dimensions or font.")),
-			padHString,
-			m.controls.View())
-	}
+		)
+		render = style.ApplyBorder(m.Width, m.Height, "8").Render(paddedStr)
+	} else {
+		qRemainingWidth := max(0, (m.Width-lipgloss.Width(qrCode))/2)
+		qrCode = lipgloss.JoinHorizontal(lipgloss.Left, strings.Repeat(" ", qRemainingWidth), qrCode, strings.Repeat(" ", qRemainingWidth))
+		qRemainingHeight := max(0, (m.Height-2-lipgloss.Height(qrCode))/2)
+		if qrHeight+2 == m.Height {
+			qrCode = lipgloss.JoinVertical(lipgloss.Center, style.Yellow.Render(m.hint), qrCode, urlStyle.Render(url))
+		} else {
+			qrCode = lipgloss.JoinVertical(lipgloss.Center, strings.Repeat("\n", qRemainingHeight), style.Yellow.Render(m.hint), qrCode, urlStyle.Render(url))
 
-	qrRenderPadHeight := max(0, m.Height-(lipgloss.Height(qrRender)-lipgloss.Height(m.controls.View()))-1)
-	qrPad := strings.Repeat("\n", qrRenderPadHeight/2)
-	return lipgloss.JoinVertical(
-		lipgloss.Center,
-		qrPad,
-		qrRender,
-		qrPad,
-		m.controls.View(),
+		}
+		render = style.ApplyBorder(m.Width, m.Height, "8").Render(qrCode)
+	}
+	return style.WithNavigation(
+		m.navigation,
+		style.WithControls(
+			m.controls,
+			style.WithTitle(
+				title,
+				render,
+			),
+		),
 	)
 }