feat(board): display number of items in column

Author: eliandoran

apps/client/src/widgets/collections/board/column.tsx

@@ -104,6 +104,8 @@ export default function Column({
                 {!isEditing ? (
                     <>
                         <span className="title">{column}</span>
+                        <span className="counter-badge">{columnItems?.length ?? 0}</span>
+                        <div className="spacer" />
                         <span
                             className="edit-icon icon bx bx-edit-alt"
                             title={t("board_view.edit-column-title")}

apps/client/src/widgets/collections/board/index.css

@@ -53,7 +53,16 @@
   align-items: center;
 }
 
-.board-view-container .board-column h3 > .title {
+.board-view-container .board-column h3 .counter-badge {
+  background-color: var(--muted-text-color);
+  color: var(--main-background-color);
+  border-radius: 12px;
+  padding: 0.1em 0.6em;
+  font-size: 0.75em;
+  margin-inline-start: 0.5em;
+}
+
+.board-view-container .board-column h3 > .spacer {
   flex-grow: 1;
 }