From 288049e2dcc5c8c15dc978b95b45a820ab81876f Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Mon, 1 Aug 2022 21:45:05 +0200
Subject: [PATCH] refactor: reduce usage of i18n global variables

---
 .../client/src/pages/antenna-timeline.vue     |  2 +-
 packages/client/src/pages/federation.vue      | 48 +++++++++----------
 packages/client/src/pages/miauth.vue          | 19 ++++----
 packages/client/src/ui/visitor/header.vue     | 15 +++---
 4 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 1865781a0..1eb8322b1 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
-		<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="antennaId"
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 07c5a32bd..fa93d6c04 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -6,35 +6,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>
-						<option value="all">{{ $ts.all }}</option>
-						<option value="federating">{{ $ts.federating }}</option>
-						<option value="subscribing">{{ $ts.subscribing }}</option>
-						<option value="publishing">{{ $ts.publishing }}</option>
-						<option value="suspended">{{ $ts.suspended }}</option>
-						<option value="blocked">{{ $ts.blocked }}</option>
-						<option value="notResponding">{{ $ts.notResponding }}</option>
+						<template #label>{{ i18n.ts.state }}</template>
+						<option value="all">{{ i18n.ts.all }}</option>
+						<option value="federating">{{ i18n.ts.federating }}</option>
+						<option value="subscribing">{{ i18n.ts.subscribing }}</option>
+						<option value="publishing">{{ i18n.ts.publishing }}</option>
+						<option value="suspended">{{ i18n.ts.suspended }}</option>
+						<option value="blocked">{{ i18n.ts.blocked }}</option>
+						<option value="notResponding">{{ i18n.ts.notResponding }}</option>
 					</MkSelect>
 					<MkSelect v-model="sort">
-						<template #label>{{ $ts.sort }}</template>
-						<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
-						<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
-						<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
-						<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
-						<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
-						<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
-						<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
-						<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
-						<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
-						<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
-						<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
-						<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
-						<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
-						<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
+						<template #label>{{ i18n.ts.sort }}</template>
+						<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
+						<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
+						<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
+						<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
+						<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
+						<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
+						<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
+						<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
+						<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
+						<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
+						<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
+						<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
+						<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
+						<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
 					</MkSelect>
 				</FormSplit>
 			</div>
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index a07d1368a..740498363 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -7,27 +7,27 @@
 	</div>
 	<div v-if="state == 'denied'" class="denied _section">
 		<div class="_content">
-			<p>{{ $ts._auth.denied }}</p>
+			<p>{{ i18n.ts._auth.denied }}</p>
 		</div>
 	</div>
 	<div v-else-if="state == 'accepted'" class="accepted _section">
 		<div class="_content">
-			<p v-if="callback">{{ $ts._auth.callback }}<MkEllipsis/></p>
-			<p v-else>{{ $ts._auth.pleaseGoBack }}</p>
+			<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
+			<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
 		</div>
 	</div>
 	<div v-else class="_section">
-		<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
-		<div v-else class="_title">{{ $ts._auth.shareAccessAsk }}</div>
+		<div v-if="name" class="_title">{{ i18n.t('_auth.shareAccess', { name: name }) }}</div>
+		<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
 		<div class="_content">
-			<p>{{ $ts._auth.permissionAsk }}</p>
+			<p>{{ i18n.ts._auth.permissionAsk }}</p>
 			<ul>
-				<li v-for="p in permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+				<li v-for="p in permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
 			</ul>
 		</div>
 		<div class="_footer">
-			<MkButton inline @click="deny">{{ $ts.cancel }}</MkButton>
-			<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
+			<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
+			<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
 		</div>
 	</div>
 </div>
@@ -43,6 +43,7 @@ import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { login } from '@/account';
 import { appendQuery, query } from '@/scripts/url';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	session: string;
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index b01c147c5..71d393284 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -2,10 +2,10 @@
 <div ref="header" class="sqxihjet">
 	<div v-if="narrow === false" class="wide">
 		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
-			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ i18n.ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ i18n.ts.explore }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ i18n.ts.featured }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ i18n.ts.channel }}</MkA>
 			<div v-if="info" class="page active link">
 				<div class="title">
 					<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -18,9 +18,9 @@
 				</button>
 			</div>
 			<div class="right">
-				<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
-				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
+				<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ i18n.ts.search }}</span></button>
+				<button class="_buttonPrimary signup" @click="signup()">{{ i18n.ts.signup }}</button>
+				<button class="_button login" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
 	</div>
@@ -47,6 +47,7 @@ import XSigninDialog from '@/components/signin-dialog.vue';
 import XSignupDialog from '@/components/signup-dialog.vue';
 import * as os from '@/os';
 import { search } from '@/scripts/search';
+import { i18n } from '@/i18n';
 
 defineProps<{
 	info: any;