wip

6 files changed, 29 insertions, 12 deletions

diff --git a/src/client/components/abuse-report-window.vue b/src/client/components/abuse-report-window.vue
index 1d87cb1802..c550e1e85d 100644
--- a/src/client/components/abuse-report-window.vue
+++ b/src/client/components/abuse-report-window.vue
@@ -2,11 +2,11 @@
 <XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="$emit('closed')">
 	<template #header>
 		<Fa :icon="faExclamationCircle" style="margin-right: 0.5em;"/>
-		<i18n-t keypath="reportAbuseOf" tag="span">
+		<I18n src="reportAbuseOf" tag="span">
 			<template #name>
 				<b><MkAcct :user="user"/></b>
 			</template>
-		</i18n-t>
+		</I18n>
 	</template>
 	<div class="dpvffvvy">
 		<div class="_section">
diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue
index 41be1c296d..241fbe4f68 100644
--- a/src/client/components/channel-preview.vue
+++ b/src/client/components/channel-preview.vue
@@ -6,19 +6,19 @@
 		<div class="status">
 			<div>
 				<Fa :icon="faUsers" fixed-width/>
-				<i18n-t keypath="_channel.usersCount" tag="span" style="margin-left: 4px;">
+				<I18n src="_channel.usersCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.usersCount }}</b>
 					</template>
-				</i18n-t>
+				</I18n>
 			</div>
 			<div>
 				<Fa :icon="faPencilAlt" fixed-width/>
-				<i18n-t keypath="_channel.notesCount" tag="span" style="margin-left: 4px;">
+				<I18n src="_channel.notesCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.notesCount }}</b>
 					</template>
-				</i18n-t>
+				</I18n>
 			</div>
 		</div>
 	</div>
diff --git a/src/client/components/global/i18n.ts b/src/client/components/global/i18n.ts
new file mode 100644
index 0000000000..603c07ca97
--- /dev/null
+++ b/src/client/components/global/i18n.ts
@@ -0,0 +1,15 @@
+import { h, Fragment, defineComponent } from 'vue';
+import type { SetupContext, VNodeChild, RenderFunction } from 'vue';
+
+export default defineComponent({
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+	},
+	render() {
+		// TODO
+		return h('span', this.src);
+	}
+});
diff --git a/src/client/components/index.ts b/src/client/components/index.ts
index cccb5d766a..0630ed3d8c 100644
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -9,6 +9,7 @@ import userName from './global/user-name.vue';
 import ellipsis from './global/ellipsis.vue';
 import time from './global/time.vue';
 import url from './global/url.vue';
+import i18n from './global/i18n';
 import loading from './global/loading.vue';
 import error from './global/error.vue';
 
@@ -24,4 +25,5 @@ export default function(app: App) {
 	app.component('MkUrl', url);
 	app.component('MkLoading', loading);
 	app.component('MkError', error);
+	app.component('I18n', i18n);
 }
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 04696b7cfa..6d5750451e 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -16,13 +16,13 @@
 	<div class="renote" v-if="isRenote">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<Fa :icon="faRetweet"/>
-		<i18n-t keypath="renotedBy" tag="span">
+		<I18n src="renotedBy" tag="span">
 			<template #user>
 				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
 					<MkUserName :user="note.user"/>
 				</MkA>
 			</template>
-		</i18n-t>
+		</I18n>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
 				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
@@ -90,13 +90,13 @@
 	<XSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
 <div v-else class="_panel muted" @click="muted = false">
-	<i18n-t keypath="userSaysSomething" tag="small">
+	<I18n src="userSaysSomething" tag="small">
 		<template #name>
 			<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
 				<MkUserName :user="appearNote.user"/>
 			</MkA>
 		</template>
-	</i18n-t>
+	</I18n>
 </div>
 </template>
 
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index ec631c9429..5378ec38f4 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -38,9 +38,9 @@
 		</MkInput>
 		<label v-if="meta.tosUrl" class="tou">
 			<input type="checkbox" v-model="ToSAgreement">
-			<i18n-t keypath="agreeTo">
+			<I18n src="agreeTo">
 				<a :href="meta.tosUrl" class="_link" target="_blank">{{ $t('tos') }}</a>
-			</i18n-t>
+			</I18n>
 		</label>
 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
 		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>