Removed syncScreen from home ui

Added syncScreen style dialog

ui/home.go

@@ -60,36 +60,14 @@ func (m ModelHome) FooterView() string {
 	return lipgloss.JoinHorizontal(lipgloss.Center, line)
 }
 
-func (m ModelHome) update2(msg tea.Msg) (*ModelHome, tea.Cmd) {
-	var cmd tea.Cmd
-
-	switch msg := msg.(type) {
-	case tea.KeyMsg:
-		switch msg.String() {
-		case "left":
-			m.home.ActiveSyncScreen = true
-			m.home.Viewport.SetContent(ConfirmationView(m))
-			return &m, cmd
-		case "right":
-			m.home.ActiveSyncScreen = false
-			m.home.Viewport.SetContent(ConfirmationView(m))
-			return &m, cmd
-		case "enter":
-			m.home.StatusSyncScreen = false
-			m.home.Viewport.SetContent(m.GetDataView())
-			return &m, cmd
-		}
-	}
-	return &m, cmd
-}
-
 func (m ModelHome) Update(msg tea.Msg) (*ModelHome, tea.Cmd) {
 	if m.home.StatusSyncScreen {
 		m.home.Ready = true
-		return m.update2(msg)
+    synced, cmd := syncUpdate(msg, m)
+		return synced, cmd
 	}
-	var cmd tea.Cmd
 
+	var cmd tea.Cmd
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch msg.String() {
@@ -110,7 +88,7 @@ func (m ModelHome) Update(msg tea.Msg) (*ModelHome, tea.Cmd) {
 		case "s":
 			m.home.StatusSyncScreen = true
 			m.home.ActiveSyncScreen = true
-			m.home.Viewport.SetContent(ConfirmationView(m))
+			m.home.Viewport.SetContent(syncView(m))
 			return &m, cmd
 		case "ctrl+u":
 			m.home.Cursor = 0
@@ -135,7 +113,7 @@ func (m ModelHome) Update(msg tea.Msg) (*ModelHome, tea.Cmd) {
 
 func (m ModelHome) View() string {
 	view := lipgloss.NewStyle()
-	content := lipgloss.NewStyle().Padding(1, 2, 1, 2)
+	content := lipgloss.NewStyle()
 	if !m.home.Ready {
 		return "\n  Loading..."
 	}

ui/styles.go

@@ -3,7 +3,9 @@ package ui
 import "github.com/charmbracelet/lipgloss"
 
 var (
-	view = lipgloss.NewStyle()
+	view      = lipgloss.NewStyle()
+	BaseStyle = lipgloss.NewStyle()
+	SubtleStyle    = lipgloss.AdaptiveColor{Light: "#D9DCCF", Dark: "#383838"}
 
 	titleStyle = func() lipgloss.Style {
 		b := lipgloss.RoundedBorder()
@@ -18,9 +20,31 @@ var (
 	}()
 
 	SelecRow = func() lipgloss.Style {
-		b := view.Background(lipgloss.Color("#00B377"))
+		b := view.Background(lipgloss.Color("#888B7E"))
 		return b
 	}()
+
+	DialogBoxStyle = lipgloss.NewStyle().
+			Border(lipgloss.RoundedBorder()).
+			BorderForeground(lipgloss.Color("#b7cbbf")).
+			Padding(1, 2).
+			BorderTop(true).
+			BorderLeft(true).
+			BorderRight(true).
+			BorderBottom(true)
+
+	ButtonStyle = lipgloss.NewStyle().
+			Foreground(lipgloss.Color("#FFFFFF")).
+			Background(lipgloss.Color("#888B7E")).
+			Padding(0, 3).
+			MarginTop(1).
+			MarginRight(2)
+
+	ActiveButtonStyle = ButtonStyle.Copy().
+				Foreground(lipgloss.Color("#FFFFFF")).
+				Background(lipgloss.AdaptiveColor{Light: "#b7cbbf", Dark: "#b7cbbf"}).
+				MarginRight(2).
+				Underline(true)
 )
 
 func Max(a, b int) int {

ui/sync.go

@@ -0,0 +1,62 @@
+package ui
+
+import (
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+)
+
+func syncUpdate(msg tea.Msg, m ModelHome) (*ModelHome, tea.Cmd) {
+	var cmd tea.Cmd
+
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		switch msg.String() {
+		case "left":
+			m.home.ActiveSyncScreen = true
+			m.home.Viewport.SetContent(syncView(m))
+			return &m, cmd
+		case "right":
+			m.home.ActiveSyncScreen = false
+			m.home.Viewport.SetContent(syncView(m))
+			return &m, cmd
+		case "enter":
+			m.home.StatusSyncScreen = false
+			m.home.Viewport.SetContent(m.GetDataView())
+			return &m, cmd
+		}
+	case tea.WindowSizeMsg:
+		m.home.Viewport.Width = msg.Width
+		m.home.Viewport.Height = msg.Height
+		m.home.Viewport.SetContent(syncView(m))
+	}
+	return &m, cmd
+}
+
+func syncView(m ModelHome) string {
+	var okButton, cancelButton string
+
+	if m.home.ActiveSyncScreen {
+		okButton = ActiveButtonStyle.Render("Yes")
+		cancelButton = ButtonStyle.Render("No, take me back")
+	} else {
+		okButton = ButtonStyle.Render("Yes")
+		cancelButton = ActiveButtonStyle.Render("No, take me back")
+	}
+
+	question := lipgloss.NewStyle().
+		Width(m.home.Viewport.Width - 50).
+		Align(lipgloss.Center).
+		Render("Are you sure you want to sync")
+	buttons := lipgloss.JoinHorizontal(lipgloss.Top, okButton, cancelButton)
+	ui := lipgloss.JoinVertical(lipgloss.Center, question, buttons)
+
+	dialog := lipgloss.Place(
+		(m.home.Viewport.Width - 50),
+		(m.home.Viewport.Height - 50),
+		lipgloss.Left, lipgloss.Center,
+		DialogBoxStyle.Render(ui),
+		lipgloss.WithWhitespaceChars(" "),
+		lipgloss.WithWhitespaceForeground(SubtleStyle),
+	)
+	return BaseStyle.PaddingLeft(20).PaddingTop((m.home.Viewport.Height / 2)).Render(dialog + "\n\n")
+}