Table for settings closes #18

models/organisationModel.go

@@ -17,13 +17,10 @@ type OrganisationModel struct {
 	Url       string
 	RepoQuery structs.OrganizationQuery
 
-	repositorySettingsTabs []structs.RepositorySettingsTab
-
-	repoList    list.Model
-	settingList list.Model
-	repoModel   RepositoryModel
-
+	repoList  list.Model
+	repoModel RepositoryModel
 	activeTab     int
+
 	loaded        bool
 	width         int
 	height        int
@@ -34,6 +31,10 @@ func (m *OrganisationModel) panelWidth() int {
 	return m.width / 2
 }
 
+func (m *OrganisationModel) getSelectedRepo() structs.RepositoryQuery {
+	return m.RepoQuery.Organization.Repositories.Edges[m.repoList.Index()].Node
+}
+
 func (m *OrganisationModel) init() {
 	m.repoList = list.New(
 		[]list.Item{},
@@ -43,15 +44,8 @@ func (m *OrganisationModel) init() {
 		0,
 		0,
 	)
-	m.settingList = list.New(
-		[]list.Item{},
-		list.NewDefaultDelegate(),
-		// m.width,
-		// m.height,
-		0,
-		0,
-	)
-	m.repoModel = NewRepositoryModel(m.panelWidth(), m.height)
+
+  m.repoModel = NewRepositoryModel(m.panelWidth(), m.height)
 }
 
 func (m OrganisationModel) Init() tea.Cmd {
@@ -76,7 +70,7 @@ func (m OrganisationModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	case messages.RepoListMsg:
 		m.repoList = buildRepoListModel(msg.OrganizationQuery, m.width, m.height)
 		m.RepoQuery = msg.OrganizationQuery
-		m.repositorySettingsTabs = structs.BuildRepositorySettings(m.RepoQuery.Organization.Repositories.Edges[m.repoList.Index()].Node)
+		m.repoModel.SelectRepo(m.getSelectedRepo())
 		return m, nil
 
 	case tea.KeyMsg:
@@ -87,39 +81,38 @@ func (m OrganisationModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 				m.tabsHaveFocus = false
 				return m, nil
 			case tea.KeyRight:
-				m.activeTab = min(m.activeTab+1, len(m.repositorySettingsTabs)-1)
+				m.repoModel.NextTab()
 			case tea.KeyLeft:
-				m.activeTab = max(m.activeTab-1, 0)
+				m.repoModel.PreviousTab()
 			}
 		} else {
 			switch msg.Type {
 			case tea.KeyDown, tea.KeyUp:
-				m.repositorySettingsTabs = structs.BuildRepositorySettings(m.RepoQuery.Organization.Repositories.Edges[m.repoList.Index()].Node)
+				m.repoModel.SelectRepo(m.getSelectedRepo())
 			case tea.KeyEnter:
 				m.tabsHaveFocus = true
+				m.repoModel.SelectRepo(m.getSelectedRepo())
 			case tea.KeyEsc:
 				return MainModel[UserModelName], nil
 			}
 			switch msg.String() {
 			case "ctrl+c", "q":
 				return m, tea.Quit
 			}
-			m.repoList.SetWidth(200)
 			m.repoList, cmd = m.repoList.Update(msg)
 		}
 	}
 
-	m.buildSettingListModel(m.repositorySettingsTabs[m.activeTab], m.width, m.height)
+	// m.buildSettingListModel(m.repositorySettingsTabs[m.activeTab], m.width, m.height)
 
 	return m, cmd
 }
 
 // View implements tea.Model
 func (m OrganisationModel) View() string {
 	var repoList = appStyle.Width((m.width / 2) - 4).Render(m.repoList.View())
-	var settingList = lipgloss.JoinVertical(lipgloss.Left, m.Tabs(), settingsStyle.Width(m.width/2).Render(m.settingList.View()))
-
-	var views = []string{repoList, settingList}
+	var settings = appStyle.Width(m.width / 2).Render(m.repoModel.View())
+	var views = []string{repoList, settings}
 
 	return lipgloss.JoinHorizontal(lipgloss.Top, views...)
 }
@@ -159,52 +152,3 @@ func buildRepoListModel(organizationQuery structs.OrganizationQuery, width, heig
 
 	return list
 }
-
-func (m *OrganisationModel) buildSettingListModel(tabSettings structs.RepositorySettingsTab, width, height int) {
-	items := make([]list.Item, len(tabSettings.Settings))
-	for i, setting := range tabSettings.Settings {
-		items[i] = structs.NewListItem(setting.Name, setting.Value)
-	}
-
-	m.settingList = list.New(items, itemDelegate{}, width, height-titleHeight-4)
-	m.settingList.Title = tabSettings.Name
-	m.settingList.SetShowHelp(false)
-	m.settingList.SetShowTitle(false)
-	m.settingList.SetShowStatusBar(false)
-}
-
-func (m OrganisationModel) Tabs() string {
-	Tabs := []string{}
-	for _, t := range m.repositorySettingsTabs {
-		Tabs = append(Tabs, t.Name)
-	}
-
-	var renderedTabs []string
-
-	for i, t := range Tabs {
-		var style lipgloss.Style
-		isFirst, isLast, isActive := i == 0, i == len(Tabs)-1, i == m.activeTab
-		if isActive {
-			style = activeTabStyle.Copy()
-		} else {
-			style = inactiveTabStyle.Copy()
-		}
-		border, _, _, _, _ := style.GetBorder()
-		if isFirst && isActive {
-			border.BottomLeft = "│"
-		} else if isFirst && !isActive {
-			border.BottomLeft = "├"
-		} else if isLast && isActive {
-			border.BottomRight = "│"
-		} else if isLast && !isActive {
-			border.BottomRight = "┤"
-		}
-		// TODO: Calculate width of tabs correctly so they match m.width
-		style = style.Border(border).Width((m.width / 2 / len(Tabs)) - 1)
-		renderedTabs = append(renderedTabs, style.Render(t))
-	}
-
-	row := lipgloss.JoinHorizontal(lipgloss.Top, renderedTabs...)
-
-	return row
-}

models/repositoryModel.go

@@ -1,29 +1,26 @@
 package models
 
 import (
-	"github.com/admcpr/hub-bub/messages"
 	"github.com/admcpr/hub-bub/structs"
-	"github.com/charmbracelet/bubbles/list"
+	"github.com/charmbracelet/bubbles/table"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 )
 
 type RepositoryModel struct {
 	repositorySettingsTabs []structs.RepositorySettingsTab
 
-	settingList list.Model
+	settingsTable table.Model
 
-	activeTab     int
-	loaded        bool
-	width         int
-	height        int
-	tabsHaveFocus bool
+	activeTab int
+	loaded    bool
+	width     int
+	height    int
 }
 
 func NewRepositoryModel(width, height int) RepositoryModel {
 	return RepositoryModel{
 		repositorySettingsTabs: []structs.RepositorySettingsTab{},
-		settingList:            list.New([]list.Item{}, list.NewDefaultDelegate(), 0, 0),
 		width:                  width,
 		height:                 height,
 	}
@@ -33,6 +30,20 @@ func (m RepositoryModel) Init() tea.Cmd {
 	return nil
 }
 
+func (m *RepositoryModel) SelectRepo(RepositoryQuery structs.RepositoryQuery) {
+	m.repositorySettingsTabs = structs.BuildRepositorySettings(RepositoryQuery)
+
+	m.buildSettingListModel(m.repositorySettingsTabs[m.activeTab], m.width, m.height)
+}
+
+func (m *RepositoryModel) NextTab() {
+	m.activeTab = min(m.activeTab+1, len(m.repositorySettingsTabs)-1)
+}
+
+func (m *RepositoryModel) PreviousTab() {
+	m.activeTab = max(m.activeTab-1, 0)
+}
+
 func (m RepositoryModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	var cmd tea.Cmd
 
@@ -46,50 +57,33 @@ func (m RepositoryModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			m.loaded = true
 		}
 		return m, nil
-
-	case messages.RepoSelectedMsg:
-		m.repositorySettingsTabs = structs.BuildRepositorySettings(msg.RepositoryQuery)
-		return m, nil
-
-	// case messages.RepoListMsg:
-	// 	// m.repositorySettingsTabs = structs.BuildRepositorySettings(m.RepoQuery.Organization.Repositories.Edges[m.repoList.Index()].Node)
-	// 	return m, nil
-
-	case tea.KeyMsg:
-		switch msg.Type {
-		case tea.KeyEsc:
-			m.tabsHaveFocus = false
-			return m, nil
-		case tea.KeyRight:
-			m.activeTab = min(m.activeTab+1, len(m.repositorySettingsTabs)-1)
-		case tea.KeyLeft:
-			m.activeTab = max(m.activeTab-1, 0)
-		}
 	}
 
-	m.buildSettingListModel(m.repositorySettingsTabs[m.activeTab], m.width, m.height)
-
 	return m, cmd
 }
 
 func (m RepositoryModel) View() string {
 	var tabs = m.RenderTabs()
-	var settings = settingsStyle.Render(m.settingList.View())
+	var settings = settingsStyle.Render(m.settingsTable.View())
 
 	return lipgloss.JoinVertical(lipgloss.Left, tabs, settings)
 }
 
 func (m *RepositoryModel) buildSettingListModel(tabSettings structs.RepositorySettingsTab, width, height int) {
-	items := make([]list.Item, len(tabSettings.Settings))
+	columns := []table.Column{{Title: "Name", Width: 30}, {Title: "Value", Width: 10}}
+
+	rows := make([]table.Row, len(tabSettings.Settings))
 	for i, setting := range tabSettings.Settings {
-		items[i] = structs.NewListItem(setting.Name, setting.Value)
+		rows[i] = table.Row{setting.Name, setting.Value}
 	}
 
-	m.settingList = list.New(items, itemDelegate{}, width, height-titleHeight-4)
-	m.settingList.Title = tabSettings.Name
-	m.settingList.SetShowHelp(false)
-	m.settingList.SetShowTitle(false)
-	m.settingList.SetShowStatusBar(false)
+	m.settingsTable = table.New(
+		table.WithColumns(columns),
+		table.WithRows(rows),
+		table.WithWidth(width),
+		table.WithHeight(20))
+	// table.WithHeight(height-titleHeight-4))
+
 }
 
 func (m RepositoryModel) RenderTabs() string {
@@ -118,7 +112,8 @@ func (m RepositoryModel) RenderTabs() string {
 		} else if isLast && !isActive {
 			border.BottomRight = "┤"
 		}
-		style = style.Border(border)
+		// TODO: Calculate width of tabs correctly so they match m.width
+		style = style.Border(border) //.Width((m.width / len(Tabs)) - 1)
 		renderedTabs = append(renderedTabs, style.Render(t))
 	}
 

models/styles.go

@@ -4,10 +4,10 @@ import "github.com/charmbracelet/lipgloss"
 
 var (
 	// Colors
-	purple     = "#cdb4db"
-	pink       = "#ffc8dd"
-	pinkDarker = "#ffafcc"
-	blue       = "#bde0fe"
+	// purple     = "#cdb4db"
+	// pink = "#ffc8dd"
+	// pinkDarker = "#ffafcc"
+	// blue       = "#bde0fe"
 	blueDarker = "#a2d2ff"
 	white      = "#FFFDF5"
 
@@ -21,20 +21,19 @@ var (
 	titleHeight = 2
 
 	// Custom list
-	itemStyle = lipgloss.NewStyle().
-			PaddingLeft(4)
-	selectedItemStyle = lipgloss.NewStyle().
-				PaddingLeft(2).
-				Foreground(lipgloss.Color(blue))
+	// itemStyle = lipgloss.NewStyle().PaddingLeft(4)
+	// selectedItemStyle = lipgloss.NewStyle().
+	// 			PaddingLeft(2).
+	// 			Foreground(lipgloss.Color(blue))
 
 	// Tabs
 	inactiveTabBorder = tabBorderWithBottom("┴", "─", "┴")
 	activeTabBorder   = tabBorderWithBottom("┘", " ", "└")
-	docStyle          = lipgloss.NewStyle().Padding(1, 2, 1, 2)
-	highlightColor    = lipgloss.Color(pinkDarker)
-	borderColor       = lipgloss.Color(blueDarker)
-	inactiveTabStyle  = lipgloss.NewStyle().Border(inactiveTabBorder, true).BorderForeground(borderColor).Padding(0, 1)
-	activeTabStyle    = inactiveTabStyle.Copy().Border(activeTabBorder, true)
+	// docStyle          = lipgloss.NewStyle().Padding(1, 2, 1, 2)
+	// highlightColor    = lipgloss.Color(pinkDarker)
+	borderColor      = lipgloss.Color(blueDarker)
+	inactiveTabStyle = lipgloss.NewStyle().Border(inactiveTabBorder, true).BorderForeground(borderColor).Padding(0, 1)
+	activeTabStyle   = inactiveTabStyle.Copy().Border(activeTabBorder, true)
 
 	settingsStyle = appStyle.Copy().Border(listSettingsBorder()).
 			BorderForeground(borderColor).Padding(0, 1, 1, 1)