🎨

packages/frontend/src/components/MkNumber.vue

@@ -0,0 +1,23 @@
+<template>
+<span>{{ number(tweened.number.toFixed(0)) }}</span>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from 'vue';
+import gsap from 'gsap';
+import number from '@/filters/number';
+
+const props = defineProps<{
+	value: number;
+}>();
+
+const tweened = reactive({
+	number: 0,
+});
+
+watch(() => props.value, (n) => {
+	gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 });
+}, {
+	immediate: true,
+});
+</script>

packages/frontend/src/pages/about.vue

@@ -119,7 +119,7 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'emojis',
 	title: i18n.ts.customEmojis,
-	icon: 'ti ti-mood-happy',
+	icon: 'ti ti-icons',
 }, {
 	key: 'federation',
 	title: i18n.ts.federation,

packages/frontend/src/pages/admin/emojis.vue

@@ -291,7 +291,7 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.customEmojis,
-	icon: 'ti ti-mood-happy',
+	icon: 'ti ti-icons',
 })));
 </script>
 

packages/frontend/src/pages/admin/index.vue

@@ -97,7 +97,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/users',
 		active: currentPage?.route.name === 'users',
 	}, {
-		icon: 'ti ti-mood-happy',
+		icon: 'ti ti-icons',
 		text: i18n.ts.customEmojis,
 		to: '/admin/emojis',
 		active: currentPage?.route.name === 'emojis',

packages/frontend/src/pages/admin/overview.stats.vue

@@ -7,7 +7,7 @@
 				<div class="icon"><i class="ti ti-users"></i></div>
 				<div class="body">
 					<div class="value">
-						{{ number(stats.originalUsersCount) }}
+						<MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/>
 						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
 					</div>
 					<div class="label">Users</div>
@@ -17,7 +17,7 @@
 				<div class="icon"><i class="ti ti-pencil"></i></div>
 				<div class="body">
 					<div class="value">
-						{{ number(stats.originalNotesCount) }}
+						<MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/>
 						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
 					</div>
 					<div class="label">Notes</div>
@@ -27,16 +27,25 @@
 				<div class="icon"><i class="ti ti-planet"></i></div>
 				<div class="body">
 					<div class="value">
-						{{ number(stats.instances) }}
+						<MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
 					</div>
 					<div class="label">Instances</div>
 				</div>
 			</div>
+			<div class="item _panel emojis">
+				<div class="icon"><i class="ti ti-icons"></i></div>
+				<div class="body">
+					<div class="value">
+						<MkNumber :value="$instance.emojis.length" style="margin-right: 0.5em;"/>
+					</div>
+					<div class="label">Custom emojis</div>
+				</div>
+			</div>
 			<div class="item _panel online">
 				<div class="icon"><i class="ti ti-access-point"></i></div>
 				<div class="body">
 					<div class="value">
-						{{ number(onlineUsersCount) }}
+						<MkNumber :value="stats.onlineUsersCount" style="margin-right: 0.5em;"/>
 					</div>
 					<div class="label">Online</div>
 				</div>
@@ -52,6 +61,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import MkNumber from '@/components/MkNumber.vue';
 import { i18n } from '@/i18n';
 
 let stats: any = $ref(null);
@@ -124,6 +134,13 @@ onMounted(async () => {
 				}
 			}
 
+			&.emojis {
+				> .icon {
+					background: #d5ba0026;
+						color: #dfc300;
+				}
+			}
+
 			&.online {
 				> .icon {
 					background: #8a00d126;

packages/frontend/src/ui/_common_/common.ts

@@ -15,7 +15,7 @@ export function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts.customEmojis,
-		icon: 'ti ti-mood-happy',
+		icon: 'ti ti-icons',
 		to: '/about#emojis',
 	}, {
 		type: 'link',