feat: Update master (#7)

* Attemp at using goreleaser

* Fix syntax error in .goreleaser.yml

* fix: Check roadmap feature for clipboard (README)

* feat: add help menu at the bottom (#4)

* MVP for a help menu

* fix: commented code is evil

* feat: box-drawing UI (#6)

* feat: add help at the bottom (#5)

* Attemp at using goreleaser

* Fix syntax error in .goreleaser.yml

* fix: Check roadmap feature for clipboard (README)

* feat: add help menu at the bottom (#4)

* MVP for a help menu

* fix: commented code is evil

* Update generated VHS GIF

* feat: Rounded corner box UI

* Update roadmap checkmarks in README

---------

Co-authored-by: vhs-action 📼 <actions@github.com>

---------

Co-authored-by: vhs-action 📼 <actions@github.com>

6 files changed, 44 insertions, 17 deletions

diff --git a/README.md b/README.md
index 47c6ce3..26f9e54 100644
--- a/README.md
+++ b/README.md
@@ -14,11 +14,11 @@ Here is my roadmap to reach what I would consider a finished state:
 
 - [x] Implement copying to clipboard for various formats (rgb, hex, hsl, cymk, etc...)
 - [ ] Make the tabs interface prettier with [lipgloss][1] (similar to tabs in [soft-serve][2])
-- [ ] Add a [help bubble][3] at the bottom of the interface to show available keybindings
+- [x] Add a [help bubble][3] at the bottom of the interface to show available keybindings
 - [ ] Add some form of stdout cli flag to output to stdout instead of copying colors
 - [ ] Auto-adjust geometry on terminal resize (+ warn the user if the terminal is too small)
-- [ ] Make the preview windows prettier (perhaps same width as the sliders)
-- [ ] Add Box-drawing to the picker and the previewer
+- [x] Make the preview windows prettier (perhaps same width as the sliders)
+- [x] Add Box-drawing to the picker and the previewer
 - [ ] Add more color conversion unit-tests around edge case colors
 - [X] Make sliders reach the correct length on init/tab without pressing `j`,`k`
 
diff --git a/assets/demo.gif b/assets/demo.gif
index eda9319..81d185a 100644
--- a/assets/demo.gif
+++ b/assets/demo.gif
diff --git a/assets/vhs.tape b/assets/vhs.tape
index ecb1e4e..4ae61e4 100644
--- a/assets/vhs.tape
+++ b/assets/vhs.tape
@@ -3,8 +3,7 @@ Output ./assets/demo.gif
 Require termpicker
 
 Set FontSize 18
-Set Width 800
-# Set Height 480
+Set Width 850
 Set Height 600
 
 Set Margin 15
diff --git a/internal/picker/picker.go b/internal/picker/picker.go
index 14ada59..5a7493d 100644
--- a/internal/picker/picker.go
+++ b/internal/picker/picker.go
@@ -9,6 +9,10 @@ import (
 	tea "github.com/charmbracelet/bubbletea"
 )
 
+const (
+	activeRune = '>'
+)
+
 type Model struct {
 	title   string
 	active  int
@@ -109,11 +113,16 @@ func (m Model) Init() tea.Cmd {
 
 func (m Model) View() string {
 	var s string
+
+	carriageReturn := ""
 	for i, slider := range m.sliders {
+		if i > 0 {
+			carriageReturn = "\n"
+		}
 		if i == m.active {
-			s += fmt.Sprintf("\n-> %s", slider.View())
+			s += fmt.Sprintf("%v%c %s", carriageReturn, activeRune, slider.View())
 		} else {
-			s += fmt.Sprintf("\n   %s", slider.View())
+			s += fmt.Sprintf("%v  %s", carriageReturn, slider.View())
 		}
 	}
 	return s
diff --git a/internal/preview/preview.go b/internal/preview/preview.go
index eb7d344..1ab86be 100644
--- a/internal/preview/preview.go
+++ b/internal/preview/preview.go
@@ -7,19 +7,29 @@ import (
 	"github.com/charmbracelet/lipgloss"
 )
 
-const runeBlock = "█"
+const (
+	runeBlock     = "█"
+	defaultHeight = 5
+	defaultWidth  = 78
+)
 
 type Model struct {
-	size int // height of the square in rows
-	hex  string
+	height int
+	width  int
+	hex    string
 }
 
-func (m *Model) Color(hex string) { m.hex = hex }
+func (m *Model) SetColor(hex string) { m.hex = hex }
+
+func (m *Model) SetHeight(size int) { m.height = size }
+
+func (m *Model) SetWidth(size int) { m.width = size }
 
 func New(hex string) *Model {
 	return &Model{
-		size: 5,
-		hex:  hex,
+		height: defaultHeight,
+		width:  defaultWidth,
+		hex:    hex,
 	}
 }
 
@@ -29,8 +39,7 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) { return m, nil }
 
 func (m Model) View() string {
 	style := lipgloss.NewStyle().Foreground(lipgloss.Color(m.hex))
-	// size is doubled since terminal cells are 2:1 (h:w)
-	oneRow := strings.Repeat(runeBlock, m.size*2)
-	block := strings.Repeat(oneRow+"\n", m.size)
+	oneRow := strings.Repeat(runeBlock, m.width)
+	block := strings.Repeat(oneRow+"\n", m.height)
 	return style.Render(block)
 }
diff --git a/internal/switcher/switcher.go b/internal/switcher/switcher.go
index fdf91af..589b029 100644
--- a/internal/switcher/switcher.go
+++ b/internal/switcher/switcher.go
@@ -67,9 +67,17 @@ func (m Model) View() string {
 	}
 
 	pickerView := m.pickers[m.active].View()
+	boxStyle := lipgloss.NewStyle().Border(lipgloss.RoundedBorder(), true, true, false, true)
 	w := lipgloss.Width(pickerView)
+	pickerView = boxStyle.Render(pickerView)
+
+	m.preview.SetWidth(w)
+	boxStyle = boxStyle.Border(lipgloss.RoundedBorder(), false, true, false, true)
+	previewStr := boxStyle.Render(m.preview.View())
 
 	m.help.Styles.ShortKey.Width(w)
+	boxStyle = boxStyle.Border(lipgloss.RoundedBorder(), false, true, true, true).Width(w)
+
 	var helpstr string
 	if m.fullHelp {
 		helpstr = m.help.FullHelpView(m.AllKeys())
@@ -81,10 +89,12 @@ func (m Model) View() string {
 		helpstr = m.help.FullHelpView(shortKeys())
 	}
 
+	helpstr = boxStyle.Render(helpstr)
+
 	return fmt.Sprintf("%s\n%s\n%s\n%v",
 		tabs,
 		pickerView,
-		m.preview.View(),
+		previewStr,
 		helpstr,
 	)
 }