feat(ui): polish layout with borders; embed form in left pane; customize form keymap
- Add lipgloss.RoundedBorder to left/right columns for visual separation - Render the huh form within the left column box instead of full-screen takeover - Keep right column (recent orders) visible while filling the form - Integrate bubbles/key and set a custom Huh keymap: - Quit binding: ctrl+c/esc with help text - Apply base theme to the form via WithTheme(huh.ThemeBase()) - Minor layout tweaks to ensure consistent sizing and padding
This commit is contained in:
parent
d026a30927
commit
5e76ca2514
29
main.go
29
main.go
@ -12,6 +12,7 @@ import (
|
|||||||
"strings"
|
"strings"
|
||||||
"time"
|
"time"
|
||||||
|
|
||||||
|
"github.com/charmbracelet/bubbles/key"
|
||||||
tea "github.com/charmbracelet/bubbletea"
|
tea "github.com/charmbracelet/bubbletea"
|
||||||
"github.com/charmbracelet/huh"
|
"github.com/charmbracelet/huh"
|
||||||
"github.com/charmbracelet/lipgloss"
|
"github.com/charmbracelet/lipgloss"
|
||||||
@ -317,6 +318,7 @@ func (m model) renderLeftColumn() string {
|
|||||||
Width(m.width/2 - 2).
|
Width(m.width/2 - 2).
|
||||||
Height(m.height - 6).
|
Height(m.height - 6).
|
||||||
Padding(1).
|
Padding(1).
|
||||||
|
Border(lipgloss.RoundedBorder()).
|
||||||
Render(content)
|
Render(content)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -372,6 +374,7 @@ func (m model) renderRightColumn() string {
|
|||||||
Width(m.width/2 - 2).
|
Width(m.width/2 - 2).
|
||||||
Height(m.height - 6).
|
Height(m.height - 6).
|
||||||
Padding(1).
|
Padding(1).
|
||||||
|
Border(lipgloss.RoundedBorder()).
|
||||||
Render(content)
|
Render(content)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -397,17 +400,25 @@ func (m model) renderFooter() string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
func (m model) View() string {
|
func (m model) View() string {
|
||||||
if m.form != nil {
|
|
||||||
return m.form.View()
|
|
||||||
}
|
|
||||||
|
|
||||||
if m.width == 0 || m.height == 0 {
|
if m.width == 0 || m.height == 0 {
|
||||||
return "Loading..."
|
return "Loading..."
|
||||||
}
|
}
|
||||||
|
|
||||||
header := m.renderHeader()
|
header := m.renderHeader()
|
||||||
|
|
||||||
leftCol := m.renderLeftColumn()
|
var leftCol string
|
||||||
|
if m.form != nil {
|
||||||
|
formView := m.form.View()
|
||||||
|
leftCol = lipgloss.NewStyle().
|
||||||
|
Width(m.width/2 - 2).
|
||||||
|
Height(m.height - 6).
|
||||||
|
Padding(1).
|
||||||
|
Border(lipgloss.RoundedBorder()).
|
||||||
|
Render(formView)
|
||||||
|
} else {
|
||||||
|
leftCol = m.renderLeftColumn()
|
||||||
|
}
|
||||||
|
|
||||||
rightCol := m.renderRightColumn()
|
rightCol := m.renderRightColumn()
|
||||||
body := lipgloss.JoinHorizontal(lipgloss.Top, leftCol, rightCol)
|
body := lipgloss.JoinHorizontal(lipgloss.Top, leftCol, rightCol)
|
||||||
|
|
||||||
@ -435,6 +446,12 @@ func (m *model) buildForm() *huh.Form {
|
|||||||
m.formFields.quantityStr = ""
|
m.formFields.quantityStr = ""
|
||||||
m.formFields.confirm = false
|
m.formFields.confirm = false
|
||||||
|
|
||||||
|
keymap := huh.NewDefaultKeyMap()
|
||||||
|
keymap.Quit = key.NewBinding(
|
||||||
|
key.WithKeys("ctrl+c", "esc"),
|
||||||
|
key.WithHelp("ctrl+c/esc", "quit"),
|
||||||
|
)
|
||||||
|
|
||||||
f := huh.NewForm(
|
f := huh.NewForm(
|
||||||
huh.NewGroup(
|
huh.NewGroup(
|
||||||
huh.NewInput().
|
huh.NewInput().
|
||||||
@ -476,7 +493,7 @@ func (m *model) buildForm() *huh.Form {
|
|||||||
Negative("No").
|
Negative("No").
|
||||||
Value(&m.formFields.confirm),
|
Value(&m.formFields.confirm),
|
||||||
),
|
),
|
||||||
)
|
).WithTheme(huh.ThemeBase()).WithKeyMap(keymap)
|
||||||
|
|
||||||
return f
|
return f
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user