From b5a85fdf5fd601119476ae7c209419094964a5c2 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 30 Apr 2026 20:32:55 +0200
Subject: [PATCH] style: add shared count-badge style and update component
 usage Entire-Checkpoint: c2cea9c530e6

---
 apps/web/src/styles.scss                      | 22 +++++++++++++++++++
 .../category-view.component.html              |  4 ++--
 .../category-view.component.scss              | 18 +++++++--------
 .../content-rail-shell.component.html         |  2 +-
 .../content-rail-shell.component.scss         | 16 --------------
 .../lib/rails/dashboard-rail.component.html   |  2 +-
 .../lib/rails/dashboard-rail.component.scss   | 18 ---------------
 ...space-context-category-view.component.html |  6 ++---
 ...space-context-category-view.component.scss | 17 +++++++-------
 9 files changed, 46 insertions(+), 59 deletions(-)

diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index c55c0e60e..f1ec3dcfb 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -70,6 +70,28 @@
     }
 }
 
+// Shared count-badge pill. Section headers (dashboard rails, content rails)
+// and dense list rows (category sidebars) share a single visual treatment so
+// "count" reads consistently across the app. Theme-aware via --app-muted-color.
+.app-count-badge {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--app-muted-color, #8891a4);
+    font-variant-numeric: tabular-nums;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-muted-color, #8891a4) 18%,
+        transparent
+    );
+    letter-spacing: 0;
+}
+
 app-root.macos-platform .current-playlist {
     padding-top: 30px;
 }
diff --git a/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html
index cd7746e26..10dfcd771 100644
--- a/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html
+++ b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html
@@ -17,11 +17,11 @@
                     }}
                 </span>
                 @if (showCounts()) {
-                    <div class="nav-item-meta item-count">
+                    <div class="item-count app-count-badge">
                         {{ getItemCount(item) }}
                     </div>
                 } @else if ($any(item).count !== undefined) {
-                    <div class="nav-item-meta item-count">
+                    <div class="item-count app-count-badge">
                         {{ $any(item).count }}
                     </div>
                 }
diff --git a/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss
index dd702b554..6425c6145 100644
--- a/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss
@@ -13,17 +13,17 @@
 .category-item {
     cursor: pointer;
     width: auto;
-
-    .item-count {
-        opacity: 0.6;
-        font-size: 0.85em;
-        margin-left: 4px;
-    }
 }
 
-.category-item--selected .item-count {
-    color: var(--app-selection-color) !important;
-    opacity: 0.95;
+// Selected row: tint the badge surface with the selection accent. Text colour
+// is already swapped to --app-selection-color by the parent `.nav-item.selected
+// *` rule in nav-list.scss, so we only need to override the background here.
+.category-item--selected .item-count.app-count-badge {
+    background: color-mix(
+        in srgb,
+        var(--app-selection-color) 18%,
+        transparent
+    );
 }
 
 mat-card-content {
diff --git a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html
index 3e353d250..b168e07e9 100644
--- a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html
+++ b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html
@@ -3,7 +3,7 @@
         <h3 class="rail__title">
             <span class="rail__label">{{ label() }}</span>
             @if ((totalCount() ?? 0) > 0) {
-                <span class="rail__count" aria-hidden="true">{{
+                <span class="rail__count app-count-badge" aria-hidden="true">{{
                     totalCount()
                 }}</span>
             }
diff --git a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
index c419cf714..66bb5cffb 100644
--- a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
@@ -57,22 +57,6 @@
     color: var(--app-heading-color, #1a1d23);
 }
 
-.rail__count {
-    font-size: 0.78rem;
-    font-weight: 500;
-    line-height: 1;
-    color: var(--app-muted-color, #8891a4);
-    font-variant-numeric: tabular-nums;
-    padding: 2px 8px;
-    border-radius: 999px;
-    background: color-mix(
-        in srgb,
-        var(--app-muted-color, #8891a4) 18%,
-        transparent
-    );
-    letter-spacing: 0;
-}
-
 .rail__see-all {
     display: inline-flex;
     align-items: center;
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html
index 07878677b..cf93a9f76 100644
--- a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html
+++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html
@@ -3,7 +3,7 @@
         <h2 class="rail__title">
             <span class="rail__label">{{ label() }}</span>
             @if ((totalCount() ?? items().length) > 0) {
-                <span class="rail__count" aria-hidden="true">{{
+                <span class="rail__count app-count-badge" aria-hidden="true">{{
                     totalCount() ?? items().length
                 }}</span>
             }
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
index 07a073318..9b1d6de73 100644
--- a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
+++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
@@ -33,24 +33,6 @@
     color: var(--app-heading-color, #1a1d23);
 }
 
-// Muted count badge, tabular numerals for alignment, sits just after label.
-.rail__count {
-    font-size: 0.78rem;
-    font-weight: 500;
-    line-height: 1;
-    color: var(--app-muted-color, #8891a4);
-    font-variant-numeric: tabular-nums;
-    // Tiny capsule to read as a "count chip", not a number-in-text
-    padding: 2px 8px;
-    border-radius: 999px;
-    background: color-mix(
-        in srgb,
-        var(--app-muted-color, #8891a4) 18%,
-        transparent
-    );
-    letter-spacing: 0;
-}
-
 .rail__see-all {
     display: inline-flex;
     align-items: center;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html
index f005049a8..bb70806f8 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html
@@ -30,16 +30,16 @@
                 @if (showCounts()) {
                     @if (countDisplayMode() === 'loading') {
                         <div
-                            class="nav-item-meta item-count item-count--loading"
+                            class="item-count item-count--loading"
                             aria-hidden="true"
                         ></div>
                     } @else {
-                        <div class="nav-item-meta item-count">
+                        <div class="item-count app-count-badge">
                             {{ getItemCount(item) }}
                         </div>
                     }
                 } @else if ($any(item).count !== undefined) {
-                    <div class="nav-item-meta item-count">
+                    <div class="item-count app-count-badge">
                         {{ $any(item).count }}
                     </div>
                 }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
index e75a1485b..01c956545 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
@@ -35,12 +35,6 @@
     font: inherit;
     cursor: pointer;
     width: auto;
-
-    .item-count {
-        opacity: 0.6;
-        font-size: 0.85em;
-        margin-left: 4px;
-    }
 }
 
 .category-item--disabled,
@@ -82,9 +76,14 @@
     }
 }
 
-.category-item--selected .item-count {
-    color: var(--app-selection-color) !important;
-    opacity: 0.95;
+// Selected row: tint badge surface with selection accent. Text colour comes
+// from the parent `.nav-item.selected *` rule in nav-list.scss.
+.category-item--selected .item-count.app-count-badge {
+    background: color-mix(
+        in srgb,
+        var(--app-selection-color) 18%,
+        transparent
+    );
 }
 
 mat-card-content {