Made UI more responsive

3 files changed, 51 insertions, 14 deletions

diff --git a/internal/client/ui/core/chat/chat.go b/internal/client/ui/core/chat/chat.go
index 7c3bec0..1895c0d 100644
--- a/internal/client/ui/core/chat/chat.go
+++ b/internal/client/ui/core/chat/chat.go
@@ -69,6 +69,8 @@ var (
 	SelectedEditedIndicatorNL = lipgloss.NewStyle().
 					Foreground(colors.LightGray).Background(colors.BackgroundDim).
 					SetString("\n(edited)").String()
+
+	WidthWithoutVi = PaddingCount*2 + lipgloss.Width(LeftCorner) + lipgloss.Width(RightCorner)
 )
 
 const (
@@ -108,10 +110,8 @@ type Model struct {
 	borderStyle lipgloss.Style
 }
 
-func New(width int) Model {
-	viWidth := width - PaddingCount*2 - lipgloss.Width(LeftCorner) - lipgloss.Width(RightCorner)
-	vi := viminput.New(viWidth, ui.Height/2)
-	vi.Placeholder = SendMessagePlaceholder
+func New() Model {
+	vi := viminput.New()
 	vi.PlaceholderStyle = lipgloss.NewStyle().Foreground(colors.Gray)
 
 	return Model{
@@ -131,7 +131,7 @@ func New(width int) Model {
 		maxMessagesHeight: -1,
 		messagesCache:     nil,
 		prerender:         "",
-		width:             width,
+		width:             -1,
 		style:             blurStyle,
 		borderStyle:       ViBlurredBorder,
 	}
@@ -165,6 +165,10 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 	// TODO: properly invalidate cache
 	m.messagesCache = nil
 
+	viWidth := m.width - WidthWithoutVi
+	m.vi.SetWidth(viWidth)
+	m.vi.SetMaxHeight(ui.Height / 2)
+
 	networkId := state.NetworkId(m.networkIndex)
 	if m.frequencyIndex != -1 && networkId != nil {
 		frequencies := state.State.Frequencies[*networkId]
@@ -862,3 +866,7 @@ func (m *Model) editMessage() tea.Cmd {
 		Content: message,
 	})
 }
+
+func (m *Model) SetWidth(width int) {
+	m.width = width
+}
diff --git a/internal/client/ui/core/core.go b/internal/client/ui/core/core.go
index 4511f3b..c19e63f 100644
--- a/internal/client/ui/core/core.go
+++ b/internal/client/ui/core/core.go
@@ -4,6 +4,7 @@ import (
 	"crypto/ed25519"
 	"fmt"
 	"log"
+	"math"
 	"time"
 
 	"github.com/atotto/clipboard"
@@ -37,6 +38,12 @@ var (
 )
 
 const (
+	NetworkWidth      = 9
+	SidebarPercentage = 0.20
+	MinSidebarWidth   = 16
+)
+
+const (
 	FocusNetworkList = iota
 	FocusFrequencyList
 	FocusChat
@@ -78,7 +85,7 @@ func New(privKey ed25519.PrivateKey, name string) Model {
 		frequencyUpdatePopup:   nil,
 		networkList:            networklist.New(),
 		frequencyList:          frequencylist.New(),
-		chat:                   chat.New(70),
+		chat:                   chat.New(),
 		focus:                  FocusNetworkList,
 	}
 	m.move(0) // Update focus
@@ -98,7 +105,7 @@ func (m Model) View() string {
 	networkList := m.networkList.View()
 	frequencyList := m.frequencyList.View()
 	chat := m.chat.View()
-	result := lipgloss.JoinHorizontal(lipgloss.Top, networkList, frequencyList, chat)
+	result := lipgloss.JoinHorizontal(lipgloss.Top, networkList, frequencyList, chat, frequencyList)
 
 	result = lipgloss.Place(
 		ui.Width, ui.Height,
@@ -178,6 +185,19 @@ func (m *Model) updateNotConnected(msg tea.Msg) tea.Cmd {
 }
 
 func (m *Model) updateConnected(msg tea.Msg) tea.Cmd {
+	totalWidth := max(ui.Width, ui.MinWidth)
+	totalWidth -= NetworkWidth
+	sidebarWidth := int(math.Round(float64(totalWidth) * SidebarPercentage))
+	sidebarWidth = max(sidebarWidth, MinSidebarWidth)
+	chatWidth := totalWidth - (2 * (sidebarWidth + 1))
+
+	log.Println("Widths:", ui.Width)
+	log.Println("sidebarWidth:", sidebarWidth)
+	log.Println("chatWidth:", chatWidth)
+
+	m.frequencyList.SetWidth(sidebarWidth)
+	m.chat.SetWidth(chatWidth)
+
 	switch msg := msg.(type) {
 	case ui.QuitMsg:
 		gateway.Disconnect()
diff --git a/internal/client/ui/core/frequencylist/frequencylist.go b/internal/client/ui/core/frequencylist/frequencylist.go
index c9068b9..e1403ab 100644
--- a/internal/client/ui/core/frequencylist/frequencylist.go
+++ b/internal/client/ui/core/frequencylist/frequencylist.go
@@ -15,16 +15,17 @@ import (
 )
 
 var (
-	width    = 24
 	sepStyle = lipgloss.NewStyle().Width(0).
 			Border(lipgloss.ThickBorder(), false, true, false, false)
+
 	nameStyle = lipgloss.NewStyle().
-			Margin(0, 0, 1).Padding(1).Width(width).Align(lipgloss.Center).
+			Margin(0, 0, 1).Padding(1).Align(lipgloss.Center).
 			Border(lipgloss.ThickBorder(), false, false, true)
-	xMargin        = 2
+
+	margin         = 2
 	frequencyStyle = lipgloss.NewStyle().
-			Margin(0, xMargin).Padding(0, 1).Width(width - (xMargin * 2)).
-			Align(lipgloss.Left)
+			Margin(0, margin).Padding(0, 1).Align(lipgloss.Left)
+
 	symbolReadWrite     = "󰖩 "
 	symbolReadOnly      = "󱛂 "
 	symbolReadOnlyAdmin = "󰖩 "
@@ -37,6 +38,7 @@ type Model struct {
 	base         int
 	index        int
 	focus        bool
+	width        int
 	height       int
 }
 
@@ -46,6 +48,7 @@ func New() Model {
 		base:         -1,
 		index:        -1,
 		focus:        false,
+		width:        -1,
 		height:       1,
 	}
 }
@@ -60,6 +63,8 @@ func (m Model) View() string {
 		return ""
 	}
 
+	frequencyStyle := frequencyStyle.Width(m.width - (margin * 2))
+
 	isAdmin := state.State.Members[*networkId][*state.UserID].IsAdmin
 
 	var builder strings.Builder
@@ -90,7 +95,7 @@ func (m Model) View() string {
 		}
 
 		frequencyName := lipgloss.NewStyle().
-			MaxWidth(width - (xMargin * 2) - 4).
+			MaxWidth(m.width - (margin * 2) - 4).
 			Render(frequency.Name)
 		builder.WriteString(frequencyStyle.Render(symbol + frequencyName))
 		builder.WriteString("\n")
@@ -282,9 +287,13 @@ func (m *Model) SetIndex(index int) {
 func (m Model) renderNetworkName() string {
 	bg := lipgloss.Color(m.Network().BgHexColor)
 	fg := lipgloss.Color(m.Network().FgHexColor)
-	nameStyle := nameStyle.Background(bg).Foreground(fg)
+	nameStyle := nameStyle.Background(bg).Foreground(fg).Width(m.width)
 	if m.focus {
 		nameStyle = nameStyle.BorderForeground(colors.Focus)
 	}
 	return nameStyle.Render(m.Network().Name)
 }
+
+func (m *Model) SetWidth(width int) {
+	m.width = width
+}