feat(tui): swap tags and title column order in list view

hmans · hmans · commit fe58dba1d8dc · 2025-12-13T01:45:51.000+01:00
Move title before tags for better readability - the most important
information (bean title) now appears earlier in each row.

- Update RenderBeanRow in styles.go (TUI list)
- Update RenderTree in tree.go (CLI list)
diff --git a/.beans/beans-mrs4--tui-swap-order-of-tags-and-title-columns.md b/.beans/beans-mrs4--tui-swap-order-of-tags-and-title-columns.md
@@ -1,10 +1,10 @@
 ---
 title: 'TUI: swap order of tags and title columns!'
-status: todo
+status: completed
 type: feature
 priority: normal
 created_at: 2025-12-13T00:34:57Z
-updated_at: 2025-12-13T00:39:41Z
+updated_at: 2025-12-13T00:42:04Z
 parent: beans-xnp8
 ---
 
diff --git a/internal/ui/styles.go b/internal/ui/styles.go
@@ -499,7 +499,7 @@ func RenderBeanRow(id, status, typeName, title string, cfg BeanRowConfig) string
 	}
 
 	if cfg.ShowTags {
-		return cursor + idCol + typeCol + statusCol + tagsCol + prioritySymbol + titleStyled
+		return cursor + idCol + typeCol + statusCol + prioritySymbol + titleStyled + " " + tagsCol
 	}
 	return cursor + idCol + typeCol + statusCol + prioritySymbol + titleStyled
 }
diff --git a/internal/ui/tree.go b/internal/ui/tree.go
@@ -188,7 +188,7 @@ func RenderTree(nodes []*TreeNode, cfg *config.Config, maxIDWidth int, hasTags b
 	idStyle := lipgloss.NewStyle().Width(treeColWidth)
 	typeStyle := lipgloss.NewStyle().Width(12)
 	statusStyle := lipgloss.NewStyle().Width(14)
-	tagsStyle := lipgloss.NewStyle().Width(24)
+	titleStyle := lipgloss.NewStyle().Width(50)
 	headerCol := lipgloss.NewStyle().Foreground(ColorMuted)
 
 	// Header
@@ -199,18 +199,18 @@ func RenderTree(nodes []*TreeNode, cfg *config.Config, maxIDWidth int, hasTags b
 			idStyle.Render(headerCol.Render("ID")),
 			typeStyle.Render(headerCol.Render("TYPE")),
 			statusStyle.Render(headerCol.Render("STATUS")),
-			tagsStyle.Render(headerCol.Render("TAGS")),
-			headerCol.Render("TITLE"),
+			titleStyle.Render(headerCol.Render("TITLE")),
+			headerCol.Render("TAGS"),
 		)
-		dividerWidth = treeColWidth + 12 + 14 + 24 + 30
+		dividerWidth = treeColWidth + 12 + 14 + 50 + 24
 	} else {
 		header = lipgloss.JoinHorizontal(lipgloss.Top,
 			idStyle.Render(headerCol.Render("ID")),
 			typeStyle.Render(headerCol.Render("TYPE")),
 			statusStyle.Render(headerCol.Render("STATUS")),
 			headerCol.Render("TITLE"),
 		)
-		dividerWidth = treeColWidth + 12 + 14 + 30
+		dividerWidth = treeColWidth + 12 + 14 + 50
 	}
 	sb.WriteString(header)
 	sb.WriteString("\n")
@@ -266,7 +266,7 @@ func renderNode(sb *strings.Builder, node *TreeNode, depth int, isLast bool, cfg
 	// Column styles - fixed widths for alignment
 	typeStyle := lipgloss.NewStyle().Width(12)
 	statusStyle := lipgloss.NewStyle().Width(14)
-	tagsStyle := lipgloss.NewStyle().Width(24)
+	titleStyle := lipgloss.NewStyle().Width(50)
 
 	// Build indentation and connector
 	// depth 0: no indent, no connector
@@ -324,7 +324,12 @@ func renderNode(sb *strings.Builder, node *TreeNode, depth int, isLast bool, cfg
 	}
 
 	var titleText string
-	title := truncateString(b.Title, 50)
+	// Account for priority symbol width when truncating (symbol + space = 2 chars)
+	maxTitleWidth := 50
+	if prioritySymbol != "" {
+		maxTitleWidth -= 2
+	}
+	title := truncateString(b.Title, maxTitleWidth)
 	if node.Matched {
 		titleText = prioritySymbol + title
 	} else {
@@ -350,8 +355,8 @@ func renderNode(sb *strings.Builder, node *TreeNode, depth int, isLast bool, cfg
 			idCell,
 			typeStyle.Render(typeText),
 			statusStyle.Render(statusText),
-			tagsStyle.Render(tagsStr),
-			titleText,
+			titleStyle.Render(titleText),
+			tagsStr,
 		)
 	} else {
 		row = lipgloss.JoinHorizontal(lipgloss.Top,

Original file line number	Diff line number	Diff line change
`@@ -499,7 +499,7 @@ func RenderBeanRow(id, status, typeName, title string, cfg BeanRowConfig) string`
`499`	`499`	`}`
`500`	`500`
`501`	`501`	`if cfg.ShowTags {`
`502`		`- return cursor + idCol + typeCol + statusCol + tagsCol + prioritySymbol + titleStyled`
	`502`	`+ return cursor + idCol + typeCol + statusCol + prioritySymbol + titleStyled + " " + tagsCol`
`503`	`503`	`}`
`504`	`504`	`return cursor + idCol + typeCol + statusCol + prioritySymbol + titleStyled`
`505`	`505`	`}`