feat/fix: properly layout the messages viewport and the inputbox

ui/app/app.go

@@ -18,8 +18,6 @@ package app
 
 import (
 	"bufio"
-	"log"
-	"os"
 
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
@@ -27,7 +25,6 @@ import (
 	"github.com/illusionman1212/gorc/ui"
 	"github.com/illusionman1212/gorc/ui/login"
 	"github.com/illusionman1212/gorc/ui/mainscreen"
-	"golang.org/x/term"
 )
 
 type Screen int
@@ -38,8 +35,6 @@ const (
 )
 
 type UI struct {
-	windowWidth   int
-	windowHeight  int
 	currentScreen Screen
 	login         login.State
 	mainScreen    mainscreen.State
@@ -51,17 +46,9 @@ type State struct {
 }
 
 func initialUiState() UI {
-	width, height, err := term.GetSize(int(os.Stdout.Fd()))
-	if err != nil {
-		// TODO: properly handle this error
-		log.Fatal(err)
-	}
-
 	return UI{
-		login:        login.NewLogin(),
-		mainScreen:   mainscreen.NewMainScreen(),
-		windowWidth:  width,
-		windowHeight: height,
+		login:      login.NewLogin(),
+		mainScreen: mainscreen.NewMainScreen(),
 	}
 }
 
@@ -94,15 +81,11 @@ func (s State) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 
 	case tea.WindowSizeMsg:
-		s.ui.windowWidth = msg.Width
-		s.ui.windowHeight = msg.Height
-
 		ui.MainStyle = ui.MainStyle.
 			Width(msg.Width).
 			Height(msg.Height)
 
-		s.ui.mainScreen.Viewport.Width = msg.Width
-		s.ui.mainScreen.Viewport.Height = msg.Height - mainscreen.InputBoxHeight
+		s.ui.mainScreen.SetSize(msg.Width, msg.Height)
 
 		return s, nil
 	case login.ConnectingMsg:

ui/mainscreen/input.go

@@ -19,24 +19,39 @@ package mainscreen
 import (
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
 )
 
 type InputState struct {
-	input textinput.Model
+	Input textinput.Model
+	Style lipgloss.Style
 }
 
 func NewInputBox() InputState {
-	var input textinput.Model
+	input := textinput.NewModel()
 	input.Placeholder = "Send a message..."
-	state := InputState{input}
+	// input.Focus()
+	state := InputState{input, InputboxStyle}
 
 	return state
 }
 
 func (s InputState) Update(msg tea.Msg) (InputState, tea.Cmd) {
-	return s, nil
+	cmd := s.updateInputs(msg)
+	return s, cmd
+}
+
+func (s *InputState) updateInputs(msg tea.Msg) tea.Cmd {
+	var cmd tea.Cmd
+	s.Input, cmd = s.Input.Update(msg)
+
+	return cmd
+}
+
+func (s *InputState) SetSize(width int) {
+	s.Style = s.Style.Width(width - s.Style.GetHorizontalBorderSize())
 }
 
 func (s InputState) View() string {
-	return InputboxStyle.Render(s.input.View())
+	return s.Style.Render(s.Input.View())
 }

ui/mainscreen/mainscreen.go

@@ -34,12 +34,13 @@ type State struct {
 	Reader   *bufio.Reader
 	Client   *client.Client
 	Viewport viewport.Model
+	Style    lipgloss.Style
 
-	inputBox InputState
+	InputBox InputState
 }
 
 func NewMainScreen() State {
-	newViewport := viewport.Model{Width: ui.MainStyle.GetWidth(), Height: ui.MainStyle.GetHeight() - InputBoxHeight}
+	newViewport := viewport.Model{}
 	newViewport.HighPerformanceRendering = false
 	newViewport.SetContent("")
 
@@ -48,13 +49,16 @@ func NewMainScreen() State {
 		Reader:   nil,
 		Client:   nil,
 		Viewport: newViewport,
-		inputBox: NewInputBox(),
+		Style:    MessagesStyle.Copy(),
+		InputBox: NewInputBox(),
 	}
 	return state
 }
 
 func (s State) Update(msg tea.Msg) (State, tea.Cmd) {
 	var cmd tea.Cmd
+	var cmds []tea.Cmd
+
 	switch msg := msg.(type) {
 	case InitialReadMsg:
 		return s, s.readFromServer
@@ -76,14 +80,27 @@ func (s State) Update(msg tea.Msg) (State, tea.Cmd) {
 	}
 
 	s.Viewport, cmd = s.Viewport.Update(msg)
+	cmds = append(cmds, cmd)
 
-	return s, cmd
+	s.InputBox, cmd = s.InputBox.Update(msg)
+	cmds = append(cmds, cmd)
+
+	return s, tea.Batch(cmds...)
+}
+
+func (s *State) SetSize(width, height int) {
+	s.InputBox.SetSize(width)
+	s.Viewport.Width = width - s.Style.GetVerticalFrameSize()
+	// copying the existing style is important here otherwise we'll end up with artifacting
+	s.Style = s.Style.Copy().Width(width - s.Style.GetVerticalFrameSize())
+	s.Viewport.Height = height - s.InputBox.Style.GetHorizontalFrameSize() - s.Style.GetHorizontalFrameSize()
+	s.Style = s.Style.Copy().Height(height - s.InputBox.Style.GetHorizontalFrameSize() - s.Style.GetHorizontalFrameSize())
+	// we need to re-set the content because words wrap differently on different sizes
+	s.Viewport.SetContent(s.Content)
 }
 
 func (s State) View() string {
-	mainscreen := s.Viewport.View()
+	screen := lipgloss.JoinVertical(0, s.Style.Render(s.Viewport.View()), s.InputBox.View())
 
-	screen := lipgloss.JoinVertical(0, MessagesStyle.Render(mainscreen), s.inputBox.View())
-
-	return screen
+	return ui.MainStyle.Render(screen)
 }

ui/mainscreen/styles.go

@@ -30,7 +30,6 @@ var (
 	MessagesStyle = lipgloss.NewStyle().
 			Border(lipgloss.NormalBorder(), true).
 			Width(ui.MainStyle.GetWidth()).
-			Height(ui.MainStyle.GetHeight() - InputBoxHeight).
 			BorderForeground(lipgloss.Color("105"))
 
 	InputBoxHeight = 1

ui/styles.go

@@ -19,23 +19,12 @@ package ui
 import "github.com/charmbracelet/lipgloss"
 
 var (
-	BorderRound = lipgloss.Border{
-		Top:         "─",
-		Bottom:      "─",
-		Left:        "│",
-		Right:       "│",
-		TopLeft:     "╭",
-		TopRight:    "╮",
-		BottomLeft:  "╰",
-		BottomRight: "╯",
-	}
-
 	MainStyle = lipgloss.NewStyle().
 			Width(172).
 			Height(40)
 
 	DialogStyle = lipgloss.NewStyle().
-			Border(BorderRound, true).
+			Border(lipgloss.RoundedBorder(), true).
 			Align(lipgloss.Center).
 			Width(50).
 			Padding(3, 6).