wip: refactoring tui

4 files changed, 70 insertions, 22 deletions

diff --git a/packages/tui/internal/components/dialog/complete.go b/packages/tui/internal/components/dialog/complete.go
index c797a00df..8819184ac 100644
--- a/packages/tui/internal/components/dialog/complete.go
+++ b/packages/tui/internal/components/dialog/complete.go
@@ -203,26 +203,27 @@ func (c *completionDialogComponent) View() string {
 	t := theme.CurrentTheme()
 	baseStyle := styles.BaseStyle()
 
-	maxWidth := 40
+	// maxWidth := 40
+	//
+	// completions := c.list.GetItems()
 
-	completions := c.list.GetItems()
+	// for _, cmd := range completions {
+	// 	title := cmd.DisplayValue()
+	// 	if len(title) > maxWidth-4 {
+	// 		maxWidth = len(title) + 4
+	// 	}
+	// }
 
-	for _, cmd := range completions {
-		title := cmd.DisplayValue()
-		if len(title) > maxWidth-4 {
-			maxWidth = len(title) + 4
-		}
-	}
-
-	c.list.SetMaxWidth(maxWidth)
+	// c.list.SetMaxWidth(maxWidth)
 
 	return baseStyle.Padding(0, 0).
-		Border(lipgloss.NormalBorder()).
+		Background(t.BackgroundSubtle()).
+		Border(lipgloss.ThickBorder()).
+		BorderTop(false).
 		BorderBottom(false).
-		BorderRight(false).
-		BorderLeft(false).
-		BorderBackground(t.Background()).
-		BorderForeground(t.TextMuted()).
+		BorderRight(true).
+		BorderLeft(true).
+		BorderForeground(t.BackgroundSubtle()).
 		Width(c.width).
 		Render(c.list.View())
 }
@@ -246,7 +247,7 @@ func NewCompletionDialogComponent(completionProvider CompletionProvider) Complet
 	li := utilComponents.NewListComponent(
 		items,
 		7,
-		"No file matches found",
+		"No matching files",
 		false,
 	)
 
diff --git a/packages/tui/internal/layout/container.go b/packages/tui/internal/layout/container.go
index 3fa844afc..c57b7bd7e 100644
--- a/packages/tui/internal/layout/container.go
+++ b/packages/tui/internal/layout/container.go
@@ -18,11 +18,14 @@ type Container interface {
 	Blur()
 	MaxWidth() int
 	Alignment() lipgloss.Position
+	GetPosition() (x, y int)
 }
 
 type container struct {
 	width  int
 	height int
+	x      int
+	y      int
 
 	content ModelWithView
 
@@ -140,7 +143,7 @@ func (c *container) SetSize(width, height int) tea.Cmd {
 }
 
 func (c *container) GetSize() (int, int) {
-	return c.width, c.height
+	return min(c.width, c.maxWidth), c.height
 }
 
 func (c *container) MaxWidth() int {
@@ -169,6 +172,11 @@ func (c *container) Blur() {
 	}
 }
 
+// GetPosition returns the x, y coordinates of the container
+func (c *container) GetPosition() (x, y int) {
+	return c.x, c.y
+}
+
 type ContainerOption func(*container)
 
 func NewContainer(content ModelWithView, options ...ContainerOption) Container {
diff --git a/packages/tui/internal/layout/flex.go b/packages/tui/internal/layout/flex.go
index dd04968d4..031dd970f 100644
--- a/packages/tui/internal/layout/flex.go
+++ b/packages/tui/internal/layout/flex.go
@@ -159,11 +159,51 @@ func (f *flexLayout) SetSize(width, height int) tea.Cmd {
 	f.height = height
 
 	var cmds []tea.Cmd
+	currentX, currentY := 0, 0
+	
 	for i, pane := range f.panes {
 		if pane != nil {
 			paneWidth, paneHeight := f.calculatePaneSize(i)
+			
+			// Calculate actual position based on alignment
+			actualX, actualY := currentX, currentY
+			
+			if f.direction == FlexDirectionHorizontal {
+				// In horizontal layout, vertical alignment affects Y position
+				// (lipgloss.Center is used for vertical alignment in JoinHorizontal)
+				actualY = (f.height - paneHeight) / 2
+			} else {
+				// In vertical layout, horizontal alignment affects X position
+				contentWidth := paneWidth
+				if pane.MaxWidth() > 0 && contentWidth > pane.MaxWidth() {
+					contentWidth = pane.MaxWidth()
+				}
+				
+				switch pane.Alignment() {
+				case lipgloss.Center:
+					actualX = (f.width - contentWidth) / 2
+				case lipgloss.Right:
+					actualX = f.width - contentWidth
+				case lipgloss.Left:
+					actualX = 0
+				}
+			}
+			
+			// Set position if the pane is a *container
+			if c, ok := pane.(*container); ok {
+				c.x = actualX
+				c.y = actualY
+			}
+			
 			cmd := pane.SetSize(paneWidth, paneHeight)
 			cmds = append(cmds, cmd)
+			
+			// Update position for next pane
+			if f.direction == FlexDirectionHorizontal {
+				currentX += paneWidth
+			} else {
+				currentY += paneHeight
+			}
 		}
 	}
 	return tea.Batch(cmds...)
diff --git a/packages/tui/internal/page/chat.go b/packages/tui/internal/page/chat.go
index ee8b9ed00..a26fa3a64 100644
--- a/packages/tui/internal/page/chat.go
+++ b/packages/tui/internal/page/chat.go
@@ -130,17 +130,16 @@ func (p *chatPage) GetSize() (int, int) {
 func (p *chatPage) View() string {
 	layoutView := p.layout.View()
 
-	// TODO: Fix this with our new layout
 	if p.showCompletionDialog {
-		_, layoutHeight := p.layout.GetSize()
-		editorWidth, editorHeight := p.editor.GetSize()
+		editorWidth, _ := p.editor.GetSize()
+		editorX, editorY := p.editor.GetPosition()
 
 		p.completionDialog.SetWidth(editorWidth)
 		overlay := p.completionDialog.View()
 
 		layoutView = layout.PlaceOverlay(
-			0,
-			layoutHeight-editorHeight-lipgloss.Height(overlay),
+			editorX,
+			editorY-lipgloss.Height(overlay)+1,
 			overlay,
 			layoutView,
 		)