From 82cd0ac057d4c0c9d9a461507c27d04ced6be8a9 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Thu, 28 Mar 2024 01:28:41 +0100
Subject: [PATCH] Abbreviating counts in filters.

---
 components/filters/actor.vue    | 5 ++++-
 components/filters/channels.vue | 5 ++++-
 components/filters/tags.vue     | 5 ++++-
 components/stashes/tile.vue     | 5 +----
 src/utils/abbreviate-number.js  | 3 +++
 5 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 src/utils/abbreviate-number.js

diff --git a/components/filters/actor.vue b/components/filters/actor.vue
index 047ab67..55ca9c0 100644
--- a/components/filters/actor.vue
+++ b/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({
diff --git a/components/filters/channels.vue b/components/filters/channels.vue
index 8e5d67e..63caa04 100644
--- a/components/filters/channels.vue
+++ b/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,
diff --git a/components/filters/tags.vue b/components/filters/tags.vue
index d62ad3c..61abe4c 100644
--- a/components/filters/tags.vue
+++ b/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,
diff --git a/components/stashes/tile.vue b/components/stashes/tile.vue
index 1e96052..1cbe0fd 100644
--- a/components/stashes/tile.vue
+++ b/components/stashes/tile.vue
@@ -126,6 +126,7 @@
 import { ref, inject } from 'vue';
 
 import { del, patch } from '#/src/api.js';
+import abbreviateNumber from '#/src/utils/abbreviate-number.js';
 
 import Dialog from '#/components/dialog/dialog.vue';
 
@@ -150,10 +151,6 @@ const stashNameInput = ref(null);
 const showRenameDialog = ref(false);
 const done = ref(true);
 
-function abbreviateNumber(number) {
-	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
-}
-
 async function setPublic(isPublic) {
 	if (done.value === false) {
 		return;
diff --git a/src/utils/abbreviate-number.js b/src/utils/abbreviate-number.js
new file mode 100644
index 0000000..48b21da
--- /dev/null
+++ b/src/utils/abbreviate-number.js
@@ -0,0 +1,3 @@
+export default function abbreviateNumber(number) {
+	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
+}