feat(ui): show board's mode next to the status bar

Add a TextView primitive next to the status bar that displays the
board's current mode. In this commit the baseFlex is replaced with a
Grid primitive to prevent the need to add more Flex primitives.

Part of apollo/pelican#23

internal/ui/init.go

@@ -84,17 +84,17 @@ func (a *App) initQuitModal() {
 		SetDoneFunc(doneFunc)
 }
 
-// initView initialises the view window for displaying the card.
-func (a *App) initView() {
+// initCardView initialises the view window for displaying the card.
+func (a *App) initCardView() {
 	doneFunc := func(key tcell.Key) {
 		if key == tcell.KeyEsc {
 			a.pages.HidePage(viewPage)
-			a.view.Clear()
+			a.cardView.Clear()
 			a.setColumnFocus()
 		}
 	}
 
-	a.view.setDoneFunc(doneFunc)
+	a.cardView.setDoneFunc(doneFunc)
 }
 
 func (a *App) initStatusbar() {

internal/ui/keymappings.go

@@ -49,7 +49,7 @@ func (a *App) move() {
 	if a.mode == normal {
 		a.statusSelection.cardID = a.focusedCardID()
 		a.statusSelection.currentStatusID = a.focusedStatusID()
-		a.mode = selection
+		a.updateBoardMode(selection)
 	}
 }
 
@@ -99,9 +99,9 @@ func (a *App) selected() {
 		}
 
 		status := a.focusedStatusName()
-		a.view.setText(card.ID, card.Title, status, card.Created, card.Description)
+		a.cardView.setText(card.ID, card.Title, status, card.Created, card.Description)
 		a.pages.ShowPage(viewPage)
-		a.SetFocus(a.view)
+		a.SetFocus(a.cardView)
 	case selection:
 		a.statusSelection.nextStatusID = a.focusedStatusID()
 		if a.statusSelection.currentStatusID != a.statusSelection.nextStatusID {
@@ -119,13 +119,13 @@ func (a *App) selected() {
 		}
 
 		a.statusSelection = statusSelection{0, 0, 0}
-		a.mode = normal
+		a.updateBoardMode(normal)
 		a.refresh(false)
 	}
 }
 
 func (a *App) escape() {
 	if a.mode != normal {
-		a.mode = normal
+		a.updateBoardMode(normal)
 	}
 }

internal/ui/modeview.go

@@ -0,0 +1,35 @@
+package ui
+
+import (
+	"fmt"
+
+	"github.com/gdamore/tcell/v2"
+	"github.com/rivo/tview"
+)
+
+type modeView struct {
+	*tview.TextView
+	format string
+}
+
+func newModeView() *modeView {
+	format := "[white::b]%s[-:-:-:-]"
+
+	textView := tview.NewTextView()
+
+	textView.SetBackgroundColor(tcell.ColorGrey.TrueColor())
+	textView.SetTextAlign(tview.AlignLeft)
+	textView.SetDynamicColors(true)
+
+	obj := modeView{
+		TextView: textView,
+		format:   format,
+	}
+
+	return &obj
+}
+
+func (m *modeView) update(mode boardMode) {
+	m.Clear()
+	fmt.Fprintf(m, m.format, mode)
+}

internal/ui/ui.go

@@ -9,7 +9,7 @@ import (
 
 type (
 	boardMovement int
-	boardMode     int
+	boardMode     string
 )
 
 const (
@@ -17,34 +17,33 @@ const (
 	previous
 )
 
-const (
-	normal boardMode = iota
-	selection
-)
-
 const (
 	mainPage            string = "main"
 	quitPage            string = "quit"
 	cardFormPage        string = "card form"
 	deleteCardModalPage string = "delete card modal"
 	viewPage            string = "view"
+
+	normal    boardMode = "NORMAL"
+	selection boardMode = "SELECTION"
 )
 
 type App struct {
 	*tview.Application
 
 	columns         []*column
-	baseFlex        *tview.Flex
+	grid            *tview.Grid
 	columnFlex      *tview.Flex
 	pages           *tview.Pages
 	focusedColumn   int
 	board           board.Board
 	mode            boardMode
+	modeView        *modeView
 	quitModal       *tview.Modal
 	cardForm        *cardForm
 	deleteCardModal *tview.Modal
 	statusSelection statusSelection
-	view            *cardView
+	cardView        *cardView
 	statusbar       *statusbar
 }
 
@@ -58,7 +57,7 @@ func NewApp(path string) (App, error) {
 	app := App{
 		Application:     tview.NewApplication(),
 		pages:           tview.NewPages(),
-		baseFlex:        tview.NewFlex(),
+		grid:            tview.NewGrid(),
 		columnFlex:      tview.NewFlex(),
 		quitModal:       tview.NewModal(),
 		cardForm:        newCardForm(),
@@ -67,8 +66,9 @@ func NewApp(path string) (App, error) {
 		board:           kanban,
 		deleteCardModal: tview.NewModal(),
 		mode:            normal,
+		modeView:        newModeView(),
 		statusSelection: statusSelection{0, 0, 0},
-		view:            newCardView(),
+		cardView:        newCardView(),
 		statusbar:       newStatusbar(),
 	}
 
@@ -85,11 +85,14 @@ func (a *App) Init() error {
 
 	a.initStatusbar()
 
-	a.baseFlex.SetDirection(tview.FlexRow)
-	a.baseFlex.AddItem(a.columnFlex, 0, 1, true)
-	a.baseFlex.AddItem(a.statusbar, 2, 1, false)
+	a.modeView.update(a.mode)
 
-	a.pages.AddPage(mainPage, a.baseFlex, true, true)
+	a.grid.SetColumns(10, 0).SetRows(0, 1).SetBorders(false)
+	a.grid.AddItem(a.columnFlex, 0, 0, 1, 2, 0, 0, true)
+	a.grid.AddItem(a.modeView, 1, 0, 1, 1, 0, 0, false)
+	a.grid.AddItem(a.statusbar, 1, 1, 1, 1, 0, 0, false)
+
+	a.pages.AddPage(mainPage, a.grid, true, true)
 
 	a.initQuitModal()
 	a.pages.AddPage(quitPage, a.quitModal, false, false)
@@ -100,8 +103,8 @@ func (a *App) Init() error {
 	a.initDeleteCardModal()
 	a.pages.AddPage(deleteCardModalPage, a.deleteCardModal, false, false)
 
-	a.initView()
-	a.pages.AddPage(viewPage, a.view, false, false)
+	a.initCardView()
+	a.pages.AddPage(viewPage, a.cardView, false, false)
 
 	a.SetRoot(a.pages, true)
 
@@ -267,6 +270,12 @@ func (a *App) boardMode() boardMode {
 	return a.mode
 }
 
+// updateBoardMode updates the board mode.
+func (a *App) updateBoardMode(mode boardMode) {
+	a.mode = mode
+	a.modeView.update(mode)
+}
+
 // focusedCardID returns the ID of the card in focus.
 func (a *App) focusedCardID() int {
 	focusedCard := a.columns[a.focusedColumn].focusedCard