refactor: use separate component for birthday dates

Resolves: FoundKeyGang/FoundKey#90

locales/ar-SA.yml

@@ -254,6 +254,7 @@ remoteUserCaution: "هذه المعلومات قد لا تكون مكتملة ب
 activity: "النشاط"
 images: "الصور"
 birthday: "تاريخ الميلاد"
+yearsOld: "{age} سنة"
 registeredDate: "انضم في"
 location: "الموقع الجغرافي"
 theme: "المظهر"

locales/bn-BD.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "এই ব্যাবহারকারী রিমোট
 activity: "কার্যকলাপ"
 images: "ছবি"
 birthday: "জন্মদিন"
+yearsOld: "{age} বছর"
 registeredDate: "যোগদানের তারিখ"
 location: "অবস্থান"
 theme: "থিম"

locales/cs-CZ.yml

@@ -241,6 +241,7 @@ remoteUserCaution: "Tyto informace nemusí být aktuální jelikož uživatel je
 activity: "Aktivita"
 images: "Obrázky"
 birthday: "Datum narození"
+yearsOld: "{age} let"
 registeredDate: "Datum registrace"
 location: "Lokace"
 theme: "Vzhled"

locales/de-DE.yml

@@ -259,6 +259,7 @@ remoteUserCaution: "Diese Informationen sind möglicherweise unvollständig, da
 activity: "Aktivität"
 images: "Bilder"
 birthday: "Geburtstag"
+yearsOld: "{age} Jahre alt"
 registeredDate: "Registrationsdatum"
 location: "Ort"
 theme: "Farbschema"

locales/en-US.yml

@@ -259,6 +259,7 @@ remoteUserCaution: "As this user is from a remote instance, the shown informatio
 activity: "Activity"
 images: "Images"
 birthday: "Birthday"
+yearsOld: "{age} years old"
 registeredDate: "Joined on"
 location: "Location"
 theme: "Themes"

locales/es-ES.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "Para el usuario remoto, la información está incompleta"
 activity: "Actividad"
 images: "Imágenes"
 birthday: "Fecha de nacimiento"
+yearsOld: "{age} años"
 registeredDate: "Fecha de registro"
 location: "Lugar"
 theme: "Tema"

locales/fr-FR.yml

@@ -256,6 +256,7 @@ remoteUserCaution: "Les informations de ce compte risqueraient d’être incompl
 activity: "Activité"
 images: "Images"
 birthday: "Date de naissance"
+yearsOld: "{age} ans"
 registeredDate: "Inscrit le"
 location: "Localisation"
 theme: "Thème"

locales/id-ID.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "Informasi ini mungkin tidak mutakhir, karena pengguna ini be
 activity: "Aktivitas"
 images: "Gambar"
 birthday: "Tanggal lahir"
+yearsOld: "{age} tahun"
 registeredDate: "Bergabung pada"
 location: "Lokasi"
 theme: "Tema"

locales/it-IT.yml

@@ -254,6 +254,7 @@ remoteUserCaution: "Può darsi che le informazioni siano incomplete perché ques
 activity: "Attività"
 images: "Immagini"
 birthday: "Compleanno"
+yearsOld: "{age}Anni"
 registeredDate: "Iscrizione a.."
 location: "Posizione"
 theme: "Tema"

locales/ja-JP.yml

@@ -259,6 +259,7 @@ remoteUserCaution: "リモートユーザーのため、情報が不完全です
 activity: "アクティビティ"
 images: "画像"
 birthday: "誕生日"
+yearsOld: "{age}歳"
 registeredDate: "登録日"
 location: "場所"
 theme: "テーマ"

locales/ja-KS.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "リモートユーザーやから、足りひん情報ある
 activity: "アクティビティ"
 images: "画像"
 birthday: "生まれた日"
+yearsOld: "{age}歳"
 registeredDate: "始めた日"
 location: "場所"
 theme: "テーマ"

locales/ko-KR.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "리모트 유저이기 때문에, 정보가 정확하지 않
 activity: "활동"
 images: "이미지"
 birthday: "생일"
+yearsOld: "{age}세"
 registeredDate: "등록일"
 location: "장소"
 theme: "테마"

locales/nl-NL.yml

@@ -244,6 +244,7 @@ remoteUserCaution: "Aangezien deze gebruiker van een externe server afkomstig is
 activity: "Activiteit"
 images: "Afbeeldingen"
 birthday: "Geboortedatum"
+yearsOld: "{age} jaar"
 registeredDate: "Inschrijvingsdatum"
 location: "Locatie"
 theme: "Thema's"

locales/pl-PL.yml

@@ -253,6 +253,7 @@ remoteUserCaution: "Te informacje mogą nie być aktualne, ponieważ użytkownik
 activity: "Aktywność"
 images: "Zdjęcia"
 birthday: "Data urodzenia"
+yearsOld: "{age} lat"
 registeredDate: "Zarejestrowano"
 location: "Lokalizacja"
 theme: "Motywy"

locales/ro-RO.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "Deoarece acest utilizator este dintr-o instanță externă,
 activity: "Activitate"
 images: "Imagini"
 birthday: "Zi de naștere"
+yearsOld: "{age} ani"
 registeredDate: "Data înregistrării"
 location: "Locație"
 theme: "Teme"

locales/ru-RU.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "Это пользователь с другого сайта
 activity: "Активность"
 images: "Изображения"
 birthday: "День рождения"
+yearsOld: "Возраст: {age}"
 registeredDate: "Дата регистрации"
 location: "Местоположение"
 theme: "Тема"

locales/sk-SK.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "Tieto informácie nemusia byť aktuálne, keďže používat
 activity: "Aktivita"
 images: "Obrázky"
 birthday: "Dátum narodenia"
+yearsOld: "{age} rokov"
 registeredDate: "Dátum registrácie"
 location: "Lokalita"
 theme: "Téma"

locales/uk-UA.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "Інформація може бути неповною, о
 activity: "Активність"
 images: "Зображення"
 birthday: "День народження"
+yearsOld: "{age} років"
 registeredDate: "Приєднався(лась)"
 location: "Локація"
 theme: "Тема"

locales/vi-VN.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "Vì người dùng này ở máy chủ khác, thông tin hi
 activity: "Hoạt động"
 images: "Hình ảnh"
 birthday: "Sinh nhật"
+yearsOld: "{age} tuổi"
 registeredDate: "Tham gia"
 location: "Đến từ"
 theme: "Chủ đề"

locales/zh-CN.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "由于此用户来自其它实例，显示的信息可能不
 activity: "活动"
 images: "图片"
 birthday: "生日"
+yearsOld: "{age}岁"
 registeredDate: "注册于"
 location: "位置"
 theme: "主题"

locales/zh-TW.yml

@@ -258,6 +258,7 @@ remoteUserCaution: "由於該使用者來自遠端實例，因此資訊可能非
 activity: "動態"
 images: "圖片"
 birthday: "生日"
+yearsOld: "{age}歲"
 registeredDate: "註冊日期"
 location: "位置"
 theme: "外觀主題"

packages/client/src/components/birthday-date.vue

@@ -0,0 +1,18 @@
+<template>
+<MkTime format="date" mode="absolute" :time="birthday" :utc="true"/> ({{ $t('yearsOld', { age }) }})
+</template>
+<script lang="ts" setup>
+import MkTime from '@/components/global/time.vue';
+
+const props = defineProps<{
+	birthday: Date | string;
+}>();
+
+const age = $computed(() => {
+	const now = new Date();
+	const birthday = (typeof props.birthday === 'string') ? new Date(props.birthday) : props.birthday;
+
+	return Math.floor((now.getTime() - birthday.getTime()) / 1000 / 31536000);
+});
+
+</script>

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

@@ -51,7 +51,7 @@
 						</dl>
 						<dl v-if="user.birthday" class="field">
 							<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ i18n.ts.birthday }}</dt>
-							<dd class="value"><MkTime format="date" mode="detail" :time="user.birthday" :utc="true"/></dd>
+							<dd class="value"><MkBirthdayDate :birthday="user.birthday"/></dd>
 						</dl>
 						<dl class="field">
 							<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ i18n.ts.registeredDate }}</dt>
@@ -112,6 +112,7 @@ import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
 import * as misskey from 'foundkey-js';
 import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/note.vue';
+import MkBirthdayDate from '@/components/birthday-date.vue';
 import MkFollowButton from '@/components/follow-button.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
 import MkInfo from '@/components/ui/info.vue';