convert fs tree view to the elm view model

fstree/fstree.go

@@ -15,6 +15,7 @@ import (
 	"path/filepath"
 	"strings"
 
+	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 )
 
@@ -26,6 +27,27 @@ const (
 	FolderNode
 )
 
+// ==================== Message types ====================
+type Msg interface{}
+
+type MsgMoveUp struct{}
+type MsgMoveDown struct{}
+type MsgToggleExpand struct{}
+type MsgSelectAtLine struct {
+	Line int
+}
+type MsgCreateNode struct {
+	Parent   *FsNode
+	Name     string
+	NodeType FsNodeType
+}
+type MsgDeleteNode struct {
+	Node *FsNode
+}
+type MsgHover struct {
+	Line int
+}
+
 // ==================== FsNode definition ====================
 // a single node, Fs => deals with file system related info mostly
 // a name for example can be content derived as well
@@ -44,11 +66,46 @@ func (n *FsNode) FileName() string {
 
 // ==================== FsNode definition ====================
 type FsTree struct {
-	root     *FsNode
+	root      *FsNode
-	selected int
+	selected  int
-	lines    []*FsNode // flattened view of nodes
+	lines     []*FsNode // flattened view of nodes
+	hoverLine int       // for mouse hover highlighting
 }
 
+// ==================== Bubble Tea Interface Implementation ====================
+func (t *FsTree) Init() tea.Cmd {
+	return nil
+}
+
+func (t *FsTree) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch m := msg.(type) {
+	case MsgMoveUp:
+		_ = t.MoveUp()
+	case MsgMoveDown:
+		_ = t.MoveDown()
+	case MsgToggleExpand:
+		_ = t.ToggleSelectedExpand()
+	case MsgSelectAtLine:
+		_ = t.SelectNodeAtLine(m.Line)
+	case MsgCreateNode:
+		_ = t.CreateNode(m.Parent, m.Name, m.NodeType)
+	case MsgDeleteNode:
+		_ = t.DeleteNode(m.Node)
+	case MsgHover:
+		t.hoverLine = m.Line
+	}
+	return t, nil
+}
+
+func (t *FsTree) View() string {
+	builder := &strings.Builder{}
+	lineCounter := 0
+	t.renderNode(t.root, 0, builder, t.hoverLine, &lineCounter)
+	return builder.String()
+}
+
+// ==================== FsTree helper methods ====================
+
 func (t *FsTree) selectedNode() *FsNode {
 	if t.selected <= 0 || t.selected >= len(t.lines) {
 		return nil
@@ -182,11 +239,10 @@ func (t *FsTree) GetSelectedContent() (string, error) {
 	return string(contentBytes), nil
 }
 
+// Deprecated: Use View() instead as part of Bubble Tea model
 func (t *FsTree) Render(hoverLine int) string {
-	builder := &strings.Builder{}
+	t.hoverLine = hoverLine
-	lineCounter := 0
+	return t.View()
-	t.renderNode(t.root, 0, builder, hoverLine, &lineCounter)
-	return builder.String()
 }
 
 func (t *FsTree) renderNode(node *FsNode, depth int, builder *strings.Builder, hoverLine int, currentLine *int) {

main.go

@@ -2,11 +2,8 @@ package main
 
 import (
 	"fmt"
-	"mend/compositor"
 	fs "mend/fstree"
-	"mend/styles"
 	"os"
-	"time"
 
 	"github.com/charmbracelet/bubbles/spinner"
 	"github.com/charmbracelet/bubbles/viewport"
@@ -44,11 +41,9 @@ type model struct {
 	tree           *fs.FsTree
 	// spinner needs to be state as I need to update the spinner on
 	// each tick in update func
-	spinner    spinner.Model
+	spinner  spinner.Model
-	loading    bool
+	loading  bool
-	viewport   viewport.Model
+	viewport viewport.Model
-	hoverLine  int // track which line is being hovered
-	showDialog bool
 }
 
 // initial model state
@@ -65,8 +60,6 @@ func createModel() model {
 		spinner:        s,
 		loading:        true,
 		viewport:       viewport.New(0, 0),
-		hoverLine:      -1, // no hover initially
-		showDialog:     false,
 	}
 }
 
@@ -78,7 +71,6 @@ type treeLoadedMsg struct {
 }
 
 func loadTreeCmd() tea.Msg {
-	time.Sleep(1 * time.Second) // delay sim
 
 	cwd, err := os.Getwd()
 	if err != nil {
@@ -109,17 +101,18 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		m.spinner, cmd = m.spinner.Update(msg)
 		return m, cmd
 	case tea.MouseMsg:
-		// track hover for all mouse events within file tree
+		if m.tree != nil {
-		if msg.X < m.width {
+			// track hover for all mouse events within file tree
-			m.hoverLine = msg.Y
-		} else {
-			m.hoverLine = -1
-		}
-
-		if msg.Button == tea.MouseButtonLeft {
-			// within file tree
 			if msg.X < m.width {
-				if err := m.tree.SelectNodeAtLine(msg.Y); err == nil {
+				m.tree.Update(fs.MsgHover{Line: msg.Y})
+			} else {
+				m.tree.Update(fs.MsgHover{Line: -1})
+			}
+
+			if msg.Button == tea.MouseButtonLeft {
+				// within file tree
+				if msg.X < m.width {
+					m.tree.Update(fs.MsgSelectAtLine{Line: msg.Y})
 					content, err := m.tree.GetSelectedContent()
 					if err == nil {
 						m.viewport.SetContent(content)
@@ -131,30 +124,26 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		switch msg.String() {
 		case "q", "ctrl+c":
 			return m, tea.Quit
-		case "d", "D":
-			m.showDialog = !m.showDialog
-			return m, nil
-		}
-
-		switch msg.String() {
 		case "up", "k":
-			if err := m.tree.MoveUp(); err != nil {
+			if m.tree != nil {
-				fmt.Println("Error moving up:", err)
+				m.tree.Update(fs.MsgMoveUp{})
 			}
 		case "down", "j":
-			if err := m.tree.MoveDown(); err != nil {
+			if m.tree != nil {
-				fmt.Println("Error moving down:", err)
+				m.tree.Update(fs.MsgMoveDown{})
 			}
 		case "enter", " ":
-			if err := m.tree.ToggleSelectedExpand(); err != nil {
+			if m.tree != nil {
-				fmt.Println("Error toggling expand:", err)
+				m.tree.Update(fs.MsgToggleExpand{})
 			}
 		case "l", "L":
-			content, err := m.tree.GetSelectedContent()
+			if m.tree != nil {
-			if err != nil {
+				content, err := m.tree.GetSelectedContent()
-				fmt.Println("Error getting selected content:", err)
+				if err != nil {
-			} else {
+					fmt.Println("Error getting selected content:", err)
-				m.viewport.SetContent(content)
+				} else {
+					m.viewport.SetContent(content)
+				}
 			}
 		}
 	}
@@ -162,47 +151,11 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m model) View() string {
-	var baseUI string
 	if m.loading {
-		baseUI = fmt.Sprintf("%s Loading files...", m.spinner.View())
+		return fmt.Sprintf("%s Loading files...", m.spinner.View())
-	} else {
-		left := lipgloss.NewStyle().
-			Width(m.width).
-			Render(m.tree.Render(m.hoverLine))
-
-		right := lipgloss.NewStyle().
-			Width(m.terminalWidth - m.width - 1).
-			Height(m.terminalHeight).
-			Render(m.viewport.View())
-
-		divider := lipgloss.NewStyle().
-			Width(1).
-			Height(m.terminalHeight).
-			Background(styles.Primary).
-			Render("")
-
-		baseUI = lipgloss.JoinHorizontal(lipgloss.Top, left, divider, right)
 	}
 
-	// no compositing needed, optimised return
+	return m.tree.View()
-	if !m.showDialog {
-		return baseUI
-	}
-
-	// manual compositing
-	grid := compositor.NewGrid(m.terminalWidth, m.terminalHeight)
-	grid.Write(0, 0, baseUI)
-	dialog := lipgloss.NewStyle().
-		Border(lipgloss.RoundedBorder()).
-		BorderForeground(styles.Primary).
-		Background(lipgloss.Color("#222")).
-		Foreground(lipgloss.Color("#FFF")).
-		Padding(1, 2).
-		Align(lipgloss.Center).
-		Render("this is a sample dialog\npress d to close")
-
-	grid.Write(2, 2, dialog)
-	return grid.Render()
 }
 
 // =================== bubbletea ui fns ===================