From aa2f401a85f0c0a8ba25ff6bdf533b569eb3166f Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Tue, 2 Aug 2022 12:02:28 +0200
Subject: [PATCH] refactor: reduce use of global variables

---
 .../src/components/file-list-for-admin.vue      |  4 ++--
 packages/client/src/components/form-dialog.vue  | 15 ++++++++-------
 packages/client/src/components/global/acct.vue  |  3 ++-
 .../client/src/components/global/avatar.vue     |  4 ++--
 packages/client/src/components/global/error.vue |  3 ++-
 packages/client/src/components/launch-pad.vue   |  6 +++---
 packages/client/src/components/media-banner.vue |  5 +++--
 .../client/src/components/media-caption.vue     |  5 +++--
 packages/client/src/components/media-video.vue  |  5 +++--
 packages/client/src/components/mention.vue      |  3 ++-
 packages/client/src/components/mfm-search.vue   |  3 ++-
 packages/client/src/ui/visitor/b.vue            | 17 +++++++++--------
 12 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
index 04427de45..5f077466d 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -15,14 +15,14 @@
 				</div>
 				<div>
 					<MkAcct v-if="file.user" :user="file.user"/>
-					<div v-else>{{ $ts.system }}</div>
+					<div v-else>{{ i18n.ts.system }}</div>
 				</div>
 				<div>
 					<span style="margin-right: 1em;">{{ file.type }}</span>
 					<span>{{ bytes(file.size) }}</span>
 				</div>
 				<div>
-					<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
 				</div>
 			</div>
 		</MkA>
diff --git a/packages/client/src/components/form-dialog.vue b/packages/client/src/components/form-dialog.vue
index f6e547655..fd51936eb 100644
--- a/packages/client/src/components/form-dialog.vue
+++ b/packages/client/src/components/form-dialog.vue
@@ -8,7 +8,7 @@
 	@click="cancel()"
 	@ok="ok()"
 	@close="cancel()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 >
 	<template #header>
 		{{ title }}
@@ -18,15 +18,15 @@
 		<div class="xkpnjxcv _formRoot">
 			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
 				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</FormInput>
 				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</FormInput>
 				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</FormTextarea>
 				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
@@ -34,15 +34,15 @@
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</FormSwitch>
 				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<option v-for="blockItem in form[item].enum" :key="blockItem.value" :value="blockItem.value">{{ blockItem.label }}</option>
 				</FormSelect>
 				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<option v-for="blockItem in form[item].options" :key="blockItem.value" :value="blockItem.value">{{ blockItem.label }}</option>
 				</FormRadios>
 				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</FormRange>
 				<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
@@ -64,6 +64,7 @@ import FormRange from './form/range.vue';
 import MkButton from './ui/button.vue';
 import FormRadios from './form/radios.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
+import { i18n } from '@/i18n';
 
 let dialog = $ref<InstanceType<typeof XModalWindow>>();
 let values: Record<string, any> = $ref({});
diff --git a/packages/client/src/components/global/acct.vue b/packages/client/src/components/global/acct.vue
index c3e806b5f..c35da458b 100644
--- a/packages/client/src/components/global/acct.vue
+++ b/packages/client/src/components/global/acct.vue
@@ -1,7 +1,7 @@
 <template>
 <span class="mk-acct">
 	<span class="name">@{{ user.username }}</span>
-	<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
+	<span v-if="user.host || detail || defaultStore.state.showFullAcct" class="host">@{{ user.host || host }}</span>
 </span>
 </template>
 
@@ -9,6 +9,7 @@
 import * as misskey from 'misskey-js';
 import { toUnicode } from 'punycode/';
 import { host as hostRaw } from '@/config';
+import { defaultStore } from '@/store';
 
 defineProps<{
 	user: misskey.entities.UserDetailed;
diff --git a/packages/client/src/components/global/avatar.vue b/packages/client/src/components/global/avatar.vue
index 4868896c9..1d0862761 100644
--- a/packages/client/src/components/global/avatar.vue
+++ b/packages/client/src/components/global/avatar.vue
@@ -1,9 +1,9 @@
 <template>
-<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
+<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>
diff --git a/packages/client/src/components/global/error.vue b/packages/client/src/components/global/error.vue
index 5e676f8cf..11130a5c3 100644
--- a/packages/client/src/components/global/error.vue
+++ b/packages/client/src/components/global/error.vue
@@ -1,5 +1,5 @@
 <template>
-<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+<transition :name="defaultStore.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> {{ i18n.ts.somethingHappened }}</p>
@@ -11,6 +11,7 @@
 <script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
 import { i18n } from '@/i18n';
+import { defaultSTore } from '@/store';
 
 const emit = defineEmits<{
 	(ev: 'retry'): void;
diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index ffefc1b08..0c4df6584 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -18,15 +18,15 @@
 		<div class="sub">
 			<a v-click-anime href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()">
 				<i class="fas fa-question-circle icon"></i>
-				<div class="text">{{ $ts.help }}</div>
+				<div class="text">{{ i18n.ts.help }}</div>
 			</a>
 			<MkA v-click-anime to="/about" @click.passive="close()">
 				<i class="fas fa-info-circle icon"></i>
-				<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
+				<div class="text">{{ i18n.t('aboutX', { x: instanceName }) }}</div>
 			</MkA>
 			<MkA v-click-anime to="/about-misskey" @click.passive="close()">
 				<img src="/static-assets/favicon.png" class="icon"/>
-				<div class="text">{{ $ts.aboutMisskey }}</div>
+				<div class="text">{{ i18n.ts.aboutMisskey }}</div>
 			</MkA>
 		</div>
 	</div>
diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index 5093f11e9..43cdf576b 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -2,8 +2,8 @@
 <div class="mk-media-banner">
 	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
 		<span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
-		<b>{{ $ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
+		<b>{{ i18n.ts.sensitive }}</b>
+		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
 		<audio ref="audioEl"
@@ -29,6 +29,7 @@
 import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import { ColdDeviceStorage } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	media: misskey.entities.DriveFile;
diff --git a/packages/client/src/components/media-caption.vue b/packages/client/src/components/media-caption.vue
index bb819d9c1..deea5207e 100644
--- a/packages/client/src/components/media-caption.vue
+++ b/packages/client/src/components/media-caption.vue
@@ -9,8 +9,8 @@
 				</header>
 				<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
 				<div v-if="(showOkButton || showCancelButton)" class="buttons">
-					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
-					<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
+					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
+					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -35,6 +35,7 @@ import MkModal from '@/components/ui/modal.vue';
 import MkButton from '@/components/ui/button.vue';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 type Input = {
 	placeholder?: string;
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 5c38691e6..68fa015e9 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -1,8 +1,8 @@
 <template>
 <div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
 	<div>
-		<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
+		<b><i class="fas fa-exclamation-triangle"></i> {{ i18n.ts.sensitive }}</b>
+		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
@@ -27,6 +27,7 @@
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/mention.vue
index 2c8bc0c04..6f522a8ad 100644
--- a/packages/client/src/components/mention.vue
+++ b/packages/client/src/components/mention.vue
@@ -3,7 +3,7 @@
 	<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.mainHost">@{{ toUnicode(host) }}</span>
+		<span v-if="(host != localHost) || defaultStore.state.showFullAcct" :class="$style.mainHost">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
 <a v-else :class="$style.root" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
@@ -20,6 +20,7 @@ import { useCssModule } from 'vue';
 import tinycolor from 'tinycolor2';
 import { host as localHost } from '@/config';
 import { $i } from '@/account';
+import { defaultStore } fromn '@/store';
 
 const props = defineProps<{
 	username: string;
diff --git a/packages/client/src/components/mfm-search.vue b/packages/client/src/components/mfm-search.vue
index eb7f3cafc..8cb1c685d 100644
--- a/packages/client/src/components/mfm-search.vue
+++ b/packages/client/src/components/mfm-search.vue
@@ -1,12 +1,13 @@
 <template>
 <div class="mk-search">
 	<input v-model="query" type="search" :placeholder="q">
-	<button><i class="fas fa-search"></i> {{ $ts.search }}</button>
+	<button><i class="fas fa-search"></i> {{ i18n.ts.search }}</button>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	q: string;
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 28933f272..144a83ccb 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -21,7 +21,7 @@
 		</div>
 	</div>
 
-	<transition :name="$store.state.animation ? 'tray-back' : ''">
+	<transition :name="defaultStore.state.animation ? 'tray-back' : ''">
 		<div
 			v-if="showMenu"
 			class="menu-back _modalBg"
@@ -30,15 +30,15 @@
 		></div>
 	</transition>
 
-	<transition :name="$store.state.animation ? 'tray' : ''">
+	<transition :name="defaultStore.state.animation ? 'tray' : ''">
 		<div v-if="showMenu" class="menu">
-			<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 class="action">
-				<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ $ts.login }}</button>
+				<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
+				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
 	</transition>
@@ -59,6 +59,7 @@ import MkButton from '@/components/ui/button.vue';
 import { ColdDeviceStorage, defaultStore } from '@/store';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
 const DESKTOP_THRESHOLD = 1100;