✨ Show commit type

Show whether the commit type is new or amend. This required reducing
the length of the summary box to fit this information after the
counter.

To help improve user experience, the summary counter was joined to the
summary text input.

internal/ui/header/header.go

@@ -181,7 +181,7 @@ func (m Model) Summary() string {
 }
 
 func (m Model) headerRow() string {
-	subject := lipgloss.JoinHorizontal(lipgloss.Top, m.emoji(), m.summary(), m.counter())
+	subject := lipgloss.JoinHorizontal(lipgloss.Top, m.emoji(), m.summary(), m.counter(), m.commitType())
 
 	if !m.Expand {
 		return lipgloss.NewStyle().Height(m.height).Render(subject)
@@ -221,6 +221,14 @@ func (m Model) counter() string {
 	return m.styles.counterBoundary.Render(fmt.Sprintf("%v%v%v", c, d, t))
 }
 
+func (m Model) commitType() string {
+	if m.state.Options.Amend {
+		return m.styles.commitTypeBoundary.Render(m.styles.commitTypeAmend.String())
+	}
+
+	return m.styles.commitTypeBoundary.Render(m.styles.commitTypeNew.String())
+}
+
 func ToModel(m tea.Model, c tea.Cmd) (Model, tea.Cmd) {
 	return m.(Model), c
 }
@@ -230,7 +238,7 @@ func summaryInput(state *commit.State) textinput.Model {
 	ti.Prompt = ""
 	ti.Placeholder = state.Placeholders.Summary
 	ti.CharLimit = 72
-	ti.Width = 59
+	ti.Width = 50
 
 	styleSummaryInput(&ti, state)
 

internal/ui/header/style.go

@@ -16,6 +16,9 @@ type Styles struct {
 	summaryInputTextStyle        lipgloss.Style
 	summaryInputPlaceholderStyle lipgloss.Style
 	summaryInputCursorStyle      lipgloss.Style
+	commitTypeBoundary           lipgloss.Style
+	commitTypeNew                lipgloss.Style
+	commitTypeAmend              lipgloss.Style
 	spacer                       lipgloss.Style
 }
 
@@ -41,12 +44,11 @@ func defaultStyles(th theme.Theme) Styles {
 		BorderForeground(colour.EmojiBoundary)
 
 	s.summaryBoundary = lipgloss.NewStyle().
-		Width(61).
+		Width(53).
 		Height(1).
-		MarginRight(1).
 		Align(lipgloss.Left, lipgloss.Center).
 		Padding(0, 0, 0, 1).
-		BorderStyle(lipgloss.NormalBorder()).
+		BorderStyle(rightJoinBorder()).
 		BorderForeground(colour.SummaryBoundary)
 
 	s.counterDivider = lipgloss.NewStyle().
@@ -57,9 +59,11 @@ func defaultStyles(th theme.Theme) Styles {
 		Foreground(colour.CounterLimit)
 
 	s.counterBoundary = lipgloss.NewStyle().
-		Width(5).
-		Height(3).
-		Align(lipgloss.Right, lipgloss.Center)
+		Width(7).
+		Height(1).
+		PaddingRight(1).
+		Align(lipgloss.Right, lipgloss.Center).
+		Border(lipgloss.NormalBorder(), true, true, true, false)
 
 	s.summaryInputPromptStyle = lipgloss.NewStyle().
 		Foreground(colour.SummaryInputPromptStyle)
@@ -73,6 +77,19 @@ func defaultStyles(th theme.Theme) Styles {
 	s.summaryInputCursorStyle = lipgloss.NewStyle().
 		Foreground(colour.SummaryInputCursorStyle)
 
+	s.commitTypeBoundary = lipgloss.NewStyle().
+		Width(5).
+		Align(lipgloss.Right).
+		Border(lipgloss.HiddenBorder())
+
+	s.commitTypeNew = lipgloss.NewStyle().
+		Foreground(colour.CommitTypeNew).
+		SetString("New")
+
+	s.commitTypeAmend = lipgloss.NewStyle().
+		Foreground(colour.CommitTypeAmend).
+		SetString("Amend")
+
 	s.spacer = lipgloss.NewStyle().
 		Height(1)
 
@@ -106,3 +123,16 @@ func counterStyle(i int, th theme.Theme) lipgloss.Style {
 		Foreground(clr).
 		Bold(bold)
 }
+
+func rightJoinBorder() lipgloss.Border {
+	return lipgloss.Border{
+		Top:         "─",
+		Bottom:      "─",
+		Left:        "│",
+		Right:       "│",
+		TopLeft:     "┌",
+		TopRight:    "┬",
+		BottomLeft:  "└",
+		BottomRight: "┴",
+	}
+}

internal/ui/header/testdata/amend_emoji.golden

@@ -1,3 +1,3 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │ 🎨 │ │                                                             │  3/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │ 🎨 │ │                                                     │  3/50 │ Amend
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/amend_emoji_summary.golden

@@ -1,3 +1,3 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │ 🎨 │ │ summary                                                     │ 10/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │ 🎨 │ │ summary                                             │ 10/50 │ Amend
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/amend_summary.golden

@@ -1,3 +1,3 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │ summary                                                     │  7/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │ summary                                             │  7/50 │ Amend
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/amend_summary_multiline.golden

@@ -1,3 +1,3 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │ summary                                                     │  7/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │ summary                                             │  7/50 │ Amend
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/blur_emoji.golden

@@ -1,3 +1,3 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/blur_summary.golden

@@ -1,3 +1,3 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/config_above.golden

@@ -11,6 +11,6 @@
     │                                                                          │
     └──────────────────────────────────────────────────────────────────────────┘
 
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/config_below.golden

@@ -1,6 +1,6 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘
 
     ┌──────────────────────────────────────────────────────────────────────────┐
     │? Choose an emoji:                                                      ● │

internal/ui/header/testdata/default.golden

@@ -1,3 +1,3 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘

internal/ui/header/testdata/emoji_empty_delete.golden

@@ -1,6 +1,6 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘
 
     ┌──────────────────────────────────────────────────────────────────────────┐
     │? Choose an emoji:                                                      ● │

internal/ui/header/testdata/expand.golden

@@ -1,6 +1,6 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘
 
     ┌──────────────────────────────────────────────────────────────────────────┐
     │? Choose an emoji:                                                      ● │

internal/ui/header/testdata/expand_emojis.golden

@@ -1,6 +1,6 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘
 
     ┌──────────────────────────────────────────────────────────────────────────┐
     │? Choose an emoji:                                                      ● │

internal/ui/header/testdata/expand_emojis_ttyd.golden

@@ -1,6 +1,6 @@
-    ┌────┐ ┌─────────────────────────────────────────────────────────────┐
-    │    │ │                                                             │  0/50
-    └────┘ └─────────────────────────────────────────────────────────────┘
+    ┌────┐ ┌─────────────────────────────────────────────────────┬───────┐
+    │    │ │                                                     │  0/50 │   New
+    └────┘ └─────────────────────────────────────────────────────┴───────┘
 
     ┌──────────────────────────────────────────────────────────────────────────┐
     │? Choose an emoji:                                                      ● │