Add achievement page to user's public profile

Signed-off-by: limepotato <limepot@protonmail.ch>

locales/en-US.yml

@@ -2330,6 +2330,7 @@ _notification:
     groupInvited: "Group invitations"
     app: "Notifications from linked apps"
     bite: "Bites"
+    achievementEarned: "Achievement get!"
   _actions:
     followBack: "followed you back"
     reply: "Reply"

locales/ja-JP.yml

@@ -2075,6 +2075,7 @@ _notification:
     followRequestAccepted: "フォローが受理された"
     groupInvited: "グループに招待された"
     app: "連携アプリからの通知"
+    achievementEarned: "実績を獲得"
   _actions:
     followBack: "フォローバック"
     reply: "返信"

packages/client/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 iceshrimp from 'iceshrimp-js';
+import MkAchievements from '@/components/MkAchievements.vue';
+import { i18n } from '@/i18n';
+import { claimAchievement } from '@/scripts/achievements';
+import { $i } from '@/account';
+
+const props = defineProps<{
+	user: iceshrimp.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>

packages/client/src/pages/user/index.vue

@@ -16,6 +16,7 @@
 						:user="user"
 						@refresh="fetchUser()"
 					/>
+					<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" />
@@ -43,6 +44,7 @@ import { i18n } from "@/i18n";
 import { $i } from "@/account";
 
 const XHome = defineAsyncComponent(() => import("./home.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"));
@@ -90,6 +92,11 @@ const headerTabs = $computed(() =>
 					title: i18n.ts.overview,
 					icon: "ph-user ph-bold ph-lg",
 				},
+				...(user.host == null ? [{
+					key: 'achievements',
+					title: i18n.ts.achievements,
+					icon: 'ph-medal-military ph-bold ph-lg',
+				}] : []),
 				...(($i && $i.id === user.id) || user.publicReactions
 					? [
 							{