Improved keyhelp/header/footer rendering in tui

tui.go

@@ -81,9 +81,13 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
 		m.width = msg.Width
-		headerHeight := lipgloss.Height(m.header())
-		footerHeight := lipgloss.Height(m.footer())
-		verticalMarginHeight := headerHeight + footerHeight
+		var headerHeight int
+		headerHeight = lipgloss.Height(m.header())
+		var footerHeight int
+		if len(m.content) > 0 {
+			footerHeight = lipgloss.Height(m.footer())
+		}
+		verticalMarginHeight := headerHeight + footerHeight + 5
 		if !m.viewportReady {
 			m.viewport = viewport.New(
 				viewport.WithWidth(msg.Width),
@@ -160,21 +164,11 @@ func (m Model) View() string {
 	if len(m.content) == 0 {
 		return "loading..."
 	} else {
-		output = output + m.header()
-		output = output + m.viewport.View()
-
-		footerLeft := lipgloss.NewStyle().Faint(true).Margin(1).Render(m.widget.keyhelp())
-		footerRight := lipgloss.NewStyle().Faint(true).Margin(1).Render(m.footer())
-
-		line := strings.Repeat("─",
-			max(0, m.viewport.Width()-lipgloss.Width(footerLeft)-lipgloss.Width(footerRight)))
-		line = lipgloss.NewStyle().Foreground(lipgloss.Color("8")).Render(line)
-		output = output + lipgloss.JoinHorizontal(lipgloss.Center,
-			footerLeft,
-			line,
-			footerRight,
+		output = lipgloss.JoinVertical(lipgloss.Left,
+			m.header(),
+			m.viewport.View(),
+			m.footer(),
 		)
-		// output = output + lipgloss.NewStyle().Faint(true).Margin(0, 1, 1, 1).Render(m.footer())
 		return output
 	}
 }
@@ -209,18 +203,46 @@ func (m Model) header() string {
 	var borderStyle = lipgloss.NewStyle().
 		BorderStyle(lipgloss.NormalBorder()).
 		BorderForeground(lipgloss.Color("8")).
+		Margin(1, 0, 0, 0).
 		Padding(0, 1)
 
-	left := "tissues v0.0"
-	left = borderStyle.Render(left)
+	title := "tissues v0.0"
+	title = borderStyle.Render(title)
 
-	line := strings.Repeat("─", max(0, m.viewport.Width()-lipgloss.Width(left)))
+	line := strings.Repeat("─", max(0, m.viewport.Width()-lipgloss.Width(title)))
 	line = lipgloss.NewStyle().Foreground(lipgloss.Color("8")).Render(line)
-	return lipgloss.JoinHorizontal(lipgloss.Center, line, left)
+	return lipgloss.JoinHorizontal(lipgloss.Center, line, title)
 }
 
 // renders a footer for the program
-func (m Model) footer() string { return "j/k: scroll\t\tctrl+c: quit" }
+func (m Model) footer() string {
+	footerStyle := lipgloss.NewStyle().Faint(true).
+		BorderStyle(lipgloss.NormalBorder()).
+		BorderForeground(lipgloss.Color("8")).
+		Margin(1, 0, 0, 0).
+		Padding(0, 1)
+	footerLeft := footerStyle.Render(m.widget.keyhelp())
+	footerRight := footerStyle.Render("j/k: scroll\n\nctrl+c: quit")
+	line := strings.Repeat("─",
+		max(0, m.viewport.Width()-lipgloss.Width(footerLeft)-lipgloss.Width(footerRight)))
+	line = lipgloss.NewStyle().Foreground(lipgloss.Color("8")).Render(line)
+
+	var footer string
+	footer = lipgloss.JoinHorizontal(lipgloss.Center,
+		footerLeft,
+		line,
+		footerRight,
+	)
+	if lipgloss.Width(footer) > m.viewport.Width() {
+		footer = lipgloss.JoinVertical(
+			lipgloss.Left,
+			lipgloss.NewStyle().Foreground(lipgloss.Color("8")).Render(strings.Repeat("-", max(0, m.viewport.Width()))),
+			footerLeft,
+			footerRight,
+		)
+	}
+	return footer
+}
 
 // WIDGET DEFINITIONS ---------------------------------------------------------
 // ----------------------------------------------------------------------------
@@ -580,7 +602,7 @@ func (e edit) render() tea.Msg {
 // keyhelp cmd for create widget
 func (e edit) keyhelp() string {
 	var output string
-	output = output + "tab/shift+tab: down/up\t\tenter: input value\t\tesc: reset\t\tctrl+e: quit"
+	output = output + "tab/shift+tab: down/up\t\tenter: input value\n\nesc: reset\t\tctrl+c: quit"
 	return output
 }
 
@@ -741,7 +763,7 @@ func (ic IssueCollection) render() tea.Msg {
 // keyhelp cmd for IssueCollection widget
 func (ic IssueCollection) keyhelp() string {
 	var output string
-	output = output + "tab/shift+tab: select\t\tenter: view issue\t\tc: create new issue\t\te: edit selected issue"
+	output = output + "tab/shift+tab: select\t\tenter: view issue\n\nc: create new issue\t\te: edit selected issue"
 	return output
 }