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

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