Refactor sidebar component to use struct

This commit refactors the sidebar component to use a struct for better
organization and maintainability. The `data` and `sindex` fields are now
exported as `Data` and `Sindex` respectively, allowing for easier access
and modification. Additionally, the styling for the selected sidebar
item has been updated for improved visual clarity.

components/main_content.go

@@ -0,0 +1 @@
+package components

components/sidebar.go

@@ -0,0 +1,53 @@
+package components
+
+import (
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+)
+
+type Sidebar struct {
+	Data   []string
+	Sindex int
+}
+
+func (s Sidebar) Init() tea.Cmd {
+	return nil
+}
+
+func (s *Sidebar) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch m := msg.(type) {
+	case tea.KeyMsg:
+		switch m.String() {
+		case "up":
+			if s.Sindex > 0 {
+				s.Sindex--
+			}
+		case "down":
+			if s.Sindex < len(s.Data)-1 {
+				s.Sindex++
+			}
+		}
+	}
+	return s, nil
+}
+
+func (s Sidebar) View() string {
+	var items []string
+	for i, item := range s.Data {
+		if i == s.Sindex {
+			items = append(items, lipgloss.
+				NewStyle().
+				Foreground(lipgloss.Color("#FFFFFF")).
+				Background(lipgloss.Color("#93BD57")).
+				Render(item))
+		} else {
+			items = append(items, item)
+		}
+	}
+
+	return lipgloss.
+		NewStyle().
+		BorderStyle(lipgloss.NormalBorder()).
+		Padding(1, 2).
+		Render(lipgloss.JoinVertical(lipgloss.Left, items...))
+}

main.go

@@ -7,13 +7,14 @@ import (
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
+	"github.com/vvaibhavv11/player/components"
 )
 
 type model struct {
 	textInput      textinput.Model
 	width          int
 	height         int
-	sidebarContent string
+	sidebarContent components.Sidebar
 }
 
 func initialModel() model {
@@ -23,9 +24,14 @@ func initialModel() model {
 	ti.CharLimit = 30
 	ti.Prompt = ""
 	ti.Focus()
+	sidebarcon := components.Sidebar{
+		Data:   []string{"Library", "Playlist1", "Playlist2", "Favorites"},
+		Sindex: 0,
+	}
+
 	return model{
 		textInput:      ti,
-		sidebarContent: "Library\n\nPlaylist 1\nPlaylist 2\nFavorites",
+		sidebarContent: sidebarcon,
 	}
 }
 
@@ -54,20 +60,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", m.sidebarContent.View())
 
 	return lipgloss.Place(
 		m.width,
 		m.height,
-		lipgloss.Center,
-		lipgloss.Center,
+		0,
+		0,
 		content,
 	)
 }