sessions dialog

Author: kujtimiihoxha

internal/tui/components/completions/completions.go

@@ -133,8 +133,9 @@ func (c *completionsCmp) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		c.x = msg.X
 		c.y = msg.Y
 		items := []util.Model{}
+		t := styles.CurrentTheme()
 		for _, completion := range msg.Completions {
-			item := NewCompletionItem(completion.Title, completion.Value)
+			item := NewCompletionItem(completion.Title, completion.Value, WithBackgroundColor(t.BgSubtle))
 			items = append(items, item)
 		}
 		c.height = max(min(10, len(items)), 1) // Ensure at least 1 item height

internal/tui/components/completions/item.go

@@ -1,13 +1,14 @@
 package completions
 
 import (
+	"image/color"
+
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/charmbracelet/x/ansi"
 	"github.com/opencode-ai/opencode/internal/tui/components/core/list"
 	"github.com/opencode-ai/opencode/internal/tui/layout"
 	"github.com/opencode-ai/opencode/internal/tui/styles"
-	"github.com/opencode-ai/opencode/internal/tui/theme"
 	"github.com/opencode-ai/opencode/internal/tui/util"
 	"github.com/rivo/uniseg"
 )
@@ -27,16 +28,35 @@ type completionItemCmp struct {
 	value        any
 	focus        bool
 	matchIndexes []int
+	bgColor      color.Color
+}
+
+type completionOptions func(*completionItemCmp)
+
+func WithBackgroundColor(c color.Color) completionOptions {
+	return func(cmp *completionItemCmp) {
+		cmp.bgColor = c
+	}
 }
 
-func NewCompletionItem(text string, value any, matchIndexes ...int) CompletionItem {
-	return &completionItemCmp{
-		text:         text,
-		value:        value,
-		matchIndexes: matchIndexes,
+func WithMatchIndexes(indexes ...int) completionOptions {
+	return func(cmp *completionItemCmp) {
+		cmp.matchIndexes = indexes
 	}
 }
 
+func NewCompletionItem(text string, value any, opts ...completionOptions) CompletionItem {
+	c := &completionItemCmp{
+		text:  text,
+		value: value,
+	}
+
+	for _, opt := range opts {
+		opt(c)
+	}
+	return c
+}
+
 // Init implements CommandItem.
 func (c *completionItemCmp) Init() tea.Cmd {
 	return nil
@@ -49,15 +69,18 @@ func (c *completionItemCmp) Update(tea.Msg) (tea.Model, tea.Cmd) {
 
 // View implements CommandItem.
 func (c *completionItemCmp) View() tea.View {
-	t := theme.CurrentTheme()
+	t := styles.CurrentTheme()
 
-	baseStyle := styles.BaseStyle().Background(t.BackgroundSecondary())
-	titleStyle := baseStyle.Padding(0, 1).Width(c.width).Foreground(t.Text())
-	titleMatchStyle := baseStyle.Foreground(t.Text()).Underline(true)
+	titleStyle := t.S().Text.Padding(0, 1).Width(c.width)
+	titleMatchStyle := t.S().Text.Underline(true)
+	if c.bgColor != nil {
+		titleStyle = titleStyle.Background(c.bgColor)
+		titleMatchStyle = titleMatchStyle.Background(c.bgColor)
+	}
 
 	if c.focus {
-		titleStyle = titleStyle.Foreground(t.Background()).Background(t.Primary()).Bold(true)
-		titleMatchStyle = titleMatchStyle.Foreground(t.Background()).Background(t.Primary()).Bold(true)
+		titleStyle = t.S().TextSelected.Padding(0, 1).Width(c.width)
+		titleMatchStyle = t.S().TextSelected.Underline(true)
 	}
 
 	var truncatedTitle string

internal/tui/components/core/helpers.go

@@ -9,13 +9,26 @@ import (
 	"github.com/opencode-ai/opencode/internal/tui/styles"
 )
 
-func Section(title string, width int) string {
+func Section(text string, width int) string {
 	t := styles.CurrentTheme()
 	char := "─"
+	length := len(text) + 1
+	remainingWidth := width - length
+	if remainingWidth > 0 {
+		text = text + " " + t.S().Base.Foreground(t.Border).Render(strings.Repeat(char, remainingWidth))
+	}
+	return text
+}
+
+func Title(title string, width int) string {
+	t := styles.CurrentTheme()
+	char := "╱"
 	length := len(title) + 1
 	remainingWidth := width - length
+	lineStyle := t.S().Base.Foreground(t.Primary)
+	titleStyle := t.S().Base.Foreground(t.Secondary)
 	if remainingWidth > 0 {
-		title = title + " " + t.S().Base.Foreground(t.Border).Render(strings.Repeat(char, remainingWidth))
+		title = titleStyle.Render(title) + " " + lineStyle.Render(strings.Repeat(char, remainingWidth))
 	}
 	return title
 }

internal/tui/components/core/list/list.go

@@ -39,6 +39,7 @@ type ListModel interface {
 	ResetView()                     // Clear rendering cache and reset scroll position
 	Items() []util.Model            // Get all items in the list
 	SelectedIndex() int             // Get the index of the currently selected item
+	SetSelected(int) tea.Cmd        // Set the selected item by index and scroll to it
 	Filter(string) tea.Cmd          // Filter items based on a search term
 }
 
@@ -133,11 +134,12 @@ type model struct {
 	gapSize        int            // Number of empty lines between items
 	padding        []int          // Padding around the list content
 
-	filterable      bool            // Whether items can be filtered
-	filteredItems   []util.Model    // Filtered items based on current search
-	input           textinput.Model // Input field for filtering items
-	hideFilterInput bool            // Whether to hide the filter input field
-	currentSearch   string          // Current search term for filtering
+	filterable        bool            // Whether items can be filtered
+	filterPlaceholder string          // Placeholder text for filter input
+	filteredItems     []util.Model    // Filtered items based on current search
+	input             textinput.Model // Input field for filtering items
+	hideFilterInput   bool            // Whether to hide the filter input field
+	currentSearch     string          // Current search term for filtering
 }
 
 // listOptions is a function type for configuring list options.
@@ -195,29 +197,39 @@ func WithHideFilterInput(hide bool) listOptions {
 	}
 }
 
+// WithFilterPlaceholder sets the placeholder text for the filter input field.
+func WithFilterPlaceholder(placeholder string) listOptions {
+	return func(m *model) {
+		m.filterPlaceholder = placeholder
+	}
+}
+
 // New creates a new list model with the specified options.
 // The list starts with no items selected and requires SetItems to be called
 // or items to be provided via WithItems option.
 func New(opts ...listOptions) ListModel {
 	m := &model{
-		help:           help.New(),
-		keyMap:         DefaultKeyMap(),
-		allItems:       []util.Model{},
-		filteredItems:  []util.Model{},
-		renderState:    newRenderState(),
-		gapSize:        DefaultGapSize,
-		padding:        []int{},
-		selectionState: selectionState{selectedIndex: NoSelection},
+		help:              help.New(),
+		keyMap:            DefaultKeyMap(),
+		allItems:          []util.Model{},
+		filteredItems:     []util.Model{},
+		renderState:       newRenderState(),
+		gapSize:           DefaultGapSize,
+		padding:           []int{},
+		selectionState:    selectionState{selectedIndex: NoSelection},
+		filterPlaceholder: "Type to filter...",
 	}
 	for _, opt := range opts {
 		opt(m)
 	}
 
 	if m.filterable && !m.hideFilterInput {
+		t := styles.CurrentTheme()
 		ti := textinput.New()
-		ti.Placeholder = "Type to filter..."
+		ti.Placeholder = m.filterPlaceholder
 		ti.SetVirtualCursor(false)
 		ti.Focus()
+		ti.SetStyles(t.S().TextInput)
 		m.input = ti
 
 		// disable j,k movements
@@ -616,7 +628,7 @@ func (m *model) isSectionHeader(index int) bool {
 
 // findFirstSelectableItem finds the first item that is not a section header.
 func (m *model) findFirstSelectableItem() int {
-	for i := 0; i < len(m.filteredItems); i++ {
+	for i := range m.filteredItems {
 		if !m.isSectionHeader(i) {
 			return i
 		}
@@ -944,7 +956,7 @@ func (m *model) SetSize(width int, height int) tea.Cmd {
 	m.viewState.width = width
 	m.ResetView()
 	if m.filterable && !m.hideFilterInput {
-		m.input.SetWidth(m.getItemWidth() - 3)
+		m.input.SetWidth(m.getItemWidth() - 5)
 	}
 	return m.setAllItemsSize()
 }
@@ -1096,7 +1108,7 @@ func (m *model) SetItems(items []util.Model) tea.Cmd {
 }
 
 func (c *model) inputStyle() lipgloss.Style {
-	return styles.BaseStyle()
+	return styles.BaseStyle().Padding(0, 1, 1, 1)
 }
 
 // section represents a group of items under a section header.
@@ -1275,3 +1287,22 @@ func (m *model) SelectedIndex() int {
 	}
 	return m.selectionState.selectedIndex
 }
+
+// SetSelected sets the selected item by index and automatically scrolls to make it visible.
+// If the index is invalid or points to a section header, it finds the nearest selectable item.
+func (m *model) SetSelected(index int) tea.Cmd {
+	changeNeeded := m.selectionState.selectedIndex - index
+	cmds := []tea.Cmd{}
+	if changeNeeded < 0 {
+		for range -changeNeeded {
+			cmds = append(cmds, m.selectNextItem())
+			m.renderVisible()
+		}
+	} else if changeNeeded > 0 {
+		for range changeNeeded {
+			cmds = append(cmds, m.selectPreviousItem())
+			m.renderVisible()
+		}
+	}
+	return tea.Batch(cmds...)
+}

internal/tui/components/dialogs/commands/arguments.go

@@ -220,9 +220,9 @@ func (c *commandArgumentsDialogCmp) View() tea.View {
 }
 
 func (c *commandArgumentsDialogCmp) moveCursor(cursor *tea.Cursor) *tea.Cursor {
-	offset := 13 + (1+c.focusIndex)*3
+	row, col := c.Position()
+	offset := row + 3 + (1+c.focusIndex)*3
 	cursor.Y += offset
-	_, col := c.Position()
 	cursor.X = cursor.X + col + 3
 	return cursor
 }
@@ -237,10 +237,11 @@ func (c *commandArgumentsDialogCmp) style() lipgloss.Style {
 		BorderForeground(t.TextMuted())
 }
 
-func (q *commandArgumentsDialogCmp) Position() (int, int) {
-	row := 10
-	col := q.wWidth / 2
-	col -= q.width / 2
+func (c *commandArgumentsDialogCmp) Position() (int, int) {
+	row := c.wHeight / 2
+	row -= c.wHeight / 2
+	col := c.wWidth / 2
+	col -= c.width / 2
 	return row, col
 }
 

internal/tui/components/dialogs/commands/keys.go

@@ -14,16 +14,16 @@ type CommandsDialogKeyMap struct {
 func DefaultCommandsDialogKeyMap() CommandsDialogKeyMap {
 	return CommandsDialogKeyMap{
 		Select: key.NewBinding(
-			key.WithKeys("enter"),
+			key.WithKeys("enter", "tab", "ctrl+y"),
 			key.WithHelp("enter", "confirm"),
 		),
 		Next: key.NewBinding(
-			key.WithKeys("tab", "down"),
-			key.WithHelp("tab/↓", "next"),
+			key.WithKeys("down", "ctrl+n"),
+			key.WithHelp("↓", "next item"),
 		),
 		Previous: key.NewBinding(
-			key.WithKeys("shift+tab", "up"),
-			key.WithHelp("shift+tab/↑", "previous"),
+			key.WithKeys("up", "ctrl+p"),
+			key.WithHelp("↑", "previous item"),
 		),
 	}
 }

internal/tui/components/dialogs/sessions/keys.go

@@ -0,0 +1,56 @@
+package sessions
+
+import (
+	"github.com/charmbracelet/bubbles/v2/key"
+	"github.com/opencode-ai/opencode/internal/tui/layout"
+)
+
+type KeyMap struct {
+	Select   key.Binding
+	Next     key.Binding
+	Previous key.Binding
+}
+
+func DefaultKeyMap() KeyMap {
+	return KeyMap{
+		Select: key.NewBinding(
+			key.WithKeys("enter", "tab", "ctrl+y"),
+			key.WithHelp("enter", "confirm"),
+		),
+		Next: key.NewBinding(
+			key.WithKeys("down", "ctrl+n"),
+			key.WithHelp("↓", "next item"),
+		),
+		Previous: key.NewBinding(
+			key.WithKeys("up", "ctrl+p"),
+			key.WithHelp("↑", "previous item"),
+		),
+	}
+}
+
+// FullHelp implements help.KeyMap.
+func (k KeyMap) FullHelp() [][]key.Binding {
+	m := [][]key.Binding{}
+	slice := layout.KeyMapToSlice(k)
+	for i := 0; i < len(slice); i += 4 {
+		end := min(i+4, len(slice))
+		m = append(m, slice[i:end])
+	}
+	return m
+}
+
+// ShortHelp implements help.KeyMap.
+func (k KeyMap) ShortHelp() []key.Binding {
+	return []key.Binding{
+		key.NewBinding(
+
+			key.WithKeys("down", "up"),
+			key.WithHelp("↑↓", "choose"),
+		),
+		k.Select,
+		key.NewBinding(
+			key.WithKeys("esc"),
+			key.WithHelp("esc", "cancel"),
+		),
+	}
+}