bugfix: wrap value detail

Author: saltfishpr

cmd/root.go

@@ -43,7 +43,7 @@ var rootCmd = &cobra.Command{
 			log.Fatal("connect to redis failed: ", err)
 		}
 
-		p := tea.NewProgram(tui.New(rdb), tea.WithAltScreen())
+		p := tea.NewProgram(tui.New(rdb), tea.WithAltScreen(), tea.WithMouseAllMotion())
 		if err := p.Start(); err != nil {
 			log.Fatal("start failed: ", err)
 		}

go.mod

@@ -8,6 +8,7 @@ require (
 	github.com/charmbracelet/lipgloss v0.4.0
 	github.com/go-redis/redis/v8 v8.11.4
 	github.com/json-iterator/go v1.1.12
+	github.com/muesli/reflow v0.3.0
 	github.com/spf13/cobra v1.3.0
 	github.com/spf13/viper v1.10.1
 )

internal/tui/constants.go

@@ -14,3 +14,8 @@ const (
 const (
 	defaultScanCount = 500
 )
+
+const (
+	listProportion  = 0.3
+	statusBarHeight = 1
+)

internal/tui/tui.go

@@ -8,17 +8,20 @@ package tui
 import (
 	"github.com/charmbracelet/bubbles/list"
 	"github.com/charmbracelet/bubbles/textinput"
+	"github.com/charmbracelet/bubbles/viewport"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/go-redis/redis/v8"
 )
 
 type model struct {
+	width, height int
+
 	list      list.Model
 	textinput textinput.Model
+	viewport  viewport.Model
 
 	rdb         *redis.Client
 	searchValue string
-	valueDetail string
 	stateDesc   string
 
 	keyMap

internal/tui/update.go

@@ -7,16 +7,17 @@ package tui
 import (
 	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/textinput"
+	"github.com/charmbracelet/bubbles/viewport"
 	tea "github.com/charmbracelet/bubbletea"
 )
 
 // handleMouse handles all mouse interaction.
 func (m *model) handleMouse(msg tea.MouseMsg) {
 	switch msg.Type {
 	case tea.MouseWheelUp:
-		m.list.CursorUp()
+		m.viewport.ViewUp()
 	case tea.MouseWheelDown:
-		m.list.CursorDown()
+		m.viewport.ViewDown()
 	}
 }
 
@@ -63,7 +64,6 @@ func (m *model) handleKeys(msg tea.KeyMsg) tea.Cmd {
 			m.textinput.Blur()
 			m.textinput.Reset()
 			m.state = defaultState
-			m.stateDesc = ""
 		default:
 			m.textinput, cmd = m.textinput.Update(msg)
 			cmds = append(cmds, cmd)
@@ -82,7 +82,15 @@ func (m *model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
 		topGap, rightGap, bottomGap, leftGap := appStyle.GetPadding()
-		m.list.SetSize(msg.Width-leftGap-rightGap, msg.Height-topGap-bottomGap-1)
+		m.width = msg.Width - leftGap - rightGap
+		m.height = msg.Height - topGap - bottomGap
+
+		listWidth := int(listProportion * float64(m.width))
+		m.list.SetSize(listWidth, m.height-statusBarHeight)
+
+		viewportWidth := m.width - listWidth
+		viewportBorderLeft := viewportStyle.GetBorderLeftSize()
+		m.viewport = viewport.New(viewportWidth-viewportBorderLeft, m.height-statusBarHeight)
 	case scanMsg:
 		m.list.SetItems(msg.items)
 	case tea.MouseMsg:
@@ -96,6 +104,9 @@ func (m *model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 		m.textinput, cmd = m.textinput.Update(msg)
 		cmds = append(cmds, cmd)
+
+		m.viewport, cmd = m.viewport.Update(msg)
+		cmds = append(cmds, cmd)
 	}
 
 	return m, tea.Batch(cmds...)

internal/tui/view.go

@@ -8,15 +8,19 @@ import (
 	"fmt"
 
 	"github.com/charmbracelet/lipgloss"
+	"github.com/muesli/reflow/wordwrap"
 )
 
 var (
 	appStyle = lipgloss.NewStyle().Padding(1, 2)
+
+	viewportStyle = lipgloss.NewStyle().Border(lipgloss.HiddenBorder(), false, false, false, true)
 )
 
 func (m *model) View() string {
 	if it := m.list.SelectedItem(); it != nil {
-		m.valueDetail = fmt.Sprintf("KeyType: %s\nValue:\n%s", it.(item).keyType, it.(item).val)
+		valueDetail := fmt.Sprintf("KeyType: %s\nValue:\n%s", it.(item).keyType, it.(item).val)
+		m.viewport.SetContent(wordwrap.String(valueDetail, m.viewport.Width))
 	}
 
 	if m.state == searchState {
@@ -26,7 +30,7 @@ func (m *model) View() string {
 	return appStyle.Render(
 		lipgloss.JoinVertical(
 			lipgloss.Left,
-			lipgloss.JoinHorizontal(lipgloss.Top, m.list.View(), m.valueDetail),
+			lipgloss.JoinHorizontal(lipgloss.Top, m.list.View(), viewportStyle.Render(m.viewport.View())),
 			m.stateDesc,
 		),
 	)