Refactoring of i18n (#3165)

Refactoring of i18n

13 files changed, 97 insertions, 75 deletions

diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index ac811ce7cc..27a1f7e970 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -27,11 +27,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import Menu from '../../../../common/views/components/menu.vue';
 import contextmenu from '../../../api/contextmenu';
 import { countIf } from '../../../../../../prelude/array';
 
 export default Vue.extend({
+	i18n: i18n('deck'),
 	props: {
 		column: {
 			type: Object,
@@ -164,10 +166,10 @@ export default Vue.extend({
 		getMenu() {
 			const items = [{
 				icon: 'pencil-alt',
-				text: '%i18n:common.deck.rename%',
+				text: this.$t('rename'),
 				action: () => {
 					(this as any).apis.input({
-						title: '%i18n:common.deck.rename%',
+						title: this.$t('rename'),
 						default: this.name,
 						allowEmpty: false
 					}).then(name => {
@@ -176,43 +178,43 @@ export default Vue.extend({
 				}
 			}, null, {
 				icon: 'arrow-left',
-				text: '%i18n:common.deck.swap-left%',
+				text: this.$t('swap-left'),
 				action: () => {
 					this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
 				}
 			}, {
 				icon: 'arrow-right',
-				text: '%i18n:common.deck.swap-right%',
+				text: this.$t('swap-right'),
 				action: () => {
 					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: 'arrow-up',
-				text: '%i18n:common.deck.swap-up%',
+				text: this.$t('swap-up'),
 				action: () => {
 					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
 				}
 			} : undefined, this.isStacked ? {
 				icon: 'arrow-down',
-				text: '%i18n:common.deck.swap-down%',
+				text: this.$t('swap-down'),
 				action: () => {
 					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
 				icon: ['far', 'window-restore'],
-				text: '%i18n:common.deck.stack-left%',
+				text: this.$t('stack-left'),
 				action: () => {
 					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: ['far', 'window-maximize'],
-				text: '%i18n:common.deck.pop-right%',
+				text: this.$t('pop-right'),
 				action: () => {
 					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
 				icon: ['far', 'trash-alt'],
-				text: '%i18n:common.deck.remove%',
+				text: this.$t('remove'),
 				action: () => {
 					this.$store.dispatch('settings/removeDeckColumn', this.column.id);
 				}
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
index baee7ff5e5..cdeba95f5f 100644
--- a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
@@ -8,10 +8,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XColumn from './deck.column.vue';
 import XDirect from './deck.direct.vue';
 
 export default Vue.extend({
+	i18n: i18n(),
 	components: {
 		XColumn,
 		XDirect
@@ -31,7 +33,7 @@ export default Vue.extend({
 	computed: {
 		name(): string {
 			if (this.column.name) return this.column.name;
-			return '%i18n:common.deck.direct%';
+			return this.$t('@deck.direct');
 		}
 	},
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct.vue b/src/client/app/desktop/views/pages/deck/deck.direct.vue
index 47fb15370b..c85d9c1bb9 100644
--- a/src/client/app/desktop/views/pages/deck/deck.direct.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.direct.vue
@@ -1,5 +1,5 @@
 <template>
-	<x-notes ref="timeline" :more="existMore ? more : null"/>
+<x-notes ref="timeline" :more="existMore ? more : null"/>
 </template>
 
 <script lang="ts">
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
index 19537a2db0..011a321c3a 100644
--- a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
@@ -8,10 +8,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XColumn from './deck.column.vue';
 import XMentions from './deck.mentions.vue';
 
 export default Vue.extend({
+	i18n: i18n(),
 	components: {
 		XColumn,
 		XMentions
@@ -31,7 +33,7 @@ export default Vue.extend({
 	computed: {
 		name(): string {
 			if (this.column.name) return this.column.name;
-			return '%i18n:common.deck.mentions%';
+			return this.$t('@deck.mentions');
 		}
 	},
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions.vue b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
index 7890e68409..1935d26722 100644
--- a/src/client/app/desktop/views/pages/deck/deck.mentions.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
@@ -1,5 +1,5 @@
 <template>
-	<x-notes ref="timeline" :more="existMore ? more : null"/>
+<x-notes ref="timeline" :more="existMore ? more : null"/>
 </template>
 
 <script lang="ts">
diff --git a/src/client/app/desktop/views/pages/deck/deck.note-column.vue b/src/client/app/desktop/views/pages/deck/deck.note-column.vue
index dae6debe7e..c90b5f61b7 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note-column.vue
@@ -7,8 +7,8 @@
 	<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
 		<div class="is-remote" v-if="note.user.host != null">
 			<details>
-				<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-post%</summary>
-				<a :href="note.url || note.uri" target="_blank">%i18n:common.view-on-remote%</a>
+				<summary><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-post') }}</summary>
+				<a :href="note.url || note.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
 			</details>
 		</div>
 		<x-note :note="note" :detail="true" :mini="true"/>
@@ -18,11 +18,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XColumn from './deck.column.vue';
 import XNotes from './deck.notes.vue';
 import XNote from '../../components/note.vue';
 
 export default Vue.extend({
+	i18n: i18n(),
 	components: {
 		XColumn,
 		XNotes,
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index b7a47ddb27..611b28ffc0 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -30,7 +30,7 @@
 
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">%i18n:@load-more%</template>
+			<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
 			<template v-if="moreFetching"><fa icon="spinner .pulse" fixed-width/></template>
 		</button>
 	</footer>
@@ -39,12 +39,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 
 import XNote from '../../components/note.vue';
 
 const displayLimit = 20;
 
 export default Vue.extend({
+	i18n: i18n(),
 	components: {
 		XNote
 	},
@@ -80,7 +82,7 @@ export default Vue.extend({
 				const date = new Date(note.createdAt).getDate();
 				const month = new Date(note.createdAt).getMonth() + 1;
 				note._date = date;
-				note._datetext = '%i18n:common.month-and-day%'.replace('{month}', month.toString()).replace('{day}', date.toString());
+				note._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
 				return note;
 			});
 		}
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
index 5ecc41d690..69da7919b6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
@@ -8,10 +8,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XColumn from './deck.column.vue';
 import XNotifications from './deck.notifications.vue';
 
 export default Vue.extend({
+	i18n: i18n(),
 	components: {
 		XColumn,
 		XNotifications
@@ -31,7 +33,7 @@ export default Vue.extend({
 	computed: {
 		name(): string {
 			if (this.column.name) return this.column.name;
-			return '%i18n:common.deck.notifications%';
+			return this.$t('@deck.notifications');
 		}
 	},
 });
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index 168ecc14fe..3071795706 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -17,19 +17,21 @@
 		</template>
 	</component>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
-		<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
+		<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? this.$t('@.loading') : this.$t('@.load-more') }}
 	</button>
-	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
+	<p class="empty" v-if="notifications.length == 0 && !fetching">{{ $t('empty') }}</p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XNotification from './deck.notification.vue';
 
 const displayLimit = 20;
 
 export default Vue.extend({
+	i18n: i18n(),
 	components: {
 		XNotification
 	},
@@ -53,7 +55,7 @@ export default Vue.extend({
 				const date = new Date(notification.createdAt).getDate();
 				const month = new Date(notification.createdAt).getMonth() + 1;
 				notification._date = date;
-				notification._datetext = '%i18n:common.month-and-day%'.replace('{month}', month.toString()).replace('{day}', date.toString());
+				notification._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
 				return notification;
 			});
 		}
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
index 44ef4eda1c..c962dd0ec8 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
@@ -11,8 +11,8 @@
 	</span>
 
 	<div class="editor" style="padding:0 12px" v-if="edit">
-		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch>
-		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch>
+		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">{{ $t('is-media-only') }}</ui-switch>
+		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">{{ $t('is-media-view') }}</ui-switch>
 	</div>
 
 	<x-list-tl v-if="column.type == 'list'"
@@ -38,12 +38,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XColumn from './deck.column.vue';
 import XTl from './deck.tl.vue';
 import XListTl from './deck.list-tl.vue';
 import XHashtagTl from './deck.hashtag-tl.vue';
 
 export default Vue.extend({
+	i18n: i18n('deck/deck.tl-column.vue'),
 	components: {
 		XColumn,
 		XTl,
@@ -67,7 +69,7 @@ export default Vue.extend({
 			edit: false,
 			menu: [{
 				icon: 'cog',
-				text: '%i18n:@edit%',
+				text: this.$t('edit'),
 				action: () => {
 					this.edit = !this.edit;
 				}
@@ -80,10 +82,10 @@ export default Vue.extend({
 			if (this.column.name) return this.column.name;
 
 			switch (this.column.type) {
-				case 'home': return '%i18n:common.deck.home%';
-				case 'local': return '%i18n:common.deck.local%';
-				case 'hybrid': return '%i18n:common.deck.hybrid%';
-				case 'global': return '%i18n:common.deck.global%';
+				case 'home': return this.$t('@deck.home');
+				case 'local': return this.$t('@deck.local');
+				case 'hybrid': return this.$t('@deck.hybrid');
+				case 'global': return this.$t('@deck.global');
 				case 'list': return this.column.list.title;
 				case 'hashtag': return this.$store.state.settings.tagTimelines.find(x => x.id == this.column.tagTlId).title;
 			}
diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
index 8bd5421718..c4da00f3d3 100644
--- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
@@ -7,8 +7,8 @@
 	<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
 		<div class="is-remote" v-if="user.host != null">
 			<details>
-				<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%</summary>
-				<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a>
+				<summary><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}</summary>
+				<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
 			</details>
 		</div>
 		<header :style="bannerStyle">
@@ -27,20 +27,20 @@
 			<div class="counts">
 				<div>
 					<b>{{ user.notesCount | number }}</b>
-					<span>%i18n:@posts%</span>
+					<span>{{ $t('posts') }}</span>
 				</div>
 				<div>
 					<b>{{ user.followingCount | number }}</b>
-					<span>%i18n:@following%</span>
+					<span>{{ $t('following') }}</span>
 				</div>
 				<div>
 					<b>{{ user.followersCount | number }}</b>
-					<span>%i18n:@followers%</span>
+					<span>{{ $t('followers') }}</span>
 				</div>
 			</div>
 		</div>
 		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
-			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> %i18n:@pinned-notes%</p>
+			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</p>
 			<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
 			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div class="notes" v-show="showPinned">
@@ -48,7 +48,7 @@
 			</div>
 		</div>
 		<div class="images" v-if="images.length > 0">
-			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> %i18n:@images%</p>
+			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> {{ $t('images') }}</p>
 			<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
 			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div v-show="showImages">
@@ -61,7 +61,7 @@
 			</div>
 		</div>
 		<div class="activity">
-			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> %i18n:@activity%</p>
+			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</p>
 			<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
 			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div v-show="showActivity">
@@ -69,7 +69,7 @@
 			</div>
 		</div>
 		<div class="tl">
-			<p class="caption"><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</p>
+			<p class="caption"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</p>
 			<div>
 				<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
 			</div>
@@ -80,6 +80,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import parseAcct from '../../../../../../misc/acct/parse';
 import XColumn from './deck.column.vue';
 import XNotes from './deck.notes.vue';
@@ -93,6 +94,7 @@ import * as ApexCharts from 'apexcharts';
 const fetchLimit = 10;
 
 export default Vue.extend({
+	i18n: i18n('deck/deck.user-column.vue'),
 	components: {
 		XColumn,
 		XNotes,
@@ -295,7 +297,7 @@ export default Vue.extend({
 		menu() {
 			let menu = [{
 				icon: 'list',
-				text: '%i18n:@push-to-a-list%',
+				text: this.$t('push-to-a-list'),
 				action: () => {
 					const w = (this as any).os.new(MkUserListsWindow);
 					w.$once('choosen', async list => {
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index e1b9e76813..7badd2a9fe 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -14,13 +14,14 @@
 			<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
 			<x-hashtag-column v-else-if="temporaryColumn.type == 'tag'" :tag="temporaryColumn.tag" :key="temporaryColumn.tag"/>
 		</template>
-		<button ref="add" @click="add" title="%i18n:common.deck.add-column%"><fa icon="plus"/></button>
+		<button ref="add" @click="add" :title="$t('@deck.add-column')"><fa icon="plus"/></button>
 	</div>
 </mk-ui>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XColumnCore from './deck.column-core.vue';
 import Menu from '../../../../common/views/components/menu.vue';
 import MkUserListsWindow from '../../components/user-lists-window.vue';
@@ -31,6 +32,7 @@ import XHashtagColumn from './deck.hashtag-column.vue';
 import * as uuid from 'uuid';
 
 export default Vue.extend({
+	i18n: i18n('deck'),
 	components: {
 		XColumnCore,
 		XUserColumn,
@@ -183,7 +185,7 @@ export default Vue.extend({
 				compact: true,
 				items: [{
 					icon: 'home',
-					text: '%i18n:common.deck.home%',
+					text: this.$t('@deck.home'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
@@ -192,7 +194,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: ['far', 'comments'],
-					text: '%i18n:common.deck.local%',
+					text: this.$t('@deck.local'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
@@ -201,7 +203,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: 'share-alt',
-					text: '%i18n:common.deck.hybrid%',
+					text: this.$t('@deck.hybrid'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
@@ -210,7 +212,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: 'globe',
-					text: '%i18n:common.deck.global%',
+					text: this.$t('@deck.global'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
@@ -219,7 +221,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: 'at',
-					text: '%i18n:common.deck.mentions%',
+					text: this.$t('@deck.mentions'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
@@ -228,7 +230,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: ['far', 'envelope'],
-					text: '%i18n:common.deck.direct%',
+					text: this.$t('@deck.direct'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
@@ -237,7 +239,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: 'list',
-					text: '%i18n:common.deck.list%',
+					text: this.$t('@deck.list'),
 					action: () => {
 						const w = (this as any).os.new(MkUserListsWindow);
 						w.$once('choosen', list => {
@@ -251,10 +253,10 @@ export default Vue.extend({
 					}
 				}, {
 					icon: 'hashtag',
-					text: '%i18n:common.deck.hashtag%',
+					text: this.$t('@deck.hashtag'),
 					action: () => {
 						(this as any).apis.input({
-							title: '%i18n:@enter-hashtag-tl-title%'
+							title: this.$t('enter-hashtag-tl-title')
 						}).then(title => {
 							this.$store.dispatch('settings/addDeckColumn', {
 								id: uuid(),
@@ -265,7 +267,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: ['far', 'bell'],
-					text: '%i18n:common.deck.notifications%',
+					text: this.$t('@deck.notifications'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
@@ -274,7 +276,7 @@ export default Vue.extend({
 					}
 				}, {
 					icon: 'calculator',
-					text: '%i18n:common.deck.widgets%',
+					text: this.$t('@deck.widgets'),
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index 34b2af7d1b..2cdef50991 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -6,29 +6,29 @@
 		<template v-if="edit">
 			<header>
 				<select v-model="widgetAdderSelected" @change="addWidget">
-					<option value="profile">%i18n:common.widgets.profile%</option>
-					<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
-					<option value="calendar">%i18n:common.widgets.calendar%</option>
-					<option value="timemachine">%i18n:common.widgets.timemachine%</option>
-					<option value="activity">%i18n:common.widgets.activity%</option>
-					<option value="rss">%i18n:common.widgets.rss%</option>
-					<option value="trends">%i18n:common.widgets.trends%</option>
-					<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
-					<option value="slideshow">%i18n:common.widgets.slideshow%</option>
-					<option value="version">%i18n:common.widgets.version%</option>
-					<option value="broadcast">%i18n:common.widgets.broadcast%</option>
-					<option value="notifications">%i18n:common.widgets.notifications%</option>
-					<option value="users">%i18n:common.widgets.users%</option>
-					<option value="polls">%i18n:common.widgets.polls%</option>
-					<option value="post-form">%i18n:common.widgets.post-form%</option>
-					<option value="messaging">%i18n:common.widgets.messaging%</option>
-					<option value="memo">%i18n:common.widgets.memo%</option>
-					<option value="hashtags">%i18n:common.widgets.hashtags%</option>
-					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
-					<option value="server">%i18n:common.widgets.server%</option>
-					<option value="donation">%i18n:common.widgets.donation%</option>
-					<option value="nav">%i18n:common.widgets.nav%</option>
-					<option value="tips">%i18n:common.widgets.tips%</option>
+					<option value="profile">{{ $t('@.widgets.profile') }}</option>
+					<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
+					<option value="calendar">{{ $t('@.widgets.calendar') }}</option>
+					<option value="timemachine">{{ $t('@.widgets.timemachine') }}</option>
+					<option value="activity">{{ $t('@.widgets.activity') }}</option>
+					<option value="rss">{{ $t('@.widgets.rss') }}</option>
+					<option value="trends">{{ $t('@.widgets.trends') }}</option>
+					<option value="photo-stream">{{ $t('@.widgets.photo-stream') }}</option>
+					<option value="slideshow">{{ $t('@.widgets.slideshow') }}</option>
+					<option value="version">{{ $t('@.widgets.version') }}</option>
+					<option value="broadcast">{{ $t('@.widgets.broadcast') }}</option>
+					<option value="notifications">{{ $t('@.widgets.notifications') }}</option>
+					<option value="users">{{ $t('@.widgets.users') }}</option>
+					<option value="polls">{{ $t('@.widgets.polls') }}</option>
+					<option value="post-form">{{ $t('@.widgets.post-form') }}</option>
+					<option value="messaging">{{ $t('@.widgets.messaging') }}</option>
+					<option value="memo">{{ $t('@.widgets.memo') }}</option>
+					<option value="hashtags">{{ $t('@.widgets.hashtags') }}</option>
+					<option value="posts-monitor">{{ $t('@.widgets.posts-monitor') }}</option>
+					<option value="server">{{ $t('@.widgets.server') }}</option>
+					<option value="donation">{{ $t('@.widgets.donation') }}</option>
+					<option value="nav">{{ $t('@.widgets.nav') }}</option>
+					<option value="tips">{{ $t('@.widgets.tips') }}</option>
 				</select>
 			</header>
 			<x-draggable
@@ -51,11 +51,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../i18n';
 import XColumn from './deck.column.vue';
 import * as XDraggable from 'vuedraggable';
 import * as uuid from 'uuid';
 
 export default Vue.extend({
+	i18n: i18n(),
 	components: {
 		XColumn,
 		XDraggable
@@ -83,14 +85,14 @@ export default Vue.extend({
 	computed: {
 		name(): string {
 			if (this.column.name) return this.column.name;
-			return '%i18n:common.deck.widgets%';
+			return this.$t('@deck.widgets');
 		}
 	},
 
 	created() {
 		this.menu = [{
 			icon: 'cog',
-			text: '%i18n:@edit%',
+			text: this.$t('edit'),
 			action: () => {
 				this.edit = !this.edit;
 			}