From 4ecbef361b79c34c913b4444c26365a58b9c9aea Mon Sep 17 00:00:00 2001
From: sadegh <sa.rohani72@gmail.com>
Date: Tue, 9 Jun 2026 19:21:59 +0330
Subject: [PATCH] feat(board): show card count next to the list title

Display the number of cards in each list as a small badge after the
list title in the stack header. The count reuses the existing
cardsByStack computed, so it follows the archived/active filter and
stays reactive as cards are added, moved or removed. The badge does not
shrink, keeping it visible when a long title is truncated.

Signed-off-by: sadegh <sa.rohani72@gmail.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/board/Stack.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index b208dccc8..0531548e6 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -15,6 +15,7 @@
 					<CheckCircleOutline v-if="isDoneColumn"
 						class="stack__done-icon"
 						decorative />
+					<span class="stack__card-count">{{ cardsByStack.length }}</span>
 				</h3>
 				<h3 v-else-if="!editing"
 					tabindex="0"
@@ -27,6 +28,7 @@
 					<CheckCircleOutline v-if="isDoneColumn"
 						class="stack__done-icon"
 						decorative />
+					<span class="stack__card-count">{{ cardsByStack.length }}</span>
 				</h3>
 				<form v-else-if="editing"
 					v-click-outside="cancelEdit"
@@ -475,6 +477,18 @@ export default {
 			}
 		}
 
+		.stack__card-count {
+			flex-shrink: 0;
+			margin-inline-start: 6px;
+			padding: 0 8px;
+			border-radius: var(--border-radius-pill, 16px);
+			background-color: var(--color-background-darker);
+			color: var(--color-text-maxcontrast);
+			font-size: var(--default-font-size);
+			font-weight: normal;
+			line-height: 1.5;
+		}
+
 		form {
 			input {
 				font-weight: bold;