Showing scene and channel count on entity page and tile.

assets/components/filters/filter-bar.vue

@@ -1,15 +1,20 @@
 <template>
 	<div class="filter-bar noselect">
 		<div class="sort">
-			<router-link
+			<RouterLink
 				v-for="section in ranges"
 				:key="section"
 				:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
 				:class="{ active: $route.name === section || range === section }"
 				class="range range-button"
-			>{{ section }}</router-link>
+			>{{ section }}</RouterLink>
 		</div>
 
+		<span
+			v-if="itemsTotal && showTotal"
+			class="total"
+		>{{ itemsTotal }} <template v-if="itemsTotal === 1">scene</template><template v-else>scenes</template></span>
+
 		<div class="filters">
 			<ActorFilter
 				class="filters-filter"
@@ -78,6 +83,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showTotal: {
+			type: Boolean,
+			default: true,
+		},
 		itemsTotal: {
 			type: Number,
 			default: 0,
@@ -240,6 +249,10 @@ export default {
 	.filters-filter:last-child .filter {
 		padding: .5rem 0 .5rem .5rem;
 	}
+
+	.total {
+		display: none;
+	}
 }
 </style>
 
@@ -351,4 +364,11 @@ export default {
 		margin: 0 1rem 0 0;
 	}
 }
+
+.total {
+	flex-shrink: 0;
+	padding: 0 1rem;
+	color: var(--shadow);
+	font-size: .8rem;
+}
 </style>