refactor: refactor app to be more usable

app/app.go

@@ -261,7 +261,9 @@ func (a *App) GetResponse(call *Call) tea.Cmd {
 			if err == nil {
 				defer response.Body.Close()
 				body, err := io.ReadAll(response.Body)
-				return OnResponseMsg{Call: call, Body: string(body), Err: err, Response: response}
+				// get response size in bytes
+				bytes := int64(len(body))
+				return OnResponseMsg{Call: call, Body: string(body), Bytes: bytes, Err: err, Response: response}
 			}
 			return OnResponseMsg{Call: call, Err: err, Response: response}
 		})

app/message.go

@@ -15,6 +15,7 @@ type CallUpdatedMsg struct{ Call *Call }
 type OnResponseMsg struct {
 	Call     *Call
 	Body     string
+	Bytes    int64
 	Err      error
 	Response *http.Response
 }

cmds.go

@@ -7,10 +7,10 @@ import (
 	"os"
 	"restman/app"
 	"restman/components/collections"
+	"restman/components/config"
 	"restman/components/footer"
 	"restman/components/request"
 	"restman/components/results"
-	"restman/components/tabs"
 	"restman/components/url"
 
 	tea "github.com/charmbracelet/bubbletea"
@@ -47,6 +47,7 @@ Restman is a CLI tool for RESTful API.`,
 	},
 
 	Run: func(cmd *cobra.Command, args []string) {
+		config.SetVersion(version)
 		call := app.NewCall()
 		if len(args) >= 1 {
 			call.Url = args[0]
@@ -93,34 +94,38 @@ Restman is a CLI tool for RESTful API.`,
 		zone.NewGlobal()
 
 		// layout-tree defintion
-		m := Model{tui: boxer.Boxer{}, focused: "url", initalCall: call}
+		m := Model{tui: boxer.Boxer{}, focused: "url", initialCall: call}
 
 		url := url.New()
 		resultsBox := results.New()
 		requestBox := request.New()
 		footerBox := footer.New()
 		colBox := collections.New()
-		tabs := tabs.New()
+
+		splitNode := boxer.CreateNoBorderNode()
+		splitNode.SizeFunc = func(node boxer.Node, widthOrHeight int) []int {
+			paramsSize := int(float64(widthOrHeight) * 0.4)
+			return []int{
+				paramsSize,
+				widthOrHeight - paramsSize,
+			}
+		}
+		splitNode.Children = []boxer.Node{
+			stripErr(m.tui.CreateLeaf("request", requestBox)),
+			stripErr(m.tui.CreateLeaf("results", resultsBox)),
+		}
 
 		centerNode := boxer.CreateNoBorderNode()
 		centerNode.VerticalStacked = true
 		centerNode.SizeFunc = func(node boxer.Node, widthOrHeight int) []int {
-			size := widthOrHeight - 5
-			paramsSize := int(float64(size) * 0.4)
-			resultsSize := size - paramsSize
-
 			return []int{
-				2,
 				3,
-				paramsSize,
-				resultsSize,
+				widthOrHeight - 3,
 			}
 		}
 		centerNode.Children = []boxer.Node{
-			stripErr(m.tui.CreateLeaf("tabs", tabs)),
 			stripErr(m.tui.CreateLeaf("url", url)),
-			stripErr(m.tui.CreateLeaf("request", requestBox)),
-			stripErr(m.tui.CreateLeaf("results", resultsBox)),
+			splitNode,
 		}
 
 		// middle Node

components/collections/calls.go

@@ -111,7 +111,7 @@ func (m callModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 
 		switch msg.String() {
-		case "ctrl+h":
+		case "esc":
 			return m, app.GetInstance().SetSelectedCollection(nil)
 
 		case "enter":

components/collections/collections.go

@@ -18,6 +18,7 @@ var (
 	minified = lipgloss.NewStyle().
 			Border(lipgloss.NormalBorder()).
 			BorderForeground(config.COLOR_SUBTLE).
+			Foreground(config.COLOR_FOREGROUND).
 			PaddingLeft(1)
 
 	focused = lipgloss.NewStyle().
@@ -124,7 +125,7 @@ func (m Collections) View() string {
 
 	// if the collection is minified, render the minified version
 	if m.minified {
-		return zone.Mark("collections_minified", style.Render(""))
+		return zone.Mark("collections_minified", style.Render(" \n\nC\nO\nL\nL\nE\nC\nT\nI\nO\nN\nS"))
 	}
 
 	if m.collection != nil {

components/collections/list.go

@@ -21,6 +21,7 @@ var (
 )
 
 type listKeyMap struct {
+	esc              key.Binding
 	toggleSpinner    key.Binding
 	toggleTitleBar   key.Binding
 	toggleStatusBar  key.Binding
@@ -31,6 +32,9 @@ type listKeyMap struct {
 
 func newListKeyMap() *listKeyMap {
 	return &listKeyMap{
+		esc: key.NewBinding(
+			key.WithKeys("esc"),
+		),
 		insertItem: key.NewBinding(
 			key.WithKeys("a"),
 			key.WithHelp("a", "add item"),
@@ -127,6 +131,9 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 
 		switch {
+		case key.Matches(msg, m.keys.esc):
+			// do nothing
+			return m, nil
 		case key.Matches(msg, m.keys.toggleSpinner):
 			cmd := m.list.ToggleSpinner()
 			return m, cmd

components/config/config.go

@@ -5,6 +5,8 @@ import (
 	"github.com/charmbracelet/lipgloss"
 )
 
+var version = "dev"
+
 var (
 	// App Colors
 	COLOR_SUBTLE     = lipgloss.AdaptiveColor{Light: "#D9DCCF", Dark: "#383838"}
@@ -99,6 +101,14 @@ type KeyMap struct {
 	ChangeToggle      key.Binding
 }
 
+func SetVersion(v string) {
+	version = v
+}
+
+func GetVersion() string {
+	return version
+}
+
 func (k KeyMap) ShortHelp() []key.Binding {
 	return []key.Binding{k.Help, k.Quit}
 }

components/footer/footer.go

@@ -3,6 +3,7 @@ package footer
 import (
 	"restman/app"
 	"restman/components/config"
+	"restman/utils"
 	"strconv"
 	"time"
 
@@ -12,16 +13,18 @@ import (
 )
 
 var (
-	container = lipgloss.NewStyle().
-			BorderForeground(config.COLOR_SUBTLE).
-			Background(config.COLOR_SUBTLE).
-			Border(lipgloss.NormalBorder()).
-			BorderBottom(false).
-			BorderTop(false)
-
-	stopwatchStyle = lipgloss.NewStyle().
-			Background(config.COLOR_HIGHLIGHT).
-			Padding(0, 1)
+	container = lipgloss.NewStyle()
+	// BorderForeground(config.COLOR_SUBTLE).
+	// Background(config.COLOR_SUBTLE).
+	// Border(lipgloss.NormalBorder()).
+	// BorderBottom(false).
+	// BorderTop(false)
+
+	versionStyle = lipgloss.NewStyle().
+			Foreground(config.COLOR_HIGHLIGHT)
+
+	nameStyle = lipgloss.NewStyle().
+			Foreground(config.COLOR_HIGHLIGHT).Underline(true)
 )
 
 // model represents the properties of the UI.
@@ -30,6 +33,7 @@ type model struct {
 	height     int
 	width      int
 	url        string
+	bytes      int64
 	loading    bool
 	statusCode int
 	error      error
@@ -52,7 +56,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
 		m.height = msg.Height
-		m.width = msg.Width - 2
+		m.width = msg.Width
 
 	case app.OnLoadingMsg:
 		m.error = nil
@@ -64,6 +68,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if msg.Err == nil {
 			m.statusCode = msg.Response.StatusCode
 		}
+		m.bytes = msg.Bytes
 		m.error = msg.Err
 		m.loading = false
 		return m, m.stopwatch.Stop()
@@ -86,6 +91,10 @@ func (m model) View() string {
 		color = "#EF4444"
 	} else if m.statusCode > 0 {
 		status = "󰞉 STATUS: " + strconv.Itoa(m.statusCode)
+		if m.bytes > 0 {
+			status = status + "   SIZE: " + utils.ByteCountIEC(m.bytes)
+		}
+
 		if m.statusCode >= 200 && m.statusCode < 300 {
 			color = "#34D399"
 		} else if m.statusCode >= 300 && m.statusCode < 400 {
@@ -101,8 +110,8 @@ func (m model) View() string {
 	}
 
 	statusToRender := lipgloss.NewStyle().
-		Background(lipgloss.Color(color)).
-		Foreground(config.COLOR_SUBTLE).
+		Foreground(lipgloss.Color(color)).
+		// Foreground(config.COLOR_SUBTLE).
 		Padding(0, 1).
 		Render(status)
 
@@ -113,10 +122,11 @@ func (m model) View() string {
 			lipgloss.Left,
 			statusToRender,
 			lipgloss.PlaceHorizontal(
-				m.width-statusWidth,
+				m.width-statusWidth-1,
 				lipgloss.Right,
-				stopwatchStyle.Render(" "+m.stopwatch.View()),
-				lipgloss.WithWhitespaceBackground(config.COLOR_SUBTLE),
+				nameStyle.Render("Restman")+
+
+					versionStyle.Render(" v."+config.GetVersion()),
 			),
 		),
 	)

components/request/box.go

@@ -7,7 +7,6 @@ import (
 	"restman/components/config"
 	"restman/components/headers"
 	"restman/components/params"
-	"restman/components/tabs"
 	"strings"
 
 	tea "github.com/charmbracelet/bubbletea"
@@ -29,9 +28,9 @@ var (
 	docStyle          = lipgloss.NewStyle()
 	highlightColor    = lipgloss.AdaptiveColor{Light: "#874BFD", Dark: "#7D56F4"}
 	inactiveTabStyle  = lipgloss.NewStyle().Border(inactiveTabBorder, true).BorderForeground(highlightColor).Padding(0, 1)
-	activeTabStyle    = inactiveTabStyle.Copy().Border(activeTabBorder, true)
+	activeTabStyle    = inactiveTabStyle.Border(activeTabBorder, true)
 	windowStyle       = lipgloss.NewStyle().BorderForeground(highlightColor).Border(lipgloss.NormalBorder()).UnsetBorderTop()
-	tabGap            = inactiveTabStyle.Copy().
+	tabGap            = inactiveTabStyle.
 				BorderTop(false).
 				BorderLeft(false).
 				BorderRight(false)
@@ -86,9 +85,10 @@ func (b Request) GetContent() tea.Model {
 func (b Request) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 
-	case tabs.TabFocusedMsg:
-		b.call = msg.Tab.Call
-		b.body = msg.Tab.Results
+	case app.CallSelectedMsg:
+		b.call = msg.Call
+		// TODO:
+		// b.body = msg.Tab.Results
 		b.content = b.GetContent()
 
 	case tea.WindowSizeMsg:
@@ -134,24 +134,24 @@ func (b Request) View() string {
 	var renderedTabs []string
 
 	if b.focused {
-		inactiveTabStyle.BorderForeground(config.COLOR_HIGHLIGHT)
-		activeTabStyle.BorderForeground(config.COLOR_HIGHLIGHT)
-		windowStyle.BorderForeground(config.COLOR_HIGHLIGHT)
-		tabGap.BorderForeground(config.COLOR_HIGHLIGHT)
+		inactiveTabStyle = inactiveTabStyle.BorderForeground(config.COLOR_HIGHLIGHT)
+		activeTabStyle = activeTabStyle.BorderForeground(config.COLOR_HIGHLIGHT)
+		windowStyle = windowStyle.BorderForeground(config.COLOR_HIGHLIGHT)
+		tabGap = tabGap.BorderForeground(config.COLOR_HIGHLIGHT)
 	} else {
-		inactiveTabStyle.BorderForeground(config.COLOR_SUBTLE)
-		activeTabStyle.BorderForeground(config.COLOR_SUBTLE)
-		windowStyle.BorderForeground(config.COLOR_SUBTLE)
-		tabGap.BorderForeground(config.COLOR_SUBTLE)
+		inactiveTabStyle = inactiveTabStyle.BorderForeground(config.COLOR_SUBTLE)
+		activeTabStyle = activeTabStyle.BorderForeground(config.COLOR_SUBTLE)
+		windowStyle = windowStyle.BorderForeground(config.COLOR_SUBTLE)
+		tabGap = tabGap.BorderForeground(config.COLOR_SUBTLE)
 	}
 
 	for i, t := range b.Tabs {
 		var style lipgloss.Style
 		isFirst, isActive := i == 0, i == b.activeTab
 		if isActive {
-			style = activeTabStyle.Copy()
+			style = activeTabStyle
 		} else {
-			style = inactiveTabStyle.Copy()
+			style = inactiveTabStyle
 		}
 		border, _, _, _, _ := style.GetBorder()
 		if isFirst && isActive {