Add sidebar component

Introduce a new `Sidebar` component to encapsulate sidebar logic and
rendering. This component utilizes Bubble Tea and Lipgloss for UI
elements. The main application now integrates this component for
displaying sidebar content.

main.go

@@ -7,6 +7,7 @@ import (
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
+	"github.com/vvaibhavv11/player/components"
 )
 
 type model struct {
@@ -54,20 +55,25 @@ func (m model) View() string {
 		return "loading..."
 	}
 
-	// Create search box
-	searchBox := lipgloss.NewStyle().BorderStyle(lipgloss.ThickBorder()).Padding(0, 1).Render(m.textInput.View())
+	searchBox := lipgloss.Place(
+		m.width,
+		m.height/12,
+		lipgloss.Center,
+		lipgloss.Center,
+		lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).Padding(0, 1).Render(m.textInput.View()),
+	)
 
 	// Create sidebar
-	sidebar := lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).Padding(1, 2).Render(m.sidebarContent)
+	// sidebar := lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).Padding(1, 2).Render(m.sidebarContent)
 
 	// Combine search and sidebar vertically
-	content := lipgloss.JoinVertical(lipgloss.Left, searchBox, "\n", sidebar)
+	content := lipgloss.JoinVertical(lipgloss.Left, searchBox, "\n", components.Sidebar(m.sidebarContent))
 
 	return lipgloss.Place(
 		m.width,
 		m.height,
-		lipgloss.Center,
-		lipgloss.Center,
+		0,
+		0,
 		content,
 	)
 }