Made UI more responsive

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
+}

internal/client/ui/core/core.go

@@ -4,6 +4,7 @@ import (
 	"crypto/ed25519"
 	"fmt"
 	"log"
+	"math"
 	"time"
 
 	"github.com/atotto/clipboard"
@@ -36,6 +37,12 @@ var (
 	timerInterval      = 50 * time.Millisecond
 )
 
+const (
+	NetworkWidth      = 9
+	SidebarPercentage = 0.20
+	MinSidebarWidth   = 16
+)
+
 const (
 	FocusNetworkList = iota
 	FocusFrequencyList
@@ -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()

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
+}

internal/client/ui/ui.go

@@ -15,13 +15,18 @@ import (
 	"github.com/kyren223/eko/pkg/assert"
 )
 
-const DEBUG = true
+const (
+	DEBUG = true
 
-var Center lipgloss.Position = 0.499
+	MinWidth = 85
+	Center   = 0.499
+)
 
-var Width int
-var Height int
-var Program *tea.Program
+var (
+	Width   int
+	Height  int
+	Program *tea.Program
+)
 
 var NewAuth func() tea.Model
 

internal/client/ui/viminput/viminput.go

@@ -72,7 +72,7 @@ type Model struct {
 	offset    int
 }
 
-func New(width, maxHeight int) Model {
+func New() Model {
 	return Model{
 		PlaceholderStyle: lipgloss.NewStyle(),
 		PromptStyle:      lipgloss.NewStyle(),
@@ -97,9 +97,9 @@ func New(width, maxHeight int) Model {
 		amod:             false,
 		inactive:         false,
 		focus:            false,
-		width:            width,
+		width:            -1,
 		height:           1,
-		maxHeight:        maxHeight,
+		maxHeight:        -1,
 		offset:           0,
 	}
 }
@@ -332,16 +332,9 @@ func (m *Model) SetWidth(width int) {
 	m.width = width
 }
 
-func (m Model) Width() int {
-	return m.width
-}
-
-func (m *Model) SetHeight(height int) {
-	m.height = height
-}
-
-func (m Model) Height() int {
-	return m.height
+func (m *Model) SetMaxHeight(maxHeight int) {
+	m.maxHeight = maxHeight
+	m.height = min(m.height, m.maxHeight)
 }
 
 func (m *Model) Focus() {