From b64daa5a58c9c458d7e8e60258d844ccabd4e4aa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 31 Dec 2022 20:36:49 +0900
Subject: [PATCH] :art:

---
 packages/frontend/package.json                |  1 +
 packages/frontend/src/components/MkNumber.vue | 23 +++++++++++++++++
 packages/frontend/src/pages/about.vue         |  2 +-
 packages/frontend/src/pages/admin/emojis.vue  |  2 +-
 packages/frontend/src/pages/admin/index.vue   |  2 +-
 .../src/pages/admin/overview.stats.vue        | 25 ++++++++++++++++---
 packages/frontend/src/ui/_common_/common.ts   |  2 +-
 yarn.lock                                     |  8 ++++++
 8 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 packages/frontend/src/components/MkNumber.vue

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 896400832a..f92ee44224 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -30,6 +30,7 @@
 		"date-fns": "2.29.3",
 		"escape-regexp": "0.0.1",
 		"eventemitter3": "5.0.0",
+		"gsap": "^3.11.4",
 		"idb-keyval": "6.2.0",
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
diff --git a/packages/frontend/src/components/MkNumber.vue b/packages/frontend/src/components/MkNumber.vue
new file mode 100644
index 0000000000..f54ec764f9
--- /dev/null
+++ b/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>
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 5091114c21..1d6a844fbd 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/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,
diff --git a/packages/frontend/src/pages/admin/emojis.vue b/packages/frontend/src/pages/admin/emojis.vue
index 6a4096d66f..4bd78a6a5f 100644
--- a/packages/frontend/src/pages/admin/emojis.vue
+++ b/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>
 
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 4dbb6ce74f..406677229f 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/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',
diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue
index 9012234c2e..dbbe4ab126 100644
--- a/packages/frontend/src/pages/admin/overview.stats.vue
+++ b/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;
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index 1c4e4b9a6e..dfdf324bcf 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/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',
diff --git a/yarn.lock b/yarn.lock
index 9100fe385c..3a17e51c83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8087,6 +8087,7 @@ __metadata:
     eslint-plugin-import: 2.26.0
     eslint-plugin-vue: 9.8.0
     eventemitter3: 5.0.0
+    gsap: ^3.11.4
     idb-keyval: 6.2.0
     insert-text-at-cursor: 0.3.0
     is-file-animated: 1.0.2
@@ -8659,6 +8660,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gsap@npm:^3.11.4":
+  version: 3.11.4
+  resolution: "gsap@npm:3.11.4"
+  checksum: 1f8ef165c5bb35cdda785b31bb733357072e7efdc67297612b7c7b4b775e422d407bd91efad8a26bb07b686640d4f001d5f1c04abd0fe13c5a479dae1368a219
+  languageName: node
+  linkType: hard
+
 "gulp-cli@npm:^2.2.0":
   version: 2.3.0
   resolution: "gulp-cli@npm:2.3.0"