Changed the sidebar to use badges for counts [#2581]

mcpierce · mcpierce · commit 3b242a67812c · 2026-02-08T09:39:29.000-05:00
diff --git a/comixed-webui/src/app/components/side-navigation/side-navigation.component.html b/comixed-webui/src/app/components/side-navigation/side-navigation.component.html
@@ -27,13 +27,14 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>local_library</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="totalComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       <span class="cx-align-left">
         {{ "navigation.option.all-comics" | translate }}
       </span>
-      <span class="cx-align-right">
-        ({{ totalComicBooks$ | async | number }})
-      </span>
     </mat-label>
   </button>
 }
@@ -45,13 +46,14 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>check_circle</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="selectedComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       <span class="cx-align-left">
         {{ "navigation.option.selected-comics" | translate }}
       </span>
-      <span class="cx-align-right">
-        ({{ selectedComicBooks$ | async | number }})
-      </span>
     </mat-label>
   </button>
 }
@@ -64,9 +66,12 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>incomplete_circle</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="unprocessedComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       {{ "navigation.option.unprocessed-comics" | translate }}
-      ({{ unprocessedComicBooks$ | async | number }})
     </mat-label>
   </button>
 }
@@ -78,9 +83,12 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>read_more</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="readComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       {{ "navigation.option.read-comics" | translate }}
-      ({{ readComicBooks$ | async | number }})
     </mat-label>
   </button>
 }
@@ -92,9 +100,12 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>cloud_download</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="unscrapedComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       {{ "navigation.option.unscraped-comics" | translate }}
-      ({{ unscrapedComicBooks$ | async | number }})
     </mat-label>
   </button>
 }
@@ -106,9 +117,12 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>cloud_download</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="changedComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       {{ "navigation.option.changed-comics" | translate }}
-      ({{ changedComicBooks$ | async | number }})
     </mat-label>
   </button>
 }
@@ -120,9 +134,12 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>delete_sweep</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="deletedComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       {{ "navigation.option.deleted-comics" | translate }}
-      ({{ deletedComicBooks$ | async | number }})
     </mat-label>
   </button>
 }
@@ -134,9 +151,12 @@ <h4 class="section-title">
     routerLinkActive="active-nav-button"
   >
     <mat-icon>dynamic_feed</mat-icon>
-    <mat-label class="cx-text-nowrap">
+    <mat-label
+      class="cx-text-nowrap"
+      [matBadge]="duplicateComicBooks$ | async | number"
+      matBadgePosition="after"
+    >
       {{ "navigation.option.duplicate-comics" | translate }}
-      ({{ duplicateComicBooks$ | async | number }})
     </mat-label>
   </button>
 }
diff --git a/comixed-webui/src/app/components/side-navigation/side-navigation.component.scss b/comixed-webui/src/app/components/side-navigation/side-navigation.component.scss
@@ -25,6 +25,7 @@
   mat-label {
     display: block !important;
     width: 100% !important;
+    padding-right: 10px;
   }
 }
 
diff --git a/comixed-webui/src/app/components/side-navigation/side-navigation.component.ts b/comixed-webui/src/app/components/side-navigation/side-navigation.component.ts
@@ -40,6 +40,7 @@ import { MatLabel } from '@angular/material/form-field';
 import { MatDivider } from '@angular/material/divider';
 import { AsyncPipe, DecimalPipe } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { MatBadge } from '@angular/material/badge';
 
 @Component({
   selector: 'cx-side-navigation',
@@ -54,7 +55,8 @@ import { TranslateModule } from '@ngx-translate/core';
     MatDivider,
     AsyncPipe,
     DecimalPipe,
-    TranslateModule
+    TranslateModule,
+    MatBadge
   ]
 })
 export class SideNavigationComponent implements OnDestroy {

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@`
`25`	`25`	`mat-label {`
`26`	`26`	`display: block !important;`
`27`	`27`	`width: 100% !important;`
	`28`	`+ padding-right: 10px;`
`28`	`29`	`}`
`29`	`30`	`}`
`30`	`31`