feat(tui): display endpoint details in selected collection view

Author: maniac-en

internal/tui/app/model.go

@@ -74,9 +74,9 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 						m.selectedIndex = m.collectionsView.GetSelectedIndex()
 						m.mode = SelectedCollectionViewMode
 						if m.width > 0 && m.height > 0 {
-							m.selectedCollectionView = views.NewSelectedCollectionViewWithSize(m.ctx.Endpoints, *selectedItem, m.width, m.height)
+							m.selectedCollectionView = views.NewSelectedCollectionViewWithSize(m.ctx.Endpoints, m.ctx.HTTP, *selectedItem, m.width, m.height)
 						} else {
-							m.selectedCollectionView = views.NewSelectedCollectionView(m.ctx.Endpoints, *selectedItem)
+							m.selectedCollectionView = views.NewSelectedCollectionView(m.ctx.Endpoints, m.ctx.HTTP, *selectedItem)
 						}
 						return m, m.selectedCollectionView.Init()
 					} else {

internal/tui/views/endpoint_sidebar.go

@@ -19,16 +19,30 @@ type EndpointSidebarView struct {
 	initialized      bool
 	selectedIndex    int
 	endpoints        []endpoints.EndpointEntity
+	focused          bool
 }
 
 func NewEndpointSidebarView(endpointsManager *endpoints.EndpointsManager, collection collections.CollectionEntity) EndpointSidebarView {
 	return EndpointSidebarView{
 		endpointsManager: endpointsManager,
 		collection:       collection,
 		selectedIndex:    0,
+		focused:          false,
 	}
 }
 
+func (v *EndpointSidebarView) Focus() {
+	v.focused = true
+}
+
+func (v *EndpointSidebarView) Blur() {
+	v.focused = false
+}
+
+func (v EndpointSidebarView) Focused() bool {
+	return v.focused
+}
+
 func (v EndpointSidebarView) Init() tea.Cmd {
 	return v.loadEndpoints
 }
@@ -70,12 +84,38 @@ func (v EndpointSidebarView) Update(msg tea.Msg) (EndpointSidebarView, tea.Cmd)
 		}
 		v.initialized = true
 
+		// Auto-select first endpoint if available
+		if len(msg.endpoints) > 0 {
+			return v, func() tea.Msg {
+				return EndpointSelectedMsg{Endpoint: msg.endpoints[0]}
+			}
+		}
+
 	case endpointsLoadError:
 		v.initialized = true
 
 	case tea.KeyMsg:
 		if v.initialized {
-			v.list, cmd = v.list.Update(msg)
+			switch msg.String() {
+			case "enter":
+				if selectedEndpoint := v.GetSelectedEndpoint(); selectedEndpoint != nil {
+					return v, func() tea.Msg {
+						return EndpointSelectedMsg{Endpoint: *selectedEndpoint}
+					}
+				}
+			default:
+				// Forward navigation keys to the list even if not explicitly focused
+				oldIndex := v.list.SelectedIndex()
+				v.list, cmd = v.list.Update(msg)
+				newIndex := v.list.SelectedIndex()
+				
+				// If the selected index changed, auto-select the new endpoint
+				if oldIndex != newIndex && newIndex >= 0 && newIndex < len(v.endpoints) {
+					return v, func() tea.Msg {
+						return EndpointSelectedMsg{Endpoint: v.endpoints[newIndex]}
+					}
+				}
+			}
 		}
 	}
 

internal/tui/views/selected_collection.go

@@ -5,29 +5,37 @@ import (
 	"github.com/charmbracelet/lipgloss"
 	"github.com/maniac-en/req/internal/backend/collections"
 	"github.com/maniac-en/req/internal/backend/endpoints"
+	"github.com/maniac-en/req/internal/backend/http"
 	"github.com/maniac-en/req/internal/tui/components"
 	"github.com/maniac-en/req/internal/tui/styles"
 )
 
 type SelectedCollectionView struct {
 	layout           components.Layout
 	endpointsManager *endpoints.EndpointsManager
+	httpManager      *http.HTTPManager
 	collection       collections.CollectionEntity
 	sidebar          EndpointSidebarView
+	selectedEndpoint *endpoints.EndpointEntity
 	width            int
 	height           int
 }
 
-func NewSelectedCollectionView(endpointsManager *endpoints.EndpointsManager, collection collections.CollectionEntity) SelectedCollectionView {
+func NewSelectedCollectionView(endpointsManager *endpoints.EndpointsManager, httpManager *http.HTTPManager, collection collections.CollectionEntity) SelectedCollectionView {
+	sidebar := NewEndpointSidebarView(endpointsManager, collection)
+	sidebar.Focus() // Make sure sidebar starts focused
+	
 	return SelectedCollectionView{
 		layout:           components.NewLayout(),
 		endpointsManager: endpointsManager,
+		httpManager:      httpManager,
 		collection:       collection,
-		sidebar:          NewEndpointSidebarView(endpointsManager, collection),
+		sidebar:          sidebar,
+		selectedEndpoint: nil,
 	}
 }
 
-func NewSelectedCollectionViewWithSize(endpointsManager *endpoints.EndpointsManager, collection collections.CollectionEntity, width, height int) SelectedCollectionView {
+func NewSelectedCollectionViewWithSize(endpointsManager *endpoints.EndpointsManager, httpManager *http.HTTPManager, collection collections.CollectionEntity, width, height int) SelectedCollectionView {
 	layout := components.NewLayout()
 	layout.SetSize(width, height)
 
@@ -40,12 +48,15 @@ func NewSelectedCollectionViewWithSize(endpointsManager *endpoints.EndpointsMana
 	sidebar := NewEndpointSidebarView(endpointsManager, collection)
 	sidebar.width = sidebarWidth
 	sidebar.height = innerHeight
+	sidebar.Focus() // Make sure sidebar starts focused
 
 	return SelectedCollectionView{
 		layout:           layout,
 		endpointsManager: endpointsManager,
+		httpManager:      httpManager,
 		collection:       collection,
 		sidebar:          sidebar,
+		selectedEndpoint: nil,
 		width:            width,
 		height:           height,
 	}
@@ -78,18 +89,62 @@ func (v SelectedCollectionView) Update(msg tea.Msg) (SelectedCollectionView, tea
 		case "esc", "q":
 			return v, func() tea.Msg { return BackToCollectionsMsg{} }
 		}
+
+	case EndpointSelectedMsg:
+		// Store the selected endpoint for display
+		v.selectedEndpoint = &msg.Endpoint
 	}
 
+	// Always forward messages to sidebar for now, but it only handles them when focused
 	v.sidebar, cmd = v.sidebar.Update(msg)
 
 	return v, cmd
 }
 
+
 func (v SelectedCollectionView) View() string {
 	title := "Collection: " + v.collection.Name
+	if v.selectedEndpoint != nil {
+		title += " > " + v.selectedEndpoint.Name
+	}
 
 	sidebarContent := v.sidebar.View()
-	mainContent := "Endpoint details will be displayed here"
+
+	// Simple endpoint information display
+	var mainContent string
+	if v.selectedEndpoint != nil {
+		var lines []string
+		lines = append(lines, "Selected Endpoint:")
+		lines = append(lines, "")
+		lines = append(lines, "Name: "+v.selectedEndpoint.Name)
+		lines = append(lines, "Method: "+v.selectedEndpoint.Method)
+		lines = append(lines, "URL: "+v.selectedEndpoint.Url)
+		
+		if v.selectedEndpoint.Headers != "" {
+			lines = append(lines, "")
+			lines = append(lines, "Headers: "+v.selectedEndpoint.Headers)
+		}
+		
+		if v.selectedEndpoint.QueryParams != "" {
+			lines = append(lines, "")
+			lines = append(lines, "Query Params: "+v.selectedEndpoint.QueryParams)
+		}
+		
+		if v.selectedEndpoint.RequestBody != "" {
+			lines = append(lines, "")
+			lines = append(lines, "Request Body:")
+			lines = append(lines, v.selectedEndpoint.RequestBody)
+		}
+		
+		mainContent = lipgloss.JoinVertical(lipgloss.Left, lines...)
+	} else {
+		// Check if there are no endpoints at all
+		if len(v.sidebar.endpoints) == 0 {
+			mainContent = "Create an endpoint to get started"
+		} else {
+			mainContent = "Select an endpoint from the sidebar to view details"
+		}
+	}
 
 	if v.width < 10 || v.height < 10 {
 		return v.layout.FullView(title, sidebarContent, "esc/q: back to collections")
@@ -103,26 +158,32 @@ func (v SelectedCollectionView) View() string {
 	sidebarWidth := innerWidth / 4
 	mainWidth := innerWidth - sidebarWidth - 1
 
+	// Sidebar styling
 	sidebarStyle := styles.SidebarStyle.Copy().
 		Width(sidebarWidth).
-		Height(innerHeight)
+		Height(innerHeight).
+		BorderForeground(styles.Primary)
 
 	mainStyle := styles.MainContentStyle.Copy().
 		Width(mainWidth).
-		Height(innerHeight).
-		Align(lipgloss.Center, lipgloss.Center)
+		Height(innerHeight)
 
 	content := lipgloss.JoinHorizontal(
 		lipgloss.Top,
 		sidebarStyle.Render(sidebarContent),
 		mainStyle.Render(mainContent),
 	)
 
-	instructions := "↑↓: navigate endpoints • esc/q: back to collections"
+	instructions := "↑↓: navigate endpoints • esc/q: back"
 
 	return v.layout.FullView(
 		title,
 		content,
 		instructions,
 	)
 }
+
+// Message types for selected collection view
+type EndpointSelectedMsg struct {
+	Endpoint endpoints.EndpointEntity
+}