feat: modal

ui/pages/keys/cmds.go

@@ -7,12 +7,20 @@ import (
 
 type DeleteKey *api.ParticipationKey
 
+type DeleteFinished string
+
 func EmitDeleteKey(key *api.ParticipationKey) tea.Cmd {
 	return func() tea.Msg {
 		return DeleteKey(key)
 	}
 }
 
+func EmitKeyDeleted() tea.Cmd {
+	return func() tea.Msg {
+		return DeleteFinished("Key deleted")
+	}
+}
+
 // EmitKeySelected waits for and retrieves a new set of table rows from a given channel.
 func EmitKeySelected(key *api.ParticipationKey) tea.Cmd {
 	return func() tea.Msg {

ui/pages/keys/controller.go

@@ -23,15 +23,33 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (ViewModel, tea.Cmd) {
 	case internal.Account:
 		m.Address = msg.Address
 		m.table.SetRows(m.makeRows(m.Data))
+	case DeleteFinished:
+		m.SelectedKeyToDelete = nil
+		m.DeleteLoading = false
 	case tea.KeyMsg:
 		switch msg.String() {
 		case "enter":
 			return m, EmitKeySelected(m.SelectedKey())
 		case "g":
 			// TODO: navigation
-
 		case "d":
-			return m, EmitDeleteKey(m.SelectedKey())
+			if m.SelectedKeyToDelete == nil {
+				m.SelectedKeyToDelete = m.SelectedKey()
+			} else {
+				m.SelectedKeyToDelete = nil
+			}
+			return m, nil
+		case "y": // "Yes do delete" option in the delete confirmation modal
+			if m.SelectedKeyToDelete != nil {
+				m.DeleteLoading = true // show loading spinner
+				return m, EmitDeleteKey(m.SelectedKeyToDelete)
+			}
+			return m, nil
+		case "n": // "do NOT delete" option in the delete confirmation modal
+			if m.SelectedKeyToDelete != nil {
+				m.SelectedKeyToDelete = nil
+			}
+			return m, nil
 		case "ctrl+c":
 			return m, tea.Quit
 		}

ui/pages/keys/model.go

@@ -17,6 +17,10 @@ type ViewModel struct {
 	Width   int
 	Height  int
 
+	SelectedKeyToDelete *api.ParticipationKey
+
+	DeleteLoading bool
+
 	table    table.Model
 	controls controls.Model
 }

ui/pages/keys/view.go

@@ -1,10 +1,45 @@
 package keys
 
 import (
+	"fmt"
+
+	"github.com/algorandfoundation/hack-tui/api"
 	"github.com/algorandfoundation/hack-tui/ui/pages"
+	"github.com/charmbracelet/bubbles/spinner"
 	"github.com/charmbracelet/lipgloss"
 )
 
 func (m ViewModel) View() string {
-	return lipgloss.JoinVertical(lipgloss.Center, pages.Padding1(m.table.View()), m.controls.View())
+	if m.SelectedKeyToDelete != nil {
+		return lipgloss.JoinVertical(
+			lipgloss.Center,
+			renderDeleteConfirmationModal(m.SelectedKeyToDelete, m.DeleteLoading),
+			m.controls.View(),
+		)
+	}
+	return lipgloss.JoinVertical(
+		lipgloss.Center,
+		pages.Padding1(m.table.View()),
+		m.controls.View(),
+	)
+}
+
+func renderDeleteConfirmationModal(partKey *api.ParticipationKey, deleteLoading bool) string {
+	modalStyle := lipgloss.NewStyle().
+		Width(60).
+		Height(7).
+		Align(lipgloss.Center).
+		Border(lipgloss.RoundedBorder()).
+		Padding(1, 2)
+
+	var modalContent string
+	if deleteLoading {
+		s := spinner.New()
+		s.Spinner = spinner.Dot
+		modalContent = fmt.Sprintf("Deleting key...\n%s", s.View())
+	} else {
+		modalContent = fmt.Sprintf("Are you sure you want to delete this key from your node?\nParticipation Key: %v\nAccount Address: %v\nPress either y (yes) or n (no).", partKey.Id, partKey.Address)
+	}
+
+	return modalStyle.Render(modalContent)
 }

ui/viewport.go

@@ -48,15 +48,13 @@ type ViewportViewModel struct {
 	errorPage ErrorViewModel
 }
 
-type DeleteFinished string
-
 func DeleteKey(client *api.ClientWithResponses, key keys.DeleteKey) tea.Cmd {
 	return func() tea.Msg {
 		err := internal.DeletePartKey(context.Background(), client, key.Id)
 		if err != nil {
-			return DeleteFinished(err.Error())
+			return keys.DeleteFinished(err.Error())
 		}
-		return DeleteFinished("Key deleted")
+		return keys.DeleteFinished("Key deleted")
 	}
 }
 
@@ -96,8 +94,8 @@ func (m ViewportViewModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		m.page = KeysPage
 	case keys.DeleteKey:
 		return m, DeleteKey(m.client, msg)
-	case DeleteFinished:
-	//	TODO
+	case keys.DeleteFinished:
+		return m, keys.EmitKeyDeleted()
 	case tea.KeyMsg:
 		switch msg.String() {
 		// Tab Backwards
@@ -128,12 +126,12 @@ func (m ViewportViewModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 				// Navigate to the transaction page
 				return m, keys.EmitKeySelected(m.keysPage.SelectedKey())
 			}
+		case "a":
+			m.page = AccountsPage
 		case "g":
 			m.generatePage.Inputs[0].SetValue(m.accountsPage.SelectedAccount().Address)
 			m.page = GeneratePage
 			return m, nil
-		case "a":
-			m.page = AccountsPage
 		case "k":
 			m.page = KeysPage
 			return m, accounts.EmitAccountSelected(m.accountsPage.SelectedAccount())