ユーザーの実績一覧を見れるように

3 files changed, 68 insertions, 6 deletions

diff --git a/packages/frontend/src/pages/achievements.vue b/packages/frontend/src/pages/achievements.vue
index 3cec8f630f..14b8520696 100644
--- a/packages/frontend/src/pages/achievements.vue
+++ b/packages/frontend/src/pages/achievements.vue
@@ -15,7 +15,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
 import { claimAchievement } from '@/scripts/achievements';
 
-let timer;
+let timer: number | null;
 
 function viewAchievements3min() {
 	claimAchievement('viewAchievements3min');
@@ -26,8 +26,10 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	window.clearTimeout(timer);
-	timer = null;
+	if (timer != null) {
+		window.clearTimeout(timer);
+		timer = null;
+	}
 });
 
 onActivated(() => {
@@ -35,8 +37,10 @@ onActivated(() => {
 });
 
 onDeactivated(() => {
-	window.clearTimeout(timer);
-	timer = null;
+	if (timer != null) {
+		window.clearTimeout(timer);
+		timer = null;
+	}
 });
 
 definePageMetadata({
diff --git a/packages/frontend/src/pages/user/achievements.vue b/packages/frontend/src/pages/user/achievements.vue
new file mode 100644
index 0000000000..eaea26db4a
--- /dev/null
+++ b/packages/frontend/src/pages/user/achievements.vue
@@ -0,0 +1,52 @@
+<template>
+<MkSpacer :content-max="1200">
+	<MkAchievements :user="user" :with-locked="false"/>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
+import * as misskey from 'misskey-js';
+import MkAchievements from '@/components/MkAchievements.vue';
+import { i18n } from '@/i18n';
+import { claimAchievement } from '@/scripts/achievements';
+import { $i } from '@/account';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+let timer: number | null;
+
+function viewAchievements3min() {
+	if ($i && (props.user.id === $i.id)) {
+		claimAchievement('viewAchievements3min');
+	}
+}
+
+onMounted(() => {
+	if (timer == null) timer = window.setTimeout(viewAchievements3min, 1000 * 60 * 3);
+});
+
+onUnmounted(() => {
+	if (timer != null) {
+		window.clearTimeout(timer);
+		timer = null;
+	}
+});
+
+onActivated(() => {
+	if (timer == null) timer = window.setTimeout(viewAchievements3min, 1000 * 60 * 3);
+});
+
+onDeactivated(() => {
+	if (timer != null) {
+		window.clearTimeout(timer);
+		timer = null;
+	}
+});
+</script>
+
+<style lang="scss" module>
+
+</style>
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 7abae1ea30..d63aa3a3a5 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -6,6 +6,7 @@
 			<div v-if="user">
 				<XHome v-if="tab === 'home'" :user="user"/>
 				<XActivity v-else-if="tab === 'activity'" :user="user"/>
+				<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
 				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
 				<XClips v-else-if="tab === 'clips'" :user="user"/>
 				<XPages v-else-if="tab === 'pages'" :user="user"/>
@@ -34,6 +35,7 @@ import { $i } from '@/account';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XActivity = defineAsyncComponent(() => import('./activity.vue'));
+const XAchievements = defineAsyncComponent(() => import('./achievements.vue'));
 const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
 const XClips = defineAsyncComponent(() => import('./clips.vue'));
 const XPages = defineAsyncComponent(() => import('./pages.vue'));
@@ -76,7 +78,11 @@ const headerTabs = $computed(() => user ? [{
 	key: 'activity',
 	title: i18n.ts.activity,
 	icon: 'ti ti-chart-line',
-}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
+}, ...(user.host == null ? [{
+	key: 'achievements',
+	title: i18n.ts.achievements,
+	icon: 'ti ti-military-award',
+}] : []), ...($i && ($i.id === user.id)) || user.publicReactions ? [{
 	key: 'reactions',
 	title: i18n.ts.reaction,
 	icon: 'ti ti-mood-happy',