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...))
+}

go.mod

@@ -3,11 +3,15 @@ module github.com/vvaibhavv11/player
 go 1.25.0
 
 require (
+	github.com/charmbracelet/bubbles v0.21.0
+	github.com/charmbracelet/bubbletea v1.3.10
+	github.com/charmbracelet/lipgloss v1.1.0
+)
+
+require (
+	github.com/atotto/clipboard v0.1.4 // indirect
 	github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
-	github.com/charmbracelet/bubbles v0.21.0 // indirect
-	github.com/charmbracelet/bubbletea v1.3.10 // indirect
 	github.com/charmbracelet/colorprofile v0.2.3-0.20250311203215-f60798e515dc // indirect
-	github.com/charmbracelet/lipgloss v1.1.0 // indirect
 	github.com/charmbracelet/x/ansi v0.10.1 // indirect
 	github.com/charmbracelet/x/cellbuf v0.0.13-0.20250311204145-2c3ea96c31dd // indirect
 	github.com/charmbracelet/x/term v0.2.1 // indirect

go.sum

@@ -1,3 +1,5 @@
+github.com/atotto/clipboard v0.1.4 h1:EH0zSVneZPSuFR11BlR9YppQTVDbh5+16AmcJi4g1z4=
+github.com/atotto/clipboard v0.1.4/go.mod h1:ZY9tmq7sm5xIbd9bOK4onWV4S6X0u6GY7Vn0Yu86PYI=
 github.com/aymanbagabas/go-osc52/v2 v2.0.1 h1:HwpRHbFMcZLEVr42D4p7XBqjyuxQH5SMiErDT4WkJ2k=
 github.com/aymanbagabas/go-osc52/v2 v2.0.1/go.mod h1:uYgXzlJ7ZpABp8OJ+exZzJJhRNQ2ASbcXHWsFqH8hp8=
 github.com/charmbracelet/bubbles v0.21.0 h1:9TdC97SdRVg/1aaXNVWfFH3nnLAwOXr8Fn6u6mfQdFs=
@@ -35,6 +37,8 @@ github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ=
 github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
 github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e h1:JVG44RsyaB9T2KIHavMF/ppJZNG9ZpyihvCd0w101no=
 github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e/go.mod h1:RbqR21r5mrJuqunuUZ/Dhy/avygyECGrLceyNeo4LiM=
+golang.org/x/exp v0.0.0-20220909182711-5c715a9e8561 h1:MDc5xs78ZrZr3HMQugiXOAkSZtfTpbJLDr/lwfgO53E=
+golang.org/x/exp v0.0.0-20220909182711-5c715a9e8561/go.mod h1:cyybsKvd6eL0RnXn6p/Grxp8F5bW7iYuBgsNCOHpMYE=
 golang.org/x/sys v0.0.0-20210809222454-d867a43fc93e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.36.0 h1:KVRy2GtZBrk1cBYA7MKu5bEZFxQk4NIDV6RLVcC8o0k=

main.go

@@ -4,49 +4,89 @@ import (
 	"fmt"
 	"os"
 
+	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+	"github.com/vvaibhavv11/player/components"
 )
 
 type model struct {
-	counter int
+	textInput      textinput.Model
+	width          int
+	height         int
+	sidebarContent components.Sidebar
 }
 
 func initialModel() model {
-	return model{counter: 0}
+	ti := textinput.New()
+	ti.Placeholder = "Search"
+	ti.Width = 30
+	ti.CharLimit = 30
+	ti.Prompt = ""
+	ti.Focus()
+	sidebarcon := components.Sidebar{
+		Data:   []string{"Library", "Playlist1", "Playlist2", "Favorites"},
+		Sindex: 0,
+	}
+
+	return model{
+		textInput:      ti,
+		sidebarContent: sidebarcon,
+	}
 }
 
 func (m model) Init() tea.Cmd {
-	return nil
+	return textinput.Blink
 }
 
 func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmd tea.Cmd
 	switch msg := msg.(type) {
-
 	case tea.KeyMsg:
 		switch msg.String() {
 		case "q", "ctrl+c":
 			return m, tea.Quit
-		case "+":
-			m.counter++
-		case "-":
-			m.counter--
 		}
+	case tea.WindowSizeMsg:
+		m.width = msg.Width
+		m.height = msg.Height
 	}
-	return m, nil
+	m.textInput, cmd = m.textInput.Update(msg)
+	return m, cmd
 }
 
 func (m model) View() string {
-	return fmt.Sprintf(
+	if m.width == 0 {
-		"Counter: %d\n\nPress + / - to change\nPress q to quit\n",
+		return "loading..."
-		m.counter,
+	}
+
+	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)
+
+	// Combine search and sidebar vertically
+	content := lipgloss.JoinVertical(lipgloss.Left, searchBox, "\n", m.sidebarContent.View())
+
+	return lipgloss.Place(
+		m.width,
+		m.height,
+		0,
+		0,
+		content,
 	)
 }
 
 func main() {
-	p := tea.NewProgram(initialModel())
+	p := tea.NewProgram(initialModel(), tea.WithAltScreen())
-	if err := p.Start(); err != nil {
+	if _, err := p.Run(); err != nil {
 		fmt.Println("Error:", err)
 		os.Exit(1)
 	}
 }
-