Refined styling and moved text strings to strings.go

Author: eretjohannes

tui/internal/constants/strings.go

@@ -124,6 +124,13 @@ const (
 	WelcomeCTA      = "> ENTER <"
 )
 
+// Update notice (welcome view)
+const (
+	UpdateNoticeFormat   = "Update available: %s (current: %s)"
+	UpdateNoticeHintCopy = "Press c to copy update command"
+	UpdateNoticeCopied   = "Copied to clipboard!"
+)
+
 // Auth view
 const (
 	AuthOpeningBrowser  = "Opening browser for Skene authentication"
@@ -222,6 +229,7 @@ const (
 	HelpKeyG         = "g"
 	HelpKeyM         = "m"
 	HelpKeyR         = "r"
+	HelpKeyC         = "c"
 )
 
 // Help descriptions
@@ -265,4 +273,5 @@ const (
 	HelpDescToggleOption     = "toggle option"
 	HelpDescOpenFolder       = "open folder"
 	HelpDescTabs             = "tabs"
+	HelpDescCopyUpdateCmd    = "copy update cmd"
 )

tui/internal/tui/styles/styles.go

@@ -174,6 +174,12 @@ var FooterHelp lipgloss.Style
 // Spinner style
 var Spinner lipgloss.Style
 
+// UpdateNotice style — framed box for update + hint
+var UpdateNotice lipgloss.Style
+
+// UpdateNoticeText style — main update message (white)
+var UpdateNoticeText lipgloss.Style
+
 // rebuildStyles constructs all lipgloss styles from the current color
 // variables. Called by Init() after colors have been set.
 func rebuildStyles() {
@@ -290,6 +296,15 @@ func rebuildStyles() {
 
 	// Spinner style
 	Spinner = lipgloss.NewStyle().Foreground(Amber)
+
+	// UpdateNotice — bordered box for update + hint (no bg; centered text)
+	UpdateNotice = lipgloss.NewStyle().
+		Border(lipgloss.RoundedBorder()).
+		BorderForeground(MidGray).
+		Padding(1, 1).
+		Align(lipgloss.Center).
+		MarginTop(1)
+	UpdateNoticeText = lipgloss.NewStyle().Foreground(White)
 }
 
 // init sets up the default dark-theme styles at package load time.

tui/internal/tui/views/welcome.go

@@ -107,16 +107,23 @@ func (v *WelcomeView) Render() string {
 	// Version info
 	version := center.Render(styles.Muted.Render(constants.Version + " • " + constants.Repository))
 
-	// Update notification
+	// Update notification — bordered block with update + hint
 	var updateNotice string
 	if v.newVersion != "" {
-		notice := fmt.Sprintf("Update available: %s (current: %s)", v.newVersion, constants.Version)
-		updateNotice = center.Render(styles.Accent.Render(notice))
+		notice := fmt.Sprintf(constants.UpdateNoticeFormat, v.newVersion, constants.Version)
+		hintRaw := constants.UpdateNoticeHintCopy
 		if v.copied {
-			updateNotice += "\n" + center.Render(styles.Muted.Render("Copied to clipboard!"))
-		} else {
-			updateNotice += "\n" + center.Render(styles.Muted.Render("Press c to copy update command"))
+			hintRaw = constants.UpdateNoticeCopied
 		}
+		hint := styles.Muted.Render(hintRaw)
+		blockWidth := lipgloss.Width(notice)
+		if w := lipgloss.Width(hintRaw); w > blockWidth {
+			blockWidth = w
+		}
+		blockWidth += 4 // padding
+		content := styles.UpdateNoticeText.Render(notice) + "\n" + hint
+		block := styles.UpdateNotice.Width(blockWidth).Render(content)
+		updateNotice = center.Render(block)
 	}
 
 	// Footer help
@@ -125,7 +132,7 @@ func (v *WelcomeView) Render() string {
 		{Key: constants.HelpKeyCtrlC, Desc: constants.HelpDescQuit},
 	}
 	if v.newVersion != "" {
-		helpItems = append(helpItems, components.HelpItem{Key: "c", Desc: "copy update cmd"})
+		helpItems = append(helpItems, components.HelpItem{Key: constants.HelpKeyC, Desc: constants.HelpDescCopyUpdateCmd})
 	}
 	footer := components.FooterHelp(helpItems)
 
@@ -173,7 +180,7 @@ func (v *WelcomeView) GetHelpItems() []components.HelpItem {
 		{Key: constants.HelpKeyCtrlC, Desc: constants.HelpDescQuit},
 	}
 	if v.newVersion != "" {
-		items = append(items, components.HelpItem{Key: "c", Desc: "copy update cmd"})
+		items = append(items, components.HelpItem{Key: constants.HelpKeyC, Desc: constants.HelpDescCopyUpdateCmd})
 	}
 	return items
 }