wip: bars, less borders, colours

model.go

@@ -22,7 +22,7 @@ const (
 \____/_/  |_/___/_/ |_/_____/_____/
 
   Metadata resistant messaging
-        Pre-alpha v0.1.0
+       Pre-alpha v0.1.0
 
 Run /start for the getting started guide
 Use the /help command to see the command listing`
@@ -78,8 +78,11 @@ type model struct {
 
 func newModel(username, homeDir string) model {
 	input := textinput.New()
-	input.Prompt = ""
+	input.Prompt = "> "
+	input.PromptStyle = inputPromptStyle
 	input.SetCursorMode(textinput.CursorStatic)
+	input.Placeholder = "enter commands here..."
+	input.TextStyle = inputTextStyle
 	input.Focus()
 
 	return model{
@@ -136,8 +139,8 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
-		m.width = msg.Width - 2
-		m.height = msg.Height - 2
+		m.width = msg.Width
+		m.height = msg.Height
 
 		if !m.statusViewportReady {
 			m.statusViewport = newViewport(m.width, m.height-3)
@@ -149,7 +152,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 		for _, p := range m.profiles {
 			p.statusViewport.Width = m.width
-			p.statusViewport.Height = m.height - 3
+			p.statusViewport.Height = m.height
 		}
 
 	case tea.KeyMsg:
@@ -180,6 +183,9 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 				m.menuState = len(m.menuBar) - 1
 			}
 
+		case "ctrl+l":
+			cmds = append(cmds, func() tea.Msg { return clearMsg{} })
+
 		default:
 			hidePasswordInput(&m)
 		}
@@ -224,7 +230,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		newProfile := profile{
 			name:           msg.name,
 			onion:          profiles[len(profiles)-1],
-			statusViewport: newViewport(m.width, m.height-3),
+			statusViewport: newViewport(m.width, m.height),
 		}
 
 		m.profiles = append(m.profiles, newProfile)
@@ -293,6 +299,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 	case clearMsg:
 		m.input.Reset()
+		m.statusViewportLines = []string{}
 		m.statusViewport.SetContent("")
 		m.statusViewport.GotoTop()
 
@@ -360,33 +367,51 @@ func (m model) View() string {
 		m.viewportState = m.menuState - 1
 	}
 
+	var renderedCmdHelp []string
+	cmdHelp := []string{
+		"CTRL+N/P", "SWITCH PROFILE",
+		"CTRL+U/D", "SCROLL UP/DOWN",
+		"CTRL+L", "CLEAR",
+		"CTRL+C", "EXIT",
+	}
+	for idx, cmd := range cmdHelp {
+		if idx%2 == 0 {
+			renderedCmdHelp = append(renderedCmdHelp, cmdKeyStyle.Render(cmd))
+		} else {
+			renderedCmdHelp = append(renderedCmdHelp, cmdDescriptionStyle.Render(cmd))
+		}
+	}
+
 	body.WriteString(
-		containerStyle.
-			Width(m.width).
-			Height(m.height).
-			Render(
-				lipgloss.JoinVertical(
-					lipgloss.Top,
+		lipgloss.JoinVertical(
+			lipgloss.Bottom,
 
-					viewportStyle.
-						Width(m.width).
-						Render(chosenViewport.View()),
+			viewportStyle.
+				Width(m.width).
+				Render(chosenViewport.View()),
 
-					menuBarStyle.
-						Width(m.width).
-						Height(1).
-						Render(
-							lipgloss.JoinHorizontal(
-								lipgloss.Left,
-								renderedMenuBar...,
-							),
-						),
-
-					inputStyle.
-						Width(m.width).
-						Render(m.input.View()),
+			cmdBarStyle.
+				Width(m.width).
+				Render(
+					lipgloss.JoinHorizontal(
+						lipgloss.Left,
+						renderedCmdHelp...,
+					),
 				),
-			),
+
+			menuBarStyle.
+				Width(m.width).
+				Render(
+					lipgloss.JoinHorizontal(
+						lipgloss.Left,
+						renderedMenuBar...,
+					),
+				),
+
+			inputStyle.
+				Width(m.width).
+				Render(m.input.View()),
+		),
 	)
 
 	return body.String()

render.go

@@ -6,6 +6,7 @@ import (
 
 	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/viewport"
+	"github.com/charmbracelet/lipgloss"
 )
 
 const timePrefixFormat = "15:04:05"
@@ -14,7 +15,12 @@ func renderLines(lines ...string) string {
 	var rendered string
 	for _, line := range lines {
 		now := time.Now().Format(timePrefixFormat)
-		rendered += fmt.Sprintf("%s | %s", now, line)
+		rendered += fmt.Sprintf(
+			"%s %s %s",
+			lipgloss.NewStyle().Foreground(lipgloss.Color("#97989a")).Render(now),
+			lipgloss.NewStyle().Foreground(lipgloss.Color("#707070")).Render("|"),
+			lipgloss.NewStyle().Foreground(lipgloss.Color("#ffffff")).Render(line),
+		)
 	}
 	return rendered
 }

style.go

@@ -3,13 +3,27 @@ package main
 import "github.com/charmbracelet/lipgloss"
 
 var (
-	containerStyle = lipgloss.NewStyle().
-			BorderStyle(lipgloss.NormalBorder())
-
 	viewportStyle = lipgloss.NewStyle()
 
 	inputStyle = lipgloss.NewStyle()
 
+	cmdBarStyle = lipgloss.NewStyle().
+			Background(lipgloss.Color("#853094"))
+
+	cmdKeyStyle = lipgloss.NewStyle().
+			Background(lipgloss.Color("#853094")).
+			Foreground(lipgloss.Color("#ffffff")).
+			PaddingLeft(1).
+			PaddingRight(1).
+			Bold(true)
+
+	cmdDescriptionStyle = lipgloss.NewStyle().
+				Background(lipgloss.Color("#a644b7")).
+				Foreground(lipgloss.Color("#ffffff")).
+				AlignHorizontal(lipgloss.Center).
+				PaddingLeft(1).
+				PaddingRight(1)
+
 	menuBarStyle = lipgloss.NewStyle().
 			Background(lipgloss.Color("#1e489b"))
 
@@ -27,4 +41,10 @@ var (
 				PaddingLeft(1).
 				PaddingRight(1).
 				Bold(true)
+
+	inputTextStyle = lipgloss.NewStyle().
+			Foreground(lipgloss.Color("#ffffff"))
+
+	inputPromptStyle = lipgloss.NewStyle().
+				Foreground(lipgloss.Color("#707070"))
 )