refactor(client): ✨

packages/client/src/components/MkNoteSub.vue

@@ -6,7 +6,7 @@
 			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
-					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis" />
+					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content">
@@ -19,7 +19,7 @@
 		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :depth="depth + 1"/>
 	</template>
 	<div v-else class="more">
-		<MkA class="text _link" :to="notePage(note)">{{ $ts.continueThread }} <i class="fas fa-angle-double-right"></i></MkA>
+		<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="fas fa-angle-double-right"></i></MkA>
 	</div>
 </div>
 </template>
@@ -27,11 +27,12 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import { notePage } from '@/filters/note';
 import XNoteHeader from './note-header.vue';
 import MkNoteSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
+import { notePage } from '@/filters/note';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	note: misskey.entities.Note;
@@ -49,7 +50,7 @@ let replies: misskey.entities.Note[] = $ref([]);
 if (props.detail) {
 	os.api('notes/children', {
 		noteId: props.note.id,
-		limit: 5
+		limit: 5,
 	}).then(res => {
 		replies = res;
 	});

packages/client/src/components/abuse-report.vue

@@ -9,7 +9,7 @@
 			</div>
 		</MkA>
 		<MkKeyValue class="_formBlock">
-			<template #key>{{ $ts.registeredDate }}</template>
+			<template #key>{{ i18n.ts.registeredDate }}</template>
 			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
 		</MkKeyValue>
 	</div>
@@ -18,18 +18,18 @@
 			<Mfm :text="report.comment"/>
 		</div>
 		<hr/>
-		<div>{{ $ts.reporter }}: <MkAcct :user="report.reporter"/></div>
+		<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
 		<div v-if="report.assignee">
-			{{ $ts.moderator }}:
+			{{ i18n.ts.moderator }}:
 			<MkAcct :user="report.assignee"/>
 		</div>
 		<div><MkTime :time="report.createdAt"/></div>
 		<div class="action">
 			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-				{{ $ts.forwardReport }}
+				{{ i18n.ts.forwardReport }}
-				<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
+				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
 			</MkSwitch>
-			<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
+			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
 		</div>
 	</div>
 </div>
@@ -41,6 +41,7 @@ import MkSwitch from '@/components/form/switch.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import { acct, userPage } from '@/filters/user';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	report: any;

packages/client/src/components/cropper-dialog.vue

@@ -9,7 +9,7 @@
 	@ok="ok()"
 	@closed="$emit('closed')"
 >
-	<template #header>{{ $ts.cropImage }}</template>
+	<template #header>{{ i18n.ts.cropImage }}</template>
 	<template #default="{ width, height }">
 		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
 			<Transition name="fade">
@@ -36,6 +36,7 @@ import { $i } from '@/account';
 import { defaultStore } from '@/store';
 import { apiUrl, url } from '@/config';
 import { query } from '@/scripts/url';
+import { i18n } from '@/i18n';
 
 const emit = defineEmits<{
 	(ev: 'ok', cropped: misskey.entities.DriveFile): void;

packages/client/src/components/form/checkbox.vue

@@ -9,7 +9,7 @@
 		:disabled="disabled"
 		@keydown.enter="toggle"
 	>
-	<span ref="button" v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
+	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
 		<i class="check fas fa-check"></i>
 	</span>
 	<span class="label">
@@ -24,6 +24,7 @@
 import { toRefs, Ref } from 'vue';
 import * as os from '@/os';
 import Ripple from '@/components/ripple.vue';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;

packages/client/src/components/form/input.vue

@@ -29,7 +29,7 @@
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-check"></i> {{ $ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-check"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
@@ -38,6 +38,7 @@ import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from '
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/ui/button.vue';
 import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	modelValue: string | number;

packages/client/src/components/form/select.vue

@@ -22,7 +22,7 @@
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
@@ -31,6 +31,7 @@ import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode,
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	modelValue: string;

packages/client/src/components/form/switch.vue

@@ -9,7 +9,7 @@
 		:disabled="disabled"
 		@keydown.enter="toggle"
 	>
-	<span ref="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
+	<span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
 		<div class="knob"></div>
 	</span>
 	<span class="label">
@@ -23,6 +23,7 @@
 <script lang="ts" setup>
 import { toRefs, Ref } from 'vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;

packages/client/src/components/form/textarea.vue

@@ -2,7 +2,8 @@
 <div class="adhpbeos">
 	<div class="label" @click="focus"><slot name="label"></slot></div>
 	<div class="input" :class="{ disabled, focused, tall, pre }">
-		<textarea ref="inputEl"
+		<textarea
+			ref="inputEl"
 			v-model="v"
 			v-adaptive-border
 			:class="{ code, _monospace: code }"
@@ -21,14 +22,15 @@
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import MkButton from '@/components/ui/button.vue';
 import { debounce } from 'throttle-debounce';
+import MkButton from '@/components/ui/button.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -37,66 +39,66 @@ export default defineComponent({
 
 	props: {
 		modelValue: {
-			required: true
+			required: true,
 		},
 		type: {
 			type: String,
-			required: false
+			required: false,
 		},
 		required: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		readonly: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		disabled: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		pattern: {
 			type: String,
-			required: false
+			required: false,
 		},
 		placeholder: {
 			type: String,
-			required: false
+			required: false,
 		},
 		autofocus: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		autocomplete: {
-			required: false
+			required: false,
 		},
 		spellcheck: {
-			required: false
+			required: false,
 		},
 		code: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		tall: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		pre: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		debounce: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		manualSave: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 	},
 

packages/client/src/components/global/error.vue

@@ -2,14 +2,15 @@
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
 	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</p>
+		<p><i class="fas fa-exclamation-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
-		<MkButton class="button" @click="() => $emit('retry')">{{ $ts.retry }}</MkButton>
+		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
 	</div>
 </transition>
 </template>
 
 <script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
+import { i18n } from '@/i18n';
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/instance-stats.vue

@@ -4,29 +4,29 @@
 		<div class="body">
 			<div class="selects" style="display: flex;">
 				<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
-					<optgroup :label="$ts.federation">
+					<optgroup :label="i18n.ts.federation">
-						<option value="federation">{{ $ts._charts.federation }}</option>
+						<option value="federation">{{ i18n.ts._charts.federation }}</option>
-						<option value="ap-request">{{ $ts._charts.apRequest }}</option>
+						<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
 					</optgroup>
-					<optgroup :label="$ts.users">
+					<optgroup :label="i18n.ts.users">
-						<option value="users">{{ $ts._charts.usersIncDec }}</option>
+						<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
-						<option value="users-total">{{ $ts._charts.usersTotal }}</option>
+						<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
-						<option value="active-users">{{ $ts._charts.activeUsers }}</option>
+						<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
 					</optgroup>
-					<optgroup :label="$ts.notes">
+					<optgroup :label="i18n.ts.notes">
-						<option value="notes">{{ $ts._charts.notesIncDec }}</option>
+						<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
-						<option value="local-notes">{{ $ts._charts.localNotesIncDec }}</option>
+						<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
-						<option value="remote-notes">{{ $ts._charts.remoteNotesIncDec }}</option>
+						<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
-						<option value="notes-total">{{ $ts._charts.notesTotal }}</option>
+						<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
 					</optgroup>
-					<optgroup :label="$ts.drive">
+					<optgroup :label="i18n.ts.drive">
-						<option value="drive-files">{{ $ts._charts.filesIncDec }}</option>
+						<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
-						<option value="drive">{{ $ts._charts.storageUsageIncDec }}</option>
+						<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
 					</optgroup>
 				</MkSelect>
 				<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
-					<option value="hour">{{ $ts.perHour }}</option>
+					<option value="hour">{{ i18n.ts.perHour }}</option>
-					<option value="day">{{ $ts.perDay }}</option>
+					<option value="day">{{ i18n.ts.perDay }}</option>
 				</MkSelect>
 			</div>
 			<div class="chart">
@@ -71,6 +71,7 @@ import MkSelect from '@/components/form/select.vue';
 import MkChart from '@/components/chart.vue';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 Chart.register(
 	ArcElement,

packages/client/src/components/key-value.vue

@@ -5,7 +5,7 @@
 	</div>
 	<div class="value">
 		<slot name="value"></slot>
-		<button v-if="copy" v-tooltip="$ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="far fa-copy"></i></button>
+		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="far fa-copy"></i></button>
 	</div>
 </div>
 </template>
@@ -14,6 +14,7 @@
 import { } from 'vue';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	copy?: string | null;

packages/client/src/components/note-detailed.vue

@@ -14,7 +14,7 @@
 	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<i class="fas fa-retweet"></i>
-		<I18n :src="$ts.renotedBy" tag="span">
+		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
 					<MkUserName :user="note.user"/>
@@ -54,7 +54,7 @@
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
-						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
+						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
@@ -103,7 +103,7 @@
 	<MkNoteSub 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 :src="$ts.userSaysSomething" tag="small">
+	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
 				<MkUserName :user="appearNote.user"/>

packages/client/src/components/notes.vue

@@ -3,7 +3,7 @@
 	<template #empty>
 		<div class="_fullinfo">
 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ $ts.noNotes }}</div>
+			<div>{{ i18n.ts.noNotes }}</div>
 		</div>
 	</template>
 
@@ -21,8 +21,8 @@
 import { ref } from 'vue';
 import XNote from '@/components/note.vue';
 import XList from '@/components/date-separated-list.vue';
-import MkPagination from '@/components/ui/pagination.vue';
+import MkPagination, { Paging } from '@/components/ui/pagination.vue';
-import { Paging } from '@/components/ui/pagination.vue';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	pagination: Paging;

packages/client/src/components/notification.vue

@@ -61,10 +61,10 @@
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 			<i class="fas fa-quote-right"></i>
 		</MkA>
-		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
+		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
-		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $ts.followRequestAccepted }}</span>
+		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
-		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $ts.reject }}</button></div></span>
+		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
-		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $ts.reject }}</button></div></span>
+		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
 		<span v-if="notification.type === 'app'" class="text">
 			<Mfm :text="notification.body" :nowrap="!full"/>
 		</span>

packages/client/src/components/notifications.vue

@@ -3,7 +3,7 @@
 	<template #empty>
 		<div class="_fullinfo">
 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ $ts.noNotifications }}</div>
+			<div>{{ i18n.ts.noNotifications }}</div>
 		</div>
 	</template>
 
@@ -26,6 +26,7 @@ import XNote from '@/components/note.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { $i } from '@/account';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	includeTypes?: typeof notificationTypes[number][];

packages/client/src/components/poll-editor.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="zmdxowus">
 	<p v-if="choices.length < 2" class="caution">
-		<i class="fas fa-exclamation-triangle"></i>{{ $ts._poll.noOnlyOneChoice }}
+		<i class="fas fa-exclamation-triangle"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
 	</p>
 	<ul>
 		<li v-for="(choice, i) in choices" :key="i">
@@ -12,34 +12,34 @@
 			</button>
 		</li>
 	</ul>
-	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ $ts.add }}</MkButton>
+	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton>
-	<MkButton v-else class="add" disabled>{{ $ts._poll.noMore }}</MkButton>
+	<MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton>
-	<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
+	<MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch>
 	<section>
 		<div>
 			<MkSelect v-model="expiration" small>
-				<template #label>{{ $ts._poll.expiration }}</template>
+				<template #label>{{ i18n.ts._poll.expiration }}</template>
-				<option value="infinite">{{ $ts._poll.infinite }}</option>
+				<option value="infinite">{{ i18n.ts._poll.infinite }}</option>
-				<option value="at">{{ $ts._poll.at }}</option>
+				<option value="at">{{ i18n.ts._poll.at }}</option>
-				<option value="after">{{ $ts._poll.after }}</option>
+				<option value="after">{{ i18n.ts._poll.after }}</option>
 			</MkSelect>
 			<section v-if="expiration === 'at'">
 				<MkInput v-model="atDate" small type="date" class="input">
-					<template #label>{{ $ts._poll.deadlineDate }}</template>
+					<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
 				</MkInput>
 				<MkInput v-model="atTime" small type="time" class="input">
-					<template #label>{{ $ts._poll.deadlineTime }}</template>
+					<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
 				</MkInput>
 			</section>
 			<section v-else-if="expiration === 'after'">
 				<MkInput v-model="after" small type="number" class="input">
-					<template #label>{{ $ts._poll.duration }}</template>
+					<template #label>{{ i18n.ts._poll.duration }}</template>
 				</MkInput>
 				<MkSelect v-model="unit" small>
-					<option value="second">{{ $ts._time.second }}</option>
+					<option value="second">{{ i18n.ts._time.second }}</option>
-					<option value="minute">{{ $ts._time.minute }}</option>
+					<option value="minute">{{ i18n.ts._time.minute }}</option>
-					<option value="hour">{{ $ts._time.hour }}</option>
+					<option value="hour">{{ i18n.ts._time.hour }}</option>
-					<option value="day">{{ $ts._time.day }}</option>
+					<option value="day">{{ i18n.ts._time.day }}</option>
 				</MkSelect>
 			</section>
 		</div>
@@ -55,6 +55,7 @@ import MkSwitch from './form/switch.vue';
 import MkButton from './ui/button.vue';
 import { formatDateTimeString } from '@/scripts/format-time-string';
 import { addTime } from '@/scripts/time';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	modelValue: {

packages/client/src/components/poll.vue

@@ -13,97 +13,77 @@
 	<p v-if="!readOnly">
 		<span>{{ $t('_poll.totalVotes', { n: total }) }}</span>
 		<span> · </span>
-		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? $ts._poll.vote : $ts._poll.showResult }}</a>
+		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
-		<span v-if="isVoted">{{ $ts._poll.voted }}</span>
+		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
-		<span v-else-if="closed">{{ $ts._poll.closed }}</span>
+		<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
 		<span v-if="remaining > 0"> · {{ timer }}</span>
 	</p>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onUnmounted, ref, toRef } from 'vue';
+import { computed, onUnmounted, ref, toRef } from 'vue';
+import * as misskey from 'misskey-js';
 import { sum } from '@/scripts/array';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { useInterval } from '@/scripts/use-interval';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	note: misskey.entities.Note;
-		note: {
+	readOnly?: boolean;
-			type: Object,
+}>();
-			required: true,
-		},
-		readOnly: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
 
-	setup(props) {
+const remaining = ref(-1);
-		const remaining = ref(-1);
 
-		const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
+const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
-		const closed = computed(() => remaining.value === 0);
+const closed = computed(() => remaining.value === 0);
-		const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
+const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
-		const timer = computed(() => i18n.t(
+const timer = computed(() => i18n.t(
-			remaining.value >= 86400 ? '_poll.remainingDays' :
+	remaining.value >= 86400 ? '_poll.remainingDays' :
-			remaining.value >= 3600 ? '_poll.remainingHours' :
+	remaining.value >= 3600 ? '_poll.remainingHours' :
-			remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
+	remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
-				s: Math.floor(remaining.value % 60),
+		s: Math.floor(remaining.value % 60),
-				m: Math.floor(remaining.value / 60) % 60,
+		m: Math.floor(remaining.value / 60) % 60,
-				h: Math.floor(remaining.value / 3600) % 24,
+		h: Math.floor(remaining.value / 3600) % 24,
-				d: Math.floor(remaining.value / 86400),
+		d: Math.floor(remaining.value / 86400),
-			}));
+	}));
 
-		const showResult = ref(props.readOnly || isVoted.value);
+const showResult = ref(props.readOnly || isVoted.value);
 
-		// 期限付きアンケート
+// 期限付きアンケート
-		if (props.note.poll.expiresAt) {
+if (props.note.poll.expiresAt) {
-			const tick = () => {
+	const tick = () => {
-				remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
+		remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
-				if (remaining.value === 0) {
+		if (remaining.value === 0) {
-					showResult.value = true;
+			showResult.value = true;
-				}
-			};
-
-			useInterval(tick, 3000, {
-				immediate: true,
-				afterMounted: false,
-			});
 		}
+	};
 
-		const vote = async (id) => {
+	useInterval(tick, 3000, {
-			pleaseLogin();
+		immediate: true,
+		afterMounted: false,
+	});
+}
 
-			if (props.readOnly || closed.value || isVoted.value) return;
+const vote = async (id) => {
+	pleaseLogin();
 
-			const { canceled } = await os.confirm({
+	if (props.readOnly || closed.value || isVoted.value) return;
-				type: 'question',
-				text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
-			});
-			if (canceled) return;
 
-			await os.api('notes/polls/vote', {
+	const { canceled } = await os.confirm({
-				noteId: props.note.id,
+		type: 'question',
-				choice: id,
+		text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
-			});
+	});
-			if (!showResult.value) showResult.value = !props.note.poll.multiple;
+	if (canceled) return;
-		};
 
-		return {
+	await os.api('notes/polls/vote', {
-			remaining,
+		noteId: props.note.id,
-			showResult,
+		choice: id,
-			total,
+	});
-			isVoted,
+	if (!showResult.value) showResult.value = !props.note.poll.multiple;
-			closed,
+};
-			timer,
-			vote,
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/remote-caution.vue

@@ -1,8 +1,10 @@
 <template>
-<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
+<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts" setup>
+import { i18n } from '@/i18n';
+
 defineProps<{
 	href: string;
 }>();

packages/client/src/components/signin-dialog.vue

@@ -1,11 +1,12 @@
 <template>
-<XModalWindow ref="dialog"
+<XModalWindow
+	ref="dialog"
 	:width="370"
 	:height="400"
 	@close="onClose"
 	@closed="emit('closed')"
 >
-	<template #header>{{ $ts.login }}</template>
+	<template #header>{{ i18n.ts.login }}</template>
 
 	<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
 </XModalWindow>
@@ -13,15 +14,16 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
 import MkSignin from './signin.vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	autoSet?: boolean;
 	message?: string,
 }>(), {
 	autoSet: false,
-	message: ''
+	message: '',
 });
 
 const emit = defineEmits<{

packages/client/src/components/signup-dialog.vue

@@ -1,11 +1,12 @@
 <template>
-<XModalWindow ref="dialog"
+<XModalWindow
+	ref="dialog"
 	:width="366"
 	:height="500"
 	@close="dialog.close()"
 	@closed="$emit('closed')"
 >
-	<template #header>{{ $ts.signup }}</template>
+	<template #header>{{ i18n.ts.signup }}</template>
 
 	<div class="_monolithic_">
 		<div class="_section">
@@ -17,8 +18,9 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
 import XSignup from './signup.vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	autoSet?: boolean;

packages/client/src/components/signup.vue

@@ -1,65 +1,65 @@
 <template>
 <form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
 	<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
-		<template #label>{{ $ts.invitationCode }}</template>
+		<template #label>{{ i18n.ts.invitationCode }}</template>
 		<template #prefix><i class="fas fa-key"></i></template>
 	</MkInput>
 	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
-		<template #label>{{ $ts.username }} <div v-tooltip:dialog="$ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
+		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 		<template #prefix>@</template>
 		<template #suffix>@{{ host }}</template>
 		<template #caption>
-			<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
+			<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
+			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
-			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
+			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.unavailable }}</span>
-			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
+			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.error }}</span>
-			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
+			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
-			<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
+			<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.tooShort }}</span>
-			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
+			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.tooLong }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
-		<template #label>{{ $ts.emailAddress }} <div v-tooltip:dialog="$ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
+		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 		<template #prefix><i class="fas fa-envelope"></i></template>
 		<template #caption>
-			<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
+			<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
+			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
-			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.used }}</span>
+			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
-			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.format }}</span>
+			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
-			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.disposable }}</span>
+			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
-			<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.mx }}</span>
+			<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
-			<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.smtp }}</span>
+			<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
-			<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
+			<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.unavailable }}</span>
-			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
+			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.error }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
-		<template #label>{{ $ts.password }}</template>
+		<template #label>{{ i18n.ts.password }}</template>
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
-			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</span>
+			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.weakPassword }}</span>
-			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</span>
+			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.normalPassword }}</span>
-			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
+			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.strongPassword }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
-		<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
+		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
-			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</span>
+			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.passwordMatched }}</span>
-			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
+			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
 		</template>
 	</MkInput>
 	<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
-		<I18n :src="$ts.agreeTo">
+		<I18n :src="i18n.ts.agreeTo">
 			<template #0>
-				<a :href="instance.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
+				<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a>
 			</template>
 		</I18n>
 	</MkSwitch>
 	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
-	<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
+	<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
 </form>
 </template>
 

packages/client/src/components/sub-note-content.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="wrmlmaau" :class="{ collapsed }">
 	<div class="body">
-		<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
+		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
+		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
@@ -12,20 +12,21 @@
 		<XMediaList :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
-		<summary>{{ $ts.poll }}</summary>
+		<summary>{{ i18n.ts.poll }}</summary>
 		<XPoll :note="note"/>
 	</details>
 	<button v-if="collapsed" class="fade _button" @click="collapsed = false">
-		<span>{{ $ts.showMore }}</span>
+		<span>{{ i18n.ts.showMore }}</span>
 	</button>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import * as misskey from 'misskey-js';
 import XPoll from './poll.vue';
 import XMediaList from './media-list.vue';
-import * as misskey from 'misskey-js';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	note: misskey.entities.Note;

packages/client/src/components/ui/menu.vue

@@ -46,7 +46,7 @@
 			</button>
 		</template>
 		<span v-if="items2.length === 0" class="none item">
-			<span>{{ $ts.none }}</span>
+			<span>{{ i18n.ts.none }}</span>
 		</span>
 	</div>
 	<div v-if="childMenu" class="child">
@@ -61,6 +61,8 @@ import { focusPrev, focusNext } from '@/scripts/focus';
 import FormSwitch from '@/components/form/switch.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
+
 const XChild = defineAsyncComponent(() => import('./menu.child.vue'));
 
 const props = defineProps<{

packages/client/src/components/ui/pagination.vue

@@ -8,7 +8,7 @@
 		<slot name="empty">
 			<div class="_fullinfo">
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ $ts.nothing }}</div>
+				<div>{{ i18n.ts.nothing }}</div>
 			</div>
 		</slot>
 	</div>
@@ -16,14 +16,14 @@
 	<div v-else ref="rootEl">
 		<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
 			<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
-				{{ $ts.loadMore }}
+				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
 		<slot :items="items"></slot>
 		<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
 			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
-				{{ $ts.loadMore }}
+				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
@@ -37,6 +37,7 @@ import * as misskey from 'misskey-js';
 import * as os from '@/os';
 import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
+import { i18n } from '@/i18n';
 
 const SECOND_FETCH_LIMIT = 30;
 

packages/client/src/components/updated.vue

@@ -1,10 +1,10 @@
 <template>
 <MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div class="ewlycnyt">
-		<div class="title"><MkSparkle>{{ $ts.misskeyUpdated }}</MkSparkle></div>
+		<div class="title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
 		<div class="version">✨{{ version }}🚀</div>
-		<MkButton full @click="whatIsNew">{{ $ts.whatIsNew }}</MkButton>
+		<MkButton full @click="whatIsNew">{{ i18n.ts.whatIsNew }}</MkButton>
-		<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ $ts.gotIt }}</MkButton>
+		<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
 	</div>
 </MkModal>
 </template>
@@ -15,8 +15,9 @@ import MkModal from '@/components/ui/modal.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSparkle from '@/components/sparkle.vue';
 import { version } from '@/config';
+import { i18n } from '@/i18n';
 
-const modal = ref();
+const modal = ref<InstanceType<typeof MkModal>>();
 
 const whatIsNew = () => {
 	modal.value.close();

packages/client/src/components/url-preview.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" :title="$ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></button>
+	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 </div>
 <div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
@@ -10,7 +10,7 @@
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
+				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
 			</div>
 			<article>
 				<header>
@@ -26,7 +26,7 @@
 	</transition>
 	<div v-if="tweetId" class="expandTweet">
 		<a @click="tweetExpanded = true">
-			<i class="fab fa-twitter"></i> {{ $ts.expandTweet }}
+			<i class="fab fa-twitter"></i> {{ i18n.ts.expandTweet }}
 		</a>
 	</div>
 </div>
@@ -35,6 +35,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
 import { url as local, lang } from '@/config';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	url: string;

packages/client/src/components/user-info.vue

@@ -10,17 +10,17 @@
 		<div v-if="user.description" class="mfm">
 			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
 		</div>
-		<span v-else style="opacity: 0.7;">{{ $ts.noAccountDescription }}</span>
+		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
 	</div>
 	<div class="status">
 		<div>
-			<p>{{ $ts.notes }}</p><span>{{ user.notesCount }}</span>
+			<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
 		</div>
 		<div>
-			<p>{{ $ts.following }}</p><span>{{ user.followingCount }}</span>
+			<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
 		</div>
 		<div>
-			<p>{{ $ts.followers }}</p><span>{{ user.followersCount }}</span>
+			<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
 		</div>
 	</div>
 	<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
@@ -31,6 +31,7 @@
 import * as misskey from 'misskey-js';
 import MkFollowButton from './follow-button.vue';
 import { userPage } from '@/filters/user';
+import { i18n } from '@/i18n';
 
 defineProps<{
 	user: misskey.entities.UserDetailed;

packages/client/src/components/user-list.vue

@@ -3,7 +3,7 @@
 	<template #empty>
 		<div class="_fullinfo">
 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ $ts.noUsers }}</div>
+			<div>{{ i18n.ts.noUsers }}</div>
 		</div>
 	</template>
 
@@ -18,9 +18,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import MkUserInfo from '@/components/user-info.vue';
-import MkPagination from '@/components/ui/pagination.vue';
+import MkPagination, { Paging } from '@/components/ui/pagination.vue';
-import { Paging } from '@/components/ui/pagination.vue';
 import { userPage } from '@/filters/user';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	pagination: Paging;

packages/client/src/components/user-select-dialog.vue

@@ -1,5 +1,6 @@
 <template>
-<XModalWindow ref="dialogEl"
+<XModalWindow
+	ref="dialogEl"
 	:with-ok-button="true"
 	:ok-button-disabled="selected == null"
 	@click="cancel()"
@@ -7,16 +8,16 @@
 	@ok="ok()"
 	@closed="$emit('closed')"
 >
-	<template #header>{{ $ts.selectUser }}</template>
+	<template #header>{{ i18n.ts.selectUser }}</template>
 	<div class="tbhwbxda">
 		<div class="form">
 			<FormSplit :min-width="170">
 				<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
-					<template #label>{{ $ts.username }}</template>
+					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
 				</MkInput>
 				<MkInput v-model="host" @update:modelValue="search">
-					<template #label>{{ $ts.host }}</template>
+					<template #label>{{ i18n.ts.host }}</template>
 					<template #prefix>@</template>
 				</MkInput>
 			</FormSplit>
@@ -32,7 +33,7 @@
 				</div>
 			</div>
 			<div v-else class="empty">
-				<span>{{ $ts.noUsers }}</span>
+				<span>{{ i18n.ts.noUsers }}</span>
 			</div>
 		</div>
 		<div v-if="username == '' && host == ''" class="recent">
@@ -58,6 +59,7 @@ import FormSplit from '@/components/form/split.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const emit = defineEmits<{
 	(ev: 'ok', selected: misskey.entities.UserDetailed): void;
@@ -81,7 +83,7 @@ const search = () => {
 		username: username,
 		host: host,
 		limit: 10,
-		detail: false
+		detail: false,
 	}).then(_users => {
 		users = _users;
 	});

packages/client/src/components/visibility-picker.vue

@@ -4,37 +4,37 @@
 		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
 			<div><i class="fas fa-globe"></i></div>
 			<div>
-				<span>{{ $ts._visibility.public }}</span>
+				<span>{{ i18n.ts._visibility.public }}</span>
-				<span>{{ $ts._visibility.publicDescription }}</span>
+				<span>{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
 		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
 			<div><i class="fas fa-home"></i></div>
 			<div>
-				<span>{{ $ts._visibility.home }}</span>
+				<span>{{ i18n.ts._visibility.home }}</span>
-				<span>{{ $ts._visibility.homeDescription }}</span>
+				<span>{{ i18n.ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
 		<button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
 			<div><i class="fas fa-unlock"></i></div>
 			<div>
-				<span>{{ $ts._visibility.followers }}</span>
+				<span>{{ i18n.ts._visibility.followers }}</span>
-				<span>{{ $ts._visibility.followersDescription }}</span>
+				<span>{{ i18n.ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
 		<button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
 			<div><i class="fas fa-envelope"></i></div>
 			<div>
-				<span>{{ $ts._visibility.specified }}</span>
+				<span>{{ i18n.ts._visibility.specified }}</span>
-				<span>{{ $ts._visibility.specifiedDescription }}</span>
+				<span>{{ i18n.ts._visibility.specifiedDescription }}</span>
 			</div>
 		</button>
 		<div class="divider"></div>
 		<button key="localOnly" class="_button localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
 			<div><i class="fas fa-biohazard"></i></div>
 			<div>
-				<span>{{ $ts._visibility.localOnly }}</span>
+				<span>{{ i18n.ts._visibility.localOnly }}</span>
-				<span>{{ $ts._visibility.localOnlyDescription }}</span>
+				<span>{{ i18n.ts._visibility.localOnlyDescription }}</span>
 			</div>
 			<div><i :class="localOnly ? 'fas fa-toggle-on' : 'fas fa-toggle-off'"></i></div>
 		</button>
@@ -46,6 +46,7 @@
 import { nextTick, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import MkModal from '@/components/ui/modal.vue';
+import { i18n } from '@/i18n';
 
 const modal = $ref<InstanceType<typeof MkModal>>();
 

packages/client/src/components/widgets.vue

@@ -3,11 +3,11 @@
 	<template v-if="edit">
 		<header>
 			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
-				<template #label>{{ $ts.selectWidget }}</template>
+				<template #label>{{ i18n.ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
 			</MkSelect>
-			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
-			<MkButton inline @click="$emit('exit')">{{ $ts.close }}</MkButton>
+			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<XDraggable
 			v-model="widgets_"

packages/client/src/pages/about.federation.vue

@@ -3,35 +3,35 @@
 	<div class="query">
 		<MkInput v-model="host" :debounce="true" class="">
 			<template #prefix><i class="fas fa-search"></i></template>
-			<template #label>{{ $ts.host }}</template>
+			<template #label>{{ i18n.ts.host }}</template>
 		</MkInput>
 		<FormSplit style="margin-top: var(--margin);">
 			<MkSelect v-model="state">
-				<template #label>{{ $ts.state }}</template>
+				<template #label>{{ i18n.ts.state }}</template>
-				<option value="all">{{ $ts.all }}</option>
+				<option value="all">{{ i18n.ts.all }}</option>
-				<option value="federating">{{ $ts.federating }}</option>
+				<option value="federating">{{ i18n.ts.federating }}</option>
-				<option value="subscribing">{{ $ts.subscribing }}</option>
+				<option value="subscribing">{{ i18n.ts.subscribing }}</option>
-				<option value="publishing">{{ $ts.publishing }}</option>
+				<option value="publishing">{{ i18n.ts.publishing }}</option>
-				<option value="suspended">{{ $ts.suspended }}</option>
+				<option value="suspended">{{ i18n.ts.suspended }}</option>
-				<option value="blocked">{{ $ts.blocked }}</option>
+				<option value="blocked">{{ i18n.ts.blocked }}</option>
-				<option value="notResponding">{{ $ts.notResponding }}</option>
+				<option value="notResponding">{{ i18n.ts.notResponding }}</option>
 			</MkSelect>
 			<MkSelect v-model="sort">
-				<template #label>{{ $ts.sort }}</template>
+				<template #label>{{ i18n.ts.sort }}</template>
-				<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
+				<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
+				<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
+				<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
+				<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
+				<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
+				<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
+				<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
+				<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
+				<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
+				<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
+				<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
+				<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
+				<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
+				<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
 			</MkSelect>
 		</FormSplit>
 	</div>

packages/client/src/pages/about.vue

@@ -13,7 +13,7 @@
 			</div>
 
 			<MkKeyValue class="_formBlock">
-				<template #key>{{ $ts.description }}</template>
+				<template #key>{{ i18n.ts.description }}</template>
 				<template #value>{{ $instance.description }}</template>
 			</MkKeyValue>
 
@@ -22,33 +22,33 @@
 					<template #key>Misskey</template>
 					<template #value>{{ version }}</template>
 				</MkKeyValue>
-				<FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink>
+				<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
 			</FormSection>
 
 			<FormSection>
 				<FormSplit>
 					<MkKeyValue class="_formBlock">
-						<template #key>{{ $ts.administrator }}</template>
+						<template #key>{{ i18n.ts.administrator }}</template>
 						<template #value>{{ $instance.maintainerName }}</template>
 					</MkKeyValue>
 					<MkKeyValue class="_formBlock">
-						<template #key>{{ $ts.contact }}</template>
+						<template #key>{{ i18n.ts.contact }}</template>
 						<template #value>{{ $instance.maintainerEmail }}</template>
 					</MkKeyValue>
 				</FormSplit>
-				<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ $ts.tos }}</FormLink>
+				<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ i18n.ts.tos }}</FormLink>
 			</FormSection>
 
 			<FormSuspense :p="initStats">
 				<FormSection>
-					<template #label>{{ $ts.statistics }}</template>
+					<template #label>{{ i18n.ts.statistics }}</template>
 					<FormSplit>
 						<MkKeyValue class="_formBlock">
-							<template #key>{{ $ts.users }}</template>
+							<template #key>{{ i18n.ts.users }}</template>
 							<template #value>{{ number(stats.originalUsersCount) }}</template>
 						</MkKeyValue>
 						<MkKeyValue class="_formBlock">
-							<template #key>{{ $ts.notes }}</template>
+							<template #key>{{ i18n.ts.notes }}</template>
 							<template #value>{{ number(stats.originalNotesCount) }}</template>
 						</MkKeyValue>
 					</FormSplit>

packages/client/src/pages/admin/abuses.vue

@@ -7,31 +7,31 @@
 				<div class="_content">
 					<div class="inputs" style="display: flex;">
 						<MkSelect v-model="state" style="margin: 0; flex: 1;">
-							<template #label>{{ $ts.state }}</template>
+							<template #label>{{ i18n.ts.state }}</template>
-							<option value="all">{{ $ts.all }}</option>
+							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="unresolved">{{ $ts.unresolved }}</option>
+							<option value="unresolved">{{ i18n.ts.unresolved }}</option>
-							<option value="resolved">{{ $ts.resolved }}</option>
+							<option value="resolved">{{ i18n.ts.resolved }}</option>
 						</MkSelect>
 						<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ $ts.reporteeOrigin }}</template>
+							<template #label>{{ i18n.ts.reporteeOrigin }}</template>
-							<option value="combined">{{ $ts.all }}</option>
+							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ $ts.local }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ $ts.remote }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
 						</MkSelect>
 						<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ $ts.reporterOrigin }}</template>
+							<template #label>{{ i18n.ts.reporterOrigin }}</template>
-							<option value="combined">{{ $ts.all }}</option>
+							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ $ts.local }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ $ts.remote }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
 						</MkSelect>
 					</div>
 					<!-- TODO
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
 				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
-					<span>{{ $ts.username }}</span>
+					<span>{{ i18n.ts.username }}</span>
 				</MkInput>
 				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
-					<span>{{ $ts.host }}</span>
+					<span>{{ i18n.ts.host }}</span>
 				</MkInput>
 			</div>
 			-->

packages/client/src/pages/admin/bot-protection.vue

@@ -3,7 +3,7 @@
 	<FormSuspense :p="init">
 		<div class="_formRoot">
 			<FormRadios v-model="provider" class="_formBlock">
-				<option :value="null">{{ $ts.none }} ({{ $ts.notRecommended }})</option>
+				<option :value="null">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option>
 				<option value="hcaptcha">hCaptcha</option>
 				<option value="recaptcha">reCAPTCHA</option>
 			</FormRadios>
@@ -11,33 +11,33 @@
 			<template v-if="provider === 'hcaptcha'">
 				<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
 					<template #prefix><i class="fas fa-key"></i></template>
-					<template #label>{{ $ts.hcaptchaSiteKey }}</template>
+					<template #label>{{ i18n.ts.hcaptchaSiteKey }}</template>
 				</FormInput>
 				<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
 					<template #prefix><i class="fas fa-key"></i></template>
-					<template #label>{{ $ts.hcaptchaSecretKey }}</template>
+					<template #label>{{ i18n.ts.hcaptchaSecretKey }}</template>
 				</FormInput>
 				<FormSlot class="_formBlock">
-					<template #label>{{ $ts.preview }}</template>
+					<template #label>{{ i18n.ts.preview }}</template>
 					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
 				</FormSlot>
 			</template>
 			<template v-else-if="provider === 'recaptcha'">
 				<FormInput v-model="recaptchaSiteKey" class="_formBlock">
 					<template #prefix><i class="fas fa-key"></i></template>
-					<template #label>{{ $ts.recaptchaSiteKey }}</template>
+					<template #label>{{ i18n.ts.recaptchaSiteKey }}</template>
 				</FormInput>
 				<FormInput v-model="recaptchaSecretKey" class="_formBlock">
 					<template #prefix><i class="fas fa-key"></i></template>
-					<template #label>{{ $ts.recaptchaSecretKey }}</template>
+					<template #label>{{ i18n.ts.recaptchaSecretKey }}</template>
 				</FormInput>
 				<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
-					<template #label>{{ $ts.preview }}</template>
+					<template #label>{{ i18n.ts.preview }}</template>
 					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
 				</FormSlot>
 			</template>
 
-			<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+			<FormButton primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
 		</div>
 	</FormSuspense>
 </div>
@@ -52,6 +52,7 @@ import FormSuspense from '@/components/form/suspense.vue';
 import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os';
 import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
 
 const MkCaptcha = defineAsyncComponent(() => import('@/components/captcha.vue'));
 

packages/client/src/pages/admin/emoji-edit-dialog.vue

@@ -1,5 +1,6 @@
 <template>
-<XModalWindow ref="dialog"
+<XModalWindow
+	ref="dialog"
 	:width="370"
 	:with-ok-button="true"
 	@close="$refs.dialog.close()"
@@ -12,16 +13,16 @@
 		<div class="yigymqpb _section">
 			<img :src="emoji.url" class="img"/>
 			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ $ts.name }}</template>
+				<template #label>{{ i18n.ts.name }}</template>
 			</MkInput>
 			<MkInput v-model="category" class="_formBlock" :datalist="categories">
-				<template #label>{{ $ts.category }}</template>
+				<template #label>{{ i18n.ts.category }}</template>
 			</MkInput>
 			<MkInput v-model="aliases" class="_formBlock">
-				<template #label>{{ $ts.tags }}</template>
+				<template #label>{{ i18n.ts.tags }}</template>
-				<template #caption>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
+				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
 			</MkInput>
-			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 	</div>
 </XModalWindow>
@@ -70,7 +71,7 @@ async function update() {
 			name,
 			category,
 			aliases: aliases.split(' '),
-		}
+		},
 	});
 
 	dialog.close();
@@ -84,10 +85,10 @@ async function del() {
 	if (canceled) return;
 
 	os.api('admin/emoji/delete', {
-		id: props.emoji.id
+		id: props.emoji.id,
 	}).then(() => {
 		emit('done', {
-			deleted: true
+			deleted: true,
 		});
 		dialog.close();
 	});

packages/client/src/pages/admin/emojis.vue

@@ -7,7 +7,7 @@
 				<div v-if="tab === 'local'" class="local">
 					<MkInput v-model="query" :debounce="true" type="search">
 						<template #prefix><i class="fas fa-search"></i></template>
-						<template #label>{{ $ts.search }}</template>
+						<template #label>{{ i18n.ts.search }}</template>
 					</MkInput>
 					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
 						<template #label>Select mode</template>
@@ -21,7 +21,7 @@
 						<MkButton inline danger @click="delBulk">Delete</MkButton>
 					</div>
 					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
-						<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
+						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
 						<template #default="{items}">
 							<div class="ldhfsamy">
 								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
@@ -40,14 +40,14 @@
 					<FormSplit>
 						<MkInput v-model="queryRemote" :debounce="true" type="search">
 							<template #prefix><i class="fas fa-search"></i></template>
-							<template #label>{{ $ts.search }}</template>
+							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
 						<MkInput v-model="host" :debounce="true">
-							<template #label>{{ $ts.host }}</template>
+							<template #label>{{ i18n.ts.host }}</template>
 						</MkInput>
 					</FormSplit>
 					<MkPagination :pagination="remotePagination">
-						<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
+						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
 						<template #default="{items}">
 							<div class="ldhfsamy">
 								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">

packages/client/src/pages/admin/files.vue

@@ -7,13 +7,13 @@
 				<div>
 					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
 						<MkSelect v-model="origin" style="margin: 0; flex: 1;">
-							<template #label>{{ $ts.instance }}</template>
+							<template #label>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ $ts.all }}</option>
+							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ $ts.local }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ $ts.remote }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
 						</MkSelect>
 						<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
-							<template #label>{{ $ts.host }}</template>
+							<template #label>{{ i18n.ts.host }}</template>
 						</MkInput>
 					</div>
 					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap; padding-top: 1.2em;">

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

@@ -7,10 +7,10 @@
 					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 				</div>
 
-				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ $ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ $ts.check }}</MkA></MkInfo>
+				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
-				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ i18n.ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noBotProtection" warn class="info">{{ i18n.ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noEmailServer" warn class="info">{{ $ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noEmailServer" warn class="info">{{ i18n.ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
 
 				<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
 			</div>

packages/client/src/pages/admin/integrations.discord.vue

@@ -2,7 +2,7 @@
 <FormSuspense :p="init">
 	<div class="_formRoot">
 		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
-			<template #label>{{ $ts.enable }}</template>
+			<template #label>{{ i18n.ts.enable }}</template>
 		</FormSwitch>
 
 		<template v-if="enableDiscordIntegration">
@@ -19,7 +19,7 @@
 			</FormInput>
 		</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </FormSuspense>
 </template>
@@ -33,6 +33,7 @@ import FormInfo from '@/components/ui/info.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
 
 let uri: string = $ref('');
 let enableDiscordIntegration: boolean = $ref(false);

packages/client/src/pages/admin/integrations.github.vue

@@ -2,7 +2,7 @@
 <FormSuspense :p="init">
 	<div class="_formRoot">
 		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
-			<template #label>{{ $ts.enable }}</template>
+			<template #label>{{ i18n.ts.enable }}</template>
 		</FormSwitch>
 
 		<template v-if="enableGithubIntegration">
@@ -19,7 +19,7 @@
 			</FormInput>
 		</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </FormSuspense>
 </template>
@@ -33,6 +33,7 @@ import FormInfo from '@/components/ui/info.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
 
 let uri: string = $ref('');
 let enableGithubIntegration: boolean = $ref(false);

packages/client/src/pages/admin/integrations.twitter.vue

@@ -2,7 +2,7 @@
 <FormSuspense :p="init">
 	<div class="_formRoot">
 		<FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
-			<template #label>{{ $ts.enable }}</template>
+			<template #label>{{ i18n.ts.enable }}</template>
 		</FormSwitch>
 
 		<template v-if="enableTwitterIntegration">
@@ -19,7 +19,7 @@
 			</FormInput>
 		</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </FormSuspense>
 </template>
@@ -33,6 +33,7 @@ import FormInfo from '@/components/ui/info.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
 
 let uri: string = $ref('');
 let enableTwitterIntegration: boolean = $ref(false);

packages/client/src/pages/admin/queue.chart.vue

@@ -33,7 +33,7 @@
 				<span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
 			</div>
 		</div>
-		<span v-else style="opacity: 0.5;">{{ $ts.noJobs }}</span>
+		<span v-else style="opacity: 0.5;">{{ i18n.ts.noJobs }}</span>
 	</div>
 </div>
 </template>
@@ -44,6 +44,7 @@ import XChart from './queue.chart.chart.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { stream } from '@/stream';
+import { i18n } from '@/i18n';
 
 const connection = markRaw(stream.useChannel('queueStats'));
 

packages/client/src/pages/admin/users.vue

@@ -7,36 +7,36 @@
 				<div class="users">
 					<div class="inputs">
 						<MkSelect v-model="sort" style="flex: 1;">
-							<template #label>{{ $ts.sort }}</template>
+							<template #label>{{ i18n.ts.sort }}</template>
-							<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
+							<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
+							<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
-							<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
+							<option value="-updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
+							<option value="+updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.descendingOrder }})</option>
 						</MkSelect>
 						<MkSelect v-model="state" style="flex: 1;">
-							<template #label>{{ $ts.state }}</template>
+							<template #label>{{ i18n.ts.state }}</template>
-							<option value="all">{{ $ts.all }}</option>
+							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="available">{{ $ts.normal }}</option>
+							<option value="available">{{ i18n.ts.normal }}</option>
-							<option value="admin">{{ $ts.administrator }}</option>
+							<option value="admin">{{ i18n.ts.administrator }}</option>
-							<option value="moderator">{{ $ts.moderator }}</option>
+							<option value="moderator">{{ i18n.ts.moderator }}</option>
-							<option value="silenced">{{ $ts.silence }}</option>
+							<option value="silenced">{{ i18n.ts.silence }}</option>
-							<option value="suspended">{{ $ts.suspend }}</option>
+							<option value="suspended">{{ i18n.ts.suspend }}</option>
 						</MkSelect>
 						<MkSelect v-model="origin" style="flex: 1;">
-							<template #label>{{ $ts.instance }}</template>
+							<template #label>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ $ts.all }}</option>
+							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ $ts.local }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ $ts.remote }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
 						</MkSelect>
 					</div>
 					<div class="inputs">
 						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:modelValue="$refs.users.reload()">
 							<template #prefix>@</template>
-							<template #label>{{ $ts.username }}</template>
+							<template #label>{{ i18n.ts.username }}</template>
 						</MkInput>
 						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:modelValue="$refs.users.reload()">
 							<template #prefix>@</template>
-							<template #label>{{ $ts.host }}</template>
+							<template #label>{{ i18n.ts.host }}</template>
 						</MkInput>
 					</div>
 

packages/client/src/pages/channel-editor.vue

@@ -4,22 +4,22 @@
 	<MkSpacer :content-max="700">
 		<div class="_formRoot">
 			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ $ts.name }}</template>
+				<template #label>{{ i18n.ts.name }}</template>
 			</MkInput>
 
 			<MkTextarea v-model="description" class="_formBlock">
-				<template #label>{{ $ts.description }}</template>
+				<template #label>{{ i18n.ts.description }}</template>
 			</MkTextarea>
 
 			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
+				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
 				<div v-else-if="bannerUrl">
 					<img :src="bannerUrl" style="width: 100%;"/>
-					<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton>
+					<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
 				</div>
 			</div>
 			<div class="_formBlock">
-				<MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
+				<MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
 			</div>
 		</div>
 	</MkSpacer>

packages/client/src/pages/channel.vue

@@ -13,8 +13,8 @@
 				</div>
 				<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
 					<div class="status">
-						<div><i class="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
+						<div><i class="fas fa-users fa-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-						<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+						<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
 					</div>
 					<div class="fade"></div>
 				</div>

packages/client/src/pages/explore.users.vue

@@ -1,32 +1,32 @@
 <template>
 <MkSpacer :content-max="1200">
 	<MkTab v-model="origin" style="margin-bottom: var(--margin);">
-		<option value="local">{{ $ts.local }}</option>
+		<option value="local">{{ i18n.ts.local }}</option>
-		<option value="remote">{{ $ts.remote }}</option>
+		<option value="remote">{{ i18n.ts.remote }}</option>
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
 			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
+				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
+				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
+				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
+				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
 		</template>
 	</div>
 	<div v-else>
 		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
+			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
 				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
@@ -41,15 +41,15 @@
 
 		<template v-if="tag == null">
 			<MkFolder class="_gap">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
+				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
+				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
-				<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
+				<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsersF"/>
 			</MkFolder>
 		</template>

packages/client/src/pages/explore.vue

@@ -13,12 +13,12 @@
 				<div>
 					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
 						<template #prefix><i class="fas fa-search"></i></template>
-						<template #label>{{ $ts.searchUser }}</template>
+						<template #label>{{ i18n.ts.searchUser }}</template>
 					</MkInput>
 					<MkRadios v-model="searchOrigin" class="_formBlock">
-						<option value="combined">{{ $ts.all }}</option>
+						<option value="combined">{{ i18n.ts.all }}</option>
-						<option value="local">{{ $ts.local }}</option>
+						<option value="local">{{ i18n.ts.local }}</option>
-						<option value="remote">{{ $ts.remote }}</option>
+						<option value="remote">{{ i18n.ts.remote }}</option>
 					</MkRadios>
 				</div>
 

packages/client/src/pages/favorites.vue

@@ -6,7 +6,7 @@
 			<template #empty>
 				<div class="_fullinfo">
 					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-					<div>{{ $ts.noNotes }}</div>
+					<div>{{ i18n.ts.noNotes }}</div>
 				</div>
 			</template>
 

packages/client/src/pages/follow-requests.vue

@@ -6,7 +6,7 @@
 			<template #empty>
 				<div class="_fullinfo">
 					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-					<div>{{ $ts.noFollowRequests }}</div>
+					<div>{{ i18n.ts.noFollowRequests }}</div>
 				</div>
 			</template>
 			<template #default="{items}">

packages/client/src/pages/gallery/edit.vue

@@ -4,27 +4,27 @@
 	<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
 		<FormSuspense :p="init">
 			<FormInput v-model="title">
-				<template #label>{{ $ts.title }}</template>
+				<template #label>{{ i18n.ts.title }}</template>
 			</FormInput>
 
 			<FormTextarea v-model="description" :max="500">
-				<template #label>{{ $ts.description }}</template>
+				<template #label>{{ i18n.ts.description }}</template>
 			</FormTextarea>
 
 			<div class="">
 				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
 					<div class="name">{{ file.name }}</div>
-					<button v-tooltip="$ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
+					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
 				</div>
-				<FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ $ts.attachFile }}</FormButton>
+				<FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
 			</div>
 
-			<FormSwitch v-model="isSensitive">{{ $ts.markAsSensitive }}</FormSwitch>
+			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
 
-			<FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+			<FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
-			<FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ $ts.publish }}</FormButton>
+			<FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.publish }}</FormButton>
 
-			<FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</FormButton>
+			<FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</FormButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>

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

@@ -5,7 +5,7 @@
 		<div class="_root">
 			<div v-if="tab === 'explore'">
 				<MkFolder class="_gap">
-					<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
+					<template #header><i class="fas fa-clock"></i>{{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
 						<div class="vfpdbgtk">
 							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
@@ -13,7 +13,7 @@
 					</MkPagination>
 				</MkFolder>
 				<MkFolder class="_gap">
-					<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template>
+					<template #header><i class="fas fa-fire-alt"></i>{{ i18n.ts.popularPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
 						<div class="vfpdbgtk">
 							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
@@ -29,7 +29,7 @@
 				</MkPagination>
 			</div>
 			<div v-else-if="tab === 'my'">
-				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA>
+				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
 				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 					<div class="vfpdbgtk">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>

packages/client/src/pages/gallery/post.vue

@@ -18,13 +18,13 @@
 						</div>
 						<div class="actions">
 							<div class="like">
-								<MkButton v-if="post.isLiked" v-tooltip="$ts._gallery.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-								<MkButton v-else v-tooltip="$ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
 							</div>
 							<div class="other">
-								<button v-if="$i && $i.id === post.user.id" v-tooltip="$ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
+								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
-								<button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-								<button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 							</div>
 						</div>
 						<div class="user">
@@ -38,7 +38,7 @@
 					</div>
 					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 					<MkContainer :max-height="300" :foldable="true" class="other">
-						<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
+						<template #header><i class="fas fa-clock"></i> {{ i18n.ts.recentPosts }}</template>
 						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 							<div class="sdrarzaf">
 								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>

packages/client/src/pages/instance-info.vue

@@ -5,51 +5,51 @@
 		<div v-if="tab === 'overview'" class="_formRoot">
 			<div class="fnfelxur">
 				<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
-				<span class="name">{{ instance.name || `(${$ts.unknown})` }}</span>
+				<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
 			</div>
 			<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
 				<template #key>Host</template>
 				<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
 			</MkKeyValue>
 			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $ts.software }}</template>
+				<template #key>{{ i18n.ts.software }}</template>
-				<template #value><span class="_monospace">{{ instance.softwareName || `(${$ts.unknown})` }} / {{ instance.softwareVersion || `(${$ts.unknown})` }}</span></template>
+				<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
 			</MkKeyValue>
 			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $ts.administrator }}</template>
+				<template #key>{{ i18n.ts.administrator }}</template>
-				<template #value>{{ instance.maintainerName || `(${$ts.unknown})` }} ({{ instance.maintainerEmail || `(${$ts.unknown})` }})</template>
+				<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
 			</MkKeyValue>
 			<MkKeyValue>
-				<template #key>{{ $ts.description }}</template>
+				<template #key>{{ i18n.ts.description }}</template>
 				<template #value>{{ instance.description }}</template>
 			</MkKeyValue>
 
 			<FormSection v-if="iAmModerator">
 				<template #label>Moderation</template>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
-				<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
+				<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
 				<MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton>
 			</FormSection>
 
 			<FormSection>
 				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ $ts.registeredAt }}</template>
+					<template #key>{{ i18n.ts.registeredAt }}</template>
 					<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
 				</MkKeyValue>
 				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ $ts.updatedAt }}</template>
+					<template #key>{{ i18n.ts.updatedAt }}</template>
 					<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
 				</MkKeyValue>
 				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ $ts.latestRequestSentAt }}</template>
+					<template #key>{{ i18n.ts.latestRequestSentAt }}</template>
 					<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
 				</MkKeyValue>
 				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ $ts.latestStatus }}</template>
+					<template #key>{{ i18n.ts.latestStatus }}</template>
 					<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
 				</MkKeyValue>
 				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ $ts.latestRequestReceivedAt }}</template>
+					<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
 					<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
 				</MkKeyValue>
 			</FormSection>
@@ -78,17 +78,17 @@
 			<div class="cmhjzshl">
 				<div class="selects">
 					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-						<option value="instance-requests">{{ $ts._instanceCharts.requests }}</option>
+						<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
-						<option value="instance-users">{{ $ts._instanceCharts.users }}</option>
+						<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
-						<option value="instance-users-total">{{ $ts._instanceCharts.usersTotal }}</option>
+						<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
-						<option value="instance-notes">{{ $ts._instanceCharts.notes }}</option>
+						<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
-						<option value="instance-notes-total">{{ $ts._instanceCharts.notesTotal }}</option>
+						<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
-						<option value="instance-ff">{{ $ts._instanceCharts.ff }}</option>
+						<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
-						<option value="instance-ff-total">{{ $ts._instanceCharts.ffTotal }}</option>
+						<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
-						<option value="instance-drive-usage">{{ $ts._instanceCharts.cacheSize }}</option>
+						<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
-						<option value="instance-drive-usage-total">{{ $ts._instanceCharts.cacheSizeTotal }}</option>
+						<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
-						<option value="instance-drive-files">{{ $ts._instanceCharts.files }}</option>
+						<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
-						<option value="instance-drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
+						<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
 					</MkSelect>
 				</div>
 				<div class="charts">

packages/client/src/pages/mfm-cheat-sheet.vue

@@ -3,11 +3,11 @@
 	<template #header><MkPageHeader/></template>
 	<MkSpacer :content-max="800">
 		<div class="mwysmxbg">
-			<div>{{ $ts._mfm.intro }}</div>
+			<div>{{ i18n.ts._mfm.intro }}</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.mention }}</div>
+				<div class="title">{{ i18n.ts._mfm.mention }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.mentionDescription }}</p>
+					<p>{{ i18n.ts._mfm.mentionDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_mention"/>
 						<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
@@ -15,9 +15,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.hashtag }}</div>
+				<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.hashtagDescription }}</p>
+					<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_hashtag"/>
 						<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
@@ -25,9 +25,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.url }}</div>
+				<div class="title">{{ i18n.ts._mfm.url }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.urlDescription }}</p>
+					<p>{{ i18n.ts._mfm.urlDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_url"/>
 						<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
@@ -35,9 +35,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.link }}</div>
+				<div class="title">{{ i18n.ts._mfm.link }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.linkDescription }}</p>
+					<p>{{ i18n.ts._mfm.linkDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_link"/>
 						<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
@@ -45,9 +45,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.emoji }}</div>
+				<div class="title">{{ i18n.ts._mfm.emoji }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.emojiDescription }}</p>
+					<p>{{ i18n.ts._mfm.emojiDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_emoji"/>
 						<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
@@ -55,9 +55,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.bold }}</div>
+				<div class="title">{{ i18n.ts._mfm.bold }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.boldDescription }}</p>
+					<p>{{ i18n.ts._mfm.boldDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_bold"/>
 						<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
@@ -65,9 +65,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.small }}</div>
+				<div class="title">{{ i18n.ts._mfm.small }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.smallDescription }}</p>
+					<p>{{ i18n.ts._mfm.smallDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_small"/>
 						<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
@@ -75,9 +75,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.quote }}</div>
+				<div class="title">{{ i18n.ts._mfm.quote }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.quoteDescription }}</p>
+					<p>{{ i18n.ts._mfm.quoteDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_quote"/>
 						<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
@@ -85,9 +85,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.center }}</div>
+				<div class="title">{{ i18n.ts._mfm.center }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.centerDescription }}</p>
+					<p>{{ i18n.ts._mfm.centerDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_center"/>
 						<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
@@ -95,9 +95,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.inlineCode }}</div>
+				<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.inlineCodeDescription }}</p>
+					<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_inlineCode"/>
 						<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
@@ -105,9 +105,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.blockCode }}</div>
+				<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.blockCodeDescription }}</p>
+					<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_blockCode"/>
 						<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
@@ -115,9 +115,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.inlineMath }}</div>
+				<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.inlineMathDescription }}</p>
+					<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_inlineMath"/>
 						<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
@@ -126,9 +126,9 @@
 			</div>
 			<!-- deprecated
 		<div class="section _block">
-			<div class="title">{{ $ts._mfm.search }}</div>
+			<div class="title">{{ i18n.ts._mfm.search }}</div>
 			<div class="content">
-				<p>{{ $ts._mfm.searchDescription }}</p>
+				<p>{{ i18n.ts._mfm.searchDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_search"/>
 					<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
@@ -137,9 +137,9 @@
 		</div>
 		-->
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.flip }}</div>
+				<div class="title">{{ i18n.ts._mfm.flip }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.flipDescription }}</p>
+					<p>{{ i18n.ts._mfm.flipDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_flip"/>
 						<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
@@ -147,9 +147,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.font }}</div>
+				<div class="title">{{ i18n.ts._mfm.font }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.fontDescription }}</p>
+					<p>{{ i18n.ts._mfm.fontDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_font"/>
 						<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
@@ -157,9 +157,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.x2 }}</div>
+				<div class="title">{{ i18n.ts._mfm.x2 }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.x2Description }}</p>
+					<p>{{ i18n.ts._mfm.x2Description }}</p>
 					<div class="preview">
 						<Mfm :text="preview_x2"/>
 						<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
@@ -167,9 +167,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.x3 }}</div>
+				<div class="title">{{ i18n.ts._mfm.x3 }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.x3Description }}</p>
+					<p>{{ i18n.ts._mfm.x3Description }}</p>
 					<div class="preview">
 						<Mfm :text="preview_x3"/>
 						<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
@@ -177,9 +177,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.x4 }}</div>
+				<div class="title">{{ i18n.ts._mfm.x4 }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.x4Description }}</p>
+					<p>{{ i18n.ts._mfm.x4Description }}</p>
 					<div class="preview">
 						<Mfm :text="preview_x4"/>
 						<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
@@ -187,9 +187,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.blur }}</div>
+				<div class="title">{{ i18n.ts._mfm.blur }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.blurDescription }}</p>
+					<p>{{ i18n.ts._mfm.blurDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_blur"/>
 						<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
@@ -197,9 +197,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.jelly }}</div>
+				<div class="title">{{ i18n.ts._mfm.jelly }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.jellyDescription }}</p>
+					<p>{{ i18n.ts._mfm.jellyDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_jelly"/>
 						<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
@@ -207,9 +207,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.tada }}</div>
+				<div class="title">{{ i18n.ts._mfm.tada }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.tadaDescription }}</p>
+					<p>{{ i18n.ts._mfm.tadaDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_tada"/>
 						<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
@@ -217,9 +217,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.jump }}</div>
+				<div class="title">{{ i18n.ts._mfm.jump }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.jumpDescription }}</p>
+					<p>{{ i18n.ts._mfm.jumpDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_jump"/>
 						<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
@@ -227,9 +227,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.bounce }}</div>
+				<div class="title">{{ i18n.ts._mfm.bounce }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.bounceDescription }}</p>
+					<p>{{ i18n.ts._mfm.bounceDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_bounce"/>
 						<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
@@ -237,9 +237,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.spin }}</div>
+				<div class="title">{{ i18n.ts._mfm.spin }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.spinDescription }}</p>
+					<p>{{ i18n.ts._mfm.spinDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_spin"/>
 						<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
@@ -247,9 +247,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.shake }}</div>
+				<div class="title">{{ i18n.ts._mfm.shake }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.shakeDescription }}</p>
+					<p>{{ i18n.ts._mfm.shakeDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_shake"/>
 						<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
@@ -257,9 +257,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.twitch }}</div>
+				<div class="title">{{ i18n.ts._mfm.twitch }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.twitchDescription }}</p>
+					<p>{{ i18n.ts._mfm.twitchDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_twitch"/>
 						<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
@@ -267,9 +267,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.rainbow }}</div>
+				<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.rainbowDescription }}</p>
+					<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_rainbow"/>
 						<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
@@ -277,9 +277,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.sparkle }}</div>
+				<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.sparkleDescription }}</p>
+					<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_sparkle"/>
 						<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
@@ -287,9 +287,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.rotate }}</div>
+				<div class="title">{{ i18n.ts._mfm.rotate }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.rotateDescription }}</p>
+					<p>{{ i18n.ts._mfm.rotateDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_rotate"/>
 						<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
@@ -297,9 +297,9 @@
 				</div>
 			</div>
 			<div class="section _block">
-				<div class="title">{{ $ts._mfm.plain }}</div>
+				<div class="title">{{ i18n.ts._mfm.plain }}</div>
 				<div class="content">
-					<p>{{ $ts._mfm.plainDescription }}</p>
+					<p>{{ i18n.ts._mfm.plainDescription }}</p>
 					<div class="preview">
 						<Mfm :text="preview_plain"/>
 						<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>

packages/client/src/pages/my-antennas/editor.vue

@@ -2,44 +2,44 @@
 <div class="shaynizk">
 	<div class="form">
 		<MkInput v-model="name" class="_formBlock">
-			<template #label>{{ $ts.name }}</template>
+			<template #label>{{ i18n.ts.name }}</template>
 		</MkInput>
 		<MkSelect v-model="src" class="_formBlock">
-			<template #label>{{ $ts.antennaSource }}</template>
+			<template #label>{{ i18n.ts.antennaSource }}</template>
-			<option value="all">{{ $ts._antennaSources.all }}</option>
+			<option value="all">{{ i18n.ts._antennaSources.all }}</option>
-			<!--<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>-->
+			<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
-			<option value="users">{{ $ts._antennaSources.users }}</option>
+			<option value="users">{{ i18n.ts._antennaSources.users }}</option>
-			<!--<option value="list">{{ $ts._antennaSources.userList }}</option>-->
+			<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
-			<!--<option value="group">{{ $ts._antennaSources.userGroup }}</option>-->
+			<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
 		</MkSelect>
 		<MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
-			<template #label>{{ $ts.userList }}</template>
+			<template #label>{{ i18n.ts.userList }}</template>
 			<option v-for="list in userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
 		</MkSelect>
 		<MkSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
-			<template #label>{{ $ts.userGroup }}</template>
+			<template #label>{{ i18n.ts.userGroup }}</template>
 			<option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
 		</MkSelect>
 		<MkTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
-			<template #label>{{ $ts.users }}</template>
+			<template #label>{{ i18n.ts.users }}</template>
-			<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
+			<template #caption>{{ i18n.ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ i18n.ts.addUser }}</button></template>
 		</MkTextarea>
-		<MkSwitch v-model="withReplies" class="_formBlock">{{ $ts.withReplies }}</MkSwitch>
+		<MkSwitch v-model="withReplies" class="_formBlock">{{ i18n.ts.withReplies }}</MkSwitch>
 		<MkTextarea v-model="keywords" class="_formBlock">
-			<template #label>{{ $ts.antennaKeywords }}</template>
+			<template #label>{{ i18n.ts.antennaKeywords }}</template>
-			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
+			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
 		</MkTextarea>
 		<MkTextarea v-model="excludeKeywords" class="_formBlock">
-			<template #label>{{ $ts.antennaExcludeKeywords }}</template>
+			<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
-			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
+			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
 		</MkTextarea>
-		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ $ts.caseSensitive }}</MkSwitch>
+		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ i18n.ts.caseSensitive }}</MkSwitch>
-		<MkSwitch v-model="withFile" class="_formBlock">{{ $ts.withFileAntenna }}</MkSwitch>
+		<MkSwitch v-model="withFile" class="_formBlock">{{ i18n.ts.withFileAntenna }}</MkSwitch>
-		<MkSwitch v-model="notify" class="_formBlock">{{ $ts.notifyAntenna }}</MkSwitch>
+		<MkSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</MkSwitch>
 	</div>
 	<div class="actions">
-		<MkButton inline primary @click="saveAntenna()"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+		<MkButton inline primary @click="saveAntenna()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
-		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
+		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="fas fa-trash"></i> {{ i18n.ts.delete }}</MkButton>
 	</div>
 </div>
 </template>

packages/client/src/pages/my-clips/index.vue

@@ -1,17 +1,19 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="700">
+	<MkSpacer :content-max="700">
-	<div class="qtcaoidl">
+		<div class="qtcaoidl">
-		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
 
-		<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
+			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
-			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-				<b>{{ item.name }}</b>
+					<b>{{ item.name }}</b>
-				<div v-if="item.description" class="description">{{ item.description }}</div>
+					<div v-if="item.description" class="description">{{ item.description }}</div>
-			</MkA>
+				</MkA>
-		</MkPagination>
+			</MkPagination>
-	</div>
+		</div>
-</MkSpacer></MkStickyContainer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>

packages/client/src/pages/my-lists/index.vue

@@ -1,17 +1,19 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="700">
+	<MkSpacer :content-max="700">
-	<div class="qkcjvfiv">
+		<div class="qkcjvfiv">
-		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
-		<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
+			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
-			<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
-				<div class="name">{{ list.name }}</div>
+					<div class="name">{{ list.name }}</div>
-				<MkAvatars :user-ids="list.userIds"/>
+					<MkAvatars :user-ids="list.userIds"/>
-			</MkA>
+				</MkA>
-		</MkPagination>
+			</MkPagination>
-	</div>
+		</div>
-</MkSpacer></MkStickyContainer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>

packages/client/src/pages/my-lists/list.vue

@@ -1,42 +1,44 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="700">
+	<MkSpacer :content-max="700">
-	<div class="mk-list-page">
+		<div class="mk-list-page">
-		<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-			<div v-if="list" class="_section">
+				<div v-if="list" class="_section">
-				<div class="_content">
+					<div class="_content">
-					<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
+						<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
-					<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
+						<MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton>
-					<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
+						<MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton>
+					</div>
 				</div>
-			</div>
+			</transition>
-		</transition>
 
-		<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-			<div v-if="list" class="_section members _gap">
+				<div v-if="list" class="_section members _gap">
-				<div class="_title">{{ $ts.members }}</div>
+					<div class="_title">{{ i18n.ts.members }}</div>
-				<div class="_content">
+					<div class="_content">
-					<div class="users">
+						<div class="users">
-						<div v-for="user in users" :key="user.id" class="user _panel">
+							<div v-for="user in users" :key="user.id" class="user _panel">
-							<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-							<div class="body">
+								<div class="body">
-								<MkUserName :user="user" class="name"/>
+									<MkUserName :user="user" class="name"/>
-								<MkAcct :user="user" class="acct"/>
+									<MkAcct :user="user" class="acct"/>
-							</div>
+								</div>
-							<div class="action">
+								<div class="action">
-								<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+									<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-			</div>
+			</transition>
-		</transition>
+		</div>
-	</div>
+	</MkSpacer>
-</MkSpacer></MkStickyContainer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue';
+import { computed, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { mainRouter } from '@/router';

packages/client/src/pages/not-found.vue

@@ -2,7 +2,7 @@
 <div class="ipledcug">
 	<div class="_fullinfo">
 		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
-		<div>{{ $ts.notFoundDescription }}</div>
+		<div>{{ i18n.ts.notFoundDescription }}</div>
 	</div>
 </div>
 </template>

packages/client/src/pages/note.vue

@@ -16,7 +16,7 @@
 							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
 						</div>
 						<div v-if="clips && clips.length > 0" class="_content clips _gap">
-							<div class="title">{{ $ts.clip }}</div>
+							<div class="title">{{ i18n.ts.clip }}</div>
 							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
 								<b>{{ item.name }}</b>
 								<div v-if="item.description" class="description">{{ item.description }}</div>

packages/client/src/pages/page.vue

@@ -18,12 +18,12 @@
 					</div>
 					<div class="actions">
 						<div class="like">
-							<MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-							<MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 						</div>
 						<div class="other">
-							<button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-							<button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 						</div>
 					</div>
 					<div class="user">
@@ -35,21 +35,21 @@
 						<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 					</div>
 					<div class="links">
-						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
+						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
 						<template v-if="$i && $i.id === page.userId">
-							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
+							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
-							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
+							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ i18n.ts.unpin }}</button>
-							<button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
+							<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
 						</template>
 					</div>
 				</div>
 				<div class="footer">
-					<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div><i class="far fa-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-					<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 				</div>
 				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 				<MkContainer :max-height="300" :foldable="true" class="other">
-					<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
+					<template #header><i class="fas fa-clock"></i> {{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
 					</MkPagination>

packages/client/src/pages/registry.keys.vue

@@ -4,11 +4,11 @@
 	<MkSpacer :content-max="600" :margin-min="16">
 		<FormSplit>
 			<MkKeyValue class="_formBlock">
-				<template #key>{{ $ts._registry.domain }}</template>
+				<template #key>{{ i18n.ts._registry.domain }}</template>
-				<template #value>{{ $ts.system }}</template>
+				<template #value>{{ i18n.ts.system }}</template>
 			</MkKeyValue>
 			<MkKeyValue class="_formBlock">
-				<template #key>{{ $ts._registry.scope }}</template>
+				<template #key>{{ i18n.ts._registry.scope }}</template>
 				<template #value>{{ scope.join('/') }}</template>
 			</MkKeyValue>
 		</FormSplit>

packages/client/src/pages/registry.value.vue

@@ -2,36 +2,36 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="600" :margin-min="16">
-		<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>
+		<FormInfo warn>{{ i18n.ts.editTheseSettingsMayBreakAccount }}</FormInfo>
 
 		<template v-if="value">
 			<FormSplit>
 				<MkKeyValue class="_formBlock">
-					<template #key>{{ $ts._registry.domain }}</template>
+					<template #key>{{ i18n.ts._registry.domain }}</template>
-					<template #value>{{ $ts.system }}</template>
+					<template #value>{{ i18n.ts.system }}</template>
 				</MkKeyValue>
 				<MkKeyValue class="_formBlock">
-					<template #key>{{ $ts._registry.scope }}</template>
+					<template #key>{{ i18n.ts._registry.scope }}</template>
 					<template #value>{{ scope.join('/') }}</template>
 				</MkKeyValue>
 				<MkKeyValue class="_formBlock">
-					<template #key>{{ $ts._registry.key }}</template>
+					<template #key>{{ i18n.ts._registry.key }}</template>
 					<template #value>{{ key }}</template>
 				</MkKeyValue>
 			</FormSplit>
 			
 			<FormTextarea v-model="valueForEditor" tall class="_formBlock _monospace">
-				<template #label>{{ $ts.value }} (JSON)</template>
+				<template #label>{{ i18n.ts.value }} (JSON)</template>
 			</FormTextarea>
 
-			<MkButton class="_formBlock" primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+			<MkButton class="_formBlock" primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
 
 			<MkKeyValue class="_formBlock">
-				<template #key>{{ $ts.updatedAt }}</template>
+				<template #key>{{ i18n.ts.updatedAt }}</template>
 				<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
 			</MkKeyValue>
 
-			<MkButton danger @click="del"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
+			<MkButton danger @click="del"><i class="fas fa-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</template>
 	</MkSpacer>
 </MkStickyContainer>

packages/client/src/pages/settings/email.vue

@@ -1,39 +1,39 @@
 <template>
 <div class="_formRoot">
 	<FormSection>
-		<template #label>{{ $ts.emailAddress }}</template>
+		<template #label>{{ i18n.ts.emailAddress }}</template>
 		<FormInput v-model="emailAddress" type="email" manual-save>
 			<template #prefix><i class="fas fa-envelope"></i></template>
-			<template v-if="$i.email && !$i.emailVerified" #caption>{{ $ts.verificationEmailSent }}</template>
+			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="fas fa-check" style="color: var(--success);"></i> {{ $ts.emailVerified }}</template>
+			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="fas fa-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
 		</FormInput>
 	</FormSection>
 
 	<FormSection>
 		<FormSwitch :model-value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail">
-			{{ $ts.receiveAnnouncementFromInstance }}
+			{{ i18n.ts.receiveAnnouncementFromInstance }}
 		</FormSwitch>
 	</FormSection>
 
 	<FormSection>
-		<template #label>{{ $ts.emailNotification }}</template>
+		<template #label>{{ i18n.ts.emailNotification }}</template>
 		<FormSwitch v-model="emailNotification_mention" class="_formBlock">
-			{{ $ts._notification._types.mention }}
+			{{ i18n.ts._notification._types.mention }}
 		</FormSwitch>
 		<FormSwitch v-model="emailNotification_reply" class="_formBlock">
-			{{ $ts._notification._types.reply }}
+			{{ i18n.ts._notification._types.reply }}
 		</FormSwitch>
 		<FormSwitch v-model="emailNotification_quote" class="_formBlock">
-			{{ $ts._notification._types.quote }}
+			{{ i18n.ts._notification._types.quote }}
 		</FormSwitch>
 		<FormSwitch v-model="emailNotification_follow" class="_formBlock">
-			{{ $ts._notification._types.follow }}
+			{{ i18n.ts._notification._types.follow }}
 		</FormSwitch>
 		<FormSwitch v-model="emailNotification_receiveFollowRequest" class="_formBlock">
-			{{ $ts._notification._types.receiveFollowRequest }}
+			{{ i18n.ts._notification._types.receiveFollowRequest }}
 		</FormSwitch>
 		<FormSwitch v-model="emailNotification_groupInvited" class="_formBlock">
-			{{ $ts._notification._types.groupInvited }}
+			{{ i18n.ts._notification._types.groupInvited }}
 		</FormSwitch>
 	</FormSection>
 </div>

packages/client/src/pages/settings/import-export.vue

@@ -1,69 +1,69 @@
 <template>
 <div class="_formRoot">
 	<FormSection>
-		<template #label>{{ $ts._exportOrImport.allNotes }}</template>
+		<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
 		<FormFolder>
-			<template #label>{{ $ts.export }}</template>
+			<template #label>{{ i18n.ts.export }}</template>
 			<template #icon><i class="fas fa-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
-		<template #label>{{ $ts._exportOrImport.followingList }}</template>
+		<template #label>{{ i18n.ts._exportOrImport.followingList }}</template>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.export }}</template>
+			<template #label>{{ i18n.ts.export }}</template>
 			<template #icon><i class="fas fa-download"></i></template>
 			<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
-				{{ $ts._exportOrImport.excludeMutingUsers }}
+				{{ i18n.ts._exportOrImport.excludeMutingUsers }}
 			</FormSwitch>
 			<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
-				{{ $ts._exportOrImport.excludeInactiveUsers }}
+				{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
 			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.import }}</template>
+			<template #label>{{ i18n.ts.import }}</template>
 			<template #icon><i class="fas fa-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="fas fa-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
-		<template #label>{{ $ts._exportOrImport.userLists }}</template>
+		<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.export }}</template>
+			<template #label>{{ i18n.ts.export }}</template>
 			<template #icon><i class="fas fa-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.import }}</template>
+			<template #label>{{ i18n.ts.import }}</template>
 			<template #icon><i class="fas fa-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="fas fa-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
-		<template #label>{{ $ts._exportOrImport.muteList }}</template>
+		<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.export }}</template>
+			<template #label>{{ i18n.ts.export }}</template>
 			<template #icon><i class="fas fa-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.import }}</template>
+			<template #label>{{ i18n.ts.import }}</template>
 			<template #icon><i class="fas fa-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="fas fa-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
-		<template #label>{{ $ts._exportOrImport.blockingList }}</template>
+		<template #label>{{ i18n.ts._exportOrImport.blockingList }}</template>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.export }}</template>
+			<template #label>{{ i18n.ts.export }}</template>
 			<template #icon><i class="fas fa-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #label>{{ $ts.import }}</template>
+			<template #label>{{ i18n.ts.import }}</template>
 			<template #icon><i class="fas fa-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="fas fa-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 </div>

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

@@ -6,7 +6,7 @@
 			<div class="body">
 				<div v-if="!narrow || currentPage?.route.name == null" class="nav">
 					<div class="baaadecd">
-						<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+						<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
 						<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
 					</div>
 				</div>

packages/client/src/pages/settings/mute-block.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="_formRoot">
 	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="mute">{{ $ts.mutedUsers }}</option>
+		<option value="mute">{{ i18n.ts.mutedUsers }}</option>
-		<option value="block">{{ $ts.blockedUsers }}</option>
+		<option value="block">{{ i18n.ts.blockedUsers }}</option>
 	</MkTab>
 	<div v-if="tab === 'mute'">
 		<MkPagination :pagination="mutingPagination" class="muting">
-			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
+			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
 			<template #default="{items}">
 				<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
 					<MkAcct :user="mute.mutee"/>
@@ -16,7 +16,7 @@
 	</div>
 	<div v-if="tab === 'block'">
 		<MkPagination :pagination="blockingPagination" class="blocking">
-			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
+			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
 			<template #default="{items}">
 				<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
 					<MkAcct :user="block.blockee"/>

packages/client/src/pages/settings/privacy.vue

@@ -1,54 +1,54 @@
 <template>
 <div class="_formRoot">
-	<FormSwitch v-model="isLocked" class="_formBlock" @update:modelValue="save()">{{ $ts.makeFollowManuallyApprove }}<template #caption>{{ $ts.lockedAccountInfo }}</template></FormSwitch>
+	<FormSwitch v-model="isLocked" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
-	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:modelValue="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch>
+	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
 
 	<FormSwitch v-model="publicReactions" class="_formBlock" @update:modelValue="save()">
-		{{ $ts.makeReactionsPublic }}
+		{{ i18n.ts.makeReactionsPublic }}
-		<template #caption>{{ $ts.makeReactionsPublicDescription }}</template>
+		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
 	</FormSwitch>
 		
 	<FormSelect v-model="ffVisibility" class="_formBlock" @update:modelValue="save()">
-		<template #label>{{ $ts.ffVisibility }}</template>
+		<template #label>{{ i18n.ts.ffVisibility }}</template>
-		<option value="public">{{ $ts._ffVisibility.public }}</option>
+		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
-		<option value="followers">{{ $ts._ffVisibility.followers }}</option>
+		<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
-		<option value="private">{{ $ts._ffVisibility.private }}</option>
+		<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
-		<template #caption>{{ $ts.ffVisibilityDescription }}</template>
+		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
 	</FormSelect>
 		
 	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()">
-		{{ $ts.hideOnlineStatus }}
+		{{ i18n.ts.hideOnlineStatus }}
-		<template #caption>{{ $ts.hideOnlineStatusDescription }}</template>
+		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
 	</FormSwitch>
 	<FormSwitch v-model="noCrawle" class="_formBlock" @update:modelValue="save()">
-		{{ $ts.noCrawle }}
+		{{ i18n.ts.noCrawle }}
-		<template #caption>{{ $ts.noCrawleDescription }}</template>
+		<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
 	</FormSwitch>
 	<FormSwitch v-model="isExplorable" class="_formBlock" @update:modelValue="save()">
-		{{ $ts.makeExplorable }}
+		{{ i18n.ts.makeExplorable }}
-		<template #caption>{{ $ts.makeExplorableDescription }}</template>
+		<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
 	</FormSwitch>
 
 	<FormSection>
-		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch>
+		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
 		<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
-			<template #label>{{ $ts.defaultNoteVisibility }}</template>
+			<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
-			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ $ts._visibility.public }}</template>
+			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
-			<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ $ts._visibility.home }}</template>
+			<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
-			<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ $ts._visibility.followers }}</template>
+			<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
-			<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ $ts._visibility.specified }}</template>
+			<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
 
 			<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
-				<option value="public">{{ $ts._visibility.public }}</option>
+				<option value="public">{{ i18n.ts._visibility.public }}</option>
-				<option value="home">{{ $ts._visibility.home }}</option>
+				<option value="home">{{ i18n.ts._visibility.home }}</option>
-				<option value="followers">{{ $ts._visibility.followers }}</option>
+				<option value="followers">{{ i18n.ts._visibility.followers }}</option>
-				<option value="specified">{{ $ts._visibility.specified }}</option>
+				<option value="specified">{{ i18n.ts._visibility.specified }}</option>
 			</FormSelect>
-			<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ $ts._visibility.localOnly }}</FormSwitch>
+			<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ i18n.ts._visibility.localOnly }}</FormSwitch>
 		</FormFolder>
 	</FormSection>
 
-	<FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ $ts.keepCw }}</FormSwitch>
+	<FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.keepCw }}</FormSwitch>
 </div>
 </template>
 

packages/client/src/pages/settings/reaction.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<FromSlot class="_formBlock">
-		<template #label>{{ $ts.reactionSettingDescription }}</template>
+		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
 		<div v-panel style="border-radius: 6px;">
 			<XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
 				<template #item="{element}">
@@ -14,17 +14,17 @@
 				</template>
 			</XDraggable>
 		</div>
-		<template #caption>{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></template>
+		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
 	</FromSlot>
 
 	<FormRadios v-model="reactionPickerSize" class="_formBlock">
-		<template #label>{{ $ts.size }}</template>
+		<template #label>{{ i18n.ts.size }}</template>
-		<option :value="1">{{ $ts.small }}</option>
+		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ $ts.medium }}</option>
+		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ $ts.large }}</option>
+		<option :value="3">{{ i18n.ts.large }}</option>
 	</FormRadios>
 	<FormRadios v-model="reactionPickerWidth" class="_formBlock">
-		<template #label>{{ $ts.numberOfColumn }}</template>
+		<template #label>{{ i18n.ts.numberOfColumn }}</template>
 		<option :value="1">5</option>
 		<option :value="2">6</option>
 		<option :value="3">7</option>
@@ -32,22 +32,22 @@
 		<option :value="5">9</option>
 	</FormRadios>
 	<FormRadios v-model="reactionPickerHeight" class="_formBlock">
-		<template #label>{{ $ts.height }}</template>
+		<template #label>{{ i18n.ts.height }}</template>
-		<option :value="1">{{ $ts.small }}</option>
+		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ $ts.medium }}</option>
+		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ $ts.large }}</option>
+		<option :value="3">{{ i18n.ts.large }}</option>
-		<option :value="4">{{ $ts.large }}+</option>
+		<option :value="4">{{ i18n.ts.large }}+</option>
 	</FormRadios>
 
 	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
-		{{ $ts.useDrawerReactionPickerForMobile }}
+		{{ i18n.ts.useDrawerReactionPickerForMobile }}
-		<template #caption>{{ $ts.needReloadToApply }}</template>
+		<template #caption>{{ i18n.ts.needReloadToApply }}</template>
 	</FormSwitch>
 
 	<FormSection>
 		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-			<FormButton inline @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
+			<FormButton inline @click="preview"><i class="fas fa-eye"></i> {{ i18n.ts.preview }}</FormButton>
-			<FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
+			<FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ i18n.ts.default }}</FormButton>
 		</div>
 	</FormSection>
 </div>

packages/client/src/pages/settings/theme.vue

@@ -5,8 +5,8 @@
 			<div class="toggleWrapper">
 				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
 				<label for="dn" class="toggle">
-					<span class="before">{{ $ts.light }}</span>
+					<span class="before">{{ i18n.ts.light }}</span>
-					<span class="after">{{ $ts.dark }}</span>
+					<span class="after">{{ i18n.ts.dark }}</span>
 					<span class="toggle__handler">
 						<span class="crater crater--1"></span>
 						<span class="crater crater--2"></span>
@@ -22,28 +22,28 @@
 			</div>
 		</div>
 		<div class="sync">
-			<FormSwitch v-model="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch>
+			<FormSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</FormSwitch>
 		</div>
 	</div>
 
 	<div class="selects _formBlock">
 		<FormSelect v-model="lightThemeId" large class="select">
-			<template #label>{{ $ts.themeForLightMode }}</template>
+			<template #label>{{ i18n.ts.themeForLightMode }}</template>
 			<template #prefix><i class="fas fa-sun"></i></template>
-			<optgroup :label="$ts.lightThemes">
+			<optgroup :label="i18n.ts.lightThemes">
 				<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup :label="$ts.darkThemes">
+			<optgroup :label="i18n.ts.darkThemes">
 				<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
 			</optgroup>
 		</FormSelect>
 		<FormSelect v-model="darkThemeId" large class="select">
-			<template #label>{{ $ts.themeForDarkMode }}</template>
+			<template #label>{{ i18n.ts.themeForDarkMode }}</template>
 			<template #prefix><i class="fas fa-moon"></i></template>
-			<optgroup :label="$ts.darkThemes">
+			<optgroup :label="i18n.ts.darkThemes">
 				<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup :label="$ts.lightThemes">
+			<optgroup :label="i18n.ts.lightThemes">
 				<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
 			</optgroup>
 		</FormSelect>
@@ -51,15 +51,15 @@
 
 	<FormSection>
 		<div class="_formLinksGrid">
-			<FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
+			<FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ $ts._theme.explore }}</FormLink>
+			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
-			<FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._theme.install }}</FormLink>
+			<FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
-			<FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }}</FormLink>
+			<FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ i18n.ts._theme.make }}</FormLink>
 		</div>
 	</FormSection>
 
-	<FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton>
+	<FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
-	<FormButton v-else class="_formBlock" @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
+	<FormButton v-else class="_formBlock" @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
 </div>
 </template>
 

packages/client/src/pages/share.vue

@@ -16,7 +16,7 @@
 				class="_panel"
 				@posted="state = 'posted'"
 			/>
-			<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ $ts.close }}</MkButton>
+			<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
 		</div>
 	</section>
 </div>
@@ -25,7 +25,7 @@
 <script lang="ts" setup>
 // SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
 
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import { noteVisibilities } from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import * as Misskey from 'misskey-js';

packages/client/src/pages/timeline.tutorial.vue

@@ -1,52 +1,52 @@
 <template>
 <div class="_card tbkwesmv">
-	<div class="_title"><i class="fas fa-info-circle"></i> {{ $ts._tutorial.title }}</div>
+	<div class="_title"><i class="fas fa-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
 	<div v-if="tutorial === 0" class="_content">
-		<div>{{ $ts._tutorial.step1_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step1_1 }}</div>
-		<div>{{ $ts._tutorial.step1_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step1_2 }}</div>
-		<div>{{ $ts._tutorial.step1_3 }}</div>
+		<div>{{ i18n.ts._tutorial.step1_3 }}</div>
 	</div>
 	<div v-else-if="tutorial === 1" class="_content">
-		<div>{{ $ts._tutorial.step2_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step2_1 }}</div>
-		<div>{{ $ts._tutorial.step2_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step2_2 }}</div>
-		<MkA class="_link" to="/settings/profile">{{ $ts.editProfile }}</MkA>
+		<MkA class="_link" to="/settings/profile">{{ i18n.ts.editProfile }}</MkA>
 	</div>
 	<div v-else-if="tutorial === 2" class="_content">
-		<div>{{ $ts._tutorial.step3_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step3_1 }}</div>
-		<div>{{ $ts._tutorial.step3_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step3_2 }}</div>
-		<div>{{ $ts._tutorial.step3_3 }}</div>
+		<div>{{ i18n.ts._tutorial.step3_3 }}</div>
-		<small>{{ $ts._tutorial.step3_4 }}</small>
+		<small>{{ i18n.ts._tutorial.step3_4 }}</small>
 	</div>
 	<div v-else-if="tutorial === 3" class="_content">
-		<div>{{ $ts._tutorial.step4_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step4_1 }}</div>
-		<div>{{ $ts._tutorial.step4_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step4_2 }}</div>
 	</div>
 	<div v-else-if="tutorial === 4" class="_content">
-		<div>{{ $ts._tutorial.step5_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step5_1 }}</div>
-		<I18n :src="$ts._tutorial.step5_2" tag="div">
+		<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
 			<template #featured>
-				<MkA class="_link" to="/featured">{{ $ts.featured }}</MkA>
+				<MkA class="_link" to="/featured">{{ i18n.ts.featured }}</MkA>
 			</template>
 			<template #explore>
-				<MkA class="_link" to="/explore">{{ $ts.explore }}</MkA>
+				<MkA class="_link" to="/explore">{{ i18n.ts.explore }}</MkA>
 			</template>
 		</I18n>
-		<div>{{ $ts._tutorial.step5_3 }}</div>
+		<div>{{ i18n.ts._tutorial.step5_3 }}</div>
-		<small>{{ $ts._tutorial.step5_4 }}</small>
+		<small>{{ i18n.ts._tutorial.step5_4 }}</small>
 	</div>
 	<div v-else-if="tutorial === 5" class="_content">
-		<div>{{ $ts._tutorial.step6_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step6_1 }}</div>
-		<div>{{ $ts._tutorial.step6_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step6_2 }}</div>
-		<div>{{ $ts._tutorial.step6_3 }}</div>
+		<div>{{ i18n.ts._tutorial.step6_3 }}</div>
 	</div>
 	<div v-else-if="tutorial === 6" class="_content">
-		<div>{{ $ts._tutorial.step7_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step7_1 }}</div>
-		<I18n :src="$ts._tutorial.step7_2" tag="div">
+		<I18n :src="i18n.ts._tutorial.step7_2" tag="div">
 			<template #help>
-				<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ $ts.help }}</a>
+				<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
 			</template>
 		</I18n>
-		<div>{{ $ts._tutorial.step7_3 }}</div>
+		<div>{{ i18n.ts._tutorial.step7_3 }}</div>
 	</div>
 
 	<div class="_footer navigation">
@@ -59,8 +59,8 @@
 				<i class="fas fa-chevron-right"></i>
 			</button>
 		</div>
-		<MkButton v-if="tutorial === 6" class="ok" primary @click="tutorial = -1"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
+		<MkButton v-if="tutorial === 6" class="ok" primary @click="tutorial = -1"><i class="fas fa-check"></i> {{ i18n.ts.gotIt }}</MkButton>
-		<MkButton v-else class="ok" primary @click="tutorial++"><i class="fas fa-check"></i> {{ $ts.next }}</MkButton>
+		<MkButton v-else class="ok" primary @click="tutorial++"><i class="fas fa-check"></i> {{ i18n.ts.next }}</MkButton>
 	</div>
 </div>
 </template>
@@ -69,10 +69,11 @@
 import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const tutorial = computed({
 	get() { return defaultStore.reactiveState.tutorial.value || 0; },
-	set(value) { defaultStore.set('tutorial', value); }
+	set(value) { defaultStore.set('tutorial', value); },
 });
 </script>
 

packages/client/src/pages/timeline.vue

@@ -6,7 +6,7 @@
 			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
 			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
-			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 			<div class="tl _block">
 				<XTimeline
 					ref="tl" :key="src"

packages/client/src/pages/user-info.vue

@@ -57,15 +57,15 @@
 
 					<div class="_formBlock">
 						<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
-							<template #key>{{ $ts.instanceInfo }}</template>
+							<template #key>{{ i18n.ts.instanceInfo }}</template>
 							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="fas fa-angle-right"></i></MkA></template>
 						</MkKeyValue>
 						<MkKeyValue v-else oneline style="margin: 1em 0;">
-							<template #key>{{ $ts.instanceInfo }}</template>
+							<template #key>{{ i18n.ts.instanceInfo }}</template>
 							<template #value>(Local user)</template>
 						</MkKeyValue>
 						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ $ts.updatedAt }}</template>
+							<template #key>{{ i18n.ts.updatedAt }}</template>
 							<template #value><MkTime v-if="user.lastFetchedAt" mode="detail" :time="user.lastFetchedAt"/><span v-else>N/A</span></template>
 						</MkKeyValue>
 						<MkKeyValue v-if="ap" oneline style="margin: 1em 0;">
@@ -74,7 +74,7 @@
 						</MkKeyValue>
 					</div>
 
-					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ $ts.updateRemoteUser }}</FormButton>
+					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
 
 					<FormFolder class="_formBlock">
 						<template #label>Raw</template>
@@ -85,13 +85,13 @@
 				</FormSection>
 			</div>
 			<div v-else-if="tab === 'moderation'" class="_formRoot">
-				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ $ts.moderator }}</FormSwitch>
+				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ i18n.ts.moderator }}</FormSwitch>
-				<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ $ts.silence }}</FormSwitch>
+				<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</FormSwitch>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.suspend }}</FormSwitch>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
-				{{ $ts.reflectMayTakeTime }}
+				{{ i18n.ts.reflectMayTakeTime }}
 				<div class="_formBlock">
-					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</FormButton>
+					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="fas fa-key"></i> {{ i18n.ts.resetPassword }}</FormButton>
-					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ $ts.deleteAccount }}</FormButton>
+					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton>
 				</div>
 				<FormTextarea v-model="moderationNote" manual-save class="_formBlock">
 					<template #label>Moderation note</template>
@@ -128,7 +128,7 @@
 				<div class="cmhjzshm">
 					<div class="selects">
 						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-							<option value="per-user-notes">{{ $ts.notes }}</option>
+							<option value="per-user-notes">{{ i18n.ts.notes }}</option>
 						</MkSelect>
 					</div>
 					<div class="charts">

packages/client/src/pages/user-list-timeline.vue

@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 		<div class="tl _block">
 			<XTimeline
 				ref="tlEl" :key="listId"

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

@@ -3,8 +3,8 @@
 	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
 		<div class="main">
 			<!-- TODO -->
-			<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
+			<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
-			<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
+			<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
 
 			<div class="profile">
 				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
@@ -17,13 +17,13 @@
 							<MkUserName class="name" :user="user" :nowrap="true"/>
 							<div class="bottom">
 								<span class="username"><MkAcct :user="user" :detail="true"/></span>
-								<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
-								<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
-								<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="fas fa-lock"></i></span>
-								<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="fas fa-robot"></i></span>
 							</div>
 						</div>
-						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 						<div v-if="$i" class="actions">
 							<button class="menu _button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
 							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
@@ -34,27 +34,27 @@
 						<MkUserName :user="user" :nowrap="false" class="name"/>
 						<div class="bottom">
 							<span class="username"><MkAcct :user="user" :detail="true"/></span>
-							<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
-							<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
-							<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="fas fa-lock"></i></span>
-							<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="fas fa-robot"></i></span>
 						</div>
 					</div>
 					<div class="description">
 						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-						<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
+						<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
 					</div>
 					<div class="fields system">
 						<dl v-if="user.location" class="field">
-							<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
+							<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ i18n.ts.location }}</dt>
 							<dd class="value">{{ user.location }}</dd>
 						</dl>
 						<dl v-if="user.birthday" class="field">
-							<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
+							<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ i18n.ts.birthday }}</dt>
 							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
 						</dl>
 						<dl class="field">
-							<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
+							<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ i18n.ts.registeredDate }}</dt>
 							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
 						</dl>
 					</div>
@@ -71,15 +71,15 @@
 					<div class="status">
 						<MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
 							<b>{{ number(user.notesCount) }}</b>
-							<span>{{ $ts.notes }}</span>
+							<span>{{ i18n.ts.notes }}</span>
 						</MkA>
 						<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
 							<b>{{ number(user.followingCount) }}</b>
-							<span>{{ $ts.following }}</span>
+							<span>{{ i18n.ts.following }}</span>
 						</MkA>
 						<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
 							<b>{{ number(user.followersCount) }}</b>
-							<span>{{ $ts.followers }}</span>
+							<span>{{ i18n.ts.followers }}</span>
 						</MkA>
 					</div>
 				</div>
@@ -89,7 +89,7 @@
 				<div v-if="user.pinnedNotes.length > 0" class="_gap">
 					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
 				</div>
-				<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
+				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">
 					<XPhotos :key="user.id" :user="user"/>
 					<XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>

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

@@ -2,9 +2,9 @@
 <MkStickyContainer>
 	<template #header>
 		<MkTab v-model="include" :class="$style.tab">
-			<option :value="null">{{ $ts.notes }}</option>
+			<option :value="null">{{ i18n.ts.notes }}</option>
-			<option value="replies">{{ $ts.notesAndReplies }}</option>
+			<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
-			<option value="files">{{ $ts.withFiles }}</option>
+			<option value="files">{{ i18n.ts.withFiles }}</option>
 		</MkTab>
 	</template>
 	<XNotes :no-gap="true" :pagination="pagination"/>
@@ -17,6 +17,7 @@ import * as misskey from 'misskey-js';
 import XNotes from '@/components/notes.vue';
 import MkTab from '@/components/tab.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;

packages/client/src/ui/_common_/navbar-for-mobile.vue

@@ -9,30 +9,30 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
 				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+					<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
 					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-				<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+				<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
-				<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+				<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</button>
 			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
 			<button class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+				<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>

packages/client/src/ui/_common_/stream-indicator.vue

@@ -1,9 +1,9 @@
 <template>
 <div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
-	<div>{{ $ts.disconnectedFromServer }}</div>
+	<div>{{ i18n.ts.disconnectedFromServer }}</div>
 	<div class="command">
-		<button class="_textButton" @click="reload">{{ $ts.reload }}</button>
+		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
-		<button class="_textButton">{{ $ts.doNothing }}</button>
+		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
 	</div>
 </div>
 </template>
@@ -11,6 +11,7 @@
 <script lang="ts" setup>
 import { onUnmounted } from 'vue';
 import { stream } from '@/stream';
+import { i18n } from '@/i18n';
 
 let hasDisconnected = $ref(false);
 

packages/client/src/ui/_common_/upload.vue

@@ -6,7 +6,7 @@
 			<div class="top">
 				<p class="name"><i class="fas fa-spinner fa-pulse"></i>{{ ctx.name }}</p>
 				<p class="status">
-					<span v-if="ctx.progressValue === undefined" class="initing">{{ $ts.waiting }}<MkEllipsis/></span>
+					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
 					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
 					<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
 				</p>
@@ -21,6 +21,7 @@
 import { } from 'vue';
 import * as os from '@/os';
 import { uploads } from '@/scripts/upload';
+import { i18n } from '@/i18n';
 
 const zIndex = os.claimZIndex('high');
 </script>

packages/client/src/widgets/activity.vue

@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="fas fa-chart-simple"></i>{{ $ts._widgets.activity }}</template>
+	<template #header><i class="fas fa-chart-simple"></i>{{ i18n.ts._widgets.activity }}</template>
 	<template #func><button class="_button" @click="toggleView()"><i class="fas fa-sort"></i></button></template>
 
 	<div>
@@ -22,6 +22,7 @@ import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
 import { $i } from '@/account';
+import { i18n } from '@/i18n';
 
 const name = 'activity';
 

packages/client/src/widgets/aiscript.vue

@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
-	<template #header><i class="fas fa-terminal"></i>{{ $ts._widgets.aiscript }}</template>
+	<template #header><i class="fas fa-terminal"></i>{{ i18n.ts._widgets.aiscript }}</template>
 
 	<div class="uylguesu _monospace">
 		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
@@ -14,13 +14,14 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
+import { AiScript, parse, utils } from '@syuilo/aiscript';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
 import { createAiScriptEnv } from '@/scripts/aiscript/api';
 import { $i } from '@/account';
+import { i18n } from '@/i18n';
 
 const name = 'aiscript';
 
@@ -88,7 +89,7 @@ const run = async () => {
 				}); break;
 				default: break;
 			}
-		}
+		},
 	});
 
 	let ast;

packages/client/src/widgets/calendar.vue

@@ -11,19 +11,19 @@
 	</div>
 	<div class="info">
 		<div>
-			<p>{{ $ts.today }}: <b>{{ dayP.toFixed(1) }}%</b></p>
+			<p>{{ i18n.ts.today }}: <b>{{ dayP.toFixed(1) }}%</b></p>
 			<div class="meter">
 				<div class="val" :style="{ width: `${dayP}%` }"></div>
 			</div>
 		</div>
 		<div>
-			<p>{{ $ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b></p>
+			<p>{{ i18n.ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b></p>
 			<div class="meter">
 				<div class="val" :style="{ width: `${monthP}%` }"></div>
 			</div>
 		</div>
 		<div>
-			<p>{{ $ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b></p>
+			<p>{{ i18n.ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b></p>
 			<div class="meter">
 				<div class="val" :style="{ width: `${yearP}%` }"></div>
 			</div>

packages/client/src/widgets/federation.vue

@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="fas fa-globe"></i>{{ $ts._widgets.federation }}</template>
+	<template #header><i class="fas fa-globe"></i>{{ i18n.ts._widgets.federation }}</template>
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
@@ -26,6 +26,7 @@ import MkContainer from '@/components/ui/container.vue';
 import MkMiniChart from '@/components/mini-chart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
 
 const name = 'federation';
 

packages/client/src/widgets/memo.vue

@@ -1,21 +1,22 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
-	<template #header><i class="fas fa-sticky-note"></i>{{ $ts._widgets.memo }}</template>
+	<template #header><i class="fas fa-sticky-note"></i>{{ i18n.ts._widgets.memo }}</template>
 
 	<div class="otgbylcu">
-		<textarea v-model="text" :placeholder="$ts.placeholder" @input="onChange"></textarea>
+		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
-		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ $ts.save }}</button>
+		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
 	</div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const name = 'memo';
 

packages/client/src/widgets/notifications.vue

@@ -1,6 +1,6 @@
 <template>
 <MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
+	<template #header><i class="fas fa-bell"></i>{{ i18n.ts.notifications }}</template>
 	<template #func><button class="_button" @click="configureNotification()"><i class="fas fa-cog"></i></button></template>
 
 	<div>
@@ -10,12 +10,13 @@
 </template>
 
 <script lang="ts" setup>
-import { GetFormResultType } from '@/scripts/form';
+import { defineAsyncComponent } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
-import { defineAsyncComponent } from 'vue';
+import { i18n } from '@/i18n';
 
 const name = 'notifications';
 
@@ -57,7 +58,7 @@ const configureNotification = () => {
 			const { includingTypes } = res;
 			widgetProps.includingTypes = includingTypes;
 			save();
-		}
+		},
 	}, 'closed');
 };
 

packages/client/src/widgets/online-users.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
-	<I18n v-if="onlineUsersCount" :src="$ts.onlineUsersCount" text-tag="span" class="text">
+	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
 		<template #n><b>{{ onlineUsersCount }}</b></template>
 	</I18n>
 </div>
@@ -12,6 +12,7 @@ import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExp
 import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
 
 const name = 'onlineUsers';
 

packages/client/src/widgets/photos.vue

@@ -1,11 +1,12 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
-	<template #header><i class="fas fa-camera"></i>{{ $ts._widgets.photos }}</template>
+	<template #header><i class="fas fa-camera"></i>{{ i18n.ts._widgets.photos }}</template>
 
 	<div class="">
 		<MkLoading v-if="fetching"/>
 		<div v-else :class="$style.stream">
-			<div v-for="(image, i) in images" :key="i"
+			<div
+				v-for="(image, i) in images" :key="i"
 				:class="$style.img"
 				:style="`background-image: url(${thumbnail(image)})`"
 			></div>
@@ -16,13 +17,14 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import { stream } from '@/stream';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const name = 'photos';
 
@@ -70,7 +72,7 @@ const thumbnail = (image: any): string => {
 
 os.api('drive/stream', {
 	type: 'image/*',
-	limit: 9
+	limit: 9,
 }).then(res => {
 	images.value = res;
 	fetching.value = false;

packages/client/src/widgets/server-metric/index.vue

@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
-	<template #header><i class="fas fa-server"></i>{{ $ts._widgets.serverMetric }}</template>
+	<template #header><i class="fas fa-server"></i>{{ i18n.ts._widgets.serverMetric }}</template>
 	<template #func><button class="_button" @click="toggleView()"><i class="fas fa-sort"></i></button></template>
 
 	<div v-if="meta" class="mkw-serverMetric">
@@ -15,16 +15,17 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget';
-import MkContainer from '@/components/ui/container.vue';
 import XCpuMemory from './cpu-mem.vue';
 import XNet from './net.vue';
 import XCpu from './cpu.vue';
 import XMemory from './mem.vue';
 import XDisk from './disk.vue';
+import MkContainer from '@/components/ui/container.vue';
+import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import { stream } from '@/stream';
+import { i18n } from '@/i18n';
 
 const name = 'serverMetric';
 

packages/client/src/widgets/slideshow.vue

@@ -2,7 +2,7 @@
 <div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
 	<div @click="choose">
 		<p v-if="widgetProps.folderId == null">
-			{{ $ts.folder }}
+			{{ i18n.ts.folder }}
 		</p>
 		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ $t('no-image') }}</p>
 		<div ref="slideA" class="slide a"></div>
@@ -17,6 +17,7 @@ import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExp
 import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
 
 const name = 'slideshow';
 

packages/client/src/widgets/trends.vue

@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="fas fa-hashtag"></i>{{ $ts._widgets.trends }}</template>
+	<template #header><i class="fas fa-hashtag"></i>{{ i18n.ts._widgets.trends }}</template>
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
@@ -25,6 +25,7 @@ import MkContainer from '@/components/ui/container.vue';
 import MkMiniChart from '@/components/mini-chart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
 
 const name = 'hashtags';