Abbreviating counts in filters.

components/filters/actor.vue

@@ -36,14 +36,17 @@
 
 				<span
 					v-if="actor.count"
+					:title="actor.count"
 					class="filter-count"
-				>{{ actor.count }}</span>
+				>{{ abbreviateNumber(actor.count) }}</span>
 			</span>
 		</span>
 	</li>
 </template>
 
 <script setup>
+import abbreviateNumber from '#/src/utils/abbreviate-number.js';
+
 import Gender from '#/components/actors/gender.vue';
 
 defineProps({

components/filters/channels.vue

@@ -63,8 +63,9 @@
 						<span class="filter-details">
 							<span
 								v-if="entity.count"
+								:title="entity.count"
 								class="filter-count"
-							>{{ entity.count }}</span>
+							>{{ abbreviateNumber(entity.count) }}</span>
 
 							<Icon
 								v-if="filters.entity?.id === entity.id"
@@ -83,6 +84,8 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 
+import abbreviateNumber from '#/src/utils/abbreviate-number.js';
+
 const props = defineProps({
 	filters: {
 		type: Object,

components/filters/tags.vue

@@ -86,8 +86,9 @@
 						<span class="tag-details">
 							<span
 								v-if="tag.count"
+								:title="tag.count"
 								class="filter-count"
-							>{{ tag.count }}</span>
+							>{{ abbreviateNumber(tag.count) }}</span>
 						</span>
 					</span>
 				</li>
@@ -99,6 +100,8 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 
+import abbreviateNumber from '#/src/utils/abbreviate-number.js';
+
 const props = defineProps({
 	filters: {
 		type: Object,